@digital-ai/dot-components 4.12.0 → 4.14.0

package/index.esm.js

@@ -3491,6 +3491,7 @@ const DotMenuList = forwardRef(({
         "aria-label": itemAriaLabel,
         className: menuItemClasses,
         "data-pendoid": dataPendoId,
+        "data-id": key,
         disabled: disabled,
         disableRipple: hasSubmenu,
         divider: divider,
@@ -8480,12 +8481,14 @@ const DotDialog = ({
   onCancel,
   onSubmit,
   open,
+  secondaryButtonProps,
   submitButtonProps,
   title
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$K, className);
   const cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
   const [isOpen, setIsOpen] = useState(open);
+  const hasSecondaryAction = !!secondaryButtonProps;
   useEffect(() => {
     setIsOpen(open);
   }, [open]);
@@ -8534,7 +8537,7 @@ const DotDialog = ({
         root: `dot-dialog-content`
       },
       children: renderNodeOrTypography(children)
-    }), (hasPrimaryAction || cancelButtonVisible) && jsxs(DialogActions, {
+    }), (hasPrimaryAction || cancelButtonVisible || hasSecondaryAction) && jsxs(DialogActions, {
       classes: {
         root: `dot-dialog-actions`
       },
@@ -8551,6 +8554,19 @@ const DotDialog = ({
         tooltip: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.tooltip,
         type: "text",
         children: (cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.label) || 'Cancel'
+      }), hasSecondaryAction && jsx(DotButton, {
+        autoFocus: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.autoFocus,
+        className: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.className,
+        "data-pendoid": secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps['data-pendoid'],
+        "data-testid": secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps['data-testid'],
+        disableRipple: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.disableRipple,
+        disabled: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.disabled,
+        endIcon: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.endIcon,
+        onClick: secondaryButtonProps.onClick,
+        startIcon: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.startIcon,
+        tooltip: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.tooltip,
+        type: (secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.type) || 'primary',
+        children: secondaryButtonProps.label
       }), hasPrimaryAction && jsx(DotButton, {
         autoFocus: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.autoFocus,
         className: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.className,
@@ -8579,6 +8595,7 @@ const DotConfirmationDialog = ({
   onCancel,
   onSubmit,
   submitButtonProps,
+  secondaryButtonProps,
   open,
   title = ''
 }) => {
@@ -8596,6 +8613,7 @@ const DotConfirmationDialog = ({
     onSubmit: onSubmit,
     open: open,
     submitButtonProps: submitButtonProps,
+    secondaryButtonProps: secondaryButtonProps,
     title: title,
     children: message
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "4.12.0",
+  "version": "4.14.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/analytics/dashboard-dialog/DashboardDialog.styles.d.ts

@@ -1,3 +1,3 @@
 import { DialogActions } from '@mui/material';
-export declare const StyledDashboardDialog: import("styled-components").StyledComponent<({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: import("../../dialog/Dialog").DialogProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledDashboardDialog: import("styled-components").StyledComponent<({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, secondaryButtonProps, submitButtonProps, title, }: import("../../dialog/Dialog").DialogProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledDialogActions: import("styled-components").StyledComponent<typeof DialogActions, any, {}, never>;

package/src/lib/components/confirmation-dialog/ConfirmationDialog.d.ts

@@ -1,6 +1,6 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
-import { DialogButtonProps, SubmitButtonProps } from '../dialog/Dialog';
+import { DialogButtonProps, SecondaryActionButtonProps, SubmitButtonProps } from '../dialog/Dialog';
 export interface ConfirmationDialogProps extends CommonProps {
     /** Cancel button properties */
     cancelButtonProps?: DialogButtonProps;
@@ -12,9 +12,11 @@ export interface ConfirmationDialogProps extends CommonProps {
     onSubmit?: (event: MouseEvent | KeyboardEvent) => void;
     /** If true the dialog will be visible */
     open: boolean;
+    /** The secondary action button properties */
+    secondaryButtonProps?: SecondaryActionButtonProps;
     /** Submit button properties */
     submitButtonProps?: SubmitButtonProps;
     /** The dialog title */
     title?: ReactNode;
 }
-export declare const DotConfirmationDialog: ({ ariaLabel, cancelButtonProps, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, message, onCancel, onSubmit, submitButtonProps, open, title, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotConfirmationDialog: ({ ariaLabel, cancelButtonProps, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, message, onCancel, onSubmit, submitButtonProps, secondaryButtonProps, open, title, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/dialog/Dialog.d.ts

@@ -9,6 +9,16 @@ export interface DialogButtonProps extends BaseButtonProps {
     /** The icon to display on the button */
     startIcon?: ReactNode;
 }
+export interface SecondaryActionButtonProps extends BaseButtonProps {
+    /** Icon placed after the children. */
+    endIcon?: ReactNode;
+    /** The text displayed on the button */
+    label: string;
+    /** Event callback */
+    onClick: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
+    /** The icon to display on the button */
+    startIcon?: ReactNode;
+}
 export interface SubmitButtonProps extends DialogButtonProps {
     /** The type of button to be used */
     type?: 'primary' | 'destructive';
@@ -34,9 +44,11 @@ export interface DialogProps extends CommonProps {
     onSubmit?: (event: KeyboardEvent | MouseEvent) => void;
     /** if true, the dialog is visible to the user */
     open: boolean;
+    /** props passed down to the secondary action button */
+    secondaryButtonProps?: SecondaryActionButtonProps;
     /** props passed down to the submit button */
     submitButtonProps?: SubmitButtonProps;
     /** dialog heading */
     title: ReactNode;
 }
-export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, secondaryButtonProps, submitButtonProps, title, }: DialogProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/impact-dialog/ImpactDialog.styles.d.ts

@@ -1,2 +1,2 @@
 export declare const rootClassName = "dot-impact-dialog";
-export declare const StyledImpactDialog: import("styled-components").StyledComponent<({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: import("../dialog/Dialog").DialogProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledImpactDialog: import("styled-components").StyledComponent<({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, secondaryButtonProps, submitButtonProps, title, }: import("../dialog/Dialog").DialogProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;