@digital-ai/dot-components 1.17.1 → 1.17.2

package/CHANGE_LOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [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)
@@ -139,6 +155,7 @@
 - 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))
 
 **Fixed bugs:**
 
@@ -270,7 +287,6 @@
 - Add class prop into `ButtonToggleProps` [\#990](https://github.com/digital-ai/dot-components/issues/990)
 - Expose `Divider` [\#989](https://github.com/digital-ai/dot-components/issues/989)
 - Expose `Popper` [\#975](https://github.com/digital-ai/dot-components/issues/975)
-- S-82059: `DraggableList`: Create and export the component [\#1003](https://github.com/digital-ai/dot-components/pull/1003) ([dmiletic85](https://github.com/dmiletic85))
 - 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))
@@ -782,7 +798,6 @@
 - S-79291: update nested dependencies [\#700](https://github.com/digital-ai/dot-components/pull/700) ([CWSites](https://github.com/CWSites))
 - S-78832: Agility icon & badge updates [\#698](https://github.com/digital-ai/dot-components/pull/698) ([CWSites](https://github.com/CWSites))
 - S-79251: add workflow for sonarqube scan when code merged to develop [\#697](https://github.com/digital-ai/dot-components/pull/697) ([CWSites](https://github.com/CWSites))
-- pass value to tab [\#694](https://github.com/digital-ai/dot-components/pull/694) ([kmmarsh](https://github.com/kmmarsh))
 - S-76906: table action column [\#692](https://github.com/digital-ai/dot-components/pull/692) ([monapatel91](https://github.com/monapatel91))
 
 ## [1.1.0](https://github.com/digital-ai/dot-components/tree/1.1.0) (09/29/2021)
@@ -796,6 +811,7 @@
 **Merged pull requests:**
 
 - MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
+- pass value to tab [\#694](https://github.com/digital-ai/dot-components/pull/694) ([kmmarsh](https://github.com/kmmarsh))
 - S-78831: update AppToolbar component for Agility [\#691](https://github.com/digital-ai/dot-components/pull/691) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.12](https://github.com/digital-ai/dot-components/tree/1.0.12) (09/23/2021)
@@ -875,7 +891,6 @@
 - 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://github.com/digital-ai/dot-components/tree/1.0.8) (08/23/2021)
@@ -888,6 +903,7 @@
 
 **Merged pull requests:**
 
+- 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

@@ -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({
@@ -4569,6 +4575,7 @@ const getInitialState = value => ({
 });
 
 const DotInputText = ({
+  autoComplete: _autoComplete = 'off',
   autoFocus,
   className,
   defaultValue,
@@ -4657,7 +4664,7 @@ const DotInputText = ({
       }, endAdornmentIcon)
     },
     "aria-label": name,
-    autoComplete: "off",
+    autoComplete: _autoComplete,
     autoFocus: autoFocus,
     classes: {
       root: rootStyles
@@ -5726,6 +5733,7 @@ const DotInlineEdit = ({
   onChange,
   onEditStateChange,
   readOnly,
+  tooltip,
   typography: _typography = 'body1',
   value: _value = ''
 }) => {
@@ -5809,10 +5817,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
@@ -5821,6 +5826,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 = () => {

package/index.umd.js

@@ -2300,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,
@@ -2311,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,
@@ -2336,6 +2338,7 @@
           ariaLabel: ariaLabel,
           className: nestedListClassName,
           component: "div",
+          "data-testid": dataTestId,
           disablePadding: true,
           items: items,
           key: parentItemIndex
@@ -2358,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,
@@ -2375,6 +2379,7 @@
           anchorEl: anchorEl,
           ariaLabel: ariaLabel,
           className: flyoutMenuClassName,
+          "data-testid": dataTestId,
           id: CreateUUID(),
           key: parentItemIndex,
           menuItemHeight: "auto",
@@ -2401,6 +2406,7 @@
           ariaLabel: ariaLabel,
           className: nestedListClassName,
           component: "div",
+          "data-testid": dataTestId,
           disablePadding: true,
           items: items,
           key: parentItemIndex,
@@ -2929,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;
 
@@ -4924,24 +4930,26 @@
     };
 
     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,
+          _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,
@@ -4949,25 +4957,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, {
@@ -5024,7 +5032,7 @@
           }, endAdornmentIcon)
         },
         "aria-label": name,
-        autoComplete: "off",
+        autoComplete: autoComplete,
         autoFocus: autoFocus,
         classes: {
           root: rootStyles
@@ -6121,6 +6129,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,
@@ -6302,10 +6311,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
@@ -6314,6 +6320,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() {

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,11 @@
 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;
     /** If true, the input will use debounce functionality. **/
     hasDebounce?: boolean;
     /** if multiline it wil render multiple lines */
@@ -17,4 +22,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, 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/package.json

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