@megafon/ui-core 8.13.2 → 8.14.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.d.ts +2 -0
- package/dist/es/components/Carousel/Carousel.js +7 -1
- package/dist/es/components/Tooltip/Tooltip.d.ts +7 -0
- package/dist/es/components/Tooltip/Tooltip.js +8 -1
- package/dist/lib/components/Carousel/Carousel.d.ts +2 -0
- package/dist/lib/components/Carousel/Carousel.js +7 -1
- package/dist/lib/components/Tooltip/Tooltip.d.ts +7 -0
- package/dist/lib/components/Tooltip/Tooltip.js +9 -2
- package/package.json +2 -2
|
@@ -100,6 +100,8 @@ export interface ICarouselProps {
|
|
|
100
100
|
gradient?: boolean;
|
|
101
101
|
/** Цвет градиента */
|
|
102
102
|
gradientColor?: GradientThemeType;
|
|
103
|
+
/** Отключить переключение слайдов при фокусе на дочерних элементах */
|
|
104
|
+
disableChildFocusPropagation?: boolean;
|
|
103
105
|
children?: React.ReactNode;
|
|
104
106
|
}
|
|
105
107
|
declare const Carousel: React.FC<ICarouselProps>;
|
|
@@ -139,7 +139,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
139
139
|
_ref$gradient = _ref.gradient,
|
|
140
140
|
gradient = _ref$gradient === void 0 ? false : _ref$gradient,
|
|
141
141
|
_ref$gradientColor = _ref.gradientColor,
|
|
142
|
-
gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor
|
|
142
|
+
gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor,
|
|
143
|
+
_ref$disableChildFocu = _ref.disableChildFocusPropagation,
|
|
144
|
+
disableChildFocusPropagation = _ref$disableChildFocu === void 0 ? false : _ref$disableChildFocu;
|
|
143
145
|
var _React$useState = React.useState(),
|
|
144
146
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
145
147
|
swiperInstance = _React$useState2[0],
|
|
@@ -252,6 +254,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
252
254
|
var handleSlideFocus = function handleSlideFocus(index) {
|
|
253
255
|
return function (e) {
|
|
254
256
|
var _a;
|
|
257
|
+
if (disableChildFocusPropagation && e.target !== e.currentTarget) {
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
255
260
|
if (loop) {
|
|
256
261
|
// for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
|
|
257
262
|
// because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
|
|
@@ -352,6 +357,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
352
357
|
return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
|
|
353
358
|
key: i,
|
|
354
359
|
className: cn('slide', slideClass),
|
|
360
|
+
tabIndex: disableChildFocusPropagation ? 0 : undefined,
|
|
355
361
|
onFocus: handleSlideFocus(i),
|
|
356
362
|
onMouseDown: disableFocusOnSlideClick
|
|
357
363
|
}), child);
|
|
@@ -44,6 +44,11 @@ export declare const Size: {
|
|
|
44
44
|
readonly BIG: "big";
|
|
45
45
|
};
|
|
46
46
|
type SizeType = (typeof Size)[keyof typeof Size];
|
|
47
|
+
export declare const Strategy: {
|
|
48
|
+
readonly ABSOLUTE: "absolute";
|
|
49
|
+
readonly FIXED: "fixed";
|
|
50
|
+
};
|
|
51
|
+
type StrategyType = (typeof Strategy)[keyof typeof Strategy];
|
|
47
52
|
export interface ITooltipProps {
|
|
48
53
|
/** Цветовая тема */
|
|
49
54
|
colorTheme?: ColorThemeType;
|
|
@@ -81,6 +86,8 @@ export interface ITooltipProps {
|
|
|
81
86
|
isPortal?: boolean;
|
|
82
87
|
/** Рендеринг компонента в указанном селекторе */
|
|
83
88
|
portalSelector?: string;
|
|
89
|
+
/** Определяет позиционирование тултипа */
|
|
90
|
+
strategy?: StrategyType;
|
|
84
91
|
/** Дополнительный класс корневого элемента */
|
|
85
92
|
className?: string;
|
|
86
93
|
/** Дополнительные классы для внутренних элементов */
|
|
@@ -85,6 +85,10 @@ export var Size = {
|
|
|
85
85
|
SMALL: 'small',
|
|
86
86
|
BIG: 'big'
|
|
87
87
|
};
|
|
88
|
+
export var Strategy = {
|
|
89
|
+
ABSOLUTE: 'absolute',
|
|
90
|
+
FIXED: 'fixed'
|
|
91
|
+
};
|
|
88
92
|
export var testIdPrefix = 'Tooltip';
|
|
89
93
|
var cn = cnCreate('mfui-tooltip');
|
|
90
94
|
var cnContainer = cnCreate('mfui-tooltip-container');
|
|
@@ -121,6 +125,8 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
121
125
|
_ref$isPortal = _ref.isPortal,
|
|
122
126
|
isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
|
|
123
127
|
portalSelector = _ref.portalSelector,
|
|
128
|
+
_ref$strategy = _ref.strategy,
|
|
129
|
+
strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
|
|
124
130
|
children = _ref.children,
|
|
125
131
|
_ref$classes = _ref.classes,
|
|
126
132
|
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
@@ -169,6 +175,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
169
175
|
var options = useMemo(function () {
|
|
170
176
|
return {
|
|
171
177
|
placement: placement,
|
|
178
|
+
strategy: strategy,
|
|
172
179
|
modifiers: [{
|
|
173
180
|
name: 'arrow',
|
|
174
181
|
options: {
|
|
@@ -199,7 +206,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
199
206
|
}
|
|
200
207
|
}]
|
|
201
208
|
};
|
|
202
|
-
}, [placement, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
|
|
209
|
+
}, [placement, strategy, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
|
|
203
210
|
var _usePopper = usePopper(currentTarget, popperElement, options),
|
|
204
211
|
styles = _usePopper.styles,
|
|
205
212
|
attributes = _usePopper.attributes,
|
|
@@ -100,6 +100,8 @@ export interface ICarouselProps {
|
|
|
100
100
|
gradient?: boolean;
|
|
101
101
|
/** Цвет градиента */
|
|
102
102
|
gradientColor?: GradientThemeType;
|
|
103
|
+
/** Отключить переключение слайдов при фокусе на дочерних элементах */
|
|
104
|
+
disableChildFocusPropagation?: boolean;
|
|
103
105
|
children?: React.ReactNode;
|
|
104
106
|
}
|
|
105
107
|
declare const Carousel: React.FC<ICarouselProps>;
|
|
@@ -205,7 +205,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
205
205
|
_ref$gradient = _ref.gradient,
|
|
206
206
|
gradient = _ref$gradient === void 0 ? false : _ref$gradient,
|
|
207
207
|
_ref$gradientColor = _ref.gradientColor,
|
|
208
|
-
gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor
|
|
208
|
+
gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor,
|
|
209
|
+
_ref$disableChildFocu = _ref.disableChildFocusPropagation,
|
|
210
|
+
disableChildFocusPropagation = _ref$disableChildFocu === void 0 ? false : _ref$disableChildFocu;
|
|
209
211
|
var _React$useState = React.useState(),
|
|
210
212
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
211
213
|
swiperInstance = _React$useState2[0],
|
|
@@ -318,6 +320,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
318
320
|
var handleSlideFocus = function handleSlideFocus(index) {
|
|
319
321
|
return function (e) {
|
|
320
322
|
var _a;
|
|
323
|
+
if (disableChildFocusPropagation && e.target !== e.currentTarget) {
|
|
324
|
+
return;
|
|
325
|
+
}
|
|
321
326
|
if (loop) {
|
|
322
327
|
// for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
|
|
323
328
|
// because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
|
|
@@ -418,6 +423,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
418
423
|
return /*#__PURE__*/React.createElement(SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
|
|
419
424
|
key: i,
|
|
420
425
|
className: cn('slide', slideClass),
|
|
426
|
+
tabIndex: disableChildFocusPropagation ? 0 : undefined,
|
|
421
427
|
onFocus: handleSlideFocus(i),
|
|
422
428
|
onMouseDown: disableFocusOnSlideClick
|
|
423
429
|
}), child);
|
|
@@ -44,6 +44,11 @@ export declare const Size: {
|
|
|
44
44
|
readonly BIG: "big";
|
|
45
45
|
};
|
|
46
46
|
type SizeType = (typeof Size)[keyof typeof Size];
|
|
47
|
+
export declare const Strategy: {
|
|
48
|
+
readonly ABSOLUTE: "absolute";
|
|
49
|
+
readonly FIXED: "fixed";
|
|
50
|
+
};
|
|
51
|
+
type StrategyType = (typeof Strategy)[keyof typeof Strategy];
|
|
47
52
|
export interface ITooltipProps {
|
|
48
53
|
/** Цветовая тема */
|
|
49
54
|
colorTheme?: ColorThemeType;
|
|
@@ -81,6 +86,8 @@ export interface ITooltipProps {
|
|
|
81
86
|
isPortal?: boolean;
|
|
82
87
|
/** Рендеринг компонента в указанном селекторе */
|
|
83
88
|
portalSelector?: string;
|
|
89
|
+
/** Определяет позиционирование тултипа */
|
|
90
|
+
strategy?: StrategyType;
|
|
84
91
|
/** Дополнительный класс корневого элемента */
|
|
85
92
|
className?: string;
|
|
86
93
|
/** Дополнительные классы для внутренних элементов */
|
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.testIdPrefix = exports["default"] = exports.TriggerEvent = exports.Size = exports.Placement = exports.Paddings = exports.Offset = exports.ColorTheme = void 0;
|
|
7
|
+
exports.testIdPrefix = exports["default"] = exports.TriggerEvent = exports.Strategy = exports.Size = exports.Placement = exports.Paddings = exports.Offset = exports.ColorTheme = void 0;
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
@@ -94,6 +94,10 @@ var Size = exports.Size = {
|
|
|
94
94
|
SMALL: 'small',
|
|
95
95
|
BIG: 'big'
|
|
96
96
|
};
|
|
97
|
+
var Strategy = exports.Strategy = {
|
|
98
|
+
ABSOLUTE: 'absolute',
|
|
99
|
+
FIXED: 'fixed'
|
|
100
|
+
};
|
|
97
101
|
var testIdPrefix = exports.testIdPrefix = 'Tooltip';
|
|
98
102
|
var cn = (0, _uiHelpers.cnCreate)('mfui-tooltip');
|
|
99
103
|
var cnContainer = (0, _uiHelpers.cnCreate)('mfui-tooltip-container');
|
|
@@ -130,6 +134,8 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
130
134
|
_ref$isPortal = _ref.isPortal,
|
|
131
135
|
isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
|
|
132
136
|
portalSelector = _ref.portalSelector,
|
|
137
|
+
_ref$strategy = _ref.strategy,
|
|
138
|
+
strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
|
|
133
139
|
children = _ref.children,
|
|
134
140
|
_ref$classes = _ref.classes,
|
|
135
141
|
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
@@ -178,6 +184,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
178
184
|
var options = useMemo(function () {
|
|
179
185
|
return {
|
|
180
186
|
placement: placement,
|
|
187
|
+
strategy: strategy,
|
|
181
188
|
modifiers: [{
|
|
182
189
|
name: 'arrow',
|
|
183
190
|
options: {
|
|
@@ -208,7 +215,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
208
215
|
}
|
|
209
216
|
}]
|
|
210
217
|
};
|
|
211
|
-
}, [placement, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
|
|
218
|
+
}, [placement, strategy, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
|
|
212
219
|
var _usePopper = (0, _reactPopper.usePopper)(currentTarget, popperElement, options),
|
|
213
220
|
styles = _usePopper.styles,
|
|
214
221
|
attributes = _usePopper.attributes,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.14.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"simplebar-react": "^3.2.5",
|
|
105
105
|
"swiper": "^11.1.1"
|
|
106
106
|
},
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "eff55b645b52da10c43471a9960e5136e7584856"
|
|
108
108
|
}
|