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

Comparing version 4.1.2 to 4.1.3

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+## [4.1.3](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.2...@alfalab/core-components-base-modal@4.1.3) (2022-07-11)
+
+
+### Bug Fixes
+
+* **base-modal:** fix using resize observer ([#136](https://github.com/core-ds/core-components/issues/136)) ([cb8f03c](https://github.com/core-ds/core-components/commit/cb8f03ca55394316189d1d4529ee3fdb691538d9))
+* fixed 'window is not defined' error ([#126](https://github.com/core-ds/core-components/issues/126)) ([f4e9ca5](https://github.com/core-ds/core-components/commit/f4e9ca54ed52fb328d21c85b7efa8176a90dcb6e))
+
+
+
+
+
 ## [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)
@@ -8,0 +20,0 @@

dist/Component.js

@@ -51,3 +51,3 @@ 'use strict';
 
-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"};
+var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
 require('./index.css')
@@ -68,3 +68,2 @@
 });
-var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
 var BaseModal = React.forwardRef(function (_a, ref) {
@@ -85,2 +84,3 @@ 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;
     var mouseDownTarget = React.useRef();
+    var resizeObserverRef = React.useRef();
     var checkToHasScrollBar = function () {
@@ -97,19 +97,22 @@ if (scrollableNodeRef.current) {
     }, [container]);
-    var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = React.useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    var removeResizeHandle = React.useCallback(function () {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    var removeResizeHandle = React.useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     var handleScroll = React.useCallback(function () {
@@ -215,2 +218,4 @@ if (!scrollableNodeRef.current || !componentNodeRef.current)
     React.useEffect(function () {
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
         return function () {
@@ -220,5 +225,6 @@ if (restoreContainerStylesRef.current) {
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -225,0 +231,0 @@ var contextValue = React.useMemo(function () { return ({

dist/cssm/Component.js

@@ -66,3 +66,2 @@ 'use strict';
 });
-var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
 var BaseModal = React.forwardRef(function (_a, ref) {
@@ -83,2 +82,3 @@ 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;
     var mouseDownTarget = React.useRef();
+    var resizeObserverRef = React.useRef();
     var checkToHasScrollBar = function () {
@@ -95,19 +95,22 @@ if (scrollableNodeRef.current) {
     }, [container]);
-    var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = React.useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    var removeResizeHandle = React.useCallback(function () {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    var removeResizeHandle = React.useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     var handleScroll = React.useCallback(function () {
@@ -213,2 +216,4 @@ if (!scrollableNodeRef.current || !componentNodeRef.current)
     React.useEffect(function () {
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
         return function () {
@@ -218,5 +223,6 @@ if (restoreContainerStylesRef.current) {
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -223,0 +229,0 @@ var contextValue = React.useMemo(function () { return ({

dist/esm/Component.js

@@ -1,5 +0,5 @@
-import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
+import { ResizeObserver } 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_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"};
+var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
 require('./index.css')
@@ -57,3 +57,2 @@
 });
-var ResizeObserver = window.ResizeObserver || ResizeObserver$1;
 var BaseModal = forwardRef(function (_a, ref) {
@@ -74,2 +73,3 @@ 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;
     var mouseDownTarget = useRef();
+    var resizeObserverRef = useRef();
     var checkToHasScrollBar = function () {
@@ -86,19 +86,22 @@ if (scrollableNodeRef.current) {
     }, [container]);
-    var resizeObserver = useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    var removeResizeHandle = useCallback(function () {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    var removeResizeHandle = useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     var contentRef = useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     var handleScroll = useCallback(function () {
@@ -204,2 +207,4 @@ if (!scrollableNodeRef.current || !componentNodeRef.current)
     useEffect(function () {
+        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
         return function () {
@@ -209,5 +214,6 @@ if (restoreContainerStylesRef.current) {
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -214,0 +220,0 @@ var contextValue = useMemo(function () { return ({

dist/modern/Component.js

@@ -1,5 +0,5 @@
-import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
+import { ResizeObserver } 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_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"};
+var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
 require('./index.css')
@@ -31,3 +31,2 @@
 });
-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) => {
@@ -47,2 +46,3 @@ const [exited, setExited] = useState(!open);
     const mouseDownTarget = useRef();
+    const resizeObserverRef = useRef();
     const checkToHasScrollBar = () => {
@@ -59,19 +59,22 @@ if (scrollableNodeRef.current) {
     }, [container]);
-    const resizeObserver = useMemo(() => new ResizeObserver(checkToHasScrollBar), []);
     const addResizeHandle = useCallback(() => {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    const removeResizeHandle = useCallback(() => {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    const removeResizeHandle = useCallback(() => resizeObserverRef.current?.disconnect(), []);
     const contentRef = useCallback((node) => {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     const handleScroll = useCallback(() => {
@@ -177,2 +180,4 @@ if (!scrollableNodeRef.current || !componentNodeRef.current)
     useEffect(() => {
+        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
         return () => {
@@ -182,5 +187,6 @@ if (restoreContainerStylesRef.current) {
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -187,0 +193,0 @@ const contextValue = useMemo(() => ({

package.json

 {
     "name": "@alfalab/core-components-base-modal",
-    "version": "4.1.2",
+    "version": "4.1.3",
     "description": "BaseModal component",
@@ -34,3 +34,3 @@ "keywords": [],
     },
-    "gitHead": "a1e54f5b2894447f4a6c80347706c27f855d5710"
+    "gitHead": "62c863f937c2b78ab35b8ca55863b11a0ebdd631"
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107117

increased by1.36%

Lines of code

2332

increased by1.04%

Worsened metrics

Number of medium supply chain risk alerts

4

increased by33.33%

No dependency changes