@madie/madie-design-system 1.2.42 → 1.2.45

package/components/AutoComplete/AutoComplete.jsx

@@ -165,6 +165,7 @@ const AutoComplete = ({
                 disabled={disabled}
                 multiple={multiple}
                 disableCloseOnSelect={multiple}
+                disableClearable={!rest.value?.length || rest.value?.[0] === "" || rest.value?.[0] === "-"}
                 sx={
                     multiple
                         ? {

package/components/MadieDialog/MadieDialog.stories.js

@@ -6,6 +6,7 @@ import TextArea from "../TextArea/index";
 import Select from "../Select/index";
 import Button from "../Button";
 import { Switch, FormGroup, FormControlLabel } from "@mui/material";
+import { DialogContent, Typography } from "@mui/material";
 
 export default {
     title: "MadieDialog",
@@ -132,3 +133,121 @@ export const Dialog = () => {
         </div>
     );
 };
+
+export const DialogWithActionButtons = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDialog
+                title="Human Readable"
+                sx={{
+                    "#modal-body": {
+                        h2: {
+                            borderTop: "1px solid black",
+                        },
+                    },
+                }}
+                dialogProps={{
+                    onClose,
+                    open,
+                    maxWidth: "lg",
+                    fullWidth: true,
+                }}
+                cancelButtonProps={{
+                    variant: "secondary",
+                    cancelText: "Cancel",
+                    "data-testid": "cancel-button",
+                }}
+                continueButtonProps={{
+                    variant: "cyan",
+                    type: "submit",
+                    "data-testid": "continue-button",
+                    continueText: "Continue",
+                }}
+            >
+                <DialogContent>
+                    <div data-testid="view-modal">
+                        <Typography>
+                            <div>Some Text</div>
+                        </Typography>
+                    </div>
+                </DialogContent>
+            </MadieDialog>
+        </>
+    );
+};
+
+export const DialogWithPopoverActionButtons = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDialog
+                title="Dialog with popover action buttons"
+                sx={{
+                    "#modal-body": {
+                        h2: {
+                            borderTop: "1px solid black",
+                        },
+                    },
+                }}
+                dialogProps={{
+                    onClose,
+                    open,
+                    maxWidth: "lg",
+                    fullWidth: true,
+                    onSubmit: () => {
+                        console.log("Submitted");
+                        setOpen(false);
+                    },
+                }}
+                cancelButtonProps={{
+                    variant: "secondary",
+                    cancelText: "Cancel",
+                    "data-testid": "cancel-button",
+                }}
+                continueButtonProps={{
+                    variant: "cyan",
+                    type: "submit",
+                    "data-testid": "continue-button",
+                    continueText: "Continue",
+                    popoverOptions: [
+                        {
+                            label: "Export",
+                            dataTestId: "export-option",
+                            toImplementFunction: () =>
+                                console.log("Export clicked"),
+                        },
+                        {
+                            label: "Export for Publishing",
+                            dataTestId: "export-publishing-option",
+                            toImplementFunction: () =>
+                                console.log("Export for Publishing clicked"),
+                        },
+                    ],
+                }}
+            >
+                <DialogContent>
+                    <div data-testid="view-modal">
+                        <Typography>
+                            <div>Some Text displayed here</div>
+                        </Typography>
+                    </div>
+                </DialogContent>
+            </MadieDialog>
+        </>
+    );
+};

package/components/MadieDialog/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import Draggable from "react-draggable";
 import CloseIcon from "@mui/icons-material/Close";
@@ -13,6 +13,7 @@ import {
 } from "@mui/material";
 import { Box } from "@mui/system";
 import Button from "../Button";
+import Popover from "../Popover";
 
 const DraggablePaper = (props) => {
     const { children, ...rest } = props;
@@ -32,8 +33,23 @@ const DraggablePaper = (props) => {
 const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
     const { cancelText, cancelIcon, ...otherCancelButtonProps } =
         cancelButtonProps;
-    const { continueText, continueIcon, ...otherContinueButtonProps } =
-        continueButtonProps;
+    const {
+        continueText,
+        continueIcon,
+        popoverOptions,
+        ...otherContinueButtonProps
+    } = continueButtonProps;
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const openPopOverMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const closePopOverMenu = () => {
+        setAnchorEl(null);
+    };
+
+    const open = Boolean(anchorEl);
     return (
         <>
             <Divider sx={{ borderColor: "#8c8c8c" }} />
@@ -57,7 +73,27 @@ const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
                         </span>
                     </Button>
                 )}
-                {continueButtonProps && (
+                {popoverOptions ? (
+                    <>
+                        <Button
+                            className="qpp-c-button--cyan"
+                            onClick={openPopOverMenu}
+                            style={{ marginTop: 0 }}
+                            {...otherContinueButtonProps}
+                        >
+                            <span>
+                                {continueText}
+                                {continueIcon}
+                            </span>
+                        </Button>
+                        <Popover
+                            optionsOpen={open}
+                            anchorEl={anchorEl}
+                            handleClose={closePopOverMenu}
+                            additionalSelectOptionProps={popoverOptions}
+                        />
+                    </>
+                ) : (
                     <Button
                         className="qpp-c-button--cyan"
                         type="submit"