@primer/components 0.0.0-202110871242 → 0.0.0-2021109214331
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.
- package/CHANGELOG.md +1 -1
- package/dist/browser.esm.js +180 -180
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +187 -187
- package/dist/browser.umd.js.map +1 -1
- package/lib/Overlay.js +6 -2
- package/lib/Portal/Portal.js +2 -2
- package/lib/hooks/useAnchoredPosition.js +2 -2
- package/lib/hooks/useCombinedRefs.js +4 -2
- package/lib/hooks/useResizeObserver.js +4 -2
- package/lib/utils/useIsomorphicLayoutEffect.d.ts +2 -1
- package/lib/utils/useIsomorphicLayoutEffect.js +4 -6
- package/lib-esm/Overlay.js +5 -1
- package/lib-esm/Portal/Portal.js +1 -1
- package/lib-esm/hooks/useAnchoredPosition.js +1 -1
- package/lib-esm/hooks/useCombinedRefs.js +1 -1
- package/lib-esm/hooks/useResizeObserver.js +1 -1
- package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +2 -1
- package/lib-esm/utils/useIsomorphicLayoutEffect.js +2 -3
- package/package.json +1 -1
package/lib/Overlay.js
CHANGED
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
12
12
|
var _constants = require("./constants");
|
13
13
|
|
14
|
-
var _useIsomorphicLayoutEffect = require("./utils/useIsomorphicLayoutEffect");
|
14
|
+
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./utils/useIsomorphicLayoutEffect"));
|
15
15
|
|
16
16
|
var _hooks = require("./hooks");
|
17
17
|
|
@@ -118,6 +118,7 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
|
|
118
118
|
preventFocusOnOpen,
|
119
119
|
...rest
|
120
120
|
}, forwardedRef) => {
|
121
|
+
debugger;
|
121
122
|
const overlayRef = (0, _react.useRef)(null);
|
122
123
|
const combinedRef = (0, _useCombinedRefs.useCombinedRefs)(overlayRef, forwardedRef);
|
123
124
|
const {
|
@@ -137,13 +138,16 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
|
|
137
138
|
(0, _react.useEffect)(() => {
|
138
139
|
var _combinedRef$current;
|
139
140
|
|
141
|
+
debugger;
|
142
|
+
|
140
143
|
if (height === 'initial' && (_combinedRef$current = combinedRef.current) !== null && _combinedRef$current !== void 0 && _combinedRef$current.clientHeight) {
|
141
144
|
combinedRef.current.style.height = `${combinedRef.current.clientHeight}px`;
|
142
145
|
}
|
143
146
|
}, [height, combinedRef]);
|
144
|
-
(0, _useIsomorphicLayoutEffect.
|
147
|
+
(0, _useIsomorphicLayoutEffect.default)(() => {
|
145
148
|
var _overlayRef$current;
|
146
149
|
|
150
|
+
debugger;
|
147
151
|
const {
|
148
152
|
x,
|
149
153
|
y
|
package/lib/Portal/Portal.js
CHANGED
@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
|
11
11
|
var _reactDom = require("react-dom");
|
12
12
|
|
13
|
-
var _useIsomorphicLayoutEffect = require("../utils/useIsomorphicLayoutEffect");
|
13
|
+
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
|
14
14
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
16
16
|
|
@@ -74,7 +74,7 @@ const Portal = ({
|
|
74
74
|
|
75
75
|
const elementRef = _react.default.useRef(hostElement);
|
76
76
|
|
77
|
-
(0, _useIsomorphicLayoutEffect.
|
77
|
+
(0, _useIsomorphicLayoutEffect.default)(() => {
|
78
78
|
let containerName = _containerName;
|
79
79
|
|
80
80
|
if (containerName === undefined) {
|
@@ -13,7 +13,7 @@ var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
|
|
13
13
|
|
14
14
|
var _useResizeObserver = require("./useResizeObserver");
|
15
15
|
|
16
|
-
var _useIsomorphicLayoutEffect = require("../utils/useIsomorphicLayoutEffect");
|
16
|
+
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
|
17
17
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19
19
|
|
@@ -41,7 +41,7 @@ function useAnchoredPosition(settings, dependencies = []) {
|
|
41
41
|
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
42
42
|
[floatingElementRef, anchorElementRef, ...dependencies]);
|
43
43
|
|
44
|
-
(0, _useIsomorphicLayoutEffect.
|
44
|
+
(0, _useIsomorphicLayoutEffect.default)(updatePosition, [updatePosition]);
|
45
45
|
(0, _useResizeObserver.useResizeObserver)(updatePosition);
|
46
46
|
return {
|
47
47
|
floatingElementRef,
|
@@ -7,7 +7,9 @@ exports.useCombinedRefs = useCombinedRefs;
|
|
7
7
|
|
8
8
|
var _react = require("react");
|
9
9
|
|
10
|
-
var _useIsomorphicLayoutEffect = require("../utils/useIsomorphicLayoutEffect");
|
10
|
+
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
|
11
|
+
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
13
|
|
12
14
|
/**
|
13
15
|
* Creates a ref by combining multiple constituent refs. The ref returned by this hook
|
@@ -19,7 +21,7 @@ var _useIsomorphicLayoutEffect = require("../utils/useIsomorphicLayoutEffect");
|
|
19
21
|
*/
|
20
22
|
function useCombinedRefs(...refs) {
|
21
23
|
const combinedRef = (0, _react.useRef)(null);
|
22
|
-
(0, _useIsomorphicLayoutEffect.
|
24
|
+
(0, _useIsomorphicLayoutEffect.default)(() => {
|
23
25
|
function setRefs(current = null) {
|
24
26
|
for (const ref of refs) {
|
25
27
|
if (!ref) {
|
@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useResizeObserver = useResizeObserver;
|
7
7
|
|
8
|
-
var _useIsomorphicLayoutEffect = require("../utils/useIsomorphicLayoutEffect");
|
8
|
+
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
|
9
|
+
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
9
11
|
|
10
12
|
function useResizeObserver(callback) {
|
11
|
-
(0, _useIsomorphicLayoutEffect.
|
13
|
+
(0, _useIsomorphicLayoutEffect.default)(() => {
|
12
14
|
const observer = new window.ResizeObserver(() => callback());
|
13
15
|
observer.observe(document.documentElement);
|
14
16
|
return () => {
|
@@ -3,12 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.default = void 0;
|
7
7
|
|
8
8
|
var _react = require("react");
|
9
9
|
|
10
|
-
const useIsomorphicLayoutEffect =
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
|
10
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
|
11
|
+
var _default = useIsomorphicLayoutEffect;
|
12
|
+
exports.default = _default;
|
package/lib-esm/Overlay.js
CHANGED
@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
3
3
|
import styled from 'styled-components';
|
4
4
|
import React, { useEffect, useRef } from 'react';
|
5
5
|
import { get, COMMON } from './constants';
|
6
|
-
import
|
6
|
+
import useLayoutEffect from './utils/useIsomorphicLayoutEffect';
|
7
7
|
import { useOverlay } from './hooks';
|
8
8
|
import Portal from './Portal';
|
9
9
|
import sx from './sx';
|
@@ -96,6 +96,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
96
96
|
preventFocusOnOpen,
|
97
97
|
...rest
|
98
98
|
}, forwardedRef) => {
|
99
|
+
debugger;
|
99
100
|
const overlayRef = useRef(null);
|
100
101
|
const combinedRef = useCombinedRefs(overlayRef, forwardedRef);
|
101
102
|
const {
|
@@ -115,6 +116,8 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
115
116
|
useEffect(() => {
|
116
117
|
var _combinedRef$current;
|
117
118
|
|
119
|
+
debugger;
|
120
|
+
|
118
121
|
if (height === 'initial' && (_combinedRef$current = combinedRef.current) !== null && _combinedRef$current !== void 0 && _combinedRef$current.clientHeight) {
|
119
122
|
combinedRef.current.style.height = `${combinedRef.current.clientHeight}px`;
|
120
123
|
}
|
@@ -122,6 +125,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
122
125
|
useLayoutEffect(() => {
|
123
126
|
var _overlayRef$current;
|
124
127
|
|
128
|
+
debugger;
|
125
129
|
const {
|
126
130
|
x,
|
127
131
|
y
|
package/lib-esm/Portal/Portal.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { createPortal } from 'react-dom';
|
3
|
-
import
|
3
|
+
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
|
4
4
|
const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
|
5
5
|
const DEFAULT_PORTAL_CONTAINER_NAME = '__default__';
|
6
6
|
const portalRootRegistry = {};
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
2
2
|
import { getAnchoredPosition } from '../behaviors/anchoredPosition';
|
3
3
|
import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
|
4
4
|
import { useResizeObserver } from './useResizeObserver';
|
5
|
-
import
|
5
|
+
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
|
6
6
|
|
7
7
|
/**
|
8
8
|
* Calculates the top and left values for an absolutely-positioned floating element
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { useRef } from 'react';
|
2
|
-
import
|
2
|
+
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
|
3
3
|
/**
|
4
4
|
* Creates a ref by combining multiple constituent refs. The ref returned by this hook
|
5
5
|
* should be passed as the ref for the element that needs to be shared. This is
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import
|
1
|
+
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
|
2
2
|
export function useResizeObserver(callback) {
|
3
3
|
useLayoutEffect(() => {
|
4
4
|
const observer = new window.ResizeObserver(() => callback());
|
@@ -1,4 +1,3 @@
|
|
1
1
|
import { useEffect, useLayoutEffect } from 'react';
|
2
|
-
|
3
|
-
|
4
|
-
};
|
2
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
|
3
|
+
export default useIsomorphicLayoutEffect;
|