@primer/components 0.0.0-2021109214331 → 0.0.0-202110922024
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 +3 -5
- package/dist/browser.esm.js +178 -178
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +179 -179
- package/dist/browser.umd.js.map +1 -1
- package/lib/Overlay.js +1 -7
- package/lib/Portal/Portal.js +2 -3
- package/lib/hooks/useAnchoredPosition.js +2 -3
- package/lib/hooks/useCombinedRefs.d.ts +2 -2
- package/lib/hooks/useCombinedRefs.js +6 -4
- package/lib/hooks/useResizeObserver.js +2 -2
- package/lib-esm/Overlay.js +1 -6
- package/lib-esm/Portal/Portal.js +1 -2
- package/lib-esm/hooks/useAnchoredPosition.js +1 -2
- package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
- package/lib-esm/hooks/useCombinedRefs.js +2 -3
- package/lib-esm/hooks/useResizeObserver.js +2 -2
- package/package.json +2 -2
- package/lib/utils/useIsomorphicLayoutEffect.d.ts +0 -3
- package/lib/utils/useIsomorphicLayoutEffect.js +0 -12
- package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +0 -3
- package/lib-esm/utils/useIsomorphicLayoutEffect.js +0 -3
package/lib/Overlay.js
CHANGED
@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
12
12
|
var _constants = require("./constants");
|
13
13
|
|
14
|
-
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./utils/useIsomorphicLayoutEffect"));
|
15
|
-
|
16
14
|
var _hooks = require("./hooks");
|
17
15
|
|
18
16
|
var _Portal = _interopRequireDefault(require("./Portal"));
|
@@ -118,7 +116,6 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
|
|
118
116
|
preventFocusOnOpen,
|
119
117
|
...rest
|
120
118
|
}, forwardedRef) => {
|
121
|
-
debugger;
|
122
119
|
const overlayRef = (0, _react.useRef)(null);
|
123
120
|
const combinedRef = (0, _useCombinedRefs.useCombinedRefs)(overlayRef, forwardedRef);
|
124
121
|
const {
|
@@ -138,16 +135,13 @@ const Overlay = /*#__PURE__*/_react.default.forwardRef(({
|
|
138
135
|
(0, _react.useEffect)(() => {
|
139
136
|
var _combinedRef$current;
|
140
137
|
|
141
|
-
debugger;
|
142
|
-
|
143
138
|
if (height === 'initial' && (_combinedRef$current = combinedRef.current) !== null && _combinedRef$current !== void 0 && _combinedRef$current.clientHeight) {
|
144
139
|
combinedRef.current.style.height = `${combinedRef.current.clientHeight}px`;
|
145
140
|
}
|
146
141
|
}, [height, combinedRef]);
|
147
|
-
(0,
|
142
|
+
(0, _react.useLayoutEffect)(() => {
|
148
143
|
var _overlayRef$current;
|
149
144
|
|
150
|
-
debugger;
|
151
145
|
const {
|
152
146
|
x,
|
153
147
|
y
|
package/lib/Portal/Portal.js
CHANGED
@@ -10,8 +10,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
|
11
11
|
var _reactDom = require("react-dom");
|
12
12
|
|
13
|
-
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
|
14
|
-
|
15
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
16
14
|
|
17
15
|
const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
|
@@ -74,7 +72,7 @@ const Portal = ({
|
|
74
72
|
|
75
73
|
const elementRef = _react.default.useRef(hostElement);
|
76
74
|
|
77
|
-
|
75
|
+
_react.default.useLayoutEffect(() => {
|
78
76
|
let containerName = _containerName;
|
79
77
|
|
80
78
|
if (containerName === undefined) {
|
@@ -95,6 +93,7 @@ const Portal = ({
|
|
95
93
|
parentElement.removeChild(element);
|
96
94
|
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
97
95
|
}, [elementRef]);
|
96
|
+
|
98
97
|
return /*#__PURE__*/(0, _reactDom.createPortal)(children, elementRef.current);
|
99
98
|
};
|
100
99
|
|
@@ -13,8 +13,6 @@ var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
|
|
13
13
|
|
14
14
|
var _useResizeObserver = require("./useResizeObserver");
|
15
15
|
|
16
|
-
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
|
17
|
-
|
18
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19
17
|
|
20
18
|
/**
|
@@ -41,7 +39,8 @@ function useAnchoredPosition(settings, dependencies = []) {
|
|
41
39
|
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
42
40
|
[floatingElementRef, anchorElementRef, ...dependencies]);
|
43
41
|
|
44
|
-
|
42
|
+
_react.default.useLayoutEffect(updatePosition, [updatePosition]);
|
43
|
+
|
45
44
|
(0, _useResizeObserver.useResizeObserver)(updatePosition);
|
46
45
|
return {
|
47
46
|
floatingElementRef,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { ForwardedRef } from 'react';
|
1
|
+
import React, { ForwardedRef } from 'react';
|
2
2
|
/**
|
3
3
|
* Creates a ref by combining multiple constituent refs. The ref returned by this hook
|
4
4
|
* should be passed as the ref for the element that needs to be shared. This is
|
@@ -7,4 +7,4 @@ import { ForwardedRef } from 'react';
|
|
7
7
|
* though, as it breaks encapsulation.
|
8
8
|
* @param refs
|
9
9
|
*/
|
10
|
-
export declare function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]):
|
10
|
+
export declare function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]): React.MutableRefObject<T | null>;
|
@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useCombinedRefs = useCombinedRefs;
|
7
7
|
|
8
|
-
var _react = require("react");
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
9
|
|
10
|
-
var
|
10
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
11
11
|
|
12
|
-
function
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
13
13
|
|
14
14
|
/**
|
15
15
|
* Creates a ref by combining multiple constituent refs. The ref returned by this hook
|
@@ -21,7 +21,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
21
21
|
*/
|
22
22
|
function useCombinedRefs(...refs) {
|
23
23
|
const combinedRef = (0, _react.useRef)(null);
|
24
|
-
|
24
|
+
|
25
|
+
_react.default.useLayoutEffect(() => {
|
25
26
|
function setRefs(current = null) {
|
26
27
|
for (const ref of refs) {
|
27
28
|
if (!ref) {
|
@@ -43,5 +44,6 @@ function useCombinedRefs(...refs) {
|
|
43
44
|
setRefs(combinedRef.current);
|
44
45
|
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
45
46
|
}, [...refs, combinedRef.current]);
|
47
|
+
|
46
48
|
return combinedRef;
|
47
49
|
}
|
@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useResizeObserver = useResizeObserver;
|
7
7
|
|
8
|
-
var
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
11
|
|
12
12
|
function useResizeObserver(callback) {
|
13
|
-
|
13
|
+
_react.default.useLayoutEffect(() => {
|
14
14
|
const observer = new window.ResizeObserver(() => callback());
|
15
15
|
observer.observe(document.documentElement);
|
16
16
|
return () => {
|
package/lib-esm/Overlay.js
CHANGED
@@ -1,9 +1,8 @@
|
|
1
1
|
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); }
|
2
2
|
|
3
3
|
import styled from 'styled-components';
|
4
|
-
import React, { useEffect, useRef } from 'react';
|
4
|
+
import React, { useEffect, useLayoutEffect, useRef } from 'react';
|
5
5
|
import { get, COMMON } from './constants';
|
6
|
-
import useLayoutEffect from './utils/useIsomorphicLayoutEffect';
|
7
6
|
import { useOverlay } from './hooks';
|
8
7
|
import Portal from './Portal';
|
9
8
|
import sx from './sx';
|
@@ -96,7 +95,6 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
96
95
|
preventFocusOnOpen,
|
97
96
|
...rest
|
98
97
|
}, forwardedRef) => {
|
99
|
-
debugger;
|
100
98
|
const overlayRef = useRef(null);
|
101
99
|
const combinedRef = useCombinedRefs(overlayRef, forwardedRef);
|
102
100
|
const {
|
@@ -116,8 +114,6 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
116
114
|
useEffect(() => {
|
117
115
|
var _combinedRef$current;
|
118
116
|
|
119
|
-
debugger;
|
120
|
-
|
121
117
|
if (height === 'initial' && (_combinedRef$current = combinedRef.current) !== null && _combinedRef$current !== void 0 && _combinedRef$current.clientHeight) {
|
122
118
|
combinedRef.current.style.height = `${combinedRef.current.clientHeight}px`;
|
123
119
|
}
|
@@ -125,7 +121,6 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
|
|
125
121
|
useLayoutEffect(() => {
|
126
122
|
var _overlayRef$current;
|
127
123
|
|
128
|
-
debugger;
|
129
124
|
const {
|
130
125
|
x,
|
131
126
|
y
|
package/lib-esm/Portal/Portal.js
CHANGED
@@ -1,6 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { createPortal } from 'react-dom';
|
3
|
-
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
|
4
3
|
const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
|
5
4
|
const DEFAULT_PORTAL_CONTAINER_NAME = '__default__';
|
6
5
|
const portalRootRegistry = {};
|
@@ -58,7 +57,7 @@ export const Portal = ({
|
|
58
57
|
hostElement.style.position = 'relative';
|
59
58
|
hostElement.style.zIndex = '1';
|
60
59
|
const elementRef = React.useRef(hostElement);
|
61
|
-
useLayoutEffect(() => {
|
60
|
+
React.useLayoutEffect(() => {
|
62
61
|
let containerName = _containerName;
|
63
62
|
|
64
63
|
if (containerName === undefined) {
|
@@ -2,7 +2,6 @@ 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 useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
|
6
5
|
|
7
6
|
/**
|
8
7
|
* Calculates the top and left values for an absolutely-positioned floating element
|
@@ -25,7 +24,7 @@ export function useAnchoredPosition(settings, dependencies = []) {
|
|
25
24
|
}
|
26
25
|
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
27
26
|
[floatingElementRef, anchorElementRef, ...dependencies]);
|
28
|
-
useLayoutEffect(updatePosition, [updatePosition]);
|
27
|
+
React.useLayoutEffect(updatePosition, [updatePosition]);
|
29
28
|
useResizeObserver(updatePosition);
|
30
29
|
return {
|
31
30
|
floatingElementRef,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { ForwardedRef } from 'react';
|
1
|
+
import React, { ForwardedRef } from 'react';
|
2
2
|
/**
|
3
3
|
* Creates a ref by combining multiple constituent refs. The ref returned by this hook
|
4
4
|
* should be passed as the ref for the element that needs to be shared. This is
|
@@ -7,4 +7,4 @@ import { ForwardedRef } from 'react';
|
|
7
7
|
* though, as it breaks encapsulation.
|
8
8
|
* @param refs
|
9
9
|
*/
|
10
|
-
export declare function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]):
|
10
|
+
export declare function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]): React.MutableRefObject<T | null>;
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import { useRef } from 'react';
|
2
|
-
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
|
1
|
+
import React, { useRef } from 'react';
|
3
2
|
/**
|
4
3
|
* Creates a ref by combining multiple constituent refs. The ref returned by this hook
|
5
4
|
* should be passed as the ref for the element that needs to be shared. This is
|
@@ -11,7 +10,7 @@ import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
|
|
11
10
|
|
12
11
|
export function useCombinedRefs(...refs) {
|
13
12
|
const combinedRef = useRef(null);
|
14
|
-
useLayoutEffect(() => {
|
13
|
+
React.useLayoutEffect(() => {
|
15
14
|
function setRefs(current = null) {
|
16
15
|
for (const ref of refs) {
|
17
16
|
if (!ref) {
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import
|
1
|
+
import React from 'react';
|
2
2
|
export function useResizeObserver(callback) {
|
3
|
-
useLayoutEffect(() => {
|
3
|
+
React.useLayoutEffect(() => {
|
4
4
|
const observer = new window.ResizeObserver(() => callback());
|
5
5
|
observer.observe(document.documentElement);
|
6
6
|
return () => {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/components",
|
3
|
-
"version": "0.0.0-
|
3
|
+
"version": "0.0.0-202110922024",
|
4
4
|
"description": "Primer react components",
|
5
5
|
"main": "lib/index.js",
|
6
6
|
"module": "lib-esm/index.js",
|
@@ -15,7 +15,7 @@
|
|
15
15
|
"start": "concurrently npm:start:*",
|
16
16
|
"start:docs": "cd docs && npm run develop",
|
17
17
|
"start:storybook": "start-storybook -p 6006",
|
18
|
-
"lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
|
18
|
+
"lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
|
19
19
|
"lint:fix": "npm run lint -- --fix",
|
20
20
|
"test": "jest",
|
21
21
|
"test:update": "npm run test -- --updateSnapshot",
|
@@ -1,12 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = require("react");
|
9
|
-
|
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;
|
@@ -1,3 +0,0 @@
|
|
1
|
-
import { useEffect, useLayoutEffect } from 'react';
|
2
|
-
const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
|
3
|
-
export default useIsomorphicLayoutEffect;
|