@megafon/ui-core 7.0.0 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/components/Carousel/Carousel.js +5 -0
- package/dist/es/components/Search/Search.d.ts +2 -0
- package/dist/es/components/Search/Search.js +3 -1
- package/dist/es/components/Select/Select.js +25 -21
- package/dist/es/components/Tabs/Tabs.css +1 -1
- package/dist/es/components/Tooltip/Tooltip.d.ts +2 -0
- package/dist/es/components/Tooltip/Tooltip.js +5 -3
- package/dist/lib/components/Carousel/Carousel.js +5 -0
- package/dist/lib/components/Search/Search.d.ts +2 -0
- package/dist/lib/components/Search/Search.js +3 -1
- package/dist/lib/components/Select/Select.js +25 -21
- package/dist/lib/components/Tabs/Tabs.css +1 -1
- package/dist/lib/components/Tooltip/Tooltip.d.ts +2 -0
- package/dist/lib/components/Tooltip/Tooltip.js +5 -3
- package/package.json +9 -9
|
@@ -33,6 +33,7 @@ import "./Carousel.css";
|
|
|
33
33
|
var Autoplay = null;
|
|
34
34
|
var Pagination = null;
|
|
35
35
|
var EffectFade = null;
|
|
36
|
+
var FreeMode = null;
|
|
36
37
|
var Swiper = null;
|
|
37
38
|
var SwiperSlide = null;
|
|
38
39
|
try {
|
|
@@ -45,6 +46,7 @@ try {
|
|
|
45
46
|
Autoplay = Modules.Autoplay;
|
|
46
47
|
Pagination = Modules.Pagination;
|
|
47
48
|
EffectFade = Modules.EffectFade;
|
|
49
|
+
FreeMode = Modules.FreeMode;
|
|
48
50
|
} catch (e) {
|
|
49
51
|
// eslint-disable-next-line no-console
|
|
50
52
|
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 Carousel component documentation at:\n https://ui.megafon.ru/components/carousel\n ");
|
|
@@ -296,6 +298,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
296
298
|
if (EffectFade) {
|
|
297
299
|
swiperModules.push(EffectFade);
|
|
298
300
|
}
|
|
301
|
+
if (FreeMode) {
|
|
302
|
+
swiperModules.push(FreeMode);
|
|
303
|
+
}
|
|
299
304
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
300
305
|
ref: rootRef,
|
|
301
306
|
className: cn({
|
|
@@ -88,6 +88,8 @@ export interface ISearchProps {
|
|
|
88
88
|
popularItems?: PopularItem[];
|
|
89
89
|
/** Заголовок перед популярными элементами */
|
|
90
90
|
popularTitle?: string;
|
|
91
|
+
/** Ссылка на элемент списка с результатами */
|
|
92
|
+
listRef?: React.Ref<HTMLDivElement>;
|
|
91
93
|
/** Обработчик изменения поля */
|
|
92
94
|
onChange?: (value: string) => void;
|
|
93
95
|
/** Обработчик нажатия на enter */
|
|
@@ -75,6 +75,7 @@ var Search = function Search(_ref) {
|
|
|
75
75
|
_ref$popularItems = _ref.popularItems,
|
|
76
76
|
popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
|
|
77
77
|
popularTitle = _ref.popularTitle,
|
|
78
|
+
listRef = _ref.listRef,
|
|
78
79
|
onChange = _ref.onChange,
|
|
79
80
|
onSubmit = _ref.onSubmit,
|
|
80
81
|
onBlur = _ref.onBlur,
|
|
@@ -296,7 +297,8 @@ var Search = function Search(_ref) {
|
|
|
296
297
|
};
|
|
297
298
|
var renderList = function renderList() {
|
|
298
299
|
return /*#__PURE__*/React.createElement("div", {
|
|
299
|
-
className: cn('list')
|
|
300
|
+
className: cn('list'),
|
|
301
|
+
ref: listRef
|
|
300
302
|
}, /*#__PURE__*/React.createElement("div", {
|
|
301
303
|
className: cn('list-inner')
|
|
302
304
|
}, items.map(function (_ref2, i) {
|
|
@@ -170,24 +170,27 @@ var Select = function Select(_ref) {
|
|
|
170
170
|
});
|
|
171
171
|
isCurrentlyOpened && (onClosed === null || onClosed === void 0 ? void 0 : onClosed());
|
|
172
172
|
};
|
|
173
|
-
var handleSelectItem = function handleSelectItem(
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
173
|
+
var handleSelectItem = function handleSelectItem(index) {
|
|
174
|
+
return function (e) {
|
|
175
|
+
var currentItem = itemsList[index].value;
|
|
176
|
+
var item = itemsList.find(function (elem) {
|
|
177
|
+
return elem.value === currentItem;
|
|
178
|
+
});
|
|
179
|
+
if (!item) {
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
var title = item.title;
|
|
183
|
+
changeSelectState({
|
|
184
|
+
type: UPDATE_SELECT_VALUE,
|
|
185
|
+
inputValue: title,
|
|
186
|
+
comparableInputValue: title,
|
|
187
|
+
items: items,
|
|
188
|
+
hoveredItemIndex: index
|
|
189
|
+
});
|
|
190
|
+
e.persist();
|
|
191
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
|
|
192
|
+
onClosed === null || onClosed === void 0 ? void 0 : onClosed();
|
|
193
|
+
};
|
|
191
194
|
};
|
|
192
195
|
var handleHoverItem = function handleHoverItem(index) {
|
|
193
196
|
return function (e) {
|
|
@@ -242,7 +245,8 @@ var Select = function Select(_ref) {
|
|
|
242
245
|
return false;
|
|
243
246
|
}
|
|
244
247
|
if (e.key === 'Enter' && isOpened) {
|
|
245
|
-
|
|
248
|
+
var _nextIndex2 = hoveredItemIndex - 1;
|
|
249
|
+
handleSelectItem(_nextIndex2)(e);
|
|
246
250
|
return false;
|
|
247
251
|
}
|
|
248
252
|
if (e.key === 'Enter' && !isOpened) {
|
|
@@ -360,8 +364,8 @@ var Select = function Select(_ref) {
|
|
|
360
364
|
paddings: paddings
|
|
361
365
|
}, [classes.listItem]),
|
|
362
366
|
key: "".concat(i, "_").concat(value),
|
|
363
|
-
onClick: handleSelectItem,
|
|
364
|
-
onMouseEnter: handleHoverItem(i),
|
|
367
|
+
onClick: handleSelectItem(i),
|
|
368
|
+
onMouseEnter: !isTouch ? handleHoverItem(i) : undefined,
|
|
365
369
|
ref: getNodeList
|
|
366
370
|
}), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItemTitle, i + 1), {
|
|
367
371
|
className: cn('item-title', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-tabs .swiper-wrapper,.mfui-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-tabs__swiper-wrapper:after,.mfui-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-tabs__swiper-wrapper:after{right:0}.mfui-tabs__swiper-wrapper_beginning:before,.mfui-tabs__swiper-wrapper_end:after{display:none}.mfui-tabs__swiper{background-color:var(--spbSky0);border-radius:12px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-tabs__panel{display:none}.mfui-tabs__panel_current{display:block}.mfui-tabs__underline{background-color:var(--base);border-radius:8px;bottom:0;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-tabs__underline:before{background-color:var(--stcWhite20);content:"";height:100%;
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-tabs .swiper-wrapper,.mfui-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-tabs__swiper-wrapper:after,.mfui-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-tabs__swiper-wrapper:after{right:0}.mfui-tabs__swiper-wrapper_beginning:before,.mfui-tabs__swiper-wrapper_end:after{display:none}.mfui-tabs__swiper{background-color:var(--spbSky0);border-radius:12px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-tabs__panel{display:none}.mfui-tabs__panel_current{display:block}.mfui-tabs__underline{background-color:var(--base);border-radius:8px;bottom:0;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-tabs__underline:before{background-color:var(--stcWhite20);content:"";display:block;height:100%;width:100%}.mfui-tabs__arrow{background-color:var(--content);border-radius:50%;cursor:pointer;display:block;height:16px;opacity:1;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,opacity;transition-property:background-color,opacity;width:16px;z-index:2;fill:var(--base)}@media screen and (max-width:1023px){.mfui-tabs__arrow{display:none}}.mfui-tabs__arrow:hover{background-color:var(--spbSky3)}.mfui-tabs__arrow:active{background-color:var(--buttonDown)}.mfui-tabs__arrow_prev{left:14px}.mfui-tabs__arrow_next{right:14px;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.mfui-tabs__arrow_hide{opacity:0;pointer-events:none}.mfui-tabs__tab-inner{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;position:relative;-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;color:var(--content);cursor:pointer;height:36px;justify-content:center;padding:2px 12px;text-align:center;text-decoration:none;-webkit-transition:color .3s,fill .3s;transition:color .3s,fill .3s;white-space:nowrap;fill:var(--content)}.mfui-tabs__tab-inner:hover{text-decoration:none}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current){opacity:.8}@media screen and (min-width:1024px){.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover{color:var(--content);fill:var(--content)}}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover{opacity:1}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):active{color:var(--buttonDown);fill:var(--buttonDown)}.mfui-tabs__tab-inner_with-icon{padding-left:8px}.mfui-tabs__tab-inner_current{color:var(--content);cursor:auto;fill:var(--content)}.mfui-tabs__tab-icon{height:32px;margin-right:4px;width:32px}.mfui-tabs__tab-icon svg{height:100%;width:100%}.mfui-tabs__tab-bubble{margin-left:6px}.mfui-tabs_size_large .mfui-tabs__swiper{padding:6px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__swiper{padding:8px}}.mfui-tabs_size_large .mfui-tabs__tab-inner{height:48px;padding:8px 24px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__tab-inner{height:56px;padding:12px 40px}}.mfui-tabs_size_large .mfui-tabs__tab-inner_with-icon{padding-left:20px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__tab-inner_with-icon{padding-left:28px}}.mfui-tabs_size_large .mfui-tabs__tab-icon{margin-right:6px}.mfui-tabs_size_large .mfui-tabs__tab-bubble{margin-left:12px}.mfui-tabs_size_large .mfui-tabs__tab-bubble_with-icon{margin-left:6px}.mfui-tabs_auto-width .mfui-tabs__swiper{max-width:100%;width:auto}.mfui-tabs_auto-width .mfui-tabs__slide{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mfui-tabs_auto-width.mfui-tabs_h-align_center .mfui-tabs__swiper-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-tabs_indents .mfui-tabs__swiper-wrapper{margin:0 -48px;padding:0 48px}}@media screen and (max-width:767px){.mfui-tabs_indents .mfui-tabs__swiper-wrapper{margin:0 -16px;padding:0 16px}}.mfui-tabs_sticky .mfui-tabs__swiper-wrapper{background-color:var(--base);left:0;position:fixed;right:0;top:0;z-index:100}.mfui-tabs_tab-color_gray .mfui-tabs__swiper{background-color:var(--spbSky1)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper{background-color:var(--stcBlack20)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current){color:var(--stcWhite);opacity:.8;fill:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover{color:var(--stcWhite);opacity:1;fill:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current{color:var(--stcBlack);fill:var(--stcBlack)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline{background-color:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow{background-color:var(--stcWhite);fill:var(--stcBlack)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow:hover{background-color:var(--stcWhite50)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow:active{background-color:var(--stcBlack0)}
|
|
@@ -107,6 +107,8 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
107
107
|
arrowClassName = _ref$classes2.arrow,
|
|
108
108
|
contentClassName = _ref$classes2.content,
|
|
109
109
|
contentShadowClassName = _ref$classes2.contentShadow,
|
|
110
|
+
closeButtonClassName = _ref$classes2.close,
|
|
111
|
+
buttonClassName = _ref$classes2.button,
|
|
110
112
|
dataAttrs = _ref.dataAttrs,
|
|
111
113
|
onOpen = _ref.onOpen,
|
|
112
114
|
onClose = _ref.onClose,
|
|
@@ -295,7 +297,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
295
297
|
type: "button",
|
|
296
298
|
className: cn('button', {
|
|
297
299
|
margin: hasButtonMargin
|
|
298
|
-
})
|
|
300
|
+
}, [buttonClassName])
|
|
299
301
|
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
|
|
300
302
|
onClick: onClick
|
|
301
303
|
}), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
|
|
@@ -305,7 +307,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
305
307
|
margin: hasChildrenMargin
|
|
306
308
|
})
|
|
307
309
|
}, children));
|
|
308
|
-
}, [title, text, buttonText, children, dataAttrs, renderedText, onClick]);
|
|
310
|
+
}, [title, text, buttonText, children, dataAttrs, renderedText, onClick, buttonClassName]);
|
|
309
311
|
var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
310
312
|
className: cn({
|
|
311
313
|
theme: theme,
|
|
@@ -334,7 +336,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
334
336
|
},
|
|
335
337
|
className: cn('content', [contentClassName])
|
|
336
338
|
}, hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
|
|
337
|
-
className: cn('close-button'),
|
|
339
|
+
className: cn('close-button', [closeButtonClassName]),
|
|
338
340
|
type: "button",
|
|
339
341
|
onClick: handleCloseButtonClick
|
|
340
342
|
}), /*#__PURE__*/React.createElement(CancelIcon, {
|
|
@@ -99,6 +99,7 @@ function _arrayLikeToArray(r, a) {
|
|
|
99
99
|
var Autoplay = null;
|
|
100
100
|
var Pagination = null;
|
|
101
101
|
var EffectFade = null;
|
|
102
|
+
var FreeMode = null;
|
|
102
103
|
var Swiper = null;
|
|
103
104
|
var SwiperSlide = null;
|
|
104
105
|
try {
|
|
@@ -111,6 +112,7 @@ try {
|
|
|
111
112
|
Autoplay = Modules.Autoplay;
|
|
112
113
|
Pagination = Modules.Pagination;
|
|
113
114
|
EffectFade = Modules.EffectFade;
|
|
115
|
+
FreeMode = Modules.FreeMode;
|
|
114
116
|
} catch (e) {
|
|
115
117
|
// eslint-disable-next-line no-console
|
|
116
118
|
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 Carousel component documentation at:\n https://ui.megafon.ru/components/carousel\n ");
|
|
@@ -362,6 +364,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
362
364
|
if (EffectFade) {
|
|
363
365
|
swiperModules.push(EffectFade);
|
|
364
366
|
}
|
|
367
|
+
if (FreeMode) {
|
|
368
|
+
swiperModules.push(FreeMode);
|
|
369
|
+
}
|
|
365
370
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
366
371
|
ref: rootRef,
|
|
367
372
|
className: cn({
|
|
@@ -88,6 +88,8 @@ export interface ISearchProps {
|
|
|
88
88
|
popularItems?: PopularItem[];
|
|
89
89
|
/** Заголовок перед популярными элементами */
|
|
90
90
|
popularTitle?: string;
|
|
91
|
+
/** Ссылка на элемент списка с результатами */
|
|
92
|
+
listRef?: React.Ref<HTMLDivElement>;
|
|
91
93
|
/** Обработчик изменения поля */
|
|
92
94
|
onChange?: (value: string) => void;
|
|
93
95
|
/** Обработчик нажатия на enter */
|
|
@@ -84,6 +84,7 @@ var Search = function Search(_ref) {
|
|
|
84
84
|
_ref$popularItems = _ref.popularItems,
|
|
85
85
|
popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
|
|
86
86
|
popularTitle = _ref.popularTitle,
|
|
87
|
+
listRef = _ref.listRef,
|
|
87
88
|
onChange = _ref.onChange,
|
|
88
89
|
onSubmit = _ref.onSubmit,
|
|
89
90
|
onBlur = _ref.onBlur,
|
|
@@ -305,7 +306,8 @@ var Search = function Search(_ref) {
|
|
|
305
306
|
};
|
|
306
307
|
var renderList = function renderList() {
|
|
307
308
|
return /*#__PURE__*/React.createElement("div", {
|
|
308
|
-
className: cn('list')
|
|
309
|
+
className: cn('list'),
|
|
310
|
+
ref: listRef
|
|
309
311
|
}, /*#__PURE__*/React.createElement("div", {
|
|
310
312
|
className: cn('list-inner')
|
|
311
313
|
}, items.map(function (_ref2, i) {
|
|
@@ -179,24 +179,27 @@ var Select = function Select(_ref) {
|
|
|
179
179
|
});
|
|
180
180
|
isCurrentlyOpened && (onClosed === null || onClosed === void 0 ? void 0 : onClosed());
|
|
181
181
|
};
|
|
182
|
-
var handleSelectItem = function handleSelectItem(
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
182
|
+
var handleSelectItem = function handleSelectItem(index) {
|
|
183
|
+
return function (e) {
|
|
184
|
+
var currentItem = itemsList[index].value;
|
|
185
|
+
var item = itemsList.find(function (elem) {
|
|
186
|
+
return elem.value === currentItem;
|
|
187
|
+
});
|
|
188
|
+
if (!item) {
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
var title = item.title;
|
|
192
|
+
changeSelectState({
|
|
193
|
+
type: UPDATE_SELECT_VALUE,
|
|
194
|
+
inputValue: title,
|
|
195
|
+
comparableInputValue: title,
|
|
196
|
+
items: items,
|
|
197
|
+
hoveredItemIndex: index
|
|
198
|
+
});
|
|
199
|
+
e.persist();
|
|
200
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
|
|
201
|
+
onClosed === null || onClosed === void 0 ? void 0 : onClosed();
|
|
202
|
+
};
|
|
200
203
|
};
|
|
201
204
|
var handleHoverItem = function handleHoverItem(index) {
|
|
202
205
|
return function (e) {
|
|
@@ -251,7 +254,8 @@ var Select = function Select(_ref) {
|
|
|
251
254
|
return false;
|
|
252
255
|
}
|
|
253
256
|
if (e.key === 'Enter' && isOpened) {
|
|
254
|
-
|
|
257
|
+
var _nextIndex2 = hoveredItemIndex - 1;
|
|
258
|
+
handleSelectItem(_nextIndex2)(e);
|
|
255
259
|
return false;
|
|
256
260
|
}
|
|
257
261
|
if (e.key === 'Enter' && !isOpened) {
|
|
@@ -369,8 +373,8 @@ var Select = function Select(_ref) {
|
|
|
369
373
|
paddings: paddings
|
|
370
374
|
}, [classes.listItem]),
|
|
371
375
|
key: "".concat(i, "_").concat(value),
|
|
372
|
-
onClick: handleSelectItem,
|
|
373
|
-
onMouseEnter: handleHoverItem(i),
|
|
376
|
+
onClick: handleSelectItem(i),
|
|
377
|
+
onMouseEnter: !isTouch ? handleHoverItem(i) : undefined,
|
|
374
378
|
ref: getNodeList
|
|
375
379
|
}), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItemTitle, i + 1), {
|
|
376
380
|
className: cn('item-title', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-tabs .swiper-wrapper,.mfui-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-tabs__swiper-wrapper:after,.mfui-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-tabs__swiper-wrapper:after{right:0}.mfui-tabs__swiper-wrapper_beginning:before,.mfui-tabs__swiper-wrapper_end:after{display:none}.mfui-tabs__swiper{background-color:var(--spbSky0);border-radius:12px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-tabs__panel{display:none}.mfui-tabs__panel_current{display:block}.mfui-tabs__underline{background-color:var(--base);border-radius:8px;bottom:0;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-tabs__underline:before{background-color:var(--stcWhite20);content:"";height:100%;
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-tabs .swiper-wrapper,.mfui-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-tabs__swiper-wrapper:after,.mfui-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-tabs__swiper-wrapper:after{right:0}.mfui-tabs__swiper-wrapper_beginning:before,.mfui-tabs__swiper-wrapper_end:after{display:none}.mfui-tabs__swiper{background-color:var(--spbSky0);border-radius:12px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-tabs__panel{display:none}.mfui-tabs__panel_current{display:block}.mfui-tabs__underline{background-color:var(--base);border-radius:8px;bottom:0;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-tabs__underline:before{background-color:var(--stcWhite20);content:"";display:block;height:100%;width:100%}.mfui-tabs__arrow{background-color:var(--content);border-radius:50%;cursor:pointer;display:block;height:16px;opacity:1;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,opacity;transition-property:background-color,opacity;width:16px;z-index:2;fill:var(--base)}@media screen and (max-width:1023px){.mfui-tabs__arrow{display:none}}.mfui-tabs__arrow:hover{background-color:var(--spbSky3)}.mfui-tabs__arrow:active{background-color:var(--buttonDown)}.mfui-tabs__arrow_prev{left:14px}.mfui-tabs__arrow_next{right:14px;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.mfui-tabs__arrow_hide{opacity:0;pointer-events:none}.mfui-tabs__tab-inner{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;position:relative;-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;color:var(--content);cursor:pointer;height:36px;justify-content:center;padding:2px 12px;text-align:center;text-decoration:none;-webkit-transition:color .3s,fill .3s;transition:color .3s,fill .3s;white-space:nowrap;fill:var(--content)}.mfui-tabs__tab-inner:hover{text-decoration:none}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current){opacity:.8}@media screen and (min-width:1024px){.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover{color:var(--content);fill:var(--content)}}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover{opacity:1}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):active{color:var(--buttonDown);fill:var(--buttonDown)}.mfui-tabs__tab-inner_with-icon{padding-left:8px}.mfui-tabs__tab-inner_current{color:var(--content);cursor:auto;fill:var(--content)}.mfui-tabs__tab-icon{height:32px;margin-right:4px;width:32px}.mfui-tabs__tab-icon svg{height:100%;width:100%}.mfui-tabs__tab-bubble{margin-left:6px}.mfui-tabs_size_large .mfui-tabs__swiper{padding:6px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__swiper{padding:8px}}.mfui-tabs_size_large .mfui-tabs__tab-inner{height:48px;padding:8px 24px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__tab-inner{height:56px;padding:12px 40px}}.mfui-tabs_size_large .mfui-tabs__tab-inner_with-icon{padding-left:20px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__tab-inner_with-icon{padding-left:28px}}.mfui-tabs_size_large .mfui-tabs__tab-icon{margin-right:6px}.mfui-tabs_size_large .mfui-tabs__tab-bubble{margin-left:12px}.mfui-tabs_size_large .mfui-tabs__tab-bubble_with-icon{margin-left:6px}.mfui-tabs_auto-width .mfui-tabs__swiper{max-width:100%;width:auto}.mfui-tabs_auto-width .mfui-tabs__slide{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mfui-tabs_auto-width.mfui-tabs_h-align_center .mfui-tabs__swiper-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-tabs_indents .mfui-tabs__swiper-wrapper{margin:0 -48px;padding:0 48px}}@media screen and (max-width:767px){.mfui-tabs_indents .mfui-tabs__swiper-wrapper{margin:0 -16px;padding:0 16px}}.mfui-tabs_sticky .mfui-tabs__swiper-wrapper{background-color:var(--base);left:0;position:fixed;right:0;top:0;z-index:100}.mfui-tabs_tab-color_gray .mfui-tabs__swiper{background-color:var(--spbSky1)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper{background-color:var(--stcBlack20)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current){color:var(--stcWhite);opacity:.8;fill:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover{color:var(--stcWhite);opacity:1;fill:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current{color:var(--stcBlack);fill:var(--stcBlack)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline{background-color:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow{background-color:var(--stcWhite);fill:var(--stcBlack)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow:hover{background-color:var(--stcWhite50)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow:active{background-color:var(--stcBlack0)}
|
|
@@ -116,6 +116,8 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
116
116
|
arrowClassName = _ref$classes2.arrow,
|
|
117
117
|
contentClassName = _ref$classes2.content,
|
|
118
118
|
contentShadowClassName = _ref$classes2.contentShadow,
|
|
119
|
+
closeButtonClassName = _ref$classes2.close,
|
|
120
|
+
buttonClassName = _ref$classes2.button,
|
|
119
121
|
dataAttrs = _ref.dataAttrs,
|
|
120
122
|
onOpen = _ref.onOpen,
|
|
121
123
|
onClose = _ref.onClose,
|
|
@@ -304,7 +306,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
304
306
|
type: "button",
|
|
305
307
|
className: cn('button', {
|
|
306
308
|
margin: hasButtonMargin
|
|
307
|
-
})
|
|
309
|
+
}, [buttonClassName])
|
|
308
310
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
|
|
309
311
|
onClick: onClick
|
|
310
312
|
}), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
|
|
@@ -314,7 +316,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
314
316
|
margin: hasChildrenMargin
|
|
315
317
|
})
|
|
316
318
|
}, children));
|
|
317
|
-
}, [title, text, buttonText, children, dataAttrs, renderedText, onClick]);
|
|
319
|
+
}, [title, text, buttonText, children, dataAttrs, renderedText, onClick, buttonClassName]);
|
|
318
320
|
var template = /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
319
321
|
className: cn({
|
|
320
322
|
theme: theme,
|
|
@@ -343,7 +345,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
343
345
|
},
|
|
344
346
|
className: cn('content', [contentClassName])
|
|
345
347
|
}, hasCloseButton && /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
|
|
346
|
-
className: cn('close-button'),
|
|
348
|
+
className: cn('close-button', [closeButtonClassName]),
|
|
347
349
|
type: "button",
|
|
348
350
|
onClick: handleCloseButtonClick
|
|
349
351
|
}), /*#__PURE__*/React.createElement(CancelIcon, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
]
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"react": "
|
|
44
|
-
"react-dom": "
|
|
43
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
44
|
+
"react-dom": "^17.0.0 || ^18.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@babel/core": "^7.8.6",
|
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
"@babel/preset-env": "^7.8.6",
|
|
51
51
|
"@babel/preset-react": "^7.8.3",
|
|
52
52
|
"@babel/preset-typescript": "^7.8.3",
|
|
53
|
-
"@megafon/ui-icons": "^3.0.
|
|
53
|
+
"@megafon/ui-icons": "^3.0.1",
|
|
54
54
|
"@svgr/core": "^2.4.1",
|
|
55
|
-
"@testing-library/jest-dom": "6.
|
|
56
|
-
"@testing-library/react": "
|
|
57
|
-
"@testing-library/user-event": "14.5.2",
|
|
55
|
+
"@testing-library/jest-dom": "^6.5.0",
|
|
56
|
+
"@testing-library/react": "^16.0.1",
|
|
57
|
+
"@testing-library/user-event": "^14.5.2",
|
|
58
58
|
"@types/jest": "^29.5.12",
|
|
59
59
|
"@types/lodash.debounce": "^4.0.9",
|
|
60
60
|
"@types/lodash.throttle": "^4.1.9",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"@datepicker-react/hooks": "^2.7.0",
|
|
90
90
|
"@dnd-kit/core": "^6.1.0",
|
|
91
91
|
"@dnd-kit/sortable": "^8.0.0",
|
|
92
|
-
"@megafon/ui-helpers": "^3.
|
|
92
|
+
"@megafon/ui-helpers": "^3.1.0",
|
|
93
93
|
"@mona-health/react-input-mask": "^3.0.3",
|
|
94
94
|
"@popperjs/core": "^2.11.8",
|
|
95
95
|
"core-js": "^3.6.4",
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"simplebar-react": "^3.2.5",
|
|
105
105
|
"swiper": "^11.1.1"
|
|
106
106
|
},
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "d81bbdc5ddf49e205f5d0cc6d17709c0fd88005a"
|
|
108
108
|
}
|