@megafon/ui-core 3.0.0-beta.2 → 3.0.0-beta.3

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 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.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

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/Select/Select.d.ts

@@ -132,7 +132,7 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
     handleClosed: () => void;
     handleClickOutside: (e: MouseEvent) => void;
     handleOpenDropdown: () => void;
-    handleSelectItem: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
+    handleSelectItem: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     handleHoverItem: (index: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     handleComboboxFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { AccessibilityEventTypeNative } from '@megafon/ui-helpers';
 import './Tooltip.less';
 export declare const Placement: {
     readonly LEFT: "left";
@@ -46,9 +47,9 @@ export interface ITooltipProps {
         contentShadow?: string;
     };
     /** Обработчик на открытие */
-    onOpen?: (e: MouseEvent) => void;
+    onOpen?: (e: AccessibilityEventTypeNative) => void;
     /** Обработчик на закрытие */
-    onClose?: (e: MouseEvent | FocusEvent) => void;
+    onClose?: (e: AccessibilityEventTypeNative | FocusEvent) => void;
 }
 declare const Tooltip: React.FC<ITooltipProps>;
 export default Tooltip;

package/dist/es/components/Tooltip/Tooltip.js

@@ -4,15 +4,13 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { usePopper } from 'react-popper';
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
 var TOOLTIP_PADDING_FOR_FLIP = 14;
 var MOUSE_KEY = 'mousedown';
-var KEYBOARD_ENTER_KEY = 'Enter';
-var KEYBOARD_NUMPAD_ENTER_KEY = 'NumpadEnter';
 var TOUCH_KEY = 'touchstart';
 export var Placement = {
   LEFT: 'left',
@@ -20,11 +18,6 @@ export var Placement = {
   RIGHT: 'right',
   BOTTOM: 'bottom'
 };
-
-var checkEventIsClickOrEnterPress = function checkEventIsClickOrEnterPress(e) {
-  return e.type === TOUCH_KEY || e.type === MOUSE_KEY || e.code === KEYBOARD_ENTER_KEY || e.code === KEYBOARD_NUMPAD_ENTER_KEY;
-};
-
 export var Paddings = {
   NONE: 'none',
   SMALL: 'small',
@@ -142,7 +135,7 @@ var Tooltip = function Tooltip(_ref) {
     }
   }, [isOpen, onOpen, setIsOpen]);
   var handleClick = useCallback(function (e) {
-    if (!checkEventIsClickOrEnterPress(e)) {
+    if (!checkNativeEventIsClickOrEnterPress(e)) {
       return;
     }
 

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

@@ -72,9 +72,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 ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
+      onClickAccordion && onClickAccordion(!isOpenedState);
+      setIsOpenedState(!isOpenedState);
+    }
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
@@ -85,10 +87,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["default"], {
     as: "h5"
   }, title), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "button",
     className: cn('icon-box', {
       open: isOpenedState
     })

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

@@ -51,12 +51,22 @@ var Month = function Month(_ref) {
       goToNextMonth = _ref.goToNextMonth,
       children = _ref.children;
 
-  var handleArrowLeftClick = function handleArrowLeftClick() {
-    !isPrevMonthDisabled && goToPreviousMonth();
+  var handleArrowLeftClick = function handleArrowLeftClick(e) {
+    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
+      !isPrevMonthDisabled && goToPreviousMonth();
+    }
   };
 
-  var handleArrowRightClick = function handleArrowRightClick() {
-    !isNextMonthDisabled && goToNextMonth();
+  var handleArrowRightClick = function handleArrowRightClick(e) {
+    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
+      !isNextMonthDisabled && goToNextMonth();
+    }
+  };
+
+  var getTabIndex = function getTabIndex(hasFocus) {
+    var tabIndexWithFocus = 0;
+    var tabIndexWithoutFocus = -1;
+    return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -64,16 +74,22 @@ var Month = function Month(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('header')
   }, /*#__PURE__*/_react["default"].createElement(ArrowLeft, {
+    role: "button",
+    tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
       disabled: isPrevMonthDisabled
     }),
+    onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: cn('title')
   }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/_react["default"].createElement(ArrowRight, {
+    role: "button",
+    tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
       disabled: isNextMonthDisabled
     }),
+    onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('weekday-labels')

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

@@ -7,29 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-require("core-js/modules/es.date.to-string");
-
 require("core-js/modules/es.function.name");
 
-require("core-js/modules/es.object.to-string");
-
-require("core-js/modules/es.reflect.construct");
-
-require("core-js/modules/es.regexp.to-string");
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
@@ -41,114 +25,87 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _createSuper(Derived) {
-  return function () {
-    var Super = (0, _getPrototypeOf2["default"])(Derived),
-        result;
-
-    if (_isNativeReflectConstruct()) {
-      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return (0, _possibleConstructorReturn2["default"])(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;
-  }
-}
-
 var CheckedIcon = function CheckedIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
   }));
 };
 
+var CHANGE_KEY = 'change';
 var cn = (0, _uiHelpers.cnCreate)('mfui-checkbox');
 
-var Checkbox = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Checkbox, _React$Component);
-
-  var _super = _createSuper(Checkbox);
-
-  function Checkbox() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Checkbox);
-    _this = _super.apply(this, arguments);
-    _this.isTouch = (0, _uiHelpers.detectTouch)();
-
-    _this.handleChange = function (e) {
-      var onChange = _this.props.onChange;
-      onChange && onChange(e);
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2["default"])(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", (0, _extends2["default"])({
-        className: cn('', {
-          'font-size': fontSize,
-          color: color,
-          checked: checked,
-          disabled: disabled,
-          error: error
-        }, className)
-      }, (0, _uiHelpers.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 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 = (0, _uiHelpers.detectTouch)();
+
+  var _useState = (0, _react.useState)(checked),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isChecked = _useState2[0],
+      setIsChecked = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setIsChecked(checked);
+  }, [checked]);
+
+  var handleChange = function handleChange(e) {
+    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e) || e.type === CHANGE_KEY) {
+      setIsChecked(!isChecked);
+      onChange && onChange(!isChecked);
     }
-  }]);
-  return Checkbox;
-}(React.Component);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn('', {
+      'font-size': fontSize,
+      color: color,
+      checked: isChecked,
+      disabled: disabled,
+      error: error
+    }, className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    className: cn('label', {
+      'no-touch': !isTouch
+    })
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    className: cn('input'),
+    type: "checkbox",
+    tabIndex: -1,
+    name: name,
+    value: value,
+    checked: isChecked,
+    onChange: handleChange,
+    disabled: disabled
+  }), /*#__PURE__*/_react["default"].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["default"].createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children), extraContent && /*#__PURE__*/_react["default"].createElement("span", {
+    className: cn('extra-content')
+  }, extraContent)));
+};
 
 Checkbox.propTypes = {
   className: PropTypes.string,
@@ -159,15 +116,10 @@ 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
-};
 var _default = Checkbox;
 exports["default"] = _default;

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

@@ -132,7 +132,7 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
     handleClosed: () => void;
     handleClickOutside: (e: MouseEvent) => void;
     handleOpenDropdown: () => void;
-    handleSelectItem: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
+    handleSelectItem: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     handleHoverItem: (index: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     handleComboboxFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { AccessibilityEventTypeNative } from '@megafon/ui-helpers';
 import './Tooltip.less';
 export declare const Placement: {
     readonly LEFT: "left";
@@ -46,9 +47,9 @@ export interface ITooltipProps {
         contentShadow?: string;
     };
     /** Обработчик на открытие */
-    onOpen?: (e: MouseEvent) => void;
+    onOpen?: (e: AccessibilityEventTypeNative) => void;
     /** Обработчик на закрытие */
-    onClose?: (e: MouseEvent | FocusEvent) => void;
+    onClose?: (e: AccessibilityEventTypeNative | FocusEvent) => void;
 }
 declare const Tooltip: React.FC<ITooltipProps>;
 export default Tooltip;

package/dist/lib/components/Tooltip/Tooltip.js

@@ -35,8 +35,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var TOOLTIP_PADDING_FOR_FLIP = 14;
 var MOUSE_KEY = 'mousedown';
-var KEYBOARD_ENTER_KEY = 'Enter';
-var KEYBOARD_NUMPAD_ENTER_KEY = 'NumpadEnter';
 var TOUCH_KEY = 'touchstart';
 var Placement = {
   LEFT: 'left',
@@ -45,11 +43,6 @@ var Placement = {
   BOTTOM: 'bottom'
 };
 exports.Placement = Placement;
-
-var checkEventIsClickOrEnterPress = function checkEventIsClickOrEnterPress(e) {
-  return e.type === TOUCH_KEY || e.type === MOUSE_KEY || e.code === KEYBOARD_ENTER_KEY || e.code === KEYBOARD_NUMPAD_ENTER_KEY;
-};
-
 var Paddings = {
   NONE: 'none',
   SMALL: 'small',
@@ -169,7 +162,7 @@ var Tooltip = function Tooltip(_ref) {
     }
   }, [isOpen, onOpen, setIsOpen]);
   var handleClick = (0, _react.useCallback)(function (e) {
-    if (!checkEventIsClickOrEnterPress(e)) {
+    if (!(0, _uiHelpers.checkNativeEventIsClickOrEnterPress)(e)) {
       return;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "files": [
     "dist",
     "styles"
@@ -53,7 +53,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.0.0-beta.1",
+    "@megafon/ui-icons": "^1.0.0-beta.2",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -85,7 +85,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.0.0-beta.1",
+    "@megafon/ui-helpers": "^2.0.0-beta.2",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "c67eea9c2568acefa0e6c8504e09da707c406703"
+  "gitHead": "c7d00f10bbf88ff8049558ee9b7fbe6cb9691547"
 }