@megafon/ui-core 6.4.4 → 6.6.0

package/CHANGELOG.md

@@ -3,21 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.4.4](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@6.4.3...@megafon/ui-core@6.4.4) (2024-11-01)
+# [6.6.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@6.5.0...@megafon/ui-core@6.6.0) (2024-11-15)
 
-**Note:** Version bump only for package @megafon/ui-core
 
+### Features
 
+* **search:** add textarea mode to search ([43dde16](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/43dde163db3650dc901c8a7f33d671ef5788866e))
+* **search:** update textarea height ([c72dae8](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/c72dae8944ce5187327481b9878c6677711f250d))
 
 
 
-## [6.4.3](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@6.4.2...@megafon/ui-core@6.4.3) (2024-10-29)
 
-**Note:** Version bump only for package @megafon/ui-core
 
+# [6.5.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@6.4.4...@megafon/ui-core@6.5.0) (2024-11-06)
+
+### Bug Fixes
+
+-   **calendar:** fix width and remove left artifact from second line in date selection ([14408f9](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/14408f9ae65767cdba3235e239c30f95d66db32d))
 
+### Features
+
+-   **banner:** add optional prop hasMarginTop ([ef27905](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/ef2790599ddf81d3e125e36cdec9caca1dbc983b))
+-   **container:** add optional prop preventMarginTopCollapse ([2b5633b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/2b5633bb5c63e6fbc7e828253c083d2e6474a6ac))
+-   **tooltip:** add new props: offset and isHiddenResize ([86214b5](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/86214b597bb22d0ebd7eb497d09de03b8ed88c36))
+
+## [6.4.4](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@6.4.3...@megafon/ui-core@6.4.4) (2024-11-01)
 
+**Note:** Version bump only for package @megafon/ui-core
+
+## [6.4.3](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@6.4.2...@megafon/ui-core@6.4.3) (2024-10-29)
 
+**Note:** Version bump only for package @megafon/ui-core
 
 ## [6.4.2](/compare/@megafon/ui-core@6.4.1...@megafon/ui-core@6.4.2) (2024-10-21)
 

package/dist/es/components/Banner/Banner.css

@@ -154,6 +154,9 @@
     bottom: 72px;
   }
 }
+.mfui-v6-banner_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-banner_radius_rounded .mfui-v6-banner__swiper {
   border-radius: 24px;
 }

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

@@ -69,6 +69,8 @@ export interface IBannerProps {
     noIncreaseAutoplayDelay?: boolean;
     /** Показать часть следующего слайда */
     showNextSlide?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

package/dist/es/components/Banner/Banner.js

@@ -66,6 +66,8 @@ var Banner = function Banner(_ref) {
       autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
       noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
       showNextSlide = _ref.showNextSlide,
+      _ref$hasMarginTop = _ref.hasMarginTop,
+      hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop,
       _ref$children = _ref.children,
       children = _ref$children === void 0 ? [] : _ref$children,
       getSwiper = _ref.getSwiper,
@@ -268,7 +270,8 @@ var Banner = function Banner(_ref) {
       'background-color': backgroundColor,
       'no-touch': !isTouch,
       radius: radius,
-      'show-next-slide': showNextSlide
+      'show-next-slide': showNextSlide,
+      'margin-top': hasMarginTop
     }, className),
     ref: rootRef
   }), /*#__PURE__*/React.createElement("div", {
@@ -330,6 +333,7 @@ Banner.propTypes = {
   noIncreaseAutoplayDelay: PropTypes.bool,
   showNextSlide: PropTypes.bool,
   getSwiper: PropTypes.func,
+  hasMarginTop: PropTypes.bool,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,
   onDotClick: PropTypes.func,

package/dist/es/components/Calendar/Calendar.css

@@ -5,16 +5,15 @@
 }
 .mfui-v6-calendar_modern {
   display: block;
-  width: 364px;
+  width: 100%;
   height: 304px;
   overflow-x: hidden;
   overflow-y: scroll;
 }
 .mfui-v6-calendar_modern::-webkit-scrollbar {
-  width: 16px;
+  width: 4px;
 }
 .mfui-v6-calendar_modern::-webkit-scrollbar-thumb {
-  border: 6px solid transparent;
   border-radius: 16px;
   background-color: #D8D8D8;
   background-clip: padding-box;

package/dist/es/components/Calendar/Calendar.js

@@ -366,14 +366,14 @@ var Calendar = function Calendar(_ref) {
       var isNextMonthDisabled = !!maxBookingDate && isSameMonth(new Date(year, month, 1), maxBookingDate);
       var isCurrentMonth = new Date().getFullYear() === year && new Date().getMonth() === month;
       return /*#__PURE__*/React.createElement("div", {
-        ref: isCurrentMonth ? currentMonthRef : null
+        ref: isCurrentMonth ? currentMonthRef : null,
+        key: "".concat(year, "-").concat(month)
       }, /*#__PURE__*/React.createElement(Month, {
         dataAttrs: {
           root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.month,
           arrowLeft: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft,
           arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
         },
-        key: "".concat(year, "-").concat(month),
         year: year,
         weekdayLabels: weekdayLabels,
         monthLabel: monthLabel,

package/dist/es/components/Calendar/components/Day/Day.css

@@ -45,7 +45,10 @@
   width: 38px;
   height: 38px;
 }
-.mfui-v6-day_active-modern:hover:after {
+.mfui-v6-day_active-modern:hover:after,
+.mfui-v6-day_active-modern:focus:after {
+  width: 38px !important;
+  height: 38px !important;
   background-color: var(--brandGreen) !important;
 }
 .mfui-v6-day:not(:disabled):not(.mfui-v6-day_active):hover:after {
@@ -67,7 +70,7 @@
 .mfui-v6-day:not(:disabled):not(.mfui-v6-day_active):focus {
   color: var(--stcWhite);
 }
-.mfui-v6-day_active + .mfui-v6-day_active:before,
+.mfui-v6-day_active + .mfui-v6-day:not(.mfui-v6-day_monday).mfui-v6-day_active:before,
 .mfui-v6-day_between:hover + .mfui-v6-day:not(.mfui-v6-day_monday).mfui-v6-day_active:before {
   content: '';
   position: absolute;
@@ -137,7 +140,7 @@
   z-index: 99;
 }
 .mfui-v6-day_modern {
-  width: 38.29px;
+  width: 100%;
   height: 38px;
 }
 .mfui-v6-day_modern:not(:disabled):not(.mfui-v6-day_modern_active-modern):hover:after,
@@ -166,7 +169,7 @@
 .mfui-v6-day:not(:disabled):focus {
   color: var(--stcWhite);
 }
-.mfui-v6-day_active-modern + .mfui-v6-day_active-modern:before,
+.mfui-v6-day_active-modern + .mfui-v6-day:not(.mfui-v6-day_monday-modern).mfui-v6-day_active-modern:before,
 .mfui-v6-day_between-modern:hover + .mfui-v6-day:not(.mfui-v6-day_monday-modern).mfui-v6-day_active-modern:before {
   content: '';
   position: absolute;
@@ -186,7 +189,7 @@
   content: '';
   position: absolute;
   top: 0;
-  left: -28px;
+  left: -20px;
   z-index: -1;
   display: block;
   height: 38px;
@@ -197,7 +200,7 @@
   content: '';
   position: absolute;
   top: 0;
-  right: -18px;
+  right: -12px;
   z-index: -1;
   display: block;
   width: 45px;
@@ -210,7 +213,7 @@
 }
 .mfui-v6-day_sunday-modern:before,
 .mfui-v6-day_last-modern:before {
-  padding-left: 20px;
+  padding-left: 8px;
 }
 .mfui-v6-day_sunday-modern:after,
 .mfui-v6-day_last-modern:after {

package/dist/es/components/Calendar/components/Month/Month.css

@@ -80,8 +80,8 @@ svg.mfui-v6-month__arrow_disabled {
   opacity: 0.5;
 }
 .mfui-v6-month_modern {
-  width: 344px;
-  padding: 0 0 24px;
+  width: 100%;
+  padding: 0 16px 24px 0;
 }
 .mfui-v6-month_modern .mfui-v6-month__header {
   display: -webkit-box;
@@ -90,7 +90,7 @@ svg.mfui-v6-month__arrow_disabled {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 328px;
+  width: 100%;
   margin-bottom: 16px;
   text-transform: capitalize;
 }
@@ -105,7 +105,7 @@ svg.mfui-v6-month__arrow_disabled {
 .mfui-v6-month_modern .mfui-v6-month__weekday-labels {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  width: 328px;
+  width: 100%;
   padding-bottom: 0;
   border-bottom: none;
   -webkit-column-gap: 8px;
@@ -126,7 +126,7 @@ svg.mfui-v6-month__arrow_disabled {
 .mfui-v6-month_modern .mfui-v6-month__days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  width: 328px;
+  width: 100%;
   margin-top: 10px;
   -webkit-column-gap: 0;
      -moz-column-gap: 0;

package/dist/es/components/Search/Search.css

@@ -130,7 +130,7 @@
   color: var(--content);
   font-size: 100%;
   font-family: inherit;
-  line-height: 25px;
+  line-height: 24px;
   background-color: transparent;
   outline: none;
   -webkit-box-shadow: none;
@@ -140,6 +140,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  resize: none;
   caret-color: var(--brandGreen);
 }
 @media screen and (max-width: 767px) {
@@ -153,8 +154,10 @@
   display: block;
   overflow: auto;
   color: var(--spbSky3);
-  -webkit-transition-duration: 0.2s, 0.01s;
-          transition-duration: 0.2s, 0.01s;
+  -webkit-transition: scale 0.5s, top 0.01s, -webkit-transform 0.5s;
+  transition: scale 0.5s, top 0.01s, -webkit-transform 0.5s;
+  transition: transform 0.5s, scale 0.5s, top 0.01s;
+  transition: transform 0.5s, scale 0.5s, top 0.01s, -webkit-transform 0.5s;
   pointer-events: none;
   font-family: inherit;
   font-size: 15px;
@@ -338,6 +341,7 @@
   border-radius: 12px;
   background-color: var(--base);
 }
+.mfui-v6-search_type_textfield .mfui-v6-search__control_focused,
 .mfui-v6-search_type_textfield .mfui-v6-search__control:hover {
   border-color: var(--content);
 }
@@ -348,15 +352,54 @@
 .mfui-v6-search_type_textfield .mfui-v6-search__field:focus + .mfui-v6-search__label {
   -webkit-transform: scale(0.8) translate(-12.5%, -75%);
           transform: scale(0.8) translate(-12.5%, -75%);
+  -webkit-transition: scale 0.2s, top 0.01s, -webkit-transform 0.2s;
+  transition: scale 0.2s, top 0.01s, -webkit-transform 0.2s;
+  transition: transform 0.2s, scale 0.2s, top 0.01s;
+  transition: transform 0.2s, scale 0.2s, top 0.01s, -webkit-transform 0.2s;
 }
 .mfui-v6-search_type_textfield .mfui-v6-search__field_labeled {
-  padding-top: 22px;
+  padding-top: 25px;
+  padding-bottom: 9px;
 }
 .mfui-v6-search_type_textfield .mfui-v6-search__submit-icon {
   width: 32px;
   height: 32px;
   fill: var(--content);
 }
+.mfui-v6-search_textarea .mfui-v6-search__control {
+  height: auto;
+  min-height: 60px;
+}
+.mfui-v6-search_textarea .mfui-v6-search__field {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  max-height: 204px;
+  padding-top: 17px;
+  padding-bottom: 9px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+}
+.mfui-v6-search_textarea .mfui-v6-search__field_labeled {
+  padding-top: 25px;
+  padding-bottom: 9px;
+}
+.mfui-v6-search_textarea .mfui-v6-search__icons {
+  height: 58px;
+  margin-left: 8px;
+}
+.mfui-v6-search_textarea .mfui-v6-search__field_resized {
+  -webkit-transition: height 0.1s;
+  transition: height 0.1s;
+  will-change: height;
+}
+.mfui-v6-search__textarea-wrapper {
+  position: relative;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  width: 100%;
+  overflow: hidden;
+}
 .mfui-v6-search_type_textfield.mfui-v6-search_disabled .mfui-v6-search__control {
   border-color: var(--spbSky1);
   background-color: var(--spbSky1);
@@ -451,3 +494,32 @@
 .mfui-v6-search_success .mfui-v6-search__control {
   border-color: var(--brandGreen);
 }
+.mfui-v6-search__resizer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  width: 12px;
+  height: 12px;
+  padding: 4px;
+  cursor: ns-resize;
+}
+.mfui-v6-search__resizer svg {
+  -webkit-transition: stroke 0.3s;
+  transition: stroke 0.3s;
+  stroke: var(--spbSky2);
+}
+.mfui-v6-search__resizer:hover svg,
+.mfui-v6-search__resizer:active svg {
+  stroke: var(--spbSky3);
+}

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import './Search.less';
+export declare const MinTextareaHeight: {
+    readonly ONE_ROW: 24;
+    readonly THREE_ROWS: number;
+};
+declare type MinTextareaHeightType = typeof MinTextareaHeight[keyof typeof MinTextareaHeight];
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -40,11 +45,14 @@ export interface ISearchProps {
         notice?: Record<string, string>;
         popularItem?: Record<string, string>;
         clearButton?: Record<string, string>;
+        resizer?: Record<string, string>;
     };
     /** Значение */
     value?: string;
     /** Вид отображения */
     type?: 'textfield' | 'compact';
+    /** Включить режим textarea */
+    textarea?: boolean;
     /** Заголовок поля */
     label?: string;
     /** HTML идентификатор поля поиска */
@@ -78,6 +86,7 @@ export interface ISearchProps {
         textNotFound?: string;
         popularTitle?: string;
         popularItem?: string;
+        resizer?: string;
     };
     /** Отображение загрузки */
     showLoader?: boolean;
@@ -91,14 +100,18 @@ export interface ISearchProps {
     popularTitle?: string;
     /** Ссылка на элемент списка с результатами */
     listRef?: React.Ref<HTMLDivElement>;
+    /** Минимальная высота textarea, px */
+    minTextareaHeight?: MinTextareaHeightType;
+    /** Показать хендлер для ресайза текстового поля */
+    showResizer?: boolean;
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */
     onSubmit?: (value: string) => void;
     /** Обработчик выхода из фокуса */
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик входа в фокус */
-    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик нажатия на популярный элемент */
     onPopularItemClick?: (popularItemValue?: string) => void;
 }