@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.
@@ -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.13.2",
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": "4f9585b11b9adfe177e8e56d6030490f6b35b243"
107
+ "gitHead": "eff55b645b52da10c43471a9960e5136e7584856"
108
108
  }