@megafon/ui-core 2.5.0 → 3.0.0-beta.11

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,54 +1,48 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-switcher {
   top: 22px;
   right: 28px;
   width: 48px;
   height: 28px;
+  border: 1px solid var(--stcBlack20);
   border-radius: 15.5px;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
-          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  background-color: var(--base);
   cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.mfui-switcher_no-touch:hover {
-  background-color: #EDEDED;
-}
 .mfui-switcher__pointer {
   position: relative;
   top: 1px;
-  left: 0;
+  left: 1px;
   width: 24px;
   height: 24px;
-  border: 1px solid #D8D8D8;
+  border: 1px solid var(--stcBlack20);
   border-radius: 50%;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+  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 {
-  background-color: #00B956;
+  border-color: var(--brandGreen);
+  background-color: var(--brandGreen);
 }
 .mfui-switcher_checked .mfui-switcher__pointer {
-  left: 22px;
+  left: 21px;
 }
 .mfui-switcher_checked.mfui-switcher_no-touch:hover {
-  background-color: #10E272;
+  border-color: var(--buttonHoverGreen);
+  background-color: var(--buttonHoverGreen);
 }
 .mfui-switcher_disabled {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
 }
-.mfui-switcher_checked.mfui-switcher_disabled,
-.mfui-switcher_checked.mfui-switcher_disabled.mfui-switcher_no-touch:hover {
-  background-color: #D8D8D8;
+.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 === null || onChange === void 0 ? void 0 : onChange(e);
+    onChange && onChange(e);
   };
 
   return /*#__PURE__*/React.createElement("div", {

package/dist/lib/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/lib/components/Tabs/Tab.js

@@ -24,11 +24,13 @@ var Tab = function Tab(_ref) {
 };
 
 Tab.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   title: _propTypes["default"].string,
   icon: _propTypes["default"].node,
   href: _propTypes["default"].string,
-  renderTabWrapper: _propTypes["default"].func,
-  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  renderTabWrapper: _propTypes["default"].func
 };
 var _default = Tab;
 exports["default"] = _default;

package/dist/lib/components/Tabs/Tabs.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-tabs__swiper {
   font-family: inherit;
   font-size: 15px;
@@ -28,13 +21,13 @@ h5 {
 }
 .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, left top, right top, from(var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to right, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, right top, left top, from(var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to left, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper_beginning:before {
   display: none;
@@ -80,19 +73,19 @@ h5 {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   height: 32px;
-  color: #333333;
+  color: var(--content);
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-tabs__tab-inner:hover {
-  color: #00B956;
-  fill: #00B956;
+  color: var(--brandGreen);
+  fill: var(--brandGreen);
 }
 .mfui-tabs__tab-inner_current {
-  color: #00B956;
-  fill: #00B956;
+  color: var(--brandGreen);
+  fill: var(--brandGreen);
 }
 .mfui-tabs__tab-icon {
   width: 32px;
@@ -116,7 +109,7 @@ h5 {
   bottom: 0;
   left: 0;
   height: 2px;
-  background-color: #00B956;
+  background-color: var(--brandGreen);
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
@@ -128,11 +121,11 @@ h5 {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: #333333;
+  background-color: var(--content);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
-  fill: #FFFFFF;
+  fill: var(--base);
 }
 @media screen and (max-width: 1023px) {
   .mfui-tabs__arrow {
@@ -206,7 +199,7 @@ h5 {
           justify-content: center;
 }
 .mfui-tabs_h-align_center .mfui-tabs__tab {
-  border-bottom: 1px solid #D8D8D8;
+  border-bottom: 1px solid var(--stcWhite);
 }
 .mfui-tabs_h-align_left .mfui-tabs__swiper-wrapper {
   position: relative;
@@ -218,7 +211,7 @@ h5 {
   left: 0;
   width: 100%;
   height: 1px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-tabs_indents .mfui-tabs__swiper {
@@ -238,37 +231,37 @@ h5 {
   right: 0;
   left: 0;
   z-index: 100;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(#00B956), to(transparent));
-  background: linear-gradient(to right, #00B956, transparent);
+  background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), to(transparent));
+  background: linear-gradient(to right, var(--brandGreen), transparent);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(#00B956), to(transparent));
-  background: linear-gradient(to left, #00B956, transparent);
+  background: -webkit-gradient(linear, right top, left top, from(var(--brandGreen)), to(transparent));
+  background: linear-gradient(to left, var(--brandGreen), transparent);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab {
-  border-color: rgba(237, 237, 237, 0.5);
+  border-color: var(--stcBlack5);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner {
-  color: #FFFFFF80;
-  fill: #FFFFFF80;
+  color: var(--stcWhite50);
+  fill: var(--stcWhite50);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:hover {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: var(--stcWhite);
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: var(--stcWhite);
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow {
-  background-color: #FFFFFF;
-  fill: #00B956;
+  background-color: var(--stcWhite);
+  fill: var(--brandGreen);
 }

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