@digital-ai/dot-components 2.15.1 → 2.16.0

package/CHANGE_LOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [2.16.0](https://www.npmjs.com/package/@digital-ai/dot-components) (09/28/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.15.2...2.16.0)
+
+**Features:**
+
+- S-96608: `DotFileUpload` Allow to pass props to upload button [\#1627](https://github.com/digital-ai/dot-components/pull/1627) ([angel-git](https://github.com/angel-git))
+- S-96168: Add DotIconButton props to DotCopyButton [\#1626](https://github.com/digital-ai/dot-components/pull/1626) ([jmcnally](https://github.com/jmcnally))
+- D-21922: Support `arrow` prop in tooltip components [\#1615](https://github.com/digital-ai/dot-components/pull/1615) ([BoraAksoy](https://github.com/BoraAksoy))
+
+**Fixed bugs:**
+
+- D-26820: `DotInputText` Fix double tab issue [\#1629](https://github.com/digital-ai/dot-components/pull/1629) ([dmiletic85](https://github.com/dmiletic85))
+
+**Misc:**
+
+- Master \> Develop [\#1624](https://github.com/digital-ai/dot-components/pull/1624) ([ryangamble](https://github.com/ryangamble))
+
+## [2.15.2](https://www.npmjs.com/package/@digital-ai/dot-components) (09/25/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.15.1...2.15.2)
+
+**Fixed bugs:**
+
+- D-26652: Use ListItemButton in DotList [\#1618](https://github.com/digital-ai/dot-components/pull/1618) ([ryangamble](https://github.com/ryangamble))
+
+**Misc:**
+
+- Master \> Develop [\#1622](https://github.com/digital-ai/dot-components/pull/1622) ([angel-git](https://github.com/angel-git))
+
 ## [2.15.1](https://www.npmjs.com/package/@digital-ai/dot-components) (09/25/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.15.0...2.15.1)
@@ -308,7 +338,6 @@
 **Misc:**
 
 - S-91314: Remove use of deprecated `StylesProvider` [\#1457](https://github.com/digital-ai/dot-components/pull/1457) ([CWSites](https://github.com/CWSites))
-- S-91975: `TimePicker` - Improve keyboard access [\#1455](https://github.com/digital-ai/dot-components/pull/1455) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [2.7.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/14/2023)
 
@@ -323,6 +352,10 @@
 
 - D-24793:  `DotTimePicker` - set clock instead of calendar icon [\#1444](https://github.com/digital-ai/dot-components/pull/1444) ([dmiletic85](https://github.com/dmiletic85))
 
+**Misc:**
+
+- S-91975: `TimePicker` - Improve keyboard access [\#1455](https://github.com/digital-ai/dot-components/pull/1455) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [2.6.1](https://www.npmjs.com/package/@digital-ai/dot-components) (04/06/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.6.0...2.6.1)
@@ -1000,7 +1033,6 @@
 - S-81968: `ButtonToggle`: Add class prop into `ButtonToggleProps` and export relevant types and interfaces [\#993](https://github.com/digital-ai/dot-components/pull/993) ([dmiletic85](https://github.com/dmiletic85))
 - S-81966: `Divider`: Create and expose `Divider` component [\#992](https://github.com/digital-ai/dot-components/pull/992) ([dmiletic85](https://github.com/dmiletic85))
 - S-81656: `Popper`: Create and expose `Popper` component [\#988](https://github.com/digital-ai/dot-components/pull/988) ([dmiletic85](https://github.com/dmiletic85))
-- S-81802: Add 'Clear all' button to DotTable multiSelect toolbar [\#987](https://github.com/digital-ai/dot-components/pull/987) ([selsemore](https://github.com/selsemore))
 - S-81693: `Menu`: add multi-level support [\#981](https://github.com/digital-ai/dot-components/pull/981) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -1028,6 +1060,7 @@
 
 **Features:**
 
+- S-81802: Add 'Clear all' button to DotTable multiSelect toolbar [\#987](https://github.com/digital-ai/dot-components/pull/987) ([selsemore](https://github.com/selsemore))
 - S-76952: `AutoComplete`: Add dense prop [\#976](https://github.com/digital-ai/dot-components/pull/976) ([dmiletic85](https://github.com/dmiletic85))
 - S-81503: `Autocomplete` Improve functionality for adding new item [\#957](https://github.com/digital-ai/dot-components/pull/957) ([dmiletic85](https://github.com/dmiletic85))
 

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, useMemo, useContext, createContext, 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, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, 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, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
+import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListItem, ListItemButton, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, 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, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
@@ -22,6 +22,7 @@ function useStylesWithRootClass(name, className, ...args) {
 const DotTooltip = ({
   ariaLabel,
   ariaRole: _ariaRole = 'tooltip',
+  arrow: _arrow = true,
   children,
   className,
   'data-testid': dataTestId,
@@ -35,6 +36,7 @@ const DotTooltip = ({
   return title ? jsx(Tooltip, Object.assign({
     "aria-hidden": false,
     "aria-label": ariaLabel || title.toString(),
+    arrow: _arrow,
     className: rootClasses,
     "data-testid": dataTestId,
     leaveDelay: leaveDelay,
@@ -1915,12 +1917,16 @@ const getChevronIcon = (nestedListType, isOpened) => {
 const flyoutListItemClassName = 'dot-flyout-list-item';
 const flyoutItemLinkClassName = 'dot-flyout-item-link';
 const listItemLinkClassName = 'dot-list-item-link';
-const StyledListItem = styled(ListItem).withConfig({
-  displayName: "ListItemstyles__StyledListItem",
-  componentId: "sc-1fawh8v-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", "{&.", "{padding:0;}.dot-tooltip{display:flex;width:100%;}p.MuiTypography-root{flex-grow:2;margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
+const styledListItemElement = elementType => {
+  return styled(elementType).withConfig({
+    displayName: "ListItemstyles",
+    componentId: "sc-1fawh8v-0"
+  })(["", ""], ({
+    theme
+  }) => css(["&.", "{&.", "{padding:0;}.dot-tooltip{display:flex;width:100%;}p.MuiTypography-root{flex-grow:2;margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
+};
+const StyledListItem = styledListItemElement(ListItem);
+const StyledListItemButton = styledListItemElement(ListItemButton);
 
 const rootClassName$Y = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress).withConfig({
@@ -2717,7 +2723,8 @@ const DotListItem = ({
       children: startIcon
     }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
   }), void 0);
-  return jsx(StyledListItem, Object.assign({
+  const ListItem = onClick || href ? StyledListItemButton : StyledListItem;
+  return jsx(ListItem, Object.assign({
     "aria-label": ariaLabel || tooltip,
     classes: {
       root: rootClasses
@@ -3054,11 +3061,12 @@ const DotInputText = ({
         shrink: _type === 'date' ? true : shrink
       },
       inputProps: {
-        'data-testid': dataTestId,
         className: inputClassName,
-        readOnly: _readOnly,
+        'data-testid': dataTestId,
         max,
-        min
+        min,
+        readOnly: _readOnly,
+        tabIndex: 0
       },
       inputRef: inputRef,
       label: persistentLabel ? null : label,
@@ -3075,7 +3083,6 @@ const DotInputText = ({
       required: _required,
       role: "textbox",
       size: _size,
-      tabIndex: 0,
       type: _type,
       value: inputTextValue,
       variant: "outlined"
@@ -3164,13 +3171,30 @@ const StyledCopyButton = styled.span.withConfig({
 
 const DotCopyButton = ({
   ariaLabel: _ariaLabel = 'Copy to clipboard',
+  ariaRole: _ariaRole = 'button',
+  className,
+  color: _color = 'inherit',
   copiedTooltip: _copiedTooltip = 'Copied!',
   copyTooltip: _copyTooltip = 'Copy to clipboard',
   'data-testid': dataTestId = 'dot-copy-button',
+  disabled: _disabled = false,
+  disableRipple: _disableRipple = false,
+  iconId: _iconId = 'duplicate',
+  iconSize: _iconSize = 'small',
+  onClick: _onClick = null,
+  shape: _shape = 'circle',
+  showCopiedIcon: _showCopiedIcon = true,
+  size: _size = 'small',
+  tooltip,
   value
 }) => {
-  const [showCopiedIcon, setShowCopiedIcon] = useState(false);
-  const copyToClipboard = () => {
+  const [timedShowCopiedIcon, setTimedShowCopiedIcon] = useState(false);
+  const [timedDisabled, setTimedDisabled] = useState(false);
+  // To keep backward compatibility if tooltip is not set, use copyTooltip
+  if (!tooltip) {
+    tooltip = _copyTooltip;
+  }
+  const copyToClipboard = useCallback(() => {
     // The check for navigator.clipboard.writeText is because this function is
     // only supported in secure contexts (https). This will always be the case in
     // production but not when running locally.
@@ -3179,27 +3203,44 @@ const DotCopyButton = ({
     } else {
       navigator.clipboard.writeText(value);
     }
-  };
-  const copy = () => {
+  }, [value]);
+  const copy = useCallback(event => {
     copyToClipboard();
-    setShowCopiedIcon(true);
-    setTimeout(function () {
-      setShowCopiedIcon(false);
-    }, 3000);
+    if (_showCopiedIcon) {
+      setTimedShowCopiedIcon(true);
+      setTimeout(function () {
+        setTimedShowCopiedIcon(false);
+      }, 3000);
+    } else if (!_disabled) {
+      setTimedDisabled(true);
+      setTimeout(function () {
+        setTimedDisabled(false);
+      }, 3000);
+    }
+    if (_onClick) {
+      return _onClick(event);
+    }
     return false;
-  };
+  }, [_showCopiedIcon, _disabled, _onClick]);
   return jsxs(StyledCopyButton, Object.assign({
     className: rootClassName$O,
     "data-testid": dataTestId
   }, {
-    children: [!showCopiedIcon && jsx(DotIconButton, {
-      ariaLabel: _ariaLabel || 'copy to clipboard',
+    children: [!timedShowCopiedIcon && jsx(DotIconButton, {
+      ariaLabel: _ariaLabel,
+      ariaRole: _ariaRole,
+      className: className,
+      color: _color,
       "data-testid": `${dataTestId}-button`,
-      iconId: "duplicate",
+      disabled: _disabled || timedDisabled,
+      disableRipple: _disableRipple,
+      iconId: _iconId,
+      iconSize: _iconSize,
       onClick: copy,
-      size: "small",
-      tooltip: _copyTooltip
-    }, void 0), showCopiedIcon && jsx(DotIcon, {
+      shape: _shape,
+      size: _size,
+      tooltip: tooltip
+    }, void 0), timedShowCopiedIcon && jsx(DotIcon, {
       className: "copied-to-clipboard",
       "data-testid": `${dataTestId}-icon`,
       fontSize: "small",
@@ -3875,6 +3916,7 @@ const getTooltipLabel = (label, charactersLimit) => {
 
 const DotTruncateWithTooltip = ({
   ariaLabel,
+  arrow: _arrow = true,
   charactersLimit,
   className,
   'data-testid': dataTestId,
@@ -3884,6 +3926,7 @@ const DotTruncateWithTooltip = ({
   const rootClasses = useStylesWithRootClass(rootClassName$L, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, Object.assign({
     "aria-label": ariaLabel,
+    arrow: _arrow,
     className: rootClasses,
     "data-testid": dataTestId,
     title: getTooltipLabel(label, charactersLimit),
@@ -9330,11 +9373,11 @@ const renderMaxFilesMessage = (maxFiles, maxFilesClasses) => jsx(DotTypography,
 }, {
   children: `${maxFiles} files are the maximum number of files you can upload.`
 }), void 0);
-const renderSelectFilesButton = (isUploadDisabled, onButtonClick) => jsx(DotButton, Object.assign({
+const renderSelectFilesButton = (buttonProps, isUploadDisabled, onButtonClick) => jsx(DotButton, Object.assign({}, buttonProps, {
   disabled: isUploadDisabled,
   onClick: onButtonClick
 }, {
-  children: "Select file(s)"
+  children: buttonProps.label
 }), void 0);
 const renderActiveDragArea = () => jsxs(Fragment, {
   children: [jsx(DotIcon, {
@@ -9345,25 +9388,26 @@ const renderActiveDragArea = () => jsxs(Fragment, {
     children: "Drop the file(s) here ..."
   }), void 0)]
 }, void 0);
-const renderDragAndDropArea = (isUploadDisabled, onSelectButtonClick) => jsxs(Fragment, {
+const renderDragAndDropArea = (buttonProps, isUploadDisabled, onSelectButtonClick) => jsxs(Fragment, {
   children: [jsx(DotIcon, {
     iconId: "upload-file"
   }, void 0), jsxs(DotTypography, Object.assign({
     variant: "h3"
   }, {
     children: ["Drag and drop your file(s) here ", jsx("br", {}, void 0), " or"]
-  }), void 0), renderSelectFilesButton(isUploadDisabled, onSelectButtonClick)]
+  }), void 0), renderSelectFilesButton(buttonProps, isUploadDisabled, onSelectButtonClick)]
 }, void 0);
 const renderDropzoneContent = ({
   buttonOnly,
+  buttonProps,
   isDragActive,
   isUploadDisabled,
   open
 }) => {
   if (buttonOnly) {
-    return renderSelectFilesButton(isUploadDisabled, open);
+    return renderSelectFilesButton(buttonProps, isUploadDisabled, open);
   } else {
-    return isDragActive ? renderActiveDragArea() : renderDragAndDropArea(isUploadDisabled, open);
+    return isDragActive ? renderActiveDragArea() : renderDragAndDropArea(buttonProps, isUploadDisabled, open);
   }
 };
 const getUploadedFilesList = ({
@@ -9426,6 +9470,9 @@ const DotFileUpload = ({
   accept,
   ariaLabel,
   ariaRole: _ariaRole = 'region',
+  buttonProps: _buttonProps = {
+    label: 'Select file(s)'
+  },
   buttonOnly: _buttonOnly = false,
   className,
   'data-testid': dataTestId,
@@ -9498,6 +9545,7 @@ const DotFileUpload = ({
       "data-testid": dataTestId
     }, {
       children: [jsx("input", Object.assign({}, getInputProps()), void 0), renderDropzoneContent({
+        buttonProps: _buttonProps,
         buttonOnly: _buttonOnly,
         isDragActive,
         isUploadDisabled,

package/index.umd.js

@@ -152,19 +152,22 @@
       var ariaLabel = _a.ariaLabel,
         _b = _a.ariaRole,
         ariaRole = _b === void 0 ? 'tooltip' : _b,
+        _c = _a.arrow,
+        arrow = _c === void 0 ? true : _c,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"],
         leaveDelay = _a.leaveDelay,
         onClose = _a.onClose,
         open = _a.open,
-        _c = _a.placement,
-        placement = _c === void 0 ? 'bottom' : _c,
+        _d = _a.placement,
+        placement = _d === void 0 ? 'bottom' : _d,
         title = _a.title;
       var rootClasses = useStylesWithRootClass('dot-tooltip', className);
       return title ? jsxRuntime.jsx(material.Tooltip, __assign({
         "aria-hidden": false,
         "aria-label": ariaLabel || title.toString(),
+        arrow: arrow,
         className: rootClasses,
         "data-testid": dataTestId,
         leaveDelay: leaveDelay,
@@ -2164,13 +2167,17 @@
     var flyoutListItemClassName = 'dot-flyout-list-item';
     var flyoutItemLinkClassName = 'dot-flyout-item-link';
     var listItemLinkClassName = 'dot-list-item-link';
-    var StyledListItem = styled__default["default"](material.ListItem).withConfig({
-      displayName: "ListItemstyles__StyledListItem",
-      componentId: "sc-1fawh8v-0"
-    })(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n    &.", " {\n      &.", " {\n        padding: 0;\n      }\n\n      .dot-tooltip {\n        display: flex;\n        width: 100%;\n      }\n\n      p.MuiTypography-root {\n        flex-grow: 2;\n        margin-bottom: 0;\n      }\n\n      .", " {\n        align-items: center;\n        display: flex;\n        flex-grow: 2;\n      }\n\n      .", " .MuiIcon-root {\n        margin-right: ", ";\n      }\n\n      .dot-icon i:before {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      &.", " {\n        padding: 0;\n      }\n\n      .dot-tooltip {\n        display: flex;\n        width: 100%;\n      }\n\n      p.MuiTypography-root {\n        flex-grow: 2;\n        margin-bottom: 0;\n      }\n\n      .", " {\n        align-items: center;\n        display: flex;\n        flex-grow: 2;\n      }\n\n      .", " .MuiIcon-root {\n        margin-right: ", ";\n      }\n\n      .dot-icon i:before {\n        color: ", ";\n      }\n    }\n  "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
-    });
+    var styledListItemElement = function styledListItemElement(elementType) {
+      return styled__default["default"](elementType).withConfig({
+        displayName: "ListItemstyles",
+        componentId: "sc-1fawh8v-0"
+      })(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), function (_a) {
+        var theme = _a.theme;
+        return styled.css(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        .dot-tooltip {\n          display: flex;\n          width: 100%;\n        }\n\n        p.MuiTypography-root {\n          flex-grow: 2;\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", ";\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "], ["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        .dot-tooltip {\n          display: flex;\n          width: 100%;\n        }\n\n        p.MuiTypography-root {\n          flex-grow: 2;\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", ";\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
+      });
+    };
+    var StyledListItem = styledListItemElement(material.ListItem);
+    var StyledListItemButton = styledListItemElement(material.ListItemButton);
     var templateObject_1$11, templateObject_2$Z;
 
     var rootClassName$Y = 'dot-progress';
@@ -3043,7 +3050,8 @@
           children: startIcon
         }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
       }), void 0);
-      return jsxRuntime.jsx(StyledListItem, __assign({
+      var ListItem = onClick || href ? StyledListItemButton : StyledListItem;
+      return jsxRuntime.jsx(ListItem, __assign({
         "aria-label": ariaLabel || tooltip,
         classes: {
           root: rootClasses
@@ -3395,11 +3403,12 @@
             shrink: type === 'date' ? true : shrink
           },
           inputProps: {
-            'data-testid': dataTestId,
             className: inputClassName,
-            readOnly: readOnly,
+            'data-testid': dataTestId,
             max: max,
-            min: min
+            min: min,
+            readOnly: readOnly,
+            tabIndex: 0
           },
           inputRef: inputRef,
           label: persistentLabel ? null : label,
@@ -3416,7 +3425,6 @@
           required: required,
           role: "textbox",
           size: size,
-          tabIndex: 0,
           type: type,
           value: inputTextValue,
           variant: "outlined"
@@ -3517,17 +3525,46 @@
     var DotCopyButton = function DotCopyButton(_a) {
       var _b = _a.ariaLabel,
         ariaLabel = _b === void 0 ? 'Copy to clipboard' : _b,
-        _c = _a.copiedTooltip,
-        copiedTooltip = _c === void 0 ? 'Copied!' : _c,
-        _d = _a.copyTooltip,
-        copyTooltip = _d === void 0 ? 'Copy to clipboard' : _d,
-        _e = _a["data-testid"],
-        dataTestId = _e === void 0 ? 'dot-copy-button' : _e,
+        _c = _a.ariaRole,
+        ariaRole = _c === void 0 ? 'button' : _c,
+        className = _a.className,
+        _d = _a.color,
+        color = _d === void 0 ? 'inherit' : _d,
+        _e = _a.copiedTooltip,
+        copiedTooltip = _e === void 0 ? 'Copied!' : _e,
+        _f = _a.copyTooltip,
+        copyTooltip = _f === void 0 ? 'Copy to clipboard' : _f,
+        _g = _a["data-testid"],
+        dataTestId = _g === void 0 ? 'dot-copy-button' : _g,
+        _h = _a.disabled,
+        disabled = _h === void 0 ? false : _h,
+        _j = _a.disableRipple,
+        disableRipple = _j === void 0 ? false : _j,
+        _k = _a.iconId,
+        iconId = _k === void 0 ? 'duplicate' : _k,
+        _l = _a.iconSize,
+        iconSize = _l === void 0 ? 'small' : _l,
+        _m = _a.onClick,
+        onClick = _m === void 0 ? null : _m,
+        _o = _a.shape,
+        shape = _o === void 0 ? 'circle' : _o,
+        _p = _a.showCopiedIcon,
+        showCopiedIcon = _p === void 0 ? true : _p,
+        _q = _a.size,
+        size = _q === void 0 ? 'small' : _q,
+        tooltip = _a.tooltip,
         value = _a.value;
-      var _f = React.useState(false),
-        showCopiedIcon = _f[0],
-        setShowCopiedIcon = _f[1];
-      var copyToClipboard = function copyToClipboard() {
+      var _r = React.useState(false),
+        timedShowCopiedIcon = _r[0],
+        setTimedShowCopiedIcon = _r[1];
+      var _s = React.useState(false),
+        timedDisabled = _s[0],
+        setTimedDisabled = _s[1];
+      // To keep backward compatibility if tooltip is not set, use copyTooltip
+      if (!tooltip) {
+        tooltip = copyTooltip;
+      }
+      var copyToClipboard = React.useCallback(function () {
         // The check for navigator.clipboard.writeText is because this function is
         // only supported in secure contexts (https). This will always be the case in
         // production but not when running locally.
@@ -3536,27 +3573,44 @@
         } else {
           navigator.clipboard.writeText(value);
         }
-      };
-      var copy = function copy() {
+      }, [value]);
+      var copy = React.useCallback(function (event) {
         copyToClipboard();
-        setShowCopiedIcon(true);
-        setTimeout(function () {
-          setShowCopiedIcon(false);
-        }, 3000);
+        if (showCopiedIcon) {
+          setTimedShowCopiedIcon(true);
+          setTimeout(function () {
+            setTimedShowCopiedIcon(false);
+          }, 3000);
+        } else if (!disabled) {
+          setTimedDisabled(true);
+          setTimeout(function () {
+            setTimedDisabled(false);
+          }, 3000);
+        }
+        if (onClick) {
+          return onClick(event);
+        }
         return false;
-      };
+      }, [showCopiedIcon, disabled, onClick]);
       return jsxRuntime.jsxs(StyledCopyButton, __assign({
         className: rootClassName$O,
         "data-testid": dataTestId
       }, {
-        children: [!showCopiedIcon && jsxRuntime.jsx(DotIconButton, {
-          ariaLabel: ariaLabel || 'copy to clipboard',
+        children: [!timedShowCopiedIcon && jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: ariaLabel,
+          ariaRole: ariaRole,
+          className: className,
+          color: color,
           "data-testid": dataTestId + "-button",
-          iconId: "duplicate",
+          disabled: disabled || timedDisabled,
+          disableRipple: disableRipple,
+          iconId: iconId,
+          iconSize: iconSize,
           onClick: copy,
-          size: "small",
-          tooltip: copyTooltip
-        }, void 0), showCopiedIcon && jsxRuntime.jsx(DotIcon, {
+          shape: shape,
+          size: size,
+          tooltip: tooltip
+        }, void 0), timedShowCopiedIcon && jsxRuntime.jsx(DotIcon, {
           className: "copied-to-clipboard",
           "data-testid": dataTestId + "-icon",
           fontSize: "small",
@@ -4274,6 +4328,8 @@
 
     var DotTruncateWithTooltip = function DotTruncateWithTooltip(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.arrow,
+        arrow = _b === void 0 ? true : _b,
         charactersLimit = _a.charactersLimit,
         className = _a.className,
         dataTestId = _a["data-testid"],
@@ -4282,6 +4338,7 @@
       var rootClasses = useStylesWithRootClass(rootClassName$L, className, charactersLimit ? 'dot-characters-limit' : '');
       return jsxRuntime.jsx(StyledTruncateWithTooltip, __assign({
         "aria-label": ariaLabel,
+        arrow: arrow,
         className: rootClasses,
         "data-testid": dataTestId,
         title: getTooltipLabel(label, charactersLimit),
@@ -10153,12 +10210,12 @@
         children: maxFiles + " files are the maximum number of files you can upload."
       }), void 0);
     };
-    var renderSelectFilesButton = function renderSelectFilesButton(isUploadDisabled, onButtonClick) {
-      return jsxRuntime.jsx(DotButton, __assign({
+    var renderSelectFilesButton = function renderSelectFilesButton(buttonProps, isUploadDisabled, onButtonClick) {
+      return jsxRuntime.jsx(DotButton, __assign({}, buttonProps, {
         disabled: isUploadDisabled,
         onClick: onButtonClick
       }, {
-        children: "Select file(s)"
+        children: buttonProps.label
       }), void 0);
     };
     var renderActiveDragArea = function renderActiveDragArea() {
@@ -10172,7 +10229,7 @@
         }), void 0)]
       }, void 0);
     };
-    var renderDragAndDropArea = function renderDragAndDropArea(isUploadDisabled, onSelectButtonClick) {
+    var renderDragAndDropArea = function renderDragAndDropArea(buttonProps, isUploadDisabled, onSelectButtonClick) {
       return jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(DotIcon, {
           iconId: "upload-file"
@@ -10180,18 +10237,19 @@
           variant: "h3"
         }, {
           children: ["Drag and drop your file(s) here ", jsxRuntime.jsx("br", {}, void 0), " or"]
-        }), void 0), renderSelectFilesButton(isUploadDisabled, onSelectButtonClick)]
+        }), void 0), renderSelectFilesButton(buttonProps, isUploadDisabled, onSelectButtonClick)]
       }, void 0);
     };
     var renderDropzoneContent = function renderDropzoneContent(_a) {
       var buttonOnly = _a.buttonOnly,
+        buttonProps = _a.buttonProps,
         isDragActive = _a.isDragActive,
         isUploadDisabled = _a.isUploadDisabled,
         open = _a.open;
       if (buttonOnly) {
-        return renderSelectFilesButton(isUploadDisabled, open);
+        return renderSelectFilesButton(buttonProps, isUploadDisabled, open);
       } else {
-        return isDragActive ? renderActiveDragArea() : renderDragAndDropArea(isUploadDisabled, open);
+        return isDragActive ? renderActiveDragArea() : renderDragAndDropArea(buttonProps, isUploadDisabled, open);
       }
     };
     var getUploadedFilesList = function getUploadedFilesList(_a) {
@@ -10263,8 +10321,12 @@
         ariaLabel = _a.ariaLabel,
         _b = _a.ariaRole,
         ariaRole = _b === void 0 ? 'region' : _b,
-        _c = _a.buttonOnly,
-        buttonOnly = _c === void 0 ? false : _c,
+        _c = _a.buttonProps,
+        buttonProps = _c === void 0 ? {
+          label: 'Select file(s)'
+        } : _c,
+        _d = _a.buttonOnly,
+        buttonOnly = _d === void 0 ? false : _d,
         className = _a.className,
         dataTestId = _a["data-testid"],
         disabled = _a.disabled,
@@ -10274,12 +10336,12 @@
         onChange = _a.onChange,
         onDragEnter = _a.onDragEnter,
         onFileClick = _a.onFileClick;
-      var _d = React.useState([]),
-        uploadedFiles = _d[0],
-        setUploadedFiles = _d[1];
-      var _e = React.useState(false),
-        hasMaxFilesError = _e[0],
-        setHasMaxFilesError = _e[1];
+      var _e = React.useState([]),
+        uploadedFiles = _e[0],
+        setUploadedFiles = _e[1];
+      var _f = React.useState(false),
+        hasMaxFilesError = _f[0],
+        setHasMaxFilesError = _f[1];
       var isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
       var rootClasses = useStylesWithRootClass(rootClassName$6, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
       var maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
@@ -10304,7 +10366,7 @@
       var onDrop = React.useCallback(function (acceptedFiles, fileRejections) {
         hideFilesList ? setNewlyUploadedFiles(acceptedFiles, fileRejections) : parseFiles(acceptedFiles, fileRejections);
       }, [hideFilesList, setNewlyUploadedFiles, parseFiles]);
-      var _f = reactDropzone.useDropzone({
+      var _g = reactDropzone.useDropzone({
           accept: accept,
           disabled: isUploadDisabled,
           maxSize: maxSize * 1024 * 1024,
@@ -10313,10 +10375,10 @@
           onDragEnter: onDragEnter,
           onDrop: onDrop
         }),
-        getRootProps = _f.getRootProps,
-        getInputProps = _f.getInputProps,
-        isDragActive = _f.isDragActive,
-        open = _f.open;
+        getRootProps = _g.getRootProps,
+        getInputProps = _g.getInputProps,
+        isDragActive = _g.isDragActive,
+        open = _g.open;
       var deleteFile = function deleteFile(fileIndexToBeRemoved) {
         uploadedFiles.splice(fileIndexToBeRemoved, 1);
         setUploadedFiles(__spreadArray([], uploadedFiles));
@@ -10338,6 +10400,7 @@
           "data-testid": dataTestId
         }, {
           children: [jsxRuntime.jsx("input", __assign({}, getInputProps()), void 0), renderDropzoneContent({
+            buttonProps: buttonProps,
             buttonOnly: buttonOnly,
             isDragActive: isDragActive,
             isUploadDisabled: isUploadDisabled,

package/lib/components/button/CopyButton.d.ts

@@ -1,7 +1,14 @@
-import { CommonProps } from '../CommonProps';
-export interface CopyButtonProps extends CommonProps {
+import { CommonIconButtonProps } from '../button/IconButton';
+export interface CopyButtonProps extends CommonIconButtonProps {
+    /** Tooltip shown briefly after the value has been copied. */
     copiedTooltip?: string;
+    /** DEPRECATED Use tooltip instead */
     copyTooltip?: string;
+    /** The icon to display on the button, defaults to 'duplicate' */
+    iconId?: string;
+    /** By default a check icon will briefly display after the content is copied */
+    showCopiedIcon?: boolean;
+    /** The content which will be copied to the clipboard */
     value: string;
 }
-export declare const DotCopyButton: ({ ariaLabel, copiedTooltip, copyTooltip, "data-testid": dataTestId, value, }: CopyButtonProps) => JSX.Element;
+export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, copyTooltip, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => JSX.Element;

package/lib/components/button/CopyButton.stories.d.ts

@@ -1,5 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
 import { CopyButtonProps } from './CopyButton';
-declare const _default: ComponentMeta<({ ariaLabel, copiedTooltip, copyTooltip, "data-testid": dataTestId, value, }: CopyButtonProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, color, copiedTooltip, copyTooltip, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => JSX.Element>;
 export default _default;
 export declare const Default: any;

package/lib/components/button/IconButton.d.ts

@@ -4,15 +4,13 @@ import { IconFontSize } from '../icon/Icon';
 export declare type IconButtonColor = 'default' | 'inherit' | 'primary' | 'secondary';
 export declare type IconButtonSize = 'small' | 'medium';
 export declare type IconButtonShape = 'circle' | 'square';
-export interface IconButtonProps extends CommonProps {
+export interface CommonIconButtonProps extends CommonProps {
     /** 'default', 'inherit', 'primary', 'secondary' */
     color?: IconButtonColor;
     /** If true, the ripple effect is disabled. */
     disableRipple?: boolean;
     /** If true, the button will be disabled. */
     disabled?: boolean;
-    /** The icon to display on the button */
-    iconId: string;
     /** Determines the size of the icon itself and spacing around it */
     iconSize?: IconFontSize;
     /** Event callback */
@@ -24,4 +22,8 @@ export interface IconButtonProps extends CommonProps {
     /** Help text to be displayed on icon hover */
     tooltip?: string;
 }
+export interface IconButtonProps extends CommonIconButtonProps {
+    /** The icon to display on the button */
+    iconId: string;
+}
 export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => JSX.Element;

package/lib/components/file-upload/FileListItem.styles.d.ts

@@ -35,7 +35,7 @@ export declare const StyledFileListItem: ((props: {
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions>;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
     ref?: import("react").Ref<HTMLAnchorElement>;
-}, "button" | "style" | "className" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected" | "components" | "componentsProps" | "slotProps" | "slots">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
+}, "button" | "style" | "className" | "tabIndex" | "children" | "autoFocus" | "disabled" | "action" | "selected" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "components" | "componentsProps" | "slotProps" | "slots">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
     button: true;
 }, "div">>> & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ListItemTypeMap<{
     button?: false;

package/lib/components/file-upload/FileUpload.d.ts

@@ -2,11 +2,22 @@
 import { CommonProps } from '../CommonProps';
 import { MappedFile } from './utils/models';
 import { ListItemFile } from './FileListItem';
+import { BaseButtonProps } from '../BaseButtonProps';
+interface OmittedButtonProps {
+    disabled: unknown;
+    isSubmit: unknown;
+    onClick: unknown;
+}
+export declare type FileUploadButtonProps = Omit<BaseButtonProps, keyof OmittedButtonProps> & {
+    label: string;
+};
 export interface FileUploadProps extends CommonProps {
     /** Unique file type specifiers <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers" target="_blank">More Info</a> */
     accept?: Array<string>;
     /** If true, will only display the button */
     buttonOnly?: boolean;
+    /** the file upload button props, not all button props are available */
+    buttonProps?: FileUploadButtonProps;
     /** If true, the upload zone will be disabled */
     disabled?: boolean;
     /** If true, upload file list won't be displayed. Used when consumer wants to render his own list. */
@@ -22,4 +33,5 @@ export interface FileUploadProps extends CommonProps {
     /** Optional callback which gets triggered when the file (from the list) is clicked.  */
     onFileClick?: (file: ListItemFile) => void;
 }
-export declare const DotFileUpload: ({ accept, ariaLabel, ariaRole, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element;
+export declare const DotFileUpload: ({ accept, ariaLabel, ariaRole, buttonProps, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element;
+export {};

package/lib/components/file-upload/FileUpload.stories.d.ts

@@ -1,8 +1,9 @@
 import { ComponentMeta } from '@storybook/react';
 import { FileUploadProps } from './';
-declare const _default: ComponentMeta<({ accept, ariaLabel, ariaRole, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ accept, ariaLabel, ariaRole, buttonProps, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element>;
 export default _default;
 export declare const Default: any;
 export declare const WithSingleFileLimit: any;
 export declare const WithCustomFileUploadList: (args: FileUploadProps) => JSX.Element;
 export declare const WithUploadErrors: (args: FileUploadProps) => JSX.Element;
+export declare const WithCustomButtonProps: (args: FileUploadProps) => JSX.Element;

package/lib/components/file-upload/utils/helpers.d.ts

@@ -1,12 +1,13 @@
 import React, { ReactNode } from 'react';
 import { FileRejection } from 'react-dropzone';
 import { DropzoneContentArgs, FileUploadError, ParseListItemArgs, UploadedFilesListArgs } from './models';
+import { FileUploadButtonProps } from '../FileUpload';
 export declare const renderMaxSizeMessage: (maxSizeMB: number) => ReactNode;
 export declare const renderMaxFilesMessage: (maxFiles: number, maxFilesClasses: string) => ReactNode;
-export declare const renderSelectFilesButton: (isUploadDisabled: boolean, onButtonClick: () => void) => ReactNode;
+export declare const renderSelectFilesButton: (buttonProps: FileUploadButtonProps, isUploadDisabled: boolean, onButtonClick: () => void) => ReactNode;
 export declare const renderActiveDragArea: () => ReactNode;
-export declare const renderDragAndDropArea: (isUploadDisabled: boolean, onSelectButtonClick: () => void) => ReactNode;
-export declare const renderDropzoneContent: ({ buttonOnly, isDragActive, isUploadDisabled, open, }: DropzoneContentArgs) => React.ReactNode;
+export declare const renderDragAndDropArea: (buttonProps: FileUploadButtonProps, isUploadDisabled: boolean, onSelectButtonClick: () => void) => ReactNode;
+export declare const renderDropzoneContent: ({ buttonOnly, buttonProps, isDragActive, isUploadDisabled, open, }: DropzoneContentArgs) => React.ReactNode;
 export declare const getUploadedFilesList: ({ maxSize, onFileClick, onFileDelete, uploadedFiles, }: UploadedFilesListArgs) => {
     child: JSX.Element;
 }[];

package/lib/components/file-upload/utils/models.d.ts

@@ -1,5 +1,6 @@
 import { FileWithPath } from 'react-dropzone';
 import { ListItemFile } from '../FileListItem';
+import { FileUploadButtonProps } from '../FileUpload';
 export interface FileUploadError {
     code: string;
     message: string;
@@ -14,6 +15,7 @@ export interface MappedFile {
 }
 export interface DropzoneContentArgs {
     buttonOnly: boolean;
+    buttonProps: FileUploadButtonProps;
     isDragActive: boolean;
     isUploadDisabled: boolean;
     open: () => void;

package/lib/components/list/ListItem.styles.d.ts

@@ -2,43 +2,5 @@
 export declare const flyoutListItemClassName = "dot-flyout-list-item";
 export declare const flyoutItemLinkClassName = "dot-flyout-item-link";
 export declare const listItemLinkClassName = "dot-list-item-link";
-export declare const StyledListItem: ((props: {
-    href: string;
-} & {
-    button: true;
-} & import("@mui/material").ListItemBaseProps & {
-    components?: {
-        Root?: import("react").ElementType<any>;
-    };
-    componentsProps?: {
-        root?: import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides;
-    };
-    slotProps?: {
-        root?: import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides;
-    };
-    slots?: {
-        root?: import("react").ElementType<any>;
-    };
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions>;
-    centerRipple?: boolean;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses>;
-    disabled?: boolean;
-    disableRipple?: boolean;
-    disableTouchRipple?: boolean;
-    focusRipple?: boolean;
-    focusVisibleClassName?: string;
-    LinkComponent?: import("react").ElementType<any>;
-    onFocusVisible?: import("react").FocusEventHandler<any>;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
-    tabIndex?: number;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps>;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions>;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
-    ref?: import("react").Ref<HTMLAnchorElement>;
-}, "button" | "style" | "className" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected" | "components" | "componentsProps" | "slotProps" | "slots">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
-    button: true;
-}, "div">>> & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ListItemTypeMap<{
-    button?: false;
-}, "li">>;
+export declare const StyledListItem: import("react").ComponentType<any> | keyof JSX.IntrinsicElements;
+export declare const StyledListItemButton: import("react").ComponentType<any> | keyof JSX.IntrinsicElements;

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

@@ -2,6 +2,8 @@ import { ReactNode, ReactElement, ChangeEvent } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare 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;
     leaveDelay?: number;
     onClose?: (event: ChangeEvent) => void;
@@ -9,4 +11,4 @@ export interface TooltipProps extends CommonProps {
     placement?: tooltipPlacement;
     title?: ReactNode | string | number;
 }
-export declare const DotTooltip: ({ ariaLabel, ariaRole, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => JSX.Element;
+export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => JSX.Element;

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

@@ -1,5 +1,5 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { TooltipProps } from './Tooltip';
-declare const _default: ComponentMeta<({ ariaLabel, ariaRole, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<TooltipProps>;

package/lib/components/truncate-with-tooltip/TruncateWithTooltip.d.ts

@@ -1,7 +1,9 @@
 import { CommonProps } from '../CommonProps';
 export interface TruncateWithTooltipProps extends CommonProps {
+    /** If true, adds an arrow to the tooltip indicating which element it refers to. */
+    arrow?: boolean;
     charactersLimit?: number;
     label: string;
     width?: number | string;
 }
-export declare const DotTruncateWithTooltip: ({ ariaLabel, charactersLimit, className, "data-testid": dataTestId, label, width, }: TruncateWithTooltipProps) => JSX.Element;
+export declare const DotTruncateWithTooltip: ({ ariaLabel, arrow, charactersLimit, className, "data-testid": dataTestId, label, width, }: TruncateWithTooltipProps) => JSX.Element;

package/lib/components/truncate-with-tooltip/TruncateWithTooltip.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import { TruncateWithTooltipProps } from './';
-declare const _default: ComponentMeta<({ ariaLabel, charactersLimit, className, "data-testid": dataTestId, label, width, }: TruncateWithTooltipProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, arrow, charactersLimit, className, "data-testid": dataTestId, label, width, }: TruncateWithTooltipProps) => JSX.Element>;
 export default _default;
 export declare const Default: any;
 export declare const WithAutoTruncate: any;

package/package.json

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