@megafon/ui-core 3.0.2 → 3.1.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.2...@megafon/ui-core@3.1.0) (2022-02-22)
+
+
+### Bug Fixes
+
+* **carousel:** add resize listener to nav display ([12abd93](https://github.com/MegafonWebLab/megafon-ui/commit/12abd93d226676d2c4f78968c9d5de032783ec8d))
+* **colors:** fix colors usage ([f2f59a8](https://github.com/MegafonWebLab/megafon-ui/commit/f2f59a81644c157394817af1531dabb1c0b67b19))
+* **components:** better view of default props values ([1817ed5](https://github.com/MegafonWebLab/megafon-ui/commit/1817ed5cd17fd78a0911a89020138f05d7af9833))
+* **contentarea:** add 'black' color prop value; deprecate 'default' color prop value; more examples ([e0b0c72](https://github.com/MegafonWebLab/megafon-ui/commit/e0b0c723a37f0e42ccb1c0d30df8ae36e9c82920))
+
+
+### Features
+
+* **banner:** add opacity for slides ([bb403a1](https://github.com/MegafonWebLab/megafon-ui/commit/bb403a1d38fd0c1efd3e1df3ed72ea4e5c772c40))
+* **collapse:** changed collapse animation via setTimeout to requestAnimationFrame ([06d7b4f](https://github.com/MegafonWebLab/megafon-ui/commit/06d7b4ff0f3cdf3cc22fb1d45e8401e259636cf5))
+* **ui-core:** add dataAttrs prop for interactive elements of components that did not have ([f495833](https://github.com/MegafonWebLab/megafon-ui/commit/f495833b33ac7823ae5992a3f7eb8b7cef82c036))
+
+
+
+
+
 ## [3.0.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.1...@megafon/ui-core@3.0.2) (2022-02-15)
 
 
@@ -76,7 +97,7 @@ remove depreacted value 'freshAsphalt'
 * **contentarea**, **paragraph**, **storebanner** and **breadcrumbs** components from no don't have
 'freshAsphalt' and 'clearWhite' as values for colorizing props
 * **paragraph:** remove from color prop values: 'spbSky0', 'spbSky1', 'spbSky2'
-* **paragraph**: prop color change values from 'base' to 'white' and from 'contend' to 'default';
+* **paragraph**: prop color change values from 'base' to 'white' and from 'content' to 'default';
 remove deprecared values 'freshAsphalt' and 'clearWhite'
 * **storebanner**: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
 * **tooltip:** change onOpen, onClose types; AccessibilityEventTypeNative from @megafon/ui-helpers

package/dist/es/components/Banner/Banner.css

@@ -17,6 +17,15 @@
     height: 540px;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-banner__slide {
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s;
+    transition: opacity 0.2s;
+  }
+}
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
   .mfui-banner__slide {
     height: 420px;
@@ -27,6 +36,13 @@
     height: 400px;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-banner .swiper-slide-visible {
+    opacity: 1;
+    -webkit-transition: opacity 0.4s;
+    transition: opacity 0.4s;
+  }
+}
 .mfui-banner__arrow {
   position: absolute;
   top: 50%;

package/dist/es/components/Banner/Banner.js

@@ -159,6 +159,7 @@ var Banner = function Banner(_ref) {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    watchSlidesVisibility: true,
     onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
@@ -171,14 +172,20 @@ var Banner = function Banner(_ref) {
       key: i,
       className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
     }), child);
-  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev), {
+  })), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
+    },
     className: cn('arrow', {
       prev: true
     }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: navArrowTheme
-  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext), {
+  }), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
+    },
     className: cn('arrow', {
       next: true
     }, [classes.arrow]),
@@ -186,7 +193,7 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: navArrowTheme
-  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
       theme: navTheme,
       'bottom-offset': withPaginationBottomOffset

package/dist/es/components/Button/Button.css

@@ -302,14 +302,14 @@
   fill: var(--stcWhite);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white {
-  --base7: rgba(255, 255, 255, 0.07);
-  --base14: rgba(255, 255, 255, 0.14);
+  --stcWhite7: rgba(255, 255, 255, 0.07);
+  --stcWhite14: rgba(255, 255, 255, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):hover {
-  background-color: var(--base7);
+  background-color: var(--stcWhite7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):active {
-  background-color: var(--base14);
+  background-color: var(--stcWhite14);
 }
 .mfui-button_type_outline.mfui-button_theme_black {
   color: var(--stcBlack);
@@ -321,14 +321,14 @@
   fill: var(--stcBlack);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black {
-  --content7: rgba(51, 51, 51, 0.07);
-  --content14: rgba(51, 51, 51, 0.14);
+  --stcBlack7: rgba(51, 51, 51, 0.07);
+  --stcBlack14: rgba(51, 51, 51, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):hover {
-  background-color: var(--content7);
+  background-color: var(--stcBlack7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):active {
-  background-color: var(--content14);
+  background-color: var(--stcBlack14);
 }
 .mfui-button_full-width {
   display: block;

package/dist/es/components/Calendar/Calendar.d.ts

@@ -1,6 +1,14 @@
 import React from 'react';
 import './Calendar.less';
 export interface ICalendarProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        day?: Record<string, string>;
+        month?: Record<string, string>;
+        arrowLeft?: Record<string, string>;
+        arrowRight?: Record<string, string>;
+    };
     /** Переключение календаря в режим выбора одной даты вместо периода */
     isSingleDate?: boolean;
     /** Классы для модификации компонента */

package/dist/es/components/Calendar/Calendar.js

@@ -22,7 +22,7 @@ var __rest = this && this.__rest || function (s, e) {
 
 import React, { useState, useEffect, useMemo } from 'react';
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import differenceInDays from 'date-fns/differenceInDays';
 import format from 'date-fns/format';
 import isAfter from 'date-fns/isAfter';
@@ -57,7 +57,8 @@ var monthLabelFormat = function monthLabelFormat(date) {
 var cn = cnCreate('mfui-calendar');
 
 var Calendar = function Calendar(_ref) {
-  var _ref$isSingleDate = _ref.isSingleDate,
+  var dataAttrs = _ref.dataAttrs,
+      _ref$isSingleDate = _ref.isSingleDate,
       isSingleDate = _ref$isSingleDate === void 0 ? false : _ref$isSingleDate,
       _ref$startDate = _ref.startDate,
       startDate = _ref$startDate === void 0 ? null : _ref$startDate,
@@ -202,6 +203,9 @@ var Calendar = function Calendar(_ref) {
         }
 
         return /*#__PURE__*/React.createElement(Day, _extends({
+          dataAttrs: {
+            root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.day, index + 1))
+          },
           date: date,
           key: formatDate(date, 'dd-MM-yyyy'),
           dayLabel: dayLabel
@@ -240,6 +244,11 @@ var Calendar = function Calendar(_ref) {
       var isPrevMonthDisabled = !!minBookingDate && isSameMonth(new Date(year, month, 1), minBookingDate);
       var isNextMonthDisabled = !!maxBookingDate && isSameMonth(new Date(year, month, 1), maxBookingDate);
       return /*#__PURE__*/React.createElement(Month, {
+        dataAttrs: {
+          root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.month,
+          arrowLeft: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft,
+          arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
+        },
         key: "".concat(year, "-").concat(month),
         year: year,
         weekdayLabels: weekdayLabels,
@@ -252,12 +261,19 @@ var Calendar = function Calendar(_ref) {
     });
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className])
-  }, renderMonths());
+  }), renderMonths());
 };
 
 Calendar.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    day: PropTypes.objectOf(PropTypes.string.isRequired),
+    month: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowLeft: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowRight: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   isSingleDate: PropTypes.bool,
   className: PropTypes.string,
   startDate: PropTypes.instanceOf(Date),

package/dist/es/components/Calendar/components/Day/Day.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import './Day.less';
 export interface IDayPickerProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     isDateSelected: (date: Date) => boolean;
     isDateHovered: (date: Date) => boolean;
     isFirstOrLastSelectedDate: (date: Date) => boolean;

package/dist/es/components/Calendar/components/Day/Day.js

@@ -18,7 +18,7 @@ var __rest = this && this.__rest || function (s, e) {
 
 import React from 'react';
 import { useDay } from '@datepicker-react/hooks';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import isFirstDayOfMonth from 'date-fns/isFirstDayOfMonth';
 import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
 import isMonday from 'date-fns/isMonday';
@@ -28,12 +28,13 @@ import "./Day.css";
 var cn = cnCreate('mfui-day');
 
 var Day = function Day(_a) {
-  var _a$isBetween = _a.isBetween,
+  var dataAttrs = _a.dataAttrs,
+      _a$isBetween = _a.isBetween,
       isBetween = _a$isBetween === void 0 ? false : _a$isBetween,
       dayLabel = _a.dayLabel,
       date = _a.date,
       onMouseLeave = _a.onMouseLeave,
-      pickerProps = __rest(_a, ["isBetween", "dayLabel", "date", "onMouseLeave"]);
+      pickerProps = __rest(_a, ["dataAttrs", "isBetween", "dayLabel", "date", "onMouseLeave"]);
 
   var dayRef = React.useRef(null);
 
@@ -63,7 +64,7 @@ var Day = function Day(_a) {
     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
   };
 
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     onClick: onClick,
     onKeyDown: onKeyDown,
     onMouseEnter: onMouseEnter,
@@ -72,12 +73,15 @@ var Day = function Day(_a) {
     type: "button",
     ref: dayRef,
     className: cn(modClasses)
-  }, /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: cn('label')
   }, dayLabel));
 };
 
 Day.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   dayLabel: PropTypes.string,
   date: PropTypes.instanceOf(Date).isRequired,
   focusedDate: PropTypes.instanceOf(Date),

package/dist/es/components/Calendar/components/Month/Month.d.ts

@@ -8,6 +8,11 @@ export interface IMonthPickerProps {
     goToNextMonths: () => void;
 }
 export interface IMonthProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+        arrowLeft?: Record<string, string>;
+        arrowRight?: Record<string, string>;
+    };
     isPrevMonthDisabled: boolean;
     isNextMonthDisabled: boolean;
     year: number;

package/dist/es/components/Calendar/components/Month/Month.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { checkEventIsClickOrEnterPress, cnCreate } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./Month.css";
 import PropTypes from 'prop-types';
 
@@ -29,7 +29,8 @@ var ArrowRight = function ArrowRight(props) {
 var cn = cnCreate('mfui-month');
 
 var Month = function Month(_ref) {
-  var isPrevMonthDisabled = _ref.isPrevMonthDisabled,
+  var dataAttrs = _ref.dataAttrs,
+      isPrevMonthDisabled = _ref.isPrevMonthDisabled,
       isNextMonthDisabled = _ref.isNextMonthDisabled,
       year = _ref.year,
       monthLabel = _ref.monthLabel,
@@ -56,11 +57,11 @@ var Month = function Month(_ref) {
     return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn()
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('header')
-  }, /*#__PURE__*/React.createElement(ArrowLeft, {
+  }, /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft), {
     role: "button",
     tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
@@ -68,9 +69,9 @@ var Month = function Month(_ref) {
     }),
     onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
-  }), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("span", {
     className: cn('title')
-  }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/React.createElement(ArrowRight, {
+  }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight), {
     role: "button",
     tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
@@ -78,7 +79,7 @@ var Month = function Month(_ref) {
     }),
     onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: cn('weekday-labels')
   }, weekdayLabels.map(function (dayLabel, index) {
     return /*#__PURE__*/React.createElement("div", {
@@ -91,6 +92,11 @@ var Month = function Month(_ref) {
 };
 
 Month.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowLeft: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowRight: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   isPrevMonthDisabled: PropTypes.bool.isRequired,
   isNextMonthDisabled: PropTypes.bool.isRequired,
   year: PropTypes.number.isRequired,

package/dist/es/components/Carousel/Carousel.js

@@ -180,14 +180,18 @@ var Carousel = function Carousel(_ref) {
     if (isBullet && swiperInstance) {
       increaseAutoplayDelay(swiperInstance);
     }
+  };
+
+  var handleNavDisplay = function handleNavDisplay(swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+    setLocked(swiper.isBeginning && swiper.isEnd);
   }; // https://github.com/nolimits4web/Swiper/issues/2346
 
 
   var handleSwiperResize = React.useCallback(function () {
     throttle(function (swiper) {
-      setBeginning(swiper.isBeginning);
-      setEnd(swiper.isEnd);
-      setLocked(swiper.isBeginning && swiper.isEnd);
+      handleNavDisplay(swiper);
 
       if (swiper.params.slidesPerView === SlidesPerView.AUTO) {
         swiper.slides.css('width', '');
@@ -218,6 +222,21 @@ var Carousel = function Carousel(_ref) {
     e.nativeEvent.preventDefault();
   };
 
+  React.useEffect(function () {
+    if (!swiperInstance) {
+      return undefined;
+    }
+
+    var windowResizeHandler = function windowResizeHandler() {
+      return handleNavDisplay(swiperInstance);
+    };
+
+    var windowResizeHandlerThrottled = throttle(windowResizeHandler, throttleTime.resize);
+    window.addEventListener('resize', windowResizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', windowResizeHandlerThrottled);
+    };
+  }, [swiperInstance]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({

package/dist/es/components/Collapse/Collapse.js

@@ -1,10 +1,20 @@
-import "core-js/modules/web.timers";
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
+import { useCallback, useEffect } from 'react';
 import { filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-var BROWSER_DELAY = 100;
+var sin = Math.sin,
+    cos = Math.cos,
+    min = Math.min,
+    PI = Math.PI;
+
+var easeOutSine = function easeOutSine(progress) {
+  return sin(progress * PI / 2);
+};
+
+var easeInSine = function easeInSine(progress) {
+  return 1 - cos(progress * PI / 2);
+};
 
 var Collapse = function Collapse(props) {
   var className = props.className,
@@ -16,58 +26,75 @@ var Collapse = function Collapse(props) {
       children = props.children,
       isOpened = props.isOpened,
       dataAttrs = props.dataAttrs;
+  var duration = animation ? animationDuration : 0;
+  var animationStart = React.useRef(null);
+  var animationId = React.useRef(null);
   var canUpdate = React.useRef(false);
-  var timer = React.useRef(undefined);
   var rootNode = React.useRef(null);
+  useEffect(function () {
+    animationId.current && window.cancelAnimationFrame(animationId.current);
+  }, [isOpened]);
+  var animateSlide = useCallback(function (contentHeight, animationTime, timePassed) {
+    var isOpenAction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+    if (!rootNode.current) {
+      return;
+    }
 
-  var _React$useState = React.useState('0px'),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      height = _React$useState2[0],
-      setHeight = _React$useState2[1];
+    if (!animationStart.current) {
+      animationStart.current = timePassed;
+    }
 
-  var transition = animation ? "height ".concat(animationDuration / 1000, "s") : 'none';
-  var duration = animation ? animationDuration : 0;
+    var runtime = timePassed - animationStart.current;
+    var progress = animationTime ? min(runtime / animationTime, 1) : 1;
+    var isAnimationInProgress = progress < 1;
+    var nextHeight = isOpenAction ? easeOutSine(progress) * contentHeight : contentHeight - easeInSine(progress) * contentHeight;
+    rootNode.current.style.height = "".concat(nextHeight, "px");
 
-  var animateSlide = function animateSlide(finalHeight, delay) {
+    if (isAnimationInProgress) {
+      animationId.current = window.requestAnimationFrame(function (time) {
+        return animateSlide(contentHeight, animationTime, time, isOpenAction);
+      });
+    } else {
+      animationStart.current = null;
+      animationId.current = null;
+    }
+  }, []);
+  useEffect(function () {
     if (!rootNode.current) {
       return;
     }
 
-    setHeight("".concat(rootNode.current.scrollHeight, "px"));
-    timer.current = window.setTimeout(function () {
-      setHeight(finalHeight);
-    }, delay);
-  };
+    var _rootNode$current$scr = rootNode.current.scrollHeight,
+        scrollHeight = _rootNode$current$scr === void 0 ? 0 : _rootNode$current$scr;
 
-  React.useEffect(function () {
     switch (true) {
       case !canUpdate.current && isOpened:
-        setHeight('auto');
+        rootNode.current.style.height = 'auto';
         break;
 
       case !canUpdate.current && !isOpened:
-        setHeight('0px');
+        rootNode.current.style.height = '0px';
         break;
 
       case isOpened:
-        animateSlide('auto', duration);
+        animationId.current = window.requestAnimationFrame(function (timePassed) {
+          return animateSlide(scrollHeight, duration, timePassed, true);
+        });
         break;
 
       default:
-        animateSlide('0px', BROWSER_DELAY);
+        animationId.current = window.requestAnimationFrame(function (timePassed) {
+          return animateSlide(scrollHeight, duration, timePassed);
+        });
     }
 
     canUpdate.current = true;
-    return function () {
-      return clearTimeout(timer.current);
-    };
-  }, [isOpened, duration]);
+  }, [isOpened, duration, animateSlide]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: className,
     style: {
-      overflow: 'hidden',
-      height: height,
-      transition: transition
+      overflow: 'hidden'
     },
     ref: rootNode
   }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {

package/dist/es/components/ContentArea/ContentArea.css

@@ -5,30 +5,37 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-content-area_color_default {
-  background-color: var(--content);
-}
-.mfui-content-area_color_white {
-  background-color: var(--stcWhite);
+.mfui-content-area {
+  /* deprecated */
+  /* deprecated */
 }
-.mfui-content-area_color_transparent {
+.mfui-content-area_background-color_transparent {
   background-color: transparent;
 }
-.mfui-content-area_color_green {
+.mfui-content-area_background-color_black {
+  background-color: var(--stcBlack);
+}
+.mfui-content-area_background-color_white {
+  background-color: var(--stcWhite);
+}
+.mfui-content-area_background-color_green {
   background-color: var(--brandGreen);
 }
-.mfui-content-area_color_purple {
+.mfui-content-area_background-color_purple {
   background-color: var(--brandPurple);
 }
-.mfui-content-area_color_spbSky0 {
+.mfui-content-area_background-color_spbSky0 {
   background-color: var(--spbSky0);
 }
-.mfui-content-area_color_spbSky1 {
+.mfui-content-area_background-color_spbSky1 {
   background-color: var(--spbSky1);
 }
-.mfui-content-area_color_spbSky2 {
+.mfui-content-area_background-color_spbSky2 {
   background-color: var(--spbSky2);
 }
+.mfui-content-area_background-color_default {
+  background-color: var(--content);
+}
 .mfui-content-area__inner {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
@@ -77,27 +84,30 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
-.mfui-content-area__inner_color_default {
-  background-color: var(--content);
+.mfui-content-area__inner_background-color_transparent {
+  background-color: transparent;
 }
-.mfui-content-area__inner_color_white {
-  background-color: var(--stcWhite);
+.mfui-content-area__inner_background-color_black {
+  background-color: var(--stcBlack);
 }
-.mfui-content-area__inner_color_transparent {
-  background-color: transparent;
+.mfui-content-area__inner_background-color_white {
+  background-color: var(--stcWhite);
 }
-.mfui-content-area__inner_color_green {
+.mfui-content-area__inner_background-color_green {
   background-color: var(--brandGreen);
 }
-.mfui-content-area__inner_color_purple {
+.mfui-content-area__inner_background-color_purple {
   background-color: var(--brandPurple);
 }
-.mfui-content-area__inner_color_spbSky0 {
+.mfui-content-area__inner_background-color_spbSky0 {
   background-color: var(--spbSky0);
 }
-.mfui-content-area__inner_color_spbSky1 {
+.mfui-content-area__inner_background-color_spbSky1 {
   background-color: var(--spbSky1);
 }
-.mfui-content-area__inner_color_spbSky2 {
+.mfui-content-area__inner_background-color_spbSky2 {
   background-color: var(--spbSky2);
 }
+.mfui-content-area__inner_background-color_default {
+  background-color: var(--content);
+}

package/dist/es/components/ContentArea/ContentArea.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    readonly DEFAULT: "default";
-    readonly WHITE: "white";
     readonly TRANSPARENT: "transparent";
+    readonly BLACK: "black";
+    readonly WHITE: "white";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
     readonly SPB_SKY_0: "spbSky0";
     readonly SPB_SKY_1: "spbSky1";
     readonly SPB_SKY_2: "spbSky2";
+    readonly DEFAULT: "default";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {