@launchpad-ui/modal - npm Package Compare versions

Comparing version 0.8.12 to 0.9.0

dist/index.es.js

@@ -12,2 +12,35 @@ import './style.css';
 import { createPortal } from "react-dom";
+const modal = "_modal_z67ae_17";
+const modalOverlay = "_modalOverlay_z67ae_27";
+const modalContent = "_modalContent_z67ae_36";
+const modalSheet = "_modalSheet_z67ae_41";
+const small = "_small_z67ae_55";
+const medium = "_medium_z67ae_59";
+const large = "_large_z67ae_63";
+const xLarge = "_xLarge_z67ae_67";
+const full = "_full_z67ae_71";
+const modalClose = "_modalClose_z67ae_92";
+const prompt = "_prompt_z67ae_98";
+const modalHeader = "_modalHeader_z67ae_114";
+const modalTitle = "_modalTitle_z67ae_120";
+const modalBody = "_modalBody_z67ae_124";
+const modalFooter = "_modalFooter_z67ae_131";
+const styles = {
+  "has-modal": "_has-modal_z67ae_13",
+  modal,
+  modalOverlay,
+  modalContent,
+  modalSheet,
+  small,
+  medium,
+  large,
+  xLarge,
+  full,
+  modalClose,
+  prompt,
+  modalHeader,
+  modalTitle,
+  modalBody,
+  modalFooter
+};
 const overlay = {
@@ -62,3 +95,3 @@ visible: {
 ).then((res) => res.domAnimation);
-const Modal$1 = ({
+const Modal = ({
   className,
@@ -79,3 +112,3 @@ withCloseButton = false,
       event.stopImmediatePropagation();
-      const latest = [...document.querySelectorAll(".Modal")].pop();
+      const latest = [...document.querySelectorAll(`[data-test-id="${testId}"]`)].pop();
       if (event.key === "Escape" && latest === ref.current) {
@@ -95,3 +128,3 @@ close();
     };
-  }, [onReady, onCancel]);
+  }, [onReady, onCancel, testId]);
   const handleOverlayClick = (event) => {
@@ -102,3 +135,3 @@ if (cancelWithOverlayClick && event.target === event.currentTarget) {
   };
-  const modalClasses = cx("Modal", className);
+  const modalClasses = cx(styles.modal, className);
   return /* @__PURE__ */ jsx(LazyMotion, {
@@ -119,3 +152,3 @@ strict: true,
         role: "presentation",
-        className: "Modal-overlay",
+        className: styles.modalOverlay,
         onMouseDown: handleOverlayClick,
@@ -132,3 +165,3 @@ children: /* @__PURE__ */ jsx(FocusTrap, {
             "aria-modal": true,
-            className: "Modal-content",
+            className: styles.modalContent,
             tabIndex: -1,
@@ -140,3 +173,3 @@ children: [withCloseButton && /* @__PURE__ */ jsx(IconButton, {
               }),
-              className: "Modal-close",
+              className: styles.modalClose,
               onClick: onCancel,
@@ -151,12 +184,13 @@ "data-test-id": "Modal-close"
 };
-const Modal = "";
 const ModalBody = ({
   className,
   children,
+  "data-test-id": testId = "modal-body",
   ...rest
 }) => {
-  const classes = cx("Modal-body", className);
+  const classes = cx(styles.modalBody, className);
   return /* @__PURE__ */ jsx("div", {
+    "data-test-id": testId,
+    className: classes,
     ...rest,
-    className: classes,
     children
@@ -168,8 +202,10 @@ });
   children,
+  "data-test-id": testId = "modal-footer",
   ...rest
 }) => {
-  const classes = cx("Modal-footer", className);
+  const classes = cx(styles.modalFooter, className);
   return /* @__PURE__ */ jsx("div", {
+    "data-test-id": testId,
+    className: classes,
     ...rest,
-    className: classes,
     children
@@ -185,14 +221,16 @@ });
   titleClassName,
+  "data-test-id": testId = "modal-header",
   ...rest
 }) => {
-  const classes = cx("Modal-header", className);
+  const classes = cx(styles.modalHeader, className);
   return /* @__PURE__ */ jsxs("div", {
+    "data-test-id": testId,
+    className: classes,
     ...rest,
-    className: classes,
     children: [/* @__PURE__ */ jsx("h2", {
       id: titleID || "Modal-title",
-      className: cx("Modal-title", titleClassName),
+      className: cx(styles.modalTitle, titleClassName),
       children
     }), closeable && /* @__PURE__ */ jsx(Close, {
-      className: "Modal-close",
+      className: styles.modalClose,
       onClick: onClose,
@@ -230,6 +268,6 @@ size: "tiny"
 }) => {
-  const classes = cx("ModalSheet", `ModalSheet--${size}`);
+  const classes = cx(styles.modalSheet, styles[`${size}`]);
   return /* @__PURE__ */ jsx(Portal, {
     className: classes,
-    children: /* @__PURE__ */ jsx(Modal$1, {
+    children: /* @__PURE__ */ jsx(Modal, {
       ...props,
@@ -245,3 +283,2 @@ transition: "slideRight",
 };
-const Prompt$1 = "";
 const Prompt = ({
@@ -252,3 +289,3 @@ className,
   return /* @__PURE__ */ jsx(Portal, {
-    className: cx("Prompt", className),
+    className: cx(styles.prompt, className),
     children
@@ -258,3 +295,3 @@ });
 export {
-  Modal$1 as Modal,
+  Modal,
   ModalBody,
@@ -261,0 +298,0 @@ ModalFooter,

dist/index.js

@@ -32,2 +32,35 @@ require('./style.css');
 }
+const modal = "_modal_z67ae_17";
+const modalOverlay = "_modalOverlay_z67ae_27";
+const modalContent = "_modalContent_z67ae_36";
+const modalSheet = "_modalSheet_z67ae_41";
+const small = "_small_z67ae_55";
+const medium = "_medium_z67ae_59";
+const large = "_large_z67ae_63";
+const xLarge = "_xLarge_z67ae_67";
+const full = "_full_z67ae_71";
+const modalClose = "_modalClose_z67ae_92";
+const prompt = "_prompt_z67ae_98";
+const modalHeader = "_modalHeader_z67ae_114";
+const modalTitle = "_modalTitle_z67ae_120";
+const modalBody = "_modalBody_z67ae_124";
+const modalFooter = "_modalFooter_z67ae_131";
+const styles = {
+  "has-modal": "_has-modal_z67ae_13",
+  modal,
+  modalOverlay,
+  modalContent,
+  modalSheet,
+  small,
+  medium,
+  large,
+  xLarge,
+  full,
+  modalClose,
+  prompt,
+  modalHeader,
+  modalTitle,
+  modalBody,
+  modalFooter
+};
 const overlay = {
@@ -80,3 +113,3 @@ visible: {
 ))).then((res) => res.domAnimation);
-const Modal$1 = ({
+const Modal = ({
   className,
@@ -97,3 +130,3 @@ withCloseButton = false,
       event.stopImmediatePropagation();
-      const latest = [...document.querySelectorAll(".Modal")].pop();
+      const latest = [...document.querySelectorAll(`[data-test-id="${testId}"]`)].pop();
       if (event.key === "Escape" && latest === ref.current) {
@@ -113,3 +146,3 @@ close();
     };
-  }, [onReady, onCancel]);
+  }, [onReady, onCancel, testId]);
   const handleOverlayClick = (event) => {
@@ -120,3 +153,3 @@ if (cancelWithOverlayClick && event.target === event.currentTarget) {
   };
-  const modalClasses = classix.cx("Modal", className);
+  const modalClasses = classix.cx(styles.modal, className);
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
@@ -137,3 +170,3 @@ strict: true,
         role: "presentation",
-        className: "Modal-overlay",
+        className: styles.modalOverlay,
         onMouseDown: handleOverlayClick,
@@ -150,3 +183,3 @@ children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
             "aria-modal": true,
-            className: "Modal-content",
+            className: styles.modalContent,
             tabIndex: -1,
@@ -158,3 +191,3 @@ children: [withCloseButton && /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
               }),
-              className: "Modal-close",
+              className: styles.modalClose,
               onClick: onCancel,
@@ -169,12 +202,13 @@ "data-test-id": "Modal-close"
 };
-const Modal = "";
 const ModalBody = ({
   className,
   children,
+  "data-test-id": testId = "modal-body",
   ...rest
 }) => {
-  const classes = classix.cx("Modal-body", className);
+  const classes = classix.cx(styles.modalBody, className);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    "data-test-id": testId,
+    className: classes,
     ...rest,
-    className: classes,
     children
@@ -186,8 +220,10 @@ });
   children,
+  "data-test-id": testId = "modal-footer",
   ...rest
 }) => {
-  const classes = classix.cx("Modal-footer", className);
+  const classes = classix.cx(styles.modalFooter, className);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    "data-test-id": testId,
+    className: classes,
     ...rest,
-    className: classes,
     children
@@ -203,14 +239,16 @@ });
   titleClassName,
+  "data-test-id": testId = "modal-header",
   ...rest
 }) => {
-  const classes = classix.cx("Modal-header", className);
+  const classes = classix.cx(styles.modalHeader, className);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    "data-test-id": testId,
+    className: classes,
     ...rest,
-    className: classes,
     children: [/* @__PURE__ */ jsxRuntime.jsx("h2", {
       id: titleID || "Modal-title",
-      className: classix.cx("Modal-title", titleClassName),
+      className: classix.cx(styles.modalTitle, titleClassName),
       children
     }), closeable && /* @__PURE__ */ jsxRuntime.jsx(icons.Close, {
-      className: "Modal-close",
+      className: styles.modalClose,
       onClick: onClose,
@@ -248,6 +286,6 @@ size: "tiny"
 }) => {
-  const classes = classix.cx("ModalSheet", `ModalSheet--${size}`);
+  const classes = classix.cx(styles.modalSheet, styles[`${size}`]);
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, {
     className: classes,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Modal$1, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(Modal, {
       ...props,
@@ -263,3 +301,2 @@ transition: "slideRight",
 };
-const Prompt$1 = "";
 const Prompt = ({
@@ -270,7 +307,7 @@ className,
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, {
-    className: classix.cx("Prompt", className),
+    className: classix.cx(styles.prompt, className),
     children
   });
 };
-exports.Modal = Modal$1;
+exports.Modal = Modal;
 exports.ModalBody = ModalBody;
@@ -277,0 +314,0 @@ exports.ModalFooter = ModalFooter;

dist/ModalBody.d.ts

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

dist/ModalFooter.d.ts

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

dist/ModalHeader.d.ts

 import type { HTMLAttributes } from 'react';
-import './styles/Modal.css';
 declare type ModalHeaderProps = HTMLAttributes<HTMLDivElement> & {
@@ -8,6 +7,7 @@ closeable?: boolean;
     onClose?(): void;
+    'data-test-id'?: string;
 };
-declare const ModalHeader: ({ className, closeable, onClose, children, titleID, titleClassName, ...rest }: ModalHeaderProps) => JSX.Element;
+declare const ModalHeader: ({ className, closeable, onClose, children, titleID, titleClassName, "data-test-id": testId, ...rest }: ModalHeaderProps) => JSX.Element;
 export { ModalHeader };
 export type { ModalHeaderProps };
 //# sourceMappingURL=ModalHeader.d.ts.map

dist/ModalSheet.d.ts

 import type { ReactNode } from 'react';
-import './styles/Modal.css';
 declare type ModalSheetProps = {
     className?: string;
     onCancel?(): void;
-    size?: 'small' | 'medium' | 'large' | 'x-large' | 'full';
+    size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';
     withCloseButton?: boolean;
@@ -8,0 +7,0 @@ children: ReactNode;

dist/Portal.d.ts

 import type { KeyboardEvent, ReactNode, RefObject } from 'react';
-import './styles/Modal.css';
 declare type PortalProps = {
@@ -4,0 +3,0 @@ containerRef?: RefObject<HTMLDivElement>;

dist/Prompt.d.ts

 import type { ReactNode } from 'react';
-import './styles/Prompt.css';
 declare type PromptProps = {
@@ -4,0 +3,0 @@ className?: string;

package.json

 {
   "name": "@launchpad-ui/modal",
-  "version": "0.8.12",
+  "version": "0.9.0",
   "status": "beta",
@@ -29,5 +29,5 @@ "publishConfig": {
   "dependencies": {
-    "@launchpad-ui/button": "~0.7.3",
+    "@launchpad-ui/button": "~0.7.4",
     "@launchpad-ui/focus-trap": "~0.1.1",
-    "@launchpad-ui/icons": "~0.5.7",
+    "@launchpad-ui/icons": "~0.5.8",
     "@launchpad-ui/progress": "~0.5.2",
@@ -34,0 +34,0 @@ "@launchpad-ui/tokens": "~0.1.5",

No alert changes

Improved metrics

Total package byte prevSize

55752

increased by8.17%

Lines of code

794

increased by9.37%

Dependency changes

• Updated@launchpad-ui/button@~0.7.4

• Updated@launchpad-ui/icons@~0.5.8