@megafon/ui-core 2.4.0 → 3.0.0-beta.10

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

@@ -4,15 +4,13 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { usePopper } from 'react-popper';
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
 var TOOLTIP_PADDING_FOR_FLIP = 14;
 var MOUSE_KEY = 'mousedown';
-var KEYBOARD_ENTER_KEY = 'Enter';
-var KEYBOARD_NUMPAD_ENTER_KEY = 'NumpadEnter';
 var TOUCH_KEY = 'touchstart';
 export var Placement = {
   LEFT: 'left',
@@ -20,11 +18,6 @@ export var Placement = {
   RIGHT: 'right',
   BOTTOM: 'bottom'
 };
-
-var checkEventIsClickOrEnterPress = function checkEventIsClickOrEnterPress(e) {
-  return e.type === TOUCH_KEY || e.type === MOUSE_KEY || e.code === KEYBOARD_ENTER_KEY || e.code === KEYBOARD_NUMPAD_ENTER_KEY;
-};
-
 export var Paddings = {
   NONE: 'none',
   SMALL: 'small',
@@ -59,6 +52,7 @@ var Tooltip = function Tooltip(_ref) {
       arrowClassName = _ref$classes.arrow,
       contentClassName = _ref$classes.content,
       contentShadowClassName = _ref$classes.contentShadow,
+      dataAttrs = _ref.dataAttrs,
       onOpen = _ref.onOpen,
       onClose = _ref.onClose;
   var currentTrigger = triggerElement.current;
@@ -82,7 +76,7 @@ var Tooltip = function Tooltip(_ref) {
 
   useEffect(function () {
     return setIsOpen(isOpened);
-  }, [isOpened]);
+  }, [isOpened, setIsOpen]);
   var options = useMemo(function () {
     return {
       placement: placement,
@@ -110,7 +104,7 @@ var Tooltip = function Tooltip(_ref) {
         }
       }]
     };
-  }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
+  }, [placement, arrowElement, currentBoundary, isOpen]);
 
   var _usePopper = usePopper(currentTarget, popperElement, options),
       styles = _usePopper.styles,
@@ -118,7 +112,7 @@ var Tooltip = function Tooltip(_ref) {
       update = _usePopper.update;
 
   useEffect(function () {
-    update === null || update === void 0 ? void 0 : update();
+    update && update();
   }, [children, update]);
 
   var _useState7 = useState(false),
@@ -128,7 +122,7 @@ var Tooltip = function Tooltip(_ref) {
 
   useEffect(function () {
     return setIsTouchDevice(detectTouch());
-  }, []);
+  }, [detectTouch, setIsTouchDevice]);
   var clickEvent = useMemo(function () {
     return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
@@ -138,11 +132,11 @@ var Tooltip = function Tooltip(_ref) {
   var handleMouseEnter = useCallback(function (e) {
     if (!isOpen) {
       setIsOpen(true);
-      onOpen === null || onOpen === void 0 ? void 0 : onOpen(e);
+      onOpen && onOpen(e);
     }
-  }, [isOpen, onOpen]);
+  }, [isOpen, onOpen, setIsOpen]);
   var handleClick = useCallback(function (e) {
-    if (!checkEventIsClickOrEnterPress(e)) {
+    if (!checkNativeEventIsClickOrEnterPress(e)) {
       return;
     }
 
@@ -151,24 +145,24 @@ var Tooltip = function Tooltip(_ref) {
     });
 
     if (!isOpen) {
-      onOpen === null || onOpen === void 0 ? void 0 : onOpen(e);
+      onOpen && onOpen(e);
     } else {
-      onClose === null || onClose === void 0 ? void 0 : onClose(e);
+      onClose && onClose(e);
     }
-  }, [isOpen, onOpen, onClose]);
+  }, [isOpen, onOpen, onClose, setIsOpen]);
   var handleOutsideEvent = useCallback(function (e) {
     var isTargetInPopper = e.target instanceof Element && popperElement && popperElement.contains(e.target);
     var isTargetInTrigger = e.target instanceof Element && currentTrigger && currentTrigger.contains(e.target);
 
     if (!isTargetInPopper && !isTargetInTrigger) {
       setIsOpen(false);
-      onClose === null || onClose === void 0 ? void 0 : onClose(e);
+      onClose && onClose(e);
     }
-  }, [onClose, currentTrigger, popperElement]);
+  }, [onClose, currentTrigger, popperElement, setIsOpen]);
   var handleBlurEvent = useCallback(function (e) {
     setIsOpen(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose(e);
-  }, [onClose]);
+    onClose && onClose(e);
+  }, [onClose, setIsOpen]);
   useEffect(function () {
     if (triggerEventName === TriggerEvent.HOVER) {
       if (currentTrigger) {
@@ -178,10 +172,10 @@ var Tooltip = function Tooltip(_ref) {
 
       if (isOpen) {
         document.addEventListener('mouseover', handleOutsideEvent);
-        currentTrigger === null || currentTrigger === void 0 ? void 0 : currentTrigger.addEventListener('blur', handleBlurEvent);
+        currentTrigger && currentTrigger.addEventListener('blur', handleBlurEvent);
       } else {
         document.removeEventListener('mouseover', handleOutsideEvent);
-        currentTrigger === null || currentTrigger === void 0 ? void 0 : currentTrigger.removeEventListener('blur', handleBlurEvent);
+        currentTrigger && currentTrigger.removeEventListener('blur', handleBlurEvent);
       }
 
       return function () {
@@ -195,7 +189,7 @@ var Tooltip = function Tooltip(_ref) {
     }
 
     return undefined;
-  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleMouseEnter, handleBlurEvent]);
+  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleMouseEnter]);
   useEffect(function () {
     if (triggerEventName === TriggerEvent.CLICK) {
       if (currentTrigger) {
@@ -220,8 +214,8 @@ var Tooltip = function Tooltip(_ref) {
     }
 
     return undefined;
-  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -236,6 +230,9 @@ var Tooltip = function Tooltip(_ref) {
     className: cn('arrow-shadow'),
     style: styles.arrow
   }), /*#__PURE__*/React.createElement(Tile, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content
+    },
     className: cn('content', [contentClassName])
   }, children), /*#__PURE__*/React.createElement(Tile, {
     shadowLevel: "high",
@@ -278,6 +275,10 @@ Tooltip.propTypes = {
     content: PropTypes.string,
     contentShadow: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    content: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onOpen: PropTypes.func,
   onClose: PropTypes.func
 };

package/dist/es/index.d.ts

@@ -31,6 +31,7 @@ export { default as Preloader } from './components/Preloader/Preloader';
 export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';
+export { default as selectReducer } from './components/Select/reducer/selectReducer';
 export { default as Switcher } from './components/Switcher/Switcher';
 export { default as Tab } from './components/Tabs/Tab';
 export { default as Tabs } from './components/Tabs/Tabs';

package/dist/es/index.js

@@ -31,6 +31,7 @@ export { default as Preloader } from "./components/Preloader/Preloader";
 export { default as RadioButton } from "./components/RadioButton/RadioButton";
 export { default as Search } from "./components/Search/Search";
 export { default as Select } from "./components/Select/Select";
+export { default as selectReducer } from "./components/Select/reducer/selectReducer";
 export { default as Switcher } from "./components/Switcher/Switcher";
 export { default as Tab } from "./components/Tabs/Tab";
 export { default as Tabs } from "./components/Tabs/Tabs";

package/dist/lib/colors/ColorItem/ColorItem.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .color-item {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -46,7 +39,7 @@ h5 {
   line-height: 20px;
 }
 .color-item__code {
-  color: #33333380;
+  color: var(--spbSky3);
   font-size: 12px;
   line-height: 18px;
 }

package/dist/lib/colors/ColorItem/ColorItem.js

@@ -37,7 +37,7 @@ var ColorItem = function ColorItem(_ref) {
   }), !!parentColorCode && /*#__PURE__*/React.createElement("div", {
     className: cn('parent-color'),
     style: {
-      background: parentColorCode
+      background: "var(--".concat(parentColorCode, ")")
     }
   })), /*#__PURE__*/React.createElement("span", {
     className: cn('name')

package/dist/lib/colors/Colors.css

@@ -1,14 +1,7 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .colors__inner {
   margin: 0 -80px;
   padding: 56px 80px 40px;
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 @media screen and (max-width: 1120px) {
   .colors__inner {
@@ -90,7 +83,6 @@ h5 {
 .colors__description {
   position: relative;
   padding-top: 15px;
-  color: #33333380;
   font-size: 12px;
   line-height: 18px;
   text-align: center;
@@ -198,7 +190,7 @@ h5 {
   display: block;
   width: 100%;
   height: 1px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
@@ -209,7 +201,7 @@ h5 {
   position: absolute;
   width: 1px;
   height: 4px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .colors__underline:after,
 .colors__underline:before {

package/dist/lib/colors/Colors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import './Colors.less';
-declare const Colors: React.FC;
+declare const Colors: () => JSX.Element;
 export default Colors;

package/dist/lib/colors/Colors.js

@@ -11,10 +11,14 @@ require("core-js/modules/es.symbol");
 
 require("core-js/modules/es.symbol.description");
 
+require("core-js/modules/es.array.includes");
+
 require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.function.name");
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -130,10 +134,65 @@ var basic = _colorsData["default"].basic,
     gradientColors = _colorsData["default"].gradientColors,
     staticColors = _colorsData["default"].staticColors,
     staticOpacity = _colorsData["default"].staticOpacity,
-    soft = _colorsData["default"].soft;
+    soft = _colorsData["default"].soft; // TODO: refactor this
+
+var getThemeFromLocalStorage = function getThemeFromLocalStorage() {
+  var theme = 'light';
+
+  if (typeof window !== 'undefined') {
+    var localStorageTheme = String(window.localStorage.getItem('theme'));
+
+    if (['light', 'dark'].includes(localStorageTheme)) {
+      theme = localStorageTheme;
+    }
+  }
+
+  return theme;
+};
+
 var cn = (0, _uiHelpers.cnCreate)('colors');
 
 var Colors = function Colors() {
+  var _React$useState = React.useState(getThemeFromLocalStorage()),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      setCurrentTheme = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      setLoad = _React$useState4[1];
+
+  React.useEffect(function () {
+    function load() {
+      setLoad(true);
+    }
+  }, []);
+
+  var getCurrentColorValue = function getCurrentColorValue(code) {
+    return typeof document !== 'undefined' ? document.documentElement.style.getPropertyValue("--".concat(code)) : '';
+  };
+
+  React.useEffect(function () {
+    // theme switcher from src/gatsby-theme-docz/components/SideBar/index.tsx
+    var themeSwitcher = document.querySelector('[data-current-theme]');
+
+    if (themeSwitcher) {
+      var themeSwitcherObserver = new MutationObserver(function (mutationsList) {
+        var data = mutationsList[0];
+        setCurrentTheme(data.oldValue === 'light' ? 'dark' : 'light');
+      });
+      var config = {
+        attributeOldValue: true,
+        attributeFilter: ['data-current-theme']
+      };
+      themeSwitcherObserver.observe(themeSwitcher, config);
+      return function () {
+        return themeSwitcherObserver.disconnect();
+      };
+    }
+
+    return undefined;
+  }, []);
+
   var renderUnderline = function renderUnderline() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('underline')
@@ -169,7 +228,7 @@ var Colors = function Colors() {
         return /*#__PURE__*/React.createElement(_ColorItem["default"], {
           className: cn('item'),
           colorName: name,
-          colorCode: code,
+          colorCode: getCurrentColorValue(code),
           key: name,
           border: border
         });
@@ -199,7 +258,7 @@ var Colors = function Colors() {
       return /*#__PURE__*/React.createElement(_ColorItem["default"], {
         className: cn('item'),
         colorName: name,
-        colorCode: code,
+        colorCode: getCurrentColorValue(code),
         gradient: gradient,
         key: name,
         border: border
@@ -231,7 +290,7 @@ var Colors = function Colors() {
           soft: true
         }),
         colorName: name,
-        colorCode: code,
+        colorCode: getCurrentColorValue(code),
         parentColorCode: parentColor,
         key: name
       });

package/dist/lib/colors/colorsData.js

@@ -10,34 +10,35 @@ var colors = {
     colorsGroup: [{
       description: 'Основные цвета бренда',
       colors: [{
-        name: 'Green',
-        code: '#00B956'
+        name: 'Brand Green',
+        code: 'brandGreen'
       }, {
-        name: 'Purple',
-        code: '#731982'
+        name: 'Brand Purple',
+        code: 'brandPurple'
       }]
     }, {
       description: 'Градация оттенков серого',
       colors: [{
         name: 'Base',
-        code: '#FFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'base',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'Content',
-        code: '#333333'
+        code: 'content',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'Spb Sky 0',
-        code: '#F6F6F6',
-        border: '2px solid #EDEDED'
+        code: 'spbSky0',
+        border: '2px solid var(--spbSky1)'
       }, {
         name: 'Spb Sky 1',
-        code: '#EDEDED'
+        code: 'spbSky1'
       }, {
         name: 'Spb Sky 2',
-        code: '#D8D8D8'
+        code: 'spbSky2'
       }, {
         name: 'Spb Sky 3',
-        code: '#999999'
+        code: 'spbSky3'
       }]
     }]
   },
@@ -47,16 +48,16 @@ var colors = {
       description: 'Акцентные цвета',
       colors: [{
         name: 'Warm Red C',
-        code: '#EB5A40'
+        code: 'warmRedC'
       }, {
         name: '137C',
-        code: '#FFA717'
+        code: '137C'
       }, {
         name: '311C',
-        code: '#5BD9E5'
+        code: '311C'
       }, {
         name: 'Reflex Blue',
-        code: '#444189'
+        code: 'reflexBlue'
       }]
     }
   },
@@ -66,22 +67,22 @@ var colors = {
       description: 'Системные цвета, используемые для отображения состояний интерфейсов и ссылок',
       colors: [{
         name: 'Fury',
-        code: '#F62434'
+        code: 'fury'
       }, {
         name: 'System Blue',
-        code: '#34AAF2'
+        code: 'systemBlue'
       }, {
         name: 'Background',
-        code: '#FFFFFF'
+        code: 'background'
       }, {
         name: 'Button Hov. G.',
-        code: '#10E272'
+        code: 'buttonHoverGreen'
       }, {
         name: 'Button Hov. P.',
-        code: '#A500BF'
+        code: 'buttonhoverPurple'
       }, {
         name: 'Button Down',
-        code: '#404D46'
+        code: 'buttonDown'
       }]
     }
   },
@@ -91,15 +92,15 @@ var colors = {
       description: 'Градиентные заливки ',
       colors: [{
         name: 'Basic',
-        code: '#01873F #00B956 #14CD6A',
+        code: 'gradientBasic',
         gradient: 'linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%)'
       }, {
         name: 'VIP',
-        code: '#5B1168 #731982 #821E93',
+        code: 'gradientVIP',
         gradient: 'linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%)'
       }, {
         name: 'Exclusive',
-        code: '#2A2674 #444189 #504D93',
+        code: 'gradientExclusive',
         gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
       }]
     }
@@ -110,11 +111,12 @@ var colors = {
       description: 'Цвета не зависящие от темы',
       colors: [{
         name: 'STC White',
-        code: '#FFFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black',
-        code: '#333333'
+        code: 'stcBlack',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -124,31 +126,36 @@ var colors = {
       description: 'Цвета c прозрачностью не зависящие от темы',
       colors: [{
         name: 'STC White 5%',
-        code: '#FFFFFF0D',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 10%',
-        code: '#FFFFFF1A',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 20%',
-        code: '#FFFFFF33',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 50%',
-        code: '#FFFFFF80'
+        code: 'stcWhite50',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 5%',
-        code: '#3333330D'
+        code: 'stcBlack5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 10%',
-        code: '#3333331A'
+        code: 'stcBlack10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 20%',
-        code: '#33333333'
+        code: 'stcBlack20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 50%',
-        code: '#33333380'
+        code: 'stcBlack50',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -157,61 +164,61 @@ var colors = {
     colorsList: {
       description: 'Дополнительная (вспомогательная) палитра, образованная от Basic, Secondary и System цветов. Каждый цвет из Soft палитры работает в паре с его родительским цветом.',
       colors: [{
-        name: 'Green 80',
-        code: '#0CDC78',
-        parentColor: '#00B956'
+        name: 'Brand Green 80',
+        code: 'brandGreen80',
+        parentColor: 'green'
       }, {
-        name: 'Purple 80',
-        code: '#AA67C1',
-        parentColor: '#731982'
+        name: 'Brand Purple 80',
+        code: 'brandPurple80',
+        parentColor: 'purple'
       }, {
         name: 'Warm Red C 80',
-        code: '#FF765D',
-        parentColor: '#EB5A40'
+        code: 'warmRedC80',
+        parentColor: 'warmRedC'
       }, {
         name: '137C 80',
-        code: '#FFB945',
-        parentColor: '#FFB945'
+        code: '137C80',
+        parentColor: '137C'
       }, {
         name: '311C 80',
-        code: '#62E3FF',
-        parentColor: '#5BD9E5'
+        code: '311C80',
+        parentColor: '311C'
       }, {
         name: 'Reflex Blue 80',
-        code: '#554FC9',
-        parentColor: '#444189'
+        code: 'reflexBlue80',
+        parentColor: 'reflexBlue'
       }, {
         name: 'Fury 80',
-        code: '#F8505D',
-        parentColor: '#F62434'
+        code: 'fury80',
+        parentColor: 'fury'
       }, {
-        name: 'Green 20',
-        code: '#DDFFEC',
-        parentColor: '#00B956'
+        name: 'Brand Green 20',
+        code: 'brandGreen20',
+        parentColor: 'green'
       }, {
-        name: 'Purple 20',
-        code: '#FFEEFF',
-        parentColor: '#731982'
+        name: 'Brand Purple 20',
+        code: 'brandPurple20',
+        parentColor: 'purple'
       }, {
         name: 'Warm Red C 20',
-        code: '#FFCFC7',
-        parentColor: '#EB5A40'
+        code: 'warmRedC20',
+        parentColor: 'warmRedC'
       }, {
         name: '137C 20',
-        code: '#FFEDD1',
-        parentColor: '#FFB945'
+        code: '137C20',
+        parentColor: '137C'
       }, {
         name: '311C 20',
-        code: '#E1FAFF',
-        parentColor: '#5BD9E5'
+        code: '311C20',
+        parentColor: '311C'
       }, {
         name: 'Reflex Blue 20',
-        code: '#EBEAFF',
-        parentColor: '#444189'
+        code: 'reflexBlue20',
+        parentColor: 'reflexBlue'
       }, {
         name: 'Fury 20',
-        code: '#FFC5C9',
-        parentColor: '#F62434'
+        code: 'fury20',
+        parentColor: 'fury'
       }]
     }
   }