@megafon/ui-core 3.0.0-beta.8 → 3.0.2

package/dist/lib/components/Select/reducer/selectReducer.d.ts

@@ -0,0 +1,34 @@
+import { ISelectItem, SelectItemValueType } from '../Select';
+export declare const initialState: {
+    isOpened: boolean;
+    hoveredItemIndex: number;
+    itemsList: never[];
+    comparableInputValue: string;
+    inputValue: string;
+};
+export declare enum SelectActions {
+    TOGGLE_DROPDOWN = "TOGGLE_DROPDOWN",
+    UPDATE_ITEMS_LIST = "UPDATE_ITEMS_LIST",
+    UPDATE_VALUE_FROM_PROPS = "UPDATE_VALUE_FROM_PROPS",
+    UPDATE_SELECT_VALUE = "UPDATE_SELECT_VALUE",
+    SET_HOVERED_ITEM_INDEX = "SET_HOVERED_ITEM_INDEX",
+    COMBOBOX_VALUE_DEBOUNCE = "COMBOBOX_VALUE_DEBOUNCE",
+    COMBOBOX_INPUT_CHANGE = "COMBOBOX_INPUT_CHANGE"
+}
+export interface ISelectState<T extends SelectItemValueType> {
+    isOpened: boolean;
+    hoveredItemIndex: number;
+    itemsList: Array<ISelectItem<T>>;
+    comparableInputValue: string;
+    inputValue: string;
+}
+export interface ISelectAction<T extends SelectItemValueType> {
+    type: SelectActions;
+    items?: Array<ISelectItem<T>>;
+    hoveredItemIndex?: number;
+    inputValue?: string;
+    comparableInputValue?: string;
+    isOpened?: boolean;
+}
+declare const selectReducer: <T extends string | number | undefined>(state: ISelectState<T>, action: ISelectAction<T>) => ISelectState<T>;
+export default selectReducer;

package/dist/lib/components/Select/reducer/selectReducer.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SelectActions = exports.initialState = void 0;
+
+require("core-js/modules/es.array.every");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var isEqualItems = function isEqualItems(newItems, setItems) {
+  if (newItems.length !== setItems.length) {
+    return false;
+  }
+
+  return newItems.every(function (item, i) {
+    var isEqualValue = item.value === setItems[i].value;
+    var isEqualTitle = item.title === setItems[i].title;
+    return isEqualValue && isEqualTitle;
+  });
+};
+
+var initialState = {
+  isOpened: false,
+  hoveredItemIndex: 0,
+  itemsList: [],
+  comparableInputValue: '',
+  inputValue: ''
+};
+exports.initialState = initialState;
+var SelectActions;
+exports.SelectActions = SelectActions;
+
+(function (SelectActions) {
+  SelectActions["TOGGLE_DROPDOWN"] = "TOGGLE_DROPDOWN";
+  SelectActions["UPDATE_ITEMS_LIST"] = "UPDATE_ITEMS_LIST";
+  SelectActions["UPDATE_VALUE_FROM_PROPS"] = "UPDATE_VALUE_FROM_PROPS";
+  SelectActions["UPDATE_SELECT_VALUE"] = "UPDATE_SELECT_VALUE";
+  SelectActions["SET_HOVERED_ITEM_INDEX"] = "SET_HOVERED_ITEM_INDEX";
+  SelectActions["COMBOBOX_VALUE_DEBOUNCE"] = "COMBOBOX_VALUE_DEBOUNCE";
+  SelectActions["COMBOBOX_INPUT_CHANGE"] = "COMBOBOX_INPUT_CHANGE";
+})(SelectActions || (exports.SelectActions = SelectActions = {}));
+
+var _SelectActions = SelectActions,
+    TOGGLE_DROPDOWN = _SelectActions.TOGGLE_DROPDOWN,
+    UPDATE_ITEMS_LIST = _SelectActions.UPDATE_ITEMS_LIST,
+    UPDATE_VALUE_FROM_PROPS = _SelectActions.UPDATE_VALUE_FROM_PROPS,
+    UPDATE_SELECT_VALUE = _SelectActions.UPDATE_SELECT_VALUE,
+    SET_HOVERED_ITEM_INDEX = _SelectActions.SET_HOVERED_ITEM_INDEX,
+    COMBOBOX_VALUE_DEBOUNCE = _SelectActions.COMBOBOX_VALUE_DEBOUNCE,
+    COMBOBOX_INPUT_CHANGE = _SelectActions.COMBOBOX_INPUT_CHANGE;
+
+var selectReducer = function selectReducer(state, action) {
+  var type = action.type,
+      _action$items = action.items,
+      items = _action$items === void 0 ? [] : _action$items,
+      _action$hoveredItemIn = action.hoveredItemIndex,
+      hoveredItemIndex = _action$hoveredItemIn === void 0 ? 0 : _action$hoveredItemIn,
+      _action$inputValue = action.inputValue,
+      inputValue = _action$inputValue === void 0 ? '' : _action$inputValue,
+      _action$comparableInp = action.comparableInputValue,
+      comparableInputValue = _action$comparableInp === void 0 ? '' : _action$comparableInp,
+      _action$isOpened = action.isOpened,
+      isOpened = _action$isOpened === void 0 ? false : _action$isOpened;
+  var prevItems = state.itemsList;
+
+  switch (type) {
+    case TOGGLE_DROPDOWN:
+      {
+        return (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+          isOpened: isOpened
+        });
+      }
+
+    case UPDATE_ITEMS_LIST:
+      {
+        var isItemsEqual = isEqualItems(items, prevItems);
+        return isItemsEqual ? state : (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+          itemsList: items
+        });
+      }
+
+    case UPDATE_VALUE_FROM_PROPS:
+      {
+        return (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+          hoveredItemIndex: hoveredItemIndex,
+          inputValue: inputValue,
+          comparableInputValue: ''
+        });
+      }
+
+    case COMBOBOX_VALUE_DEBOUNCE:
+      {
+        return (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+          comparableInputValue: comparableInputValue,
+          itemsList: items,
+          isOpened: true,
+          hoveredItemIndex: 0
+        });
+      }
+
+    case UPDATE_SELECT_VALUE:
+      {
+        return (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+          isOpened: false,
+          itemsList: items,
+          hoveredItemIndex: hoveredItemIndex
+        });
+      }
+
+    case SET_HOVERED_ITEM_INDEX:
+      {
+        return (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+          hoveredItemIndex: hoveredItemIndex
+        });
+      }
+
+    case COMBOBOX_INPUT_CHANGE:
+      {
+        return (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+          inputValue: inputValue
+        });
+      }
+
+    default:
+      {
+        return state;
+      }
+  }
+};
+
+var _default = selectReducer;
+exports["default"] = _default;

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

@@ -1,44 +1,48 @@
 .mfui-switcher {
   top: 22px;
   right: 28px;
-  width: 40px;
-  height: 24px;
+  width: 48px;
+  height: 28px;
+  border: 1px solid var(--stcBlack20);
   border-radius: 15.5px;
-  background-color: var(--spbSky1);
+  background-color: var(--base);
   cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.mfui-switcher_no-touch:hover {
-  background-color: var(--spbSky1);
-}
 .mfui-switcher__pointer {
   position: relative;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
+  top: 1px;
+  left: 1px;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--stcBlack20);
   border-radius: 50%;
   background-color: var(--base);
+  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
+.mfui-switcher_no-touch:hover:not(.mfui-switcher_disabled) {
+  background-color: var(--spbSky1);
+}
 .mfui-switcher_checked {
+  border-color: var(--brandGreen);
   background-color: var(--brandGreen);
 }
 .mfui-switcher_checked .mfui-switcher__pointer {
-  left: 18px;
+  left: 21px;
 }
 .mfui-switcher_checked.mfui-switcher_no-touch:hover {
+  border-color: var(--buttonHoverGreen);
   background-color: var(--buttonHoverGreen);
 }
 .mfui-switcher_disabled {
   background-color: var(--spbSky1);
   cursor: default;
 }
-.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch.mfui-switcher:hover {
-  background-color: var(--spbSky1);
-}
-.mfui-switcher_disabled .mfui-switcher__pointer {
+.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch {
+  border-color: var(--spbSky2);
   background-color: var(--spbSky2);
 }

package/dist/lib/components/Switcher/Switcher.js

@@ -31,7 +31,7 @@ var Switcher = function Switcher(props) {
       return;
     }
 
-    onChange && onChange(e);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
   return /*#__PURE__*/React.createElement("div", {

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

@@ -49,6 +49,8 @@ export interface ITabsProps {
     defaultIndex?: number;
     /** Рендер содержимого только для текущего таба */
     renderOnlyCurrentPanel?: boolean;
+    /** Внешний контейнер для режима фиксация табов */
+    outerObserveContainer?: HTMLDivElement | null;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

package/dist/lib/components/Tabs/Tabs.js

@@ -98,10 +98,12 @@ var Tabs = function Tabs(_ref) {
       renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
       dataAttrs = _ref.dataAttrs,
-      onTabClick = _ref.onTabClick;
+      onTabClick = _ref.onTabClick,
+      outerObserveContainer = _ref.outerObserveContainer;
   var tabsRef = React.useRef([]);
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
+  var intersectionObserverRef = React.useRef();
 
   var _React$useState = React.useState(),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -194,11 +196,70 @@ var Tabs = function Tabs(_ref) {
       left: left,
       right: documentWidth - right
     });
-  }, [stickyOffset, isSticky]);
+  }, [sticky]);
+  var stickyON = React.useCallback(function (leftOffset, rightOffset) {
+    var documentWidth = document.documentElement.clientWidth;
+    setStickyOffset({
+      left: leftOffset,
+      right: documentWidth - rightOffset
+    });
+    setSticky(true);
+  }, []);
+  var stickyOFF = React.useCallback(function () {
+    setStickyOffset({
+      left: 0,
+      right: 0
+    });
+    setSticky(false);
+  }, []);
+  var isContainerNotFitViewport = React.useCallback(function () {
+    var _a;
+
+    var containerHeight = (_a = outerObserveContainer || rootRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    return containerHeight && containerHeight > window.innerHeight;
+  }, [outerObserveContainer]);
+  var addIntersectionObserver = React.useCallback(function () {
+    var observerOptions = {
+      threshold: [0, 1]
+    };
+
+    if (isContainerNotFitViewport()) {
+      observerOptions.rootMargin = '0px 0px -100%';
+    }
+
+    intersectionObserverRef.current = new IntersectionObserver(function (entries) {
+      entries.forEach(function (_ref2) {
+        var isIntersecting = _ref2.isIntersecting,
+            _ref2$boundingClientR = _ref2.boundingClientRect,
+            top = _ref2$boundingClientR.top,
+            left = _ref2$boundingClientR.left,
+            right = _ref2$boundingClientR.right;
+
+        if (!tabListRef.current) {
+          return;
+        }
+
+        var _tabListRef$current$g = tabListRef.current.getBoundingClientRect(),
+            height = _tabListRef$current$g.height,
+            tabListNodeLeft = _tabListRef$current$g.left,
+            tabListNodeRight = _tabListRef$current$g.right;
+
+        var leftOffset = outerObserveContainer ? tabListNodeLeft : left;
+        var rightOffset = outerObserveContainer ? tabListNodeRight : right;
+        setTabListHeight(height);
+
+        if (isIntersecting) {
+          top < 0 ? stickyON(leftOffset, rightOffset) : stickyOFF();
+        } else {
+          stickyOFF();
+        }
+      });
+    }, observerOptions);
+  }, [isContainerNotFitViewport, outerObserveContainer, stickyOFF, stickyON]);
   var handleTabInnerClick = React.useCallback(function (index) {
     return function () {
       setUnderlineTransition('all');
-      onTabClick && onTabClick(index);
+      onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(index);
 
       if (outerIndex === undefined) {
         setInnerIndex(index);
@@ -226,6 +287,18 @@ var Tabs = function Tabs(_ref) {
     setBeginning(swiper.isBeginning);
     setEnd(swiper.isEnd);
   }, []);
+  var addObserveEvent = React.useCallback(function () {
+    var _a;
+
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.observe(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
+  var removeObserveEvent = React.useCallback(function () {
+    var _a;
+
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
   var renderTab = React.useCallback(function (index, title, icon, href) {
     var ElementType = href ? 'a' : 'div';
     return /*#__PURE__*/React.createElement(ElementType, {
@@ -257,7 +330,7 @@ var Tabs = function Tabs(_ref) {
         ref: setTabRef
       }, (0, _uiHelpers.filterDataAttrs)(data === null || data === void 0 ? void 0 : data.root, i + 1)), renderTabWrapper ? renderTabWrapper(tab) : tab));
     });
-  }, [renderTab, children]);
+  }, [renderTab, children, activeTabClass, currentIndex, setTabRef, tabClass]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
       var panel = child.props.children;
@@ -273,57 +346,27 @@ var Tabs = function Tabs(_ref) {
         })
       }), panel);
     });
-  }, [children, currentIndex]);
+  }, [children, currentIndex, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, renderOnlyCurrentPanel]);
   React.useEffect(function () {
-    var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (_ref2) {
-        var isIntersecting = _ref2.isIntersecting,
-            _ref2$boundingClientR = _ref2.boundingClientRect,
-            top = _ref2$boundingClientR.top,
-            left = _ref2$boundingClientR.left,
-            right = _ref2$boundingClientR.right;
-
-        if (!sticky || !rootRef.current || !tabListRef.current) {
-          return;
-        }
-
-        var listHeight = tabListRef.current.clientHeight;
-        setTabListHeight(listHeight);
-
-        var stickyON = function stickyON(leftOffset, rightOffset) {
-          var documentWidth = document.documentElement.clientWidth;
-          setStickyOffset({
-            left: leftOffset,
-            right: documentWidth - rightOffset
-          });
-          setSticky(true);
-        };
-
-        var stickyOFF = function stickyOFF() {
-          setStickyOffset({
-            left: 0,
-            right: 0
-          });
-          setSticky(false);
-        };
+    if (!sticky) {
+      return undefined;
+    }
 
-        if (isIntersecting) {
-          top < 0 ? stickyON(left, right) : stickyOFF();
-        } else {
-          top < 0 && stickyOFF();
-        }
-      });
-    }, {
-      threshold: [0, 1]
-    });
-    rootRef.current && observer.observe(rootRef.current);
+    addIntersectionObserver();
+    addObserveEvent();
     return function () {
-      rootRef.current && observer.unobserve(rootRef.current);
+      removeObserveEvent();
     };
-  }, [calculateSticky]);
+  }, [addIntersectionObserver, sticky, addObserveEvent, removeObserveEvent]);
   React.useEffect(function () {
     var handleResize = (0, _lodash["default"])(function () {
       calculateSticky();
+
+      if (sticky && isContainerNotFitViewport()) {
+        removeObserveEvent();
+        addIntersectionObserver();
+        addObserveEvent();
+      }
     }, 300);
     var activeTabNode = tabsRef.current[currentIndex];
     var resizeObserver = new ResizeObserver(function (entries) {
@@ -340,8 +383,9 @@ var Tabs = function Tabs(_ref) {
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
+      resizeObserver.unobserve(activeTabNode);
     };
-  }, [calculateUnderline, calculateSticky]);
+  }, [sticky, currentIndex, addObserveEvent, calculateSticky, removeObserveEvent, calculateUnderline, addIntersectionObserver, isContainerNotFitViewport]);
   React.useEffect(function () {
     if (!swiperInstance) {
       return;
@@ -427,6 +471,7 @@ Tabs.propTypes = {
   currentIndex: _propTypes["default"].number,
   defaultIndex: _propTypes["default"].number,
   renderOnlyCurrentPanel: _propTypes["default"].bool,
+  outerObserveContainer: _propTypes["default"].oneOfType([_propTypes["default"].elementType, _propTypes["default"].any]),
   onTabClick: _propTypes["default"].func
 };
 var _default = Tabs;

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

@@ -70,8 +70,10 @@ export declare type TextFieldProps = {
         input?: Record<string, string>;
         iconBox?: Record<string, string>;
     };
-    /** Аргумент элемента input */
+    /** Атрибут элемента input */
     inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';
+    /** Атрибут элемента input. Не работает с textarea=true */
+    autoComplete?: string;
     /** Переводит компонент в контролируемое состояние */
     isControlled?: boolean;
     /** Обработчик изменения значения */

package/dist/lib/components/TextField/TextField.js

@@ -121,6 +121,7 @@ var TextField = function TextField(_ref) {
       noticeText = _ref.noticeText,
       inputRef = _ref.inputRef,
       inputMode = _ref.inputMode,
+      autoComplete = _ref.autoComplete,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
   var input = _ref$classes.input,
@@ -175,7 +176,7 @@ var TextField = function TextField(_ref) {
   (0, React.useEffect)(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
-  }, [value, checkSymbolMaxLimit]);
+  }, [value, checkSymbolMaxLimit, isControlled]);
   (0, React.useEffect)(function () {
     setTouch((0, _uiHelpers.detectTouch)());
   }, []);
@@ -183,7 +184,7 @@ var TextField = function TextField(_ref) {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;
     });
-  }, [isPasswordHidden]);
+  }, []);
 
   var setTextareaHeight = function setTextareaHeight() {
     if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current)) {
@@ -206,7 +207,7 @@ var TextField = function TextField(_ref) {
 
     !isControlled && setInputValue(e.target.value);
     checkSymbolMaxLimit(e.target.value);
-    onChange && onChange(e);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
   var handleTextareaClick = function handleTextareaClick() {
@@ -223,18 +224,18 @@ var TextField = function TextField(_ref) {
     var isClearFuncAvailable = !customIcon && !onCustomIconClick && verification === ERROR;
     var field = fieldNode.current;
     isPasswordType && togglePasswordHiding();
-    onCustomIconClick && onCustomIconClick(e);
+    onCustomIconClick === null || onCustomIconClick === void 0 ? void 0 : onCustomIconClick(e);
 
     if (!isControlled && isClearFuncAvailable) {
       setInputValue('');
-      field && field.focus();
+      field === null || field === void 0 ? void 0 : field.focus();
     }
-  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, verification, setInputValue]);
+  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, verification, customIcon, isControlled]);
   var handleFocus = (0, React.useCallback)(function (e) {
-    onFocus && onFocus(e);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
   var handleBlur = (0, React.useCallback)(function (e) {
-    onBlur && onBlur(e);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   }, [onBlur]);
   var handleBeforeMaskChange = (0, React.useCallback)(function (newState, oldState, inputedValue) {
     return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
@@ -257,7 +258,8 @@ var TextField = function TextField(_ref) {
   });
   var inputParams = (0, _extends2["default"])((0, _extends2["default"])({}, commonParams), {
     className: cn('field', input),
-    type: isVisiblePassword ? 'text' : type
+    type: isVisiblePassword ? 'text' : type,
+    autoComplete: autoComplete
   });
   var inputMaskParams = {
     mask: mask,
@@ -277,7 +279,7 @@ var TextField = function TextField(_ref) {
     }
 
     fieldNode.current = node;
-    inputRef && inputRef(node);
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
   };
 
   var getIcon = function getIcon() {
@@ -396,6 +398,8 @@ TextField.propTypes = {
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   type: PropTypes.oneOf(['text', 'password', 'tel', 'email']),
+  inputMode: PropTypes.oneOf(['numeric', 'tel', 'decimal', 'email', 'url', 'search', 'none']),
+  autoComplete: PropTypes.string,
   name: PropTypes.string,
   placeholder: PropTypes.string,
   id: PropTypes.string,

package/dist/lib/components/Tile/Tile.js

@@ -52,7 +52,7 @@ var Tile = function Tile(_ref) {
       dataAttrs = _ref.dataAttrs;
 
   var handleClick = function handleClick(e) {
-    onClick && onClick(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
 
   var isPointer = !!href || isInteractive;
@@ -79,7 +79,9 @@ Tile.propTypes = {
   className: _propTypes["default"].string,
   isInteractive: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
-  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  })
 };
 var _default = Tile;
 exports["default"] = _default;