@alfalab/core-components-base-modal - npm Package Compare versions

Comparing version 4.1.1 to 4.1.2

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [4.1.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.1...@alfalab/core-components-base-modal@4.1.2) (2022-07-01)
+
+
+### Performance Improvements
+
+* refuse to use a resize-observer polyfill if it is not needed ([#120](https://github.com/core-ds/core-components/issues/120)) ([f2abcb2](https://github.com/core-ds/core-components/commit/f2abcb2888dd5906b345f5fc64b1624eef56ac13))
+
+
+
+
+
 ## [4.1.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.0...@alfalab/core-components-base-modal@4.1.1) (2022-06-30)
@@ -8,0 +19,0 @@

dist/Component.js

@@ -8,3 +8,3 @@ 'use strict';
 var mergeRefs = require('react-merge-refs');
-var resizeObserver = require('resize-observer');
+var resizeObserver = require('@juggle/resize-observer');
 var reactTransitionGroup = require('react-transition-group');
@@ -52,3 +52,3 @@ var FocusLock = require('react-focus-lock');
 
-var styles = {"component":"base-modal__component_15icx","wrapper":"base-modal__wrapper_15icx","content":"base-modal__content_15icx","hidden":"base-modal__hidden_15icx","backdrop":"base-modal__backdrop_15icx","appear":"base-modal__appear_15icx","enter":"base-modal__enter_15icx","appearActive":"base-modal__appearActive_15icx","enterActive":"base-modal__enterActive_15icx","exit":"base-modal__exit_15icx","exitActive":"base-modal__exitActive_15icx","exitDone":"base-modal__exitDone_15icx"};
+var styles = {"component":"base-modal__component_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
 require('./index.css')
@@ -69,2 +69,3 @@
 });
+var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
 var BaseModal = React.forwardRef(function (_a, ref) {
@@ -96,19 +97,19 @@ var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? coreComponentsStack.stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
     }, [container]);
-    var resizeObserver$1 = React.useMemo(function () { return new resizeObserver.ResizeObserver(checkToHasScrollBar); }, []);
+    var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = React.useCallback(function () {
         if (scrollableNodeRef.current)
-            resizeObserver$1.observe(scrollableNodeRef.current);
+            resizeObserver.observe(scrollableNodeRef.current);
         if (contentNodeRef.current)
-            resizeObserver$1.observe(contentNodeRef.current);
-    }, [resizeObserver$1]);
+            resizeObserver.observe(contentNodeRef.current);
+    }, [resizeObserver]);
     var removeResizeHandle = React.useCallback(function () {
-        resizeObserver$1.disconnect();
-    }, [resizeObserver$1]);
+        resizeObserver.disconnect();
+    }, [resizeObserver]);
     var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver$1.observe(node);
+            resizeObserver.observe(node);
             checkToHasScrollBar();
         }
-    }, [resizeObserver$1]);
+    }, [resizeObserver]);
     var handleScroll = React.useCallback(function () {
@@ -218,3 +219,3 @@ if (!scrollableNodeRef.current || !componentNodeRef.current)
             }
-            resizeObserver$1.disconnect();
+            resizeObserver.disconnect();
         };
@@ -221,0 +222,0 @@ // eslint-disable-next-line react-hooks/exhaustive-deps

dist/cssm/Component.js

@@ -8,3 +8,3 @@ 'use strict';
 var mergeRefs = require('react-merge-refs');
-var resizeObserver = require('resize-observer');
+var resizeObserver = require('@juggle/resize-observer');
 var reactTransitionGroup = require('react-transition-group');
@@ -67,2 +67,3 @@ var FocusLock = require('react-focus-lock');
 });
+var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
 var BaseModal = React.forwardRef(function (_a, ref) {
@@ -94,19 +95,19 @@ var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? coreComponentsStack.stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
     }, [container]);
-    var resizeObserver$1 = React.useMemo(function () { return new resizeObserver.ResizeObserver(checkToHasScrollBar); }, []);
+    var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = React.useCallback(function () {
         if (scrollableNodeRef.current)
-            resizeObserver$1.observe(scrollableNodeRef.current);
+            resizeObserver.observe(scrollableNodeRef.current);
         if (contentNodeRef.current)
-            resizeObserver$1.observe(contentNodeRef.current);
-    }, [resizeObserver$1]);
+            resizeObserver.observe(contentNodeRef.current);
+    }, [resizeObserver]);
     var removeResizeHandle = React.useCallback(function () {
-        resizeObserver$1.disconnect();
-    }, [resizeObserver$1]);
+        resizeObserver.disconnect();
+    }, [resizeObserver]);
     var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver$1.observe(node);
+            resizeObserver.observe(node);
             checkToHasScrollBar();
         }
-    }, [resizeObserver$1]);
+    }, [resizeObserver]);
     var handleScroll = React.useCallback(function () {
@@ -216,3 +217,3 @@ if (!scrollableNodeRef.current || !componentNodeRef.current)
             }
-            resizeObserver$1.disconnect();
+            resizeObserver.disconnect();
         };
@@ -219,0 +220,0 @@ // eslint-disable-next-line react-hooks/exhaustive-deps

dist/cssm/index.js

@@ -9,3 +9,3 @@ 'use strict';
 require('react-merge-refs');
-require('resize-observer');
+require('@juggle/resize-observer');
 require('react-transition-group');
@@ -12,0 +12,0 @@ require('react-focus-lock');

dist/esm/Component.js

 import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver } from 'resize-observer';
+import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
 import { CSSTransition } from 'react-transition-group';
@@ -40,3 +40,3 @@ import FocusLock from 'react-focus-lock';
 
-var styles = {"component":"base-modal__component_15icx","wrapper":"base-modal__wrapper_15icx","content":"base-modal__content_15icx","hidden":"base-modal__hidden_15icx","backdrop":"base-modal__backdrop_15icx","appear":"base-modal__appear_15icx","enter":"base-modal__enter_15icx","appearActive":"base-modal__appearActive_15icx","enterActive":"base-modal__enterActive_15icx","exit":"base-modal__exit_15icx","exitActive":"base-modal__exitActive_15icx","exitDone":"base-modal__exitDone_15icx"};
+var styles = {"component":"base-modal__component_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
 require('./index.css')
@@ -57,2 +57,3 @@
 });
+var ResizeObserver = window.ResizeObserver || ResizeObserver$1;
 var BaseModal = forwardRef(function (_a, ref) {
@@ -59,0 +60,0 @@ var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop$1 = _c === void 0 ? Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;

dist/esm/index.js

@@ -5,3 +5,3 @@ export { BaseModal, BaseModalContext } from './Component.js';
 import 'react-merge-refs';
-import 'resize-observer';
+import '@juggle/resize-observer';
 import 'react-transition-group';
@@ -8,0 +8,0 @@ import 'react-focus-lock';

dist/index.js

@@ -9,3 +9,3 @@ 'use strict';
 require('react-merge-refs');
-require('resize-observer');
+require('@juggle/resize-observer');
 require('react-transition-group');
@@ -12,0 +12,0 @@ require('react-focus-lock');

dist/modern/Component.js

 import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver } from 'resize-observer';
+import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
 import { CSSTransition } from 'react-transition-group';
@@ -13,3 +13,3 @@ import FocusLock from 'react-focus-lock';
 
-var styles = {"component":"base-modal__component_15icx","wrapper":"base-modal__wrapper_15icx","content":"base-modal__content_15icx","hidden":"base-modal__hidden_15icx","backdrop":"base-modal__backdrop_15icx","appear":"base-modal__appear_15icx","enter":"base-modal__enter_15icx","appearActive":"base-modal__appearActive_15icx","enterActive":"base-modal__enterActive_15icx","exit":"base-modal__exit_15icx","exitActive":"base-modal__exitActive_15icx","exitDone":"base-modal__exitDone_15icx"};
+var styles = {"component":"base-modal__component_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
 require('./index.css')
@@ -31,2 +31,3 @@
 });
+const ResizeObserver = window.ResizeObserver || ResizeObserver$1;
 const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, keepMounted = false, className, contentClassName, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, }, ref) => {
@@ -33,0 +34,0 @@ const [exited, setExited] = useState(!open);

dist/modern/index.js

 import 'react';
 import 'classnames';
 import 'react-merge-refs';
-import 'resize-observer';
+import '@juggle/resize-observer';
 import 'react-transition-group';
@@ -6,0 +6,0 @@ import 'react-focus-lock';

package.json

 {
     "name": "@alfalab/core-components-base-modal",
-    "version": "4.1.1",
+    "version": "4.1.2",
     "description": "BaseModal component",
@@ -22,7 +22,7 @@ "keywords": [],
         "@alfalab/core-components-stack": "^3.0.3",
+        "@juggle/resize-observer": "^3.3.1",
         "classnames": "^2.2.6",
         "react-focus-lock": "^2.5.0",
         "react-merge-refs": "^1.1.0",
-        "react-transition-group": "^4.4.1",
-        "resize-observer": "^1.0.0"
+        "react-transition-group": "^4.4.1"
     },
@@ -35,3 +35,3 @@ "devDependencies": {
     },
-    "gitHead": "7faa1479f68e818fde406010fe07b8ee126deffb"
+    "gitHead": "a1e54f5b2894447f4a6c80347706c27f855d5710"
 }

No alert changes

Improved metrics

Total package byte prevSize

105683

increased by0.72%

Lines of code

2308

increased by0.17%

Dependency changes

• + Added@juggle/resize-observer@^3.3.1

• + Added@juggle/resize-observer@3.4.0(transitive)

• - Removedresize-observer@^1.0.0

• - Removedresize-observer@1.0.4(transitive)