@dhis2-ui/popper 8.1.11 → 8.2.2

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 (14) hide show
  1. package/build/cjs/features/accepts_different_reference_types/index.js +4 -2
  2. package/build/cjs/features/positions/index.js +20 -10
  3. package/build/cjs/index.js +4 -4
  4. package/build/cjs/modifiers.js +57 -49
  5. package/build/cjs/popper.js +13 -12
  6. package/build/cjs/popper.stories.e2e.js +5 -4
  7. package/build/cjs/popper.stories.js +3 -13
  8. package/build/es/features/accepts_different_reference_types/index.js +4 -2
  9. package/build/es/features/positions/index.js +20 -10
  10. package/build/es/modifiers.js +56 -48
  11. package/build/es/popper.js +13 -12
  12. package/build/es/popper.stories.e2e.js +4 -3
  13. package/build/es/popper.stories.js +2 -12
  14. package/package.json +2 -2
package/build/cjs/features/accepts_different_reference_types/index.js CHANGED
@@ -12,14 +12,16 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
12
12
  cy.visitStory('Popper', 'Virtual Element As Reference');
13
13
  });
14
14
  (0, _steps.Then)('the left of the popper is aligned with the left of the reference element', () => {
15
- cy.all(() => cy.get('button'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(([$reference, $popper]) => {
15
+ cy.all(() => cy.get('button'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref => {
16
+ let [$reference, $popper] = _ref;
16
17
  const referenceRect = $reference.get(0).getBoundingClientRect();
17
18
  const popperRect = $popper.get(0).getBoundingClientRect();
18
19
  expect(referenceRect.left).to.equal(popperRect.left);
19
20
  });
20
21
  });
21
22
  (0, _steps.Then)('the top of the popper is adjacent to the bottom of the reference element', () => {
22
- cy.all(() => cy.get('button'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(([$reference, $popper]) => {
23
+ cy.all(() => cy.get('button'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref2 => {
24
+ let [$reference, $popper] = _ref2;
23
25
  const referenceRect = $reference.get(0).getBoundingClientRect();
24
26
  const popperRect = $popper.get(0).getBoundingClientRect();
25
27
  expect(referenceRect.bottom).to.equal(popperRect.top);
package/build/cjs/features/positions/index.js CHANGED
@@ -42,38 +42,44 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
42
42
  // top
43
43
 
44
44
  (0, _steps.Then)('the bottom of the popper is adjacent to the top of the reference element', () => {
45
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
45
+ getRefAndPopperPositions().should(_ref => {
46
+ let [refPos, popperPos] = _ref;
46
47
  expect(refPos.top).to.equal(popperPos.bottom);
47
48
  });
48
49
  }); // right
49
50
 
50
51
  (0, _steps.Then)('the left of the popper is adjacent to the right of the reference element', () => {
51
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
52
+ getRefAndPopperPositions().should(_ref2 => {
53
+ let [refPos, popperPos] = _ref2;
52
54
  expect(refPos.right).to.equal(popperPos.left);
53
55
  });
54
56
  }); // bottom
55
57
 
56
58
  (0, _steps.Then)('the top of the popper is adjacent to the bottom of the reference element', () => {
57
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
59
+ getRefAndPopperPositions().should(_ref3 => {
60
+ let [refPos, popperPos] = _ref3;
58
61
  expect(refPos.bottom).to.equal(popperPos.top);
59
62
  });
60
63
  }); // left
61
64
 
62
65
  (0, _steps.Then)('the right of the popper is adjacent to the left of the reference element', () => {
63
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
66
+ getRefAndPopperPositions().should(_ref4 => {
67
+ let [refPos, popperPos] = _ref4;
64
68
  expect(refPos.left).to.equal(popperPos.right);
65
69
  });
66
70
  }); // Horizontal alignments
67
71
  // *-start
68
72
 
69
73
  (0, _steps.Then)('it is horizontally left aligned with the reference element', () => {
70
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
74
+ getRefAndPopperPositions().should(_ref5 => {
75
+ let [refPos, popperPos] = _ref5;
71
76
  expect(refPos.left).to.equal(popperPos.left);
72
77
  });
73
78
  }); // * (no suffix)
74
79
 
75
80
  (0, _steps.Then)('it is horizontally center aligned with the reference element', () => {
76
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
81
+ getRefAndPopperPositions().should(_ref6 => {
82
+ let [refPos, popperPos] = _ref6;
77
83
  const refCenterX = refPos.left + refPos.width / 2;
78
84
  const popperCenterX = popperPos.left + popperPos.width / 2;
79
85
  expect(refCenterX).to.equal(popperCenterX);
@@ -81,20 +87,23 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
81
87
  }); // *-end
82
88
 
83
89
  (0, _steps.Then)('it is horizontally right aligned with the reference element', () => {
84
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
90
+ getRefAndPopperPositions().should(_ref7 => {
91
+ let [refPos, popperPos] = _ref7;
85
92
  expect(refPos.right).to.equal(popperPos.right);
86
93
  });
87
94
  }); // Vertical alignments
88
95
  // *-start
89
96
 
90
97
  (0, _steps.Then)('it is vertically top aligned with the reference element', () => {
91
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
98
+ getRefAndPopperPositions().should(_ref8 => {
99
+ let [refPos, popperPos] = _ref8;
92
100
  expect(refPos.top).to.equal(popperPos.top);
93
101
  });
94
102
  }); // * (no suffix)
95
103
 
96
104
  (0, _steps.Then)('it is vertically center aligned with the reference element', () => {
97
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
105
+ getRefAndPopperPositions().should(_ref9 => {
106
+ let [refPos, popperPos] = _ref9;
98
107
  const refCenterY = refPos.top + refPos.height / 2;
99
108
  const popperCenterY = popperPos.top + popperPos.height / 2;
100
109
  expect(refCenterY).to.equal(popperCenterY);
@@ -102,7 +111,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
102
111
  }); // *-end
103
112
 
104
113
  (0, _steps.Then)('it is vertically bottom aligned with the reference element', () => {
105
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
114
+ getRefAndPopperPositions().should(_ref10 => {
115
+ let [refPos, popperPos] = _ref10;
106
116
  expect(refPos.bottom).to.equal(popperPos.bottom);
107
117
  });
108
118
  }); // helper
package/build/cjs/index.js CHANGED
@@ -9,16 +9,16 @@ Object.defineProperty(exports, "Popper", {
9
9
  return _popper.Popper;
10
10
  }
11
11
  });
12
- Object.defineProperty(exports, "getReferenceElement", {
12
+ Object.defineProperty(exports, "getBaseModifiers", {
13
13
  enumerable: true,
14
14
  get: function () {
15
- return _getReferenceElement.getReferenceElement;
15
+ return _modifiers.getBaseModifiers;
16
16
  }
17
17
  });
18
- Object.defineProperty(exports, "getBaseModifiers", {
18
+ Object.defineProperty(exports, "getReferenceElement", {
19
19
  enumerable: true,
20
20
  get: function () {
21
- return _modifiers.getBaseModifiers;
21
+ return _getReferenceElement.getReferenceElement;
22
22
  }
23
23
  });
24
24
  Object.defineProperty(exports, "usePopper", {
package/build/cjs/modifiers.js CHANGED
@@ -3,21 +3,22 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.resizeObserver = exports.deduplicateModifiers = exports.getBaseModifiers = void 0;
6
+ exports.resizeObserver = exports.getBaseModifiers = exports.deduplicateModifiers = void 0;
7
7
 
8
8
  var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
9
9
 
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
11
 
12
- const attachResizeObservers = ({
13
- state: {
14
- elements
15
- },
16
- options,
17
- instance: {
18
- update
19
- }
20
- }) => {
12
+ const attachResizeObservers = _ref => {
13
+ let {
14
+ state: {
15
+ elements
16
+ },
17
+ options,
18
+ instance: {
19
+ update
20
+ }
21
+ } = _ref;
21
22
  const observers = Object.keys(options).reduce((acc, elementKey) => {
22
23
  if (options[elementKey]) {
23
24
  const observer = new _resizeObserverPolyfill.default(update);
@@ -34,33 +35,36 @@ const attachResizeObservers = ({
34
35
  };
35
36
  };
36
37
 
37
- const getBaseModifiers = ({
38
- observePopperResize,
39
- observeReferenceResize
40
- }) => [{
41
- name: 'preventOverflow',
42
- options: {
43
- altAxis: true,
44
- rootBoundary: 'document',
45
- boundary: document.body
46
- }
47
- }, {
48
- name: 'flip',
49
- options: {
50
- rootBoundary: 'document',
51
- boundary: document.body
52
- }
53
- }, {
54
- name: 'resizeObserver',
55
- enabled: true,
56
- phase: 'write',
57
- fn: () => {},
58
- effect: attachResizeObservers,
59
- options: {
60
- popper: observePopperResize,
61
- reference: observeReferenceResize
62
- }
63
- }];
38
+ const getBaseModifiers = _ref2 => {
39
+ let {
40
+ observePopperResize,
41
+ observeReferenceResize
42
+ } = _ref2;
43
+ return [{
44
+ name: 'preventOverflow',
45
+ options: {
46
+ altAxis: true,
47
+ rootBoundary: 'document',
48
+ boundary: document.body
49
+ }
50
+ }, {
51
+ name: 'flip',
52
+ options: {
53
+ rootBoundary: 'document',
54
+ boundary: document.body
55
+ }
56
+ }, {
57
+ name: 'resizeObserver',
58
+ enabled: true,
59
+ phase: 'write',
60
+ fn: () => {},
61
+ effect: attachResizeObservers,
62
+ options: {
63
+ popper: observePopperResize,
64
+ reference: observeReferenceResize
65
+ }
66
+ }];
67
+ };
64
68
 
65
69
  exports.getBaseModifiers = getBaseModifiers;
66
70
 
@@ -68,9 +72,12 @@ const deduplicateModifiers = (modifiers, resizeObservers) => {
68
72
  // Deduplicate modifiers from props and baseModifiers,
69
73
  // when duplicates are encountered (by name), use the
70
74
  // modifier from props so each Popper can be fully custom
71
- return getBaseModifiers(resizeObservers).filter(({
72
- name
73
- }) => !modifiers.some(m => m.name === name)).concat(modifiers);
75
+ return getBaseModifiers(resizeObservers).filter(_ref3 => {
76
+ let {
77
+ name
78
+ } = _ref3;
79
+ return !modifiers.some(m => m.name === name);
80
+ }).concat(modifiers);
74
81
  };
75
82
 
76
83
  exports.deduplicateModifiers = deduplicateModifiers;
@@ -79,15 +86,16 @@ const resizeObserver = {
79
86
  enabled: true,
80
87
  phase: 'write',
81
88
  fn: () => {},
82
- effect: ({
83
- state: {
84
- elements
85
- },
86
- options,
87
- instance: {
88
- update
89
- }
90
- }) => {
89
+ effect: _ref4 => {
90
+ let {
91
+ state: {
92
+ elements
93
+ },
94
+ options,
95
+ instance: {
96
+ update
97
+ }
98
+ } = _ref4;
91
99
  const observers = Object.keys(options).reduce((acc, elementKey) => {
92
100
  if (options[elementKey]) {
93
101
  const observer = new _resizeObserverPolyfill.default(update);
package/build/cjs/popper.js CHANGED
@@ -25,18 +25,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
25
25
 
26
26
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
27
 
28
- const Popper = ({
29
- children,
30
- className,
31
- dataTest,
32
- modifiers,
33
- observePopperResize,
34
- observeReferenceResize,
35
- onFirstUpdate,
36
- placement,
37
- reference,
38
- strategy
39
- }) => {
28
+ const Popper = _ref => {
29
+ let {
30
+ children,
31
+ className,
32
+ dataTest,
33
+ modifiers,
34
+ observePopperResize,
35
+ observeReferenceResize,
36
+ onFirstUpdate,
37
+ placement,
38
+ reference,
39
+ strategy
40
+ } = _ref;
40
41
  const referenceElement = (0, _getReferenceElement.getReferenceElement)(reference);
41
42
  const [popperElement, setPopperElement] = (0, _react.useState)(null);
42
43
  const deduplicatedModifiers = (0, _react.useMemo)(() => (0, _modifiers.deduplicateModifiers)(modifiers, {
package/build/cjs/popper.stories.e2e.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.VirtualElementAsReference = exports.DOMNodeAsReference = exports.ReactRefAsReference = exports.LeftEnd = exports.LeftStart = exports.Left = exports.RightEnd = exports.RightStart = exports.Right = exports.BottomEnd = exports.BottomStart = exports.Bottom = exports.TopEnd = exports.TopStart = exports.Top = exports.default = void 0;
6
+ exports.default = exports.VirtualElementAsReference = exports.TopStart = exports.TopEnd = exports.Top = exports.RightStart = exports.RightEnd = exports.Right = exports.ReactRefAsReference = exports.LeftStart = exports.LeftEnd = exports.Left = exports.DOMNodeAsReference = exports.BottomStart = exports.BottomEnd = exports.Bottom = void 0;
7
7
 
8
8
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
@@ -19,9 +19,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
19
19
 
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
 
22
- const PopperPlacement = ({
23
- placement
24
- }) => {
22
+ const PopperPlacement = _ref => {
23
+ let {
24
+ placement
25
+ } = _ref;
25
26
  const ref = (0, _react.useRef)();
26
27
  return /*#__PURE__*/_react.default.createElement("div", {
27
28
  className: "jsx-305551169" + " " + "box"
package/build/cjs/popper.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.VirtualElementRef = exports.ElementRef = exports.LeftEnd = exports.LeftStart = exports.Left = exports.RightEnd = exports.RightStart = exports.Right = exports.BottomEnd = exports.BottomStart = exports.Bottom = exports.TopEnd = exports.TopStart = exports.Top = exports.default = void 0;
6
+ exports.default = exports.VirtualElementRef = exports.TopStart = exports.TopEnd = exports.Top = exports.RightStart = exports.RightEnd = exports.Right = exports.LeftStart = exports.LeftEnd = exports.Left = exports.ElementRef = exports.BottomStart = exports.BottomEnd = exports.Bottom = void 0;
7
7
 
8
8
  var _uiConstants = require("@dhis2/ui-constants");
9
9
 
@@ -17,19 +17,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
17
17
 
18
18
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
19
19
 
20
- const description = `
21
- A tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.
22
-
23
- Since it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.
24
-
25
- \`\`\`js
26
- import { Popper } from '@dhis2/ui'
27
- \`\`\`
28
-
29
- _**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._
30
- `;
20
+ const description = "\nA tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.\n\nSince it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.\n\n```js\nimport { Popper } from '@dhis2/ui'\n```\n\n_**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._\n";
31
21
  var _default = {
32
- title: 'Helpers/Popper',
22
+ title: 'Popper',
33
23
  component: _popper.Popper,
34
24
  parameters: {
35
25
  docs: {
package/build/es/features/accepts_different_reference_types/index.js CHANGED
@@ -9,14 +9,16 @@ Given('a Popper with placement bottom-start has a virtual element as its referen
9
9
  cy.visitStory('Popper', 'Virtual Element As Reference');
10
10
  });
11
11
  Then('the left of the popper is aligned with the left of the reference element', () => {
12
- cy.all(() => cy.get('button'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(([$reference, $popper]) => {
12
+ cy.all(() => cy.get('button'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref => {
13
+ let [$reference, $popper] = _ref;
13
14
  const referenceRect = $reference.get(0).getBoundingClientRect();
14
15
  const popperRect = $popper.get(0).getBoundingClientRect();
15
16
  expect(referenceRect.left).to.equal(popperRect.left);
16
17
  });
17
18
  });
18
19
  Then('the top of the popper is adjacent to the bottom of the reference element', () => {
19
- cy.all(() => cy.get('button'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(([$reference, $popper]) => {
20
+ cy.all(() => cy.get('button'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref2 => {
21
+ let [$reference, $popper] = _ref2;
20
22
  const referenceRect = $reference.get(0).getBoundingClientRect();
21
23
  const popperRect = $popper.get(0).getBoundingClientRect();
22
24
  expect(referenceRect.bottom).to.equal(popperRect.top);
package/build/es/features/positions/index.js CHANGED
@@ -39,38 +39,44 @@ Given('the Popper is rendered with placement left-end', () => {
39
39
  // top
40
40
 
41
41
  Then('the bottom of the popper is adjacent to the top of the reference element', () => {
42
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
42
+ getRefAndPopperPositions().should(_ref => {
43
+ let [refPos, popperPos] = _ref;
43
44
  expect(refPos.top).to.equal(popperPos.bottom);
44
45
  });
45
46
  }); // right
46
47
 
47
48
  Then('the left of the popper is adjacent to the right of the reference element', () => {
48
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
49
+ getRefAndPopperPositions().should(_ref2 => {
50
+ let [refPos, popperPos] = _ref2;
49
51
  expect(refPos.right).to.equal(popperPos.left);
50
52
  });
51
53
  }); // bottom
52
54
 
53
55
  Then('the top of the popper is adjacent to the bottom of the reference element', () => {
54
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
56
+ getRefAndPopperPositions().should(_ref3 => {
57
+ let [refPos, popperPos] = _ref3;
55
58
  expect(refPos.bottom).to.equal(popperPos.top);
56
59
  });
57
60
  }); // left
58
61
 
59
62
  Then('the right of the popper is adjacent to the left of the reference element', () => {
60
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
63
+ getRefAndPopperPositions().should(_ref4 => {
64
+ let [refPos, popperPos] = _ref4;
61
65
  expect(refPos.left).to.equal(popperPos.right);
62
66
  });
63
67
  }); // Horizontal alignments
64
68
  // *-start
65
69
 
66
70
  Then('it is horizontally left aligned with the reference element', () => {
67
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
71
+ getRefAndPopperPositions().should(_ref5 => {
72
+ let [refPos, popperPos] = _ref5;
68
73
  expect(refPos.left).to.equal(popperPos.left);
69
74
  });
70
75
  }); // * (no suffix)
71
76
 
72
77
  Then('it is horizontally center aligned with the reference element', () => {
73
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
78
+ getRefAndPopperPositions().should(_ref6 => {
79
+ let [refPos, popperPos] = _ref6;
74
80
  const refCenterX = refPos.left + refPos.width / 2;
75
81
  const popperCenterX = popperPos.left + popperPos.width / 2;
76
82
  expect(refCenterX).to.equal(popperCenterX);
@@ -78,20 +84,23 @@ Then('it is horizontally center aligned with the reference element', () => {
78
84
  }); // *-end
79
85
 
80
86
  Then('it is horizontally right aligned with the reference element', () => {
81
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
87
+ getRefAndPopperPositions().should(_ref7 => {
88
+ let [refPos, popperPos] = _ref7;
82
89
  expect(refPos.right).to.equal(popperPos.right);
83
90
  });
84
91
  }); // Vertical alignments
85
92
  // *-start
86
93
 
87
94
  Then('it is vertically top aligned with the reference element', () => {
88
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
95
+ getRefAndPopperPositions().should(_ref8 => {
96
+ let [refPos, popperPos] = _ref8;
89
97
  expect(refPos.top).to.equal(popperPos.top);
90
98
  });
91
99
  }); // * (no suffix)
92
100
 
93
101
  Then('it is vertically center aligned with the reference element', () => {
94
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
102
+ getRefAndPopperPositions().should(_ref9 => {
103
+ let [refPos, popperPos] = _ref9;
95
104
  const refCenterY = refPos.top + refPos.height / 2;
96
105
  const popperCenterY = popperPos.top + popperPos.height / 2;
97
106
  expect(refCenterY).to.equal(popperCenterY);
@@ -99,7 +108,8 @@ Then('it is vertically center aligned with the reference element', () => {
99
108
  }); // *-end
100
109
 
101
110
  Then('it is vertically bottom aligned with the reference element', () => {
102
- getRefAndPopperPositions().should(([refPos, popperPos]) => {
111
+ getRefAndPopperPositions().should(_ref10 => {
112
+ let [refPos, popperPos] = _ref10;
103
113
  expect(refPos.bottom).to.equal(popperPos.bottom);
104
114
  });
105
115
  }); // helper
package/build/es/modifiers.js CHANGED
@@ -1,14 +1,15 @@
1
1
  import ResizeObserver from 'resize-observer-polyfill';
2
2
 
3
- const attachResizeObservers = ({
4
- state: {
5
- elements
6
- },
7
- options,
8
- instance: {
9
- update
10
- }
11
- }) => {
3
+ const attachResizeObservers = _ref => {
4
+ let {
5
+ state: {
6
+ elements
7
+ },
8
+ options,
9
+ instance: {
10
+ update
11
+ }
12
+ } = _ref;
12
13
  const observers = Object.keys(options).reduce((acc, elementKey) => {
13
14
  if (options[elementKey]) {
14
15
  const observer = new ResizeObserver(update);
@@ -25,55 +26,62 @@ const attachResizeObservers = ({
25
26
  };
26
27
  };
27
28
 
28
- export const getBaseModifiers = ({
29
- observePopperResize,
30
- observeReferenceResize
31
- }) => [{
32
- name: 'preventOverflow',
33
- options: {
34
- altAxis: true,
35
- rootBoundary: 'document',
36
- boundary: document.body
37
- }
38
- }, {
39
- name: 'flip',
40
- options: {
41
- rootBoundary: 'document',
42
- boundary: document.body
43
- }
44
- }, {
45
- name: 'resizeObserver',
46
- enabled: true,
47
- phase: 'write',
48
- fn: () => {},
49
- effect: attachResizeObservers,
50
- options: {
51
- popper: observePopperResize,
52
- reference: observeReferenceResize
53
- }
54
- }];
29
+ export const getBaseModifiers = _ref2 => {
30
+ let {
31
+ observePopperResize,
32
+ observeReferenceResize
33
+ } = _ref2;
34
+ return [{
35
+ name: 'preventOverflow',
36
+ options: {
37
+ altAxis: true,
38
+ rootBoundary: 'document',
39
+ boundary: document.body
40
+ }
41
+ }, {
42
+ name: 'flip',
43
+ options: {
44
+ rootBoundary: 'document',
45
+ boundary: document.body
46
+ }
47
+ }, {
48
+ name: 'resizeObserver',
49
+ enabled: true,
50
+ phase: 'write',
51
+ fn: () => {},
52
+ effect: attachResizeObservers,
53
+ options: {
54
+ popper: observePopperResize,
55
+ reference: observeReferenceResize
56
+ }
57
+ }];
58
+ };
55
59
  export const deduplicateModifiers = (modifiers, resizeObservers) => {
56
60
  // Deduplicate modifiers from props and baseModifiers,
57
61
  // when duplicates are encountered (by name), use the
58
62
  // modifier from props so each Popper can be fully custom
59
- return getBaseModifiers(resizeObservers).filter(({
60
- name
61
- }) => !modifiers.some(m => m.name === name)).concat(modifiers);
63
+ return getBaseModifiers(resizeObservers).filter(_ref3 => {
64
+ let {
65
+ name
66
+ } = _ref3;
67
+ return !modifiers.some(m => m.name === name);
68
+ }).concat(modifiers);
62
69
  };
63
70
  export const resizeObserver = {
64
71
  name: 'resizeObserver',
65
72
  enabled: true,
66
73
  phase: 'write',
67
74
  fn: () => {},
68
- effect: ({
69
- state: {
70
- elements
71
- },
72
- options,
73
- instance: {
74
- update
75
- }
76
- }) => {
75
+ effect: _ref4 => {
76
+ let {
77
+ state: {
78
+ elements
79
+ },
80
+ options,
81
+ instance: {
82
+ update
83
+ }
84
+ } = _ref4;
77
85
  const observers = Object.keys(options).reduce((acc, elementKey) => {
78
86
  if (options[elementKey]) {
79
87
  const observer = new ResizeObserver(update);
package/build/es/popper.js CHANGED
@@ -7,18 +7,19 @@ import { usePopper } from 'react-popper';
7
7
  import { getReferenceElement } from './get-reference-element.js';
8
8
  import { deduplicateModifiers } from './modifiers.js';
9
9
 
10
- const Popper = ({
11
- children,
12
- className,
13
- dataTest,
14
- modifiers,
15
- observePopperResize,
16
- observeReferenceResize,
17
- onFirstUpdate,
18
- placement,
19
- reference,
20
- strategy
21
- }) => {
10
+ const Popper = _ref => {
11
+ let {
12
+ children,
13
+ className,
14
+ dataTest,
15
+ modifiers,
16
+ observePopperResize,
17
+ observeReferenceResize,
18
+ onFirstUpdate,
19
+ placement,
20
+ reference,
21
+ strategy
22
+ } = _ref;
22
23
  const referenceElement = getReferenceElement(reference);
23
24
  const [popperElement, setPopperElement] = useState(null);
24
25
  const deduplicatedModifiers = useMemo(() => deduplicateModifiers(modifiers, {
package/build/es/popper.stories.e2e.js CHANGED
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
3
3
  import React, { useRef, useState } from 'react';
4
4
  import { Popper } from './popper.js';
5
5
 
6
- const PopperPlacement = ({
7
- placement
8
- }) => {
6
+ const PopperPlacement = _ref => {
7
+ let {
8
+ placement
9
+ } = _ref;
9
10
  const ref = useRef();
10
11
  return /*#__PURE__*/React.createElement("div", {
11
12
  className: "jsx-305551169" + " " + "box"
package/build/es/popper.stories.js CHANGED
@@ -3,19 +3,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
3
3
  import { sharedPropTypes } from '@dhis2/ui-constants';
4
4
  import React, { useRef } from 'react';
5
5
  import { Popper } from './popper.js';
6
- const description = `
7
- A tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.
8
-
9
- Since it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.
10
-
11
- \`\`\`js
12
- import { Popper } from '@dhis2/ui'
13
- \`\`\`
14
-
15
- _**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._
16
- `;
6
+ const description = "\nA tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.\n\nSince it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.\n\n```js\nimport { Popper } from '@dhis2/ui'\n```\n\n_**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._\n";
17
7
  export default {
18
- title: 'Helpers/Popper',
8
+ title: 'Popper',
19
9
  component: Popper,
20
10
  parameters: {
21
11
  docs: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/popper",
3
- "version": "8.1.11",
3
+ "version": "8.2.2",
4
4
  "description": "UI Popper",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@dhis2/prop-types": "^3.0.0-beta.1",
35
- "@dhis2/ui-constants": "8.1.11",
35
+ "@dhis2/ui-constants": "8.2.2",
36
36
  "@popperjs/core": "^2.10.1",
37
37
  "classnames": "^2.3.1",
38
38
  "prop-types": "^15.7.2",