@megafon/ui-core 2.0.0-beta.97 → 2.1.0

package/dist/es/components/Counter/Counter.css

@@ -5,111 +5,116 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-counter {
-  background-color: #FFFFFF;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-counter {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  height: 32px;
-  width: 120px;
-}
-.mfui-beta-counter__btn {
-  background-color: transparent;
-  border: 1px solid #D8D8D8;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  cursor: pointer;
+  width: 120px;
+  height: 32px;
+  background-color: #FFFFFF;
+}
+.mfui-counter__btn {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 100%;
-  font-size: 20px;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  outline: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  max-width: 32px;
+  height: 100%;
+  margin: 0;
   padding: 0;
+  border: 1px solid #D8D8D8;
+  font-size: 20px;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  text-decoration: none;
-  max-width: 32px;
 }
-.mfui-beta-counter__btn:hover {
+.mfui-counter__btn:hover {
   background-color: #F6F6F6;
 }
-.mfui-beta-counter__btn:disabled {
-  cursor: default;
+.mfui-counter__btn:disabled {
   background-color: #EDEDED;
+  cursor: default;
 }
-.mfui-beta-counter__btn:disabled .mfui-beta-counter__icon {
+.mfui-counter__btn:disabled .mfui-counter__icon {
   fill: rgba(51, 51, 51, 0.5);
 }
-.mfui-beta-counter__btn_left {
+.mfui-counter__btn_left {
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
 }
-.mfui-beta-counter__btn_right {
+.mfui-counter__btn_right {
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
 }
-.mfui-beta-counter__icon {
-  width: 55%;
-  height: 55%;
+.mfui-counter__icon {
+  display: block;
+  width: 20px;
+  height: 20px;
 }
-.mfui-beta-counter__input-box {
-  border-top: 1px solid #D8D8D8;
-  border-bottom: 1px solid #D8D8D8;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-counter__input-box {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  overflow: hidden;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   height: 100%;
+  border-top: 1px solid #D8D8D8;
+  border-bottom: 1px solid #D8D8D8;
+  overflow: hidden;
 }
-.mfui-beta-counter__input {
-  border: none;
+.mfui-counter__input {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  cursor: text;
+  width: 100%;
   height: 100%;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  overflow: auto;
-  outline: none;
   margin: 0;
   padding: 0;
+  border: none;
+  overflow: auto;
   text-align: center;
-  width: 100%;
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  cursor: text;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
 }
-.mfui-beta-counter_disabled .mfui-beta-counter__btn {
-  cursor: default;
+.mfui-counter_disabled .mfui-counter__btn {
   background-color: #EDEDED;
-}
-.mfui-beta-counter_disabled .mfui-beta-counter__input {
   cursor: default;
+}
+.mfui-counter_disabled .mfui-counter__input {
   background-color: #EDEDED;
+  cursor: default;
   color: rgba(51, 51, 51, 0.5);
 }
-.mfui-beta-counter_disabled .mfui-beta-counter__icon {
+.mfui-counter_disabled .mfui-counter__icon {
   fill: rgba(51, 51, 51, 0.5);
 }

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import './Counter.less';
 export interface ICounterProps {
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Внешнее значение для контролируемого компонента */
+    value?: number;
     /** Начальное значение */
     initialValue?: number;
     /** Минимальное доступное значение */
@@ -8,7 +12,7 @@ export interface ICounterProps {
     /** Максимальное доступное значение */
     max?: number;
     /** Запретить взаимодействие с компонентом */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /** Обработчик изменения значения 'value' */
     onChange?: (value: number) => void;
     /** Дополнительный класс для корневого элемента */

package/dist/es/components/Counter/Counter.js

@@ -2,8 +2,8 @@ import "core-js/modules/es.number.constructor";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-import cnCreate from "../../utils/cnCreate";
 import "./Counter.css";
 
 var IconMinus = function IconMinus(props) {
@@ -22,16 +22,20 @@ var IconPlus = function IconPlus(props) {
   }));
 };
 
-var cn = cnCreate('mfui-beta-counter');
+var cn = cnCreate('mfui-counter');
 
 var Counter = function Counter(_ref) {
-  var initialValue = _ref.initialValue,
+  var _ref$isControlled = _ref.isControlled,
+      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      initialValue = _ref.initialValue,
       _ref$max = _ref.max,
       max = _ref$max === void 0 ? 999999 : _ref$max,
       _ref$min = _ref.min,
       min = _ref$min === void 0 ? 0 : _ref$min,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onChange = _ref.onChange,
       className = _ref.className,
       _ref$classes = _ref.classes,
@@ -46,40 +50,42 @@ var Counter = function Counter(_ref) {
   React.useEffect(function () {
     setCounter(currentInitialValue);
   }, [currentInitialValue]);
-  var handleValueChange = React.useCallback(function (value) {
-    setCounter(value);
+  var handleValueChange = React.useCallback(function (inputValue) {
+    if (!isControlled) {
+      setCounter(inputValue);
+    }
 
-    if (value < min) {
+    if (inputValue < min) {
       onChange && onChange(min);
     }
 
-    if (value > max) {
+    if (inputValue > max) {
       onChange && onChange(max);
     }
 
-    if (value >= min && value <= max) {
-      onChange && onChange(value);
+    if (inputValue >= min && inputValue <= max) {
+      onChange && onChange(inputValue);
     }
-  }, [min, max, onChange]);
+  }, [min, max, onChange, isControlled]);
   var handleMinusClick = React.useCallback(function () {
-    handleValueChange(counter - 1);
-  }, [handleValueChange, counter]);
+    handleValueChange(isControlled ? value - 1 : counter - 1);
+  }, [handleValueChange, counter, isControlled, value]);
   var handlePlusClick = React.useCallback(function () {
-    handleValueChange(counter + 1);
-  }, [handleValueChange, counter]);
+    handleValueChange(isControlled ? value + 1 : counter + 1);
+  }, [handleValueChange, counter, isControlled, value]);
   var handleInputChange = React.useCallback(function (e) {
     var pattern = /^[0-9\b]+$/;
-    var value = e.target.value;
+    var inputValue = e.target.value;
 
-    if (value !== '' && !pattern.test(value)) {
+    if (inputValue !== '' && !pattern.test(inputValue)) {
       return;
     }
 
-    handleValueChange(Number(value));
+    handleValueChange(Number(inputValue));
   }, [handleValueChange]);
   var handleInputBlur = React.useCallback(function (e) {
-    var value = e.target.value;
-    var numberValue = Number(value);
+    var inputValue = e.target.value;
+    var numberValue = Number(inputValue);
 
     if (numberValue < min) {
       handleValueChange(min);
@@ -88,19 +94,18 @@ var Counter = function Counter(_ref) {
 
     if (numberValue > max) {
       handleValueChange(max);
-      return;
     }
   }, [handleValueChange, min, max]);
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
-      disabled: isDisabled
+      disabled: disabled
     }, [className, classes.root])
   }, /*#__PURE__*/React.createElement("button", {
     className: cn('btn', {
       left: true
     }, classes.buttonMinus),
     type: "button",
-    disabled: isDisabled || counter <= min,
+    disabled: disabled || (isControlled ? value : counter) <= min,
     onClick: handleMinusClick
   }, /*#__PURE__*/React.createElement(IconMinus, {
     className: cn('icon')
@@ -108,16 +113,16 @@ var Counter = function Counter(_ref) {
     className: cn('input-box')
   }, /*#__PURE__*/React.createElement("input", {
     className: cn('input', classes.input),
-    value: counter,
+    value: isControlled ? value : counter,
     onChange: handleInputChange,
     onBlur: handleInputBlur,
-    disabled: isDisabled
+    disabled: disabled
   })), /*#__PURE__*/React.createElement("button", {
     className: cn('btn', {
       right: true
     }, classes.buttonPlus),
     type: "button",
-    disabled: isDisabled || counter >= max,
+    disabled: disabled || counter >= max || value >= max,
     onClick: handlePlusClick
   }, /*#__PURE__*/React.createElement(IconPlus, {
     className: cn('icon')
@@ -125,10 +130,12 @@ var Counter = function Counter(_ref) {
 };
 
 Counter.propTypes = {
+  isControlled: PropTypes.bool,
+  value: PropTypes.number,
   initialValue: PropTypes.number,
   min: PropTypes.number,
   max: PropTypes.number,
-  isDisabled: PropTypes.bool,
+  disabled: PropTypes.bool,
   onChange: PropTypes.func,
   className: PropTypes.string,
   classes: PropTypes.shape({

package/dist/es/components/Grid/Grid.css

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-grid__container {
+.mfui-grid__container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13,90 +13,90 @@ h5 {
       -ms-flex-positive: 1;
           flex-grow: 1;
 }
-.mfui-beta-grid__container_multi-row {
+.mfui-grid__container_multi-row {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.mfui-beta-grid__container_h-align_right {
+.mfui-grid__container_h-align_right {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
-.mfui-beta-grid__container_h-align_center {
+.mfui-grid__container_h-align_center {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
-.mfui-beta-grid__container_h-align_between {
+.mfui-grid__container_h-align_between {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.mfui-beta-grid__container_h-align_around {
+.mfui-grid__container_h-align_around {
   -ms-flex-pack: distribute;
       justify-content: space-around;
 }
-.mfui-beta-grid__container_v-align_top {
+.mfui-grid__container_v-align_top {
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
 }
-.mfui-beta-grid__container_v-align_bottom {
+.mfui-grid__container_v-align_bottom {
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
 }
-.mfui-beta-grid__container_v-align_center {
+.mfui-grid__container_v-align_center {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
-.mfui-beta-grid__container_v-align_baseline {
+.mfui-grid__container_v-align_baseline {
   -webkit-box-align: baseline;
       -ms-flex-align: baseline;
           align-items: baseline;
 }
-.mfui-beta-grid__container_gutters-left_large {
+.mfui-grid__container_gutters-left_large {
   margin-left: -32px;
 }
-.mfui-beta-grid__container_gutters-left_medium {
+.mfui-grid__container_gutters-left_medium {
   margin-left: -20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-grid__container_gutters-left_medium {
+  .mfui-grid__container_gutters-left_medium {
     margin-left: -16px;
   }
 }
-.mfui-beta-grid__container_gutters-bottom_large {
+.mfui-grid__container_gutters-bottom_large {
   margin-bottom: -32px;
 }
-.mfui-beta-grid__container_gutters-bottom_medium {
+.mfui-grid__container_gutters-bottom_medium {
   margin-bottom: -20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-grid__container_gutters-bottom_medium {
+  .mfui-grid__container_gutters-bottom_medium {
     margin-bottom: -16px;
   }
 }
-.mfui-beta-grid__column_gutter-left_large {
+.mfui-grid__column_gutter-left_large {
   padding-left: 32px;
 }
-.mfui-beta-grid__column_gutter-left_medium {
+.mfui-grid__column_gutter-left_medium {
   padding-left: 20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-grid__column_gutter-left_medium {
+  .mfui-grid__column_gutter-left_medium {
     padding-left: 16px;
   }
 }
-.mfui-beta-grid__column_gutter-bottom_large {
+.mfui-grid__column_gutter-bottom_large {
   padding-bottom: 32px;
 }
-.mfui-beta-grid__column_gutter-bottom_medium {
+.mfui-grid__column_gutter-bottom_medium {
   padding-bottom: 20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-grid__column_gutter-bottom_medium {
+  .mfui-grid__column_gutter-bottom_medium {
     padding-bottom: 16px;
   }
 }

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import './Grid.less';
 import { IGridColumn } from './GridColumn';
+import './Grid.less';
 export interface IGridProps {
     /** Выравнивание всех колонок по горизонтали */
     hAlign?: 'left' | 'right' | 'center' | 'between' | 'around';
@@ -17,19 +16,5 @@ export interface IGridProps {
     className?: string;
     children: Array<React.ReactElement<IGridColumn>> | React.ReactElement<IGridColumn>;
 }
-declare class Grid extends React.Component<IGridProps> {
-    static propTypes: {
-        hAlign: PropTypes.Requireable<string>;
-        vAlign: PropTypes.Requireable<string>;
-        guttersLeft: PropTypes.Requireable<string>;
-        guttersBottom: PropTypes.Requireable<string>;
-        multiRow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: {
-        multiRow: boolean;
-    };
-    render(): JSX.Element;
-}
+declare const Grid: React.FC<IGridProps>;
 export default Grid;

package/dist/es/components/Grid/Grid.js

@@ -1,69 +1,38 @@
 import "core-js/modules/es.array.map";
-import "core-js/modules/es.date.to-string";
-import "core-js/modules/es.object.to-string";
-import "core-js/modules/es.reflect.construct";
-import "core-js/modules/es.regexp.to-string";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
 import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Grid.css";
-import cnCreate from "../../utils/cnCreate";
-var cn = cnCreate('mfui-beta-grid');
-
-var Grid = /*#__PURE__*/function (_React$Component) {
-  _inherits(Grid, _React$Component);
-
-  var _super = _createSuper(Grid);
-
-  function Grid() {
-    _classCallCheck(this, Grid);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Grid, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          guttersLeft = _this$props.guttersLeft,
-          guttersBottom = _this$props.guttersBottom,
-          multiRow = _this$props.multiRow,
-          hAlign = _this$props.hAlign,
-          vAlign = _this$props.vAlign,
-          className = _this$props.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn([className])
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cn('container', {
-          'multi-row': multiRow,
-          'h-align': hAlign,
-          'v-align': vAlign,
-          'gutters-left': guttersLeft,
-          'gutters-bottom': guttersBottom
-        })
-      }, React.Children.map(children, function (child) {
-        return React.cloneElement(child, {
-          className: cn('column', {
-            'gutter-left': guttersLeft,
-            'gutter-bottom': guttersBottom
-          }, child.props.className)
-        });
-      })));
-    }
-  }]);
-
-  return Grid;
-}(React.Component);
+var cn = cnCreate('mfui-grid');
+
+var Grid = function Grid(_ref) {
+  var children = _ref.children,
+      guttersLeft = _ref.guttersLeft,
+      guttersBottom = _ref.guttersBottom,
+      _ref$multiRow = _ref.multiRow,
+      multiRow = _ref$multiRow === void 0 ? true : _ref$multiRow,
+      hAlign = _ref.hAlign,
+      vAlign = _ref.vAlign,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('container', {
+      'multi-row': multiRow,
+      'h-align': hAlign,
+      'v-align': vAlign,
+      'gutters-left': guttersLeft,
+      'gutters-bottom': guttersBottom
+    })
+  }, React.Children.map(children, function (child) {
+    return React.cloneElement(child, {
+      className: cn('column', {
+        'gutter-left': guttersLeft,
+        'gutter-bottom': guttersBottom
+      }, child.props.className)
+    });
+  })));
+};
 
 Grid.propTypes = {
   hAlign: PropTypes.oneOf(['left', 'right', 'center', 'between', 'around']),
@@ -72,9 +41,6 @@ Grid.propTypes = {
   guttersBottom: PropTypes.oneOf(['large', 'medium']),
   multiRow: PropTypes.bool,
   className: PropTypes.string,
-  children: PropTypes.node
-};
-Grid.defaultProps = {
-  multiRow: true
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired
 };
 export default Grid;