@digital-ai/dot-components 2.27.1 → 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 { useEffect, useState, useRef, 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 { 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, 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';
@@ -29,6 +29,18 @@ function useStylesWithRootClass(name, className, ...args) {
   return [name, ...(className ? [className] : [])].concat(args).join(' ').trim();
 }
 
+const checkIfOverflowPresentInElementTree = element => {
+  if (element.scrollWidth > element.clientWidth) {
+    return true;
+  }
+  for (const child of Array.from(element.children)) {
+    if (checkIfOverflowPresentInElementTree(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
 const DotTooltip = ({
   ariaLabel,
   ariaRole = 'tooltip',
@@ -36,6 +48,8 @@ const DotTooltip = ({
   children,
   className,
   'data-testid': dataTestId,
+  disablePortal = false,
+  hoverVisibility = 'always',
   leaveDelay,
   onClose,
   open,
@@ -43,19 +57,44 @@ const DotTooltip = ({
   title
 }) => {
   const rootClasses = useStylesWithRootClass('dot-tooltip', className);
+  const [hasTooltipOnHover, setHasTooltipOnHover] = useState(false);
+  const childrenWrapperRef = useRef();
+  useEffect(() => {
+    if (hoverVisibility !== 'overflow') return;
+    const resizeObserver = new ResizeObserver(checkIfTooltipShouldBeRendered);
+    if (childrenWrapperRef.current) {
+      resizeObserver.observe(childrenWrapperRef.current);
+    }
+    checkIfTooltipShouldBeRendered();
+    return () => {
+      if (childrenWrapperRef.current) {
+        resizeObserver.unobserve(childrenWrapperRef.current);
+      }
+    };
+  }, [childrenWrapperRef.current, children, hoverVisibility]);
+  const checkIfTooltipShouldBeRendered = () => {
+    if (!childrenWrapperRef || !childrenWrapperRef.current) return;
+    const isOverflowPresent = checkIfOverflowPresentInElementTree(childrenWrapperRef.current);
+    setHasTooltipOnHover(isOverflowPresent);
+  };
   return title ? jsx(Tooltip, {
     "aria-hidden": false,
     "aria-label": ariaLabel || title.toString(),
     arrow: arrow,
     className: rootClasses,
     "data-testid": dataTestId,
+    disableHoverListener: hoverVisibility === 'never' || hoverVisibility === 'overflow' && !hasTooltipOnHover,
     leaveDelay: leaveDelay,
     onClose: onClose,
     open: open,
     placement: placement,
+    PopperProps: {
+      disablePortal
+    },
     role: ariaRole,
     title: title,
     children: jsx("span", {
+      ref: childrenWrapperRef,
       tabIndex: -1,
       children: children
     })
@@ -563,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';
@@ -1688,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,
@@ -1698,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';
@@ -1722,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,
@@ -2623,6 +2614,7 @@ const DotButton = forwardRef(({
   startIcon,
   tabIndex,
   tooltip,
+  tooltipPlacement,
   type = 'primary'
 }, ref) => {
   const rootClasses = useStylesWithRootClass(rootClassName$12, className);
@@ -2647,6 +2639,7 @@ const DotButton = forwardRef(({
       break;
   }
   return jsx(DotTooltip, {
+    placement: tooltipPlacement,
     title: tooltip,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
@@ -2973,6 +2966,10 @@ const StyledPopper = styled(Popper)`
           max-height: ${getListMaxHeight($maxHeight)};
         `}
 
+        li {
+          word-break: break-word;
+        }
+
         .dot-li {
           min-height: auto;
         }
@@ -3423,19 +3420,21 @@ const DotIconButton = ({
   color = 'inherit',
   'data-pendoid': dataPendoId = rootClassName$V,
   'data-testid': dataTestId,
-  disabled = false,
   disableRipple = false,
+  disabled = false,
   iconId,
   iconSize = 'small',
   onClick,
-  tooltip,
   shape = 'circle',
-  size = 'medium'
+  size = 'medium',
+  tooltip,
+  tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
   const rootClasses = useStylesWithRootClass(rootClassName$V, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
+    placement: tooltipPlacement,
     title: tooltip,
     children: jsx(StyledIconButton, {
       "aria-label": ariaLabel || tooltip || `${iconId} icon button`,
@@ -6126,14 +6125,14 @@ const StyledChip = styled(Chip)`
 
       &.Mui-disabled {
         background: ${theme.palette.figma.disabled.normal};
-        border-color: ${theme.palette.figma.border.default}
+        border-color: ${theme.palette.figma.border.default};
         opacity: 1;
 
-        .dot-icon i {
+        .dot-icon i,
+        .MuiChip-deleteIcon {
           color: ${theme.palette.figma.icon.disabled};
         }
 
-        .MuiChip-deleteIcon,
         .MuiChip-label {
           color: ${theme.palette.figma.typography.disabled};
         }
@@ -9491,6 +9490,7 @@ const StyledInlineEdit = styled.div`
         position: relative;
 
         .dot-edit-icon {
+          background-color: ${theme.palette.figma.neutral.elevated};
           border-radius: ${theme.spacing(0, 0.5, 0.5, 0)};
           display: none;
           height: 100%;
@@ -9521,6 +9521,7 @@ const StyledInlineEdit = styled.div`
         .dot-view-mode-typography {
           padding: ${theme.spacing(1.3125, 1)};
           margin-bottom: 0;
+          word-break: break-word;
 
           &.${placeholderClassName} {
             color: ${theme.palette.figma.typography.gray};
@@ -10173,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,
@@ -10258,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: {
@@ -10283,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
+            })]
+          })]
+        })
       })
     })
   });
@@ -10478,6 +10492,7 @@ const DotSplitButton = ({
   options = [],
   size = 'medium',
   tooltip,
+  tooltipPlacement,
   type = 'primary'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$l, className, type, disabled ? 'disabled' : '');
@@ -10515,6 +10530,7 @@ const DotSplitButton = ({
         onClick: event => handleClick(event, null, mainOptionKey),
         size: size,
         tooltip: tooltip,
+        tooltipPlacement: tooltipPlacement,
         type: type,
         children: mainOptionChildren
       }), jsx(DotButton, {
@@ -11713,6 +11729,7 @@ const DotHeaderRow = ({
       },
       children: [multiSelectHeader && renderMultiSelectCell(), collapsibleTableOptions && jsx(DotHeaderCell, {
         "aria-hidden": "true",
+        sortable: false,
         typography: typography,
         uid: CreateUUID()
       }), columns.map(cell => {
@@ -13153,6 +13170,24 @@ const DotPopper = ({
   });
 };
 
+const getOrderedListItems = (layout, listItems) => {
+  if (!listItems || !layout) return [];
+  return [...listItems].sort((a, b) => layout.find(layoutItem => layoutItem.i === a.id).y - layout.find(layoutItem => layoutItem.i === b.id).y);
+};
+const checkIfEqual = (oldList, newList) => {
+  if (oldList.length !== newList.length) return false;
+  return oldList.every((oldListItem, index) => oldListItem.id === newList[index].id);
+};
+const getListItemLayout = listItems => {
+  return listItems === null || listItems === void 0 ? void 0 : listItems.map((item, index) => ({
+    i: item.id,
+    x: 0,
+    y: index,
+    w: 1,
+    h: 1
+  }));
+};
+
 const rootClassName$5 = 'dot-draggable-list';
 const listItemClassName = 'dot-draggable-list-item';
 const StyledDraggableList = styled.div`
@@ -13165,6 +13200,8 @@ const StyledDraggableList = styled.div`
       position: relative;
 
       .${listItemClassName} {
+        width: 100% !important;
+
         .dot-icon {
           color: ${theme.palette.layer.n700};
         }
@@ -13179,30 +13216,14 @@ const StyledDraggableList = styled.div`
 
         &.with-handle-grab-cursor ${draggableHandle} {
           cursor: grab;
+          user-select: unset !important;
+          -moz-user-select: unset !important;
         }
       }
     }
   `}
 `;
 
-const getOrderedListItems = (layout, listItems) => {
-  if (!listItems || !layout) return [];
-  return [...listItems].sort((a, b) => layout.find(layoutItem => layoutItem.i === a.id).y - layout.find(layoutItem => layoutItem.i === b.id).y);
-};
-const checkIfEqual = (oldList, newList) => {
-  if (oldList.length !== newList.length) return false;
-  return oldList.every((oldListItem, index) => oldListItem.id === newList[index].id);
-};
-const getListItemLayout = listItems => {
-  return listItems === null || listItems === void 0 ? void 0 : listItems.map((item, index) => ({
-    i: item.id,
-    x: 0,
-    y: index,
-    w: 1,
-    h: 1
-  }));
-};
-
 const DEFAULT_LIST_WIDTH = '100%';
 const DEFAULT_LIST_ITEM_HEIGHT = 36;
 const ListGridLayout = WidthProvider(GridLayout);
@@ -13238,7 +13259,9 @@ const DotDraggableList = ({
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     draggableHandle: draggableHandle,
-    width: listWidth,
+    style: {
+      width: listWidth
+    },
     children: jsx(ListGridLayout, {
       className: "layout",
       draggableHandle: draggableHandle,
@@ -13248,9 +13271,6 @@ const DotDraggableList = ({
       margin: [0, 0],
       onLayoutChange: onChange && handleLayoutChange(),
       rowHeight: rowHeight,
-      style: {
-        width: listWidth
-      },
       children: orderedItems.map(({
         id: itemId,
         children
@@ -13258,13 +13278,8 @@ const DotDraggableList = ({
         return jsx(ListItem, {
           "data-pendoid": dataPendoId && `${dataPendoId}-item`,
           "data-testid": dataTestId && `${dataTestId}-item`,
-          button: true,
           children: renderNodeOrTypography(children),
-          className: listItemClasses,
-          disableRipple: true,
-          style: {
-            width: listWidth
-          }
+          className: listItemClasses
         }, itemId);
       })
     })

package/package.json

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

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

@@ -1,5 +1,6 @@
 import { MouseEvent, KeyboardEvent } from 'react';
 import { CommonProps } from './CommonProps';
+import { TooltipPlacement } from './tooltip';
 export type ButtonType = 'destructive' | 'primary' | 'outlined' | 'text';
 export type ButtonSize = 'small' | 'medium' | 'large';
 export interface BaseButtonProps extends CommonProps {
@@ -21,6 +22,8 @@ export interface BaseButtonProps extends CommonProps {
     tabIndex?: number;
     /** Help text to be displayed on hover  */
     tooltip?: string;
+    /** If set, determines the placement of the tooltip  */
+    tooltipPlacement?: TooltipPlacement;
     /** The type of button */
     type?: ButtonType;
 }

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/button/IconButton.d.ts

@@ -1,6 +1,7 @@
 import { MouseEvent } from 'react';
 import { CommonProps } from '../CommonProps';
 import { IconFontSize } from '../icon/Icon';
+import { TooltipPlacement } from '../tooltip';
 export type IconButtonColor = 'default' | 'inherit' | 'primary' | 'secondary';
 export type IconButtonSize = 'small' | 'medium';
 export type IconButtonShape = 'circle' | 'square';
@@ -21,9 +22,11 @@ export interface CommonIconButtonProps extends CommonProps {
     size?: IconButtonSize;
     /** Help text to be displayed on icon hover */
     tooltip?: string;
+    /** If set, determines the placement of the tooltip  */
+    tooltipPlacement?: TooltipPlacement;
 }
 export interface IconButtonProps extends CommonIconButtonProps {
     /** The icon to display on the button */
     iconId: string;
 }
-export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableRipple, disabled, iconId, iconSize, onClick, shape, size, tooltip, tooltipPlacement, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/draggable-list/DraggableList.styles.d.ts

@@ -2,7 +2,6 @@ export declare const rootClassName = "dot-draggable-list";
 export declare const listItemClassName = "dot-draggable-list-item";
 interface StyledDraggableListProps {
     draggableHandle?: string;
-    width: string;
 }
 export declare const StyledDraggableList: import("styled-components").StyledComponent<"div", any, StyledDraggableListProps, never>;
 export {};

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';
@@ -43,6 +43,7 @@ export type { ClickAwayListenerProps } from './click-away-listener';
 export type { StepProps } from './stepper/Stepper';
 export type { CarouselAnimationVariant, CarouselNavigationButtonDisplayOption, CarouselProps, } from './carousel/Carousel';
 export type { StickyWithBorderProps } from './sticky-with-border';
+export type { TooltipProps, TooltipHoverVisibility, TooltipPlacement, } from './tooltip';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -95,7 +96,7 @@ export { DotStepper } from './stepper/Stepper';
 export { DotProgressButton } from './progress-button/ProgressButton';
 export { DotSwitch } from './switch';
 export { DotHeaderRow, DotTable, DotTablePagination, DotTableActions, DotTableAction, } from './table';
-export { DotTooltip } from './tooltip/Tooltip';
+export { DotTooltip } from './tooltip';
 export { DotTabs } from './tabs/Tabs';
 export { DotTypography } from './typography/Typography';
 export { DotFileUpload, DotFileListItem } from './file-upload';

package/src/lib/components/list/utils/models.d.ts

@@ -2,7 +2,7 @@ import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../../CommonProps';
 import { PopperPlacement } from '../../menu/Menu';
 import { LinkTarget } from '../../link/Link';
-import { tooltipPlacement } from '../../tooltip/Tooltip';
+import { TooltipPlacement } from '../../tooltip/Tooltip';
 export declare const DEFAULT_TOOLTIP_PLACEMENT = "top-start";
 export type NestedListType = 'drawer' | 'expandable' | 'menu';
 export interface ListProps extends CommonProps {
@@ -65,7 +65,7 @@ export interface ListItemProps extends CommonProps {
     /** Tooltip text displayed on hover */
     tooltip?: string;
     /** Tooltip placement displayed on hover */
-    tooltipPlacement?: tooltipPlacement;
+    tooltipPlacement?: TooltipPlacement;
 }
 export interface NestedListProps extends CommonProps {
     /** Element that menu is attached to */

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";

package/src/lib/components/split-button/SplitButton.d.ts

@@ -12,4 +12,4 @@ export interface SplitButtonProps extends BaseButtonProps {
     /**The options within the button dropdown */
     options: Array<MenuItemProps>;
 }
-export declare const DotSplitButton: ({ autoFocus, ariaLabel, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultMainOptionKey, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onOptionClick, options, size, tooltip, type, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotSplitButton: ({ autoFocus, ariaLabel, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultMainOptionKey, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onOptionClick, options, size, tooltip, tooltipPlacement, type, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/tooltip/Tooltip.d.ts

@@ -1,14 +1,18 @@
 import { ReactNode, ReactElement, ChangeEvent } from 'react';
 import { CommonProps } from '../CommonProps';
-export type tooltipPlacement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+export type TooltipHoverVisibility = 'always' | 'overflow' | 'never';
+export type TooltipPlacement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 export interface TooltipProps extends CommonProps {
     /** If true, adds an arrow to the tooltip indicating which element it refers to. */
     arrow?: boolean;
     children: ReactElement;
+    /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
+    disablePortal?: boolean;
+    hoverVisibility?: TooltipHoverVisibility;
     leaveDelay?: number;
     onClose?: (event: ChangeEvent) => void;
     open?: boolean;
-    placement?: tooltipPlacement;
+    placement?: TooltipPlacement;
     title?: ReactNode | string | number;
 }
-export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, hoverVisibility, leaveDelay, onClose, open, placement, title, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { TooltipProps, TooltipHoverVisibility, TooltipPlacement, } from './Tooltip';
+export { DotTooltip } from './Tooltip';

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

@@ -0,0 +1 @@
+export declare const checkIfOverflowPresentInElementTree: (element: HTMLElement) => boolean;