@sebgroup/green-react 3.0.0 → 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,
@@ -2077,17 +2088,19 @@ const CoreDatepicker = createComponent({
   },
   react: React
 });
-const Datepicker = ({
-  label: _label = 'Date',
-  onChange,
-  minDate,
-  maxDate,
-  value,
-  showWeeks,
-  testId,
-  selectedDate,
-  currentDate
-}) => {
+const Datepicker = _a => {
+  var {
+      label = 'Date',
+      onChange,
+      minDate,
+      maxDate,
+      value,
+      showWeeks,
+      testId,
+      selectedDate,
+      currentDate
+    } = _a,
+    props = __rest(_a, ["label", "onChange", "minDate", "maxDate", "value", "showWeeks", "testId", "selectedDate", "currentDate"]);
   if (currentDate && !value) value = currentDate;
   if (selectedDate && !value) value = selectedDate;
   const min = minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1);
@@ -2101,15 +2114,15 @@ const Datepicker = ({
   return jsx("div", Object.assign({
     className: "form-group"
   }, {
-    children: jsx(CoreDatepicker, {
+    children: jsx(CoreDatepicker, Object.assign({
       "data-testid": testId,
-      label: _label,
+      label: label,
       min: min,
       max: max,
       showWeekNumbers: showWeeks,
       onchange: onChangeHandler,
       value: value
-    })
+    }, props))
   }));
 };
 
@@ -4997,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"
@@ -5039,7 +5066,8 @@ const ModalFooter = ({
   dismiss,
   onClose,
   onConfirm,
-  onDismiss
+  onDismiss,
+  preventBackdropClose: _preventBackdropClose = false
 }) => {
   const handleConfirm = event => {
     if (onConfirm) onConfirm(event);
@@ -5065,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',
@@ -5074,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`;
@@ -5088,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))]
@@ -5115,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.0",
+  "version": "3.0.2",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.4.0",
-    "@sebgroup/chlorophyll": "^3.0.0",
+    "@sebgroup/green-core": "^1.4.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/datepicker/datepicker.d.ts

@@ -15,4 +15,4 @@ export interface DatepickerOptions {
     /** @deprecated Use `value` instead */
     currentDate?: Date;
 }
-export declare const Datepicker: ({ label, onChange, minDate, maxDate, value, showWeeks, testId, selectedDate, currentDate, }: DatepickerOptions) => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: ({ label, onChange, minDate, maxDate, value, showWeeks, testId, selectedDate, currentDate, ...props }: DatepickerOptions) => import("react/jsx-runtime").JSX.Element;

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;