@digital-ai/dot-components 2.27.0 → 2.28.0

package/index.esm.js

@@ -1,6 +1,6 @@
 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 { 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 '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
@@ -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
     })
@@ -2623,6 +2662,7 @@ const DotButton = forwardRef(({
   startIcon,
   tabIndex,
   tooltip,
+  tooltipPlacement,
   type = 'primary'
 }, ref) => {
   const rootClasses = useStylesWithRootClass(rootClassName$12, className);
@@ -2647,6 +2687,7 @@ const DotButton = forwardRef(({
       break;
   }
   return jsx(DotTooltip, {
+    placement: tooltipPlacement,
     title: tooltip,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
@@ -2973,6 +3014,10 @@ const StyledPopper = styled(Popper)`
           max-height: ${getListMaxHeight($maxHeight)};
         `}
 
+        li {
+          word-break: break-word;
+        }
+
         .dot-li {
           min-height: auto;
         }
@@ -3423,19 +3468,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`,
@@ -3667,6 +3714,14 @@ const styledListItemElement = elementType => {
           width: 100%;
         }
 
+        &.link-item {
+          padding: 0;
+
+          .${listItemLinkClassName} {
+            padding: ${theme.spacing(1, 2)};
+          }
+        }
+
         &.${flyoutListItemClassName} {
           padding: 0;
         }
@@ -3689,6 +3744,10 @@ const styledListItemElement = elementType => {
           align-items: center;
           display: flex;
           flex-grow: 2;
+
+          &:focus-visible {
+            outline: none;
+          }
         }
 
         .${flyoutItemLinkClassName} .MuiIcon-root {
@@ -3841,7 +3900,8 @@ const DotListItem = ({
   const hasChildren = items.length > 0;
   const isFlyout = nestedListType === 'menu' && hasChildren;
   const showEndIcon = endIcon || hasChildren;
-  const rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', navIsOpened ? 'open' : '');
+  const isLink = href && !onClick;
+  const rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', navIsOpened ? 'open' : '', isLink ? 'link-item' : '');
   const toggleOpen = event => {
     setAnchorEl(event.currentTarget);
     setNavIsOpened(!navIsOpened);
@@ -3895,15 +3955,16 @@ const DotListItem = ({
       "data-testid": dataTestId,
       divider: divider,
       href: onClick ? null : href,
-      onClick: onClick || !href ? handleClick : null,
+      onClick: !isLink ? handleClick : null,
       role: ariaRole,
       selected: isFlyout ? navIsOpened : selected,
+      tabIndex: isLink ? -1 : 0,
       target: target,
       children: jsx(DotTooltip, {
         "data-testid": `${dataTestId}-tooltip`,
         placement: tooltipPlacement,
         title: tooltip,
-        children: href && !onClick ? renderListItemLink : jsxs(Fragment, {
+        children: isLink ? renderListItemLink : jsxs(Fragment, {
           children: [startIcon && jsx(ListItemIcon, {
             children: startIcon
           }), renderListItemText(), showEndIcon && renderListItemEndIcon()]
@@ -5276,6 +5337,12 @@ const StyledSidebar = styled.aside`
           margin: 0;
           padding: 0;
 
+          .${listItemLinkClassName} {
+            padding: 0;
+            height: 100%;
+            width: 100%;
+          }
+
           .dot-typography {
             margin-left: ${theme.spacing(1)};
           }
@@ -5337,10 +5404,6 @@ const StyledSidebar = styled.aside`
             border: 'none';
           }
 
-          .dot-list-item-link .dot-icon {
-            margin-right: ${theme.spacing(1)};
-          }
-
           .dot-icon {
             border-radius: 50%;
             display: flex;
@@ -6110,14 +6173,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};
         }
@@ -9475,6 +9538,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%;
@@ -9505,6 +9569,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};
@@ -10462,6 +10527,7 @@ const DotSplitButton = ({
   options = [],
   size = 'medium',
   tooltip,
+  tooltipPlacement,
   type = 'primary'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$l, className, type, disabled ? 'disabled' : '');
@@ -10499,6 +10565,7 @@ const DotSplitButton = ({
         onClick: event => handleClick(event, null, mainOptionKey),
         size: size,
         tooltip: tooltip,
+        tooltipPlacement: tooltipPlacement,
         type: type,
         children: mainOptionChildren
       }), jsx(DotButton, {
@@ -11697,6 +11764,7 @@ const DotHeaderRow = ({
       },
       children: [multiSelectHeader && renderMultiSelectCell(), collapsibleTableOptions && jsx(DotHeaderCell, {
         "aria-hidden": "true",
+        sortable: false,
         typography: typography,
         uid: CreateUUID()
       }), columns.map(cell => {
@@ -13137,6 +13205,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`
@@ -13149,6 +13235,8 @@ const StyledDraggableList = styled.div`
       position: relative;
 
       .${listItemClassName} {
+        width: 100% !important;
+
         .dot-icon {
           color: ${theme.palette.layer.n700};
         }
@@ -13163,30 +13251,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);
@@ -13222,7 +13294,9 @@ const DotDraggableList = ({
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
     draggableHandle: draggableHandle,
-    width: listWidth,
+    style: {
+      width: listWidth
+    },
     children: jsx(ListGridLayout, {
       className: "layout",
       draggableHandle: draggableHandle,
@@ -13232,9 +13306,6 @@ const DotDraggableList = ({
       margin: [0, 0],
       onLayoutChange: onChange && handleLayoutChange(),
       rowHeight: rowHeight,
-      style: {
-        width: listWidth
-      },
       children: orderedItems.map(({
         id: itemId,
         children
@@ -13242,13 +13313,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.0",
+  "version": "2.28.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/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

@@ -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/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;