@launchpad-ui/modal - npm Package Compare versions

Comparing version 0.10.1 to 0.11.0

dist/index.d.ts

 export type { ModalProps } from './Modal';
 export { Modal } from './Modal';
-export type { ModalBodyProps } from './ModalBody';
-export { ModalBody } from './ModalBody';
-export type { ModalFooterProps } from './ModalFooter';
-export { ModalFooter } from './ModalFooter';
-export type { ModalHeaderProps } from './ModalHeader';
-export { ModalHeader } from './ModalHeader';
 //# sourceMappingURL=index.d.ts.map

dist/index.es.js

 import './style.css';
-import { IconButton } from "@launchpad-ui/button";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { FocusTrap } from "@launchpad-ui/focus-trap";
-import { Close } from "@launchpad-ui/icons";
 import { Portal } from "@launchpad-ui/portal";
@@ -9,23 +8,64 @@ import { usePreventScroll } from "@react-aria/overlays";
 import { LazyMotion, m } from "framer-motion";
-import { useRef, useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-const MODAL_LABELLED_BY = "modal-title";
-const modal = "_modal_4q7un_7";
-const overlay$1 = "_overlay_4q7un_17";
-const content = "_content_4q7un_29";
-const header = "_header_4q7un_37";
-const title = "_title_4q7un_43";
-const body = "_body_4q7un_47";
-const footer = "_footer_4q7un_54";
-const closeButton = "_closeButton_4q7un_59";
+import { useState, useEffect, useRef } from "react";
+import { ButtonGroup, IconButton } from "@launchpad-ui/button";
+import { Warning, Close } from "@launchpad-ui/icons";
+const overlayContainer = "_overlayContainer_jkvtc_7";
+const overlay$1 = "_overlay_jkvtc_7";
+const modal = "_modal_jkvtc_23";
+const header = "_header_jkvtc_37";
+const title = "_title_jkvtc_43";
+const headerIcon = "_headerIcon_jkvtc_51";
+const headerMain = "_headerMain_jkvtc_59";
+const headerDescription = "_headerDescription_jkvtc_65";
+const headerRequiredFields = "_headerRequiredFields_jkvtc_71";
+const requiredAsterisk = "_requiredAsterisk_jkvtc_77";
+const closeButton = "_closeButton_jkvtc_81";
+const body = "_body_jkvtc_86";
+const footer = "_footer_jkvtc_101";
+const footerActions = "_footerActions_jkvtc_107";
+const small = "_small_jkvtc_126";
+const normal = "_normal_jkvtc_131";
+const auto = "_auto_jkvtc_135";
 const styles = {
+  overlayContainer,
+  overlay: overlay$1,
   modal,
-  overlay: overlay$1,
-  content,
   header,
   title,
+  headerIcon,
+  headerMain,
+  headerDescription,
+  headerRequiredFields,
+  requiredAsterisk,
+  closeButton,
   body,
   footer,
-  closeButton
+  footerActions,
+  small,
+  normal,
+  auto
 };
+const ModalBody = ({
+  children
+}) => /* @__PURE__ */ jsx("div", {
+  className: styles.body,
+  "data-test-id": "modal-body",
+  children
+});
+const MODAL_LABELLED_BY = "modal-title";
+const useMediaQuery = (query) => {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const handleMediaChange = () => {
+      setMatches(media.matches);
+    };
+    media.addEventListener("change", handleMediaChange);
+    return () => media.addEventListener("change", handleMediaChange);
+  }, [matches, query]);
+  return matches;
+};
 const overlay = {
@@ -42,14 +82,32 @@ visible: {
 };
-const pop = {
-  hidden: {
-    opacity: 0,
-    scale: 0.9
+const transitions = {
+  desktopPop: {
+    hidden: {
+      opacity: 0,
+      scale: 0.9
+    },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: "spring",
+        delay: 0.1,
+        duration: 0.15
+      }
+    }
   },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    transition: {
-      type: "spring",
-      delay: 0.1,
-      duration: 0.15
+  mobileSlideUp: {
+    hidden: {
+      opacity: 0,
+      y: "25%"
+    },
+    visible: {
+      opacity: 1,
+      y: "0%",
+      transition: {
+        type: "spring",
+        delay: 0.15,
+        duration: 0.2,
+        bounce: 0
+      }
     }
@@ -63,13 +121,19 @@ }
 ).then((res) => res.domAnimation);
-const Modal = ({
-  className,
-  withCloseButton = true,
+const ModalContainer = ({
   cancelWithOverlayClick = true,
   children,
+  onCancel,
+  size = "normal",
+  className,
   onReady,
-  onCancel,
-  "data-test-id": testId = "modal"
+  "data-test-id": testId
 }) => {
   const ref = useRef(null);
   usePreventScroll();
+  const isDesktopViewport = useMediaQuery("(min-width: 430px)");
+  const handleOverlayClick = (event) => {
+    if (cancelWithOverlayClick && event.target === event.currentTarget) {
+      onCancel && onCancel();
+    }
+  };
   useEffect(() => {
@@ -93,8 +157,3 @@ const handleEscape = (event) => {
     };
-  }, [onReady, onCancel, testId]);
-  const handleOverlayClick = (event) => {
-    if (cancelWithOverlayClick && event.target === event.currentTarget) {
-      onCancel && onCancel();
-    }
-  };
+  }, [onReady, onCancel]);
   return /* @__PURE__ */ jsx(Portal, {
@@ -105,5 +164,5 @@ children: /* @__PURE__ */ jsx(LazyMotion, {
       children: /* @__PURE__ */ jsx("div", {
-        className: cx(styles.modal, className),
+        className: styles.overlayContainer,
         "data-modal": true,
-        "data-test-id": testId,
+        "data-test-id": "modal-overlay-container",
         ref,
@@ -119,2 +178,3 @@ children: /* @__PURE__ */ jsx(m.div, {
           className: styles.overlay,
+          "data-test-id": "modal-overlay",
           onMouseDown: handleOverlayClick,
@@ -124,20 +184,13 @@ children: /* @__PURE__ */ jsx(FocusTrap, {
             restoreFocus: true,
-            children: /* @__PURE__ */ jsxs(m.div, {
+            children: /* @__PURE__ */ jsx(m.div, {
               initial: "hidden",
               animate: "visible",
-              variants: pop,
+              variants: isDesktopViewport ? transitions.desktopPop : transitions.mobileSlideUp,
               role: "dialog",
               "aria-labelledby": MODAL_LABELLED_BY,
               "aria-modal": true,
-              className: styles.content,
+              "data-test-id": testId,
+              className: cx(styles.modal, styles[size], className),
               tabIndex: -1,
-              children: [withCloseButton && /* @__PURE__ */ jsx(IconButton, {
-                "aria-label": "close",
-                icon: /* @__PURE__ */ jsx(Close, {
-                  size: "medium"
-                }),
-                className: styles.closeButton,
-                onClick: onCancel,
-                "data-test-id": "modal-close-button"
-              }), children]
+              children
             })
@@ -150,54 +203,97 @@ })
 };
-const ModalBody = ({
-  className,
-  children,
-  "data-test-id": testId = "modal-body",
-  ...rest
-}) => {
-  const classes = cx(styles.body, className);
-  return /* @__PURE__ */ jsx("div", {
-    "data-test-id": testId,
-    className: classes,
-    ...rest,
-    children
-  });
-};
 const ModalFooter = ({
-  className,
-  children,
-  "data-test-id": testId = "modal-footer",
-  ...rest
-}) => {
-  const classes = cx(styles.footer, className);
-  return /* @__PURE__ */ jsx("div", {
-    "data-test-id": testId,
-    className: classes,
-    ...rest,
-    children
-  });
-};
+  secondaryButton,
+  primaryButton
+}) => /* @__PURE__ */ jsx("div", {
+  className: styles.footer,
+  "data-test-id": "modal-footer",
+  children: /* @__PURE__ */ jsxs(ButtonGroup, {
+    className: styles.footerActions,
+    children: [secondaryButton, primaryButton]
+  })
+});
 const ModalHeader = ({
+  withCloseButton = true,
+  onCancel,
+  status,
+  title: title2,
+  hasRequiredField,
+  description
+}) => /* @__PURE__ */ jsxs("div", {
+  className: styles.header,
+  children: [/* @__PURE__ */ jsxs("div", {
+    className: styles.headerMain,
+    children: [status === "warning" && /* @__PURE__ */ jsx(Warning, {
+      "data-test-id": "modal-header-icon",
+      size: "medium",
+      className: styles.headerIcon
+    }), /* @__PURE__ */ jsx("h2", {
+      id: MODAL_LABELLED_BY,
+      "data-test-id": "modal-title",
+      className: styles.title,
+      children: title2
+    }), withCloseButton && /* @__PURE__ */ jsx(IconButton, {
+      "aria-label": "close",
+      icon: /* @__PURE__ */ jsx(Close, {
+        size: "medium"
+      }),
+      className: styles.closeButton,
+      onClick: onCancel,
+      "data-test-id": "modal-close-button"
+    })]
+  }), description && /* @__PURE__ */ jsx("p", {
+    className: styles.headerDescription,
+    "data-test-id": "modal-description",
+    children: description
+  }), hasRequiredField && /* @__PURE__ */ jsxs("div", {
+    className: styles.headerRequiredFields,
+    "data-test-id": "modal-required-field",
+    children: [/* @__PURE__ */ jsx("span", {
+      className: styles.requiredAsterisk,
+      children: "*"
+    }), " Required field"]
+  })]
+});
+const Modal = ({
   className,
+  withCloseButton = true,
+  cancelWithOverlayClick = true,
   children,
-  "data-test-id": testId = "modal-header",
-  ...rest
+  onReady,
+  onCancel,
+  size,
+  status,
+  title: title2,
+  hasRequiredField,
+  primaryButton,
+  secondaryButton,
+  description,
+  "data-test-id": testId = "modal"
 }) => {
-  const classes = cx(styles.header, className);
-  return /* @__PURE__ */ jsx("div", {
+  const hasFooter = !!(primaryButton || secondaryButton);
+  return /* @__PURE__ */ jsxs(ModalContainer, {
+    onCancel,
+    onReady,
+    cancelWithOverlayClick,
+    size,
+    className,
     "data-test-id": testId,
-    className: classes,
-    ...rest,
-    children: /* @__PURE__ */ jsx("h2", {
-      id: MODAL_LABELLED_BY,
-      className: styles.title,
+    children: [/* @__PURE__ */ jsx(ModalHeader, {
+      withCloseButton,
+      title: title2,
+      status,
+      onCancel,
+      description,
+      hasRequiredField
+    }), /* @__PURE__ */ jsx(ModalBody, {
       children
-    })
+    }), hasFooter && /* @__PURE__ */ jsx(ModalFooter, {
+      secondaryButton,
+      primaryButton
+    })]
   });
 };
 export {
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader
+  Modal
 };
 //# sourceMappingURL=index.es.js.map

dist/index.js

 require('./style.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const button = require("@launchpad-ui/button");
+const jsxRuntime = require("react/jsx-runtime");
 const focusTrap = require("@launchpad-ui/focus-trap");
-const icons = require("@launchpad-ui/icons");
 const portal = require("@launchpad-ui/portal");
@@ -12,3 +11,4 @@ const overlays = require("@react-aria/overlays");
 const react = require("react");
-const jsxRuntime = require("react/jsx-runtime");
+const button = require("@launchpad-ui/button");
+const icons = require("@launchpad-ui/icons");
 function _interopNamespace(e) {
@@ -32,21 +32,61 @@ if (e && e.__esModule)
 }
-const MODAL_LABELLED_BY = "modal-title";
-const modal = "_modal_4q7un_7";
-const overlay$1 = "_overlay_4q7un_17";
-const content = "_content_4q7un_29";
-const header = "_header_4q7un_37";
-const title = "_title_4q7un_43";
-const body = "_body_4q7un_47";
-const footer = "_footer_4q7un_54";
-const closeButton = "_closeButton_4q7un_59";
+const overlayContainer = "_overlayContainer_jkvtc_7";
+const overlay$1 = "_overlay_jkvtc_7";
+const modal = "_modal_jkvtc_23";
+const header = "_header_jkvtc_37";
+const title = "_title_jkvtc_43";
+const headerIcon = "_headerIcon_jkvtc_51";
+const headerMain = "_headerMain_jkvtc_59";
+const headerDescription = "_headerDescription_jkvtc_65";
+const headerRequiredFields = "_headerRequiredFields_jkvtc_71";
+const requiredAsterisk = "_requiredAsterisk_jkvtc_77";
+const closeButton = "_closeButton_jkvtc_81";
+const body = "_body_jkvtc_86";
+const footer = "_footer_jkvtc_101";
+const footerActions = "_footerActions_jkvtc_107";
+const small = "_small_jkvtc_126";
+const normal = "_normal_jkvtc_131";
+const auto = "_auto_jkvtc_135";
 const styles = {
+  overlayContainer,
+  overlay: overlay$1,
   modal,
-  overlay: overlay$1,
-  content,
   header,
   title,
+  headerIcon,
+  headerMain,
+  headerDescription,
+  headerRequiredFields,
+  requiredAsterisk,
+  closeButton,
   body,
   footer,
-  closeButton
+  footerActions,
+  small,
+  normal,
+  auto
 };
+const ModalBody = ({
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+  className: styles.body,
+  "data-test-id": "modal-body",
+  children
+});
+const MODAL_LABELLED_BY = "modal-title";
+const useMediaQuery = (query) => {
+  const [matches, setMatches] = react.useState(false);
+  react.useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const handleMediaChange = () => {
+      setMatches(media.matches);
+    };
+    media.addEventListener("change", handleMediaChange);
+    return () => media.addEventListener("change", handleMediaChange);
+  }, [matches, query]);
+  return matches;
+};
 const overlay = {
@@ -63,14 +103,32 @@ visible: {
 };
-const pop = {
-  hidden: {
-    opacity: 0,
-    scale: 0.9
+const transitions = {
+  desktopPop: {
+    hidden: {
+      opacity: 0,
+      scale: 0.9
+    },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: "spring",
+        delay: 0.1,
+        duration: 0.15
+      }
+    }
   },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    transition: {
-      type: "spring",
-      delay: 0.1,
-      duration: 0.15
+  mobileSlideUp: {
+    hidden: {
+      opacity: 0,
+      y: "25%"
+    },
+    visible: {
+      opacity: 1,
+      y: "0%",
+      transition: {
+        type: "spring",
+        delay: 0.15,
+        duration: 0.2,
+        bounce: 0
+      }
     }
@@ -82,13 +140,19 @@ }
 ))).then((res) => res.domAnimation);
-const Modal = ({
-  className,
-  withCloseButton = true,
+const ModalContainer = ({
   cancelWithOverlayClick = true,
   children,
+  onCancel,
+  size = "normal",
+  className,
   onReady,
-  onCancel,
-  "data-test-id": testId = "modal"
+  "data-test-id": testId
 }) => {
   const ref = react.useRef(null);
   overlays.usePreventScroll();
+  const isDesktopViewport = useMediaQuery("(min-width: 430px)");
+  const handleOverlayClick = (event) => {
+    if (cancelWithOverlayClick && event.target === event.currentTarget) {
+      onCancel && onCancel();
+    }
+  };
   react.useEffect(() => {
@@ -112,8 +176,3 @@ const handleEscape = (event) => {
     };
-  }, [onReady, onCancel, testId]);
-  const handleOverlayClick = (event) => {
-    if (cancelWithOverlayClick && event.target === event.currentTarget) {
-      onCancel && onCancel();
-    }
-  };
+  }, [onReady, onCancel]);
   return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
@@ -124,5 +183,5 @@ children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classix.cx(styles.modal, className),
+        className: styles.overlayContainer,
         "data-modal": true,
-        "data-test-id": testId,
+        "data-test-id": "modal-overlay-container",
         ref,
@@ -138,2 +197,3 @@ children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.m.div, {
           className: styles.overlay,
+          "data-test-id": "modal-overlay",
           onMouseDown: handleOverlayClick,
@@ -143,20 +203,13 @@ children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
             restoreFocus: true,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.m.div, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.m.div, {
               initial: "hidden",
               animate: "visible",
-              variants: pop,
+              variants: isDesktopViewport ? transitions.desktopPop : transitions.mobileSlideUp,
               role: "dialog",
               "aria-labelledby": MODAL_LABELLED_BY,
               "aria-modal": true,
-              className: styles.content,
+              "data-test-id": testId,
+              className: classix.cx(styles.modal, styles[size], className),
               tabIndex: -1,
-              children: [withCloseButton && /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
-                "aria-label": "close",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, {
-                  size: "medium"
-                }),
-                className: styles.closeButton,
-                onClick: onCancel,
-                "data-test-id": "modal-close-button"
-              }), children]
+              children
             })
@@ -169,52 +222,95 @@ })
 };
-const ModalBody = ({
-  className,
-  children,
-  "data-test-id": testId = "modal-body",
-  ...rest
-}) => {
-  const classes = classix.cx(styles.body, className);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    "data-test-id": testId,
-    className: classes,
-    ...rest,
-    children
-  });
-};
 const ModalFooter = ({
-  className,
-  children,
-  "data-test-id": testId = "modal-footer",
-  ...rest
-}) => {
-  const classes = classix.cx(styles.footer, className);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    "data-test-id": testId,
-    className: classes,
-    ...rest,
-    children
-  });
-};
+  secondaryButton,
+  primaryButton
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+  className: styles.footer,
+  "data-test-id": "modal-footer",
+  children: /* @__PURE__ */ jsxRuntime.jsxs(button.ButtonGroup, {
+    className: styles.footerActions,
+    children: [secondaryButton, primaryButton]
+  })
+});
 const ModalHeader = ({
+  withCloseButton = true,
+  onCancel,
+  status,
+  title: title2,
+  hasRequiredField,
+  description
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+  className: styles.header,
+  children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: styles.headerMain,
+    children: [status === "warning" && /* @__PURE__ */ jsxRuntime.jsx(icons.Warning, {
+      "data-test-id": "modal-header-icon",
+      size: "medium",
+      className: styles.headerIcon
+    }), /* @__PURE__ */ jsxRuntime.jsx("h2", {
+      id: MODAL_LABELLED_BY,
+      "data-test-id": "modal-title",
+      className: styles.title,
+      children: title2
+    }), withCloseButton && /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
+      "aria-label": "close",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, {
+        size: "medium"
+      }),
+      className: styles.closeButton,
+      onClick: onCancel,
+      "data-test-id": "modal-close-button"
+    })]
+  }), description && /* @__PURE__ */ jsxRuntime.jsx("p", {
+    className: styles.headerDescription,
+    "data-test-id": "modal-description",
+    children: description
+  }), hasRequiredField && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: styles.headerRequiredFields,
+    "data-test-id": "modal-required-field",
+    children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
+      className: styles.requiredAsterisk,
+      children: "*"
+    }), " Required field"]
+  })]
+});
+const Modal = ({
   className,
+  withCloseButton = true,
+  cancelWithOverlayClick = true,
   children,
-  "data-test-id": testId = "modal-header",
-  ...rest
+  onReady,
+  onCancel,
+  size,
+  status,
+  title: title2,
+  hasRequiredField,
+  primaryButton,
+  secondaryButton,
+  description,
+  "data-test-id": testId = "modal"
 }) => {
-  const classes = classix.cx(styles.header, className);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+  const hasFooter = !!(primaryButton || secondaryButton);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalContainer, {
+    onCancel,
+    onReady,
+    cancelWithOverlayClick,
+    size,
+    className,
     "data-test-id": testId,
-    className: classes,
-    ...rest,
-    children: /* @__PURE__ */ jsxRuntime.jsx("h2", {
-      id: MODAL_LABELLED_BY,
-      className: styles.title,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(ModalHeader, {
+      withCloseButton,
+      title: title2,
+      status,
+      onCancel,
+      description,
+      hasRequiredField
+    }), /* @__PURE__ */ jsxRuntime.jsx(ModalBody, {
       children
-    })
+    }), hasFooter && /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, {
+      secondaryButton,
+      primaryButton
+    })]
   });
 };
 exports.Modal = Modal;
-exports.ModalBody = ModalBody;
-exports.ModalFooter = ModalFooter;
-exports.ModalHeader = ModalHeader;
 //# sourceMappingURL=index.js.map

dist/Modal.d.ts

 import type { ReactNode } from 'react';
 declare type ModalProps = {
-    children?: ReactNode;
+    children: ReactNode;
     className?: string;
@@ -9,7 +9,14 @@ withCloseButton?: boolean;
     onCancel?(): void;
+    size?: 'small' | 'normal' | 'auto';
+    status?: 'warning';
+    hasRequiredField?: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    primaryButton?: ReactNode;
+    secondaryButton?: ReactNode;
     'data-test-id'?: string;
 };
-declare const Modal: ({ className, withCloseButton, cancelWithOverlayClick, children, onReady, onCancel, "data-test-id": testId, }: ModalProps) => JSX.Element;
+declare const Modal: ({ className, withCloseButton, cancelWithOverlayClick, children, onReady, onCancel, size, status, title, hasRequiredField, primaryButton, secondaryButton, description, "data-test-id": testId, }: ModalProps) => JSX.Element;
 export { Modal };
 export type { ModalProps };
 //# sourceMappingURL=Modal.d.ts.map

dist/ModalBody.d.ts

 import type { HTMLAttributes } from 'react';
-declare type ModalBodyProps = HTMLAttributes<HTMLDivElement> & {
-    'data-test-id'?: string;
-};
-declare const ModalBody: ({ className, children, "data-test-id": testId, ...rest }: ModalBodyProps) => JSX.Element;
+declare type ModalBodyProps = HTMLAttributes<HTMLDivElement>;
+declare const ModalBody: ({ children }: ModalBodyProps) => JSX.Element;
 export { ModalBody };
 export type { ModalBodyProps };
 //# sourceMappingURL=ModalBody.d.ts.map

dist/ModalFooter.d.ts

@@ -1,8 +0,7 @@
-import type { HTMLAttributes } from 'react';
-declare type ModalFooterProps = HTMLAttributes<HTMLDivElement> & {
-    'data-test-id'?: string;
-};
-declare const ModalFooter: ({ className, children, "data-test-id": testId, ...rest }: ModalFooterProps) => JSX.Element;
+/// <reference types="react" />
+import type { ModalProps } from './Modal';
+declare type ModalFooterProps = Pick<ModalProps, 'secondaryButton' | 'primaryButton'>;
+declare const ModalFooter: ({ secondaryButton, primaryButton }: ModalFooterProps) => JSX.Element;
 export { ModalFooter };
 export type { ModalFooterProps };
 //# sourceMappingURL=ModalFooter.d.ts.map

dist/ModalHeader.d.ts

@@ -1,8 +0,7 @@
-import type { HTMLAttributes } from 'react';
-declare type ModalHeaderProps = HTMLAttributes<HTMLDivElement> & {
-    'data-test-id'?: string;
-};
-declare const ModalHeader: ({ className, children, "data-test-id": testId, ...rest }: ModalHeaderProps) => JSX.Element;
+/// <reference types="react" />
+import type { ModalProps } from './Modal';
+declare type ModalHeaderProps = Pick<ModalProps, 'withCloseButton' | 'onCancel' | 'status' | 'hasRequiredField' | 'title' | 'description'>;
+declare const ModalHeader: ({ withCloseButton, onCancel, status, title, hasRequiredField, description, }: ModalHeaderProps) => JSX.Element;
 export { ModalHeader };
 export type { ModalHeaderProps };
 //# sourceMappingURL=ModalHeader.d.ts.map

package.json

 {
   "name": "@launchpad-ui/modal",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "status": "beta",
@@ -33,3 +33,2 @@ "publishConfig": {
     "@launchpad-ui/portal": "~0.1.0",
-    "@launchpad-ui/progress": "~0.5.3",
     "@launchpad-ui/tokens": "~0.2.0",
@@ -36,0 +35,0 @@ "@react-aria/overlays": "^3.11.0",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55486

increased by48.92%

Dependency count

10

decreased by-9.09%

Number of package files

23

increased by21.05%

Lines of code

769

increased by53.19%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@launchpad-ui/progress@~0.5.3

• - Removed@launchpad-ui/progress@0.5.57(transitive)

• - Removed@launchpad-ui/tokens@0.12.3(transitive)

• - Removedclassix@2.2.0(transitive)