morse-react-dialogs - npm Package Compare versions

Comparing version 3.0.0-alpha.6 to 3.0.0-alpha.7

dist/components/AutoDialog.d.ts

@@ -1,8 +0,9 @@
-import { ReactNode } from "react";
-import { DialogProps } from "./Dialog";
+/// <reference types="react" />
+import { DialogIcon, DialogProps } from "./Dialog";
 import { DialogTitleProps } from "./DialogTitle";
 export declare type AutoDialogProps = DialogProps & Omit<DialogTitleProps, "children"> & {
-    title?: ReactNode;
+    title?: string;
     buttons?: JSX.Element[] | JSX.Element;
+    icon?: DialogIcon;
 };
 export declare const AutoDialog: (props: AutoDialogProps) => JSX.Element;

dist/components/AutoDialog.js

@@ -18,6 +18,7 @@ "use strict";
 exports.AutoDialog = void 0;
+var morse_react_1 = require("morse-react");
 var react_1 = __importDefault(require("react"));
 var Dialog_1 = require("./Dialog");
 var AutoDialog = function (props) {
-    var buttons = props.buttons, title = props.title, icon = props.icon, closeIcon = props.closeIcon, closeText = props.closeText, closeButtonClassName = props.closeButtonClassName, allowDismiss = props.allowDismiss, onDismissed = props.onDismissed;
+    var buttons = props.buttons, title = props.title, icon = props.icon, allowDismiss = props.allowDismiss, onDismissed = props.onDismissed;
     var classes = ["c-dialog", props.stretch];
@@ -27,10 +28,9 @@ if (props.className) {
     }
-    return (react_1.default.createElement(Dialog_1.Dialog, __assign({}, props),
-        react_1.default.createElement(Dialog_1.Dialog.Header, null,
-            react_1.default.createElement(Dialog_1.Dialog.Title, { icon: icon, onDismissed: onDismissed, showClose: allowDismiss, closeIcon: closeIcon, closeText: closeText, closeButtonClassName: closeButtonClassName }, title)),
+    return (react_1.default.createElement(Dialog_1.Dialog, __assign({}, props, { className: classes.join(" ") }),
+        react_1.default.createElement(Dialog_1.Dialog.Head, { icon: icon, onDismissed: onDismissed, showClose: allowDismiss }, title && react_1.default.createElement(Dialog_1.Dialog.Title, null, title)),
         react_1.default.createElement(Dialog_1.Dialog.Body, null, props.children),
-        react_1.default.createElement(Dialog_1.Dialog.Footer, null,
-            react_1.default.createElement("div", { className: "c-button-bar" }, buttons))));
+        react_1.default.createElement(Dialog_1.Dialog.Foot, null,
+            react_1.default.createElement(morse_react_1.ButtonBar, null, buttons))));
 };
 exports.AutoDialog = AutoDialog;
 //# sourceMappingURL=AutoDialog.js.map

dist/components/DecisionDialog.d.ts

 import React from "react";
 import { ButtonProps } from "morse-react";
-import { DialogIcon } from "./DialogTitle";
+import { DialogIcon } from "./Dialog";
 import { AutoDialogProps } from "./AutoDialog";
@@ -5,0 +5,0 @@ export declare type DialogDecision<T> = {

dist/components/Dialog.d.ts

 import { PanelProps } from "morse-react";
-import { ReactNode } from "react";
+import { PropsWithChildren, ReactElement, ReactNode } from "react";
 export declare enum DialogStretch {
@@ -17,20 +17,23 @@ NotStretched = "",
     Title: (props: import("./DialogTitle").DialogTitleProps) => JSX.Element;
-    Header: (props: {
-        children: ReactNode;
-    }) => JSX.Element;
+    Head: (props: PropsWithChildren<DialogHeadProps>) => JSX.Element;
     Body: (props: {
         children: ReactNode;
     }) => JSX.Element;
-    Footer: (props: {
+    Foot: (props: {
         children: ReactNode;
     }) => JSX.Element;
 };
-export declare const DialogHeader: (props: {
-    children: ReactNode;
-}) => JSX.Element;
+export declare type DialogIcon = ReactElement<SVGElement> | ReactElement<HTMLImageElement> | string;
+declare type DialogHeadProps = {
+    onDismissed?: () => void;
+    showClose?: boolean;
+    icon?: DialogIcon;
+};
+export declare const DialogHead: (props: PropsWithChildren<DialogHeadProps>) => JSX.Element;
 export declare const DialogBody: (props: {
     children: ReactNode;
 }) => JSX.Element;
-export declare const DialogFooter: (props: {
+export declare const DialogFoot: (props: {
     children: ReactNode;
 }) => JSX.Element;
+export {};

dist/components/Dialog.js

@@ -28,5 +28,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogFooter = exports.DialogBody = exports.DialogHeader = exports.Dialog = exports.DialogStretch = void 0;
+exports.DialogFoot = exports.DialogBody = exports.DialogHead = exports.Dialog = exports.DialogStretch = void 0;
 var morse_react_1 = require("morse-react");
 var react_1 = __importDefault(require("react"));
+var DialogCloseButton_1 = require("./DialogCloseButton");
 var DialogTitle_1 = require("./DialogTitle");
@@ -56,6 +57,14 @@ var DialogStretch;
 exports.Dialog = Dialog;
-var DialogHeader = function (props) {
-    return react_1.default.createElement("div", { className: "c-dialog__head" }, props.children);
+var DialogHead = function (props) {
+    var showClose = props.showClose, icon = props.icon, onDismissed = props.onDismissed;
+    return (react_1.default.createElement("div", { className: "c-dialog__head" },
+        icon && (react_1.default.createElement("span", { className: "c-dialog__icon c-icon" }, typeof icon === "string" ? react_1.default.createElement("img", { src: icon }) : icon)),
+        props.children,
+        showClose && (react_1.default.createElement(DialogCloseButton_1.DialogCloseButton, { onDismissed: onDismissed },
+            react_1.default.createElement("svg", { className: "c-icon c-dialog__close-icon", height: "21", viewBox: "0 0 21 21", width: "21", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("g", { fill: "none", fillRule: "evenodd", stroke: "#2a2e3b", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(5 5)" },
+                    react_1.default.createElement("path", { d: "m.5 10.5 10-10" }),
+                    react_1.default.createElement("path", { d: "m10.5 10.5-10-10z" })))))));
 };
-exports.DialogHeader = DialogHeader;
+exports.DialogHead = DialogHead;
 var DialogBody = function (props) {
@@ -65,10 +74,10 @@ return react_1.default.createElement("div", { className: "c-dialog__body" }, props.children);
 exports.DialogBody = DialogBody;
-var DialogFooter = function (props) {
+var DialogFoot = function (props) {
     return react_1.default.createElement("div", { className: "c-dialog__foot" }, props.children);
 };
-exports.DialogFooter = DialogFooter;
+exports.DialogFoot = DialogFoot;
 exports.Dialog.Title = DialogTitle_1.DialogTitle;
-exports.Dialog.Header = exports.DialogHeader;
+exports.Dialog.Head = exports.DialogHead;
 exports.Dialog.Body = exports.DialogBody;
-exports.Dialog.Footer = exports.DialogFooter;
+exports.Dialog.Foot = exports.DialogFoot;
 //# sourceMappingURL=Dialog.js.map

dist/components/DialogTitle.d.ts

@@ -1,12 +0,5 @@
-import { ReactElement, ReactNode } from "react";
-export declare type DialogIcon = ReactElement<SVGElement> | ReactElement<HTMLImageElement> | string;
+/// <reference types="react" />
 export declare type DialogTitleProps = {
-    children?: ReactNode;
-    icon?: DialogIcon;
-    closeIcon?: string;
-    closeText?: string;
-    closeButtonClassName?: string;
-    onDismissed?: () => void;
-    showClose?: boolean;
+    children: string;
 };
 export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;

dist/components/DialogTitle.js

@@ -10,18 +10,6 @@ "use strict";
 var DialogTitle = function (props) {
-    var children = props.children, icon = props.icon, closeIcon = props.closeIcon, closeText = props.closeText, closeButtonClassName = props.closeButtonClassName, onDismissed = props.onDismissed, showClose = props.showClose;
-    var portal = (0, morse_react_1.usePortalContext)();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("span", { className: "c-dialog__icon c-icon" }, typeof icon === "string" ? react_1.default.createElement("img", { src: icon }) : icon),
-        typeof children === "string" ? (react_1.default.createElement(morse_react_1.Heading, { level: morse_react_1.Heading.Level.H2, className: "c-dialog__heading" }, children)) : (react_1.default.createElement(react_1.default.Fragment, null, children)),
-        showClose && (react_1.default.createElement(morse_react_1.Button, { appearance: morse_react_1.Button.Appearance.Text, icon: true, className: "c-dialog__close ".concat(closeButtonClassName ? closeButtonClassName : ""), onClick: function () {
-                portal.close();
-                onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
-            } }, closeIcon ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(morse_react_1.Icon, { className: "c-dialog__close-icon", iconName: closeIcon }),
-            closeText && react_1.default.createElement("span", { className: "c-dialog__close-text" }, closeText))) : (react_1.default.createElement("svg", { className: "c-icon c-dialog__close-icon", height: "21", viewBox: "0 0 21 21", width: "21", xmlns: "http://www.w3.org/2000/svg" },
-            react_1.default.createElement("g", { fill: "none", fillRule: "evenodd", stroke: "#2a2e3b", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(5 5)" },
-                react_1.default.createElement("path", { d: "m.5 10.5 10-10" }),
-                react_1.default.createElement("path", { d: "m10.5 10.5-10-10z" }))))))));
+    var children = props.children;
+    return (react_1.default.createElement(morse_react_1.Heading, { level: morse_react_1.Heading.Level.H2, className: "c-dialog__heading" }, children));
 };
 exports.DialogTitle = DialogTitle;
 //# sourceMappingURL=DialogTitle.js.map

dist/index.d.ts

@@ -7,3 +7,3 @@ export * from "./components/Dialog";
 export * from "./components/SingleInputDialog";
-export * from "./components/CloseDialogButton";
+export * from "./components/DialogCloseButton";
 export * from "./hooks";

dist/index.js

@@ -23,4 +23,4 @@ "use strict";
 __exportStar(require("./components/SingleInputDialog"), exports);
-__exportStar(require("./components/CloseDialogButton"), exports);
+__exportStar(require("./components/DialogCloseButton"), exports);
 __exportStar(require("./hooks"), exports);
 //# sourceMappingURL=index.js.map

lib/index.ts

@@ -7,3 +7,3 @@ export * from "./components/Dialog";
 export * from "./components/SingleInputDialog";
-export * from "./components/CloseDialogButton";
+export * from "./components/DialogCloseButton";
 export * from "./hooks";

package.json

 {
     "name": "morse-react-dialogs",
-    "version": "3.0.0-alpha.6",
+    "version": "3.0.0-alpha.7",
     "description": "Dialog patterns in React built for Morse",
@@ -26,3 +26,3 @@ "repository": {
         "morse-css": "2.6.8",
-        "morse-react": "3.0.0-alpha.6",
+        "morse-react": "3.0.0-alpha.7",
         "react": "^18.0.0",
@@ -50,3 +50,3 @@ "react-dom": "^18.0.0",
     ],
-    "gitHead": "215f9c6a6b9d8108ad54f3309c970840db8aae0f"
+    "gitHead": "ef8f9fae7f34661d5c9161ef8e20742ecfe4ecf0"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

71847

decreased by-1.6%

Lines of code

1312

decreased by-0.38%

No dependency changes