@digital-ai/dot-components 1.17.0 → 1.18.0

package/CHANGE_LOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## [1.18.0](https://github.com/digital-ai/dot-components/tree/1.18.0) (06/21/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.17.2...1.18.0)
+
+**Features:**
+
+- S-85256: `Map` component example in demo app [\#1184](https://github.com/digital-ai/dot-components/pull/1184) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- `DotAutcomplete` loading spinner is in wrong position when `freesolo` is not enabled [\#1188](https://github.com/digital-ai/dot-components/issues/1188)
+- `DotDraggableList` 4 issues in 1 [\#1183](https://github.com/digital-ai/dot-components/issues/1183)
+- D-21609: `DotAutocomplete` allow `null` as value [\#1195](https://github.com/digital-ai/dot-components/pull/1195) ([dmiletic85](https://github.com/dmiletic85))
+- D-21606 `DotAutcomplete` loading spinner is in wrong position when `freesolo` is not enabled [\#1194](https://github.com/digital-ai/dot-components/pull/1194) ([angel-git](https://github.com/angel-git))
+- D-21577: `DraggableList` improvements and bug fixes [\#1190](https://github.com/digital-ai/dot-components/pull/1190) ([dmiletic85](https://github.com/dmiletic85))
+
+**Closed issues:**
+
+- `DotAutocomplete` allow `null` as value [\#1189](https://github.com/digital-ai/dot-components/issues/1189)
+
+**Merged pull requests:**
+
+- `master` \> `develop` [\#1187](https://github.com/digital-ai/dot-components/pull/1187) ([TheKeithStewart](https://github.com/TheKeithStewart))
+
+## [1.17.2](https://github.com/digital-ai/dot-components/tree/1.17.2) (06/10/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.17.1...1.17.2)
+
+**Features:**
+
+- `InlineEdit` component should provide a tooltip out the box [\#1179](https://github.com/digital-ai/dot-components/issues/1179)
+- S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
+- S-85283: `InlineEdit` component should provide a tooltip out the box [\#1181](https://github.com/digital-ai/dot-components/pull/1181) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- Sidebar drawer/expanded does not have a data-testid prop supplied [\#1162](https://github.com/digital-ai/dot-components/issues/1162)
+- D-21245: make sure `data-testid` is passed to nested lists [\#1182](https://github.com/digital-ai/dot-components/pull/1182) ([CWSites](https://github.com/CWSites))
+- D-21267: adjust color of helper text [\#1174](https://github.com/digital-ai/dot-components/pull/1174) ([CWSites](https://github.com/CWSites))
+
+## [1.17.1](https://github.com/digital-ai/dot-components/tree/1.17.1) (05/19/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.17.0...1.17.1)
+
+**Fixed bugs:**
+
+- `DotButtonToggle`: Button size is not respected after tooltip change [\#1170](https://github.com/digital-ai/dot-components/issues/1170)
+- D-21287: `DotButtonToggle`: Button size is not respected after tooltip change [\#1171](https://github.com/digital-ai/dot-components/pull/1171) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [1.17.0](https://github.com/digital-ai/dot-components/tree/1.17.0) (05/18/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.1...1.17.0)
@@ -87,6 +136,7 @@
 
 - `InlineEdit` Support for different text in view/edit modes [\#1103](https://github.com/digital-ai/dot-components/issues/1103)
 - S-83748: `InlineEdit`: Support for different text in view/edit modes [\#1105](https://github.com/digital-ai/dot-components/pull/1105) ([dmiletic85](https://github.com/dmiletic85))
+- S-82617: `DotInputText` Expose mouse up event [\#1063](https://github.com/digital-ai/dot-components/pull/1063) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -128,7 +178,6 @@
 - S-82899: `DotCheckbox`: Add more Storybook examples [\#1090](https://github.com/digital-ai/dot-components/pull/1090) ([dmiletic85](https://github.com/dmiletic85))
 - S-82453: `TruncateWithTooltip`: Create new component [\#1072](https://github.com/digital-ai/dot-components/pull/1072) ([dmiletic85](https://github.com/dmiletic85))
 - S-82519: `Snackbar` Allow positioning [\#1064](https://github.com/digital-ai/dot-components/pull/1064) ([dmiletic85](https://github.com/dmiletic85))
-- S-82617: `DotInputText` Expose mouse up event [\#1063](https://github.com/digital-ai/dot-components/pull/1063) ([dmiletic85](https://github.com/dmiletic85))
 - S-76904: `InlineEdit` improvements [\#1053](https://github.com/digital-ai/dot-components/pull/1053) ([dmiletic85](https://github.com/dmiletic85))
 - S-82059: `DraggableList`: Create and export the component [\#1003](https://github.com/digital-ai/dot-components/pull/1003) ([dmiletic85](https://github.com/dmiletic85))
 

package/index.esm.js

@@ -2084,6 +2084,7 @@ const DotListItem = ({
   }, showStartIcon && renderListItemStartIcon(), renderListItemText()), showEndIcon && renderListItemEndIcon())), hasChildren && /*#__PURE__*/React__default.createElement(NestedList, {
     anchorEl: anchorEl,
     ariaLabel: "nested list",
+    "data-testid": "nestedList",
     items: _items2,
     menuPlacement: menuPlacement,
     nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
@@ -2095,6 +2096,7 @@ const DotListItem = ({
 const NestedList = ({
   ariaLabel,
   anchorEl,
+  'data-testid': dataTestId,
   items,
   menuPlacement,
   nestedDrawerLeftSpacing,
@@ -2121,6 +2123,7 @@ const NestedList = ({
       ariaLabel: ariaLabel,
       className: nestedListClassName,
       component: "div",
+      "data-testid": dataTestId,
       disablePadding: true,
       items: items,
       key: parentItemIndex
@@ -2145,6 +2148,7 @@ const NestedList = ({
         }, /*#__PURE__*/React__default.createElement(StyledListItem, {
           className: flyoutItemClasses,
           component: href && !onClick ? 'a' : null,
+          "data-testid": `${dataTestId}-item-${index}`,
           href: href,
           key: `${parentItemIndex}-${index}`,
           onClick: onClick,
@@ -2162,6 +2166,7 @@ const NestedList = ({
       anchorEl: anchorEl,
       ariaLabel: ariaLabel,
       className: flyoutMenuClassName,
+      "data-testid": dataTestId,
       id: CreateUUID(),
       key: parentItemIndex,
       menuItemHeight: "auto",
@@ -2188,6 +2193,7 @@ const NestedList = ({
       ariaLabel: ariaLabel,
       className: nestedListClassName,
       component: "div",
+      "data-testid": dataTestId,
       disablePadding: true,
       items: items,
       key: parentItemIndex,
@@ -2678,7 +2684,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen));
+}) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen));
 
 const rootClassName$F = 'dot-button';
 const StyledButton = styled(Button).withConfig({
@@ -3110,10 +3116,10 @@ const DotAutoComplete = ({
             className: useStylesWithRootClass(inputProps.className, 'dot-input')
           }),
           InputProps: Object.assign(Object.assign({}, params.InputProps), {
-            endAdornment: loading ? /*#__PURE__*/React__default.createElement(DotProgress, {
+            endAdornment: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(DotProgress, {
               color: "inherit",
               size: 20
-            }) : params.InputProps.endAdornment
+            }), params.InputProps.endAdornment)
           }),
           inputRef: textFieldRef,
           label: label,
@@ -3510,13 +3516,50 @@ const DotBreadcrumbs = ({
   }));
 };
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 const rootClassName$C = 'dot-button-toggle';
 const StyledToggleButtonGroup = styled(ToggleButtonGroup).withConfig({
   displayName: "ButtonTogglestyles__StyledToggleButtonGroup",
   componentId: "sc-1oh4ljv-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.MuiToggleButton-root{padding:0;}.toggle-button-children-wrapper{display:flex;padding:", "px;}.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled p,&.Mui-disabled .dot-icon{color:", ";}}"], rootClassName$C, theme.spacing(1.375), theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]));
+}) => css(["&.", "{.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled p,&.Mui-disabled .dot-icon{color:", ";}}"], rootClassName$C, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]));
 
 const DotButtonToggle = ({
   ariaLabel,
@@ -3533,22 +3576,34 @@ const DotButtonToggle = ({
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$C, className);
 
-  const renderToggleButtonChildren = ({
+  const renderToggleButton = ({
+    ariaLabel: optionAriaLabel,
+    className: optionClassName,
+    disabled: optionDisabled,
     iconId: optionIconId,
     text: optionText,
-    tooltip: optionTooltip
-  }) => {
-    const children = /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": dataTestId && `${dataTestId}-children-wrapper`,
-      className: "toggle-button-children-wrapper"
-    }, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
+    tooltip: optionTooltip,
+    value: optionValue
+  }, key) => {
+    const commonProps = {
+      'aria-label': optionAriaLabel,
+      className: optionClassName,
+      disableFocusRipple: _disableFocusRipple,
+      disableRipple: _disableRipple,
+      disabled: optionDisabled,
+      key,
+      value: optionValue
+    };
+    const children = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
       className: "dot-toggle-icon",
       iconId: optionIconId
     }), optionText && /*#__PURE__*/React__default.createElement(DotTypography, null, optionText));
-    return optionTooltip ? /*#__PURE__*/React__default.createElement(DotTooltip, {
-      className: "toggle-button-tooltip",
-      title: optionTooltip
-    }, children) : children;
+    return optionTooltip ? /*#__PURE__*/React__default.createElement(TooltipToggleButton, Object.assign({}, commonProps, {
+      CustomTooltipProps: {
+        title: optionTooltip
+      },
+      value: optionValue
+    }), children) : /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({}, commonProps), children);
   };
 
   return /*#__PURE__*/React__default.createElement(StyledToggleButtonGroup, {
@@ -3563,23 +3618,21 @@ const DotButtonToggle = ({
     size: _size,
     value: value
   }, buttonOptions.map((option, key) => {
-    const {
-      ariaLabel: optionAriaLabel,
-      className: optionClassName,
-      disabled: optionDisabled,
-      value: optionValue
-    } = option;
-    return /*#__PURE__*/React__default.createElement(ToggleButton, {
-      "aria-label": optionAriaLabel,
-      className: optionClassName,
-      disableFocusRipple: _disableFocusRipple,
-      disableRipple: _disableRipple,
-      disabled: optionDisabled,
-      key: key,
-      value: optionValue
-    }, renderToggleButtonChildren(option));
+    return renderToggleButton(option, key);
   }));
 };
+/** Catch props and forward to ToggleButton */
+
+const TooltipToggleButton = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    CustomTooltipProps
+  } = _a,
+      props = __rest(_a, ["CustomTooltipProps"]);
+
+  return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, CustomTooltipProps), /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({
+    ref: ref
+  }, props)));
+});
 
 const DotCard = ({
   ariaLabel,
@@ -4522,12 +4575,14 @@ const getInitialState = value => ({
 });
 
 const DotInputText = ({
+  autoComplete: _autoComplete = 'off',
   autoFocus,
   className,
   defaultValue,
   'data-testid': dataTestId,
   disabled: _disabled = false,
   error: _error = false,
+  endAdornmentTooltip,
   fullWidth: _fullWidth = true,
   hasDebounce,
   helperText,
@@ -4598,19 +4653,27 @@ const DotInputText = ({
   // in that case component is controlled
 
   const defaultInputValue = hasDebounce ? undefined : defaultValue;
+
+  const renderEndAdornment = () => {
+    const styledAdornment = /*#__PURE__*/React__default.createElement(StyledAdornment, {
+      className: `${adornmentIconClassName} end`,
+      position: "end"
+    }, endAdornmentIcon);
+    return endAdornmentTooltip ? /*#__PURE__*/React__default.createElement(DotTooltip, {
+      title: endAdornmentTooltip
+    }, styledAdornment) : styledAdornment;
+  };
+
   return /*#__PURE__*/React__default.createElement(StyledTextField, {
     InputProps: {
       startAdornment: startIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
         className: `${adornmentIconClassName} start`,
         position: "start"
       }, startIcon),
-      endAdornment: endAdornmentIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
-        className: `${adornmentIconClassName} end`,
-        position: "end"
-      }, endAdornmentIcon)
+      endAdornment: endAdornmentIcon && renderEndAdornment()
     },
     "aria-label": name,
-    autoComplete: "off",
+    autoComplete: _autoComplete,
     autoFocus: autoFocus,
     classes: {
       root: rootStyles
@@ -5577,31 +5640,6 @@ const DotDynamicForm = ({
   }, buildFormControls(config.controls));
 };
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 const rootClassName$n = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
@@ -5704,6 +5742,7 @@ const DotInlineEdit = ({
   onChange,
   onEditStateChange,
   readOnly,
+  tooltip,
   typography: _typography = 'body1',
   value: _value = ''
 }) => {
@@ -5787,10 +5826,7 @@ const DotInlineEdit = ({
 
   const renderViewMode = () => {
     const viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: viewModeClasses,
-      "data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`
-    }, /*#__PURE__*/React__default.createElement(DotTypography, {
+    const viewModeChildren = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotTypography, {
       className: "dot-view-mode-typography",
       "data-testid": dataTestId && `${dataTestId}-view-mode-typography`,
       variant: _typography
@@ -5799,6 +5835,14 @@ const DotInlineEdit = ({
       "data-testid": dataTestId && `${dataTestId}-edit-icon`,
       iconId: "edit"
     }));
+    return tooltip ? /*#__PURE__*/React__default.createElement(DotTooltip, {
+      title: tooltip,
+      className: viewModeClasses,
+      "data-testid": dataTestId && `${dataTestId}-view-mode-tooltip-wrapper`
+    }, viewModeChildren) : /*#__PURE__*/React__default.createElement("div", {
+      className: viewModeClasses,
+      "data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`
+    }, viewModeChildren);
   };
 
   const renderEditMode = () => {
@@ -7692,13 +7736,18 @@ const StyledDraggableList = styled.div.withConfig({
   displayName: "DraggableListstyles__StyledDraggableList",
   componentId: "sc-1nekees-0"
 })(["", ""], ({
-  theme
-}) => css(["&.", " .", ".react-draggable-dragging{background-color:", ";}"], rootClassName, listItemClassName, theme.palette.grey[50]));
+  theme,
+  width,
+  draggableHandle
+}) => css(["&.", " .", "{&.react-draggable-dragging{background-color:", ";}width:", " !important;&.with-default-cursor{cursor:default;}&.with-handle-grab-cursor{", "{cursor:grab;}}}"], rootClassName, listItemClassName, theme.palette.grey[50], width, draggableHandle));
 
 const getOrderedListItems = (layout, listItems) => {
   if (!listItems || !layout) return [];
-  listItems.sort((a, b) => layout.find(layoutItem => layoutItem.i === a.id).y - layout.find(layoutItem => layoutItem.i === b.id).y);
-  return listItems;
+  return [...listItems].sort((a, b) => layout.find(layoutItem => layoutItem.i === a.id).y - layout.find(layoutItem => layoutItem.i === b.id).y);
+};
+const checkIfEqual = (oldList, newList) => {
+  if (oldList.length !== newList.length) return false;
+  return oldList.every((oldListItem, index) => oldListItem.id === newList[index].id);
 };
 const getListItemLayout = listItems => {
   return listItems === null || listItems === void 0 ? void 0 : listItems.map((item, index) => ({
@@ -7710,27 +7759,43 @@ const getListItemLayout = listItems => {
   }));
 };
 
-const DEFAULT_LIST_WIDTH = 240;
+const DEFAULT_LIST_WIDTH = '100%';
 const DEFAULT_LIST_ITEM_HEIGHT = 36;
 const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
   'data-testid': dataTestId,
+  disableDrag,
+  draggableHandle,
   items,
   onChange,
-  width: _width = DEFAULT_LIST_WIDTH,
-  rowHeight: _rowHeight = DEFAULT_LIST_ITEM_HEIGHT
+  rowHeight: _rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
+  width: _width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName, className);
-  const listWidth = typeof _width === 'number' ? `${_width}px` : _width;
+  const rootClasses = useStylesWithRootClass(rootClassName, className, draggableHandle ? 'with-draggable-handle' : '');
+  const listItemClasses = useStylesWithRootClass(listItemClassName, draggableHandle && !disableDrag ? 'with-handle-grab-cursor' : '', draggableHandle || disableDrag ? 'with-default-cursor' : '');
+  const listWidth = isNumber(_width) ? `${_width}px` : _width;
+  const [orderedItems, setOrderedItems] = useState([]);
+  useEffect(() => {
+    setOrderedItems(items);
+  }, [items]);
+
+  const handleLayoutChange = () => layout => {
+    const newList = getOrderedListItems(layout, orderedItems);
 
-  const handleLayoutChange = () => layout => onChange(getOrderedListItems(layout, items));
+    if (!checkIfEqual(orderedItems, newList)) {
+      setOrderedItems(newList);
+      onChange(newList);
+    }
+  };
 
   return /*#__PURE__*/React__default.createElement(StyledDraggableList, {
     "aria-label": ariaLabel,
     className: rootClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    draggableHandle: draggableHandle,
+    width: listWidth
   }, /*#__PURE__*/React__default.createElement(List, {
     "data-testid": dataTestId && `${dataTestId}-ul`,
     style: {
@@ -7738,23 +7803,26 @@ const DotDraggableList = ({
     }
   }, /*#__PURE__*/React__default.createElement(ListGridLayout, {
     className: "layout",
-    layout: getListItemLayout(items),
+    draggableHandle: draggableHandle,
+    isDraggable: !disableDrag,
+    layout: getListItemLayout(orderedItems),
     cols: 1,
     margin: [0, 0],
     onLayoutChange: onChange && handleLayoutChange(),
     rowHeight: _rowHeight
-  }, items.map(({
+  }, orderedItems.map(({
     id: itemId,
     children
   }) => {
     return /*#__PURE__*/React__default.createElement(ListItem, {
+      "data-testid": dataTestId && `${dataTestId}-item`,
       key: itemId,
       button: true,
       children: renderNodeOrTypography(children),
-      className: listItemClassName,
+      className: listItemClasses,
       disableRipple: true
     });
   }))));
 };
 
-export { Cell, CssCell, CssGrid, CssGridDebug, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotConfirmationDialog, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotSnackbarContext };
+export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotConfirmationDialog, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotSnackbarContext };

package/index.umd.js

@@ -55,6 +55,18 @@
         return __assign.apply(this, arguments);
     };
 
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
     function __awaiter(thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
@@ -2288,6 +2300,7 @@
       }, showStartIcon && renderListItemStartIcon(), renderListItemText()), showEndIcon && renderListItemEndIcon())), hasChildren && /*#__PURE__*/React__default["default"].createElement(NestedList, {
         anchorEl: anchorEl,
         ariaLabel: "nested list",
+        "data-testid": "nestedList",
         items: items,
         menuPlacement: menuPlacement,
         nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
@@ -2299,6 +2312,7 @@
     var NestedList = function NestedList(_a) {
       var ariaLabel = _a.ariaLabel,
           anchorEl = _a.anchorEl,
+          dataTestId = _a["data-testid"],
           items = _a.items,
           menuPlacement = _a.menuPlacement,
           nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
@@ -2324,6 +2338,7 @@
           ariaLabel: ariaLabel,
           className: nestedListClassName,
           component: "div",
+          "data-testid": dataTestId,
           disablePadding: true,
           items: items,
           key: parentItemIndex
@@ -2346,6 +2361,7 @@
             }, /*#__PURE__*/React__default["default"].createElement(StyledListItem, {
               className: flyoutItemClasses,
               component: href && !onClick ? 'a' : null,
+              "data-testid": dataTestId + "-item-" + index,
               href: href,
               key: parentItemIndex + "-" + index,
               onClick: onClick,
@@ -2363,6 +2379,7 @@
           anchorEl: anchorEl,
           ariaLabel: ariaLabel,
           className: flyoutMenuClassName,
+          "data-testid": dataTestId,
           id: CreateUUID(),
           key: parentItemIndex,
           menuItemHeight: "auto",
@@ -2389,6 +2406,7 @@
           ariaLabel: ariaLabel,
           className: nestedListClassName,
           component: "div",
+          "data-testid": dataTestId,
           disablePadding: true,
           items: items,
           key: parentItemIndex,
@@ -2917,7 +2935,7 @@
     })(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
           InputProps = _a.InputProps;
-      return styled.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "])), rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen);
+      return styled.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "])), rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen);
     });
     var templateObject_1$J, templateObject_2$H, templateObject_3$7;
 
@@ -3410,10 +3428,10 @@
                 className: useStylesWithRootClass(inputProps.className, 'dot-input')
               }),
               InputProps: __assign(__assign({}, params.InputProps), {
-                endAdornment: loading ? /*#__PURE__*/React__default["default"].createElement(DotProgress, {
+                endAdornment: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading && /*#__PURE__*/React__default["default"].createElement(DotProgress, {
                   color: "inherit",
                   size: 20
-                }) : params.InputProps.endAdornment
+                }), params.InputProps.endAdornment)
               }),
               inputRef: textFieldRef,
               label: label,
@@ -3840,7 +3858,7 @@
       componentId: "sc-1oh4ljv-0"
     })(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n      .MuiToggleButton-root {\n        padding: 0;\n      }\n\n      .toggle-button-children-wrapper {\n        display: flex;\n        // This will replace default padding from MuiToggleButton-root\n        // so that tooltip works when hovering whole button area\n        // (instead of just text within the button)\n        padding: ", "px;\n      }\n\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiToggleButton-root {\n        padding: 0;\n      }\n\n      .toggle-button-children-wrapper {\n        display: flex;\n        // This will replace default padding from MuiToggleButton-root\n        // so that tooltip works when hovering whole button area\n        // (instead of just text within the button)\n        padding: ", "px;\n      }\n\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$C, theme.spacing(1.375), theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]);
+      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$C, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]);
     });
     var templateObject_1$F, templateObject_2$D;
 
@@ -3864,21 +3882,33 @@
           value = _a.value;
       var rootClasses = useStylesWithRootClass(rootClassName$C, className);
 
-      var renderToggleButtonChildren = function renderToggleButtonChildren(_a) {
-        var optionIconId = _a.iconId,
+      var renderToggleButton = function renderToggleButton(_a, key) {
+        var optionAriaLabel = _a.ariaLabel,
+            optionClassName = _a.className,
+            optionDisabled = _a.disabled,
+            optionIconId = _a.iconId,
             optionText = _a.text,
-            optionTooltip = _a.tooltip;
-        var children = /*#__PURE__*/React__default["default"].createElement("div", {
-          "data-testid": dataTestId && dataTestId + "-children-wrapper",
-          className: "toggle-button-children-wrapper"
-        }, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+            optionTooltip = _a.tooltip,
+            optionValue = _a.value;
+        var commonProps = {
+          'aria-label': optionAriaLabel,
+          className: optionClassName,
+          disableFocusRipple: disableFocusRipple,
+          disableRipple: disableRipple,
+          disabled: optionDisabled,
+          key: key,
+          value: optionValue
+        };
+        var children = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
           className: "dot-toggle-icon",
           iconId: optionIconId
         }), optionText && /*#__PURE__*/React__default["default"].createElement(DotTypography, null, optionText));
-        return optionTooltip ? /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
-          className: "toggle-button-tooltip",
-          title: optionTooltip
-        }, children) : children;
+        return optionTooltip ? /*#__PURE__*/React__default["default"].createElement(TooltipToggleButton, __assign({}, commonProps, {
+          CustomTooltipProps: {
+            title: optionTooltip
+          },
+          value: optionValue
+        }), children) : /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, __assign({}, commonProps), children);
       };
 
       return /*#__PURE__*/React__default["default"].createElement(StyledToggleButtonGroup, {
@@ -3893,21 +3923,19 @@
         size: size,
         value: value
       }, buttonOptions.map(function (option, key) {
-        var optionAriaLabel = option.ariaLabel,
-            optionClassName = option.className,
-            optionDisabled = option.disabled,
-            optionValue = option.value;
-        return /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, {
-          "aria-label": optionAriaLabel,
-          className: optionClassName,
-          disableFocusRipple: disableFocusRipple,
-          disableRipple: disableRipple,
-          disabled: optionDisabled,
-          key: key,
-          value: optionValue
-        }, renderToggleButtonChildren(option));
+        return renderToggleButton(option, key);
       }));
     };
+    /** Catch props and forward to ToggleButton */
+
+    var TooltipToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+      var CustomTooltipProps = _a.CustomTooltipProps,
+          props = __rest(_a, ["CustomTooltipProps"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(core.Tooltip, __assign({}, CustomTooltipProps), /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, __assign({
+        ref: ref
+      }, props)));
+    });
 
     var DotCard = function DotCard(_a) {
       var ariaLabel = _a.ariaLabel,
@@ -4902,24 +4930,27 @@
     };
 
     var DotInputText = function DotInputText(_a) {
-      var autoFocus = _a.autoFocus,
+      var _b = _a.autoComplete,
+          autoComplete = _b === void 0 ? 'off' : _b,
+          autoFocus = _a.autoFocus,
           className = _a.className,
           defaultValue = _a.defaultValue,
           dataTestId = _a["data-testid"],
-          _b = _a.disabled,
-          disabled = _b === void 0 ? false : _b,
-          _c = _a.error,
-          error = _c === void 0 ? false : _c,
-          _d = _a.fullWidth,
-          fullWidth = _d === void 0 ? true : _d,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c,
+          _d = _a.error,
+          error = _d === void 0 ? false : _d,
+          endAdornmentTooltip = _a.endAdornmentTooltip,
+          _e = _a.fullWidth,
+          fullWidth = _e === void 0 ? true : _e,
           hasDebounce = _a.hasDebounce,
           helperText = _a.helperText,
           endIcon = _a.endIcon,
           id = _a.id,
           inputRef = _a.inputRef,
           label = _a.label,
-          _e = _a.multiline,
-          multiline = _e === void 0 ? false : _e,
+          _f = _a.multiline,
+          multiline = _f === void 0 ? false : _f,
           name = _a.name,
           onBlur = _a.onBlur,
           onChange = _a.onChange,
@@ -4927,25 +4958,25 @@
           onKeyDown = _a.onKeyDown,
           onMouseUp = _a.onMouseUp,
           placeholder = _a.placeholder,
-          _f = _a.readOnly,
-          readOnly = _f === void 0 ? false : _f,
-          _g = _a.required,
-          required = _g === void 0 ? false : _g,
+          _g = _a.readOnly,
+          readOnly = _g === void 0 ? false : _g,
+          _h = _a.required,
+          required = _h === void 0 ? false : _h,
           rows = _a.rows,
           rowsMax = _a.rowsMax,
           startIcon = _a.startIcon,
-          _h = _a.size,
-          size = _h === void 0 ? 'small' : _h,
-          _j = _a.type,
-          type = _j === void 0 ? 'text' : _j,
+          _j = _a.size,
+          size = _j === void 0 ? 'small' : _j,
+          _k = _a.type,
+          type = _k === void 0 ? 'text' : _k,
           value = _a.value,
-          _k = _a.warning,
-          warning = _k === void 0 ? false : _k;
+          _l = _a.warning,
+          warning = _l === void 0 ? false : _l;
       var hasWarning = !error && warning ? warningClassName : ''; // This state is used only with debounce feature enabled
 
-      var _l = React.useState(hasDebounce && getInitialState(value)),
-          inputTextState = _l[0],
-          setInputTextState = _l[1];
+      var _m = React.useState(hasDebounce && getInitialState(value)),
+          inputTextState = _m[0],
+          setInputTextState = _m[1];
 
       var renderIcon = function renderIcon(iconType) {
         return /*#__PURE__*/React__default["default"].createElement(DotIcon, {
@@ -4990,19 +5021,27 @@
       // in that case component is controlled
 
       var defaultInputValue = hasDebounce ? undefined : defaultValue;
+
+      var renderEndAdornment = function renderEndAdornment() {
+        var styledAdornment = /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
+          className: adornmentIconClassName + " end",
+          position: "end"
+        }, endAdornmentIcon);
+        return endAdornmentTooltip ? /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
+          title: endAdornmentTooltip
+        }, styledAdornment) : styledAdornment;
+      };
+
       return /*#__PURE__*/React__default["default"].createElement(StyledTextField, {
         InputProps: {
           startAdornment: startIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
             className: adornmentIconClassName + " start",
             position: "start"
           }, startIcon),
-          endAdornment: endAdornmentIcon && /*#__PURE__*/React__default["default"].createElement(StyledAdornment, {
-            className: adornmentIconClassName + " end",
-            position: "end"
-          }, endAdornmentIcon)
+          endAdornment: endAdornmentIcon && renderEndAdornment()
         },
         "aria-label": name,
-        autoComplete: "off",
+        autoComplete: autoComplete,
         autoFocus: autoFocus,
         classes: {
           root: rootStyles
@@ -6099,6 +6138,7 @@
           onChange = _a.onChange,
           onEditStateChange = _a.onEditStateChange,
           readOnly = _a.readOnly,
+          tooltip = _a.tooltip,
           _c = _a.typography,
           typography = _c === void 0 ? 'body1' : _c,
           _d = _a.value,
@@ -6280,10 +6320,7 @@
 
       var renderViewMode = function renderViewMode() {
         var viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: viewModeClasses,
-          "data-testid": dataTestId && dataTestId + "-view-mode-wrapper"
-        }, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        var viewModeChildren = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
           className: "dot-view-mode-typography",
           "data-testid": dataTestId && dataTestId + "-view-mode-typography",
           variant: typography
@@ -6292,6 +6329,14 @@
           "data-testid": dataTestId && dataTestId + "-edit-icon",
           iconId: "edit"
         }));
+        return tooltip ? /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
+          title: tooltip,
+          className: viewModeClasses,
+          "data-testid": dataTestId && dataTestId + "-view-mode-tooltip-wrapper"
+        }, viewModeChildren) : /*#__PURE__*/React__default["default"].createElement("div", {
+          className: viewModeClasses,
+          "data-testid": dataTestId && dataTestId + "-view-mode-wrapper"
+        }, viewModeChildren);
       };
 
       var renderEditMode = function renderEditMode() {
@@ -8398,21 +8443,28 @@
       displayName: "DraggableListstyles__StyledDraggableList",
       componentId: "sc-1nekees-0"
     })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.", " .", ".react-draggable-dragging {\n      background-color: ", ";\n    }\n  "], ["\n    &.", " .", ".react-draggable-dragging {\n      background-color: ", ";\n    }\n  "])), rootClassName, listItemClassName, theme.palette.grey[50]);
+      var theme = _a.theme,
+          width = _a.width,
+          draggableHandle = _a.draggableHandle;
+      return styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.", " .", " {\n      &.react-draggable-dragging {\n        background-color: ", ";\n      }\n      width: ", " !important;\n\n      &.with-default-cursor {\n        cursor: default;\n      }\n\n      &.with-handle-grab-cursor {\n        ", " {\n          cursor: grab;\n        }\n      }\n    }\n  "], ["\n    &.", " .", " {\n      &.react-draggable-dragging {\n        background-color: ", ";\n      }\n      width: ", " !important;\n\n      &.with-default-cursor {\n        cursor: default;\n      }\n\n      &.with-handle-grab-cursor {\n        ", " {\n          cursor: grab;\n        }\n      }\n    }\n  "])), rootClassName, listItemClassName, theme.palette.grey[50], width, draggableHandle);
     });
     var templateObject_1, templateObject_2;
 
     var getOrderedListItems = function getOrderedListItems(layout, listItems) {
       if (!listItems || !layout) return [];
-      listItems.sort(function (a, b) {
+      return __spreadArray([], listItems).sort(function (a, b) {
         return layout.find(function (layoutItem) {
           return layoutItem.i === a.id;
         }).y - layout.find(function (layoutItem) {
           return layoutItem.i === b.id;
         }).y;
       });
-      return listItems;
+    };
+    var checkIfEqual = function checkIfEqual(oldList, newList) {
+      if (oldList.length !== newList.length) return false;
+      return oldList.every(function (oldListItem, index) {
+        return oldListItem.id === newList[index].id;
+      });
     };
     var getListItemLayout = function getListItemLayout(listItems) {
       return listItems === null || listItems === void 0 ? void 0 : listItems.map(function (item, index) {
@@ -8426,32 +8478,50 @@
       });
     };
 
-    var DEFAULT_LIST_WIDTH = 240;
+    var DEFAULT_LIST_WIDTH = '100%';
     var DEFAULT_LIST_ITEM_HEIGHT = 36;
     var ListGridLayout = GridLayout.WidthProvider(GridLayout__default["default"]);
     var DotDraggableList = function DotDraggableList(_a) {
       var ariaLabel = _a.ariaLabel,
           className = _a.className,
           dataTestId = _a["data-testid"],
+          disableDrag = _a.disableDrag,
+          draggableHandle = _a.draggableHandle,
           items = _a.items,
           onChange = _a.onChange,
-          _b = _a.width,
-          width = _b === void 0 ? DEFAULT_LIST_WIDTH : _b,
-          _c = _a.rowHeight,
-          rowHeight = _c === void 0 ? DEFAULT_LIST_ITEM_HEIGHT : _c;
-      var rootClasses = useStylesWithRootClass(rootClassName, className);
-      var listWidth = typeof width === 'number' ? width + "px" : width;
+          _b = _a.rowHeight,
+          rowHeight = _b === void 0 ? DEFAULT_LIST_ITEM_HEIGHT : _b,
+          _c = _a.width,
+          width = _c === void 0 ? DEFAULT_LIST_WIDTH : _c;
+      var rootClasses = useStylesWithRootClass(rootClassName, className, draggableHandle ? 'with-draggable-handle' : '');
+      var listItemClasses = useStylesWithRootClass(listItemClassName, draggableHandle && !disableDrag ? 'with-handle-grab-cursor' : '', draggableHandle || disableDrag ? 'with-default-cursor' : '');
+      var listWidth = isNumber(width) ? width + "px" : width;
+
+      var _d = React.useState([]),
+          orderedItems = _d[0],
+          setOrderedItems = _d[1];
+
+      React.useEffect(function () {
+        setOrderedItems(items);
+      }, [items]);
 
       var handleLayoutChange = function handleLayoutChange() {
         return function (layout) {
-          return onChange(getOrderedListItems(layout, items));
+          var newList = getOrderedListItems(layout, orderedItems);
+
+          if (!checkIfEqual(orderedItems, newList)) {
+            setOrderedItems(newList);
+            onChange(newList);
+          }
         };
       };
 
       return /*#__PURE__*/React__default["default"].createElement(StyledDraggableList, {
         "aria-label": ariaLabel,
         className: rootClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        draggableHandle: draggableHandle,
+        width: listWidth
       }, /*#__PURE__*/React__default["default"].createElement(core.List, {
         "data-testid": dataTestId && dataTestId + "-ul",
         style: {
@@ -8459,25 +8529,29 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement(ListGridLayout, {
         className: "layout",
-        layout: getListItemLayout(items),
+        draggableHandle: draggableHandle,
+        isDraggable: !disableDrag,
+        layout: getListItemLayout(orderedItems),
         cols: 1,
         margin: [0, 0],
         onLayoutChange: onChange && handleLayoutChange(),
         rowHeight: rowHeight
-      }, items.map(function (_a) {
+      }, orderedItems.map(function (_a) {
         var itemId = _a.id,
             children = _a.children;
         return /*#__PURE__*/React__default["default"].createElement(core.ListItem, {
+          "data-testid": dataTestId && dataTestId + "-item",
           key: itemId,
           button: true,
           children: renderNodeOrTypography(children),
-          className: listItemClassName,
+          className: listItemClasses,
           disableRipple: true
         });
       }))));
     };
 
     exports.Cell = Cell;
+    exports.CreateUUID = CreateUUID;
     exports.CssCell = CssCell;
     exports.CssGrid = CssGrid;
     exports.CssGridDebug = CssGridDebug;

package/lib/components/auto-complete/AutoComplete.d.ts

@@ -13,7 +13,7 @@ export interface ActionItem {
     text?: string | ReactNode;
 }
 export declare type autoCompleteSize = 'medium' | 'small';
-export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[];
+export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[] | null;
 export interface AutoCompleteOption {
     error?: boolean;
     group?: string;

package/lib/components/auto-complete/AutoComplete.stories.styles.d.ts

@@ -1,4 +1,6 @@
 export declare const selectedAutocompleteClassName = "dot-selected-autocomplete-items";
 export declare const autocompleteWithoutChipsClassName = "dot-autocomplete-without-chips";
+export declare const autocompleteWithNullValueClassName = "dot-autocomplete-with-null-value";
 export declare const StyledSelectedAutocompleteItems: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAutocompleteWithoutChips: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAutocompleteWithNullValue: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/auto-complete/Autocomplete.stories.data.d.ts

@@ -37,3 +37,7 @@ export interface AutocompleteWithoutChipsProps extends CommonProps {
     storyArgs: AutoCompleteProps;
 }
 export declare const AutocompleteWithoutChips: ({ className, onChange, onItemRemove, selectedOptions, storyArgs, }: AutocompleteWithoutChipsProps) => JSX.Element;
+export interface AutocompleteWithNullValueProps {
+    storyArgs: AutoCompleteProps;
+}
+export declare const AutocompleteWithNullValue: ({ storyArgs, }: AutocompleteWithNullValueProps) => JSX.Element;

package/lib/components/button-toggle/ButtonToggle.stories.data.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ButtonToggleProps } from './';
+export declare const CommonButtonToggleStory: (args: ButtonToggleProps) => JSX.Element;

package/lib/components/draggable-list/DraggableList.d.ts

@@ -1,16 +1,24 @@
 /// <reference types="react" />
 import { CommonProps } from '../CommonProps';
 import { DraggableItem, DraggableListChangeHandler } from './utils/models';
-export declare const DEFAULT_LIST_WIDTH = 240;
+export declare const DEFAULT_LIST_WIDTH = "100%";
 export declare const DEFAULT_LIST_ITEM_HEIGHT = 36;
 export interface DraggableListProps extends CommonProps {
+    /** If true, component will prevent items to be dragged. */
+    disableDrag?: boolean;
+    /**
+     * A CSS selector for tags that will act as the draggable handle.
+     * For example: `draggableHandle: '.MyDragHandleClassName'`
+     * If you forget the leading . it will not work.
+     */
+    draggableHandle?: string;
     /** Array of draggable list items displayed */
     items: DraggableItem[];
     /** Callback function which gets executed when the list changes */
     onChange?: DraggableListChangeHandler;
     /** Height of the list item in pixels, defaults to 36px */
     rowHeight?: number;
-    /** Width of the draggable list, defaults to 240px */
+    /** Width of the draggable list, defaults to '100%' */
     width?: number | string;
 }
-export declare const DotDraggableList: ({ ariaLabel, className, "data-testid": dataTestId, items, onChange, width, rowHeight, }: DraggableListProps) => JSX.Element;
+export declare const DotDraggableList: ({ ariaLabel, className, "data-testid": dataTestId, disableDrag, draggableHandle, items, onChange, rowHeight, width, }: DraggableListProps) => JSX.Element;

package/lib/components/draggable-list/DraggableList.stories.data.d.ts

@@ -5,11 +5,15 @@ export interface DraggableListWithAvatarArgs {
     secondaryText: string;
 }
 export interface DraggableListWithIconsArgs {
-    id: string;
     text: string;
 }
+export interface DraggableListWithHandleArgs extends DraggableListWithIconsArgs {
+    id: string;
+}
 export declare const DraggableListWithAvatar: ({ primaryText, secondaryText, }: DraggableListWithAvatarArgs) => JSX.Element;
-export declare const DraggableListWithIcons: ({ id, text, }: DraggableListWithIconsArgs) => JSX.Element;
+export declare const DraggableListWithIcons: ({ text, }: DraggableListWithIconsArgs) => JSX.Element;
+export declare const DraggableListWithHandle: ({ id, text, }: DraggableListWithHandleArgs) => JSX.Element;
 export declare const draggableListItems: DraggableItem[];
 export declare const draggableListWithAvatar: DraggableItem[];
 export declare const draggableListWithIcons: DraggableItem[];
+export declare const draggableListWithHandle: DraggableItem[];

package/lib/components/draggable-list/DraggableList.stories.styles.d.ts

@@ -1,4 +1,6 @@
+export declare const withDefaultContainerClassName = "dot-draggable-list-with-icons";
 export declare const withIconsClassName = "dot-draggable-list-with-icons";
 export declare const withAvatarClassName = "dot-draggable-list-with-avatar";
+export declare const StyledDefaultStoryContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledDraggableListWithAvatar: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledDraggableListWithIcons: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/draggable-list/DraggableList.styles.d.ts

@@ -1,3 +1,8 @@
 export declare const rootClassName = "dot-draggable-list";
 export declare const listItemClassName = "dot-draggable-list-item";
-export declare const StyledDraggableList: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledDraggableListProps {
+    draggableHandle?: string;
+    width: string;
+}
+export declare const StyledDraggableList: import("styled-components").StyledComponent<"div", any, StyledDraggableListProps, never>;
+export {};

package/lib/components/draggable-list/utils/helpers.d.ts

@@ -1,4 +1,5 @@
 import { Layout } from 'react-grid-layout';
 import { DraggableItem } from './models';
 export declare const getOrderedListItems: (layout: Layout[], listItems: DraggableItem[]) => DraggableItem[];
+export declare const checkIfEqual: (oldList: DraggableItem[], newList: DraggableItem[]) => boolean;
 export declare const getListItemLayout: (listItems: DraggableItem[]) => Layout[];

package/lib/components/helpers.d.ts

@@ -7,3 +7,4 @@ export declare const getAvatarColorForInputText: (value: string) => AvatarColor;
 export declare const isString: (str: unknown) => boolean;
 export declare const isNumber: (num: unknown) => boolean;
 export declare const renderNodeOrTypography: (content: string | ReactNode, typographyVariant?: TypographyVariant) => ReactNode;
+export declare const searchString: (needle: string, haystack: string) => boolean;

package/lib/components/index.d.ts

@@ -19,7 +19,7 @@ export type { RadioButtonProps } from './radio/RadioButton';
 export type { RadioGroupProps } from './radio/RadioGroup';
 export type { BackItemProps, SidebarProps } from './sidebar/Sidebar';
 export type { SwitchProps, SwitchColor, SwitchSize, SwitchLabelPlacement, } from './switch';
-export type { DotColumnHeader, MultiSelect, Order, RowSelectionChangeHandler, RowsPerPageOption, TableDataWithPagination, TableRowProps, TableRowSelectChangeHandler, TextAlignment, SortDirection, } from './table';
+export type { DotColumnHeader, MultiSelect, Order, RowSelectionChangeHandler, RowsPerPageOption, TableActionProps, TableActionsProps, TableDataWithPagination, TableRowProps, TableRowSelectChangeHandler, TextAlignment, SortDirection, } from './table';
 export type { TabProps } from './tabs/Tabs';
 export type { TypographyVariant } from './typography/Typography';
 export type { ProgressButtonProps } from './progress-button/ProgressButton';
@@ -88,3 +88,4 @@ export { DotDivider } from './divider';
 export { DotPopper } from './popper';
 export { DotTruncateWithTooltip } from './truncate-with-tooltip';
 export { DotDraggableList } from './draggable-list';
+export { CreateUUID } from './createUUID';

package/lib/components/inline-edit/InlineEdit.d.ts

@@ -19,6 +19,8 @@ export interface InlineEditProps extends CommonProps {
     onEditStateChange?: (editing: boolean) => void;
     /** If true, component will behave like a regular text (editing functionality will be disabled). */
     readOnly?: boolean;
+    /** Tooltip text displayed on hover */
+    tooltip?: string;
     /** Typography variant to be used */
     typography?: TypographyVariant;
     /** default value that is displayed on load */
@@ -27,4 +29,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, tooltip, typography, value, }: InlineEditProps) => JSX.Element;

package/lib/components/input-form-fields/InputText.d.ts

@@ -2,6 +2,12 @@
 import { InputProps } from './InputFormFields.propTypes';
 export declare const DELAY_MS = 300;
 export interface InputTextProps extends InputProps {
+    /** The HTML autocomplete property to pass along to the input tag. Used for
+    controlling autofill behavior in forms. This property follows this HTML spec:
+    https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
+    **/
+    autoComplete?: string;
+    endAdornmentTooltip?: string;
     /** If true, the input will use debounce functionality. **/
     hasDebounce?: boolean;
     /** if multiline it wil render multiple lines */
@@ -17,4 +23,4 @@ export interface InputTextProps extends InputProps {
     /** value of the InputText */
     value?: string;
 }
-export declare const DotInputText: ({ autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
+export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;

package/lib/components/list/List.d.ts

@@ -2,4 +2,4 @@
 import { ListItemProps, ListProps, NestedListProps } from './utils/models';
 export declare const DotList: ({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element;
 export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIcon, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, startIconId, target, text, title, tooltip, }: ListItemProps) => JSX.Element;
-export declare const NestedList: ({ ariaLabel, anchorEl, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;
+export declare const NestedList: ({ ariaLabel, anchorEl, "data-testid": dataTestId, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;

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

@@ -1,4 +1,6 @@
 export type { TableRowProps } from './Table';
+export type { TableActionProps } from './TableAction';
+export type { TableActionsProps } from './TableActions';
 export type { TextAlignment } from './TableCell';
 export type { TableDataWithPagination } from './TableDataWithPagination';
 export type { DotColumnHeader, Order } from './TableHeader';

package/package.json

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