@digital-ai/dot-components 2.15.2 → 2.16.0

package/CHANGE_LOG.md

@@ -1,5 +1,23 @@
 # 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)
@@ -320,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)
 
@@ -335,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)
@@ -953,7 +974,6 @@
 
 **Features:**
 
-- S-82390: Configure `tsconfig.json` so that `React` imports are obsolete [\#1041](https://github.com/digital-ai/dot-components/pull/1041) ([dmiletic85](https://github.com/dmiletic85))
 - S-81800: `Badge`: Add ability to render the number [\#1037](https://github.com/digital-ai/dot-components/pull/1037) ([dmiletic85](https://github.com/dmiletic85))
 - S-82311: deprecate startIconId, endIconId ListItem props in favor of startIcon, endIcon [\#1035](https://github.com/digital-ai/dot-components/pull/1035) ([selsemore](https://github.com/selsemore))
 
@@ -1013,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:**
@@ -1041,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))
 
@@ -1127,8 +1147,8 @@
 - D-19378: `AutoComplete` doesn't have `required` property [\#914](https://github.com/digital-ai/dot-components/pull/914) ([dmiletic85](https://github.com/dmiletic85))
 - D-19376: `Menu`: `maxVisibleItems` prop does not control visible items anymore [\#911](https://github.com/digital-ai/dot-components/pull/911) ([dmiletic85](https://github.com/dmiletic85))
 - D-19366: `Menu`: Circular dependency [\#909](https://github.com/digital-ai/dot-components/pull/909) ([dmiletic85](https://github.com/dmiletic85))
+- D-19355: `Breadcrumbs`: invalid combination of props [\#907](https://github.com/digital-ai/dot-components/pull/907) ([dmiletic85](https://github.com/dmiletic85))
 - D-19129: `Table`: Cells in the Table component should be wrapped by `DotTypography` [\#900](https://github.com/digital-ai/dot-components/pull/900) ([dmiletic85](https://github.com/dmiletic85))
-- D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.5.4](https://www.npmjs.com/package/@digital-ai/dot-components) (12/28/2021)
 
@@ -1142,7 +1162,7 @@
 
 **Fixed bugs:**
 
-- D-19355: `Breadcrumbs`: invalid combination of props [\#907](https://github.com/digital-ai/dot-components/pull/907) ([dmiletic85](https://github.com/dmiletic85))
+- D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
 - D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - D-19200: `List` Nested list drawer is not rendering correctly [\#869](https://github.com/digital-ai/dot-components/pull/869) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -1327,7 +1347,6 @@
 - D-19026: Missing required prop for icon button when importing it to table cell [\#761](https://github.com/digital-ai/dot-components/pull/761) ([monapatel91](https://github.com/monapatel91))
 - D-18543: proper export of type and interface [\#760](https://github.com/digital-ai/dot-components/pull/760) ([CWSites](https://github.com/CWSites))
 - D-19023: Circular Dependency in `DynamicForm` component [\#759](https://github.com/digital-ai/dot-components/pull/759) ([dmiletic85](https://github.com/dmiletic85))
-- D-19004: update readme link to be accurate [\#750](https://github.com/digital-ai/dot-components/pull/750) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -1345,6 +1364,7 @@
 **Fixed bugs:**
 
 - D-19011: remove default MUI min width of end icon on list item [\#754](https://github.com/digital-ai/dot-components/pull/754) ([CWSites](https://github.com/CWSites))
+- D-19004: update readme link to be accurate [\#750](https://github.com/digital-ai/dot-components/pull/750) ([CWSites](https://github.com/CWSites))
 - D-18990: allow consumers to pass custom menu item height [\#749](https://github.com/digital-ai/dot-components/pull/749) ([CWSites](https://github.com/CWSites))
 - D-18992: Missing disabled prop of icon button when importing it to tablecell [\#745](https://github.com/digital-ai/dot-components/pull/745) ([monapatel91](https://github.com/monapatel91))
 - D-18997: when specified width of sidebar, it should be applied properly [\#737](https://github.com/digital-ai/dot-components/pull/737) ([CWSites](https://github.com/CWSites))
@@ -1438,6 +1458,7 @@
 - D-18817: set mainMenuItems to `null` by default [\#688](https://github.com/digital-ai/dot-components/pull/688) ([CWSites](https://github.com/CWSites))
 - D-18664: update link to allow for keypress [\#686](https://github.com/digital-ai/dot-components/pull/686) ([CWSites](https://github.com/CWSites))
 - D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
+- D-18663: Update AutoComplete value typing [\#684](https://github.com/digital-ai/dot-components/pull/684) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -1461,7 +1482,6 @@
 
 **Fixed bugs:**
 
-- D-18663: Update AutoComplete value typing [\#684](https://github.com/digital-ai/dot-components/pull/684) ([CWSites](https://github.com/CWSites))
 - D-18424: include breadcrumb wrapper with breadcrumb component [\#675](https://github.com/digital-ai/dot-components/pull/675) ([CWSites](https://github.com/CWSites))
 - D-18536: material 4.12.3 upgrade [\#667](https://github.com/digital-ai/dot-components/pull/667) ([CWSites](https://github.com/CWSites))
 
@@ -1492,6 +1512,7 @@
 - S-78497: Add 'page' prop to DotTable [\#662](https://github.com/digital-ai/dot-components/pull/662) ([selsemore](https://github.com/selsemore))
 - Issue \#632: Add aria-label property [\#659](https://github.com/digital-ai/dot-components/pull/659) ([dmiletic85](https://github.com/dmiletic85))
 - S-78464: SonarQube [\#657](https://github.com/digital-ai/dot-components/pull/657) ([CWSites](https://github.com/CWSites))
+- S-78388: Export interfaces and types needed for table pagination and sorting [\#654](https://github.com/digital-ai/dot-components/pull/654) ([selsemore](https://github.com/selsemore))
 - S-77872: gather test coverage in sonarcloud [\#653](https://github.com/digital-ai/dot-components/pull/653) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.8](https://www.npmjs.com/package/@digital-ai/dot-components) (08/23/2021)
@@ -1500,7 +1521,6 @@
 
 **Misc:**
 
-- S-78388: Export interfaces and types needed for table pagination and sorting [\#654](https://github.com/digital-ai/dot-components/pull/654) ([selsemore](https://github.com/selsemore))
 - add export back to component library [\#652](https://github.com/digital-ai/dot-components/pull/652) ([CWSites](https://github.com/CWSites))
 - add back missing items from export [\#651](https://github.com/digital-ai/dot-components/pull/651) ([TheKeithStewart](https://github.com/TheKeithStewart))
 

package/index.esm.js

@@ -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,
@@ -3059,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,
@@ -3080,7 +3083,6 @@ const DotInputText = ({
       required: _required,
       role: "textbox",
       size: _size,
-      tabIndex: 0,
       type: _type,
       value: inputTextValue,
       variant: "outlined"
@@ -3169,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.
@@ -3184,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",
@@ -3880,6 +3916,7 @@ const getTooltipLabel = (label, charactersLimit) => {
 
 const DotTruncateWithTooltip = ({
   ariaLabel,
+  arrow: _arrow = true,
   charactersLimit,
   className,
   'data-testid': dataTestId,
@@ -3889,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),
@@ -9335,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, {
@@ -9350,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 = ({
@@ -9431,6 +9470,9 @@ const DotFileUpload = ({
   accept,
   ariaLabel,
   ariaRole: _ariaRole = 'region',
+  buttonProps: _buttonProps = {
+    label: 'Select file(s)'
+  },
   buttonOnly: _buttonOnly = false,
   className,
   'data-testid': dataTestId,
@@ -9503,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,
@@ -3400,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,
@@ -3421,7 +3425,6 @@
           required: required,
           role: "textbox",
           size: size,
-          tabIndex: 0,
           type: type,
           value: inputTextValue,
           variant: "outlined"
@@ -3522,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.
@@ -3541,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",
@@ -4279,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"],
@@ -4287,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),
@@ -10158,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() {
@@ -10177,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"
@@ -10185,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) {
@@ -10268,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,
@@ -10279,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' : '');
@@ -10309,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,
@@ -10318,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));
@@ -10343,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/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/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.2",
+  "version": "2.16.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [