@megafon/ui-core 2.4.0 → 3.0.0-beta.10

package/dist/es/components/TextField/TextField.css

@@ -1,15 +1,8 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-text-field {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-text-field__field {
   font-family: inherit;
@@ -45,13 +38,13 @@ h5 {
   overflow: auto;
 }
 .mfui-text-field input::-webkit-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-text-field input:-moz-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-text-field input:-ms-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-text-field input::-ms-clear,
 .mfui-text-field input::-ms-reveal {
@@ -62,7 +55,7 @@ h5 {
   -webkit-box-flex: 1;
       -ms-flex: 1 0 100px;
           flex: 1 0 100px;
-  background: #FFFFFF;
+  background: var(--base);
 }
 .mfui-text-field__icon-box {
   position: absolute;
@@ -83,6 +76,7 @@ h5 {
           box-sizing: border-box;
   padding-right: 16px;
   text-align: center;
+  fill: var(--content);
 }
 .mfui-text-field__icon-box_error,
 .mfui-text-field__icon-box_password,
@@ -105,7 +99,7 @@ h5 {
 }
 .mfui-text-field__require-mark {
   margin-left: 1px;
-  color: #F62434;
+  color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
@@ -123,64 +117,64 @@ h5 {
   opacity: 0.5;
 }
 .mfui-text-field__counter_error {
-  color: #F62434;
+  color: var(--fury);
   opacity: 1;
 }
 .mfui-text-field_theme_default .mfui-text-field__field {
-  border: 1px solid #D8D8D8;
-  color: #333333;
+  border: 1px solid var(--spbSky2);
+  color: var(--content);
   background-color: transparent;
 }
 .mfui-text-field_theme_default .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
 .mfui-text-field_theme_default .mfui-text-field__field:focus {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field {
-  border-color: #00B956;
+  border-color: var(--brandGreen);
 }
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__icon {
-  fill: #00B956;
+  fill: var(--brandGreen);
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__icon {
-  fill: #F62434;
+  fill: var(--fury);
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__text_error {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-text-field_theme_white .mfui-text-field__field {
-  border: 1px solid #FFFFFF;
-  color: #333333;
+  border: 1px solid var(--base);
+  color: var(--content);
 }
 .mfui-text-field_theme_white .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
 .mfui-text-field_theme_white .mfui-text-field__field:focus {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
 .mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__field {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__icon {
-  fill: #F62434;
+  fill: var(--fury);
 }
 .mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__text_error {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-text-field__text_success {
-  color: #00B956;
+  color: var(--brandGreen);
 }
 .mfui-text-field_disabled .mfui-text-field__field-wrapper {
-  background-color: #EDEDED !important;
+  background-color: var(--spbSky1) !important;
 }
 .mfui-text-field_disabled .mfui-text-field__field {
-  border-color: #EDEDED !important;
-  color: #333333 !important;
+  border-color: var(--spbSky1) !important;
+  color: var(--content) !important;
   cursor: default !important;
-  -webkit-text-fill-color: #333333 !important;
+  -webkit-text-fill-color: var(--content) !important;
 }
 .mfui-text-field_disabled .mfui-text-field__icon-box {
   cursor: default !important;

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

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

package/dist/es/components/TextField/TextField.js

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import InputMask from 'react-input-mask';
 import InputLabel from "../InputLabel/InputLabel";
@@ -96,10 +96,10 @@ var TextField = function TextField(_ref) {
       noticeText = _ref.noticeText,
       inputRef = _ref.inputRef,
       inputMode = _ref.inputMode,
-      autoComplete = _ref.autoComplete,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var input = _ref$classes.input;
+  var input = _ref$classes.input,
+      dataAttrs = _ref.dataAttrs;
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -150,7 +150,7 @@ var TextField = function TextField(_ref) {
   useEffect(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
-  }, [value, checkSymbolMaxLimit, isControlled]);
+  }, [value, checkSymbolMaxLimit]);
   useEffect(function () {
     setTouch(detectTouch());
   }, []);
@@ -158,7 +158,7 @@ var TextField = function TextField(_ref) {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;
     });
-  }, []);
+  }, [isPasswordHidden]);
 
   var setTextareaHeight = function setTextareaHeight() {
     if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current)) {
@@ -181,7 +181,7 @@ var TextField = function TextField(_ref) {
 
     !isControlled && setInputValue(e.target.value);
     checkSymbolMaxLimit(e.target.value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    onChange && onChange(e);
   };
 
   var handleTextareaClick = function handleTextareaClick() {
@@ -198,25 +198,26 @@ var TextField = function TextField(_ref) {
     var isClearFuncAvailable = !customIcon && !onCustomIconClick && verification === ERROR;
     var field = fieldNode.current;
     isPasswordType && togglePasswordHiding();
-    onCustomIconClick === null || onCustomIconClick === void 0 ? void 0 : onCustomIconClick(e);
+    onCustomIconClick && onCustomIconClick(e);
 
     if (!isControlled && isClearFuncAvailable) {
       setInputValue('');
-      field === null || field === void 0 ? void 0 : field.focus();
+      field && field.focus();
     }
-  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, verification, customIcon, isControlled]);
+  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, verification, setInputValue]);
   var handleFocus = useCallback(function (e) {
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    onFocus && onFocus(e);
   }, [onFocus]);
   var handleBlur = useCallback(function (e) {
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    onBlur && onBlur(e);
   }, [onBlur]);
   var handleBeforeMaskChange = useCallback(function (newState, oldState, inputedValue) {
     return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
   }, [onBeforeMaskChange]);
   var textareaType = textarea === TextareaTypes.FLEXIBLE ? TextareaTypes.FLEXIBLE : TextareaTypes.FIXED;
   var hasScrolling = initialTextareaHeight >= TEXTAREA_MAX_HEIGHT || isTextareaResized;
-  var commonParams = {
+
+  var commonParams = _extends(_extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input)), {
     disabled: disabled,
     id: id,
     name: name,
@@ -229,12 +230,11 @@ var TextField = function TextField(_ref) {
     placeholder: placeholder,
     required: required,
     inputMode: inputMode
-  };
+  });
 
   var inputParams = _extends(_extends({}, commonParams), {
     className: cn('field', input),
-    type: isVisiblePassword ? 'text' : type,
-    autoComplete: autoComplete
+    type: isVisiblePassword ? 'text' : type
   });
 
   var inputMaskParams = {
@@ -256,7 +256,7 @@ var TextField = function TextField(_ref) {
     }
 
     fieldNode.current = node;
-    inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
+    inputRef && inputRef(node);
   };
 
   var getIcon = function getIcon() {
@@ -301,14 +301,14 @@ var TextField = function TextField(_ref) {
 
   var renderIconBlock = function renderIconBlock() {
     var icon = getIcon();
-    return icon && /*#__PURE__*/React.createElement("div", {
+    return icon && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconBox), {
       className: cn('icon-box', {
         error: verification === Verification.ERROR && !customIcon,
         password: isPasswordType,
         'custom-handler': !!onCustomIconClick
       }),
       onClick: handleIconClick
-    }, icon);
+    }), icon);
   };
 
   var renderInput = function renderInput() {
@@ -330,7 +330,7 @@ var TextField = function TextField(_ref) {
   var isPlaceholderShowed = isPasswordType && isPasswordHidden && !!inputValue;
   var valueHasSymbols = inputValue !== null && inputValue !== undefined;
   var currentSymbolCount = valueHasSymbols && String(inputValue).length || 0;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       disabled: disabled,
       theme: theme,
@@ -339,7 +339,10 @@ var TextField = function TextField(_ref) {
       icon: !hideIcon && (!!verification || !!customIcon || type === 'password') && !textarea,
       password: isPlaceholderShowed
     }, className)
-  }, label && /*#__PURE__*/React.createElement(InputLabel, {
+  }), label && /*#__PURE__*/React.createElement(InputLabel, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label
+    },
     htmlFor: id
   }, label, required && /*#__PURE__*/React.createElement("span", {
     className: cn('require-mark')
@@ -349,12 +352,12 @@ var TextField = function TextField(_ref) {
     })
   }, renderField()), /*#__PURE__*/React.createElement("div", {
     className: cn('wrap')
-  }, noticeText && /*#__PURE__*/React.createElement("div", {
+  }, noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
     className: cn('text', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
     })
-  }, noticeText), symbolCounter && /*#__PURE__*/React.createElement(Paragraph, {
+  }), noticeText), symbolCounter && /*#__PURE__*/React.createElement(Paragraph, {
     size: "small",
     hasMargin: false,
     className: cn('counter', {
@@ -372,8 +375,6 @@ TextField.propTypes = {
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   type: PropTypes.oneOf(['text', 'password', 'tel', 'email']),
-  inputMode: PropTypes.oneOf(['numeric', 'tel', 'decimal', 'email', 'url', 'search', 'none']),
-  autoComplete: PropTypes.string,
   name: PropTypes.string,
   placeholder: PropTypes.string,
   id: PropTypes.string,
@@ -395,6 +396,13 @@ TextField.propTypes = {
   inputRef: PropTypes.func,
   classes: PropTypes.shape({
     input: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    label: PropTypes.objectOf(PropTypes.string.isRequired),
+    notice: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconBox: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 export default TextField;

package/dist/es/components/TextLink/TextLink.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-text-link {
   font-family: inherit;
   font-size: inherit;
@@ -34,20 +27,23 @@ h5 {
 .mfui-text-link_underline-style_none:hover {
   text-decoration: none;
 }
+.mfui-text-link_color_default {
+  color: var(--content);
+}
+.mfui-text-link_color_black {
+  color: var(--stcBlack);
+}
 .mfui-text-link_color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-text-link_color_blue {
-  color: #34AAF2;
+  color: var(--systemBlue);
 }
 .mfui-text-link_color_green {
-  color: #00B956;
-}
-.mfui-text-link_color_black {
-  color: #333333;
+  color: var(--brandGreen);
 }
 .mfui-text-link_color_gray {
-  color: #999999;
+  color: var(--spbSky3);
 }
 .mfui-text-link_color_inherit {
   color: inherit;

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

@@ -3,7 +3,7 @@ import './TextLink.less';
 import { ILinkProps } from '../Link/Link';
 export interface ITextLinkProps extends ILinkProps {
     /** Цвет */
-    color?: 'white' | 'black' | 'gray' | 'blue' | 'green' | 'inherit';
+    color?: 'default' | 'white' | 'black' | 'gray' | 'green' | 'blue' | 'inherit';
     /** Отображение подчеркивания */
     underlineVisibility?: 'hover' | 'always';
     /** Стиль подчеркивания */

package/dist/es/components/TextLink/TextLink.js

@@ -15,8 +15,10 @@ var TextLink = function TextLink(_ref) {
       rel = _ref.rel,
       onClick = _ref.onClick,
       children = _ref.children,
-      download = _ref.download;
+      download = _ref.download,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement(Link, {
+    dataAttrs: dataAttrs,
     target: target,
     href: href,
     rel: rel,
@@ -31,9 +33,12 @@ var TextLink = function TextLink(_ref) {
 };
 
 TextLink.propTypes = {
-  color: PropTypes.oneOf(['white', 'black', 'gray', 'blue', 'green', 'inherit']),
+  color: PropTypes.oneOf(['default', 'white', 'black', 'gray', 'green', 'blue', 'inherit']),
   underlineVisibility: PropTypes.oneOf(['hover', 'always']),
   underlineStyle: PropTypes.oneOf(['solid', 'dashed', 'border', 'none']),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])
 };
 TextLink.defaultProps = {

package/dist/es/components/Tile/Tile.css

@@ -1,12 +1,6 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-tile {
-  background-color: #FFFFFF;
+  color: var(--content);
+  background-color: var(--background);
 }
 .mfui-tile_radius_rounded {
   border-radius: 8px;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Tile.less';
 export declare const Theme: {
     readonly LIGHT: "light";
@@ -18,7 +17,7 @@ export declare const Shadow: {
     readonly HOVER: "hover";
 };
 declare type ShadowType = typeof Shadow[keyof typeof Shadow];
-export interface ITileProps extends IFilterDataAttrs {
+export interface ITileProps {
     /** Ссылка */
     href?: string;
     /** Тема */
@@ -31,6 +30,10 @@ export interface ITileProps extends IFilterDataAttrs {
     isInteractive?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     /** Обработчик клика */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }

package/dist/es/components/Tile/Tile.js

@@ -36,7 +36,7 @@ var Tile = function Tile(_ref) {
       dataAttrs = _ref.dataAttrs;
 
   var handleClick = function handleClick(e) {
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    onClick && onClick(e);
   };
 
   var isPointer = !!href || isInteractive;
@@ -49,7 +49,7 @@ var Tile = function Tile(_ref) {
       interactive: isInteractive
     }, className),
     onClick: handleClick
-  }, filterDataAttrs(dataAttrs)), href && /*#__PURE__*/React.createElement("a", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/React.createElement("a", {
     href: href,
     className: cn('link')
   }, children), !href && children);

package/dist/es/components/Tooltip/Tooltip.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-tooltip {
   z-index: 100;
   visibility: hidden;
@@ -48,7 +41,7 @@ h5 {
   left: 0;
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-tooltip__arrow-shadow {
   width: 12px;

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";
@@ -45,10 +46,15 @@ export interface ITooltipProps {
         content?: string;
         contentShadow?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        content?: Record<string, 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;