@digital-ai/dot-components 2.28.0 → 3.0.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useRef, useEffect, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
+import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
@@ -602,73 +602,6 @@ const DotActionToolbar = ({
   });
 };
 
-const rootClassName$14 = 'dot-alert-banner';
-const StyledAlertBanner = styled(Alert)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$14} {
-      align-items: center;
-      border-radius: 8px;
-      box-sizing: border-box;
-      display: flex;
-      min-height: 48px;
-      overflow: hidden;
-      padding: ${theme.spacing(0.75, 2)};
-
-      svg,
-      .dot-typography {
-        color: ${theme.palette.figma.overlay.alerts.text.black};
-      }
-
-      .dot-icon,
-      .MuiAlert-icon,
-      .MuiAlert-message {
-        padding: 0;
-        .dot-typography {
-          margin-bottom: 0;
-        }
-      }
-
-      &.MuiAlert-standardSuccess {
-        background: ${theme.palette.figma.overlay.alerts.success.background};
-
-        .dot-icon,
-        .MuiAlert-icon {
-          color: ${theme.palette.figma.overlay.alerts.success.icon};
-        }
-      }
-
-      &.MuiAlert-standardInfo {
-        background: ${theme.palette.figma.overlay.alerts.info.background};
-
-        .dot-icon,
-        .MuiAlert-icon {
-          color: ${theme.palette.figma.overlay.alerts.info.icon};
-        }
-      }
-
-      &.MuiAlert-standardWarning {
-        background: ${theme.palette.figma.overlay.alerts.warning.background};
-
-        .dot-icon,
-        .MuiAlert-icon {
-          color: ${theme.palette.figma.overlay.alerts.warning.icon};
-        }
-      }
-
-      &.MuiAlert-standardError {
-        background: ${theme.palette.figma.overlay.alerts.error.background};
-
-        .dot-icon,
-        .MuiAlert-icon {
-          color: ${theme.palette.figma.overlay.alerts.error.icon};
-        }
-      }
-    }
-  `}
-`;
-
 //Primary blue
 //https://zeroheight.com/4a9ac476a/p/22005a-color/t/6288e9
 const b50 = '#e8edf3';
@@ -1727,6 +1660,35 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
+const rootClassName$14 = 'dot-alert-banner';
+const StyledAlertBanner = styled(Alert)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$14} {
+      box-sizing: border-box;
+      min-height: 48px;
+      overflow: hidden;
+
+      &.MuiAlert-standardSuccess {
+        background: ${theme.palette.figma.overlay.alerts.success.background};
+      }
+
+      &.MuiAlert-standardInfo {
+        background: ${theme.palette.figma.overlay.alerts.info.background};
+      }
+
+      &.MuiAlert-standardWarning {
+        background: ${theme.palette.figma.overlay.alerts.warning.background};
+      }
+
+      &.MuiAlert-standardError {
+        background: ${theme.palette.figma.overlay.alerts.error.background};
+      }
+    }
+  `}
+`;
+
 const DotAlertBanner = ({
   action,
   ariaLabel,
@@ -1737,19 +1699,9 @@ const DotAlertBanner = ({
   onClose,
   roundedCorners = true,
   severity,
-  textVariant = 'body1'
+  textVariant = 'body1',
+  width
 }) => {
-  const AlertBannerIcon = iconId => {
-    return jsx(DotIcon, {
-      iconId: iconId
-    });
-  };
-  const AlertBannerIconMapping = {
-    error: AlertBannerIcon('error-solid'),
-    info: AlertBannerIcon('info-solid'),
-    success: AlertBannerIcon('check-solid'),
-    warning: AlertBannerIcon('warning-solid')
-  };
   const rootClasses = useStylesWithRootClass(rootClassName$14, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$1(children) ? undefined : 'div';
@@ -1761,11 +1713,11 @@ const DotAlertBanner = ({
     },
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
-    iconMapping: AlertBannerIconMapping,
     onClose: onClose,
     severity: severity,
     style: {
-      borderRadius: roundedCorners ? '8px' : undefined
+      borderRadius: roundedCorners ? '8px' : undefined,
+      width
     },
     children: jsx(DotTypography, {
       variant: textVariant,
@@ -10222,83 +10174,71 @@ const DotSkeleton = ({
   });
 };
 
+function addAutoHideDuration(severity) {
+  return severity === 'error' ? null : 10000;
+}
+
+const getSnackbarTitleFromSeverity = severity => {
+  switch (severity) {
+    case 'success':
+      return 'Success';
+    case 'warning':
+      return 'Warning';
+    case 'error':
+      return 'Error';
+    case 'info':
+      return 'Info';
+    default:
+      return 'Success';
+  }
+};
+
 const rootClassName$n = 'dot-snackbar';
 const StyledSnackbar = styled(Snackbar)`
   ${({
-  theme
+  theme,
+  width,
+  $anchorOriginTop
 }) => css`
-  &.${rootClassName$n} {
-    .dot-icon-btn .dot-icon {
-      color: ${theme.palette.figma.icon.white};
-    }
-
-    .dot-icon-btn:hover {
-      background: ${n900_20};
-    }
+    &.${rootClassName$n} {
+      .MuiAlert-message {
+        word-break: break-word;
+      }
 
-    .MuiAlert-icon {
-      color: ${theme.palette.figma.icon.white};
-      padding: 11px 0px;
-    }
-    .MuiAlert-message {
-      padding: 13px 0px;
-      word-break: break-word;
-    }
-    &.MuiSnackbar-anchorOriginTopRight{
-      top: 0px;
-      z-index: ${levelFourth};
-    }
+      &.MuiSnackbar-anchorOriginTopLeft,
+      &.MuiSnackbar-anchorOriginTopCenter,
+      &.MuiSnackbar-anchorOriginTopRight {
+        top: ${$anchorOriginTop}px;
+        z-index: ${levelFourth};
+      }
 
-    .MuiAlert-root {
-      color: ${theme.palette.figma.typography.white};
-      position: relative;
-      margin-top: 108px;
-      max-width: 500px;
-      min-width: 344px;
-      z-index: ${levelFourth};
+      .dot-snackbar-actions {
+        display: flex;
+        align-items: center;
+        margin-top: ${theme.spacing(1)};
+        gap: ${theme.spacing(2)};
 
-      @media (min-width: 720px) {
-        .MuiAlert-root {
-          top: 112px;
-          position: relative;
+        .primary-action-btn {
+          background-color: transparent;
         }
       }
 
-      &.MuiAlert-standardSuccess {
-        background: ${theme.palette.figma.success.normal};
-      }
-      &.MuiAlert-standardInfo {
-        background: ${theme.palette.figma.inProgress.normal};
-      }
-      &.MuiAlert-standardWarning {
-        background: ${theme.palette.figma.warning.normal};
-      }
-      &.MuiAlert-standardError {
-        background: ${theme.palette.figma.destructive.normal};
+      .MuiAlert-root {
+        max-width: ${width ? 'unset' : '500px'};
+        min-width: ${width ? 'unset' : '344px'};
+        z-index: ${levelFourth};
       }
     }
   `}
 `;
 
-function addAutoHideDuration(severity) {
-  return severity === 'error' ? null : 10000;
-}
-
-function checkForConflictingEventHandlers({
-  action,
-  onClose
-}) {
-  if (action && onClose) {
-    console.error('You have passed two event handlers for action buttons. Please pick one.');
-  }
-}
 const DEFAULT_ANCHOR_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
 };
 const DotSnackbar = ({
-  action,
   anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
+  anchorOriginTop = 108,
   ariaLabel,
   autoHideDuration,
   children,
@@ -10307,22 +10247,22 @@ const DotSnackbar = ({
   hideOnClickAway = true,
   onClose,
   open,
+  primaryAction,
+  secondaryAction,
   severity,
   width
 }) => {
+  const hasActions = !!(primaryAction || secondaryAction);
   const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  checkForConflictingEventHandlers({
-    onClose,
-    action
-  });
   const rootClasses = useStylesWithRootClass(rootClassName$n, className);
   const handleSnackbarClose = reason => {
-    if (hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
+    if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
       onClose();
     }
   };
   return jsx(StyledSnackbar, {
     anchorOrigin: anchorOrigin,
+    "$anchorOriginTop": anchorOriginTop,
     "aria-label": ariaLabel,
     autoHideDuration: calculatedAutoHideDuration,
     classes: {
@@ -10332,16 +10272,41 @@ const DotSnackbar = ({
     onClose: (_e, r) => handleSnackbarClose(r),
     open: open,
     severity: severity,
-    children: jsx(Alert, {
-      action: action,
-      onClose: onClose,
-      severity: severity,
-      style: {
-        width: width
-      },
-      children: jsx("span", {
-        "aria-label": severity,
-        children: children
+    width: width,
+    children: jsx("div", {
+      children: jsx(DotAlertBanner, {
+        severity: severity,
+        width: width,
+        onClose: _e => handleSnackbarClose(),
+        children: jsxs("div", {
+          children: [jsx(DotTypography, {
+            variant: "subtitle2",
+            noMarginBottom: false,
+            children: getSnackbarTitleFromSeverity(severity)
+          }), isString$1(children) ? jsx(DotTypography, {
+            ariaLabel: severity,
+            variant: "body1",
+            children: children
+          }) : jsx("span", {
+            "aria-label": severity,
+            children: children
+          }), hasActions && jsxs("div", {
+            className: "dot-snackbar-actions",
+            children: [primaryAction && jsx(DotButton, {
+              className: "primary-action-btn",
+              "data-testid": "primary-action-btn",
+              onClick: primaryAction.onClick,
+              size: "small",
+              type: "outlined",
+              children: primaryAction.label
+            }), secondaryAction && jsx(DotLink, {
+              "data-testid": "secondary-action-link",
+              href: secondaryAction.href,
+              color: "inherit",
+              children: secondaryAction.label
+            })]
+          })]
+        })
       })
     })
   });

package/package.json

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

package/src/lib/components/alert-banner/AlertBanner.d.ts

@@ -15,5 +15,7 @@ export interface AlertBannerProps extends CommonProps {
     severity: AlertBannerSeverity;
     /** when specified, will control the text that is used inside the alert banner */
     textVariant?: TypographyVariant;
+    /** when specified, will control the width of the encapsulated Alert component */
+    width?: string;
 }
-export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, width, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/index.d.ts

@@ -32,7 +32,7 @@ export type { DividerOrientation, DividerProps, DividerVariant, } from './divide
 export type { BadgeProps, BadgeOverlap, BadgeVariant } from './badge';
 export type { TruncateWithTooltipProps } from './truncate-with-tooltip';
 export type { DraggableItem, DraggableListChangeHandler, } from './draggable-list';
-export type { SnackbarProps, SnackbarSeverity, SnackbarOrigin, } from './snackbar';
+export type { SnackbarProps, SnackbarSeverity, SnackbarOrigin, SnackbarPrimaryAction, SnackbarSecondaryAction, } from './snackbar';
 export type { CharactersLimit, InlineEditProps } from './inline-edit';
 export type { progressColorOptions, progressVariantOptions, ProgressProps, } from './progress';
 export type { FileItemProps, FileUploadError, FileUploadProps, ListItemFile, MappedFile, MappedListItemFile, } from './file-upload';

package/src/lib/components/snackbar/Snackbar.d.ts

@@ -2,11 +2,19 @@ import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { SnackbarOrigin } from './';
 export type SnackbarSeverity = 'error' | 'warning' | 'info' | 'success';
+export interface SnackbarPrimaryAction {
+    label: string;
+    onClick: () => void;
+}
+export interface SnackbarSecondaryAction {
+    href: string;
+    label: string;
+}
 export interface SnackbarProps extends CommonProps {
-    /** Property used for creating a custom action button. */
-    action?: ReactNode;
     /** The anchor of the Snackbar. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored. */
     anchorOrigin?: SnackbarOrigin;
+    /** When specified, will set `top` property (in pixels) only for the vertical top origins  */
+    anchorOriginTop?: number;
     /** The number of milliseconds to wait before automatically closing the snackbar. If null is passed, then the snackbar never automatically closes. If the prop is not passed at all, then snackbars close after 10 seconds (except error snackbar which never closes automatically). */
     autoHideDuration?: number | null;
     /** The message the user sees once the alert displays. */
@@ -14,12 +22,16 @@ export interface SnackbarProps extends CommonProps {
     /** If false, then snackbar does not close when clicking away. True by default. */
     hideOnClickAway?: boolean;
     /** A callback to handle closing the alert. */
-    onClose?: () => void;
+    onClose: () => void;
     /** Boolean value to switch between opening and closing the alert. */
     open: boolean;
+    /** When specified, will render button underneath snackbar message */
+    primaryAction?: SnackbarPrimaryAction;
+    /** When specified, will render link next to primary action button */
+    secondaryAction?: SnackbarSecondaryAction;
     /** An alert level, indicating the importance of the message. */
     severity: SnackbarSeverity;
     /** Width of the encapsulated Alert component. */
     width?: string;
 }
-export declare const DotSnackbar: ({ action, anchorOrigin, ariaLabel, autoHideDuration, children, className, "data-testid": dataTestId, hideOnClickAway, onClose, open, severity, width, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotSnackbar: ({ anchorOrigin, anchorOriginTop, ariaLabel, autoHideDuration, children, className, "data-testid": dataTestId, hideOnClickAway, onClose, open, primaryAction, secondaryAction, severity, width, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/snackbar/Snackbar.styles.d.ts

@@ -2,7 +2,9 @@ import { Snackbar } from '@mui/material';
 import { SnackbarSeverity } from './Snackbar';
 export declare const rootClassName = "dot-snackbar";
 interface StyledProps {
+    $anchorOriginTop?: number;
     severity: SnackbarSeverity;
+    width?: string;
 }
 export declare const StyledSnackbar: import("styled-components").StyledComponent<typeof Snackbar, any, StyledProps, never>;
 export {};

package/src/lib/components/snackbar/index.d.ts

@@ -1,4 +1,4 @@
 export type { SnackbarOrigin } from '@mui/material';
-export type { SnackbarProps, SnackbarSeverity } from './Snackbar';
+export type { SnackbarProps, SnackbarSeverity, SnackbarPrimaryAction, SnackbarSecondaryAction, } from './Snackbar';
 export { DotSnackbar } from './Snackbar';
 export { DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './SnackbarProvider';

package/src/lib/components/snackbar/utils/helpers.d.ts

@@ -0,0 +1,2 @@
+import { SnackbarSeverity } from '../Snackbar';
+export declare const getSnackbarTitleFromSeverity: (severity: SnackbarSeverity) => "Success" | "Warning" | "Error" | "Info";