@digital-ai/dot-components 1.21.1 → 1.21.3

package/CHANGE_LOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## [1.21.3](https://github.com/digital-ai/dot-components/tree/1.21.3) (09/28/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/2.0.0-rc.2...1.21.3)
+
+**Features:**
+
+- Helper text for InputSelect and AutoComplete components should be aligned with their content [\#1264](https://github.com/digital-ai/dot-components/issues/1264)
+- Toggle button should have the same height as the input field [\#1260](https://github.com/digital-ai/dot-components/issues/1260)
+- Align helper text with the content of the input [\#1259](https://github.com/digital-ai/dot-components/issues/1259)
+- S-87726 Align input content with helper text [\#1265](https://github.com/digital-ai/dot-components/pull/1265) ([nikolinadapic](https://github.com/nikolinadapic))
+- S-87620 Adjust height for inputs and for medium sized buttons [\#1263](https://github.com/digital-ai/dot-components/pull/1263) ([nikolinadapic](https://github.com/nikolinadapic))
+- S-87616 Adjust left margin for helper text [\#1262](https://github.com/digital-ai/dot-components/pull/1262) ([nikolinadapic](https://github.com/nikolinadapic))
+- S-87599: `DotAutocomplete`  Add optional `persistentLabel` prop [\#1258](https://github.com/digital-ai/dot-components/pull/1258) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- DotSideBar sub-menu doesnt close unless clicked on the menu again [\#1158](https://github.com/digital-ai/dot-components/issues/1158)
+- S-85900: Optional behavior for app toolbar click away to close main menu [\#1256](https://github.com/digital-ai/dot-components/pull/1256) ([ray-jonathan](https://github.com/ray-jonathan))
+
+## [2.0.0-rc.2](https://github.com/digital-ai/dot-components/tree/2.0.0-rc.2) (09/15/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.21.2...2.0.0-rc.2)
+
+## [1.21.2](https://github.com/digital-ai/dot-components/tree/1.21.2) (09/09/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/2.0.0-rc.1...1.21.2)
+
+**Features:**
+
+- Add focus state for Inline Edit component [\#1253](https://github.com/digital-ai/dot-components/issues/1253)
+- Support React 18 [\#1173](https://github.com/digital-ai/dot-components/issues/1173)
+- S-87316 Add focus state for Inline Edit [\#1255](https://github.com/digital-ai/dot-components/pull/1255) ([nikolinadapic](https://github.com/nikolinadapic))
+
+**Fixed bugs:**
+
+- Use of `release-2.0` branch causes `Typography` to use default styling [\#1151](https://github.com/digital-ai/dot-components/issues/1151)
+- D-22241: `DotFileListItem`: fix focus states and expose `onKeyPress` [\#1254](https://github.com/digital-ai/dot-components/pull/1254) ([dmiletic85](https://github.com/dmiletic85))
+
+## [2.0.0-rc.1](https://github.com/digital-ai/dot-components/tree/2.0.0-rc.1) (08/31/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.21.1...2.0.0-rc.1)
+
+**Fixed bugs:**
+
+- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
+- S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
+
+**Merged pull requests:**
+
+- Release Candidate Workflow [\#1251](https://github.com/digital-ai/dot-components/pull/1251) ([CWSites](https://github.com/CWSites))
+- S-85001: add support for react 18 [\#1244](https://github.com/digital-ai/dot-components/pull/1244) ([CWSites](https://github.com/CWSites))
+- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
+
 ## [1.21.1](https://github.com/digital-ai/dot-components/tree/1.21.1) (08/31/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.21.0...1.21.1)

package/index.esm.js

@@ -83,7 +83,8 @@ const DotIcon = ({
       fontSize: _fontSize === 'small' ? _fontSize : 'medium'
     }, {
       children: jsx("i", {
-        className: `icon-${iconId} dot-i`
+        className: `icon-${iconId} dot-i`,
+        "data-testid": dataTestId && `${dataTestId}-i`
       }, void 0)
     }), void 0)
   }), void 0);
@@ -2680,11 +2681,11 @@ const StyledAppToolbar = styled.header.withConfig({
 }) => css(["&.", "{align-items:center;background:", ";border-bottom:4px solid ", ";box-sizing:border-box;color:", ";display:flex;height:64px;padding:", ";position:fixed;width:100%;z-index:", ";top:0;left:0;right:0;&.without-menu-icon{padding-left:", "px;}&.", "{height:48px;}.dot-main-menu-btn,.dot-right-side{.dot-icon-btn{border:", ";color:", ";&:hover,&:active,&:focus{background:", ";}}}.dot-main-menu-btn{text-align:center;}.dot-branding{align-items:center;display:flex;padding:", ";.primary-logo,.app-logo{margin-right:", "px;}.primary-logo,.dot-app-logo{display:flex;max-width:200px;svg,img{max-height:36px;max-width:200px;}}a{line-height:0;}.dot-product-name{color:", ";font-size:18px;margin:", ";}.divider{margin-left:", "px;}}div.dot-right-side{display:flex;flex-grow:2;justify-content:flex-end;.dot-badge .MuiBadge-anchorOriginTopRightRectangle{top:", "px;right:", "px;}}.avatar-wrapper{display:flex;align-items:center;justify-content:center;width:40px;button.dot-avatar:focus-visible{box-shadow:0px 0px 0px 3px ", ",0px 0px 0px 5px ", ";}}}"], rootClassName$I, theme.palette.product === 'agility' ? theme.palette.agilityInterface.headerBg : theme.palette.grey[700], theme.palette.grey[100], theme.palette.grey[0], theme.spacing(1.5, 2, 1.5, 1), levelFourth, theme.spacing(1.5), denseClassName, theme.palette.product === 'agility' && 'none', theme.palette.grey[100], theme.palette.product === 'agility' && theme.palette.agilityInterface.topBarIconHoverBg, theme.spacing(0, 4, 0, 0.75), theme.spacing(1.5), theme.palette.grey[100], theme.spacing(0, 1.5), theme.spacing(2), theme.spacing(1.5), theme.spacing(1.5), theme.palette.layer.n900, theme.palette.layer.n0));
 
 const DotAppToolbar = ({
-  appName,
+  ariaLabel,
   appLogo,
   appLogoHref: _appLogoHref = '/',
   appLogoSmall,
-  ariaLabel,
+  appName,
   avatar,
   borderColor,
   children,
@@ -2693,10 +2694,12 @@ const DotAppToolbar = ({
   customLogo,
   'data-testid': dataTestId,
   dense: _dense = true,
-  navItems: _navItems = [],
   mainMenu,
   mainMenuItems,
   mainMenuWidth: _mainMenuWidth = 240,
+  menuCloseOnClickAway: _menuCloseOnClickAway = false,
+  navItems: _navItems = [],
+  onClickAway,
   primaryLogoHref: _primaryLogoHref = '/'
 }) => {
   const [menuOpen, updateMenuOpen] = useState(false);
@@ -2756,7 +2759,7 @@ const DotAppToolbar = ({
     }), index);
   });
 
-  return jsxs(StyledAppToolbar, Object.assign({
+  const appToolbar = jsxs(StyledAppToolbar, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId,
@@ -2842,6 +2845,21 @@ const DotAppToolbar = ({
       }), void 0)]
     }), void 0)]
   }), void 0);
+
+  const handleClickAway = event => {
+    if (_menuCloseOnClickAway && onClickAway) {
+      updateMenuOpen(false);
+      onClickAway(event);
+    }
+  };
+
+  return _menuCloseOnClickAway ? jsx(ClickAwayListener, Object.assign({
+    onClickAway: handleClickAway
+  }, {
+    children: jsx("div", {
+      children: appToolbar
+    }, void 0)
+  }), void 0) : appToolbar;
 };
 
 const rootClassName$H = 'dot-autocomplete';
@@ -2852,7 +2870,7 @@ const StyledAutocomplete = styled(Autocomplete).withConfig({
   componentId: "j2sgjy-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.", ".", "{padding-top:", ";padding-bottom:", ";}.dot-text-field{.warning-icon{color:", ";}.error-icon{color:", ";}}}"], rootClassName$H, inputRootClassName, inputMediumClassName, theme.spacing(0), theme.spacing(0), theme.palette.warning.main, theme.palette.error.main));
+}) => css(["&.", "{.", "{padding-top:", ";padding-bottom:", ";}.dot-chip:first-child{margin-left:", ";}.dot-text-field{.MuiOutlinedInput-inputMarginDense{height:31px;}.warning-icon{color:", ";}.error-icon{color:", ";}}}"], rootClassName$H, inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), theme.palette.warning.main, theme.palette.error.main));
 
 const rootClassName$G = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
@@ -2876,7 +2894,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => css(["&.", "{.MuiInputBase-root{background:", ";margin-bottom:0;}.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:", ";}.MuiFormLabel-root.Mui-focused{color:", ";}.", "{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;font-weight:400;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}&.read-only .MuiOutlinedInput-root:hover > fieldset{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.main, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0.5, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen, theme.palette.layer.n200));
+}) => css(["&.", "{.MuiInputBase-root{background:", ";margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;height:19px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", ";}.MuiOutlinedInput-inputMarginDense{height:19px;}select.dot-select{background:", ";padding-left:", "px;}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiFormLabel-root.Mui-focused{color:", ";}.", "{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;font-weight:400;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}&.read-only .MuiOutlinedInput-root:hover > fieldset{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, theme.spacing(1.5), adornmentIconClassName, theme.palette.error.main, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0.5, 0, 0, 1.5), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen, theme.palette.layer.n200));
 
 const rootClassName$F = 'dot-button';
 const StyledButton = styled(Button).withConfig({
@@ -2884,7 +2902,7 @@ const StyledButton = styled(Button).withConfig({
   componentId: "sx99hh-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin:", "px;min-width:auto;white-space:nowrap;&.MuiButton-containedPrimary{background-color:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover,&:active{background-color:", ";}}&.MuiButton-text{padding:6px 16px;}span.dot-icon{padding:0;i{height:auto;}}}"], rootClassName$F, theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen, theme.palette.error.main, darken(theme.palette.error.main, 0.2)));
+}) => css(["&.", "{margin:", "px;min-width:auto;white-space:nowrap;&:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall){height:", "px;}&.MuiButton-containedPrimary{background-color:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover,&:active{background-color:", ";}}&.MuiButton-text{padding:6px 16px;}span.dot-icon{padding:0;i{height:auto;}}}"], rootClassName$F, theme.spacing(0.5), theme.spacing(5), theme.palette.product === 'agility' && agilityGreen, theme.palette.error.main, darken(theme.palette.error.main, 0.2)));
 
 /** This component wraps the Button component from @material-ui. */
 
@@ -3076,6 +3094,34 @@ const getChipsFromAutocomplete = ({
 };
 const checkIfDuplicateItem = (itemText, autocompleteOptions) => autocompleteOptions.some(autocompleteOption => autocompleteOption.title === itemText);
 
+const DotInputLabel = ({
+  'data-testid': dataTestId,
+  disabled: _disabled = false,
+  error: _error = false,
+  id,
+  label,
+  required
+}) => {
+  return jsx(StyledInputLabel, Object.assign({
+    "data-testid": dataTestId,
+    classes: {
+      root: labelClassName
+    },
+    disabled: _disabled,
+    error: _error,
+    htmlFor: id,
+    required: required,
+    shrink: false,
+    variant: "outlined"
+  }, {
+    children: jsx(DotTypography, Object.assign({
+      variant: "subtitle2"
+    }, {
+      children: label
+    }), void 0)
+  }), void 0);
+};
+
 const DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
 const DotAutoComplete = ({
   actionItem,
@@ -3106,6 +3152,7 @@ const DotAutoComplete = ({
   onOpen,
   open,
   options,
+  persistentLabel,
   placeholder,
   readOnly: _readOnly = false,
   renderOption,
@@ -3364,39 +3411,49 @@ const DotAutoComplete = ({
         // at least pick up any styling that is used there. Should additional
         // functionality be added to DotInputText we will have to make a
         // decision about if/how to expose it here.
-        jsx(StyledTextField, Object.assign({}, params, {
-          autoFocus: autoFocus,
-          classes: {
-            root: textFieldRootClasses
-          },
-          error: _error,
-          focused: _readOnly ? false : undefined,
-          helperText: helperText,
-          inputProps: Object.assign(Object.assign({}, inputProps), {
-            id: inputId,
-            className: useStylesWithRootClass(inputProps.className, 'dot-input')
-          }),
-          InputProps: Object.assign(Object.assign({}, params.InputProps), {
-            endAdornment: !_readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined,
-            readOnly: _readOnly
-          }),
-          inputRef: textFieldRef,
-          label: label,
-          name: label,
-          onKeyDown: event => {
-            var _a; // Intercept 'tab' key press while action item element exists
-
-
-            if (event.key === 'Tab' && actionItemRef.current) {
-              event.preventDefault();
-              (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-          },
-          placeholder: showPlaceholder ? placeholder : undefined,
-          required: _required,
-          size: _dense ? 'small' : 'medium',
-          variant: "outlined"
-        }), void 0)
+        jsxs(Fragment$1, {
+          children: [persistentLabel && jsx(DotInputLabel, Object.assign({
+            "data-testid": dataTestId && `${dataTestId}-persistent-label`,
+            id: inputId
+          }, {
+            disabled: _disabled,
+            error: _error,
+            label,
+            required: _required
+          }), void 0), jsx(StyledTextField, Object.assign({}, params, {
+            autoFocus: autoFocus,
+            classes: {
+              root: textFieldRootClasses
+            },
+            error: _error,
+            focused: _readOnly ? false : undefined,
+            helperText: helperText,
+            inputProps: Object.assign(Object.assign({}, inputProps), {
+              id: inputId,
+              className: useStylesWithRootClass(inputProps.className, 'dot-input')
+            }),
+            InputProps: Object.assign(Object.assign({}, params.InputProps), {
+              endAdornment: !_readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined,
+              readOnly: _readOnly
+            }),
+            inputRef: textFieldRef,
+            label: persistentLabel ? null : label,
+            name: label,
+            onKeyDown: event => {
+              var _a; // Intercept 'tab' key press while action item element exists
+
+
+              if (event.key === 'Tab' && actionItemRef.current) {
+                event.preventDefault();
+                (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+              }
+            },
+            placeholder: showPlaceholder ? placeholder : undefined,
+            required: _required,
+            size: _dense ? 'small' : 'medium',
+            variant: "outlined"
+          }), void 0)]
+        }, void 0)
       );
     },
     renderOption: renderOption,
@@ -3833,7 +3890,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup).withConfig({
   componentId: "sc-1oh4ljv-0"
 })(["", ""], ({
   theme
-}) => 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]));
+}) => css(["&.", "{button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall){height:", "px;.dot-icon{width:", "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(5), theme.spacing(2), theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]));
 
 const DotButtonToggle = ({
   ariaLabel,
@@ -4932,32 +4989,6 @@ const checkIfFormDataValid = formState => {
   return true;
 };
 
-const DotInputLabel = ({
-  disabled: _disabled = false,
-  error: _error = false,
-  id,
-  label,
-  required
-}) => {
-  return jsx(StyledInputLabel, Object.assign({
-    classes: {
-      root: labelClassName
-    },
-    disabled: _disabled,
-    error: _error,
-    htmlFor: id,
-    required: required,
-    shrink: false,
-    variant: "outlined"
-  }, {
-    children: jsx(DotTypography, Object.assign({
-      variant: "subtitle2"
-    }, {
-      children: label
-    }), void 0)
-  }), void 0);
-};
-
 const DELAY_MS = 300;
 
 const EndAdornment = ({
@@ -6105,7 +6136,7 @@ const StyledInlineEdit = styled.div.withConfig({
 })(["", ""], ({
   theme,
   fullWidth
-}) => css(["&.dot-inline-edit{display:", ";align-items:center;color:", ";min-width:", "px;.", "{display:flex;width:100%;position:relative;.dot-edit-icon{height:100%;position:absolute;right:0;width:40px;background-color:", ";border-radius:", ";display:none;.dot-i{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}&:not(.", "):hover{border-radius:", "px;background-color:", ";cursor:pointer;.dot-edit-icon{display:block;}}.dot-view-mode-typography{padding:", ";margin-bottom:0;}}.dot-empty-value fieldset{border-color:", ";}.dot-adornment-error{color:", ";}.MuiInputBase-input{height:auto;}.MuiInputBase-root{margin-bottom:", "px;}", " .", " .dot-input{padding-left:", "px;}.MuiOutlinedInput-input:focus{cursor:auto;}.dot-counter-adornment{.dot-counter-max-length{color:", ";}.dot-counter-length,.dot-counter-max-length{&.dot-counter-limit{color:", ";}}}.dot-read-only-adornment{display:none;}.", "{display:flex;align-items:center;margin:", ";.dot-button{padding:", "px;margin-top:", ";margin-bottom:", ";}}}"], fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), theme.palette.error[500], theme.palette.error[500], theme.spacing(0), ({
+}) => css(["&.dot-inline-edit{display:", ";align-items:center;color:", ";min-width:", "px;&:not(.", "):focus-visible{border-radius:", "px;background-color:", ";cursor:pointer;outline:0;.dot-edit-icon{display:block;}}.", "{display:flex;width:100%;position:relative;.dot-edit-icon{height:100%;position:absolute;right:0;width:40px;background-color:", ";border-radius:", ";display:none;.dot-i{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}&:not(.", "):hover{border-radius:", "px;background-color:", ";cursor:pointer;.dot-edit-icon{display:block;}}.dot-view-mode-typography{padding:", ";margin-bottom:0;}}.dot-empty-value fieldset{border-color:", ";}.dot-adornment-error{color:", ";}.MuiInputBase-input{height:auto;}.MuiInputBase-root{margin-bottom:", "px;}", " .", " .dot-input{padding-left:", "px;}.MuiOutlinedInput-input:focus{cursor:auto;}.dot-counter-adornment{.dot-counter-max-length{color:", ";}.dot-counter-length,.dot-counter-max-length{&.dot-counter-limit{color:", ";}}}.dot-read-only-adornment{display:none;}.", "{display:flex;align-items:center;margin:", ";.dot-button{padding:", "px;margin-top:", ";margin-bottom:", ";}}}"], fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), theme.palette.error[500], theme.palette.error[500], theme.spacing(0), ({
   typography
 }) => typography && `
          .MuiInputBase-root {
@@ -6207,18 +6238,27 @@ const DotInlineEdit = ({
   onEditStateChange,
   readOnly,
   selectTextOnEdit,
+  tabIndex: _tabIndex = 0,
   tooltip,
   typography: _typography = 'body1',
   value: _value = ''
 }) => {
   const [editing, setEditing] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
   const [originalValue, setOriginalValue] = useState('');
   const [inputValue, setInputValue] = useState(_value);
+  const isNotReadOnlyOrEditing = !readOnly && !editing;
   const inputRef = useRef();
   const inlineEditRef = useRef();
   const isSaveDisabled = checkIfEmptyValue(inputValue);
   const rootClasses = useStylesWithRootClass(rootClassName$n, className, editing ? editModeClassName : '');
 
+  const handleShowTooltip = visible => {
+    if (isNotReadOnlyOrEditing) {
+      setShowTooltip(visible);
+    }
+  };
+
   const handleInlineEditClick = () => {
     if (editing) return;
     setOriginalValue(inputValue);
@@ -6232,6 +6272,7 @@ const DotInlineEdit = ({
   const handleSave = () => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
 
+    setShowTooltip(false);
     if (isSaveDisabled) return;
 
     if (onChange) {
@@ -6251,6 +6292,7 @@ const DotInlineEdit = ({
   });
 
   const handleCancel = () => {
+    setShowTooltip(false);
     setEditing(false);
     setInputValue(originalValue);
 
@@ -6262,7 +6304,12 @@ const DotInlineEdit = ({
   const handleKeyPress = event => __awaiter(void 0, void 0, void 0, function* () {
     switch (event.key) {
       case 'Enter':
-        // Save only when Enter is pressed within input field
+        if (!editing) {
+          handleInlineEditClick();
+          return;
+        } // Save only when Enter is pressed within input field
+
+
         if (inputRef.current !== event.target) return;
         yield handleSave();
         break;
@@ -6274,8 +6321,12 @@ const DotInlineEdit = ({
   });
 
   const handleBlur = event => __awaiter(void 0, void 0, void 0, function* () {
-    if (!event.relatedTarget || !inlineEditRef.current.contains(event.relatedTarget)) {
-      yield handleSave();
+    if (!editing) {
+      setShowTooltip(false);
+    } else {
+      if (!event.relatedTarget || !inlineEditRef.current.contains(event.relatedTarget)) {
+        yield handleSave();
+      }
     }
   });
 
@@ -6309,7 +6360,8 @@ const DotInlineEdit = ({
     return tooltip ? jsx(DotTooltip, Object.assign({
       title: tooltip,
       className: viewModeClasses,
-      "data-testid": dataTestId && `${dataTestId}-view-mode-tooltip-wrapper`
+      "data-testid": dataTestId && `${dataTestId}-view-mode-tooltip-wrapper`,
+      open: showTooltip
     }, {
       children: viewModeChildren
     }), void 0) : jsx("div", Object.assign({
@@ -6381,10 +6433,14 @@ const DotInlineEdit = ({
     className: rootClasses,
     "data-testid": dataTestId,
     fullWidth: _fullWidth,
-    onBlur: !readOnly && editing ? handleBlur : undefined,
+    onBlur: !readOnly ? handleBlur : undefined,
     onClick: !readOnly ? handleInlineEditClick : undefined,
+    onFocus: () => handleShowTooltip(true),
+    onMouseOver: () => handleShowTooltip(true),
+    onMouseOut: () => handleShowTooltip(false),
     onKeyDown: !readOnly ? event => handleKeyPress(event) : undefined,
     ref: inlineEditRef,
+    tabIndex: !readOnly ? _tabIndex : undefined,
     typography: _typography
   }, {
     children: editing ? renderEditMode() : renderViewMode()
@@ -7993,7 +8049,7 @@ const StyledFileListItem = styled(StyledListItem).withConfig({
   componentId: "sc-6mp1tz-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{border-bottom:1px solid ", ";&:hover{cursor:pointer;background:", ";}&.file-success:not(:hover){.", "-end-icon .dot-icon i:before{color:", ";}}&.file-error:not(:hover){.MuiListItemText-secondary,.", "-end-icon .dot-icon i:before{color:", ";}}.dot-typography,.file-item-text{flex-grow:2;padding-left:", "px;}.file-item-text{display:flex;flex-direction:column;.MuiTypography-body2{color:", ";}}}"], rootClassName$4, theme.palette.layer.n100, theme.palette.layer.n50, rootClassName$4, theme.palette.secondary.main, rootClassName$4, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
+}) => css(["&.", "{border-bottom:1px solid ", ";&:hover{cursor:pointer;background:", ";}&:focus-visible{background-color:", ";outline:none;}&.file-success:not(:hover,:focus-visible) .", "-end-icon{i:before{color:", ";}&:focus-visible i:before{color:unset;}}&.file-error:not(:hover,:focus-visible) .", "-end-icon{i:before,.MuiListItemText-secondary{color:", ";}&:focus-visible i:before{color:unset;}}.dot-typography,.file-item-text{flex-grow:2;padding-left:", "px;}.file-item-text{display:flex;flex-direction:column;.MuiTypography-body2{color:", ";}}}"], rootClassName$4, theme.palette.layer.n100, theme.palette.layer.n50, theme.palette.layer.n100, rootClassName$4, theme.palette.secondary.main, rootClassName$4, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
 
 const DotFileListItem = ({
   ariaLabel,
@@ -8004,7 +8060,9 @@ const DotFileListItem = ({
   error: _error = false,
   errorText,
   file,
-  onClick
+  onClick,
+  onKeyPress,
+  tabIndex: _tabIndex = 0
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$4, className, _error ? 'file-error' : 'file-success');
   const defaultIcon = _error ? 'error-solid' : 'check-solid';
@@ -8021,9 +8079,13 @@ const DotFileListItem = ({
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId,
+    onBlur: () => setEndIcon(defaultIcon),
     onClick: handleItemClick(file),
+    onFocus: () => setEndIcon('delete'),
     onMouseEnter: () => setEndIcon('delete'),
-    onMouseLeave: () => setEndIcon(defaultIcon)
+    onMouseLeave: () => setEndIcon(defaultIcon),
+    onKeyPress: onKeyPress,
+    tabIndex: _tabIndex
   }, {
     children: [jsx(DotIcon, {
       "data-testid": dataTestId && `${dataTestId}-start-icon`,

package/index.umd.js

@@ -202,7 +202,8 @@
           fontSize: fontSize === 'small' ? fontSize : 'medium'
         }, {
           children: jsxRuntime.jsx("i", {
-            className: "icon-" + iconId + " dot-i"
+            className: "icon-" + iconId + " dot-i",
+            "data-testid": dataTestId && dataTestId + "-i"
           }, void 0)
         }), void 0)
       }), void 0);
@@ -2920,12 +2921,12 @@
     var templateObject_1$L, templateObject_2$J, templateObject_3$8, templateObject_4$6;
 
     var DotAppToolbar = function DotAppToolbar(_a) {
-      var appName = _a.appName,
+      var ariaLabel = _a.ariaLabel,
           appLogo = _a.appLogo,
           _b = _a.appLogoHref,
           appLogoHref = _b === void 0 ? '/' : _b,
           appLogoSmall = _a.appLogoSmall,
-          ariaLabel = _a.ariaLabel,
+          appName = _a.appName,
           avatar = _a.avatar,
           borderColor = _a.borderColor,
           children = _a.children,
@@ -2935,18 +2936,21 @@
           dataTestId = _a["data-testid"],
           _c = _a.dense,
           dense = _c === void 0 ? true : _c,
-          _d = _a.navItems,
-          navItems = _d === void 0 ? [] : _d,
           mainMenu = _a.mainMenu,
           mainMenuItems = _a.mainMenuItems,
-          _e = _a.mainMenuWidth,
-          mainMenuWidth = _e === void 0 ? 240 : _e,
-          _f = _a.primaryLogoHref,
-          primaryLogoHref = _f === void 0 ? '/' : _f;
+          _d = _a.mainMenuWidth,
+          mainMenuWidth = _d === void 0 ? 240 : _d,
+          _e = _a.menuCloseOnClickAway,
+          menuCloseOnClickAway = _e === void 0 ? false : _e,
+          _f = _a.navItems,
+          navItems = _f === void 0 ? [] : _f,
+          onClickAway = _a.onClickAway,
+          _g = _a.primaryLogoHref,
+          primaryLogoHref = _g === void 0 ? '/' : _g;
 
-      var _g = React.useState(false),
-          menuOpen = _g[0],
-          updateMenuOpen = _g[1];
+      var _h = React.useState(false),
+          menuOpen = _h[0],
+          updateMenuOpen = _h[1];
 
       var showMainMenu = mainMenu || mainMenuItems;
       var displayAppLogo = appLogo || appLogoSmall;
@@ -3006,7 +3010,8 @@
           }, index)
         }), index);
       });
-      return jsxRuntime.jsxs(StyledAppToolbar, __assign({
+
+      var appToolbar = jsxRuntime.jsxs(StyledAppToolbar, __assign({
         "aria-label": ariaLabel,
         className: rootClasses,
         "data-testid": dataTestId,
@@ -3096,6 +3101,21 @@
           }), void 0)]
         }), void 0)]
       }), void 0);
+
+      var handleClickAway = function handleClickAway(event) {
+        if (menuCloseOnClickAway && onClickAway) {
+          updateMenuOpen(false);
+          onClickAway(event);
+        }
+      };
+
+      return menuCloseOnClickAway ? jsxRuntime.jsx(core.ClickAwayListener, __assign({
+        onClickAway: handleClickAway
+      }, {
+        children: jsxRuntime.jsx("div", {
+          children: appToolbar
+        }, void 0)
+      }), void 0) : appToolbar;
     };
 
     var rootClassName$H = 'dot-autocomplete';
@@ -3106,7 +3126,7 @@
       componentId: "j2sgjy-0"
     })(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n    &.", " {\n      .", ".", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n\n      .dot-text-field {\n        .warning-icon {\n          color: ", ";\n        }\n        .error-icon {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .", ".", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n\n      .dot-text-field {\n        .warning-icon {\n          color: ", ";\n        }\n        .error-icon {\n          color: ", ";\n        }\n      }\n    }\n  "])), rootClassName$H, inputRootClassName, inputMediumClassName, theme.spacing(0), theme.spacing(0), theme.palette.warning.main, theme.palette.error.main);
+      return styled.css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n    &.", " {\n      .", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n\n      .dot-chip:first-child {\n        margin-left: ", ";\n      }\n\n      .dot-text-field {\n        .MuiOutlinedInput-inputMarginDense {\n          /* padding above and below together is 9px, and total height should be 40px */\n          height: 31px;\n        }\n\n        .warning-icon {\n          color: ", ";\n        }\n        .error-icon {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n\n      .dot-chip:first-child {\n        margin-left: ", ";\n      }\n\n      .dot-text-field {\n        .MuiOutlinedInput-inputMarginDense {\n          /* padding above and below together is 9px, and total height should be 40px */\n          height: 31px;\n        }\n\n        .warning-icon {\n          color: ", ";\n        }\n        .error-icon {\n          color: ", ";\n        }\n      }\n    }\n  "])), rootClassName$H, inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), theme.palette.warning.main, theme.palette.error.main);
     });
     var templateObject_1$K, templateObject_2$I;
 
@@ -3133,7 +3153,7 @@
     })(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
           InputProps = _a.InputProps;
-      return styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", ";\n        margin-bottom: 0;\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\n      .MuiFormLabel-root.Mui-focused {\n        color: ", ";\n      }\n\n      select.dot-select {\n        background: ", ";\n      }\n\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n\n      .Mui-error .", " {\n        color: ", ";\n      }\n\n      .MuiSelect-icon {\n        right: ", ";\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiFormLabel-root.Mui-focused {\n          color: ", ";\n        }\n\n        .", " {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " {\n          color: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        font-weight: 400;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n\n      &.read-only .MuiOutlinedInput-root:hover > fieldset {\n        border-color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", ";\n        margin-bottom: 0;\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\n      .MuiFormLabel-root.Mui-focused {\n        color: ", ";\n      }\n\n      select.dot-select {\n        background: ", ";\n      }\n\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n\n      .Mui-error .", " {\n        color: ", ";\n      }\n\n      .MuiSelect-icon {\n        right: ", ";\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiFormLabel-root.Mui-focused {\n          color: ", ";\n        }\n\n        .", " {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " {\n          color: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        font-weight: 400;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n\n      &.read-only .MuiOutlinedInput-root:hover > fieldset {\n        border-color: ", ";\n      }\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.main, InputProps.endAdornment ? "44px" : "12px", successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0.5, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen, theme.palette.layer.n200);
+      return styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", ";\n        margin-bottom: 0;\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        /* padding above and below together is 21px, and total height should be 40px */\n        height: 19px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n\n      .MuiFormLabel-root.Mui-focused {\n        color: ", ";\n      }\n\n      .MuiOutlinedInput-inputMarginDense {\n        height: 19px;\n      }\n\n      select.dot-select {\n        background: ", ";\n\n        padding-left: ", "px;\n      }\n\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n\n      .Mui-error .", " {\n        color: ", ";\n      }\n\n      .MuiSelect-icon {\n        right: ", ";\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiFormLabel-root.Mui-focused {\n          color: ", ";\n        }\n\n        .", " {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " {\n          color: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        font-weight: 400;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n\n      &.read-only .MuiOutlinedInput-root:hover > fieldset {\n        border-color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", ";\n        margin-bottom: 0;\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        /* padding above and below together is 21px, and total height should be 40px */\n        height: 19px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n\n      .MuiFormLabel-root.Mui-focused {\n        color: ", ";\n      }\n\n      .MuiOutlinedInput-inputMarginDense {\n        height: 19px;\n      }\n\n      select.dot-select {\n        background: ", ";\n\n        padding-left: ", "px;\n      }\n\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n\n      .Mui-error .", " {\n        color: ", ";\n      }\n\n      .MuiSelect-icon {\n        right: ", ";\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiFormLabel-root.Mui-focused {\n          color: ", ";\n        }\n\n        .", " {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " {\n          color: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        font-weight: 400;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n\n      &.read-only .MuiOutlinedInput-root:hover > fieldset {\n        border-color: ", ";\n      }\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, theme.spacing(1.5), adornmentIconClassName, theme.palette.error.main, InputProps.endAdornment ? "44px" : "12px", successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0.5, 0, 0, 1.5), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen, theme.palette.layer.n200);
     });
     var templateObject_1$J, templateObject_2$H, templateObject_3$7, templateObject_4$5, templateObject_5$1;
 
@@ -3143,7 +3163,7 @@
       componentId: "sx99hh-0"
     })(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    &.", " {\n      margin: ", "px;\n      min-width: auto;\n      white-space: nowrap;\n\n      &.MuiButton-containedPrimary {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      span.dot-icon {\n        padding: 0;\n\n        i {\n          height: auto;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      margin: ", "px;\n      min-width: auto;\n      white-space: nowrap;\n\n      &.MuiButton-containedPrimary {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      span.dot-icon {\n        padding: 0;\n\n        i {\n          height: auto;\n        }\n      }\n    }\n  "])), rootClassName$F, theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen, theme.palette.error.main, core.darken(theme.palette.error.main, 0.2));
+      return styled.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    &.", " {\n      margin: ", "px;\n      min-width: auto;\n      white-space: nowrap;\n\n      &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n        /* Override height for medium size */\n        height: ", "px;\n      }\n\n      &.MuiButton-containedPrimary {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      span.dot-icon {\n        padding: 0;\n\n        i {\n          height: auto;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      margin: ", "px;\n      min-width: auto;\n      white-space: nowrap;\n\n      &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n        /* Override height for medium size */\n        height: ", "px;\n      }\n\n      &.MuiButton-containedPrimary {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      span.dot-icon {\n        padding: 0;\n\n        i {\n          height: auto;\n        }\n      }\n    }\n  "])), rootClassName$F, theme.spacing(0.5), theme.spacing(5), theme.palette.product === 'agility' && agilityGreen, theme.palette.error.main, core.darken(theme.palette.error.main, 0.2));
     });
     var templateObject_1$I, templateObject_2$G;
 
@@ -3361,6 +3381,35 @@
       });
     };
 
+    var DotInputLabel = function DotInputLabel(_a) {
+      var dataTestId = _a["data-testid"],
+          _b = _a.disabled,
+          disabled = _b === void 0 ? false : _b,
+          _c = _a.error,
+          error = _c === void 0 ? false : _c,
+          id = _a.id,
+          label = _a.label,
+          required = _a.required;
+      return jsxRuntime.jsx(StyledInputLabel, __assign({
+        "data-testid": dataTestId,
+        classes: {
+          root: labelClassName
+        },
+        disabled: disabled,
+        error: error,
+        htmlFor: id,
+        required: required,
+        shrink: false,
+        variant: "outlined"
+      }, {
+        children: jsxRuntime.jsx(DotTypography, __assign({
+          variant: "subtitle2"
+        }, {
+          children: label
+        }), void 0)
+      }), void 0);
+    };
+
     var DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
     var DotAutoComplete = function DotAutoComplete(_a) {
       var actionItem = _a.actionItem,
@@ -3399,6 +3448,7 @@
           onOpen = _a.onOpen,
           open = _a.open,
           options = _a.options,
+          persistentLabel = _a.persistentLabel,
           placeholder = _a.placeholder,
           _k = _a.readOnly,
           readOnly = _k === void 0 ? false : _k,
@@ -3681,39 +3731,49 @@
             // at least pick up any styling that is used there. Should additional
             // functionality be added to DotInputText we will have to make a
             // decision about if/how to expose it here.
-            jsxRuntime.jsx(StyledTextField, __assign({}, params, {
-              autoFocus: autoFocus,
-              classes: {
-                root: textFieldRootClasses
-              },
-              error: error,
-              focused: readOnly ? false : undefined,
-              helperText: helperText,
-              inputProps: __assign(__assign({}, inputProps), {
-                id: inputId,
-                className: useStylesWithRootClass(inputProps.className, 'dot-input')
-              }),
-              InputProps: __assign(__assign({}, params.InputProps), {
-                endAdornment: !readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined,
-                readOnly: readOnly
-              }),
-              inputRef: textFieldRef,
-              label: label,
-              name: label,
-              onKeyDown: function (event) {
-                var _a; // Intercept 'tab' key press while action item element exists
-
-
-                if (event.key === 'Tab' && actionItemRef.current) {
-                  event.preventDefault();
-                  (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-              },
-              placeholder: showPlaceholder ? placeholder : undefined,
-              required: required,
-              size: dense ? 'small' : 'medium',
-              variant: "outlined"
-            }), void 0)
+            jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [persistentLabel && jsxRuntime.jsx(DotInputLabel, __assign({
+                "data-testid": dataTestId && dataTestId + "-persistent-label",
+                id: inputId
+              }, {
+                disabled: disabled,
+                error: error,
+                label: label,
+                required: required
+              }), void 0), jsxRuntime.jsx(StyledTextField, __assign({}, params, {
+                autoFocus: autoFocus,
+                classes: {
+                  root: textFieldRootClasses
+                },
+                error: error,
+                focused: readOnly ? false : undefined,
+                helperText: helperText,
+                inputProps: __assign(__assign({}, inputProps), {
+                  id: inputId,
+                  className: useStylesWithRootClass(inputProps.className, 'dot-input')
+                }),
+                InputProps: __assign(__assign({}, params.InputProps), {
+                  endAdornment: !readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined,
+                  readOnly: readOnly
+                }),
+                inputRef: textFieldRef,
+                label: persistentLabel ? null : label,
+                name: label,
+                onKeyDown: function (event) {
+                  var _a; // Intercept 'tab' key press while action item element exists
+
+
+                  if (event.key === 'Tab' && actionItemRef.current) {
+                    event.preventDefault();
+                    (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                  }
+                },
+                placeholder: showPlaceholder ? placeholder : undefined,
+                required: required,
+                size: dense ? 'small' : 'medium',
+                variant: "outlined"
+              }), void 0)]
+            }, void 0)
           );
         },
         renderOption: renderOption,
@@ -4137,7 +4197,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      .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]);
+      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n      button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {\n        /* Override height for medium size */\n        height: ", "px;\n\n        .dot-icon {\n          /* With this, the width of the medium size button matches its height (40px) */\n          width: ", "px;\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  "], ["\n    &.", " {\n      button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {\n        /* Override height for medium size */\n        height: ", "px;\n\n        .dot-icon {\n          /* With this, the width of the medium size button matches its height (40px) */\n          width: ", "px;\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(5), theme.spacing(2), theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]);
     });
     var templateObject_1$F, templateObject_2$D;
 
@@ -5291,33 +5351,6 @@
       return true;
     };
 
-    var DotInputLabel = function DotInputLabel(_a) {
-      var _b = _a.disabled,
-          disabled = _b === void 0 ? false : _b,
-          _c = _a.error,
-          error = _c === void 0 ? false : _c,
-          id = _a.id,
-          label = _a.label,
-          required = _a.required;
-      return jsxRuntime.jsx(StyledInputLabel, __assign({
-        classes: {
-          root: labelClassName
-        },
-        disabled: disabled,
-        error: error,
-        htmlFor: id,
-        required: required,
-        shrink: false,
-        variant: "outlined"
-      }, {
-        children: jsxRuntime.jsx(DotTypography, __assign({
-          variant: "subtitle2"
-        }, {
-          children: label
-        }), void 0)
-      }), void 0);
-    };
-
     var DELAY_MS = 300;
 
     var EndAdornment = function EndAdornment(_a) {
@@ -6516,7 +6549,7 @@
     })(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
           fullWidth = _a.fullWidth;
-      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.dot-inline-edit {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", "px;\n\n      .", " {\n        display: flex;\n        width: 100%;\n        position: relative;\n\n        .dot-edit-icon {\n          height: 100%;\n          position: absolute;\n          right: 0;\n          width: 40px;\n          background-color: ", ";\n          border-radius: ", ";\n          display: none;\n\n          .dot-i {\n            margin: 0;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n        }\n\n        // Display pointer and edit icon only when NOT in read only mode\n        &:not(.", "):hover {\n          border-radius: ", "px;\n          background-color: ", ";\n          cursor: pointer;\n\n          .dot-edit-icon {\n            display: block;\n          }\n        }\n\n        .dot-view-mode-typography {\n          padding: ", ";\n          margin-bottom: 0;\n        }\n      }\n\n      .dot-empty-value fieldset {\n        border-color: ", ";\n      }\n\n      .dot-adornment-error {\n        color: ", ";\n      }\n\n      .MuiInputBase-input {\n        height: auto;\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: ", "px;\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", "px;\n      }\n\n      .MuiOutlinedInput-input:focus {\n        cursor: auto;\n      }\n\n      .dot-counter-adornment {\n        .dot-counter-max-length {\n          color: ", ";\n        }\n\n        .dot-counter-length,\n        .dot-counter-max-length {\n          &.dot-counter-limit {\n            color: ", ";\n          }\n        }\n      }\n\n      .dot-read-only-adornment {\n        display: none;\n      }\n\n      .", " {\n        display: flex;\n        align-items: center;\n        margin: ", ";\n\n        .dot-button {\n          padding: ", "px;\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "], ["\n    &.dot-inline-edit {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", "px;\n\n      .", " {\n        display: flex;\n        width: 100%;\n        position: relative;\n\n        .dot-edit-icon {\n          height: 100%;\n          position: absolute;\n          right: 0;\n          width: 40px;\n          background-color: ", ";\n          border-radius: ", ";\n          display: none;\n\n          .dot-i {\n            margin: 0;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n        }\n\n        // Display pointer and edit icon only when NOT in read only mode\n        &:not(.", "):hover {\n          border-radius: ", "px;\n          background-color: ", ";\n          cursor: pointer;\n\n          .dot-edit-icon {\n            display: block;\n          }\n        }\n\n        .dot-view-mode-typography {\n          padding: ", ";\n          margin-bottom: 0;\n        }\n      }\n\n      .dot-empty-value fieldset {\n        border-color: ", ";\n      }\n\n      .dot-adornment-error {\n        color: ", ";\n      }\n\n      .MuiInputBase-input {\n        height: auto;\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: ", "px;\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", "px;\n      }\n\n      .MuiOutlinedInput-input:focus {\n        cursor: auto;\n      }\n\n      .dot-counter-adornment {\n        .dot-counter-max-length {\n          color: ", ";\n        }\n\n        .dot-counter-length,\n        .dot-counter-max-length {\n          &.dot-counter-limit {\n            color: ", ";\n          }\n        }\n      }\n\n      .dot-read-only-adornment {\n        display: none;\n      }\n\n      .", " {\n        display: flex;\n        align-items: center;\n        margin: ", ";\n\n        .dot-button {\n          padding: ", "px;\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "])), fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), theme.palette.error[500], theme.palette.error[500], theme.spacing(0), function (_a) {
+      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.dot-inline-edit {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", "px;\n\n      &:not(.", "):focus-visible {\n        border-radius: ", "px;\n        background-color: ", ";\n        cursor: pointer;\n        outline: 0;\n\n        .dot-edit-icon {\n          display: block;\n        }\n      }\n\n      .", " {\n        display: flex;\n        width: 100%;\n        position: relative;\n\n        .dot-edit-icon {\n          height: 100%;\n          position: absolute;\n          right: 0;\n          width: 40px;\n          background-color: ", ";\n          border-radius: ", ";\n          display: none;\n\n          .dot-i {\n            margin: 0;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n        }\n\n        // Display pointer and edit icon only when NOT in read only mode\n        &:not(.", "):hover {\n          border-radius: ", "px;\n          background-color: ", ";\n          cursor: pointer;\n\n          .dot-edit-icon {\n            display: block;\n          }\n        }\n\n        .dot-view-mode-typography {\n          padding: ", ";\n          margin-bottom: 0;\n        }\n      }\n\n      .dot-empty-value fieldset {\n        border-color: ", ";\n      }\n\n      .dot-adornment-error {\n        color: ", ";\n      }\n\n      .MuiInputBase-input {\n        height: auto;\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: ", "px;\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", "px;\n      }\n\n      .MuiOutlinedInput-input:focus {\n        cursor: auto;\n      }\n\n      .dot-counter-adornment {\n        .dot-counter-max-length {\n          color: ", ";\n        }\n\n        .dot-counter-length,\n        .dot-counter-max-length {\n          &.dot-counter-limit {\n            color: ", ";\n          }\n        }\n      }\n\n      .dot-read-only-adornment {\n        display: none;\n      }\n\n      .", " {\n        display: flex;\n        align-items: center;\n        margin: ", ";\n\n        .dot-button {\n          padding: ", "px;\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "], ["\n    &.dot-inline-edit {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", "px;\n\n      &:not(.", "):focus-visible {\n        border-radius: ", "px;\n        background-color: ", ";\n        cursor: pointer;\n        outline: 0;\n\n        .dot-edit-icon {\n          display: block;\n        }\n      }\n\n      .", " {\n        display: flex;\n        width: 100%;\n        position: relative;\n\n        .dot-edit-icon {\n          height: 100%;\n          position: absolute;\n          right: 0;\n          width: 40px;\n          background-color: ", ";\n          border-radius: ", ";\n          display: none;\n\n          .dot-i {\n            margin: 0;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n        }\n\n        // Display pointer and edit icon only when NOT in read only mode\n        &:not(.", "):hover {\n          border-radius: ", "px;\n          background-color: ", ";\n          cursor: pointer;\n\n          .dot-edit-icon {\n            display: block;\n          }\n        }\n\n        .dot-view-mode-typography {\n          padding: ", ";\n          margin-bottom: 0;\n        }\n      }\n\n      .dot-empty-value fieldset {\n        border-color: ", ";\n      }\n\n      .dot-adornment-error {\n        color: ", ";\n      }\n\n      .MuiInputBase-input {\n        height: auto;\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: ", "px;\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", "px;\n      }\n\n      .MuiOutlinedInput-input:focus {\n        cursor: auto;\n      }\n\n      .dot-counter-adornment {\n        .dot-counter-max-length {\n          color: ", ";\n        }\n\n        .dot-counter-length,\n        .dot-counter-max-length {\n          &.dot-counter-limit {\n            color: ", ";\n          }\n        }\n      }\n\n      .dot-read-only-adornment {\n        display: none;\n      }\n\n      .", " {\n        display: flex;\n        align-items: center;\n        margin: ", ";\n\n        .dot-button {\n          padding: ", "px;\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "])), fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), theme.palette.error[500], theme.palette.error[500], theme.spacing(0), function (_a) {
         var typography = _a.typography;
         return typography && "\n         .MuiInputBase-root {\n            font-family: " + (theme.typography[typography].fontFamily || 'inherit') + ";\n            font-size: " + theme.typography[typography].fontSize + "px;\n            line-height: " + (theme.typography[typography].lineHeight || 'normal') + ";\n            letter-spacing: " + (theme.typography[typography].letterSpacing || 'normal') + ";\n            text-transform: " + (theme.typography[typography].textTransform || 'none') + ";\n         }\n      ";
       }, editTextFieldClassName, theme.spacing(1), theme.palette.layer.n400, theme.palette.error[500], editActionsClassName, theme.spacing(0, 0, 0, 0.5), theme.spacing(0.75), theme.spacing(0), theme.spacing(0));
@@ -6615,29 +6648,42 @@
           onEditStateChange = _a.onEditStateChange,
           readOnly = _a.readOnly,
           selectTextOnEdit = _a.selectTextOnEdit,
+          _c = _a.tabIndex,
+          tabIndex = _c === void 0 ? 0 : _c,
           tooltip = _a.tooltip,
-          _c = _a.typography,
-          typography = _c === void 0 ? 'body1' : _c,
-          _d = _a.value,
-          value = _d === void 0 ? '' : _d;
+          _d = _a.typography,
+          typography = _d === void 0 ? 'body1' : _d,
+          _e = _a.value,
+          value = _e === void 0 ? '' : _e;
 
-      var _e = React.useState(false),
-          editing = _e[0],
-          setEditing = _e[1];
+      var _f = React.useState(false),
+          editing = _f[0],
+          setEditing = _f[1];
+
+      var _g = React.useState(false),
+          showTooltip = _g[0],
+          setShowTooltip = _g[1];
 
-      var _f = React.useState(''),
-          originalValue = _f[0],
-          setOriginalValue = _f[1];
+      var _h = React.useState(''),
+          originalValue = _h[0],
+          setOriginalValue = _h[1];
 
-      var _g = React.useState(value),
-          inputValue = _g[0],
-          setInputValue = _g[1];
+      var _j = React.useState(value),
+          inputValue = _j[0],
+          setInputValue = _j[1];
 
+      var isNotReadOnlyOrEditing = !readOnly && !editing;
       var inputRef = React.useRef();
       var inlineEditRef = React.useRef();
       var isSaveDisabled = checkIfEmptyValue(inputValue);
       var rootClasses = useStylesWithRootClass(rootClassName$n, className, editing ? editModeClassName : '');
 
+      var handleShowTooltip = function handleShowTooltip(visible) {
+        if (isNotReadOnlyOrEditing) {
+          setShowTooltip(visible);
+        }
+      };
+
       var handleInlineEditClick = function handleInlineEditClick() {
         if (editing) return;
         setOriginalValue(inputValue);
@@ -6657,6 +6703,7 @@
           return __generator(this, function (_b) {
             switch (_b.label) {
               case 0:
+                setShowTooltip(false);
                 if (isSaveDisabled) return [2
                 /*return*/
                 ];
@@ -6695,6 +6742,7 @@
       };
 
       var handleCancel = function handleCancel() {
+        setShowTooltip(false);
         setEditing(false);
         setInputValue(originalValue);
 
@@ -6729,7 +6777,14 @@
                 , 4];
 
               case 1:
-                // Save only when Enter is pressed within input field
+                if (!editing) {
+                  handleInlineEditClick();
+                  return [2
+                  /*return*/
+                  ];
+                } // Save only when Enter is pressed within input field
+
+
                 if (inputRef.current !== event.target) return [2
                 /*return*/
                 ];
@@ -6764,19 +6819,28 @@
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
+                if (!!editing) return [3
+                /*break*/
+                , 1];
+                setShowTooltip(false);
+                return [3
+                /*break*/
+                , 3];
+
+              case 1:
                 if (!(!event.relatedTarget || !inlineEditRef.current.contains(event.relatedTarget))) return [3
                 /*break*/
-                , 2];
+                , 3];
                 return [4
                 /*yield*/
                 , handleSave()];
 
-              case 1:
+              case 2:
                 _a.sent();
 
-                _a.label = 2;
+                _a.label = 3;
 
-              case 2:
+              case 3:
                 return [2
                 /*return*/
                 ];
@@ -6815,7 +6879,8 @@
         return tooltip ? jsxRuntime.jsx(DotTooltip, __assign({
           title: tooltip,
           className: viewModeClasses,
-          "data-testid": dataTestId && dataTestId + "-view-mode-tooltip-wrapper"
+          "data-testid": dataTestId && dataTestId + "-view-mode-tooltip-wrapper",
+          open: showTooltip
         }, {
           children: viewModeChildren
         }), void 0) : jsxRuntime.jsx("div", __assign({
@@ -6891,12 +6956,22 @@
         className: rootClasses,
         "data-testid": dataTestId,
         fullWidth: fullWidth,
-        onBlur: !readOnly && editing ? handleBlur : undefined,
+        onBlur: !readOnly ? handleBlur : undefined,
         onClick: !readOnly ? handleInlineEditClick : undefined,
+        onFocus: function () {
+          return handleShowTooltip(true);
+        },
+        onMouseOver: function () {
+          return handleShowTooltip(true);
+        },
+        onMouseOut: function () {
+          return handleShowTooltip(false);
+        },
         onKeyDown: !readOnly ? function (event) {
           return handleKeyPress(event);
         } : undefined,
         ref: inlineEditRef,
+        tabIndex: !readOnly ? tabIndex : undefined,
         typography: typography
       }, {
         children: editing ? renderEditMode() : renderViewMode()
@@ -8674,7 +8749,7 @@
       componentId: "sc-6mp1tz-0"
     })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    &.", " {\n      border-bottom: 1px solid ", ";\n      &:hover {\n        cursor: pointer;\n        background: ", ";\n      }\n\n      &.file-success:not(:hover) {\n        .", "-end-icon .dot-icon i:before {\n          color: ", ";\n        }\n      }\n\n      &.file-error:not(:hover) {\n        .MuiListItemText-secondary,\n        .", "-end-icon .dot-icon i:before {\n          color: ", ";\n        }\n      }\n\n      .dot-typography,\n      .file-item-text {\n        flex-grow: 2;\n        padding-left: ", "px;\n      }\n\n      .file-item-text {\n        display: flex;\n        flex-direction: column;\n\n        .MuiTypography-body2 {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      border-bottom: 1px solid ", ";\n      &:hover {\n        cursor: pointer;\n        background: ", ";\n      }\n\n      &.file-success:not(:hover) {\n        .", "-end-icon .dot-icon i:before {\n          color: ", ";\n        }\n      }\n\n      &.file-error:not(:hover) {\n        .MuiListItemText-secondary,\n        .", "-end-icon .dot-icon i:before {\n          color: ", ";\n        }\n      }\n\n      .dot-typography,\n      .file-item-text {\n        flex-grow: 2;\n        padding-left: ", "px;\n      }\n\n      .file-item-text {\n        display: flex;\n        flex-direction: column;\n\n        .MuiTypography-body2 {\n          color: ", ";\n        }\n      }\n    }\n  "])), rootClassName$4, theme.palette.layer.n100, theme.palette.layer.n50, rootClassName$4, theme.palette.secondary.main, rootClassName$4, theme.palette.error.main, theme.spacing(1), theme.palette.error.main);
+      return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    &.", " {\n      border-bottom: 1px solid ", ";\n      &:hover {\n        cursor: pointer;\n        background: ", ";\n      }\n\n      &:focus-visible {\n        background-color: ", ";\n        outline: none;\n      }\n\n      &.file-success:not(:hover, :focus-visible) .", "-end-icon {\n        i:before {\n          color: ", ";\n        }\n\n        &:focus-visible i:before {\n          color: unset;\n        }\n      }\n\n      &.file-error:not(:hover, :focus-visible) .", "-end-icon {\n        i:before,\n        .MuiListItemText-secondary {\n          color: ", ";\n        }\n\n        &:focus-visible i:before {\n          color: unset;\n        }\n      }\n\n      .dot-typography,\n      .file-item-text {\n        flex-grow: 2;\n        padding-left: ", "px;\n      }\n\n      .file-item-text {\n        display: flex;\n        flex-direction: column;\n\n        .MuiTypography-body2 {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      border-bottom: 1px solid ", ";\n      &:hover {\n        cursor: pointer;\n        background: ", ";\n      }\n\n      &:focus-visible {\n        background-color: ", ";\n        outline: none;\n      }\n\n      &.file-success:not(:hover, :focus-visible) .", "-end-icon {\n        i:before {\n          color: ", ";\n        }\n\n        &:focus-visible i:before {\n          color: unset;\n        }\n      }\n\n      &.file-error:not(:hover, :focus-visible) .", "-end-icon {\n        i:before,\n        .MuiListItemText-secondary {\n          color: ", ";\n        }\n\n        &:focus-visible i:before {\n          color: unset;\n        }\n      }\n\n      .dot-typography,\n      .file-item-text {\n        flex-grow: 2;\n        padding-left: ", "px;\n      }\n\n      .file-item-text {\n        display: flex;\n        flex-direction: column;\n\n        .MuiTypography-body2 {\n          color: ", ";\n        }\n      }\n    }\n  "])), rootClassName$4, theme.palette.layer.n100, theme.palette.layer.n50, theme.palette.layer.n100, rootClassName$4, theme.palette.secondary.main, rootClassName$4, theme.palette.error.main, theme.spacing(1), theme.palette.error.main);
     });
     var templateObject_1$4, templateObject_2$4;
 
@@ -8688,13 +8763,16 @@
           error = _b === void 0 ? false : _b,
           errorText = _a.errorText,
           file = _a.file,
-          onClick = _a.onClick;
+          onClick = _a.onClick,
+          onKeyPress = _a.onKeyPress,
+          _c = _a.tabIndex,
+          tabIndex = _c === void 0 ? 0 : _c;
       var rootClasses = useStylesWithRootClass(rootClassName$4, className, error ? 'file-error' : 'file-success');
       var defaultIcon = error ? 'error-solid' : 'check-solid';
 
-      var _c = React.useState(defaultIcon),
-          endIcon = _c[0],
-          setEndIcon = _c[1];
+      var _d = React.useState(defaultIcon),
+          endIcon = _d[0],
+          setEndIcon = _d[1];
 
       var handleItemClick = function handleItemClick(clickedFile) {
         return function (_event) {
@@ -8713,13 +8791,21 @@
         "aria-label": ariaLabel,
         className: rootClasses,
         "data-testid": dataTestId,
+        onBlur: function () {
+          return setEndIcon(defaultIcon);
+        },
         onClick: handleItemClick(file),
+        onFocus: function () {
+          return setEndIcon('delete');
+        },
         onMouseEnter: function () {
           return setEndIcon('delete');
         },
         onMouseLeave: function () {
           return setEndIcon(defaultIcon);
-        }
+        },
+        onKeyPress: onKeyPress,
+        tabIndex: tabIndex
       }, {
         children: [jsxRuntime.jsx(DotIcon, {
           "data-testid": dataTestId && dataTestId + "-start-icon",

package/lib/components/app-toolbar/AppToolbar.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 import { CommonProps } from '../CommonProps';
 import { IconButtonProps } from '../button/IconButton';
 import { ListItemProps } from '../list';
@@ -39,9 +39,13 @@ export interface AppToolbarProps extends CommonProps {
     mainMenuItems?: Array<ListItemProps>;
     /** Width of main menu drawer if mainMenu provided, defaults to 240px */
     mainMenuWidth?: number;
+    /** If true, the main menu will close if click detected off app toolbar children*/
+    menuCloseOnClickAway?: boolean;
     /** Array of nav items to be displayed on the right side */
     navItems?: Array<AppToolbarIconButtons>;
+    /** Event callback when leaving menu via tab or clicking away */
+    onClickAway?: (event: KeyboardEvent | MouseEvent) => void;
     /** URL of the page the primary logo link will go to */
     primaryLogoHref?: string;
 }
-export declare const DotAppToolbar: ({ appName, appLogo, appLogoHref, appLogoSmall, ariaLabel, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, navItems, mainMenu, mainMenuItems, mainMenuWidth, primaryLogoHref, }: AppToolbarProps) => JSX.Element;
+export declare const DotAppToolbar: ({ ariaLabel, appLogo, appLogoHref, appLogoSmall, appName, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, mainMenu, mainMenuItems, mainMenuWidth, menuCloseOnClickAway, navItems, onClickAway, primaryLogoHref, }: AppToolbarProps) => JSX.Element;

package/lib/components/app-toolbar/AppToolbar.data.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ListItemProps } from '../list';
+export interface AppToolbarWrapperProps {
+    mainMenuItems?: Array<ListItemProps>;
+    menuCloseOnClickAway?: boolean;
+    onClickAway?: (event: globalThis.KeyboardEvent | React.MouseEvent<Element, globalThis.MouseEvent>) => void;
+}
+export declare const AppToolbarTestWrapper: (props: AppToolbarWrapperProps) => JSX.Element;

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

@@ -73,6 +73,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     open?: boolean;
     /** pre-defined options available to the user */
     options?: Array<T>;
+    /** If true, the label will be persistently displayed outside of the field */
+    persistentLabel?: boolean;
     /** Placeholder text always displayed inside the input field */
     placeholder?: string;
     /** If true: popper cannot be opened, TextField is in read only mode, change is not allowed  */
@@ -90,4 +92,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { KeyboardEvent } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface ListItemFile {
     id: string | number;
@@ -11,5 +11,7 @@ export interface FileItemProps extends CommonProps {
     errorText?: string;
     file: ListItemFile;
     onClick?: (file: ListItemFile) => void;
+    onKeyPress?: (event: KeyboardEvent<Element>) => void;
+    tabIndex?: number;
 }
-export declare const DotFileListItem: ({ ariaLabel, className, "data-testid": dataTestId, deleteFile, disableDelete, error, errorText, file, onClick, }: FileItemProps) => JSX.Element;
+export declare const DotFileListItem: ({ ariaLabel, className, "data-testid": dataTestId, deleteFile, disableDelete, error, errorText, file, onClick, onKeyPress, tabIndex, }: FileItemProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { FileUploadProps } from './';
+import { FileUploadProps, MappedListItemFile } from './';
 export interface CustomFileUploadArgs {
+    alreadyUploadedFiles?: MappedListItemFile[];
     args: FileUploadProps;
 }
-export declare const CustomFileUpload: ({ args }: CustomFileUploadArgs) => JSX.Element;
+export declare const CustomFileUpload: ({ args, alreadyUploadedFiles, }: CustomFileUploadArgs) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { FileRejection } from 'react-dropzone';
-import { DropzoneContentArgs, ParseListItemArgs, UploadedFilesListArgs } from './models';
+import { DropzoneContentArgs, FileUploadError, ParseListItemArgs, UploadedFilesListArgs } from './models';
 export declare const renderMaxSizeMessage: (maxSizeMB: number) => ReactNode;
 export declare const renderMaxFilesMessage: (maxFiles: number, maxFilesClasses: string) => ReactNode;
 export declare const renderSelectFilesButton: (isUploadDisabled: boolean, onButtonClick: () => void) => ReactNode;
@@ -21,3 +21,4 @@ export declare const joinAcceptedAndRejectedFiles: (filesAccepted: File[], files
     file: File;
     errors: any[];
 }[];
+export declare const getErrorMessagesForDisplay: (errors: FileUploadError[]) => string;

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

@@ -21,6 +21,8 @@ export interface InlineEditProps extends CommonProps {
     readOnly?: boolean;
     /** If true, when starting edit it will select all text in the input */
     selectTextOnEdit?: boolean;
+    /** tab order for the inline edit */
+    tabIndex?: number;
     /** Tooltip text displayed on hover */
     tooltip?: string;
     /** Typography variant to be used */
@@ -31,4 +33,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, selectTextOnEdit, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export interface InputLabelProps {
+import { CommonProps } from '../CommonProps';
+export interface InputLabelProps extends CommonProps {
     /** If true, the input will be disabled. */
     disabled?: boolean;
     /** If true, the label will be displayed in an error state. */
@@ -14,4 +15,4 @@ export interface InputLabelProps {
     /** If true, the label is displayed as required and the input element` will be required. */
     required?: boolean;
 }
-export declare const DotInputLabel: ({ disabled, error, id, label, required, }: InputLabelProps) => JSX.Element;
+export declare const DotInputLabel: ({ "data-testid": dataTestId, disabled, error, id, label, required, }: InputLabelProps) => JSX.Element;

package/package.json

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