@digital-ai/dot-components 1.21.2 → 1.21.3

package/CHANGE_LOG.md

@@ -1,5 +1,28 @@
 # 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)
@@ -161,6 +184,7 @@
 
 - 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)
 
@@ -171,10 +195,6 @@
 - `DotButtonToggle`: Button size is not respected after tooltip change [\#1170](https://github.com/digital-ai/dot-components/issues/1170)
 - D-21287: `DotButtonToggle`: Button size is not respected after tooltip change [\#1171](https://github.com/digital-ai/dot-components/pull/1171) ([dmiletic85](https://github.com/dmiletic85))
 
-**Merged pull requests:**
-
-- S-84160: `InputText` and `InputSelect` fields e2e [\#1177](https://github.com/digital-ai/dot-components/pull/1177) ([CWSites](https://github.com/CWSites))
-
 ## [1.17.0](https://github.com/digital-ai/dot-components/tree/1.17.0) (05/18/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.1...1.17.0)

package/index.esm.js

@@ -2681,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,
@@ -2694,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);
@@ -2757,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,
@@ -2843,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';
@@ -2853,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';
@@ -2877,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({
@@ -2885,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. */
 
@@ -3077,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,
@@ -3107,6 +3152,7 @@ const DotAutoComplete = ({
   onOpen,
   open,
   options,
+  persistentLabel,
   placeholder,
   readOnly: _readOnly = false,
   renderOption,
@@ -3365,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,
@@ -3834,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,
@@ -4933,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 = ({

package/index.umd.js

@@ -2921,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,
@@ -2936,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;
@@ -3007,7 +3010,8 @@
           }, index)
         }), index);
       });
-      return jsxRuntime.jsxs(StyledAppToolbar, __assign({
+
+      var appToolbar = jsxRuntime.jsxs(StyledAppToolbar, __assign({
         "aria-label": ariaLabel,
         className: rootClasses,
         "data-testid": dataTestId,
@@ -3097,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';
@@ -3107,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;
 
@@ -3134,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;
 
@@ -3144,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;
 
@@ -3362,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,
@@ -3400,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,
@@ -3682,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,
@@ -4138,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;
 
@@ -5292,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) {

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/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.2",
+  "version": "1.21.3",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [