@megafon/ui-core 3.0.0-beta.6 → 3.0.0

package/dist/es/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/es/components/Select/reducer/selectReducer.js

@@ -0,0 +1,123 @@
+import "core-js/modules/es.array.every";
+import _extends from "@babel/runtime/helpers/extends";
+
+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;
+  });
+};
+
+export var initialState = {
+  isOpened: false,
+  hoveredItemIndex: 0,
+  itemsList: [],
+  comparableInputValue: '',
+  inputValue: ''
+};
+export var 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 || (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 _extends(_extends({}, state), {
+          isOpened: isOpened
+        });
+      }
+
+    case UPDATE_ITEMS_LIST:
+      {
+        var isItemsEqual = isEqualItems(items, prevItems);
+        return isItemsEqual ? state : _extends(_extends({}, state), {
+          itemsList: items
+        });
+      }
+
+    case UPDATE_VALUE_FROM_PROPS:
+      {
+        return _extends(_extends({}, state), {
+          hoveredItemIndex: hoveredItemIndex,
+          inputValue: inputValue,
+          comparableInputValue: ''
+        });
+      }
+
+    case COMBOBOX_VALUE_DEBOUNCE:
+      {
+        return _extends(_extends({}, state), {
+          comparableInputValue: comparableInputValue,
+          itemsList: items,
+          isOpened: true,
+          hoveredItemIndex: 0
+        });
+      }
+
+    case UPDATE_SELECT_VALUE:
+      {
+        return _extends(_extends({}, state), {
+          isOpened: false,
+          itemsList: items,
+          hoveredItemIndex: hoveredItemIndex
+        });
+      }
+
+    case SET_HOVERED_ITEM_INDEX:
+      {
+        return _extends(_extends({}, state), {
+          hoveredItemIndex: hoveredItemIndex
+        });
+      }
+
+    case COMBOBOX_INPUT_CHANGE:
+      {
+        return _extends(_extends({}, state), {
+          inputValue: inputValue
+        });
+      }
+
+    default:
+      {
+        return state;
+      }
+  }
+};
+
+export default selectReducer;

package/dist/es/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/es/components/Switcher/Switcher.js

@@ -17,7 +17,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/es/components/Tabs/Tab.d.ts

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
-export interface ITabProps extends IFilterDataAttrs {
+export interface ITabProps {
     /** Заголовок таба */
     title?: string;
     /** Иконка таба */
     icon?: React.ReactNode;
     /** Ссылка */
     href?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     /** Дочерние элементы */
     children?: React.ReactNode;
     /** Функция рендера компонента-обертки для заголовка и иконки */

package/dist/es/components/Tabs/Tab.js

@@ -8,10 +8,12 @@ var Tab = function Tab(_ref) {
 };
 
 Tab.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   title: PropTypes.string,
   icon: PropTypes.node,
   href: PropTypes.string,
-  renderTabWrapper: PropTypes.func,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
+  renderTabWrapper: PropTypes.func
 };
 export default Tab;

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

@@ -27,6 +27,14 @@ export interface ITabsProps {
         tab?: string;
         activeTab?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        slider?: Record<string, string>;
+        panel?: Record<string, string>;
+        prev?: Record<string, string>;
+        next?: Record<string, string>;
+    };
     /** Размер табов */
     size?: TabSizeType;
     /** Горизонтальное выравнивание */
@@ -41,6 +49,8 @@ export interface ITabsProps {
     defaultIndex?: number;
     /** Рендер содержимого только для текущего таба */
     renderOnlyCurrentPanel?: boolean;
+    /** Внешний контейнер для режима фиксация табов */
+    outerObserveContainer?: HTMLDivElement | null;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

package/dist/es/components/Tabs/Tabs.js

@@ -67,10 +67,13 @@ var Tabs = function Tabs(_ref) {
       _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
       renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
-      onTabClick = _ref.onTabClick;
+      dataAttrs = _ref.dataAttrs,
+      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 = _slicedToArray(_React$useState, 2),
@@ -164,11 +167,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);
@@ -186,6 +248,28 @@ var Tabs = function Tabs(_ref) {
   var handleNextArrowClick = React.useCallback(function () {
     swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
   }, [swiperInstance]);
+  var handleReachBeginning = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+  }, []);
+  var handleReachEnd = React.useCallback(function (swiper) {
+    setEnd(swiper.isEnd);
+  }, []);
+  var handleFromEdge = React.useCallback(function (swiper) {
+    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, {
@@ -207,7 +291,7 @@ var Tabs = function Tabs(_ref) {
           icon = _child$props.icon,
           href = _child$props.href,
           renderTabWrapper = _child$props.renderTabWrapper,
-          dataAttrs = _child$props.dataAttrs;
+          data = _child$props.dataAttrs;
       var tab = renderTab(i, title, icon, href);
       var activeTabClassName = currentIndex === i ? activeTabClass : undefined;
       return /*#__PURE__*/React.createElement(SwiperSlide, {
@@ -215,9 +299,9 @@ var Tabs = function Tabs(_ref) {
       }, /*#__PURE__*/React.createElement("div", _extends({
         className: cn('tab', [tabClass, activeTabClassName]),
         ref: setTabRef
-      }, filterDataAttrs(dataAttrs)), renderTabWrapper ? renderTabWrapper(tab) : tab));
+      }, 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;
@@ -227,73 +311,33 @@ var Tabs = function Tabs(_ref) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, i + 1), {
         className: cn('panel', {
           current: isCurrentPanel
         })
-      }, panel);
+      }), panel);
     });
-  }, [children, currentIndex]);
-  var handleReachBeginning = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-  }, []);
-  var handleReachEnd = React.useCallback(function (swiper) {
-    setEnd(swiper.isEnd);
-  }, []);
-  var handleFromEdge = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-    setEnd(swiper.isEnd);
-  }, []);
+  }, [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 = throttle(function () {
       calculateSticky();
+
+      if (sticky && isContainerNotFitViewport()) {
+        removeObserveEvent();
+        addIntersectionObserver();
+        addObserveEvent();
+      }
     }, 300);
     var activeTabNode = tabsRef.current[currentIndex];
     var resizeObserver = new ResizeObserver(function (entries) {
@@ -310,8 +354,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;
@@ -320,7 +365,7 @@ var Tabs = function Tabs(_ref) {
     setBeginning(swiperInstance.isBeginning);
     setEnd(swiperInstance.isEnd);
   }, [swiperInstance]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
       'h-align': hAlign,
@@ -329,7 +374,7 @@ var Tabs = function Tabs(_ref) {
       sticky: isSticky
     }, [className, rootClass]),
     ref: rootRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: tabListRef,
     style: {
       height: tabListHeight
@@ -340,7 +385,7 @@ var Tabs = function Tabs(_ref) {
       paddingLeft: stickyOffset.left,
       paddingRight: stickyOffset.right
     }
-  }, /*#__PURE__*/React.createElement(Swiper, {
+  }, /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
     simulateTouch: false,
     className: cn('swiper', {
       beginning: isBeginning,
@@ -352,7 +397,7 @@ var Tabs = function Tabs(_ref) {
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge
-  }, renderTabs(), /*#__PURE__*/React.createElement("div", {
+  }), renderTabs(), /*#__PURE__*/React.createElement("div", {
     className: cn('underline'),
     slot: "wrapper-start",
     style: {
@@ -360,19 +405,19 @@ var Tabs = function Tabs(_ref) {
       transform: "translateX(".concat(underlineTranslate, "px)"),
       transitionProperty: underlineTransition
     }
-  }), /*#__PURE__*/React.createElement(ArrowLeft, {
+  }), /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
     className: cn('arrow', {
       prev: true,
       hide: isBeginning
     }),
     onClick: handlePrevArrowClick
-  }), /*#__PURE__*/React.createElement(ArrowRight, {
+  })), /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
     className: cn('arrow', {
       next: true,
       hide: isEnd
     }),
     onClick: handleNextArrowClick
-  })))), renderPanels());
+  }))))), renderPanels());
 };
 
 Tabs.propTypes = {
@@ -383,6 +428,13 @@ Tabs.propTypes = {
     tab: PropTypes.string,
     activeTab: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    slider: PropTypes.objectOf(PropTypes.string.isRequired),
+    panel: PropTypes.objectOf(PropTypes.string.isRequired),
+    prev: PropTypes.objectOf(PropTypes.string.isRequired),
+    next: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   size: PropTypes.oneOf(Object.values(TabSize)),
   hAlign: PropTypes.oneOf(Object.values(TabHAlign)),
   tabColorTheme: PropTypes.oneOf(Object.values(TabColorTheme)),
@@ -390,6 +442,7 @@ Tabs.propTypes = {
   currentIndex: PropTypes.number,
   defaultIndex: PropTypes.number,
   renderOnlyCurrentPanel: PropTypes.bool,
+  outerObserveContainer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.any]),
   onTabClick: PropTypes.func
 };
 export default Tabs;

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

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