@megafon/ui-core 4.2.0 → 4.4.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.3.0...@megafon/ui-core@4.4.0) (2022-10-10)
+
+
+### Bug Fixes
+
+* **textfield:** fix input height in Safari ([b60e1ac](https://github.com/MegafonWebLab/megafon-ui/commit/b60e1acd76dc80b4609b55dc8256eb94e8e8ec0c))
+* **tooltip:** fix touch device controlled trigger ([e983ca8](https://github.com/MegafonWebLab/megafon-ui/commit/e983ca88636990e467b43483b0cf0df06dff8553))
+
+
+### Features
+
+* **select:** add new props useShortListItems ([31d1172](https://github.com/MegafonWebLab/megafon-ui/commit/31d1172484ca4c07060ff64eb7f3be692f5dbdec))
+
+
+
+
+
+# [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/Select/Select.css

@@ -178,6 +178,9 @@
   padding: 16px;
   overflow-y: auto;
 }
+.mfui-select__list-inner_short {
+  max-height: 235px;
+}
 .mfui-select__list-inner::-webkit-scrollbar {
   width: 16px;
 }

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

@@ -56,6 +56,8 @@ export interface ISelectProps<T extends SelectItemValueType> {
     notFoundText?: string;
     /** Массив элементов селекта */
     items: Array<ISelectItem<T>>;
+    /** Отображать короткий выпадающий список */
+    shortList?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */
@@ -88,7 +90,7 @@ export interface ISelectProps<T extends SelectItemValueType> {
     onClosed?: () => void;
 }
 declare const Select: {
-    <T extends string | number | undefined>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, onClosed, onOpened, onSelect, }: ISelectProps<T>): JSX.Element;
+    <T extends string | number | undefined>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, onClosed, onOpened, onSelect, }: ISelectProps<T>): JSX.Element;
     propTypes: {
         type: PropTypes.Requireable<"classic" | "combobox">;
         label: PropTypes.Requireable<string>;
@@ -144,6 +146,7 @@ declare const Select: {
             value: PropTypes.Validator<string | number>;
             paddings: PropTypes.Requireable<"small" | "large">;
         }>> | null | undefined)[]>;
+        shortList: PropTypes.Requireable<boolean>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onOpened: PropTypes.Requireable<(...args: any[]) => any>;
         onClosed: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/components/Select/Select.js

@@ -73,6 +73,8 @@ var Select = function Select(_ref) {
       items = _ref.items,
       placeholder = _ref.placeholder,
       currentValue = _ref.currentValue,
+      _ref$shortList = _ref.shortList,
+      shortList = _ref$shortList === void 0 ? false : _ref$shortList,
       onClosed = _ref.onClosed,
       onOpened = _ref.onOpened,
       onSelect = _ref.onSelect;
@@ -380,7 +382,9 @@ var Select = function Select(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('list', [classes.list])
     }, /*#__PURE__*/React.createElement("div", {
-      className: cn('list-inner', [classes.listInner]),
+      className: cn('list-inner', {
+        "short": shortList
+      }, [classes.listInner]),
       ref: itemWrapperNode
     }, currentItems.map(function (_ref3, i) {
       var title = _ref3.title,
@@ -471,6 +475,7 @@ Select.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     paddings: PropTypes.oneOf(Object.values(SelectItemsPaddings))
   })).isRequired,
+  shortList: PropTypes.bool,
   onSelect: PropTypes.func,
   onOpened: PropTypes.func,
   onClosed: PropTypes.func

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.css

@@ -12,6 +12,7 @@
 .mfui-text-field__field {
   display: block;
   width: 100%;
+  margin: 0;
   padding: 25px 56px 9px 16px;
   border: 1px solid var(--spbSky2);
   border-radius: 12px;

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/es/components/Tooltip/Tooltip.js

@@ -132,7 +132,11 @@ var Tooltip = function Tooltip(_ref) {
     return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
   var triggerEventName = useMemo(function () {
-    return isTouchDevice ? 'click' : triggerEvent;
+    if (triggerEvent === TriggerEvent.CONTROLLED || !isTouchDevice) {
+      return triggerEvent;
+    }
+
+    return TriggerEvent.CLICK;
   }, [isTouchDevice, triggerEvent]);
   var handleMouseEnter = useCallback(function (e) {
     if (!isOpen) {

package/dist/lib/components/Select/Select.css

@@ -178,6 +178,9 @@
   padding: 16px;
   overflow-y: auto;
 }
+.mfui-select__list-inner_short {
+  max-height: 235px;
+}
 .mfui-select__list-inner::-webkit-scrollbar {
   width: 16px;
 }

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

@@ -56,6 +56,8 @@ export interface ISelectProps<T extends SelectItemValueType> {
     notFoundText?: string;
     /** Массив элементов селекта */
     items: Array<ISelectItem<T>>;
+    /** Отображать короткий выпадающий список */
+    shortList?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */
@@ -88,7 +90,7 @@ export interface ISelectProps<T extends SelectItemValueType> {
     onClosed?: () => void;
 }
 declare const Select: {
-    <T extends string | number | undefined>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, onClosed, onOpened, onSelect, }: ISelectProps<T>): JSX.Element;
+    <T extends string | number | undefined>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, onClosed, onOpened, onSelect, }: ISelectProps<T>): JSX.Element;
     propTypes: {
         type: PropTypes.Requireable<"classic" | "combobox">;
         label: PropTypes.Requireable<string>;
@@ -144,6 +146,7 @@ declare const Select: {
             value: PropTypes.Validator<string | number>;
             paddings: PropTypes.Requireable<"small" | "large">;
         }>> | null | undefined)[]>;
+        shortList: PropTypes.Requireable<boolean>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onOpened: PropTypes.Requireable<(...args: any[]) => any>;
         onClosed: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/lib/components/Select/Select.js

@@ -108,6 +108,8 @@ var Select = function Select(_ref) {
       items = _ref.items,
       placeholder = _ref.placeholder,
       currentValue = _ref.currentValue,
+      _ref$shortList = _ref.shortList,
+      shortList = _ref$shortList === void 0 ? false : _ref$shortList,
       onClosed = _ref.onClosed,
       onOpened = _ref.onOpened,
       onSelect = _ref.onSelect;
@@ -415,7 +417,9 @@ var Select = function Select(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('list', [classes.list])
     }, /*#__PURE__*/React.createElement("div", {
-      className: cn('list-inner', [classes.listInner]),
+      className: cn('list-inner', {
+        "short": shortList
+      }, [classes.listInner]),
       ref: itemWrapperNode
     }, currentItems.map(function (_ref3, i) {
       var title = _ref3.title,
@@ -506,6 +510,7 @@ Select.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     paddings: PropTypes.oneOf(Object.values(SelectItemsPaddings))
   })).isRequired,
+  shortList: PropTypes.bool,
   onSelect: PropTypes.func,
   onOpened: PropTypes.func,
   onClosed: PropTypes.func

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.css

@@ -12,6 +12,7 @@
 .mfui-text-field__field {
   display: block;
   width: 100%;
+  margin: 0;
   padding: 25px 56px 9px 16px;
   border: 1px solid var(--spbSky2);
   border-radius: 12px;

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

@@ -161,7 +161,11 @@ var Tooltip = function Tooltip(_ref) {
     return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
   var triggerEventName = (0, _react.useMemo)(function () {
-    return isTouchDevice ? 'click' : triggerEvent;
+    if (triggerEvent === TriggerEvent.CONTROLLED || !isTouchDevice) {
+      return triggerEvent;
+    }
+
+    return TriggerEvent.CLICK;
   }, [isTouchDevice, triggerEvent]);
   var handleMouseEnter = (0, _react.useCallback)(function (e) {
     if (!isOpen) {

package/package.json

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