@alfalab/core-components-popover 5.2.0 → 5.6.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 (18) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/dist/Component.d.ts +24 -2
  3. package/dist/Component.js +74 -14
  4. package/dist/cssm/Component.d.ts +24 -2
  5. package/dist/cssm/Component.js +73 -13
  6. package/dist/cssm/index.js +3 -0
  7. package/dist/cssm/index.module.css +43 -10
  8. package/dist/esm/Component.d.ts +24 -2
  9. package/dist/esm/Component.js +73 -15
  10. package/dist/esm/index.css +67 -34
  11. package/dist/esm/index.js +3 -0
  12. package/dist/index.css +67 -34
  13. package/dist/index.js +3 -0
  14. package/dist/modern/Component.d.ts +24 -2
  15. package/dist/modern/Component.js +67 -9
  16. package/dist/modern/index.css +67 -34
  17. package/dist/modern/index.js +3 -0
  18. package/package.json +7 -4
package/dist/modern/Component.js CHANGED
@@ -1,11 +1,14 @@
1
- import React, { useState, useCallback, useEffect } from 'react';
1
+ import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { CSSTransition } from 'react-transition-group';
4
4
  import { usePopper } from 'react-popper';
5
+ import maxSize from 'popper-max-size-modifier';
6
+ import mergeRefs from 'react-merge-refs';
7
+ import { ResizeObserver } from 'resize-observer';
5
8
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/modern';
6
9
  import { Portal } from '@alfalab/core-components-portal/dist/modern';
7
10
 
8
- var styles = {"component":"popover__component_1wjdh","inner":"popover__inner_1wjdh","arrow":"popover__arrow_1wjdh","enter":"popover__enter_1wjdh","enterActive":"popover__enterActive_1wjdh","exit":"popover__exit_1wjdh","exitActive":"popover__exitActive_1wjdh"};
11
+ var styles = {"component":"popover__component_bivb4","inner":"popover__inner_bivb4","scrollableContent":"popover__scrollableContent_bivb4","arrow":"popover__arrow_bivb4","enter":"popover__enter_bivb4","enterActive":"popover__enterActive_bivb4","exit":"popover__exit_bivb4","exitActive":"popover__exitActive_bivb4"};
9
12
  require('./index.css')
10
13
 
11
14
  const DEFAULT_TRANSITION = {
@@ -17,10 +20,24 @@ const CSS_TRANSITION_CLASS_NAMES = {
17
20
  exit: styles.exit,
18
21
  exitActive: styles.exitActive,
19
22
  };
20
- const Popover = ({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, offset = [0, 0], withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, }) => {
23
+ const availableHieghtModifier = {
24
+ name: 'availableHeight',
25
+ enabled: true,
26
+ phase: 'beforeWrite',
27
+ requires: ['maxSize'],
28
+ fn({ state: { modifiersData, elements: { popper }, }, }) {
29
+ const { height } = modifiersData.maxSize;
30
+ const content = popper.querySelector(`.${styles.scrollableContent}`);
31
+ if (content && !content.style.maxHeight) {
32
+ content.style.maxHeight = `${height}px`;
33
+ }
34
+ },
35
+ };
36
+ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = [0, 0], 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, }, ref) => {
21
37
  const [referenceElement, setReferenceElement] = useState(anchorElement);
22
38
  const [popperElement, setPopperElement] = useState(null);
23
39
  const [arrowElement, setArrowElement] = useState(null);
40
+ const updatePopperRef = useRef();
24
41
  const getModifiers = useCallback(() => {
25
42
  const modifiers = [{ name: 'offset', options: { offset } }];
26
43
  if (withArrow) {
@@ -29,12 +46,38 @@ const Popover = ({ children, getPortalContainer, transition = DEFAULT_TRANSITION
29
46
  if (preventFlip) {
30
47
  modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
31
48
  }
49
+ if (fallbackPlacements) {
50
+ modifiers.push({ name: 'flip', options: { fallbackPlacements } });
51
+ }
52
+ if (preventOverflow) {
53
+ modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
54
+ }
55
+ if (availableHeight) {
56
+ modifiers.push({ ...maxSize, options: {} });
57
+ modifiers.push({ ...availableHieghtModifier, options: {} });
58
+ }
32
59
  return modifiers;
33
- }, [offset, withArrow, preventFlip, arrowElement]);
60
+ }, [
61
+ offset,
62
+ withArrow,
63
+ preventFlip,
64
+ fallbackPlacements,
65
+ preventOverflow,
66
+ availableHeight,
67
+ arrowElement,
68
+ ]);
34
69
  const { styles: popperStyles, attributes, update: updatePopper } = usePopper(referenceElement, popperElement, {
35
70
  placement: position,
36
71
  modifiers: getModifiers(),
37
72
  });
73
+ if (updatePopper) {
74
+ updatePopperRef.current = updatePopper;
75
+ }
76
+ const updatePopoverWidth = useCallback(() => {
77
+ if (useAnchorWidth && updatePopperRef.current) {
78
+ updatePopperRef.current();
79
+ }
80
+ }, [useAnchorWidth]);
38
81
  useEffect(() => {
39
82
  setReferenceElement(anchorElement);
40
83
  }, [anchorElement]);
@@ -44,21 +87,36 @@ const Popover = ({ children, getPortalContainer, transition = DEFAULT_TRANSITION
44
87
  }
45
88
  }, [updatePopper, arrowElement, children]);
46
89
  useEffect(() => {
47
- if (update && updatePopper) {
90
+ if (update && !update.current && updatePopper) {
48
91
  // eslint-disable-next-line no-param-reassign
49
92
  update.current = updatePopper;
50
93
  }
51
- }, [updatePopper, update]);
94
+ });
95
+ useEffect(() => {
96
+ if (useAnchorWidth) {
97
+ const observer = new ResizeObserver(updatePopoverWidth);
98
+ if (anchorElement) {
99
+ observer.observe(anchorElement);
100
+ }
101
+ return () => {
102
+ observer.disconnect();
103
+ };
104
+ }
105
+ return () => ({});
106
+ }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
52
107
  const renderContent = (computedZIndex, style) => {
53
- return (React.createElement("div", Object.assign({ ref: setPopperElement, style: {
108
+ return (React.createElement("div", Object.assign({ ref: mergeRefs([ref, setPopperElement]),
109
+ // ref={setPopperElement}
110
+ style: {
54
111
  zIndex: computedZIndex,
112
+ width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
55
113
  ...popperStyles.popper,
56
114
  }, "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
57
115
  React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
58
- children,
116
+ React.createElement("div", { className: cn(availableHeight ? styles.scrollableContent : '') }, children),
59
117
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
60
118
  };
61
119
  return (React.createElement(Stack, { value: zIndex }, computedZIndex => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, Object.assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration }))) : (open && renderContent(computedZIndex))))));
62
- };
120
+ });
63
121
 
64
122
  export { Popover };
package/dist/modern/index.css CHANGED
@@ -1,10 +1,10 @@
1
- /* hash: 1wjdh */
1
+ /* hash: 1x604 */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-text-primary: #0b1f35;
5
5
  }
6
6
  :root {
7
- --shadow-l: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24);
7
+ --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
8
8
 
9
9
  /* Hard */
10
10
 
@@ -15,83 +15,116 @@
15
15
  :root {
16
16
  --popover-border-color: transparent;
17
17
  }
18
- .popover__component_1wjdh {
18
+ .popover__component_bivb4 {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_1wjdh {
22
+ .popover__inner_bivb4 {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
- box-shadow: var(--shadow-l);
25
+ box-shadow: var(--shadow-m);
26
26
  border: 1px solid var(--popover-border-color);
27
27
  transition-property: opacity, transform;
28
28
  transition-timing-function: ease-in-out;
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__arrow_1wjdh:after {
32
+ .popover__scrollableContent_bivb4 {
33
+ position: relative;
34
+ z-index: 2;
35
+ overflow-y: auto;
36
+ }
37
+ .popover__arrow_bivb4 {
38
+ z-index: 1;
39
+ }
40
+ .popover__arrow_bivb4:after {
33
41
  content: '';
34
42
  display: block;
35
43
  position: absolute;
36
- width: 10px;
37
- height: 10px;
44
+ width: 12px;
45
+ height: 12px;
38
46
  background-color: var(--color-light-bg-primary);
39
47
  border: 1px solid var(--popover-border-color);
48
+ box-sizing: border-box;
40
49
  transform: rotate(45deg);
41
50
  }
42
- .popover__component_1wjdh[data-popper-placement='left'] .popover__arrow_1wjdh,
43
- .popover__component_1wjdh[data-popper-placement='left-start'] .popover__arrow_1wjdh,
44
- .popover__component_1wjdh[data-popper-placement='left-end'] .popover__arrow_1wjdh {
51
+ .popover__component_bivb4[data-popper-placement='left'] .popover__arrow_bivb4,
52
+ .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4,
53
+ .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4 {
45
54
  right: 5px
46
55
  }
47
- .popover__component_1wjdh[data-popper-placement='left'] .popover__arrow_1wjdh:after, .popover__component_1wjdh[data-popper-placement='left-start'] .popover__arrow_1wjdh:after, .popover__component_1wjdh[data-popper-placement='left-end'] .popover__arrow_1wjdh:after {
48
- top: -4px;
56
+ .popover__component_bivb4[data-popper-placement='left'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4:after {
57
+ top: -6px;
49
58
  border-bottom: none;
50
59
  border-left: none;
51
60
  }
52
- .popover__component_1wjdh[data-popper-placement='right'] .popover__arrow_1wjdh,
53
- .popover__component_1wjdh[data-popper-placement='right-start'] .popover__arrow_1wjdh,
54
- .popover__component_1wjdh[data-popper-placement='right-end'] .popover__arrow_1wjdh {
55
- left: -6px
61
+ .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after {
62
+ top: -7px;
63
+ }
64
+ .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4:after {
65
+ top: -5px;
66
+ }
67
+ .popover__component_bivb4[data-popper-placement='right'] .popover__arrow_bivb4,
68
+ .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4,
69
+ .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4 {
70
+ left: -7px
56
71
  }
57
- .popover__component_1wjdh[data-popper-placement='right'] .popover__arrow_1wjdh:after, .popover__component_1wjdh[data-popper-placement='right-start'] .popover__arrow_1wjdh:after, .popover__component_1wjdh[data-popper-placement='right-end'] .popover__arrow_1wjdh:after {
58
- top: -4px;
72
+ .popover__component_bivb4[data-popper-placement='right'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4:after {
73
+ top: -6px;
59
74
  border-top: none;
60
75
  border-right: none;
61
76
  }
62
- .popover__component_1wjdh[data-popper-placement='top'] .popover__arrow_1wjdh,
63
- .popover__component_1wjdh[data-popper-placement='top-start'] .popover__arrow_1wjdh,
64
- .popover__component_1wjdh[data-popper-placement='top-end'] .popover__arrow_1wjdh {
77
+ .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after {
78
+ top: -7px;
79
+ }
80
+ .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4:after {
81
+ top: -5px;
82
+ }
83
+ .popover__component_bivb4[data-popper-placement='top'] .popover__arrow_bivb4,
84
+ .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4,
85
+ .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4 {
65
86
  bottom: 5px
66
87
  }
67
- .popover__component_1wjdh[data-popper-placement='top'] .popover__arrow_1wjdh:after, .popover__component_1wjdh[data-popper-placement='top-start'] .popover__arrow_1wjdh:after, .popover__component_1wjdh[data-popper-placement='top-end'] .popover__arrow_1wjdh:after {
68
- left: -4px;
88
+ .popover__component_bivb4[data-popper-placement='top'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4:after {
89
+ left: -6px;
69
90
  border-top: none;
70
91
  border-left: none;
71
92
  }
72
- .popover__component_1wjdh[data-popper-placement='bottom'] .popover__arrow_1wjdh,
73
- .popover__component_1wjdh[data-popper-placement='bottom-start'] .popover__arrow_1wjdh,
74
- .popover__component_1wjdh[data-popper-placement='bottom-end'] .popover__arrow_1wjdh {
75
- top: -6px
93
+ .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after {
94
+ left: -17px;
95
+ }
96
+ .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4:after {
97
+ left: 5px;
76
98
  }
77
- .popover__component_1wjdh[data-popper-placement='bottom'] .popover__arrow_1wjdh:after, .popover__component_1wjdh[data-popper-placement='bottom-start'] .popover__arrow_1wjdh:after, .popover__component_1wjdh[data-popper-placement='bottom-end'] .popover__arrow_1wjdh:after {
78
- left: -4px;
99
+ .popover__component_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4,
100
+ .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4,
101
+ .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4 {
102
+ top: -7px
103
+ }
104
+ .popover__component_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
105
+ left: -6px;
79
106
  border-bottom: none;
80
107
  border-right: none;
81
108
  }
82
- .popover__enter_1wjdh .popover__inner_1wjdh {
109
+ .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after {
110
+ left: -17px;
111
+ }
112
+ .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
113
+ left: 5px;
114
+ }
115
+ .popover__enter_bivb4 .popover__inner_bivb4 {
83
116
  opacity: 0;
84
117
  transform: scale(0.98);
85
118
  }
86
- .popover__enterActive_1wjdh .popover__inner_1wjdh {
119
+ .popover__enterActive_bivb4 .popover__inner_bivb4 {
87
120
  opacity: 1;
88
121
  transform: scale(1);
89
122
  }
90
- .popover__exit_1wjdh .popover__inner_1wjdh {
123
+ .popover__exit_bivb4 .popover__inner_bivb4 {
91
124
  opacity: 1;
92
125
  transform: scale(1);
93
126
  }
94
- .popover__exitActive_1wjdh .popover__inner_1wjdh {
127
+ .popover__exitActive_bivb4 .popover__inner_bivb4 {
95
128
  opacity: 0;
96
129
  transform: scale(0.98);
97
130
  }
package/dist/modern/index.js CHANGED
@@ -2,6 +2,9 @@ import 'react';
2
2
  import 'classnames';
3
3
  import 'react-transition-group';
4
4
  import 'react-popper';
5
+ import 'popper-max-size-modifier';
6
+ import 'react-merge-refs';
7
+ import 'resize-observer';
5
8
  import '@alfalab/core-components-stack/dist/modern';
6
9
  import '@alfalab/core-components-portal/dist/modern';
7
10
  export { Popover } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "5.2.0",
3
+ "version": "5.6.0",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -24,11 +24,14 @@
24
24
  "@alfalab/core-components-stack": "^3.0.1",
25
25
  "@popperjs/core": "^2.3.3",
26
26
  "classnames": "^2.2.6",
27
- "react-popper": "^2.2.2",
28
- "react-transition-group": "^4.3.0"
27
+ "popper-max-size-modifier": "^0.2.0",
28
+ "react-merge-refs": "^1.1.0",
29
+ "react-popper": "^2.2.5",
30
+ "react-transition-group": "^4.3.0",
31
+ "resize-observer": "^1.0.0"
29
32
  },
30
33
  "devDependencies": {
31
34
  "@types/react-transition-group": "^4.2.4"
32
35
  },
33
- "gitHead": "a5962a6d4dec0f00d21df6c51d3f9c87694754ed"
36
+ "gitHead": "43754f9b8715fe0bd1c0829be9304d78dd923481"
34
37
  }