@megafon/ui-core 8.17.1 → 8.17.3

package/dist/lib/components/Tabs/Tabs.js

@@ -0,0 +1,460 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TabSize = exports.TabColorTheme = exports.TabAlign = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.is-array.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.array.splice.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.object.values.js");
+require("core-js/modules/es.regexp.sticky.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
+var _NotificationBadge = _interopRequireDefault(require("../Badges/NotificationBadge/NotificationBadge"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+var ArrowLeft = function ArrowLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 13l-3-3 3-3-1-1-4 4 4 4z"
+  }));
+};
+var Swiper = null;
+var SwiperSlide = null;
+try {
+  // eslint-disable-next-line global-require
+  var SwiperAll = require('swiper/react');
+  Swiper = SwiperAll.Swiper;
+  SwiperSlide = SwiperAll.SwiperSlide;
+} catch (e) {
+  // eslint-disable-next-line no-console
+  console.warn("\n        WARNING: megafon/ui-core is using the latest version of swiper.\n        For more information about server-side rendering\n        please check the Tabs component documentation at:\n        https://ui.megafon.ru/components/tabs\n    ");
+}
+var TabAlign = exports.TabAlign = {
+  LEFT: 'left',
+  CENTER: 'center'
+};
+var TabSize = exports.TabSize = {
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+var TabColorTheme = exports.TabColorTheme = {
+  WHITE: 'white',
+  GREEN: 'green',
+  GRAY: 'gray'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-tabs');
+var Tabs = function Tabs(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$tabColorTheme = _ref.tabColorTheme,
+    tabColorTheme = _ref$tabColorTheme === void 0 ? 'white' : _ref$tabColorTheme,
+    _ref$sticky = _ref.sticky,
+    sticky = _ref$sticky === void 0 ? false : _ref$sticky,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$defaultIndex = _ref.defaultIndex,
+    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+    outerIndex = _ref.currentIndex,
+    _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
+    renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
+    _ref$autoWidth = _ref.autoWidth,
+    autoWidth = _ref$autoWidth === void 0 ? false : _ref$autoWidth,
+    children = _ref.children,
+    dataAttrs = _ref.dataAttrs,
+    onTabClick = _ref.onTabClick,
+    outerObserveContainer = _ref.outerObserveContainer;
+  var tabsRef = React.useRef({});
+  var rootRef = React.useRef(null);
+  var tabListRef = React.useRef(null);
+  var intersectionObserverRef = React.useRef();
+  var childrenLength = Array.isArray(children) ? children.length : 0;
+  var prevChildrenLength = (0, _usePrevious["default"])(childrenLength) || 0;
+  var isChildrenLengthDiff = childrenLength !== prevChildrenLength;
+  var _React$useState = React.useState(),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    swiperInstance = _React$useState2[0],
+    setSwiperInstance = _React$useState2[1];
+  var _React$useState3 = React.useState(true),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    isBeginning = _React$useState4[0],
+    setBeginning = _React$useState4[1];
+  var _React$useState5 = React.useState(true),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    isEnd = _React$useState6[0],
+    setEnd = _React$useState6[1];
+  var _React$useState7 = React.useState(defaultIndex),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+    innerIndex = _React$useState8[0],
+    setInnerIndex = _React$useState8[1];
+  var currentIndex = outerIndex === undefined ? innerIndex : outerIndex;
+  var _React$useState9 = React.useState(0),
+    _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+    activeTabWidth = _React$useState10[0],
+    setActiveTabWidth = _React$useState10[1];
+  var _React$useState11 = React.useState(0),
+    _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
+    underlineWidth = _React$useState12[0],
+    setUnderlineWidth = _React$useState12[1];
+  var _React$useState13 = React.useState(0),
+    _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
+    underlineTranslate = _React$useState14[0],
+    setUnderlineTranslate = _React$useState14[1];
+  var _React$useState15 = React.useState('none'),
+    _React$useState16 = (0, _slicedToArray2["default"])(_React$useState15, 2),
+    underlineTransition = _React$useState16[0],
+    setUnderlineTransition = _React$useState16[1];
+  var _React$useState17 = React.useState('auto'),
+    _React$useState18 = (0, _slicedToArray2["default"])(_React$useState17, 2),
+    tabListHeight = _React$useState18[0],
+    setTabListHeight = _React$useState18[1];
+  var _React$useState19 = React.useState(false),
+    _React$useState20 = (0, _slicedToArray2["default"])(_React$useState19, 2),
+    isSticky = _React$useState20[0],
+    setSticky = _React$useState20[1];
+  var _React$useState21 = React.useState({
+      left: 0,
+      right: 0
+    }),
+    _React$useState22 = (0, _slicedToArray2["default"])(_React$useState21, 2),
+    stickyOffset = _React$useState22[0],
+    setStickyOffset = _React$useState22[1];
+  var setTabRef = React.useCallback(function (i) {
+    return function (tab) {
+      if (tab) {
+        tabsRef.current[i] = tab;
+      }
+    };
+  }, []);
+  var calculateUnderline = React.useCallback(function () {
+    var tabs = Object.values(tabsRef.current);
+    if (!tabs.length) {
+      return;
+    }
+    var translate = [].concat(tabs).splice(0, currentIndex).reduce(function (accWidth, node) {
+      var _node$getBoundingClie = node.getBoundingClientRect(),
+        width = _node$getBoundingClie.width;
+      return accWidth + width;
+    }, 0);
+    setUnderlineWidth(activeTabWidth);
+    setUnderlineTranslate(translate);
+  }, [currentIndex, activeTabWidth]);
+  var calculateSticky = React.useCallback(function () {
+    if (!sticky || !rootRef.current || !tabListRef.current) {
+      return;
+    }
+    var _rootRef$current$getB = rootRef.current.getBoundingClientRect(),
+      left = _rootRef$current$getB.left,
+      right = _rootRef$current$getB.right;
+    var documentWidth = document.documentElement.clientWidth;
+    setStickyOffset({
+      left: left,
+      right: documentWidth - right
+    });
+  }, [sticky]);
+  var stickyON = React.useCallback(function (leftOffset, rightOffset) {
+    var documentWidth = document.documentElement.clientWidth;
+    setStickyOffset({
+      left: leftOffset,
+      right: documentWidth - rightOffset
+    });
+    setSticky(true);
+  }, []);
+  var stickyOFF = React.useCallback(function () {
+    setStickyOffset({
+      left: 0,
+      right: 0
+    });
+    setSticky(false);
+  }, []);
+  var isContainerNotFitViewport = React.useCallback(function () {
+    var _a;
+    var containerHeight = (_a = outerObserveContainer || rootRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    return containerHeight && containerHeight > window.innerHeight;
+  }, [outerObserveContainer]);
+  var addIntersectionObserver = React.useCallback(function () {
+    var observerOptions = {
+      threshold: [0, 1]
+    };
+    if (isContainerNotFitViewport()) {
+      observerOptions.rootMargin = '0px 0px -100%';
+    }
+    intersectionObserverRef.current = new IntersectionObserver(function (entries) {
+      entries.forEach(function (_ref2) {
+        var isIntersecting = _ref2.isIntersecting,
+          _ref2$boundingClientR = _ref2.boundingClientRect,
+          top = _ref2$boundingClientR.top,
+          left = _ref2$boundingClientR.left,
+          right = _ref2$boundingClientR.right;
+        if (!tabListRef.current) {
+          return;
+        }
+        var _tabListRef$current$g = tabListRef.current.getBoundingClientRect(),
+          height = _tabListRef$current$g.height,
+          tabListNodeLeft = _tabListRef$current$g.left,
+          tabListNodeRight = _tabListRef$current$g.right;
+        var leftOffset = outerObserveContainer ? tabListNodeLeft : left;
+        var rightOffset = outerObserveContainer ? tabListNodeRight : right;
+        setTabListHeight(height);
+        if (isIntersecting) {
+          top < 0 ? stickyON(leftOffset, rightOffset) : stickyOFF();
+        } else {
+          stickyOFF();
+        }
+      });
+    }, observerOptions);
+  }, [isContainerNotFitViewport, outerObserveContainer, stickyOFF, stickyON]);
+  var handleTabInnerClick = React.useCallback(function (index) {
+    return function () {
+      setUnderlineTransition('all');
+      onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(index);
+      if (outerIndex === undefined) {
+        setInnerIndex(index);
+      }
+      if (index > 0 && window.innerWidth > _uiHelpers.breakpoints.MOBILE_BIG_END) {
+        swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index - 1);
+      } else {
+        swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index);
+      }
+    };
+  }, [onTabClick, outerIndex, swiperInstance]);
+  var handleSwiper = React.useCallback(function (swiper) {
+    setSwiperInstance(swiper);
+  }, []);
+  var handlePrevArrowClick = React.useCallback(function () {
+    swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slidePrev();
+  }, [swiperInstance]);
+  var handleNextArrowClick = React.useCallback(function () {
+    swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
+  }, [swiperInstance]);
+  var handleReachBeginning = React.useCallback(function () {
+    setBeginning(true);
+  }, []);
+  var handleReachEnd = React.useCallback(function () {
+    setEnd(true);
+  }, []);
+  var handleFromEdge = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+  }, []);
+  var addObserveEvent = React.useCallback(function () {
+    var _a;
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.observe(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
+  var removeObserveEvent = React.useCallback(function () {
+    var _a;
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
+  var renderTab = React.useCallback(function (_ref3, index) {
+    var title = _ref3.title,
+      icon = _ref3.icon,
+      bubbleTitle = _ref3.bubbleTitle,
+      hasBubble = _ref3.hasBubble,
+      bubbleColor = _ref3.bubbleColor,
+      href = _ref3.href,
+      rel = _ref3.rel,
+      attr = _ref3.attr;
+    var ElementType = href ? 'a' : 'div';
+    var bubbleSizeWithTitle = size === 'medium' ? 'medium' : 'big';
+    return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({
+      href: href,
+      rel: rel,
+      className: cn('tab-inner', {
+        current: currentIndex === index,
+        'with-icon': !!icon
+      }),
+      onClick: handleTabInnerClick(index)
+    }, (0, _uiHelpers.filterDataAttrs)(attr, index + 1)), !!icon && /*#__PURE__*/React.createElement("div", {
+      className: cn('tab-icon')
+    }, icon), !!title && /*#__PURE__*/React.createElement("div", {
+      className: cn('tab-title')
+    }, title), !!hasBubble && /*#__PURE__*/React.createElement(_NotificationBadge["default"], {
+      className: cn('tab-bubble', {
+        'with-icon': !!icon
+      }),
+      size: !bubbleTitle ? 'small' : bubbleSizeWithTitle,
+      theme: bubbleColor
+    }, bubbleTitle));
+  }, [handleTabInnerClick, currentIndex, size]);
+  var renderTabs = React.useCallback(function () {
+    return React.Children.map(children, function (child, i) {
+      var _child$props = child.props,
+        title = _child$props.title,
+        icon = _child$props.icon,
+        bubbleTitle = _child$props.bubbleTitle,
+        hasBubble = _child$props.hasBubble,
+        bubbleColor = _child$props.bubbleColor,
+        href = _child$props.href,
+        rel = _child$props.rel,
+        renderTabWrapper = _child$props.renderTabWrapper,
+        data = _child$props.dataAttrs;
+      var tab = renderTab({
+        title: title,
+        icon: icon,
+        bubbleTitle: bubbleTitle,
+        hasBubble: hasBubble,
+        bubbleColor: bubbleColor,
+        href: href,
+        rel: rel,
+        attr: data === null || data === void 0 ? void 0 : data.inner
+      }, i);
+      var activeTabClassName = currentIndex === i ? classes === null || classes === void 0 ? void 0 : classes.activeTab : undefined;
+      if (!SwiperSlide) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(SwiperSlide, {
+        className: cn('slide')
+      }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+        className: cn('tab', [classes === null || classes === void 0 ? void 0 : classes.tab, activeTabClassName]),
+        ref: setTabRef(i)
+      }, (0, _uiHelpers.filterDataAttrs)(data === null || data === void 0 ? void 0 : data.root, i + 1)), renderTabWrapper ? renderTabWrapper(tab) : tab));
+    });
+  }, [children, renderTab, currentIndex, classes === null || classes === void 0 ? void 0 : classes.activeTab, classes === null || classes === void 0 ? void 0 : classes.tab, setTabRef]);
+  var renderPanels = React.useCallback(function () {
+    return React.Children.map(children, function (child, i) {
+      var panel = child.props.children;
+      var isCurrentPanel = currentIndex === i;
+      if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, i + 1), {
+        className: cn('panel', {
+          current: isCurrentPanel
+        }, [classes === null || classes === void 0 ? void 0 : classes.panel])
+      }), panel);
+    });
+  }, [children, currentIndex, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, renderOnlyCurrentPanel, classes === null || classes === void 0 ? void 0 : classes.panel]);
+  React.useEffect(function () {
+    if (!sticky) {
+      return undefined;
+    }
+    addIntersectionObserver();
+    addObserveEvent();
+    return function () {
+      removeObserveEvent();
+    };
+  }, [addIntersectionObserver, sticky, addObserveEvent, removeObserveEvent]);
+  React.useEffect(function () {
+    var handleResize = (0, _lodash["default"])(function () {
+      calculateSticky();
+      if (sticky && isContainerNotFitViewport()) {
+        removeObserveEvent();
+        addIntersectionObserver();
+        addObserveEvent();
+      }
+    }, 300);
+    var activeTabNode = tabsRef.current[currentIndex];
+    var resizeObserver = new ResizeObserver(function (entries) {
+      if (!entries.length || !entries[0]) {
+        return;
+      }
+      var width = entries[0].contentRect.width;
+      setActiveTabWidth(width);
+      calculateUnderline();
+    });
+    calculateUnderline();
+    resizeObserver.observe(activeTabNode);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+      resizeObserver.unobserve(activeTabNode);
+    };
+  }, [sticky, currentIndex, addObserveEvent, calculateSticky, removeObserveEvent, calculateUnderline, addIntersectionObserver, isContainerNotFitViewport]);
+  React.useEffect(function () {
+    if (!swiperInstance) {
+      return;
+    }
+    if (isChildrenLengthDiff) {
+      var activeTabNode = tabsRef.current[currentIndex];
+      var _activeTabNode$getBou = activeTabNode.getBoundingClientRect(),
+        width = _activeTabNode$getBou.width;
+      handleFromEdge(swiperInstance);
+      setActiveTabWidth(width);
+      calculateUnderline();
+      return;
+    }
+    handleFromEdge(swiperInstance);
+  }, [swiperInstance, isChildrenLengthDiff, handleFromEdge, currentIndex, calculateUnderline]);
+  if (!Swiper) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      size: size,
+      'tab-color': tabColorTheme,
+      'h-align': align,
+      indents: !(classes === null || classes === void 0 ? void 0 : classes.innerIndents),
+      sticky: isSticky,
+      'auto-width': autoWidth
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    ref: tabListRef,
+    style: {
+      height: tabListHeight
+    }
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
+    className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper])
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('swiper-wrapper', {
+      beginning: isBeginning,
+      end: isEnd
+    }, [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
+    style: {
+      paddingLeft: stickyOffset.left,
+      paddingRight: stickyOffset.right
+    }
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
+    simulateTouch: false,
+    className: cn('swiper', [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
+    watchOverflow: true,
+    slidesPerView: "auto",
+    initialSlide: currentIndex,
+    onSwiper: handleSwiper,
+    onReachBeginning: handleReachBeginning,
+    onReachEnd: handleReachEnd,
+    onFromEdge: handleFromEdge,
+    observer: true
+  }), renderTabs(), /*#__PURE__*/React.createElement("div", {
+    className: cn('underline'),
+    slot: "wrapper-start",
+    style: {
+      width: "".concat(underlineWidth, "px"),
+      transform: "translateX(".concat(underlineTranslate, "px)"),
+      transitionProperty: underlineTransition
+    }
+  }), /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
+    className: cn('arrow', {
+      prev: true,
+      hide: isBeginning
+    }),
+    onClick: handlePrevArrowClick
+  })), /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
+    className: cn('arrow', {
+      next: true,
+      hide: isEnd
+    }),
+    onClick: handleNextArrowClick
+  }))))), renderPanels());
+};
+var _default = exports["default"] = Tabs;

package/dist/lib/components/TextField/TextField.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-text-field{color:var(--content);font-family:inherit;font-size:15px;line-height:24px}.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field .mfui-text-field__field:focus,.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field .mfui-text-field__field:hover,.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field .mfui-text-field__field_resized{border-color:var(--content)}.mfui-text-field__field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:var(--content);display:block;font-family:inherit;font-size:15px;line-height:24px;margin:0;opacity:1;outline:none;padding:25px 56px 9px 16px;-webkit-transition:border-color .3s;transition:border-color .3s;width:100%}.mfui-text-field__field_textarea,.mfui-text-field__field_type_flexible{-webkit-box-sizing:content-box;box-sizing:content-box;overflow-x:hidden;overflow-y:auto;padding-top:28px;resize:none}.mfui-text-field__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-text-field__field_no-icon{padding-right:16px}.mfui-text-field__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:4px;width:12px}.mfui-text-field__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-text-field__resizer:active svg,.mfui-text-field__resizer:hover svg{stroke:var(--spbSky3)}.mfui-text-field__field::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field:focus::-webkit-input-placeholder{opacity:1}.mfui-text-field__field:focus:-ms-input-placeholder{opacity:1}.mfui-text-field__field:focus::-moz-placeholder{opacity:1}.mfui-text-field__field:focus::-ms-input-placeholder{opacity:1}.mfui-text-field__field:focus::placeholder{opacity:1}.mfui-text-field__field::-webkit-scrollbar{width:16px}.mfui-text-field__field::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-text-field__field::-webkit-scrollbar-thumb:hover{background-color:#999}.mfui-text-field__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;left:16px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:18px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-text-field__field_textarea{scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-text-field__field_textarea~.mfui-text-field__label{top:16px}.mfui-text-field__field:-webkit-autofill~.mfui-text-field__label,.mfui-text-field__field:focus~.mfui-text-field__label,.mfui-text-field__field:not(:placeholder-shown)~.mfui-text-field__label{-webkit-transform:scale(.8) translate(-11%,-75%);transform:scale(.8) translate(-11%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-text-field__field_textarea:not(:-moz-placeholder-shown)~.mfui-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-text-field__field_textarea:not(:-ms-input-placeholder)~.mfui-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-text-field__field_textarea:focus~.mfui-text-field__label,.mfui-text-field__field_textarea:not(:placeholder-shown)~.mfui-text-field__label{-webkit-transform:scale(.8) translate(-11%,-50%);transform:scale(.8) translate(-11%,-50%)}.mfui-text-field__field-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:relative}.mfui-text-field__field-bottom-wrapper{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;margin-top:0;overflow:hidden}.mfui-text-field__field-bottom-wrapper_filled{margin-top:4px}.mfui-text-field__notice-text{height:0;opacity:0;-webkit-transition:height,opacity;transition:height,opacity;-webkit-transition-duration:.3s;transition-duration:.3s}.mfui-text-field__notice-text_active{height:100%;opacity:1}.mfui-text-field__icon-box{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;top:0;z-index:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;padding-right:16px;text-align:center;fill:var(--content)}.mfui-text-field__icon-box_custom-handler,.mfui-text-field__icon-box_error,.mfui-text-field__icon-box_password,.mfui-text-field__icon_clear{cursor:pointer}.mfui-text-field__icon,.mfui-text-field__icon-box svg{display:block;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-text-field__icon_clear{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-text-field__icon_clear:hover{fill:var(--content)}.mfui-text-field__require-mark{color:var(--fury)}.mfui-text-field__counter{margin-left:auto}.mfui-text-field_valid:not(.mfui-text-field_disabled) .mfui-text-field__field{border-color:var(--brandGreen)}.mfui-text-field_valid:not(.mfui-text-field_disabled) .mfui-text-field__icon{fill:var(--brandGreen)}.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__field{border-color:var(--fury)}.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__icon{fill:var(--fury)}.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__icon_clear:hover{fill:var(--fury80)}.mfui-text-field_disabled .mfui-text-field__field{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--content);cursor:default}.mfui-text-field_disabled .mfui-text-field__icon-box{cursor:default!important}.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__counter_error,.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-bottom-wrapper{color:var(--fury)}.mfui-text-field_theme_white .mfui-text-field__icon{fill:var(--stcWhite)}.mfui-text-field_theme_white .mfui-text-field__counter,.mfui-text-field_theme_white .mfui-text-field__field-bottom-wrapper{color:var(--stcWhite)}.mfui-text-field_theme_white .mfui-text-field__field::-webkit-scrollbar-thumb{background-color:rgba(51,51,51,.2)}.mfui-text-field_theme_white .mfui-text-field__field::-webkit-scrollbar-thumb:hover{background-color:rgba(51,51,51,.5)}.mfui-text-field_theme_white .mfui-text-field__resizer svg{stroke:var(--stcWhite20)}.mfui-text-field_theme_white .mfui-text-field__resizer:active svg,.mfui-text-field_theme_white .mfui-text-field__resizer:hover svg{stroke:var(--stcWhite50)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field{border-color:var(--base)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):not(:-moz-placeholder-shown){border-color:var(--spbSky2)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):not(:-ms-input-placeholder){border-color:var(--spbSky2)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):not(:placeholder-shown){border-color:var(--spbSky2)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):hover{border-color:var(--stcBlack)}.mfui-text-field_theme_white.mfui-text-field_disabled .mfui-text-field__field{background-color:var(--stcWhite20);border-color:var(--stcWhite20);color:var(--stcWhite)}.mfui-text-field_theme_white.mfui-text-field_disabled .mfui-text-field__label{color:var(--stcWhite50)}.mfui-text-field_icon .mfui-text-field__field{padding-right:55px}.mfui-text-field_password .mfui-text-field__field{font:small-caption;font-size:19px;line-height:24px}.mfui-text-field input::-ms-clear,.mfui-text-field input::-ms-reveal{display:none}

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

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import './TextField.scss';
+export declare const Verification: {
+    readonly VALID: "valid";
+    readonly ERROR: "error";
+};
+export declare const TextareaTypes: {
+    readonly FIXED: "fixed";
+    readonly FLEXIBLE: "flexible";
+};
+export declare const MinTextareaHeight: {
+    readonly ONE_ROW: 24;
+    readonly THREE_ROWS: number;
+};
+type MinTextareaHeightType = (typeof MinTextareaHeight)[keyof typeof MinTextareaHeight];
+interface IMaskSelection {
+    start: number;
+    end: number;
+}
+export interface IMaskState {
+    value: string;
+    selection: IMaskSelection;
+}
+export type TextFieldProps = {
+    /** Включить режим textarea. Fixed - это alias для textarea=true. */
+    textarea?: boolean | 'fixed' | 'flexible';
+    /** Лейбл */
+    label?: string;
+    /** Атрибут элемента input. Не работает с textarea=true */
+    type?: 'text' | 'password' | 'tel' | 'email';
+    /** Цветовая тема */
+    theme?: 'default' | 'white';
+    /** Запрещает отрисовку иконки */
+    hideIcon?: boolean;
+    /** Отображение валидации */
+    verification?: 'valid' | 'error';
+    /** Подпись снизу, меняет цвет в зависимости от аргумента verification */
+    noticeText?: string | JSX.Element;
+    /** Отключение поля ввода */
+    disabled?: boolean;
+    /** Показывает обязательность поля  */
+    required?: boolean;
+    /** Ref обработчик */
+    inputRef?: (node: HTMLInputElement | HTMLTextAreaElement) => void;
+    /** Имя поля */
+    name?: string;
+    /** Запрещает отображение плейсхолдера */
+    hidePlaceholder?: boolean;
+    /** Отображаемый текст при отсутствии значения */
+    placeholder?: string;
+    /** Атрибут корневого DOM элемента компонента */
+    id?: string;
+    /** Внешнее значение компонента */
+    value?: string | number;
+    /** Максимальное вводимое количество текста */
+    maxLength?: number;
+    /** Показывает счетчик с подсчетом введенных символов. Только для textarea. */
+    symbolCounter?: number;
+    /** Включает подсчет введенных [графем](https://ru.wikipedia.org/wiki/%D0%93%D1%80%D0%B0%D1%84%D0%B5%D0%BC%D0%B0) и символов при `symbolCounter=true`
+     *
+     *  **Пример**: эмоджи 👩‍💻 - это одна графема, состоящая из 5 символов.
+     *
+     * - для `true` Количество символов в строке "hello world👩‍💻" = 12
+     * - для `false` Количество символов в строке "hello world👩‍💻" = 16
+     */
+    graphemesCounter?: boolean;
+    /** Иконка */
+    customIcon?: JSX.Element;
+    /** Маска для поля. Не работает с textarea=true. */
+    /** Дополнительную информацию можно найти на https://github.com/sanniassin/react-input-mask */
+    mask?: string | Array<string | RegExp>;
+    /** Разделение символов для маски. Не работает textarea=true */
+    maskChar?: string;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы элементов */
+    classes?: {
+        label?: string;
+        input?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        label?: Record<string, string>;
+        notice?: Record<string, string>;
+        input?: Record<string, string>;
+        iconBox?: Record<string, string>;
+        resizer?: Record<string, string>;
+    };
+    /** Атрибут элемента input */
+    inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';
+    /** Атрибут элемента input. Не работает с textarea=true */
+    autoComplete?: string;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Минимальная высота textarea, px */
+    minTextareaHeight?: MinTextareaHeightType;
+    /** Скрывает кнопку ресайза для textarea="flexible" */
+    hideResizeButton?: boolean;
+    /** Отключает перевод строки по Enter */
+    disableEnterLineBreak?: boolean;
+    /** Обработчик клика по инпуту */
+    onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Обработчик изменения значения */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Обработчик изменения значения маскированного инпута до обработки маской */
+    onBeforeMaskChange?: (value: string, newState: IMaskState, oldState: IMaskState, currentState: IMaskState) => void;
+    /** Обработчик выхода из фокуса */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Обработчик входа в фокус */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Обработчик поднятия клавиши */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Обработчик клика по иконке */
+    onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const TextField: React.FC<TextFieldProps>;
+export default TextField;