@ozen-ui/kit 0.32.2 → 0.33.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.
@@ -134,7 +134,7 @@ var DataListRender = function (inProps, ref) {
134
134
  return (0, react_1.cloneElement)(elementChild, props);
135
135
  });
136
136
  }, [resolvedChildren, selectedState, focused, onClick]);
137
- return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: (0, exports.cnDataList)('', [className]), transitionProps: {
137
+ return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: (0, exports.cnDataList)('', [className]), transitionProps: {
138
138
  classNames: 'DataList-animation',
139
139
  } }, other, { onEntered: function () {
140
140
  onEntered();
@@ -15,11 +15,19 @@
15
15
  box-shadow: inset var(--shadow-outline-focused);
16
16
  }
17
17
 
18
- .DataListOption_disabled {
18
+ .DataListOption_disabled,
19
+ .DataListOption_disabled:hover,
20
+ .DataListOption_disabled:active {
19
21
  cursor: not-allowed;
22
+
23
+ background-color: unset;
20
24
  }
21
25
 
22
26
  .DataListOption_disabled .ListItemText-TextPrimary,
23
- .DataListOption_disabled .ListItemText-TextSecondary {
27
+ .DataListOption_disabled .ListItemText-TextSecondary,
28
+ .DataListOption_disabled:hover .ListItemText-TextPrimary,
29
+ .DataListOption_disabled:hover .ListItemText-TextSecondary,
30
+ .DataListOption_disabled:active .ListItemText-TextPrimary,
31
+ .DataListOption_disabled:active .ListItemText-TextSecondary {
24
32
  color: var(--color-content-tertiary);
25
33
  }
@@ -22,11 +22,11 @@ var PopoverContext_1 = require("./PopoverContext");
22
22
  exports.cnPopover = (0, classname_1.cn)('Popover');
23
23
  exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
24
24
  var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Popover' });
25
- var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _h = props.as, as = _h === void 0 ? constants_1.POPOVER_DEFAULT_TAG : _h, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
26
- var _j = tslib_1.__read((0, react_1.useState)(false), 2), openState = _j[0], setOpenState = _j[1];
25
+ var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? constants_1.POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _k = props.as, as = _k === void 0 ? constants_1.POPOVER_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
26
+ var _l = tslib_1.__read((0, react_1.useState)(false), 2), openState = _l[0], setOpenState = _l[1];
27
27
  var focusedElement = (0, react_1.useRef)(null);
28
28
  var popoverRef = (0, react_1.useRef)(null);
29
- var _k = (0, index_1.usePopoverManager)(popoverRef, 1000, openState), refsClickOutside = _k.refsClickOutside, isTop = _k.isTop;
29
+ var _m = (0, index_1.usePopoverManager)(popoverRef, 1000, openState), refsClickOutside = _m.refsClickOutside, isTop = _m.isTop;
30
30
  // Ловушка фокуса
31
31
  var trapRef = (0, useFocusTrap_1.useFocusTrap)({
32
32
  active: !disableEnforceFocus && isTop,
@@ -72,6 +72,7 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
72
72
  gpuAcceleration: false,
73
73
  },
74
74
  },
75
+ { name: 'preventOverflow', enabled: disablePreventOverflow },
75
76
  // Ширина всплывающего элемента
76
77
  {
77
78
  name: 'sameWidth',
@@ -119,12 +120,12 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
119
120
  };
120
121
  return undefined;
121
122
  }, [anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current, position]);
122
- var _l = tslib_1.__read((0, react_1.useState)(null), 2), popperElement = _l[0], setPopperElement = _l[1];
123
- var _m = (0, react_popper_1.usePopper)(resolveReferenceElement, popperElement, {
123
+ var _o = tslib_1.__read((0, react_1.useState)(null), 2), popperElement = _o[0], setPopperElement = _o[1];
124
+ var _p = (0, react_popper_1.usePopper)(resolveReferenceElement, popperElement, {
124
125
  placement: placement,
125
- strategy: 'fixed',
126
+ strategy: strategy,
126
127
  modifiers: modifiers,
127
- }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
128
+ }), styles = _p.styles, attributes = _p.attributes, update = _p.update;
128
129
  // Передача метода по перерасчету расположения компонента Popover в родительский компонент
129
130
  (0, react_1.useEffect)(function () {
130
131
  setUpdate === null || setUpdate === void 0 ? void 0 : setUpdate(update);
@@ -6,3 +6,5 @@ export declare const POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
6
6
  export declare const POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
7
7
  export declare const POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
8
8
  export declare const POPOVER_DEFAULT_PLACEMENT = "auto";
9
+ export declare const POPOVER_DEFAULT_STRATEGY = "fixed";
10
+ export declare const POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = false;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.POPOVER_DEFAULT_PLACEMENT = exports.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = exports.POPOVER_DEFAULT_OPEN = exports.POPOVER_DEFAULT_ARROW = exports.POPOVER_DEFAULT_TAG = void 0;
3
+ exports.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = exports.POPOVER_DEFAULT_STRATEGY = exports.POPOVER_DEFAULT_PLACEMENT = exports.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = exports.POPOVER_DEFAULT_OPEN = exports.POPOVER_DEFAULT_ARROW = exports.POPOVER_DEFAULT_TAG = void 0;
4
4
  var Paper_1 = require("../Paper");
5
5
  exports.POPOVER_DEFAULT_TAG = Paper_1.Paper;
6
6
  exports.POPOVER_DEFAULT_ARROW = false;
@@ -10,3 +10,5 @@ exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
10
10
  exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
11
11
  exports.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
12
12
  exports.POPOVER_DEFAULT_PLACEMENT = 'auto';
13
+ exports.POPOVER_DEFAULT_STRATEGY = 'fixed';
14
+ exports.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = false;
@@ -11,6 +11,8 @@ export type VirtualElement = {
11
11
  };
12
12
  export declare const popoverPlacementVariant: readonly ["top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end", "auto", "auto-start", "auto-end", "top", "bottom", "right", "left"];
13
13
  export type PopoverPlacementVariant = (typeof popoverPlacementVariant)[number];
14
+ export declare const popoverStrategyVariant: readonly ["absolute", "fixed"];
15
+ export type PopoverStrategyVariant = (typeof popoverStrategyVariant)[number];
14
16
  export type PopoverBaseProps = {
15
17
  /** Признак по которому компонент будет представлен */
16
18
  open?: boolean;
@@ -70,6 +72,10 @@ export type PopoverBaseProps = {
70
72
  setUpdate?: (update: PopperJS.Instance['update'] | null) => void;
71
73
  /** Контейнер для монтирования всплывающего окна */
72
74
  container?: PortalProps['container'];
75
+ /** Стратегия позиционирования */
76
+ strategy?: PopoverStrategyVariant;
77
+ /** Если {true} позволяет смещаться по границе якорного элемента компонента */
78
+ disablePreventOverflow?: boolean;
73
79
  };
74
80
  export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
75
81
  export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.popoverPlacementVariant = void 0;
3
+ exports.popoverStrategyVariant = exports.popoverPlacementVariant = void 0;
4
4
  exports.popoverPlacementVariant = [
5
5
  'top-start',
6
6
  'top-end',
@@ -18,3 +18,4 @@ exports.popoverPlacementVariant = [
18
18
  'right',
19
19
  'left',
20
20
  ];
21
+ exports.popoverStrategyVariant = ['absolute', 'fixed'];
@@ -115,7 +115,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
115
115
  ]);
116
116
  return (react_1.default.createElement(react_1.default.Fragment, null,
117
117
  react_1.default.cloneElement(resolveChildren, composeChildrenProps),
118
- react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
118
+ react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
119
119
  size: size,
120
120
  }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
121
121
  });
@@ -1,9 +1,9 @@
1
1
  import type { RefObject } from 'react';
2
2
  export type UseHoverOptions = {
3
3
  /** Функция обратного вызова на событие перехода курсора на целевой элемент */
4
- onEnter?: (e: PointerEvent) => void;
4
+ onEnter?: (e: MouseEvent) => void;
5
5
  /** Функция обратного вызова на событие покидания курсора с целевого элемента */
6
- onLeave?: (e: PointerEvent) => void;
6
+ onLeave?: (e: MouseEvent) => void;
7
7
  /** Признак активности обработчика события, используется для повышения производительности. */
8
8
  active?: boolean;
9
9
  };
@@ -23,13 +23,13 @@ options) {
23
23
  (0, useEventListener_1.useEventListener)({
24
24
  handler: handleEnter,
25
25
  element: elRef,
26
- eventName: 'pointerenter',
26
+ eventName: 'mouseenter',
27
27
  active: active,
28
28
  });
29
29
  (0, useEventListener_1.useEventListener)({
30
30
  handler: handleLeave,
31
31
  element: elRef,
32
- eventName: 'pointerleave',
32
+ eventName: 'mouseleave',
33
33
  active: active,
34
34
  });
35
35
  return value;
@@ -131,7 +131,7 @@ var DataListRender = function (inProps, ref) {
131
131
  return cloneElement(elementChild, props);
132
132
  });
133
133
  }, [resolvedChildren, selectedState, focused, onClick]);
134
- return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
134
+ return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
135
135
  classNames: 'DataList-animation',
136
136
  } }, other, { onEntered: function () {
137
137
  onEntered();
@@ -15,11 +15,19 @@
15
15
  box-shadow: inset var(--shadow-outline-focused);
16
16
  }
17
17
 
18
- .DataListOption_disabled {
18
+ .DataListOption_disabled,
19
+ .DataListOption_disabled:hover,
20
+ .DataListOption_disabled:active {
19
21
  cursor: not-allowed;
22
+
23
+ background-color: unset;
20
24
  }
21
25
 
22
26
  .DataListOption_disabled .ListItemText-TextPrimary,
23
- .DataListOption_disabled .ListItemText-TextSecondary {
27
+ .DataListOption_disabled .ListItemText-TextSecondary,
28
+ .DataListOption_disabled:hover .ListItemText-TextPrimary,
29
+ .DataListOption_disabled:hover .ListItemText-TextSecondary,
30
+ .DataListOption_disabled:active .ListItemText-TextPrimary,
31
+ .DataListOption_disabled:active .ListItemText-TextSecondary {
24
32
  color: var(--color-content-tertiary);
25
33
  }
@@ -13,17 +13,17 @@ import { isKey } from '../../utils/isKey';
13
13
  import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
14
14
  import { Portal } from '../Portal';
15
15
  import { PopoverArrow } from './components';
16
- import { POPOVER_DEFAULT_TAG, POPOVER_DEFAULT_ARROW, POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE, POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS, POPOVER_DEFAULT_DISABLE_INTERACTIVE, POPOVER_DEFAULT_DISABLE_RETURN_FOCUS, POPOVER_DEFAULT_OPEN, POPOVER_DEFAULT_PLACEMENT, } from './constants';
16
+ import { POPOVER_DEFAULT_TAG, POPOVER_DEFAULT_ARROW, POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE, POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS, POPOVER_DEFAULT_DISABLE_INTERACTIVE, POPOVER_DEFAULT_DISABLE_RETURN_FOCUS, POPOVER_DEFAULT_OPEN, POPOVER_DEFAULT_PLACEMENT, POPOVER_DEFAULT_STRATEGY, POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW, } from './constants';
17
17
  import { usePopoverManager } from './index';
18
18
  import { PopoverContext } from './PopoverContext';
19
19
  export var cnPopover = cn('Popover');
20
20
  export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
21
21
  var props = useThemeProps({ props: inProps, name: 'Popover' });
22
- var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _h = props.as, as = _h === void 0 ? POPOVER_DEFAULT_TAG : _h, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
23
- var _j = __read(useState(false), 2), openState = _j[0], setOpenState = _j[1];
22
+ var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _k = props.as, as = _k === void 0 ? POPOVER_DEFAULT_TAG : _k, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
23
+ var _l = __read(useState(false), 2), openState = _l[0], setOpenState = _l[1];
24
24
  var focusedElement = useRef(null);
25
25
  var popoverRef = useRef(null);
26
- var _k = usePopoverManager(popoverRef, 1000, openState), refsClickOutside = _k.refsClickOutside, isTop = _k.isTop;
26
+ var _m = usePopoverManager(popoverRef, 1000, openState), refsClickOutside = _m.refsClickOutside, isTop = _m.isTop;
27
27
  // Ловушка фокуса
28
28
  var trapRef = useFocusTrap({
29
29
  active: !disableEnforceFocus && isTop,
@@ -69,6 +69,7 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
69
69
  gpuAcceleration: false,
70
70
  },
71
71
  },
72
+ { name: 'preventOverflow', enabled: disablePreventOverflow },
72
73
  // Ширина всплывающего элемента
73
74
  {
74
75
  name: 'sameWidth',
@@ -116,12 +117,12 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
116
117
  };
117
118
  return undefined;
118
119
  }, [anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current, position]);
119
- var _l = __read(useState(null), 2), popperElement = _l[0], setPopperElement = _l[1];
120
- var _m = usePopper(resolveReferenceElement, popperElement, {
120
+ var _o = __read(useState(null), 2), popperElement = _o[0], setPopperElement = _o[1];
121
+ var _p = usePopper(resolveReferenceElement, popperElement, {
121
122
  placement: placement,
122
- strategy: 'fixed',
123
+ strategy: strategy,
123
124
  modifiers: modifiers,
124
- }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
125
+ }), styles = _p.styles, attributes = _p.attributes, update = _p.update;
125
126
  // Передача метода по перерасчету расположения компонента Popover в родительский компонент
126
127
  useEffect(function () {
127
128
  setUpdate === null || setUpdate === void 0 ? void 0 : setUpdate(update);
@@ -6,3 +6,5 @@ export declare const POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
6
6
  export declare const POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
7
7
  export declare const POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
8
8
  export declare const POPOVER_DEFAULT_PLACEMENT = "auto";
9
+ export declare const POPOVER_DEFAULT_STRATEGY = "fixed";
10
+ export declare const POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = false;
@@ -7,3 +7,5 @@ export var POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
7
7
  export var POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
8
8
  export var POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
9
9
  export var POPOVER_DEFAULT_PLACEMENT = 'auto';
10
+ export var POPOVER_DEFAULT_STRATEGY = 'fixed';
11
+ export var POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = false;
@@ -11,6 +11,8 @@ export type VirtualElement = {
11
11
  };
12
12
  export declare const popoverPlacementVariant: readonly ["top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end", "auto", "auto-start", "auto-end", "top", "bottom", "right", "left"];
13
13
  export type PopoverPlacementVariant = (typeof popoverPlacementVariant)[number];
14
+ export declare const popoverStrategyVariant: readonly ["absolute", "fixed"];
15
+ export type PopoverStrategyVariant = (typeof popoverStrategyVariant)[number];
14
16
  export type PopoverBaseProps = {
15
17
  /** Признак по которому компонент будет представлен */
16
18
  open?: boolean;
@@ -70,6 +72,10 @@ export type PopoverBaseProps = {
70
72
  setUpdate?: (update: PopperJS.Instance['update'] | null) => void;
71
73
  /** Контейнер для монтирования всплывающего окна */
72
74
  container?: PortalProps['container'];
75
+ /** Стратегия позиционирования */
76
+ strategy?: PopoverStrategyVariant;
77
+ /** Если {true} позволяет смещаться по границе якорного элемента компонента */
78
+ disablePreventOverflow?: boolean;
73
79
  };
74
80
  export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
75
81
  export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;
@@ -15,3 +15,4 @@ export var popoverPlacementVariant = [
15
15
  'right',
16
16
  'left',
17
17
  ];
18
+ export var popoverStrategyVariant = ['absolute', 'fixed'];
@@ -112,7 +112,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
112
112
  ]);
113
113
  return (React.createElement(React.Fragment, null,
114
114
  React.cloneElement(resolveChildren, composeChildrenProps),
115
- React.createElement(Popover, __assign({ anchorRef: anchorRef, as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
115
+ React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
116
116
  size: size,
117
117
  }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
118
118
  });
@@ -1,9 +1,9 @@
1
1
  import type { RefObject } from 'react';
2
2
  export type UseHoverOptions = {
3
3
  /** Функция обратного вызова на событие перехода курсора на целевой элемент */
4
- onEnter?: (e: PointerEvent) => void;
4
+ onEnter?: (e: MouseEvent) => void;
5
5
  /** Функция обратного вызова на событие покидания курсора с целевого элемента */
6
- onLeave?: (e: PointerEvent) => void;
6
+ onLeave?: (e: MouseEvent) => void;
7
7
  /** Признак активности обработчика события, используется для повышения производительности. */
8
8
  active?: boolean;
9
9
  };
@@ -20,13 +20,13 @@ options) {
20
20
  useEventListener({
21
21
  handler: handleEnter,
22
22
  element: elRef,
23
- eventName: 'pointerenter',
23
+ eventName: 'mouseenter',
24
24
  active: active,
25
25
  });
26
26
  useEventListener({
27
27
  handler: handleLeave,
28
28
  element: elRef,
29
- eventName: 'pointerleave',
29
+ eventName: 'mouseleave',
30
30
  active: active,
31
31
  });
32
32
  return value;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.32.2",
3
+ "version": "0.33.0",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"