@digital-ai/dot-components 4.15.0 → 4.16.1

package/index.esm.js

@@ -3346,9 +3346,15 @@ const StyledMenuList = styled(MenuList)`
           background: ${hoverGray};
         }
 
-        &.Mui-selected,
-        &.Mui-selected:hover {
-          background: ${lightSelectedGray};
+        &.Mui-selected {
+          &,
+          &:hover {
+            background: ${lightSelectedGray};
+          }
+
+          &.Mui-focusVisible {
+            background: ${selectedGray};
+          }
         }
 
         &.${listItemWithSubmenuClassName} {
@@ -6644,19 +6650,24 @@ const DotChip = ({
   onDelete,
   size = 'medium',
   startIcon,
-  tabIndex
+  tabIndex,
+  tooltipHoverVisibility = 'overflow'
 }) => {
   const errorClass = error ? 'Mui-error' : '';
   const rootClasses = useStylesWithRootClass(rootClassName$Z, className, errorClass);
+  const isTruncated = charactersLimit > 0 && children.length > charactersLimit;
+  const getChipLabelWithTooltip = label => jsx(DotTooltip, {
+    hoverVisibility: "always",
+    title: children,
+    children: jsx("span", {
+      children: label
+    })
+  });
   const getChipLabel = () => {
-    if (charactersLimit <= 0 || children.length < charactersLimit) return children;
-    const label = `${children.substring(0, charactersLimit)}...`;
-    return jsx(DotTooltip, {
-      title: children,
-      children: jsx("span", {
-        children: label
-      })
-    });
+    const label = isTruncated ? `${children.substring(0, charactersLimit)}...` : children;
+    if (tooltipHoverVisibility === 'always' || isTruncated && tooltipHoverVisibility === 'overflow') {
+      return getChipLabelWithTooltip(label);
+    } else return label;
   };
   return jsx(StyledChip, {
     "aria-label": ariaLabel,

package/package.json

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

package/src/lib/components/chip/Chip.d.ts

@@ -1,4 +1,5 @@
 import { MouseEvent, ReactElement } from 'react';
+import { TooltipHoverVisibility } from '../tooltip';
 import { CommonProps } from '../CommonProps';
 export type ChipSize = 'medium' | 'small';
 export declare const DEFAULT_CHARACTERS_LIMIT = 32;
@@ -27,5 +28,7 @@ export interface ChipProps extends CommonProps {
     startIcon?: ReactElement;
     /** The tab index of the chip  */
     tabIndex?: number;
+    /** Tooltip option which governs when the tooltip text should be visible */
+    tooltipHoverVisibility?: TooltipHoverVisibility;
 }
-export declare const DotChip: ({ ariaLabel, avatar, charactersLimit, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, tabIndex, }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotChip: ({ ariaLabel, avatar, charactersLimit, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, tabIndex, tooltipHoverVisibility, }: ChipProps) => import("react/jsx-runtime").JSX.Element;