@itcase/ui 1.8.169 → 1.8.170

package/dist/cjs/components/Modal.js

@@ -170,7 +170,9 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     }, [isOpen, isScrollOnOpen, isSetFocusOnOpen]);
     // Show modal with children content
     const openModal = React.useCallback(() => {
-        setIsOpen(true);
+        React.startTransition(() => {
+            setIsOpen(true);
+        });
         // Callback
         if (typeof onOpenModal === 'function') {
             onOpenModal();
@@ -204,6 +206,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         // Callback
         onCloseModal && onCloseModal();
     }, [modalElement, onCloseModal]);
+    const handleClickOverlay = React.useCallback(() => {
+        if (isCloseOnBlur) {
+            closeModal();
+        }
+        onClickOverlay && onClickOverlay();
+    }, [closeModal, isCloseOnBlur, onClickOverlay]);
     React.useEffect(() => {
         if (!modalElement) {
             return;
@@ -222,26 +230,25 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         }
     }, [addModalProps, className, modalIdQuerySelector]);
     React.useEffect(() => {
-        if (!isCloseOnBlur) {
+        if (!isCloseOnBlur || !isOpen) {
             return;
         }
         const handleClickOutside = (event) => {
             const target = event.target;
-            const modal = modalContentRef.current;
-            if (!modal || !target || !target.isConnected) {
+            if (!modalElement || !target || !target.isConnected) {
                 return;
             }
-            const isOutside = !modal.contains(target);
+            const isOutside = !modalElement.contains(target);
             if (isOutside) {
                 setIsOpen(false);
                 onCloseModal && onCloseModal();
             }
         };
-        document.addEventListener('click', handleClickOutside);
+        window.addEventListener('click', handleClickOutside);
         return () => {
-            document.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('click', handleClickOutside);
         };
-    }, [onCloseModal, isCloseOnBlur]);
+    }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
     // Save ref things
     React.useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalConfig, isDisabled);
@@ -255,7 +262,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         // Any valid React child: JSX, strings, arrays, etc.
         isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
-                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
+                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element
         modalElement));
 });

package/dist/components/Modal.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { useState, useRef, useCallback, startTransition, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import ReactDOM from 'react-dom';
 import { icons24, icons32, icons40 } from '@itcase/icons/default';
@@ -168,7 +168,9 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     }, [isOpen, isScrollOnOpen, isSetFocusOnOpen]);
     // Show modal with children content
     const openModal = useCallback(() => {
-        setIsOpen(true);
+        startTransition(() => {
+            setIsOpen(true);
+        });
         // Callback
         if (typeof onOpenModal === 'function') {
             onOpenModal();
@@ -202,6 +204,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         // Callback
         onCloseModal && onCloseModal();
     }, [modalElement, onCloseModal]);
+    const handleClickOverlay = useCallback(() => {
+        if (isCloseOnBlur) {
+            closeModal();
+        }
+        onClickOverlay && onClickOverlay();
+    }, [closeModal, isCloseOnBlur, onClickOverlay]);
     useEffect(() => {
         if (!modalElement) {
             return;
@@ -220,26 +228,25 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         }
     }, [addModalProps, className, modalIdQuerySelector]);
     useEffect(() => {
-        if (!isCloseOnBlur) {
+        if (!isCloseOnBlur || !isOpen) {
             return;
         }
         const handleClickOutside = (event) => {
             const target = event.target;
-            const modal = modalContentRef.current;
-            if (!modal || !target || !target.isConnected) {
+            if (!modalElement || !target || !target.isConnected) {
                 return;
             }
-            const isOutside = !modal.contains(target);
+            const isOutside = !modalElement.contains(target);
             if (isOutside) {
                 setIsOpen(false);
                 onCloseModal && onCloseModal();
             }
         };
-        document.addEventListener('click', handleClickOutside);
+        window.addEventListener('click', handleClickOutside);
         return () => {
-            document.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('click', handleClickOutside);
         };
-    }, [onCloseModal, isCloseOnBlur]);
+    }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
     // Save ref things
     useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
     const appearanceConfig = useAppearanceConfig(appearance, modalConfig, isDisabled);
@@ -253,7 +260,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         // Any valid React child: JSX, strings, arrays, etc.
         isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
-                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
+                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element
         modalElement));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.169",
+  "version": "1.8.170",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",