@ozen-ui/kit 0.49.0 → 0.49.1

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.
Files changed (11) hide show
  1. package/__inner__/cjs/components/Popover/Popover.css +26 -50
  2. package/__inner__/cjs/components/Popover/Popover.js +10 -4
  3. package/__inner__/cjs/components/Popover/types.d.ts +6 -0
  4. package/__inner__/cjs/components/Tooltip/Tooltip.css +4 -0
  5. package/__inner__/cjs/components/Tooltip/Tooltip.js +9 -1
  6. package/__inner__/esm/components/Popover/Popover.css +26 -50
  7. package/__inner__/esm/components/Popover/Popover.js +10 -4
  8. package/__inner__/esm/components/Popover/types.d.ts +6 -0
  9. package/__inner__/esm/components/Tooltip/Tooltip.css +4 -0
  10. package/__inner__/esm/components/Tooltip/Tooltip.js +9 -1
  11. package/package.json +4 -4
package/__inner__/cjs/components/Popover/Popover.css CHANGED
@@ -1,70 +1,46 @@
1
1
  .Popover {
2
- z-index: var(--z-index-popover);
2
+ outline: none;
3
3
  inline-size: auto;
4
4
  box-sizing: border-box;
5
- outline: none;
5
+ z-index: var(--z-index-popover);
6
6
  }
7
7
 
8
8
  .Popover-Arrow {
9
+ --popover-arrow-inset: calc(-1 * (var(--popover-arrow-size) / 2));
9
10
  display: flex;
11
+ align-items: start;
12
+ flex-direction: column;
13
+ inline-size: var(--popover-arrow-size);
14
+ block-size: var(--popover-arrow-size);
10
15
  color: var(--paper-background-color);
11
16
  }
12
17
 
13
- .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs {
14
- inset-block-end: -9px;
15
- }
16
-
17
- .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs svg {
18
- transform: rotate(270deg);
19
- }
20
-
21
- .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s {
22
- inset-block-end: -12px;
23
- }
24
-
25
- .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s svg {
26
- transform: rotate(270deg);
27
- }
28
-
29
- .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs {
30
- inset-block-start: -9px;
31
- }
32
-
33
- .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs svg {
34
- transform: rotate(90deg);
35
- }
36
-
37
- .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s {
38
- inset-block-start: -12px;
18
+ .Popover-Arrow_size_xs {
19
+ --popover-arrow-size: 12px;
39
20
  }
40
21
 
41
- .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s svg {
42
- transform: rotate(90deg);
43
- }
44
-
45
- .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs {
46
- inset-inline-end: -6px;
22
+ .Popover-Arrow_size_s {
23
+ --popover-arrow-size: 16px;
47
24
  }
48
25
 
49
- .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs svg {
50
- transform: rotate(180deg);
51
- }
52
-
53
- .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s {
54
- inset-inline-end: -8px;
55
- }
26
+ .Popover[data-popper-placement^='top'] > .Popover-Arrow {
27
+ transform: rotate(270deg);
28
+ inset-block-end: var(--popover-arrow-inset);
29
+ }
56
30
 
57
- .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s svg {
58
- transform: rotate(180deg);
59
- }
31
+ .Popover[data-popper-placement^='bottom'] > .Popover-Arrow {
32
+ transform: rotate(90deg);
33
+ inset-block-start: var(--popover-arrow-inset);
34
+ }
60
35
 
61
- .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_xs {
62
- inset-inline-start: -6px;
63
- }
36
+ .Popover[data-popper-placement^='left'] > .Popover-Arrow {
37
+ transform: rotate(180deg);
38
+ inset-inline-end: var(--popover-arrow-inset);
39
+ }
64
40
 
65
- .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_s {
66
- inset-inline-start: -8px;
67
- }
41
+ .Popover[data-popper-placement^='right'] > .Popover-Arrow {
42
+ inset-inline-start: var(--popover-arrow-inset);
43
+ }
68
44
 
69
45
  .Popover_disableInteractive {
70
46
  pointer-events: none;
package/__inner__/cjs/components/Popover/Popover.js CHANGED
@@ -22,7 +22,7 @@ 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, _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"]);
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, modifiersProps = props.modifiers, _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", "modifiers", "as"]);
26
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);
@@ -62,7 +62,7 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
62
62
  }
63
63
  onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
64
64
  }, [onExitedProp]);
65
- var modifiers = (0, react_1.useMemo)(function () { return [
65
+ var modifiers = (0, react_1.useMemo)(function () { return tslib_1.__spreadArray([
66
66
  // Вычисление стилей позиционирования
67
67
  {
68
68
  name: 'computeStyles',
@@ -93,14 +93,20 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
93
93
  phase: 'beforeWrite',
94
94
  requires: ['computeStyles'],
95
95
  },
96
+ {
97
+ name: 'arrow',
98
+ options: {
99
+ padding: 12,
100
+ },
101
+ },
96
102
  // Отступы от якорного элемента
97
103
  {
98
104
  name: 'offset',
99
105
  options: {
100
106
  offset: offset,
101
107
  },
102
- },
103
- ]; }, [offset, equalAnchorWidth]);
108
+ }
109
+ ], tslib_1.__read((modifiersProps || [])), false); }, [offset, equalAnchorWidth, modifiersProps]);
104
110
  // Якорный элемент или координаты
105
111
  var resolveReferenceElement = (0, react_1.useMemo)(function () {
106
112
  if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
package/__inner__/cjs/components/Popover/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
2
2
  import type PopperJS from '@popperjs/core';
3
+ import type { PopperProps } from 'react-popper';
3
4
  import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
4
5
  import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
5
6
  import type { PortalProps } from '../Portal';
@@ -76,6 +77,11 @@ export type PopoverBaseProps = {
76
77
  strategy?: PopoverStrategyVariant;
77
78
  /** Если {true} позволяет смещаться по границе якорного элемента компонента */
78
79
  disablePreventOverflow?: boolean;
80
+ /**
81
+ * Модификаторы для popper.js
82
+ * https://popper.js.org/docs/v2/modifiers/#custom-modifiers
83
+ * */
84
+ modifiers?: PopperProps<unknown>['modifiers'];
79
85
  };
80
86
  export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
81
87
  export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;
package/__inner__/cjs/components/Tooltip/Tooltip.css CHANGED
@@ -4,6 +4,8 @@
4
4
  color: var(--color-content-primary);
5
5
  }
6
6
  .Tooltip_size_xs {
7
+ min-inline-size: 28px;
8
+ min-block-size: 28px;
7
9
  padding: var(--spacing-2xs) var(--spacing-xs);
8
10
 
9
11
  font: var(--typography-text-xs-font);
@@ -13,6 +15,8 @@
13
15
  text-transform: var(--typography-text-xs-text_transform, none);
14
16
  }
15
17
  .Tooltip_size_s {
18
+ min-inline-size: 40px;
19
+ min-block-size: 40px;
16
20
  padding: var(--spacing-xs) var(--spacing-s);
17
21
 
18
22
  font: var(--typography-text-s-font);
package/__inner__/cjs/components/Tooltip/Tooltip.js CHANGED
@@ -24,6 +24,14 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
24
24
  var _m = tslib_1.__read((0, react_1.useState)(), 2), hasFocus = _m[0], setHasFocus = _m[1];
25
25
  var _o = tslib_1.__read((0, react_1.useState)(), 2), hasHover = _o[0], setHasHover = _o[1];
26
26
  var anchorRef = (0, react_1.useRef)(null);
27
+ var modifiers = [
28
+ {
29
+ name: 'arrow',
30
+ options: {
31
+ padding: size === 'xs' ? 8 : 12,
32
+ },
33
+ },
34
+ ];
27
35
  var _p = tslib_1.__read((0, useControlled_1.useControlled)({
28
36
  value: openProp,
29
37
  defaultValue: false,
@@ -121,6 +129,6 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
121
129
  react_1.default.cloneElement(resolveChildren, composeChildrenProps),
122
130
  react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
123
131
  size: size,
124
- }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
132
+ }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
125
133
  });
126
134
  exports.Tooltip.displayName = 'Tooltip';
package/__inner__/esm/components/Popover/Popover.css CHANGED
@@ -1,70 +1,46 @@
1
1
  .Popover {
2
- z-index: var(--z-index-popover);
2
+ outline: none;
3
3
  inline-size: auto;
4
4
  box-sizing: border-box;
5
- outline: none;
5
+ z-index: var(--z-index-popover);
6
6
  }
7
7
 
8
8
  .Popover-Arrow {
9
+ --popover-arrow-inset: calc(-1 * (var(--popover-arrow-size) / 2));
9
10
  display: flex;
11
+ align-items: start;
12
+ flex-direction: column;
13
+ inline-size: var(--popover-arrow-size);
14
+ block-size: var(--popover-arrow-size);
10
15
  color: var(--paper-background-color);
11
16
  }
12
17
 
13
- .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs {
14
- inset-block-end: -9px;
15
- }
16
-
17
- .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs svg {
18
- transform: rotate(270deg);
19
- }
20
-
21
- .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s {
22
- inset-block-end: -12px;
23
- }
24
-
25
- .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s svg {
26
- transform: rotate(270deg);
27
- }
28
-
29
- .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs {
30
- inset-block-start: -9px;
31
- }
32
-
33
- .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs svg {
34
- transform: rotate(90deg);
35
- }
36
-
37
- .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s {
38
- inset-block-start: -12px;
18
+ .Popover-Arrow_size_xs {
19
+ --popover-arrow-size: 12px;
39
20
  }
40
21
 
41
- .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s svg {
42
- transform: rotate(90deg);
43
- }
44
-
45
- .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs {
46
- inset-inline-end: -6px;
22
+ .Popover-Arrow_size_s {
23
+ --popover-arrow-size: 16px;
47
24
  }
48
25
 
49
- .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs svg {
50
- transform: rotate(180deg);
51
- }
52
-
53
- .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s {
54
- inset-inline-end: -8px;
55
- }
26
+ .Popover[data-popper-placement^='top'] > .Popover-Arrow {
27
+ transform: rotate(270deg);
28
+ inset-block-end: var(--popover-arrow-inset);
29
+ }
56
30
 
57
- .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s svg {
58
- transform: rotate(180deg);
59
- }
31
+ .Popover[data-popper-placement^='bottom'] > .Popover-Arrow {
32
+ transform: rotate(90deg);
33
+ inset-block-start: var(--popover-arrow-inset);
34
+ }
60
35
 
61
- .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_xs {
62
- inset-inline-start: -6px;
63
- }
36
+ .Popover[data-popper-placement^='left'] > .Popover-Arrow {
37
+ transform: rotate(180deg);
38
+ inset-inline-end: var(--popover-arrow-inset);
39
+ }
64
40
 
65
- .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_s {
66
- inset-inline-start: -8px;
67
- }
41
+ .Popover[data-popper-placement^='right'] > .Popover-Arrow {
42
+ inset-inline-start: var(--popover-arrow-inset);
43
+ }
68
44
 
69
45
  .Popover_disableInteractive {
70
46
  pointer-events: none;
package/__inner__/esm/components/Popover/Popover.js CHANGED
@@ -19,7 +19,7 @@ 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, _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"]);
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, modifiersProps = props.modifiers, _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", "modifiers", "as"]);
23
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);
@@ -59,7 +59,7 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
59
59
  }
60
60
  onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
61
61
  }, [onExitedProp]);
62
- var modifiers = useMemo(function () { return [
62
+ var modifiers = useMemo(function () { return __spreadArray([
63
63
  // Вычисление стилей позиционирования
64
64
  {
65
65
  name: 'computeStyles',
@@ -90,14 +90,20 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
90
90
  phase: 'beforeWrite',
91
91
  requires: ['computeStyles'],
92
92
  },
93
+ {
94
+ name: 'arrow',
95
+ options: {
96
+ padding: 12,
97
+ },
98
+ },
93
99
  // Отступы от якорного элемента
94
100
  {
95
101
  name: 'offset',
96
102
  options: {
97
103
  offset: offset,
98
104
  },
99
- },
100
- ]; }, [offset, equalAnchorWidth]);
105
+ }
106
+ ], __read((modifiersProps || [])), false); }, [offset, equalAnchorWidth, modifiersProps]);
101
107
  // Якорный элемент или координаты
102
108
  var resolveReferenceElement = useMemo(function () {
103
109
  if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
package/__inner__/esm/components/Popover/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
2
2
  import type PopperJS from '@popperjs/core';
3
+ import type { PopperProps } from 'react-popper';
3
4
  import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
4
5
  import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
5
6
  import type { PortalProps } from '../Portal';
@@ -76,6 +77,11 @@ export type PopoverBaseProps = {
76
77
  strategy?: PopoverStrategyVariant;
77
78
  /** Если {true} позволяет смещаться по границе якорного элемента компонента */
78
79
  disablePreventOverflow?: boolean;
80
+ /**
81
+ * Модификаторы для popper.js
82
+ * https://popper.js.org/docs/v2/modifiers/#custom-modifiers
83
+ * */
84
+ modifiers?: PopperProps<unknown>['modifiers'];
79
85
  };
80
86
  export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
81
87
  export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;
package/__inner__/esm/components/Tooltip/Tooltip.css CHANGED
@@ -4,6 +4,8 @@
4
4
  color: var(--color-content-primary);
5
5
  }
6
6
  .Tooltip_size_xs {
7
+ min-inline-size: 28px;
8
+ min-block-size: 28px;
7
9
  padding: var(--spacing-2xs) var(--spacing-xs);
8
10
 
9
11
  font: var(--typography-text-xs-font);
@@ -13,6 +15,8 @@
13
15
  text-transform: var(--typography-text-xs-text_transform, none);
14
16
  }
15
17
  .Tooltip_size_s {
18
+ min-inline-size: 40px;
19
+ min-block-size: 40px;
16
20
  padding: var(--spacing-xs) var(--spacing-s);
17
21
 
18
22
  font: var(--typography-text-s-font);
package/__inner__/esm/components/Tooltip/Tooltip.js CHANGED
@@ -21,6 +21,14 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
21
21
  var _m = __read(useState(), 2), hasFocus = _m[0], setHasFocus = _m[1];
22
22
  var _o = __read(useState(), 2), hasHover = _o[0], setHasHover = _o[1];
23
23
  var anchorRef = useRef(null);
24
+ var modifiers = [
25
+ {
26
+ name: 'arrow',
27
+ options: {
28
+ padding: size === 'xs' ? 8 : 12,
29
+ },
30
+ },
31
+ ];
24
32
  var _p = __read(useControlled({
25
33
  value: openProp,
26
34
  defaultValue: false,
@@ -118,6 +126,6 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
118
126
  React.cloneElement(resolveChildren, composeChildrenProps),
119
127
  React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
120
128
  size: size,
121
- }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
129
+ }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
122
130
  });
123
131
  Tooltip.displayName = 'Tooltip';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.49.0",
3
+ "version": "0.49.1",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"
@@ -28,9 +28,9 @@
28
28
  "react-popper": "^2.3.0",
29
29
  "react-transition-group": "^4.4.5",
30
30
  "tslib": "^2.6.2",
31
- "@ozen-ui/fonts": "0.49.0",
32
- "@ozen-ui/icons": "0.49.0",
33
- "@ozen-ui/logger": "0.49.0"
31
+ "@ozen-ui/logger": "0.49.1",
32
+ "@ozen-ui/fonts": "0.49.1",
33
+ "@ozen-ui/icons": "0.49.1"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=17.0.2 <19.0.0",