@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/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, _useIsomorphicLayoutEffect.default)(() => {
142
+ (0, _react.useLayoutEffect)(() => {
148
143
  var _overlayRef$current;
149
144
 
150
- debugger;
151
145
  const {
152
146
  x,
153
147
  y
@@ -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
- (0, _useIsomorphicLayoutEffect.default)(() => {
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
- (0, _useIsomorphicLayoutEffect.default)(updatePosition, [updatePosition]);
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)[]): import("react").MutableRefObject<T | null>;
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 _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
- (0, _useIsomorphicLayoutEffect.default)(() => {
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 _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
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
- (0, _useIsomorphicLayoutEffect.default)(() => {
13
+ _react.default.useLayoutEffect(() => {
14
14
  const observer = new window.ResizeObserver(() => callback());
15
15
  observer.observe(document.documentElement);
16
16
  return () => {
@@ -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
@@ -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)[]): import("react").MutableRefObject<T | null>;
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 useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
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-2021109214331",
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,3 +0,0 @@
1
- import { useEffect } from 'react';
2
- declare const useIsomorphicLayoutEffect: typeof useEffect;
3
- export default useIsomorphicLayoutEffect;
@@ -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 } from 'react';
2
- declare const useIsomorphicLayoutEffect: typeof useEffect;
3
- export default useIsomorphicLayoutEffect;
@@ -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;