@alfalab/core-components-popover 8.0.5 → 8.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.
Files changed (23) hide show
  1. package/Component.d.ts +5 -0
  2. package/Component.js +14 -14
  3. package/Component.js.map +1 -1
  4. package/cssm/Component.d.ts +5 -0
  5. package/cssm/Component.js +14 -14
  6. package/cssm/Component.js.map +1 -1
  7. package/esm/Component.d.ts +5 -0
  8. package/esm/Component.js +14 -14
  9. package/esm/Component.js.map +1 -1
  10. package/esm/index.css +25 -25
  11. package/esm/index.module.css.js +1 -1
  12. package/index.css +25 -25
  13. package/index.module.css.js +1 -1
  14. package/modern/Component.d.ts +5 -0
  15. package/modern/Component.js +2 -2
  16. package/modern/Component.js.map +1 -1
  17. package/modern/index.css +25 -25
  18. package/modern/index.module.css.js +1 -1
  19. package/moderncssm/Component.d.ts +5 -0
  20. package/moderncssm/Component.js +2 -2
  21. package/moderncssm/Component.js.map +1 -1
  22. package/package.json +4 -4
  23. package/src/Component.tsx +8 -1
package/esm/index.css CHANGED
@@ -13,11 +13,11 @@
13
13
  :root {
14
14
  --popover-border-color: transparent;
15
15
  }
16
- .popover__component_1spqa {
16
+ .popover__component_1f9g4 {
17
17
  background-color: transparent;
18
18
  color: var(--color-light-text-primary);
19
19
  }
20
- .popover__inner_1spqa {
20
+ .popover__inner_1f9g4 {
21
21
  position: relative;
22
22
  background-color: var(--color-light-modal-bg-primary);
23
23
  box-shadow: var(--shadow-m);
@@ -25,15 +25,15 @@
25
25
  box-sizing: border-box;
26
26
  will-change: transform;
27
27
  }
28
- .popover__scrollableContent_1spqa {
28
+ .popover__scrollableContent_1f9g4 {
29
29
  position: relative;
30
30
  z-index: 2;
31
31
  overflow-y: auto;
32
32
  }
33
- .popover__arrow_1spqa {
33
+ .popover__arrow_1f9g4 {
34
34
  z-index: 1;
35
35
  }
36
- .popover__arrow_1spqa:after {
36
+ .popover__arrow_1f9g4:after {
37
37
  content: '';
38
38
  display: block;
39
39
  position: absolute;
@@ -44,62 +44,62 @@
44
44
  box-sizing: border-box;
45
45
  transform: rotate(45deg);
46
46
  }
47
- .popover__component_1spqa[data-popper-placement='left'] .popover__arrow_1spqa,
48
- .popover__component_1spqa[data-popper-placement='left-start'] .popover__arrow_1spqa,
49
- .popover__component_1spqa[data-popper-placement='left-end'] .popover__arrow_1spqa {
47
+ .popover__component_1f9g4[data-popper-placement='left'] .popover__arrow_1f9g4,
48
+ .popover__component_1f9g4[data-popper-placement='left-start'] .popover__arrow_1f9g4,
49
+ .popover__component_1f9g4[data-popper-placement='left-end'] .popover__arrow_1f9g4 {
50
50
  right: 5px;
51
51
  }
52
- .popover__component_1spqa[data-popper-placement='left'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='left-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='left-end'] .popover__arrow_1spqa:after {
52
+ .popover__component_1f9g4[data-popper-placement='left'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='left-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='left-end'] .popover__arrow_1f9g4:after {
53
53
  top: var(--gap-6-neg);
54
54
  border-bottom: none;
55
55
  border-left: none;
56
56
  }
57
- .popover__component_1spqa[data-popper-placement='right'] .popover__arrow_1spqa,
58
- .popover__component_1spqa[data-popper-placement='right-start'] .popover__arrow_1spqa,
59
- .popover__component_1spqa[data-popper-placement='right-end'] .popover__arrow_1spqa {
57
+ .popover__component_1f9g4[data-popper-placement='right'] .popover__arrow_1f9g4,
58
+ .popover__component_1f9g4[data-popper-placement='right-start'] .popover__arrow_1f9g4,
59
+ .popover__component_1f9g4[data-popper-placement='right-end'] .popover__arrow_1f9g4 {
60
60
  left: -7px;
61
61
  }
62
- .popover__component_1spqa[data-popper-placement='right'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='right-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='right-end'] .popover__arrow_1spqa:after {
62
+ .popover__component_1f9g4[data-popper-placement='right'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='right-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='right-end'] .popover__arrow_1f9g4:after {
63
63
  top: var(--gap-6-neg);
64
64
  border-top: none;
65
65
  border-right: none;
66
66
  }
67
- .popover__component_1spqa[data-popper-placement='top'] .popover__arrow_1spqa,
68
- .popover__component_1spqa[data-popper-placement='top-start'] .popover__arrow_1spqa,
69
- .popover__component_1spqa[data-popper-placement='top-end'] .popover__arrow_1spqa {
67
+ .popover__component_1f9g4[data-popper-placement='top'] .popover__arrow_1f9g4,
68
+ .popover__component_1f9g4[data-popper-placement='top-start'] .popover__arrow_1f9g4,
69
+ .popover__component_1f9g4[data-popper-placement='top-end'] .popover__arrow_1f9g4 {
70
70
  bottom: 5px;
71
71
  }
72
- .popover__component_1spqa[data-popper-placement='top'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='top-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='top-end'] .popover__arrow_1spqa:after {
72
+ .popover__component_1f9g4[data-popper-placement='top'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='top-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='top-end'] .popover__arrow_1f9g4:after {
73
73
  left: var(--gap-6-neg);
74
74
  border-top: none;
75
75
  border-left: none;
76
76
  }
77
- .popover__component_1spqa[data-popper-placement='bottom'] .popover__arrow_1spqa,
78
- .popover__component_1spqa[data-popper-placement='bottom-start'] .popover__arrow_1spqa,
79
- .popover__component_1spqa[data-popper-placement='bottom-end'] .popover__arrow_1spqa {
77
+ .popover__component_1f9g4[data-popper-placement='bottom'] .popover__arrow_1f9g4,
78
+ .popover__component_1f9g4[data-popper-placement='bottom-start'] .popover__arrow_1f9g4,
79
+ .popover__component_1f9g4[data-popper-placement='bottom-end'] .popover__arrow_1f9g4 {
80
80
  top: -7px;
81
81
  }
82
- .popover__component_1spqa[data-popper-placement='bottom'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='bottom-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='bottom-end'] .popover__arrow_1spqa:after {
82
+ .popover__component_1f9g4[data-popper-placement='bottom'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='bottom-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='bottom-end'] .popover__arrow_1f9g4:after {
83
83
  left: var(--gap-6-neg);
84
84
  border-bottom: none;
85
85
  border-right: none;
86
86
  }
87
- .popover__enter_1spqa .popover__inner_1spqa {
87
+ .popover__enter_1f9g4 .popover__inner_1f9g4 {
88
88
  opacity: 0;
89
89
  transform: scale(0.98);
90
90
  }
91
- .popover__enterActive_1spqa .popover__inner_1spqa {
91
+ .popover__enterActive_1f9g4 .popover__inner_1f9g4 {
92
92
  opacity: 1;
93
93
  transform: scale(1);
94
94
  transition-property: opacity, transform;
95
95
  transition-timing-function: ease-in-out;
96
96
  transition-duration: 150ms;
97
97
  }
98
- .popover__exit_1spqa .popover__inner_1spqa {
98
+ .popover__exit_1f9g4 .popover__inner_1f9g4 {
99
99
  opacity: 1;
100
100
  transform: scale(1);
101
101
  }
102
- .popover__exitActive_1spqa .popover__inner_1spqa {
102
+ .popover__exitActive_1f9g4 .popover__inner_1f9g4 {
103
103
  opacity: 0;
104
104
  transform: scale(0.98);
105
105
  transition-property: opacity, transform;
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"popover__component_1spqa","inner":"popover__inner_1spqa","scrollableContent":"popover__scrollableContent_1spqa","arrow":"popover__arrow_1spqa","enter":"popover__enter_1spqa","enterActive":"popover__enterActive_1spqa","exit":"popover__exit_1spqa","exitActive":"popover__exitActive_1spqa"};
3
+ var styles = {"component":"popover__component_1f9g4","inner":"popover__inner_1f9g4","scrollableContent":"popover__scrollableContent_1f9g4","arrow":"popover__arrow_1f9g4","enter":"popover__enter_1f9g4","enterActive":"popover__enterActive_1f9g4","exit":"popover__exit_1f9g4","exitActive":"popover__exitActive_1f9g4"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/index.css CHANGED
@@ -13,11 +13,11 @@
13
13
  :root {
14
14
  --popover-border-color: transparent;
15
15
  }
16
- .popover__component_1spqa {
16
+ .popover__component_1f9g4 {
17
17
  background-color: transparent;
18
18
  color: var(--color-light-text-primary);
19
19
  }
20
- .popover__inner_1spqa {
20
+ .popover__inner_1f9g4 {
21
21
  position: relative;
22
22
  background-color: var(--color-light-modal-bg-primary);
23
23
  box-shadow: var(--shadow-m);
@@ -25,15 +25,15 @@
25
25
  box-sizing: border-box;
26
26
  will-change: transform;
27
27
  }
28
- .popover__scrollableContent_1spqa {
28
+ .popover__scrollableContent_1f9g4 {
29
29
  position: relative;
30
30
  z-index: 2;
31
31
  overflow-y: auto;
32
32
  }
33
- .popover__arrow_1spqa {
33
+ .popover__arrow_1f9g4 {
34
34
  z-index: 1;
35
35
  }
36
- .popover__arrow_1spqa:after {
36
+ .popover__arrow_1f9g4:after {
37
37
  content: '';
38
38
  display: block;
39
39
  position: absolute;
@@ -44,62 +44,62 @@
44
44
  box-sizing: border-box;
45
45
  transform: rotate(45deg);
46
46
  }
47
- .popover__component_1spqa[data-popper-placement='left'] .popover__arrow_1spqa,
48
- .popover__component_1spqa[data-popper-placement='left-start'] .popover__arrow_1spqa,
49
- .popover__component_1spqa[data-popper-placement='left-end'] .popover__arrow_1spqa {
47
+ .popover__component_1f9g4[data-popper-placement='left'] .popover__arrow_1f9g4,
48
+ .popover__component_1f9g4[data-popper-placement='left-start'] .popover__arrow_1f9g4,
49
+ .popover__component_1f9g4[data-popper-placement='left-end'] .popover__arrow_1f9g4 {
50
50
  right: 5px;
51
51
  }
52
- .popover__component_1spqa[data-popper-placement='left'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='left-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='left-end'] .popover__arrow_1spqa:after {
52
+ .popover__component_1f9g4[data-popper-placement='left'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='left-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='left-end'] .popover__arrow_1f9g4:after {
53
53
  top: var(--gap-6-neg);
54
54
  border-bottom: none;
55
55
  border-left: none;
56
56
  }
57
- .popover__component_1spqa[data-popper-placement='right'] .popover__arrow_1spqa,
58
- .popover__component_1spqa[data-popper-placement='right-start'] .popover__arrow_1spqa,
59
- .popover__component_1spqa[data-popper-placement='right-end'] .popover__arrow_1spqa {
57
+ .popover__component_1f9g4[data-popper-placement='right'] .popover__arrow_1f9g4,
58
+ .popover__component_1f9g4[data-popper-placement='right-start'] .popover__arrow_1f9g4,
59
+ .popover__component_1f9g4[data-popper-placement='right-end'] .popover__arrow_1f9g4 {
60
60
  left: -7px;
61
61
  }
62
- .popover__component_1spqa[data-popper-placement='right'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='right-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='right-end'] .popover__arrow_1spqa:after {
62
+ .popover__component_1f9g4[data-popper-placement='right'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='right-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='right-end'] .popover__arrow_1f9g4:after {
63
63
  top: var(--gap-6-neg);
64
64
  border-top: none;
65
65
  border-right: none;
66
66
  }
67
- .popover__component_1spqa[data-popper-placement='top'] .popover__arrow_1spqa,
68
- .popover__component_1spqa[data-popper-placement='top-start'] .popover__arrow_1spqa,
69
- .popover__component_1spqa[data-popper-placement='top-end'] .popover__arrow_1spqa {
67
+ .popover__component_1f9g4[data-popper-placement='top'] .popover__arrow_1f9g4,
68
+ .popover__component_1f9g4[data-popper-placement='top-start'] .popover__arrow_1f9g4,
69
+ .popover__component_1f9g4[data-popper-placement='top-end'] .popover__arrow_1f9g4 {
70
70
  bottom: 5px;
71
71
  }
72
- .popover__component_1spqa[data-popper-placement='top'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='top-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='top-end'] .popover__arrow_1spqa:after {
72
+ .popover__component_1f9g4[data-popper-placement='top'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='top-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='top-end'] .popover__arrow_1f9g4:after {
73
73
  left: var(--gap-6-neg);
74
74
  border-top: none;
75
75
  border-left: none;
76
76
  }
77
- .popover__component_1spqa[data-popper-placement='bottom'] .popover__arrow_1spqa,
78
- .popover__component_1spqa[data-popper-placement='bottom-start'] .popover__arrow_1spqa,
79
- .popover__component_1spqa[data-popper-placement='bottom-end'] .popover__arrow_1spqa {
77
+ .popover__component_1f9g4[data-popper-placement='bottom'] .popover__arrow_1f9g4,
78
+ .popover__component_1f9g4[data-popper-placement='bottom-start'] .popover__arrow_1f9g4,
79
+ .popover__component_1f9g4[data-popper-placement='bottom-end'] .popover__arrow_1f9g4 {
80
80
  top: -7px;
81
81
  }
82
- .popover__component_1spqa[data-popper-placement='bottom'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='bottom-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='bottom-end'] .popover__arrow_1spqa:after {
82
+ .popover__component_1f9g4[data-popper-placement='bottom'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='bottom-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='bottom-end'] .popover__arrow_1f9g4:after {
83
83
  left: var(--gap-6-neg);
84
84
  border-bottom: none;
85
85
  border-right: none;
86
86
  }
87
- .popover__enter_1spqa .popover__inner_1spqa {
87
+ .popover__enter_1f9g4 .popover__inner_1f9g4 {
88
88
  opacity: 0;
89
89
  transform: scale(0.98);
90
90
  }
91
- .popover__enterActive_1spqa .popover__inner_1spqa {
91
+ .popover__enterActive_1f9g4 .popover__inner_1f9g4 {
92
92
  opacity: 1;
93
93
  transform: scale(1);
94
94
  transition-property: opacity, transform;
95
95
  transition-timing-function: ease-in-out;
96
96
  transition-duration: 150ms;
97
97
  }
98
- .popover__exit_1spqa .popover__inner_1spqa {
98
+ .popover__exit_1f9g4 .popover__inner_1f9g4 {
99
99
  opacity: 1;
100
100
  transform: scale(1);
101
101
  }
102
- .popover__exitActive_1spqa .popover__inner_1spqa {
102
+ .popover__exitActive_1f9g4 .popover__inner_1f9g4 {
103
103
  opacity: 0;
104
104
  transform: scale(0.98);
105
105
  transition-property: opacity, transform;
package/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"popover__component_1spqa","inner":"popover__inner_1spqa","scrollableContent":"popover__scrollableContent_1spqa","arrow":"popover__arrow_1spqa","enter":"popover__enter_1spqa","enterActive":"popover__enterActive_1spqa","exit":"popover__exit_1spqa","exitActive":"popover__exitActive_1spqa"};
5
+ var styles = {"component":"popover__component_1f9g4","inner":"popover__inner_1f9g4","scrollableContent":"popover__scrollableContent_1f9g4","arrow":"popover__arrow_1f9g4","enter":"popover__enter_1f9g4","enterActive":"popover__enterActive_1f9g4","exit":"popover__exit_1f9g4","exitActive":"popover__exitActive_1f9g4"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/modern/Component.d.ts CHANGED
@@ -103,6 +103,11 @@ export type PopoverProps = {
103
103
  * @default 24
104
104
  */
105
105
  arrowToEdgeMinDistance?: number;
106
+ /**
107
+ * Свойство по которому устанавливается ширина от родительского элемента
108
+ * @default width
109
+ */
110
+ widthProp?: 'width' | 'minWidth';
106
111
  };
107
112
  export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
108
113
  export {};
package/modern/Component.js CHANGED
@@ -39,7 +39,7 @@ function createGetArrowPadding(minDistanceToEdge) {
39
39
  return 0;
40
40
  };
41
41
  }
42
- const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, scrollableContentClassName, arrowToEdgeMinDistance = 24, }, ref) => {
42
+ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, scrollableContentClassName, arrowToEdgeMinDistance = 24, widthProp = 'width', }, ref) => {
43
43
  const [referenceElement, setReferenceElement] = useState(anchorElement);
44
44
  const [popperElement, setPopperElement] = useState(null);
45
45
  const [arrowElement, setArrowElement] = useState(null);
@@ -127,7 +127,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
127
127
  }, [anchorElement, useAnchorWidth]);
128
128
  const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
129
129
  zIndex: computedZIndex,
130
- width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
130
+ [widthProp]: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
131
131
  ...popperStyles.popper,
132
132
  ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
133
133
  }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
package/modern/Component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type MutableRefObject,\n type ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { usePopper } from 'react-popper';\nimport { CSSTransition } from 'react-transition-group';\nimport { type CSSTransitionProps } from 'react-transition-group/CSSTransition';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport {\n type BasePlacement,\n type Modifier,\n type Obj,\n type VariationPlacement,\n} from '@popperjs/core';\nimport cn from 'classnames';\nimport maxSize from 'popper-max-size-modifier';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { isFn } from '@alfalab/core-components-shared';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport styles from './index.module.css';\n\ntype RefElement = HTMLElement | null;\n\ntype ModifierOptions<T> = T extends Modifier<unknown, infer V> ? V : never;\n\nexport type Position = BasePlacement | VariationPlacement;\n\ntype PopperModifier = {\n name: string;\n options: Obj;\n};\n\nexport type PopoverProps = {\n /**\n * Управление состоянием поповера (открыт/закрыт)\n */\n open: boolean;\n\n /**\n * Элемент, относительного которого появляется поповер\n */\n anchorElement: RefElement;\n\n /**\n * Использовать ширину родительского элемента\n */\n useAnchorWidth?: boolean;\n\n /**\n * Позиционирование поповера\n */\n position?: Position;\n\n /**\n * Запрещает поповеру менять свою позицию.\n * Например, если места снизу недостаточно, то он все равно будет показан снизу\n */\n preventFlip?: boolean;\n\n /**\n * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.\n */\n preventOverflow?: boolean;\n\n /**\n * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента\n */\n availableHeight?: boolean | (() => Element | null | undefined);\n\n /**\n * Если `true`, будет отрисована стрелочка\n */\n withArrow?: boolean;\n\n /**\n * Смещение поповера.\n * Если позиционирование top, bottom, то [x, y].\n * Если позиционирование left, right то [y, x].\n */\n offset?: [number, number];\n\n /**\n * Дополнительный класс для поповера\n */\n popperClassName?: string;\n\n /**\n * Дополнительный класс для стрелочки\n */\n arrowClassName?: string;\n\n /**\n * Функция, возвращающая контейнер, в который будет рендериться поповер\n */\n getPortalContainer?: () => HTMLElement;\n\n /**\n * CSSTransitionProps, прокидываются в компонент CSSTransitionProps.\n */\n transition?: CSSTransitionProps;\n\n /**\n * Выставляет кастомное свойство transition-duration\n */\n transitionDuration?: CSSProperties['transitionDuration'];\n\n /**\n * Рендерит компонент, обернутый в Transition\n */\n withTransition?: boolean;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Хранит функцию, с помощью которой можно обновить положение компонента\n */\n update?: MutableRefObject<(() => void) | undefined>;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,\n * по очереди для каждой позиции из этого списка.\n * Если не передавать, то поповер открывается в противоположном направлении от переданного position.\n */\n fallbackPlacements?: Position[];\n\n /**\n * Контент\n */\n children?: ReactNode;\n\n /**\n * Класс для скролл контейнера\n */\n scrollableContentClassName?: string;\n\n /**\n * Минимальное расстояние стрелки до края поповера\n *\n * @default 24\n */\n arrowToEdgeMinDistance?: number;\n};\n\nconst DEFAULT_TRANSITION: PopoverProps['transition'] = {\n timeout: 150,\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n enter: styles.enter,\n enterActive: styles.enterActive,\n exit: styles.exit,\n exitActive: styles.exitActive,\n};\n\nconst DEFAULT_OFFSET = [0, 0];\n\nfunction createGetArrowPadding(minDistanceToEdge: number) {\n return function getArrowPadding({\n placement,\n }: {\n popper: { height: number; width: number };\n reference: { height: number; width: number };\n placement: Position;\n }) {\n if (placement === 'right-end' || placement === 'left-end') {\n return { top: minDistanceToEdge, right: 0, bottom: 0, left: 0 };\n }\n\n if (placement === 'top-start' || placement === 'bottom-start') {\n return { top: 0, right: minDistanceToEdge, bottom: 0, left: 0 };\n }\n\n if (placement === 'right-start' || placement === 'left-start') {\n return { top: 0, right: 0, bottom: minDistanceToEdge, left: 0 };\n }\n\n if (placement === 'top-end' || placement === 'bottom-end') {\n return { top: 0, right: 0, bottom: 0, left: minDistanceToEdge };\n }\n\n return 0;\n };\n}\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n children,\n getPortalContainer,\n transition = DEFAULT_TRANSITION,\n anchorElement,\n useAnchorWidth,\n offset = DEFAULT_OFFSET,\n withArrow = false,\n withTransition = true,\n position = 'left',\n preventFlip,\n popperClassName,\n arrowClassName,\n className,\n open,\n dataTestId,\n update,\n transitionDuration = `${transition.timeout}ms`,\n zIndex = stackingOrder.POPOVER,\n fallbackPlacements,\n preventOverflow = true,\n availableHeight = false,\n scrollableContentClassName,\n arrowToEdgeMinDistance = 24,\n },\n ref,\n ) => {\n const [referenceElement, setReferenceElement] = useState<RefElement>(anchorElement);\n const [popperElement, setPopperElement] = useState<RefElement>(null);\n const [arrowElement, setArrowElement] = useState<RefElement>(null);\n const [maxSizeOptions, setMaxSizeOptions] = useState<\n Partial<ModifierOptions<typeof maxSize>>\n >(() => ({}));\n\n const updatePopperRef = useRef<() => void>();\n\n const popperRef = useRef<HTMLDivElement>(null);\n const innerRef = useRef<HTMLDivElement>(null);\n\n const popperModifiers = useMemo(() => {\n const modifiers: PopperModifier[] = [{ name: 'offset', options: { offset } }];\n\n if (withArrow) {\n modifiers.push({\n name: 'arrow',\n options: {\n element: arrowElement,\n padding: createGetArrowPadding(arrowToEdgeMinDistance),\n },\n });\n }\n\n if (preventFlip) {\n modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });\n }\n\n if (fallbackPlacements) {\n modifiers.push({ name: 'flip', options: { fallbackPlacements } });\n }\n\n if (preventOverflow) {\n modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });\n }\n\n if (isFn(availableHeight) || availableHeight) {\n modifiers.push({ ...maxSize, options: maxSizeOptions });\n }\n\n return modifiers;\n }, [\n offset,\n withArrow,\n preventFlip,\n fallbackPlacements,\n preventOverflow,\n availableHeight,\n arrowElement,\n arrowToEdgeMinDistance,\n maxSizeOptions,\n ]);\n\n const {\n styles: popperStyles,\n attributes,\n update: updatePopper,\n state,\n } = usePopper(referenceElement, popperElement, {\n placement: position,\n modifiers: popperModifiers,\n });\n\n if (updatePopper) {\n updatePopperRef.current = updatePopper;\n }\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const nextBoundry = isFn(availableHeight)\n ? (availableHeight() ?? undefined)\n : undefined;\n\n if (!(maxSizeOptions.boundary === nextBoundry)) {\n setMaxSizeOptions({ boundary: nextBoundry });\n }\n });\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n setReferenceElement(anchorElement);\n }, [anchorElement]);\n\n useEffect(() => {\n if (updatePopper) {\n updatePopper();\n }\n }, [updatePopper, arrowElement, children]);\n\n useEffect(() => {\n if (update && updatePopper) {\n // eslint-disable-next-line no-param-reassign\n update.current = updatePopper;\n }\n });\n\n useEffect(() => {\n if (useAnchorWidth) {\n const updatePopoverWidth = () => updatePopperRef.current?.();\n const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n const observer = new ResizeObserver(updatePopoverWidth);\n\n if (anchorElement) {\n observer.observe(anchorElement);\n }\n\n return () => {\n observer.disconnect();\n };\n }\n\n return () => ({});\n }, [anchorElement, useAnchorWidth]);\n\n const renderContent = (computedZIndex: number) => (\n <div\n ref={mergeRefs([ref, popperRef, setPopperElement])}\n style={{\n zIndex: computedZIndex,\n width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,\n ...popperStyles.popper,\n ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),\n }}\n data-test-id={dataTestId}\n className={cn(styles.component, className)}\n {...attributes.popper}\n >\n <div className={cn(styles.inner, popperClassName)} ref={innerRef}>\n <div\n className={cn(scrollableContentClassName, {\n [styles.scrollableContent]: isFn(availableHeight) || availableHeight,\n })}\n style={{\n maxHeight:\n isFn(availableHeight) || availableHeight\n ? state?.modifiersData.maxSize?.height\n : undefined,\n }}\n >\n {children}\n </div>\n\n {withArrow && (\n <div\n ref={setArrowElement}\n style={popperStyles.arrow}\n className={cn(styles.arrow, arrowClassName)}\n />\n )}\n </div>\n </div>\n );\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Portal getPortalContainer={getPortalContainer}>\n {withTransition ? (\n <CSSTransition\n unmountOnExit={true}\n classNames={CSS_TRANSITION_CLASS_NAMES}\n nodeRef={popperRef}\n {...transition}\n in={open}\n onEntering={(node: HTMLElement, isAppearing: boolean) => {\n // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.\n if (\n innerRef.current &&\n transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`\n ) {\n innerRef.current.style.setProperty(\n 'transition-duration',\n transitionDuration,\n );\n }\n transition?.onEntering?.(node, isAppearing);\n }}\n >\n {renderContent(computedZIndex)}\n </CSSTransition>\n ) : (\n open && renderContent(computedZIndex)\n )}\n </Portal>\n )}\n </Stack>\n );\n },\n);\n\nPopover.displayName = 'Popover';\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type MutableRefObject,\n type ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { usePopper } from 'react-popper';\nimport { CSSTransition } from 'react-transition-group';\nimport { type CSSTransitionProps } from 'react-transition-group/CSSTransition';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport {\n type BasePlacement,\n type Modifier,\n type Obj,\n type VariationPlacement,\n} from '@popperjs/core';\nimport cn from 'classnames';\nimport maxSize from 'popper-max-size-modifier';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { isFn } from '@alfalab/core-components-shared';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport styles from './index.module.css';\n\ntype RefElement = HTMLElement | null;\n\ntype ModifierOptions<T> = T extends Modifier<unknown, infer V> ? V : never;\n\nexport type Position = BasePlacement | VariationPlacement;\n\ntype PopperModifier = {\n name: string;\n options: Obj;\n};\n\nexport type PopoverProps = {\n /**\n * Управление состоянием поповера (открыт/закрыт)\n */\n open: boolean;\n\n /**\n * Элемент, относительного которого появляется поповер\n */\n anchorElement: RefElement;\n\n /**\n * Использовать ширину родительского элемента\n */\n useAnchorWidth?: boolean;\n\n /**\n * Позиционирование поповера\n */\n position?: Position;\n\n /**\n * Запрещает поповеру менять свою позицию.\n * Например, если места снизу недостаточно, то он все равно будет показан снизу\n */\n preventFlip?: boolean;\n\n /**\n * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.\n */\n preventOverflow?: boolean;\n\n /**\n * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента\n */\n availableHeight?: boolean | (() => Element | null | undefined);\n\n /**\n * Если `true`, будет отрисована стрелочка\n */\n withArrow?: boolean;\n\n /**\n * Смещение поповера.\n * Если позиционирование top, bottom, то [x, y].\n * Если позиционирование left, right то [y, x].\n */\n offset?: [number, number];\n\n /**\n * Дополнительный класс для поповера\n */\n popperClassName?: string;\n\n /**\n * Дополнительный класс для стрелочки\n */\n arrowClassName?: string;\n\n /**\n * Функция, возвращающая контейнер, в который будет рендериться поповер\n */\n getPortalContainer?: () => HTMLElement;\n\n /**\n * CSSTransitionProps, прокидываются в компонент CSSTransitionProps.\n */\n transition?: CSSTransitionProps;\n\n /**\n * Выставляет кастомное свойство transition-duration\n */\n transitionDuration?: CSSProperties['transitionDuration'];\n\n /**\n * Рендерит компонент, обернутый в Transition\n */\n withTransition?: boolean;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Хранит функцию, с помощью которой можно обновить положение компонента\n */\n update?: MutableRefObject<(() => void) | undefined>;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,\n * по очереди для каждой позиции из этого списка.\n * Если не передавать, то поповер открывается в противоположном направлении от переданного position.\n */\n fallbackPlacements?: Position[];\n\n /**\n * Контент\n */\n children?: ReactNode;\n\n /**\n * Класс для скролл контейнера\n */\n scrollableContentClassName?: string;\n\n /**\n * Минимальное расстояние стрелки до края поповера\n *\n * @default 24\n */\n arrowToEdgeMinDistance?: number;\n\n /**\n * Свойство по которому устанавливается ширина от родительского элемента\n * @default width\n */\n widthProp?: 'width' | 'minWidth';\n};\n\nconst DEFAULT_TRANSITION: PopoverProps['transition'] = {\n timeout: 150,\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n enter: styles.enter,\n enterActive: styles.enterActive,\n exit: styles.exit,\n exitActive: styles.exitActive,\n};\n\nconst DEFAULT_OFFSET = [0, 0];\n\nfunction createGetArrowPadding(minDistanceToEdge: number) {\n return function getArrowPadding({\n placement,\n }: {\n popper: { height: number; width: number };\n reference: { height: number; width: number };\n placement: Position;\n }) {\n if (placement === 'right-end' || placement === 'left-end') {\n return { top: minDistanceToEdge, right: 0, bottom: 0, left: 0 };\n }\n\n if (placement === 'top-start' || placement === 'bottom-start') {\n return { top: 0, right: minDistanceToEdge, bottom: 0, left: 0 };\n }\n\n if (placement === 'right-start' || placement === 'left-start') {\n return { top: 0, right: 0, bottom: minDistanceToEdge, left: 0 };\n }\n\n if (placement === 'top-end' || placement === 'bottom-end') {\n return { top: 0, right: 0, bottom: 0, left: minDistanceToEdge };\n }\n\n return 0;\n };\n}\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n children,\n getPortalContainer,\n transition = DEFAULT_TRANSITION,\n anchorElement,\n useAnchorWidth,\n offset = DEFAULT_OFFSET,\n withArrow = false,\n withTransition = true,\n position = 'left',\n preventFlip,\n popperClassName,\n arrowClassName,\n className,\n open,\n dataTestId,\n update,\n transitionDuration = `${transition.timeout}ms`,\n zIndex = stackingOrder.POPOVER,\n fallbackPlacements,\n preventOverflow = true,\n availableHeight = false,\n scrollableContentClassName,\n arrowToEdgeMinDistance = 24,\n widthProp = 'width',\n },\n ref,\n ) => {\n const [referenceElement, setReferenceElement] = useState<RefElement>(anchorElement);\n const [popperElement, setPopperElement] = useState<RefElement>(null);\n const [arrowElement, setArrowElement] = useState<RefElement>(null);\n const [maxSizeOptions, setMaxSizeOptions] = useState<\n Partial<ModifierOptions<typeof maxSize>>\n >(() => ({}));\n\n const updatePopperRef = useRef<() => void>();\n\n const popperRef = useRef<HTMLDivElement>(null);\n const innerRef = useRef<HTMLDivElement>(null);\n\n const popperModifiers = useMemo(() => {\n const modifiers: PopperModifier[] = [{ name: 'offset', options: { offset } }];\n\n if (withArrow) {\n modifiers.push({\n name: 'arrow',\n options: {\n element: arrowElement,\n padding: createGetArrowPadding(arrowToEdgeMinDistance),\n },\n });\n }\n\n if (preventFlip) {\n modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });\n }\n\n if (fallbackPlacements) {\n modifiers.push({ name: 'flip', options: { fallbackPlacements } });\n }\n\n if (preventOverflow) {\n modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });\n }\n\n if (isFn(availableHeight) || availableHeight) {\n modifiers.push({ ...maxSize, options: maxSizeOptions });\n }\n\n return modifiers;\n }, [\n offset,\n withArrow,\n preventFlip,\n fallbackPlacements,\n preventOverflow,\n availableHeight,\n arrowElement,\n arrowToEdgeMinDistance,\n maxSizeOptions,\n ]);\n\n const {\n styles: popperStyles,\n attributes,\n update: updatePopper,\n state,\n } = usePopper(referenceElement, popperElement, {\n placement: position,\n modifiers: popperModifiers,\n });\n\n if (updatePopper) {\n updatePopperRef.current = updatePopper;\n }\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const nextBoundry = isFn(availableHeight)\n ? (availableHeight() ?? undefined)\n : undefined;\n\n if (!(maxSizeOptions.boundary === nextBoundry)) {\n setMaxSizeOptions({ boundary: nextBoundry });\n }\n });\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n setReferenceElement(anchorElement);\n }, [anchorElement]);\n\n useEffect(() => {\n if (updatePopper) {\n updatePopper();\n }\n }, [updatePopper, arrowElement, children]);\n\n useEffect(() => {\n if (update && updatePopper) {\n // eslint-disable-next-line no-param-reassign\n update.current = updatePopper;\n }\n });\n\n useEffect(() => {\n if (useAnchorWidth) {\n const updatePopoverWidth = () => updatePopperRef.current?.();\n const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n const observer = new ResizeObserver(updatePopoverWidth);\n\n if (anchorElement) {\n observer.observe(anchorElement);\n }\n\n return () => {\n observer.disconnect();\n };\n }\n\n return () => ({});\n }, [anchorElement, useAnchorWidth]);\n\n const renderContent = (computedZIndex: number) => (\n <div\n ref={mergeRefs([ref, popperRef, setPopperElement])}\n style={{\n zIndex: computedZIndex,\n [widthProp]: useAnchorWidth ? referenceElement?.offsetWidth : undefined,\n ...popperStyles.popper,\n ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),\n }}\n data-test-id={dataTestId}\n className={cn(styles.component, className)}\n {...attributes.popper}\n >\n <div className={cn(styles.inner, popperClassName)} ref={innerRef}>\n <div\n className={cn(scrollableContentClassName, {\n [styles.scrollableContent]: isFn(availableHeight) || availableHeight,\n })}\n style={{\n maxHeight:\n isFn(availableHeight) || availableHeight\n ? state?.modifiersData.maxSize?.height\n : undefined,\n }}\n >\n {children}\n </div>\n\n {withArrow && (\n <div\n ref={setArrowElement}\n style={popperStyles.arrow}\n className={cn(styles.arrow, arrowClassName)}\n />\n )}\n </div>\n </div>\n );\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Portal getPortalContainer={getPortalContainer}>\n {withTransition ? (\n <CSSTransition\n unmountOnExit={true}\n classNames={CSS_TRANSITION_CLASS_NAMES}\n nodeRef={popperRef}\n {...transition}\n in={open}\n onEntering={(node: HTMLElement, isAppearing: boolean) => {\n // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.\n if (\n innerRef.current &&\n transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`\n ) {\n innerRef.current.style.setProperty(\n 'transition-duration',\n transitionDuration,\n );\n }\n transition?.onEntering?.(node, isAppearing);\n }}\n >\n {renderContent(computedZIndex)}\n </CSSTransition>\n ) : (\n open && renderContent(computedZIndex)\n )}\n </Portal>\n )}\n </Stack>\n );\n },\n);\n\nPopover.displayName = 'Popover';\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":"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"}
package/modern/index.css CHANGED
@@ -13,11 +13,11 @@
13
13
  :root {
14
14
  --popover-border-color: transparent;
15
15
  }
16
- .popover__component_1spqa {
16
+ .popover__component_1f9g4 {
17
17
  background-color: transparent;
18
18
  color: var(--color-light-text-primary);
19
19
  }
20
- .popover__inner_1spqa {
20
+ .popover__inner_1f9g4 {
21
21
  position: relative;
22
22
  background-color: var(--color-light-modal-bg-primary);
23
23
  box-shadow: var(--shadow-m);
@@ -25,15 +25,15 @@
25
25
  box-sizing: border-box;
26
26
  will-change: transform;
27
27
  }
28
- .popover__scrollableContent_1spqa {
28
+ .popover__scrollableContent_1f9g4 {
29
29
  position: relative;
30
30
  z-index: 2;
31
31
  overflow-y: auto;
32
32
  }
33
- .popover__arrow_1spqa {
33
+ .popover__arrow_1f9g4 {
34
34
  z-index: 1;
35
35
  }
36
- .popover__arrow_1spqa:after {
36
+ .popover__arrow_1f9g4:after {
37
37
  content: '';
38
38
  display: block;
39
39
  position: absolute;
@@ -44,62 +44,62 @@
44
44
  box-sizing: border-box;
45
45
  transform: rotate(45deg);
46
46
  }
47
- .popover__component_1spqa[data-popper-placement='left'] .popover__arrow_1spqa,
48
- .popover__component_1spqa[data-popper-placement='left-start'] .popover__arrow_1spqa,
49
- .popover__component_1spqa[data-popper-placement='left-end'] .popover__arrow_1spqa {
47
+ .popover__component_1f9g4[data-popper-placement='left'] .popover__arrow_1f9g4,
48
+ .popover__component_1f9g4[data-popper-placement='left-start'] .popover__arrow_1f9g4,
49
+ .popover__component_1f9g4[data-popper-placement='left-end'] .popover__arrow_1f9g4 {
50
50
  right: 5px;
51
51
  }
52
- .popover__component_1spqa[data-popper-placement='left'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='left-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='left-end'] .popover__arrow_1spqa:after {
52
+ .popover__component_1f9g4[data-popper-placement='left'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='left-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='left-end'] .popover__arrow_1f9g4:after {
53
53
  top: var(--gap-6-neg);
54
54
  border-bottom: none;
55
55
  border-left: none;
56
56
  }
57
- .popover__component_1spqa[data-popper-placement='right'] .popover__arrow_1spqa,
58
- .popover__component_1spqa[data-popper-placement='right-start'] .popover__arrow_1spqa,
59
- .popover__component_1spqa[data-popper-placement='right-end'] .popover__arrow_1spqa {
57
+ .popover__component_1f9g4[data-popper-placement='right'] .popover__arrow_1f9g4,
58
+ .popover__component_1f9g4[data-popper-placement='right-start'] .popover__arrow_1f9g4,
59
+ .popover__component_1f9g4[data-popper-placement='right-end'] .popover__arrow_1f9g4 {
60
60
  left: -7px;
61
61
  }
62
- .popover__component_1spqa[data-popper-placement='right'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='right-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='right-end'] .popover__arrow_1spqa:after {
62
+ .popover__component_1f9g4[data-popper-placement='right'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='right-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='right-end'] .popover__arrow_1f9g4:after {
63
63
  top: var(--gap-6-neg);
64
64
  border-top: none;
65
65
  border-right: none;
66
66
  }
67
- .popover__component_1spqa[data-popper-placement='top'] .popover__arrow_1spqa,
68
- .popover__component_1spqa[data-popper-placement='top-start'] .popover__arrow_1spqa,
69
- .popover__component_1spqa[data-popper-placement='top-end'] .popover__arrow_1spqa {
67
+ .popover__component_1f9g4[data-popper-placement='top'] .popover__arrow_1f9g4,
68
+ .popover__component_1f9g4[data-popper-placement='top-start'] .popover__arrow_1f9g4,
69
+ .popover__component_1f9g4[data-popper-placement='top-end'] .popover__arrow_1f9g4 {
70
70
  bottom: 5px;
71
71
  }
72
- .popover__component_1spqa[data-popper-placement='top'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='top-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='top-end'] .popover__arrow_1spqa:after {
72
+ .popover__component_1f9g4[data-popper-placement='top'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='top-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='top-end'] .popover__arrow_1f9g4:after {
73
73
  left: var(--gap-6-neg);
74
74
  border-top: none;
75
75
  border-left: none;
76
76
  }
77
- .popover__component_1spqa[data-popper-placement='bottom'] .popover__arrow_1spqa,
78
- .popover__component_1spqa[data-popper-placement='bottom-start'] .popover__arrow_1spqa,
79
- .popover__component_1spqa[data-popper-placement='bottom-end'] .popover__arrow_1spqa {
77
+ .popover__component_1f9g4[data-popper-placement='bottom'] .popover__arrow_1f9g4,
78
+ .popover__component_1f9g4[data-popper-placement='bottom-start'] .popover__arrow_1f9g4,
79
+ .popover__component_1f9g4[data-popper-placement='bottom-end'] .popover__arrow_1f9g4 {
80
80
  top: -7px;
81
81
  }
82
- .popover__component_1spqa[data-popper-placement='bottom'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='bottom-start'] .popover__arrow_1spqa:after, .popover__component_1spqa[data-popper-placement='bottom-end'] .popover__arrow_1spqa:after {
82
+ .popover__component_1f9g4[data-popper-placement='bottom'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='bottom-start'] .popover__arrow_1f9g4:after, .popover__component_1f9g4[data-popper-placement='bottom-end'] .popover__arrow_1f9g4:after {
83
83
  left: var(--gap-6-neg);
84
84
  border-bottom: none;
85
85
  border-right: none;
86
86
  }
87
- .popover__enter_1spqa .popover__inner_1spqa {
87
+ .popover__enter_1f9g4 .popover__inner_1f9g4 {
88
88
  opacity: 0;
89
89
  transform: scale(0.98);
90
90
  }
91
- .popover__enterActive_1spqa .popover__inner_1spqa {
91
+ .popover__enterActive_1f9g4 .popover__inner_1f9g4 {
92
92
  opacity: 1;
93
93
  transform: scale(1);
94
94
  transition-property: opacity, transform;
95
95
  transition-timing-function: ease-in-out;
96
96
  transition-duration: 150ms;
97
97
  }
98
- .popover__exit_1spqa .popover__inner_1spqa {
98
+ .popover__exit_1f9g4 .popover__inner_1f9g4 {
99
99
  opacity: 1;
100
100
  transform: scale(1);
101
101
  }
102
- .popover__exitActive_1spqa .popover__inner_1spqa {
102
+ .popover__exitActive_1f9g4 .popover__inner_1f9g4 {
103
103
  opacity: 0;
104
104
  transform: scale(0.98);
105
105
  transition-property: opacity, transform;
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"popover__component_1spqa","inner":"popover__inner_1spqa","scrollableContent":"popover__scrollableContent_1spqa","arrow":"popover__arrow_1spqa","enter":"popover__enter_1spqa","enterActive":"popover__enterActive_1spqa","exit":"popover__exit_1spqa","exitActive":"popover__exitActive_1spqa"};
3
+ const styles = {"component":"popover__component_1f9g4","inner":"popover__inner_1f9g4","scrollableContent":"popover__scrollableContent_1f9g4","arrow":"popover__arrow_1f9g4","enter":"popover__enter_1f9g4","enterActive":"popover__enterActive_1f9g4","exit":"popover__exit_1f9g4","exitActive":"popover__exitActive_1f9g4"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/moderncssm/Component.d.ts CHANGED
@@ -103,6 +103,11 @@ export type PopoverProps = {
103
103
  * @default 24
104
104
  */
105
105
  arrowToEdgeMinDistance?: number;
106
+ /**
107
+ * Свойство по которому устанавливается ширина от родительского элемента
108
+ * @default width
109
+ */
110
+ widthProp?: 'width' | 'minWidth';
106
111
  };
107
112
  export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
108
113
  export {};
package/moderncssm/Component.js CHANGED
@@ -39,7 +39,7 @@ function createGetArrowPadding(minDistanceToEdge) {
39
39
  return 0;
40
40
  };
41
41
  }
42
- const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, scrollableContentClassName, arrowToEdgeMinDistance = 24, }, ref) => {
42
+ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, scrollableContentClassName, arrowToEdgeMinDistance = 24, widthProp = 'width', }, ref) => {
43
43
  const [referenceElement, setReferenceElement] = useState(anchorElement);
44
44
  const [popperElement, setPopperElement] = useState(null);
45
45
  const [arrowElement, setArrowElement] = useState(null);
@@ -127,7 +127,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
127
127
  }, [anchorElement, useAnchorWidth]);
128
128
  const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
129
129
  zIndex: computedZIndex,
130
- width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
130
+ [widthProp]: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
131
131
  ...popperStyles.popper,
132
132
  ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
133
133
  }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },