@sebgroup/green-react 3.0.1 → 3.0.2

package/index.esm.js

@@ -2013,6 +2013,17 @@ function AlertRibbon({
   }));
 }
 
+/**
+ * Renders a badge component.
+ *
+ * @param {React.ReactNode} props.children - The content of the badge.
+ * @param {string} props.badgeType - The type of the badge.
+ * @param {boolean} props.isCloseable - Indicates if the badge is closeable.
+ * @param {string} props.closeText - The text for the close button.
+ * @param {string} props.customColor - The custom color for the badge.
+ * @param {string} props.customBackgroundColor - The custom background color for the badge.
+ * @returns {React.ReactNode} The rendered badge component.
+ */
 function Badge(_a) {
   var {
       children,
@@ -4999,12 +5010,26 @@ const Tabs = ({
 };
 
 const ModalHeader = ({
+  type,
+  setStatus,
+  setShouldRender,
   header: _header = '',
   id,
   onClose
 }) => {
   const handleClose = event => {
-    if (onClose) onClose(event);
+    if (type === 'slideout') {
+      setStatus && setStatus(IS_EXITING);
+      setTimeout(() => {
+        if (onClose) onClose(event);
+        setStatus && setStatus(UNMOUNTED);
+        setShouldRender && setShouldRender(false);
+      }, DELAY);
+    } else {
+      if (onClose) onClose(event);
+      setStatus && setStatus(UNMOUNTED);
+      setShouldRender && setShouldRender(false);
+    }
   };
   return jsxs("div", Object.assign({
     className: "header"
@@ -5041,7 +5066,8 @@ const ModalFooter = ({
   dismiss,
   onClose,
   onConfirm,
-  onDismiss
+  onDismiss,
+  preventBackdropClose: _preventBackdropClose = false
 }) => {
   const handleConfirm = event => {
     if (onConfirm) onConfirm(event);
@@ -5067,6 +5093,13 @@ const ModalFooter = ({
     }))]
   }));
 };
+/* This delay is the same as the one used in the aside modal mixin: /libs/chlorophyll/scss/components/modal/_mixins.scss */
+const DELAY = 500;
+const UNMOUNTED = 'unmounted';
+const IS_MOUNTING = 'is-mounting';
+const IS_ENTERING = 'is-entering';
+const ENTERED = 'entered';
+const IS_EXITING = 'is-exiting';
 const Modal = _a => {
   var {
       type = 'default',
@@ -5076,6 +5109,27 @@ const Modal = _a => {
     } = _a,
     props = __rest(_a, ["type", "id", "isOpen", "size"]);
   const [uuid, _] = useState(id);
+  const [status, setStatus] = useState(UNMOUNTED);
+  const [shouldRender, setShouldRender] = useState(false);
+  useEffect(() => {
+    if (isOpen && !shouldRender && status === UNMOUNTED) {
+      setShouldRender(true);
+      setStatus(IS_MOUNTING);
+    }
+    if (isOpen && shouldRender && status === IS_MOUNTING) {
+      setStatus(IS_ENTERING);
+      setTimeout(() => {
+        setStatus(ENTERED);
+      }, DELAY);
+    }
+    if (!isOpen && status === ENTERED) {
+      setStatus(IS_EXITING);
+      setTimeout(() => {
+        setStatus(UNMOUNTED);
+        setShouldRender(false);
+      }, DELAY);
+    }
+  }, [isOpen, shouldRender, status]);
   if (!isOpen) return null;
   const bodyId = `${uuid}_body`;
   const headerId = `${uuid}_header`;
@@ -5090,14 +5144,18 @@ const Modal = _a => {
   switch (type) {
     case 'slideout':
       {
-        let className = undefined;
-        if (size === 'lg') className = 'gds-slide-out--960';
-        if (size === 'md') className = 'gds-slide-out--768';
+        const className = classNames(status, {
+          'gds-slide-out--960': size === 'lg',
+          'gds-slide-out--768': size === 'md'
+        });
         modalContent = jsxs("aside", Object.assign({
           className: className
         }, dialogProps, {
           children: [jsx(ModalHeader, Object.assign({
-            id: headerId
+            id: headerId,
+            setStatus: setStatus,
+            setShouldRender: setShouldRender,
+            type: type
           }, props)), jsx(ModalBody, Object.assign({
             id: bodyId
           }, props)), jsx(ModalFooter, Object.assign({}, props))]
@@ -5117,24 +5175,44 @@ const Modal = _a => {
       }
     default:
       {
-        modalContent = jsxs("section", Object.assign({}, dialogProps, {
-          children: [jsx(ModalHeader, Object.assign({
-            id: headerId
-          }, props)), jsx(ModalBody, Object.assign({
-            id: bodyId
-          }, props)), jsx(ModalFooter, Object.assign({}, props))]
+        modalContent = jsx("div", Object.assign({
+          className: "gds-dialog-wrapper"
+        }, {
+          children: jsxs("section", Object.assign({}, dialogProps, {
+            children: [jsx(ModalHeader, Object.assign({
+              id: headerId
+            }, props)), jsx(ModalBody, Object.assign({
+              id: bodyId
+            }, props)), jsx(ModalFooter, Object.assign({}, props))]
+          }))
         }));
         break;
       }
   }
-  const handleBackdropClick = () => {
-    if (props.onClose) props.onClose(null);
+  const backdropClassnames = classNames('backdrop', {
+    'backdrop--transparent': type === 'slideout'
+  }, status);
+  const handleBackdropClick = event => {
+    if (props.onClose && !props.preventBackdropClose) {
+      if (type === 'slideout') {
+        setStatus && setStatus(IS_EXITING);
+        setTimeout(() => {
+          if (props.onClose) props.onClose(event);
+          setStatus && setStatus(UNMOUNTED);
+          setShouldRender && setShouldRender(false);
+        }, DELAY);
+      } else {
+        if (props.onClose) props.onClose(event);
+        setStatus && setStatus(UNMOUNTED);
+        setShouldRender && setShouldRender(false);
+      }
+    }
   };
   return jsxs(Fragment, {
     children: [modalContent, jsx("div", {
       "data-testid": "modal-backdrop",
-      className: "backdrop",
-      onClick: handleBackdropClick,
+      className: backdropClassnames,
+      onClick: e => handleBackdropClick(e),
       "aria-hidden": "true"
     })]
   });

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
     "@sebgroup/green-core": "^1.4.1",
-    "@sebgroup/chlorophyll": "^3.0.1",
+    "@sebgroup/chlorophyll": "^3.0.2",
     "@sebgroup/extract": "^3.0.0",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2"

package/src/lib/badge/badge.d.ts

@@ -8,5 +8,16 @@ export interface BadgeProps extends HTMLProps<HTMLSpanElement> {
     customColor?: string;
     customBackgroundColor?: string;
 }
+/**
+ * Renders a badge component.
+ *
+ * @param {React.ReactNode} props.children - The content of the badge.
+ * @param {string} props.badgeType - The type of the badge.
+ * @param {boolean} props.isCloseable - Indicates if the badge is closeable.
+ * @param {string} props.closeText - The text for the close button.
+ * @param {string} props.customColor - The custom color for the badge.
+ * @param {string} props.customBackgroundColor - The custom background color for the badge.
+ * @returns {React.ReactNode} The rendered badge component.
+ */
 export declare function Badge({ children, badgeType, isCloseable, closeText, customColor, customBackgroundColor, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element | null;
 export default Badge;

package/src/lib/modal/modal.d.ts

@@ -1,6 +1,6 @@
 import { ModalType, Size } from '@sebgroup/extract';
 import { MouseEvent, ReactNode } from 'react';
-declare type ModalEventListener = (event: MouseEvent<HTMLButtonElement> | null) => unknown;
+declare type ModalEventListener = (event: MouseEvent<HTMLButtonElement | HTMLDivElement> | null) => unknown;
 export interface ModalProps {
     type?: ModalType;
     header?: string;
@@ -13,6 +13,7 @@ export interface ModalProps {
     onClose?: ModalEventListener;
     onConfirm?: ModalEventListener;
     onDismiss?: ModalEventListener;
+    preventBackdropClose?: boolean;
 }
 export declare const Modal: ({ type, id, isOpen, size, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Modal;