@digital-ai/dot-components 4.16.0 → 4.16.2

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} {
@@ -6645,21 +6651,21 @@ const DotChip = ({
   size = 'medium',
   startIcon,
   tabIndex,
-  tooltipHoverVisibility = 'overflow'
+  tooltipProps
 }) => {
   const errorClass = error ? 'Mui-error' : '';
   const rootClasses = useStylesWithRootClass(rootClassName$Z, className, errorClass);
   const isTruncated = charactersLimit > 0 && children.length > charactersLimit;
-  const getChipLabelWithTooltip = label => jsx(DotTooltip, {
+  const getChipLabelWithTooltip = label => jsx(DotTooltip, Object.assign({}, tooltipProps, {
     hoverVisibility: "always",
     title: children,
     children: jsx("span", {
       children: label
     })
-  });
+  }));
   const getChipLabel = () => {
     const label = isTruncated ? `${children.substring(0, charactersLimit)}...` : children;
-    if (tooltipHoverVisibility === 'always' || isTruncated && tooltipHoverVisibility === 'overflow') {
+    if (!tooltipProps && isTruncated || (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.hoverVisibility) === 'always' || isTruncated && (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.hoverVisibility) === 'overflow') {
       return getChipLabelWithTooltip(label);
     } else return label;
   };

package/package.json

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

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

@@ -1,7 +1,8 @@
 import { MouseEvent, ReactElement } from 'react';
-import { TooltipHoverVisibility } from '../tooltip';
+import { TooltipProps } from '../tooltip';
 import { CommonProps } from '../CommonProps';
 export type ChipSize = 'medium' | 'small';
+export type ChipTooltipProps = Omit<TooltipProps, 'children' | 'title'>;
 export declare const DEFAULT_CHARACTERS_LIMIT = 32;
 export interface ChipProps extends CommonProps {
     /** If provided, will display an avatar which takes precedence over icon */
@@ -28,7 +29,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;
+    /** Custom tooltip props to fine-tune tooltip display when rendered */
+    tooltipProps?: ChipTooltipProps;
 }
-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;
+export declare const DotChip: ({ ariaLabel, avatar, charactersLimit, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, tabIndex, tooltipProps, }: ChipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -49,6 +49,7 @@ export type { CarouselAnimationVariant, CarouselNavigationButtonDisplayOption, C
 export type { StickyWithBorderProps } from './sticky-with-border';
 export type { SlotProps, TooltipProps, TooltipHoverVisibility, TooltipPlacement, } from './tooltip';
 export type { DashboardHeaderProps } from './analytics/dashboard-header/DashboardHeader';
+export type { ChipTooltipProps, ChipProps, ChipSize } from './chip/Chip';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';