@launchpad-ui/modal - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/index.es.js

@@ -186,13 +186,9 @@ // ../../scripts/react-shim.js
 import cx2 from "clsx";
-import { Component as Component2 } from "react";
 import "./styles/Modal.css";
-var ModalBody = class extends Component2 {
-  render() {
-    const { className, children, ...other } = this.props;
-    const classes = cx2("Modal-body", className);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes,
-      ...other
-    }, children);
-  }
+var ModalBody = ({ className, children, ...other }) => {
+  const classes = cx2("Modal-body", className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes,
+    ...other
+  }, children);
 };
@@ -202,13 +198,9 @@
 import cx3 from "clsx";
-import { Component as Component3 } from "react";
 import "./styles/Modal.css";
-var ModalFooter = class extends Component3 {
-  render() {
-    const { className, testId, children } = this.props;
-    const classes = cx3("Modal-footer", className);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes,
-      "data-test-id": testId
-    }, children);
-  }
+var ModalFooter = ({ className, testId, children }) => {
+  const classes = cx3("Modal-footer", className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes,
+    "data-test-id": testId
+  }, children);
 };
@@ -219,24 +211,23 @@
 import cx4 from "clsx";
-import { Component as Component4 } from "react";
 import "./styles/Modal.css";
-var ModalHeader = class extends Component4 {
-  render() {
-    const { className, closeable, onClose, children, titleID, titleClassName } = this.props;
-    const classes = cx4("Modal-header", className);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes
-    }, /* @__PURE__ */ React.createElement("h2", {
-      id: titleID || "Modal-title",
-      className: cx4("Modal-title", titleClassName)
-    }, children), closeable && /* @__PURE__ */ React.createElement(Close2, {
-      className: "Modal-close",
-      onClick: onClose,
-      size: IconSize2.TINY
-    }));
-  }
+var ModalHeader = ({
+  className,
+  closeable = false,
+  onClose = () => void 0,
+  children,
+  titleID,
+  titleClassName
+}) => {
+  const classes = cx4("Modal-header", className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes
+  }, /* @__PURE__ */ React.createElement("h2", {
+    id: titleID || "Modal-title",
+    className: cx4("Modal-title", titleClassName)
+  }, children), closeable && /* @__PURE__ */ React.createElement(Close2, {
+    className: "Modal-close",
+    onClick: onClose,
+    size: IconSize2.TINY
+  }));
 };
-ModalHeader.defaultProps = {
-  closeable: false,
-  onClose: () => void 0
-};
 
@@ -246,3 +237,3 @@ // src/ModalSheet.tsx
 import cx5 from "clsx";
-import { Component as Component5, Suspense } from "react";
+import { Suspense } from "react";
 
@@ -293,3 +284,3 @@ // src/ModalTransition.tsx
 import "./styles/Modal.css";
-var Portal = ({ children, containerRef, onChildrenMount, ...props }) => {
+var Portal = ({ children, containerRef, ...props }) => {
   const [portal, setPortal] = useState(null);
@@ -313,24 +304,18 @@ useEffect(() => {
 import "./styles/Modal.css";
-var ModalSheet = class extends Component5 {
-  render() {
-    const {
-      size = "small",
-      children,
-      shouldScroll,
-      resetScrollState,
-      withCloseButton = true,
-      ...props
-    } = this.props;
-    const classes = cx5("ModalSheet", `ModalSheet--${size}`);
-    return /* @__PURE__ */ React.createElement(Portal, {
-      ...props,
-      className: classes
-    }, /* @__PURE__ */ React.createElement(ModalTransition, {
-      ...this.props,
-      transition: "slideRight",
-      withCloseButton
-    }, /* @__PURE__ */ React.createElement(Suspense, {
-      fallback: /* @__PURE__ */ React.createElement(Progress, null)
-    }, children)));
-  }
+var ModalSheet = ({
+  size = "small",
+  children,
+  withCloseButton = true,
+  ...props
+}) => {
+  const classes = cx5("ModalSheet", `ModalSheet--${size}`);
+  return /* @__PURE__ */ React.createElement(Portal, {
+    className: classes
+  }, /* @__PURE__ */ React.createElement(ModalTransition, {
+    ...props,
+    transition: "slideRight",
+    withCloseButton
+  }, /* @__PURE__ */ React.createElement(Suspense, {
+    fallback: /* @__PURE__ */ React.createElement(Progress, null)
+  }, children)));
 };
@@ -337,0 +322,0 @@

dist/index.js

@@ -221,13 +221,9 @@ var __create = Object.create;
 var import_clsx2 = __toESM(require("clsx"));
-var import_react2 = require("react");
 var import_Modal = require("./styles/Modal.css");
-var ModalBody = class extends import_react2.Component {
-  render() {
-    const { className, children, ...other } = this.props;
-    const classes = (0, import_clsx2.default)("Modal-body", className);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes,
-      ...other
-    }, children);
-  }
+var ModalBody = ({ className, children, ...other }) => {
+  const classes = (0, import_clsx2.default)("Modal-body", className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes,
+    ...other
+  }, children);
 };
@@ -237,13 +233,9 @@
 var import_clsx3 = __toESM(require("clsx"));
-var import_react3 = require("react");
 var import_Modal2 = require("./styles/Modal.css");
-var ModalFooter = class extends import_react3.Component {
-  render() {
-    const { className, testId, children } = this.props;
-    const classes = (0, import_clsx3.default)("Modal-footer", className);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes,
-      "data-test-id": testId
-    }, children);
-  }
+var ModalFooter = ({ className, testId, children }) => {
+  const classes = (0, import_clsx3.default)("Modal-footer", className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes,
+    "data-test-id": testId
+  }, children);
 };
@@ -254,24 +246,23 @@
 var import_clsx4 = __toESM(require("clsx"));
-var import_react4 = require("react");
 var import_Modal3 = require("./styles/Modal.css");
-var ModalHeader = class extends import_react4.Component {
-  render() {
-    const { className, closeable, onClose, children, titleID, titleClassName } = this.props;
-    const classes = (0, import_clsx4.default)("Modal-header", className);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes
-    }, /* @__PURE__ */ React.createElement("h2", {
-      id: titleID || "Modal-title",
-      className: (0, import_clsx4.default)("Modal-title", titleClassName)
-    }, children), closeable && /* @__PURE__ */ React.createElement(import_icons2.Close, {
-      className: "Modal-close",
-      onClick: onClose,
-      size: import_icons2.IconSize.TINY
-    }));
-  }
+var ModalHeader = ({
+  className,
+  closeable = false,
+  onClose = () => void 0,
+  children,
+  titleID,
+  titleClassName
+}) => {
+  const classes = (0, import_clsx4.default)("Modal-header", className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes
+  }, /* @__PURE__ */ React.createElement("h2", {
+    id: titleID || "Modal-title",
+    className: (0, import_clsx4.default)("Modal-title", titleClassName)
+  }, children), closeable && /* @__PURE__ */ React.createElement(import_icons2.Close, {
+    className: "Modal-close",
+    onClick: onClose,
+    size: import_icons2.IconSize.TINY
+  }));
 };
-ModalHeader.defaultProps = {
-  closeable: false,
-  onClose: () => void 0
-};
 
@@ -281,7 +272,7 @@ // src/ModalSheet.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react7 = require("react");
+var import_react4 = require("react");
 
 // src/ModalTransition.tsx
 var import_web2 = require("@react-spring/web");
-var import_react5 = require("react");
+var import_react2 = require("react");
 var import_Modal5 = require("./styles/Modal.css");
@@ -318,3 +309,3 @@ var springConfig = { tension: 180, friction: 12, bounce: 0 };
 };
-var ModalTransition = (0, import_react5.forwardRef)((props, ref) => /* @__PURE__ */ React.createElement(ModalTransitionComponent, {
+var ModalTransition = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ React.createElement(ModalTransitionComponent, {
   ...props,
@@ -326,8 +317,8 @@ ref
 // src/Portal.tsx
-var import_react6 = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 var import_Modal6 = require("./styles/Modal.css");
-var Portal = ({ children, containerRef, onChildrenMount, ...props }) => {
-  const [portal, setPortal] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+var Portal = ({ children, containerRef, ...props }) => {
+  const [portal, setPortal] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
     const portal2 = document.createElement("div");
@@ -349,24 +340,18 @@ portal2.classList.add("Portal");
 var import_Modal7 = require("./styles/Modal.css");
-var ModalSheet = class extends import_react7.Component {
-  render() {
-    const {
-      size = "small",
-      children,
-      shouldScroll,
-      resetScrollState,
-      withCloseButton = true,
-      ...props
-    } = this.props;
-    const classes = (0, import_clsx5.default)("ModalSheet", `ModalSheet--${size}`);
-    return /* @__PURE__ */ React.createElement(Portal, {
-      ...props,
-      className: classes
-    }, /* @__PURE__ */ React.createElement(ModalTransition, {
-      ...this.props,
-      transition: "slideRight",
-      withCloseButton
-    }, /* @__PURE__ */ React.createElement(import_react7.Suspense, {
-      fallback: /* @__PURE__ */ React.createElement(import_progress.Progress, null)
-    }, children)));
-  }
+var ModalSheet = ({
+  size = "small",
+  children,
+  withCloseButton = true,
+  ...props
+}) => {
+  const classes = (0, import_clsx5.default)("ModalSheet", `ModalSheet--${size}`);
+  return /* @__PURE__ */ React.createElement(Portal, {
+    className: classes
+  }, /* @__PURE__ */ React.createElement(ModalTransition, {
+    ...props,
+    transition: "slideRight",
+    withCloseButton
+  }, /* @__PURE__ */ React.createElement(import_react4.Suspense, {
+    fallback: /* @__PURE__ */ React.createElement(import_progress.Progress, null)
+  }, children)));
 };
@@ -373,0 +358,0 @@

dist/ModalBody.d.ts

@@ -1,2 +0,2 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import './styles/Modal.css';
@@ -8,7 +8,5 @@ declare type ModalBodyProps = {
 };
-declare class ModalBody extends Component<ModalBodyProps> {
-    render(): JSX.Element;
-}
+declare const ModalBody: ({ className, children, ...other }: ModalBodyProps) => JSX.Element;
 export { ModalBody };
 export type { ModalBodyProps };
 //# sourceMappingURL=ModalBody.d.ts.map

dist/ModalFooter.d.ts

@@ -1,2 +0,2 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import './styles/Modal.css';
@@ -8,7 +8,5 @@ declare type ModalFooterProps = {
 };
-declare class ModalFooter extends Component<ModalFooterProps> {
-    render(): JSX.Element;
-}
+declare const ModalFooter: ({ className, testId, children }: ModalFooterProps) => JSX.Element;
 export { ModalFooter };
 export type { ModalFooterProps };
 //# sourceMappingURL=ModalFooter.d.ts.map

dist/ModalHeader.d.ts

@@ -1,2 +0,2 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import './styles/Modal.css';
@@ -11,11 +11,5 @@ declare type ModalHeaderProps = {
 };
-declare class ModalHeader extends Component<ModalHeaderProps> {
-    static defaultProps: {
-        closeable: boolean;
-        onClose: () => undefined;
-    };
-    render(): JSX.Element;
-}
+declare const ModalHeader: ({ className, closeable, onClose, children, titleID, titleClassName, }: ModalHeaderProps) => JSX.Element;
 export { ModalHeader };
 export type { ModalHeaderProps };
 //# sourceMappingURL=ModalHeader.d.ts.map

dist/ModalSheet.d.ts

@@ -1,2 +0,2 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import './styles/Modal.css';
@@ -13,7 +13,5 @@ declare type ModalSheetProps = {
 };
-declare class ModalSheet extends Component<ModalSheetProps> {
-    render(): JSX.Element;
-}
+declare const ModalSheet: ({ size, children, withCloseButton, ...props }: ModalSheetProps) => JSX.Element;
 export { ModalSheet };
 export type { ModalSheetProps };
 //# sourceMappingURL=ModalSheet.d.ts.map

dist/Portal.d.ts

@@ -5,3 +5,2 @@ import type { KeyboardEvent } from 'react';
     containerRef?: (node: HTMLDivElement) => void;
-    onChildrenMount?: () => void;
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
@@ -11,5 +10,5 @@ className?: string;
 };
-declare const Portal: ({ children, containerRef, onChildrenMount, ...props }: PortalProps) => import("react").ReactPortal | null;
+declare const Portal: ({ children, containerRef, ...props }: PortalProps) => import("react").ReactPortal | null;
 export { Portal };
 export type { PortalProps };
 //# sourceMappingURL=Portal.d.ts.map

package.json

 {
   "name": "@launchpad-ui/modal",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "publishConfig": {
@@ -29,4 +29,4 @@ "access": "public"
     "@launchpad-ui/button": "~0.1.6",
-    "@launchpad-ui/icons": "~0.1.5",
-    "@launchpad-ui/progress": "~0.1.4",
+    "@launchpad-ui/icons": "~0.1.6",
+    "@launchpad-ui/progress": "~0.1.5",
     "@launchpad-ui/tokens": "~0.1.4",
@@ -33,0 +33,0 @@ "@react-aria/focus": "^3.6.0",

No alert changes

Worsened metrics

Total package byte prevSize

77908

decreased by-3.95%

Lines of code

845

decreased by-4.84%

Dependency changes

• Updated@launchpad-ui/icons@~0.1.6

• Updated@launchpad-ui/progress@~0.1.5