@megafon/ui-core 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.2.0...@megafon/ui-core@4.3.0) (2022-10-05)
+
+
+### Features
+
+* **tabs:** update prop classes with new keys wrapper and swiperWrapper ([1832aac](https://github.com/MegafonWebLab/megafon-ui/commit/1832aac3a0cdba03c9e74fd4e570be72c4156387))
+* **textfield:** update pros classes with new key label ([db2a10d](https://github.com/MegafonWebLab/megafon-ui/commit/db2a10dd23e0ac6634510207202ba86886ae6d61))
+
+
+
+
+
 # [4.2.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.1.0...@megafon/ui-core@4.2.0) (2022-10-04)
 
 

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

@@ -22,6 +22,8 @@ export interface ITabsProps {
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         root?: string;
+        wrapper?: string;
+        swiperWrapper?: string;
         innerIndents?: string;
         tab?: string;
         activeTab?: string;

package/dist/es/components/Tabs/Tabs.js

@@ -38,12 +38,8 @@ var cn = cnCreate('mfui-tabs');
 
 var Tabs = function Tabs(_ref) {
   var className = _ref.className,
-      _ref$classes = _ref.classes;
-  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var rootClass = _ref$classes.root,
-      innerIndentsClass = _ref$classes.innerIndents,
-      tabClass = _ref$classes.tab,
-      activeTabClass = _ref$classes.activeTab,
+      _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,
@@ -287,15 +283,15 @@ var Tabs = function Tabs(_ref) {
           renderTabWrapper = _child$props.renderTabWrapper,
           data = _child$props.dataAttrs;
       var tab = renderTab(i, title, icon, href, data === null || data === void 0 ? void 0 : data.inner);
-      var activeTabClassName = currentIndex === i ? activeTabClass : undefined;
+      var activeTabClassName = currentIndex === i ? classes === null || classes === void 0 ? void 0 : classes.activeTab : undefined;
       return /*#__PURE__*/React.createElement(SwiperSlide, {
         className: cn('slide')
       }, /*#__PURE__*/React.createElement("div", _extends({
-        className: cn('tab', [tabClass, activeTabClassName]),
+        className: cn('tab', [classes === null || classes === void 0 ? void 0 : classes.tab, activeTabClassName]),
         ref: setTabRef
       }, filterDataAttrs(data === null || data === void 0 ? void 0 : data.root, i + 1)), renderTabWrapper ? renderTabWrapper(tab) : tab));
     });
-  }, [renderTab, children, activeTabClass, currentIndex, setTabRef, tabClass]);
+  }, [renderTab, children, classes === null || classes === void 0 ? void 0 : classes.activeTab, currentIndex, setTabRef, classes === null || classes === void 0 ? void 0 : classes.tab]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
       var panel = child.props.children;
@@ -364,19 +360,19 @@ var Tabs = function Tabs(_ref) {
       size: size,
       'tab-color': tabColorTheme,
       'h-align': align,
-      indents: !innerIndentsClass,
+      indents: !(classes === null || classes === void 0 ? void 0 : classes.innerIndents),
       sticky: isSticky,
       'auto-width': autoWidth
-    }, [className, rootClass]),
+    }, [className, classes.root]),
     ref: rootRef
   }), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrapper'),
+    className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper]),
     ref: tabListRef,
     style: {
       height: tabListHeight
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('swiper-wrapper'),
+    className: cn('swiper-wrapper', [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
     style: {
       paddingLeft: stickyOffset.left,
       paddingRight: stickyOffset.right
@@ -386,7 +382,7 @@ var Tabs = function Tabs(_ref) {
     className: cn('swiper', {
       beginning: isBeginning,
       end: isEnd
-    }, [innerIndentsClass]),
+    }, [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
     watchOverflow: true,
     slidesPerView: "auto",
     initialSlide: currentIndex,
@@ -421,6 +417,8 @@ Tabs.propTypes = {
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,
+    wrapper: PropTypes.string,
+    swiperWrapper: PropTypes.string,
     innerIndents: PropTypes.string,
     tab: PropTypes.string,
     activeTab: PropTypes.string

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

@@ -62,6 +62,7 @@ export declare type TextFieldProps = {
     className?: string;
     /** Дополнительные классы элементов */
     classes?: {
+        label?: string;
         input?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */

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

@@ -119,9 +119,8 @@ var TextField = function TextField(_ref) {
       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,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs;
 
   var _useState = useState(true),
@@ -313,7 +312,7 @@ var TextField = function TextField(_ref) {
   });
 
   var inputParams = _extends(_extends({}, commonParams), {
-    className: cn('field', input),
+    className: cn('field', classes === null || classes === void 0 ? void 0 : classes.input),
     type: isVisiblePassword ? 'text' : type,
     autoComplete: autoComplete
   });
@@ -329,7 +328,7 @@ var TextField = function TextField(_ref) {
       type: textareaType,
       textarea: textarea,
       resized: isTextareaResizeFocused
-    }, input)
+    }, classes === null || classes === void 0 ? void 0 : classes.input)
   });
 
   var getFieldNode = function getFieldNode(node) {
@@ -377,7 +376,7 @@ var TextField = function TextField(_ref) {
     var currentLabel = label || actualPlaceholder;
     return /*#__PURE__*/React.createElement("label", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label), {
       htmlFor: id,
-      className: cn('label'),
+      className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
       ref: labelRef
     }), currentLabel, required && /*#__PURE__*/React.createElement("span", {
       className: cn('require-mark')
@@ -494,6 +493,7 @@ TextField.propTypes = {
   onCustomIconClick: PropTypes.func,
   inputRef: PropTypes.func,
   classes: PropTypes.shape({
+    label: PropTypes.string,
     input: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({

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

@@ -22,6 +22,8 @@ export interface ITabsProps {
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         root?: string;
+        wrapper?: string;
+        swiperWrapper?: string;
         innerIndents?: string;
         tab?: string;
         activeTab?: string;

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

@@ -68,12 +68,8 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-tabs');
 
 var Tabs = function Tabs(_ref) {
   var className = _ref.className,
-      _ref$classes = _ref.classes;
-  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var rootClass = _ref$classes.root,
-      innerIndentsClass = _ref$classes.innerIndents,
-      tabClass = _ref$classes.tab,
-      activeTabClass = _ref$classes.activeTab,
+      _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,
@@ -316,15 +312,15 @@ var Tabs = function Tabs(_ref) {
           renderTabWrapper = _child$props.renderTabWrapper,
           data = _child$props.dataAttrs;
       var tab = renderTab(i, title, icon, href, data === null || data === void 0 ? void 0 : data.inner);
-      var activeTabClassName = currentIndex === i ? activeTabClass : undefined;
+      var activeTabClassName = currentIndex === i ? classes === null || classes === void 0 ? void 0 : classes.activeTab : undefined;
       return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
         className: cn('slide')
       }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-        className: cn('tab', [tabClass, activeTabClassName]),
+        className: cn('tab', [classes === null || classes === void 0 ? void 0 : classes.tab, activeTabClassName]),
         ref: setTabRef
       }, (0, _uiHelpers.filterDataAttrs)(data === null || data === void 0 ? void 0 : data.root, i + 1)), renderTabWrapper ? renderTabWrapper(tab) : tab));
     });
-  }, [renderTab, children, activeTabClass, currentIndex, setTabRef, tabClass]);
+  }, [renderTab, children, classes === null || classes === void 0 ? void 0 : classes.activeTab, currentIndex, setTabRef, classes === null || classes === void 0 ? void 0 : classes.tab]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
       var panel = child.props.children;
@@ -393,19 +389,19 @@ var Tabs = function Tabs(_ref) {
       size: size,
       'tab-color': tabColorTheme,
       'h-align': align,
-      indents: !innerIndentsClass,
+      indents: !(classes === null || classes === void 0 ? void 0 : classes.innerIndents),
       sticky: isSticky,
       'auto-width': autoWidth
-    }, [className, rootClass]),
+    }, [className, classes.root]),
     ref: rootRef
   }), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrapper'),
+    className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper]),
     ref: tabListRef,
     style: {
       height: tabListHeight
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('swiper-wrapper'),
+    className: cn('swiper-wrapper', [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
     style: {
       paddingLeft: stickyOffset.left,
       paddingRight: stickyOffset.right
@@ -415,7 +411,7 @@ var Tabs = function Tabs(_ref) {
     className: cn('swiper', {
       beginning: isBeginning,
       end: isEnd
-    }, [innerIndentsClass]),
+    }, [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
     watchOverflow: true,
     slidesPerView: "auto",
     initialSlide: currentIndex,
@@ -450,6 +446,8 @@ Tabs.propTypes = {
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     root: _propTypes["default"].string,
+    wrapper: _propTypes["default"].string,
+    swiperWrapper: _propTypes["default"].string,
     innerIndents: _propTypes["default"].string,
     tab: _propTypes["default"].string,
     activeTab: _propTypes["default"].string

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

@@ -62,6 +62,7 @@ export declare type TextFieldProps = {
     className?: string;
     /** Дополнительные классы элементов */
     classes?: {
+        label?: string;
         input?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/lib/components/TextField/TextField.js

@@ -147,9 +147,8 @@ var TextField = function TextField(_ref) {
       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,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs;
 
   var _useState = (0, React.useState)(true),
@@ -339,7 +338,7 @@ var TextField = function TextField(_ref) {
     inputMode: inputMode
   });
   var inputParams = (0, _extends2["default"])((0, _extends2["default"])({}, commonParams), {
-    className: cn('field', input),
+    className: cn('field', classes === null || classes === void 0 ? void 0 : classes.input),
     type: isVisiblePassword ? 'text' : type,
     autoComplete: autoComplete
   });
@@ -353,7 +352,7 @@ var TextField = function TextField(_ref) {
       type: textareaType,
       textarea: textarea,
       resized: isTextareaResizeFocused
-    }, input)
+    }, classes === null || classes === void 0 ? void 0 : classes.input)
   });
 
   var getFieldNode = function getFieldNode(node) {
@@ -401,7 +400,7 @@ var TextField = function TextField(_ref) {
     var currentLabel = label || actualPlaceholder;
     return /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label), {
       htmlFor: id,
-      className: cn('label'),
+      className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
       ref: labelRef
     }), currentLabel, required && /*#__PURE__*/React.createElement("span", {
       className: cn('require-mark')
@@ -518,6 +517,7 @@ TextField.propTypes = {
   onCustomIconClick: PropTypes.func,
   inputRef: PropTypes.func,
   classes: PropTypes.shape({
+    label: PropTypes.string,
     input: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "files": [
     "dist",
     "styles"
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "d76f8b81ccbaeff41c2aaebc099a79298ed6deaa"
+  "gitHead": "d46a63dbfc20ee931c4e12a82287b7385596bbcf"
 }