@megafon/ui-core 3.5.2 → 3.6.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3...@megafon/ui-core@3.6.0) (2022-04-25)
+
+
+### Bug Fixes
+
+* **calendar:** fix go to start day after user choice ([8bbce10](https://github.com/MegafonWebLab/megafon-ui/commit/8bbce102d204f7ea7706158f3e6540c86ed3aada))
+
+
+### Features
+
+* **tooltip:** added prop isPortal for tooltip ([e6f6d17](https://github.com/MegafonWebLab/megafon-ui/commit/e6f6d1749cd99f065c50bac4eb6a9b3592653f8d))
+
+
+
+
+
+## [3.5.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.2...@megafon/ui-core@3.5.3) (2022-04-18)
+
+
+### Bug Fixes
+
+* **switcher:** fix safari bugs ([65274bc](https://github.com/MegafonWebLab/megafon-ui/commit/65274bc3c5e7385109afff94a8ff3f712c9af097))
+
+
+
+
+
 ## [3.5.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.1...@megafon/ui-core@3.5.2) (2022-04-13)
 
 **Note:** Version bump only for package @megafon/ui-core

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

@@ -20,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import differenceInDays from 'date-fns/differenceInDays';
@@ -53,6 +53,17 @@ var dayLabelFormat = function dayLabelFormat(date) {
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
+/* List of cases to check on component change:
+
+- Should correctly choose value and trigger callbacks with correct arguments on dates choose.
+- Should set 1 day period if start and end date is equal
+- Should correctly increase period if choose earlier start date
+- Should correctly change start date of selected period if chosen date in period closer to current start date
+- Should correctly change end date of selected period if chosen date in period closer to current end date
+- Should correctly highlights period if start date chosen and hover on possible end date
+
+*/
+
 
 var cn = cnCreate('mfui-calendar');
 
@@ -91,6 +102,7 @@ var Calendar = function Calendar(_ref) {
       hoveredDate = _useState4[0],
       setHoveredDate = _useState4[1];
 
+  var isUserChoice = useRef(false);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
@@ -111,10 +123,13 @@ var Calendar = function Calendar(_ref) {
       goToDate = _a.goToDate,
       pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
 
+  useEffect(function () {
+    isUserChoice.current = false;
+  }, [startDate]);
   useEffect(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
+    !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -179,6 +194,7 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
+    isUserChoice.current = true;
     onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
 

package/dist/es/components/Switcher/Switcher.css

@@ -84,6 +84,9 @@
   border-radius: 15.5px;
   overflow: hidden;
   background-color: var(--spbSky1);
+  outline: none;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;

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

@@ -37,6 +37,8 @@ export interface ITooltipProps {
     targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
+    /** Отрендерить компонент в корневой элементе страницы body */
+    isPortal?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/es/components/Tooltip/Tooltip.js

@@ -6,6 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
@@ -45,6 +46,8 @@ var Tooltip = function Tooltip(_ref) {
       targetElement = _ref.targetElement,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$isPortal = _ref.isPortal,
+      isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
       children = _ref.children,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -58,6 +61,7 @@ var Tooltip = function Tooltip(_ref) {
   var currentTrigger = triggerElement.current;
   var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
   var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
+  var portalElem = React.useRef(null);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -215,7 +219,16 @@ var Tooltip = function Tooltip(_ref) {
 
     return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  useEffect(function () {
+    return function () {
+      if (portalElem.current) {
+        document.body.removeChild(portalElem.current);
+      }
+
+      portalElem.current = null;
+    };
+  }, []);
+  var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -238,6 +251,18 @@ var Tooltip = function Tooltip(_ref) {
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
   }));
+  /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
+
+  if (isPortal && !portalElem.current && typeof window !== 'undefined') {
+    portalElem.current = document.createElement('div');
+    document.body.appendChild(portalElem.current);
+  }
+
+  if (isPortal && portalElem.current) {
+    return portalElem.current ? ReactDOM.createPortal(template, portalElem.current) : null;
+  }
+
+  return template;
 };
 
 Tooltip.propTypes = {
@@ -268,6 +293,7 @@ Tooltip.propTypes = {
     current: PropTypes.elementType
   }), PropTypes.any])]),
   isOpened: PropTypes.bool,
+  isPortal: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

package/dist/lib/components/Calendar/Calendar.js

@@ -86,6 +86,17 @@ var dayLabelFormat = function dayLabelFormat(date) {
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
+/* List of cases to check on component change:
+
+- Should correctly choose value and trigger callbacks with correct arguments on dates choose.
+- Should set 1 day period if start and end date is equal
+- Should correctly increase period if choose earlier start date
+- Should correctly change start date of selected period if chosen date in period closer to current start date
+- Should correctly change end date of selected period if chosen date in period closer to current end date
+- Should correctly highlights period if start date chosen and hover on possible end date
+
+*/
+
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-calendar');
 
@@ -124,6 +135,7 @@ var Calendar = function Calendar(_ref) {
       hoveredDate = _useState4[0],
       setHoveredDate = _useState4[1];
 
+  var isUserChoice = (0, _react.useRef)(false);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
@@ -144,10 +156,13 @@ var Calendar = function Calendar(_ref) {
       goToDate = _a.goToDate,
       pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
 
+  (0, _react.useEffect)(function () {
+    isUserChoice.current = false;
+  }, [startDate]);
   (0, _react.useEffect)(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
+    !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -212,6 +227,7 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
+    isUserChoice.current = true;
     onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
 

package/dist/lib/components/Switcher/Switcher.css

@@ -84,6 +84,9 @@
   border-radius: 15.5px;
   overflow: hidden;
   background-color: var(--spbSky1);
+  outline: none;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;

package/dist/lib/components/Tooltip/Tooltip.d.ts

@@ -37,6 +37,8 @@ export interface ITooltipProps {
     targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
+    /** Отрендерить компонент в корневой элементе страницы body */
+    isPortal?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/lib/components/Tooltip/Tooltip.js

@@ -23,6 +23,8 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _reactPopper = require("react-popper");
 
 var _Tile = _interopRequireDefault(require("../Tile/Tile"));
@@ -72,6 +74,8 @@ var Tooltip = function Tooltip(_ref) {
       targetElement = _ref.targetElement,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$isPortal = _ref.isPortal,
+      isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
       children = _ref.children,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -86,6 +90,8 @@ var Tooltip = function Tooltip(_ref) {
   var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
   var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
 
+  var portalElem = _react["default"].useRef(null);
+
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       popperElement = _useState2[0],
@@ -242,7 +248,17 @@ var Tooltip = function Tooltip(_ref) {
 
     return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (portalElem.current) {
+        document.body.removeChild(portalElem.current);
+      }
+
+      portalElem.current = null;
+    };
+  }, []);
+
+  var template = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -265,6 +281,19 @@ var Tooltip = function Tooltip(_ref) {
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
   }));
+  /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
+
+
+  if (isPortal && !portalElem.current && typeof window !== 'undefined') {
+    portalElem.current = document.createElement('div');
+    document.body.appendChild(portalElem.current);
+  }
+
+  if (isPortal && portalElem.current) {
+    return portalElem.current ? _reactDom["default"].createPortal(template, portalElem.current) : null;
+  }
+
+  return template;
 };
 
 Tooltip.propTypes = {
@@ -295,6 +324,7 @@ Tooltip.propTypes = {
     current: _propTypes["default"].elementType
   }), _propTypes["default"].any])]),
   isOpened: _propTypes["default"].bool,
+  isPortal: _propTypes["default"].bool,
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     root: _propTypes["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "files": [
     "dist",
     "styles"
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "96b6862cd6294fa5fb9d630b2194a1dd74d969fe"
+  "gitHead": "87e4483070e37f017a90358648860a5f4139bae1"
 }