@megafon/ui-core 3.0.0-beta.1 → 3.0.0-beta.5

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.4...@megafon/ui-core@3.0.0-beta.5) (2022-01-28)
+
+
+### Features
+
+* **header:** made header as a functional component ([81701ad](https://github.com/MegafonWebLab/megafon-ui/commit/81701ad87b6e9df2fe630bf4e183383264c0bb01))
+* **radiobutton:** made radiobutton as a functional component ([65406af](https://github.com/MegafonWebLab/megafon-ui/commit/65406afc90fd82f7eb0fdcbbe78569fc98164e78))
+
+
+
+
+
+# [3.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.3...@megafon/ui-core@3.0.0-beta.4) (2022-01-27)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
+# [3.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.2...@megafon/ui-core@3.0.0-beta.3) (2022-01-24)
+
+
+### Bug Fixes
+
+* **accordion:** add focus on arrow after tab press, add open/close accordion after enter press ([9bfa0ac](https://github.com/MegafonWebLab/megafon-ui/commit/9bfa0ac5348ac25c0e37a4df51e26e2dabde02ba))
+* **accordion:** change type of onClickAccordion prop ([9a150c5](https://github.com/MegafonWebLab/megafon-ui/commit/9a150c5de309547763a714b0eb630dfb386a8107))
+* **calendar/month:** add focus on month arrows, add enter press handlers ([63f1e47](https://github.com/MegafonWebLab/megafon-ui/commit/63f1e4761e57ed6d56464b632dce9fd5e77655e1))
+* **checkbox:** add focus on custom checkbox, add enter press handler ([83d111d](https://github.com/MegafonWebLab/megafon-ui/commit/83d111d0e4b41d3915bdd079bed4a7f9715ce7a5))
+* **checkbox:** add isChecked state, change type of onChange prop ([f535caf](https://github.com/MegafonWebLab/megafon-ui/commit/f535caf39a02ab6793d3c63b654a1f1f3e9b2b93))
+* **tooltip:** add check event function from ui-helpers ([a784ab4](https://github.com/MegafonWebLab/megafon-ui/commit/a784ab4f288124eb941fe8f52e46b2efc9aa2f82))
+
+
+### BREAKING CHANGES
+
+* **checkbox:** change type of onChange prop on (checked: boolean) => void
+* **accordion:** remove parameter 'title' in onClickAccordion prop
+* **tooltip:** change onOpen, onClose types; AccessibilityEventTypeNative from @megafon/ui-helpers
+
+
+
+
+
+# [3.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.1...@megafon/ui-core@3.0.0-beta.2) (2022-01-21)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
 # [3.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.0...@megafon/ui-core@3.0.0-beta.1) (2022-01-20)
 
 

package/dist/es/colors/Colors.js

@@ -1,5 +1,6 @@
 import "core-js/modules/es.symbol";
 import "core-js/modules/es.symbol.description";
+import "core-js/modules/es.array.includes";
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.function.name";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -104,16 +105,44 @@ var basic = colorsData.basic,
     gradientColors = colorsData.gradientColors,
     staticColors = colorsData.staticColors,
     staticOpacity = colorsData.staticOpacity,
-    soft = colorsData.soft;
+    soft = colorsData.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 = cnCreate('colors');
 
 var Colors = function Colors() {
-  var _React$useState = React.useState(window.localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'),
+  var _React$useState = React.useState(getThemeFromLocalStorage()),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       setCurrentTheme = _React$useState2[1];
 
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      setLoad = _React$useState4[1];
+
+  React.useEffect(function () {
+    function load() {
+      setLoad(true);
+      document.removeEventListener('css-var-load', load);
+    }
+
+    document.addEventListener('css-var-load', load);
+  }, []);
+
   var getCurrentColorValue = function getCurrentColorValue(code) {
-    return document.documentElement.style.getPropertyValue("--".concat(code));
+    return typeof document !== 'undefined' ? document.documentElement.style.getPropertyValue("--".concat(code)) : '';
   };
 
   React.useEffect(function () {

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

@@ -20,7 +20,7 @@ export interface IAccordionProps extends IFilterDataAttrs {
         titleWrap?: string;
     };
     /** Обработчик клика */
-    onClickAccordion?: (isOpened: boolean, title: string | React.ReactNode | React.ReactNode[]) => void;
+    onClickAccordion?: (isOpened: boolean) => void;
 }
 declare const Accordion: React.FC<IAccordionProps>;
 export default Accordion;

package/dist/es/components/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs, checkEventIsClickOrEnterPress } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Collapse from "../Collapse/Collapse";
 import Header from "../Header/Header";
@@ -52,9 +52,11 @@ var Accordion = function Accordion(_ref) {
     setIsOpenedState(isOpened);
   }, [isOpened]);
 
-  var handleClickTitle = function handleClickTitle() {
-    onClickAccordion && onClickAccordion(!isOpenedState, title);
-    setIsOpenedState(!isOpenedState);
+  var handleClickTitle = function handleClickTitle(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      onClickAccordion && onClickAccordion(!isOpenedState);
+      setIsOpenedState(!isOpenedState);
+    }
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
@@ -65,10 +67,13 @@ var Accordion = function Accordion(_ref) {
     }, [className, rootPropsClasses, openedClassName])
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('title-wrap', [titleWrapPropsClasses]),
-    onClick: handleClickTitle
+    onClick: handleClickTitle,
+    onKeyDown: handleClickTitle
   }, /*#__PURE__*/React.createElement(Header, {
     as: "h5"
   }, title), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "button",
     className: cn('icon-box', {
       open: isOpenedState
     })

package/dist/es/components/Calendar/components/Month/Month.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate } from '@megafon/ui-helpers';
 import "./Month.css";
 import PropTypes from 'prop-types';
 
@@ -38,12 +38,22 @@ var Month = function Month(_ref) {
       goToNextMonth = _ref.goToNextMonth,
       children = _ref.children;
 
-  var handleArrowLeftClick = function handleArrowLeftClick() {
-    !isPrevMonthDisabled && goToPreviousMonth();
+  var handleArrowLeftClick = function handleArrowLeftClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isPrevMonthDisabled && goToPreviousMonth();
+    }
   };
 
-  var handleArrowRightClick = function handleArrowRightClick() {
-    !isNextMonthDisabled && goToNextMonth();
+  var handleArrowRightClick = function handleArrowRightClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isNextMonthDisabled && goToNextMonth();
+    }
+  };
+
+  var getTabIndex = function getTabIndex(hasFocus) {
+    var tabIndexWithFocus = 0;
+    var tabIndexWithoutFocus = -1;
+    return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
   return /*#__PURE__*/React.createElement("div", {
@@ -51,16 +61,22 @@ var Month = function Month(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(ArrowLeft, {
+    role: "button",
+    tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
       disabled: isPrevMonthDisabled
     }),
+    onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
   }), /*#__PURE__*/React.createElement("span", {
     className: cn('title')
   }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/React.createElement(ArrowRight, {
+    role: "button",
+    tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
       disabled: isNextMonthDisabled
     }),
+    onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('weekday-labels')

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

@@ -1,6 +1,5 @@
-import * as React from 'react';
+import React from 'react';
 import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import './Checkbox.less';
 export interface ICheckboxProps extends IFilterDataAttrs {
     /** Цвет чекбокса */
@@ -28,28 +27,7 @@ export interface ICheckboxProps extends IFilterDataAttrs {
     extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string;
     children: JSX.Element[] | Element[] | JSX.Element | Element | string;
     /** Обработчик изменения значения */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare class Checkbox extends React.Component<ICheckboxProps, {}> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        fontSize: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        checked: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
-        extraContent: PropTypes.Requireable<string | PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: Partial<ICheckboxProps>;
-    isTouch: boolean;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    onChange?: (checked: boolean) => void;
 }
+declare const Checkbox: React.FC<ICheckboxProps>;
 export default Checkbox;

package/dist/es/components/Checkbox/Checkbox.js

@@ -1,21 +1,8 @@
-import "core-js/modules/es.date.to-string";
 import "core-js/modules/es.function.name";
-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";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-
-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, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
+import React, { useState, useEffect } from 'react';
+import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Checkbox.css";
 
@@ -27,79 +14,79 @@ var CheckedIcon = function CheckedIcon(props) {
   }));
 };
 
+var CHANGE_KEY = 'change';
 var cn = cnCreate('mfui-checkbox');
 
-var Checkbox = /*#__PURE__*/function (_React$Component) {
-  _inherits(Checkbox, _React$Component);
-
-  var _super = _createSuper(Checkbox);
-
-  function Checkbox() {
-    var _this;
+var Checkbox = function Checkbox(_ref) {
+  var className = _ref.className,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
+      name = _ref.name,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'dark' : _ref$color,
+      value = _ref.value,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      children = _ref.children,
+      extraContent = _ref.extraContent,
+      dataAttrs = _ref.dataAttrs,
+      classes = _ref.classes,
+      onChange = _ref.onChange;
+  var isTouch = detectTouch();
 
-    _classCallCheck(this, Checkbox);
+  var _useState = useState(checked),
+      _useState2 = _slicedToArray(_useState, 2),
+      isChecked = _useState2[0],
+      setIsChecked = _useState2[1];
 
-    _this = _super.apply(this, arguments);
-    _this.isTouch = detectTouch();
+  useEffect(function () {
+    setIsChecked(checked);
+  }, [checked]);
 
-    _this.handleChange = function (e) {
-      var onChange = _this.props.onChange;
-      onChange && onChange(e);
-    };
-
-    return _this;
-  }
-
-  _createClass(Checkbox, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          className = _this$props.className,
-          fontSize = _this$props.fontSize,
-          name = _this$props.name,
-          color = _this$props.color,
-          value = _this$props.value,
-          checked = _this$props.checked,
-          disabled = _this$props.disabled,
-          error = _this$props.error,
-          children = _this$props.children,
-          extraContent = _this$props.extraContent,
-          dataAttrs = _this$props.dataAttrs,
-          classes = _this$props.classes;
-      return /*#__PURE__*/React.createElement("div", _extends({
-        className: cn('', {
-          'font-size': fontSize,
-          color: color,
-          checked: checked,
-          disabled: disabled,
-          error: error
-        }, className)
-      }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("div", {
-        className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
-      }, /*#__PURE__*/React.createElement("label", {
-        className: cn('label', {
-          'no-touch': !this.isTouch
-        })
-      }, /*#__PURE__*/React.createElement("input", {
-        className: cn('input'),
-        type: "checkbox",
-        name: name,
-        value: value,
-        checked: checked,
-        onChange: this.handleChange,
-        disabled: disabled
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon])
-      }, /*#__PURE__*/React.createElement(CheckedIcon, {
-        className: cn('icon')
-      })), children), extraContent && /*#__PURE__*/React.createElement("span", {
-        className: cn('extra-content')
-      }, extraContent)));
+  var handleChange = function handleChange(e) {
+    if (checkEventIsClickOrEnterPress(e) || e.type === CHANGE_KEY) {
+      setIsChecked(!isChecked);
+      onChange && onChange(!isChecked);
     }
-  }]);
+  };
 
-  return Checkbox;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('', {
+      'font-size': fontSize,
+      color: color,
+      checked: isChecked,
+      disabled: disabled,
+      error: error
+    }, className)
+  }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
+  }, /*#__PURE__*/React.createElement("label", {
+    className: cn('label', {
+      'no-touch': !isTouch
+    })
+  }, /*#__PURE__*/React.createElement("input", {
+    className: cn('input'),
+    type: "checkbox",
+    tabIndex: -1,
+    name: name,
+    value: value,
+    checked: isChecked,
+    onChange: handleChange,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "checkbox",
+    "aria-checked": isChecked,
+    className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
+    onKeyDown: handleChange
+  }, /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children), extraContent && /*#__PURE__*/React.createElement("span", {
+    className: cn('extra-content')
+  }, extraContent)));
+};
 
 Checkbox.propTypes = {
   className: PropTypes.string,
@@ -110,14 +97,9 @@ Checkbox.propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string]),
-  extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired,
+  extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]),
   dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   onChange: PropTypes.func
 };
-Checkbox.defaultProps = {
-  color: 'dark',
-  fontSize: 'regular',
-  checked: false
-};
 export default Checkbox;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import './Header.less';
 interface IHeaderProps extends IFilterDataAttrs {
     /** Тег */
@@ -18,21 +17,5 @@ interface IHeaderProps extends IFilterDataAttrs {
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }
-declare class Header extends React.Component<IHeaderProps, {}> {
-    static propTypes: {
-        as: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        margin: PropTypes.Requireable<boolean>;
-        addition: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        hAlign: PropTypes.Requireable<string>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string | null | undefined;
-        }>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: Partial<IHeaderProps>;
-    renderAddition(): JSX.Element;
-    render(): JSX.Element;
-}
+declare const Header: React.FC<IHeaderProps>;
 export default Header;

package/dist/es/components/Header/Header.js

@@ -1,68 +1,36 @@
-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 _extends from "@babel/runtime/helpers/extends";
-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, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Header.css";
 var cn = cnCreate('mfui-header');
 
-var Header = /*#__PURE__*/function (_React$Component) {
-  _inherits(Header, _React$Component);
-
-  var _super = _createSuper(Header);
-
-  function Header() {
-    _classCallCheck(this, Header);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Header, [{
-    key: "renderAddition",
-    value: function renderAddition() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn('addition')
-      }, this.props.addition);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          color = _this$props.color,
-          margin = _this$props.margin,
-          level = _this$props.as,
-          hAlign = _this$props.hAlign,
-          onClick = _this$props.onClick,
-          dataAttrs = _this$props.dataAttrs,
-          className = _this$props.className;
-      var ElementType = level;
-      return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs), {
-        className: cn({
-          color: color,
-          margin: margin,
-          level: level,
-          'h-align': hAlign
-        }, className),
-        onClick: onClick
-      }), this.props.children, this.props.addition && this.renderAddition());
-    }
-  }]);
-
-  return Header;
-}(React.Component);
+var Header = function Header(_ref) {
+  var addition = _ref.addition,
+      _ref$as = _ref.as,
+      level = _ref$as === void 0 ? 'h1' : _ref$as,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      dataAttrs = _ref.dataAttrs,
+      _ref$hAlign = _ref.hAlign,
+      hAlign = _ref$hAlign === void 0 ? 'inherit' : _ref$hAlign,
+      margin = _ref.margin,
+      onClick = _ref.onClick;
+  var ElementType = level;
+  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs), {
+    className: cn({
+      color: color,
+      margin: margin,
+      level: level,
+      'h-align': hAlign
+    }, className),
+    onClick: onClick
+  }), children, addition && /*#__PURE__*/React.createElement("div", {
+    className: cn('addition')
+  }, addition));
+};
 
 Header.propTypes = {
   as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
@@ -70,13 +38,7 @@ Header.propTypes = {
   margin: PropTypes.bool,
   addition: PropTypes.element,
   hAlign: PropTypes.oneOf(['inherit', 'left', 'center', 'right']),
-  dataAttrs: PropTypes.objectOf(PropTypes.string),
-  onClick: PropTypes.func,
-  children: PropTypes.node
-};
-Header.defaultProps = {
-  as: 'h1',
-  color: 'default',
-  hAlign: 'inherit'
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  onClick: PropTypes.func
 };
 export default Header;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import './RadioButton.less';
 export interface IRadioButtonProps extends IFilterDataAttrs {
     /** Значение */
@@ -28,29 +27,5 @@ export interface IRadioButtonProps extends IFilterDataAttrs {
     /** Ссылка на input */
     inputRef?: React.Ref<HTMLInputElement>;
 }
-declare class RadioButton extends React.Component<IRadioButtonProps> {
-    static propTypes: {
-        value: PropTypes.Validator<string>;
-        name: PropTypes.Requireable<string>;
-        textSize: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        isChecked: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        classes: PropTypes.Requireable<PropTypes.InferProps<{
-            root: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            customInput: PropTypes.Requireable<string>;
-            labelText: PropTypes.Requireable<string>;
-        }>>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        inputRef: PropTypes.Requireable<any>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
-    };
-    static defaultProps: Partial<IRadioButtonProps>;
-    handleChange: () => void;
-    render(): JSX.Element;
-}
+declare const RadioButton: React.FC<IRadioButtonProps>;
 export default RadioButton;