@rio-cloud/rio-uikit 0.16.3-beta.2 → 0.16.3-beta.3

package/lib/es/components/bottomSheet/BottomSheet.js

@@ -16,7 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _framerMotion = require("framer-motion");
 var _isFunction = _interopRequireDefault(require("lodash/fp/isFunction"));
 var _portalRoot = require("../../utils/portalRoot");
-var _excluded = ["show", "onClose", "width", "height", "title", "detatch", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children"];
+var _excluded = ["show", "onClose", "width", "height", "title", "detach", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var OFFSET_POSITION = -1000;
@@ -26,7 +26,7 @@ var BottomSheet = function BottomSheet(props) {
     width = props.width,
     height = props.height,
     title = props.title,
-    detatch = props.detatch,
+    detach = props.detach,
     useBackdrop = props.useBackdrop,
     showCloseButton = props.showCloseButton,
     showMaximizeButton = props.showMaximizeButton,
@@ -56,14 +56,23 @@ var BottomSheet = function BottomSheet(props) {
       setIsShown(newValue);
     }
   };
+  (0, _react.useEffect)(function () {
+    setIsShown(show);
+  }, [show]);
   var handleMaximize = function handleMaximize() {
     var newValue = !isMaxHeight;
     setIsMaxHeight(newValue);
     onHeightChange();
   };
-  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 sheetClasses = (0, _classnames["default"])('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
+  var sheetBodyClasses = (0, _classnames["default"])('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
   var sheetHeight = isMaxHeight ? window.innerHeight : height;
+
+  // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.
+  // Unmounting it will lead to loosing the reference and breaking the functionality that is implemented on that ref.
+  // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
+  // Instead we change the "animate" values.
+
   return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, (0, _extends2["default"])({}, remainigProps, {
     className: sheetClasses,
     width: width,
@@ -71,20 +80,14 @@ var BottomSheet = function BottomSheet(props) {
       opacity: 0
     },
     animate: {
-      opacity: 1,
+      opacity: isShown ? 1 : 0,
       y: 0,
       bottom: isShown ? 0 : OFFSET_POSITION,
-      height: sheetHeight
-    },
-    exit: {
-      opacity: 0,
-      transition: {
-        duration: 0.3
-      },
-      bottom: OFFSET_POSITION,
-      height: sheetHeight
+      height: isShown ? sheetHeight : 0
     }
-  }), /*#__PURE__*/_react["default"].createElement("div", null, title && /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "bottom-sheet-header"
+  }, 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'
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "text-size-18"
@@ -101,16 +104,16 @@ var BottomSheet = function BottomSheet(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "height-5 width-40 rounded bg-lighter"
   }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: sheetBodyCasses,
+    className: sheetBodyClasses,
     ref: bodyRef
-  }, children)), useBackdrop && isShown && /*#__PURE__*/_react["default"].createElement("div", {
+  }, isShown && children)), useBackdrop && isShown && /*#__PURE__*/_react["default"].createElement("div", {
     className: "bottom-sheet-backdrop",
     onClick: handleToggle
   })), modalRoot);
 };
 BottomSheet.defaultProps = {
   show: false,
-  detatch: false,
+  detach: false,
   useBackdrop: false,
   showCloseButton: true,
   showMaximizeButton: false,
@@ -125,7 +128,7 @@ BottomSheet.propTypes = {
   showCloseButton: _propTypes["default"].bool,
   showMaximizeButton: _propTypes["default"].bool,
   onHeightChange: _propTypes["default"].func,
-  detatch: _propTypes["default"].bool,
+  detach: _propTypes["default"].bool,
   useBackdrop: _propTypes["default"].bool,
   onBackdropClick: _propTypes["default"].func,
   bodyRef: _propTypes["default"].object,

package/lib/es/components/fade/Fade.js

@@ -1,17 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _framerMotion = require("framer-motion");
-var _logDeprecatedWarnings = _interopRequireDefault(require("../../utils/logDeprecatedWarnings"));
 var _isArray = _interopRequireDefault(require("lodash/fp/isArray"));
 var _head = _interopRequireDefault(require("lodash/fp/head"));
+var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
+var _logDeprecatedWarnings = _interopRequireDefault(require("../../utils/logDeprecatedWarnings"));
+var _useAfterMount = _interopRequireDefault(require("../../useAfterMount"));
+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; }
+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) { (0, _defineProperty2["default"])(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; }
 var warningProps = [{
   prop: 'in',
   replacement: 'show'
@@ -179,7 +188,16 @@ var Fade = function Fade(props) {
     duration = duration / 100;
   }
   var show = props.show || oldIn;
-  var initial = props.initial || appear;
+  var initial = (0, _isNil["default"])(appear) ? props.initial : appear;
+  var _useState = (0, _react.useState)(initial),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    allowInitialAnimation = _useState2[0],
+    setAllowInitialAnimation = _useState2[1];
+  (0, _useAfterMount["default"])(function () {
+    if (!allowInitialAnimation) {
+      setAllowInitialAnimation(true);
+    }
+  });
   var motionDivKey = 'fade';
 
   // If there are multiple children that are conditionally rendered like
@@ -200,14 +218,15 @@ var Fade = function Fade(props) {
   var pageTransitionProps = isPageTransition ? {
     variants: pageTransitionVariants
   } : null;
-  var animationProps = animations[animationStyle];
+  var animationProps = _objectSpread({}, animations[animationStyle]);
 
-  // Disable initial animation
-  if (!initial) {
+  // Disable initial animation on mount. After mount the initial animation step is needed to enable
+  // the "fade-in" animation, otherwise it just appears
+  if (!allowInitialAnimation) {
     animationProps.initial = false;
   }
   return /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, (0, _extends2["default"])({
-    initial: initial,
+    initial: allowInitialAnimation,
     exitBeforeEnter: exitBeforeEnter,
     onExitComplete: onExitComplete,
     custom: custom

package/lib/es/components/map/components/features/basics/marker/DomMarker.js

@@ -18,7 +18,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 // Should be deprecated...
 // Here Documentation:
-//     It should be only used where small numbers of markers with dynamic style and/or scripted icons are to be displayed 
+//     It should be only used where small numbers of markers with dynamic style and/or scripted icons are to be displayed
 //     on the map (for example animated interactive SVG). Otherwise a H.map.Marker should be preferred for performance reasons.
 //
 var DomMarker = /*#__PURE__*/function (_React$Component) {

package/lib/es/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -18,6 +18,7 @@ var _chunk = _interopRequireDefault(require("lodash/fp/chunk"));
 var _framerMotion = require("framer-motion");
 var _useAfterMount = _interopRequireDefault(require("../../hooks/useAfterMount"));
 var _useElementSize3 = _interopRequireDefault(require("../../hooks/useElementSize"));
+var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
 var _excluded = ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"];
 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; }
@@ -31,21 +32,19 @@ var ANIMATION_DURATION = 0.2;
 var ANIMATION_NEXT = 'page';
 var ANIMATION_BACK = 'pageBack';
 var COLUMN_ITEM_CLASSNAME = 'ColumnItem';
-var pageTransitionVariants = function pageTransitionVariants(pageDirection) {
-  return {
-    pageEnter: function pageEnter() {
-      return {
-        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-        opacity: 0
-      };
-    },
-    pageCenter: function pageCenter() {
-      return {
-        x: 0,
-        opacity: 1
-      };
-    }
-  };
+var variants = {
+  pageEnter: function pageEnter(pageDirection) {
+    return {
+      x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+      opacity: 0
+    };
+  },
+  pageCenter: function pageCenter() {
+    return {
+      x: 0,
+      opacity: 1
+    };
+  }
 };
 var getFirstColumnItem = function getFirstColumnItem(node) {
   if ((0, _toConsumableArray2["default"])(node.classList).includes(COLUMN_ITEM_CLASSNAME)) {
@@ -97,10 +96,6 @@ var ResponsiveColumnStripe = /*#__PURE__*/(0, _react.forwardRef)(function (props
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     isResizePage = _useState8[0],
     setIsResizePage = _useState8[1];
-  var _useState9 = (0, _react.useState)(ANIMATION_NEXT),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    animationDirection = _useState10[0],
-    setAnimationDirection = _useState10[1];
 
   // The base for reacting on changing width of the wrapping element.
   // It uses a ResizeObserver under the hood.
@@ -108,16 +103,21 @@ var ResponsiveColumnStripe = /*#__PURE__*/(0, _react.forwardRef)(function (props
   var _useElementSize = (0, _useElementSize3["default"])(columnWrapperRef),
     _useElementSize2 = (0, _slicedToArray2["default"])(_useElementSize, 1),
     columnWrapperWidth = _useElementSize2[0];
+  var previousPage = (0, _usePrevious["default"])(currentPage);
+  var animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
   (0, _useAfterMount["default"])(function () {
     setEnableInitialAnimation(true);
   });
 
   // Update active page from outside to be used as controlled component
-  (0, _react.useEffect)(function () {
-    if (Number.isFinite(activePage)) {
-      setCurrentPage(activePage);
-    }
-  }, [activePage]);
+  var _useState9 = (0, _react.useState)(activePage),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    previousActivePage = _useState10[0],
+    setPreviousActivePage = _useState10[1];
+  if (Number.isFinite(activePage) && activePage !== previousActivePage) {
+    setCurrentPage(activePage);
+    setPreviousActivePage(activePage);
+  }
   var updatePageOnColumnsSizeChange = function updatePageOnColumnsSizeChange(firstItem, columnsPerPage, children) {
     // Split children in page chunks
     var itemChunks = (0, _chunk["default"])(columnsPerPage)(children);
@@ -178,14 +178,12 @@ var ResponsiveColumnStripe = /*#__PURE__*/(0, _react.forwardRef)(function (props
   }, [columnWrapperWidth, columnWrapperRef.current, children]);
   var handlePrevClick = function handlePrevClick() {
     setIsResizePage(false);
-    setAnimationDirection(ANIMATION_BACK);
     var pageNumber = currentPage - 1;
     setCurrentPage(pageNumber);
     onPreviousClick(pageNumber, columnsPerPage);
   };
   var handleNextClick = function handleNextClick() {
     setIsResizePage(false);
-    setAnimationDirection(ANIMATION_NEXT);
     var pageNumber = currentPage + 1;
     setCurrentPage(pageNumber);
     onNextClick(pageNumber, columnsPerPage);
@@ -232,12 +230,14 @@ var ResponsiveColumnStripe = /*#__PURE__*/(0, _react.forwardRef)(function (props
     className: "ColumnsArea flex-1-1 overflow-hidden",
     ref: columnWrapperRef
   }, disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, {
-    exitBeforeEnter: true
+    exitBeforeEnter: true,
+    custom: animationDirection
   }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
     key: currentPage,
-    variants: pageTransitionVariants(animationDirection),
+    variants: variants,
     initial: enableInitialAnimation ? 'pageEnter' : false,
     animate: "pageCenter",
+    custom: animationDirection,
     transition: {
       duration: ANIMATION_DURATION
     }

package/lib/es/hooks/useDebugInfo.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _useRenderCount = _interopRequireDefault(require("./useRenderCount"));
 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) { (0, _defineProperty2["default"])(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; }
-var logStyle = ["color: #4c5667", "background-color: #e5ebf0", "padding: 2px 4px", "border-radius: 2px"].join(";");
+var logStyle = ['color: #4c5667', 'background-color: #e5ebf0', 'padding: 2px 4px', 'border-radius: 2px'].join(';');
 function useDebugInfo(componentName, props) {
   var renderCount = (0, _useRenderCount["default"])();
   var changedProps = (0, _react.useRef)({});

package/lib/es/hooks/usePrevious.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = usePrevious;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+function usePrevious(state) {
+  // Based on the react beta docs, we avoid using an effect and a ref here but
+  // use another state to store the previous value to compare to.
+  // See: https://beta.reactjs.org/reference/react/useState#storing-information-from-previous-renders
+
+  // [previousState currentState]
+  var _useState = (0, _react.useState)([null, state]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tuple = _useState2[0],
+    setTuple = _useState2[1];
+  if (tuple[1] !== state) {
+    // Set the new given state value and store the old state as pervious value
+    setTuple([tuple[1], state]);
+  }
+  return tuple[0];
+}

package/lib/es/index.js

@@ -98,6 +98,7 @@ var _exportNames = {
   useScrollPosition: true,
   useDarkMode: true,
   useMutationObserver: true,
+  usePrevious: true,
   hasTouch: true,
   inIframe: true,
   isDesktop: true,
@@ -991,6 +992,12 @@ Object.defineProperty(exports, "useOnMount", {
     return _useOnMount["default"];
   }
 });
+Object.defineProperty(exports, "usePrevious", {
+  enumerable: true,
+  get: function get() {
+    return _usePrevious["default"];
+  }
+});
 Object.defineProperty(exports, "useScrollPosition", {
   enumerable: true,
   get: function get() {
@@ -1107,6 +1114,7 @@ var _useElementSize = _interopRequireDefault(require("./hooks/useElementSize"));
 var _useScrollPosition = _interopRequireDefault(require("./hooks/useScrollPosition"));
 var _useDarkMode = _interopRequireDefault(require("./hooks/useDarkMode"));
 var _useMutationObserver = _interopRequireDefault(require("./hooks/useMutationObserver"));
+var _usePrevious = _interopRequireDefault(require("./hooks/usePrevious"));
 var _deviceUtils = require("./utils/deviceUtils");
 var _colorScheme = require("./utils/colorScheme");
 var _GroupSelectionUtil = require("./utils/GroupSelectionUtil");

package/lib/es/styles/components/BottomSheet.less

@@ -9,5 +9,14 @@
     position: absolute;
     inset: 0;
     z-index: @z-index-bottom-sheet - 1;
-    background: .hsla(@always-color-black-hsl, 0.5)[@result];
+    background-color: .hsla(@color-black-hsl, 0.5)[@result];
+
+    [data-theme*="dark"] & {
+      background-color: .hsla(@gray-darkest-hsl, 0.3)[@result];
+    }
+
+    @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
+      opacity: 0.99;
+      backdrop-filter: blur(1px);
+    }
 }

package/lib/es/styles/components/Dialog.less

@@ -4,10 +4,12 @@
 @modal-title-x-padding: 20px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
-@modal-backdrop-bg: var(--always-color-black);
 @modal-header-border-color: var(--gray-lighter);
 @modal-footer-border-color: var(--gray-lighter);
 
+// Animation variables
+@modal-animation-transition: all 200ms ease-out;
+
 // Custom variables
 @modal-sm: @screen-xs;
 @modal-md: @screen-sm;
@@ -283,6 +285,23 @@ body {
             }
           }
         }
+
+        // .modal-footer {
+        //   &:before {
+        //     content: '';
+        //     height: 20px;
+        //     left: 0;
+        //     pointer-events: none;
+        //     position: absolute;
+        //     top: -21px;
+        //     width: 100%;
+        //     background: linear-gradient(
+        //       0deg,
+        //       .hsla(@color-white-hsl, 1.0)[@result],
+        //       .hsla(@color-white-hsl, 0)[@result],
+        //     );
+        //   }
+        // }
       }
     }
 
@@ -327,24 +346,16 @@ body {
   }
 
   .modal-backdrop {
-    background-color: @modal-backdrop-bg;
     bottom: 0;
     display: block;
     left: 0;
-    opacity: 0.5;
     position: fixed;
     right: 0;
     top: 0;
+    transition: @modal-animation-transition;
     z-index: @zindex-modal-background;
 
-    // Fade for backdrop
-    &.fade { opacity: 0 }
-    &.in { opacity: 0.5 }
-
-    // Bluring
     @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
-      opacity: 0.99;
-      background-color: .hsla(@always-color-black-hsl, 0.5)[@result];
       backdrop-filter: blur(1px);
     }
   }
@@ -460,11 +471,17 @@ body {
   .modal-content {
     display: block;
     opacity: 0;
-    transform: translate(0, -25%);
+    transform: translateY(-25%);
   }
+}
 
+[class*="modal-enter"] {
   .modal-backdrop {
-    opacity: 0;
+    background-color: .hsla(@color-black-hsl, 0.5)[@result];
+
+    [data-theme*="dark"] & {
+      background-color: .hsla(@gray-darkest-hsl, 0.3)[@result];
+    }
   }
 }
 
@@ -472,13 +489,8 @@ body {
   .modal-content {
     display: block;
     opacity: 1;
-    transform: translate(0, 0);
-    transition: all 200ms ease-out;
-  }
-
-  .modal-backdrop {
-    opacity: 0.5;
-    transition: all 200ms ease-out;
+    transform: translateY(0);
+    transition: @modal-animation-transition;
   }
 }
 
@@ -486,32 +498,14 @@ body {
   .modal-content {
     opacity: 0;
     transform: translateY(-50%);
-    transition: all 200ms ease-out;
+    transition: @modal-animation-transition;
   }
 
   .modal-backdrop {
-    opacity: 0;
-  }
-}
+    background-color: .hsla(@color-black-hsl, 0.0)[@result];
 
-// modal-body atomic vh classes for iframes with unknown height
-// .modal-body {
-//   &.height-100vh {
-//     height: calc(~"var(--vh, 1vh) * 100 - 190px") !important;
-
-//     @media (max-width: @modal-sm) {
-//       height: calc(~"var(--vh, 1vh) * 100 - 170px") !important;
-//     }
-//   }
-
-//   // no modal-footer version
-//   &:last-child {
-//     &.height-100vh {
-//       height: calc(~"var(--vh, 1vh) * 100 - 120px") !important;
-
-//       @media (max-width: @modal-sm) {
-//         height: calc(~"var(--vh, 1vh) * 100 - 90px") !important;
-//       }
-//     }
-//   }
-// }
+    [data-theme*="dark"] & {
+      background-color: .hsla(@gray-darkest-hsl, 0.0)[@result];
+    }
+  }
+}

package/lib/es/styles/components/Sidebar.less

@@ -160,6 +160,15 @@
 
 .SidebarBackdrop {
   &.sidebar-backdrop-bg {
-    background: .hsla(@always-color-black-hsl, 0.6)[@result];
+    background-color: .hsla(@color-black-hsl, 0.5)[@result];
+
+    [data-theme*="dark"] & {
+      background-color: .hsla(@gray-darkest-hsl, 0.3)[@result];
+    }
+
+    @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
+      opacity: 0.99;
+      backdrop-filter: blur(1px);
+    }
   }
 }

package/lib/es/styles/design/popovers.less

@@ -16,7 +16,7 @@
   z-index: @zindex-popover;
 
   .popover-title {
-    border-bottom: 1px solid var(--gray-light);
+    border-bottom: 1px solid var(--gray-lighter);
     padding: 13px 14px;
     font-weight: normal;
   }

package/lib/es/styles/design/utilities.less

@@ -12,12 +12,20 @@
   &-margin-top-0:first-child {
     margin-top: 0 !important;
   }
+
+  &-border-top-none:first-child {
+    border-top: none !important;
+  }
 }
 
 .last-child {
   &-margin-bottom-0:last-child {
     margin-bottom: 0 !important;
   }
+
+  &-border-bottom-none:last-child {
+    border-bottom: none !important;
+  }
 }
 
 .clearance {