@digital-ai/dot-components 1.13.0 → 1.14.0

package/CHANGE_LOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.14.0](https://github.com/digital-ai/dot-components/tree/1.14.0) (04/01/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.13.0...1.14.0)
+
+**Features:**
+
+- `InlineEdit` Support for different text in view/edit modes [\#1103](https://github.com/digital-ai/dot-components/issues/1103)
+- S-83748: `InlineEdit`: Support for different text in view/edit modes [\#1105](https://github.com/digital-ai/dot-components/pull/1105) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- DotFileUpload - Setting maxFile limit to 1 allows to upload more than 1 files [\#1096](https://github.com/digital-ai/dot-components/issues/1096)
+- We lost scrollbar for sidenav nested drawers [\#1061](https://github.com/digital-ai/dot-components/issues/1061)
+- D-20516: `DotFileUpload` - Setting maxFile limit to 1 allows to upload more than 1 files [\#1101](https://github.com/digital-ai/dot-components/pull/1101) ([dmiletic85](https://github.com/dmiletic85))
+- D-20334: Add scroll to nested drawer [\#1062](https://github.com/digital-ai/dot-components/pull/1062) ([s-zimm](https://github.com/s-zimm))
+
 ## [1.13.0](https://github.com/digital-ai/dot-components/tree/1.13.0) (03/28/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.12.0...1.13.0)
@@ -33,7 +49,6 @@
 - S-82899: `DotCheckbox`: Add more Storybook examples [\#1090](https://github.com/digital-ai/dot-components/pull/1090) ([dmiletic85](https://github.com/dmiletic85))
 - S-82453: `TruncateWithTooltip`: Create new component [\#1072](https://github.com/digital-ai/dot-components/pull/1072) ([dmiletic85](https://github.com/dmiletic85))
 - S-82519: `Snackbar` Allow positioning [\#1064](https://github.com/digital-ai/dot-components/pull/1064) ([dmiletic85](https://github.com/dmiletic85))
-- S-82617: `DotInputText` Expose mouse up event [\#1063](https://github.com/digital-ai/dot-components/pull/1063) ([dmiletic85](https://github.com/dmiletic85))
 - S-76904: `InlineEdit` improvements [\#1053](https://github.com/digital-ai/dot-components/pull/1053) ([dmiletic85](https://github.com/dmiletic85))
 - S-82059: `DraggableList`: Create and export the component [\#1003](https://github.com/digital-ai/dot-components/pull/1003) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -59,6 +74,10 @@
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.11.2...1.11.3)
 
+**Features:**
+
+- S-82617: `DotInputText` Expose mouse up event [\#1063](https://github.com/digital-ai/dot-components/pull/1063) ([dmiletic85](https://github.com/dmiletic85))
+
 **Merged pull requests:**
 
 - March 16 2022 Agility icons [\#1066](https://github.com/digital-ai/dot-components/pull/1066) ([BojanKocijan](https://github.com/BojanKocijan))
@@ -315,6 +334,7 @@
 
 **Features:**
 
+- S-80871: `Sidebar` Changes on back arrow [\#896](https://github.com/digital-ai/dot-components/pull/896) ([dmiletic85](https://github.com/dmiletic85))
 - S-77210: Component - Drawer [\#893](https://github.com/digital-ai/dot-components/pull/893) ([monapatel91](https://github.com/monapatel91))
 
 **Fixed bugs:**
@@ -347,7 +367,6 @@
 - `sidebar` Changes on back arrow [\#890](https://github.com/digital-ai/dot-components/issues/890)
 - `Breadcrumbs` Display tooltip on last item \(on hover\) when it is clipped with ellipsis [\#878](https://github.com/digital-ai/dot-components/issues/878)
 - S-80939: `Menu`: Add option to customize item's height [\#902](https://github.com/digital-ai/dot-components/pull/902) ([dmiletic85](https://github.com/dmiletic85))
-- S-80871: `Sidebar` Changes on back arrow [\#896](https://github.com/digital-ai/dot-components/pull/896) ([dmiletic85](https://github.com/dmiletic85))
 - S-80855: Display tooltip on last breadcrumb item \(on hover\) when it is clipped with ellipsis [\#883](https://github.com/digital-ai/dot-components/pull/883) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**

package/index.esm.js

@@ -2259,7 +2259,7 @@ const StyledSidebar = styled.aside.withConfig({
   componentId: "l3atb4-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-shadow:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;padding:", ";-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;margin-bottom:", ";padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", "px;}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid;border-bottom-color:", ";margin:", ";.dot-typography{margin:0;}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", "px;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);padding-top:", ";}.MuiTypography-root.MuiTypography-subtitle2{border:", ";color:", ";font-size:", ";line-height:40px;margin:", ";padding:", ";}.", "{margin:0;padding-left:", "px;}}.dot-list-item{height:", ";padding:0;margin-bottom:", ";&.MuiListItem-root.Mui-selected,&.MuiListItem-root.Mui-selected:hover,&:hover{background-color:", ";}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&:hover,&:active,&:focus{.dot-typography,.dot-icon i.dot-i:before{color:", ";}}&.open{background-color:", ";border:", ";border-radius:", ";&:hover{background-color:", ";}}.MuiTouchRipple-root{display:", ";}.dot-list-item-link .dot-icon{margin-right:", "px;}.dot-icon{border-radius:50%;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", "px;text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", "px;p.desc{white-space:nowrap;}.company-name{margin-top:", "px;}.d-icon{display:none;}}&.collapsed{overflow:hidden;padding:", ";width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$I, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && `${theme.spacing(2)}px`, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? `1px solid ${theme.palette.agilityInterface.sideNavHoverBorder}` : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0)));
+}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-shadow:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;padding:", ";-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;margin-bottom:", ";padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", "px;}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid;border-bottom-color:", ";margin:", ";.dot-typography{margin:0;}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", "px;overflow-y:scroll;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);padding-top:", ";}.MuiTypography-root.MuiTypography-subtitle2{border:", ";color:", ";font-size:", ";line-height:40px;margin:", ";padding:", ";}.", "{margin:0;padding-left:", "px;}}.dot-list-item{height:", ";padding:0;margin-bottom:", ";&.MuiListItem-root.Mui-selected,&.MuiListItem-root.Mui-selected:hover,&:hover{background-color:", ";}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&:hover,&:active,&:focus{.dot-typography,.dot-icon i.dot-i:before{color:", ";}}&.open{background-color:", ";border:", ";border-radius:", ";&:hover{background-color:", ";}}.MuiTouchRipple-root{display:", ";}.dot-list-item-link .dot-icon{margin-right:", "px;}.dot-icon{border-radius:50%;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", "px;text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", "px;p.desc{white-space:nowrap;}.company-name{margin-top:", "px;}.d-icon{display:none;}}&.collapsed{overflow:hidden;padding:", ";width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$I, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && `${theme.spacing(2)}px`, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? `1px solid ${theme.palette.agilityInterface.sideNavHoverBorder}` : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0)));
 
 const Brand = ({
   brandDesc
@@ -5602,6 +5602,38 @@ const getWarningAdornment = () => {
     iconId: "error-solid"
   })));
 };
+const applyBindings = (bindings, inlineEditText) => {
+  if (!bindings || !bindings.length || !inlineEditText) return;
+  let text = inlineEditText;
+  let boundNode = [];
+  bindings.forEach((binding, index) => {
+    const {
+      binding: stringBinding,
+      className = null,
+      value
+    } = binding;
+    let bindingStringIndex = text.indexOf(stringBinding);
+    let key = 0;
+
+    while (bindingStringIndex >= 0) {
+      // Since key is needed only for bindings with className,
+      // increment key value only if className value is defined
+      className && key++;
+      const nextStartingIndex = bindingStringIndex + stringBinding.length;
+      const previousText = text.substr(0, bindingStringIndex);
+      text = text.substr(nextStartingIndex, text.length);
+      bindingStringIndex = text.indexOf(stringBinding); // Add nodes to array
+
+      boundNode = [boundNode, previousText, className ? /*#__PURE__*/React__default.createElement("span", {
+        className: className,
+        key: `${index}-${key}`
+      }, value) : value];
+    }
+  }); // Add remainder of the text to the node
+
+  boundNode = [boundNode, text];
+  return boundNode;
+};
 
 /**
  * @experimental This component is still in development
@@ -5609,6 +5641,7 @@ const getWarningAdornment = () => {
 
 const DotInlineEdit = ({
   ariaLabel,
+  bindings,
   charactersLimit,
   className,
   'data-testid': dataTestId,
@@ -5642,11 +5675,14 @@ const DotInlineEdit = ({
     var _a;
 
     if (!inputValue) return;
-    const isSuccess = yield onChange(inputValue);
 
-    if (!isSuccess) {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      return;
+    if (onChange) {
+      const isSuccess = yield onChange(inputValue);
+
+      if (!isSuccess) {
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        return;
+      }
     }
 
     setEditing(false);
@@ -5704,7 +5740,7 @@ const DotInlineEdit = ({
       className: "dot-view-mode-typography",
       "data-testid": dataTestId && `${dataTestId}-view-mode-typography`,
       variant: _typography
-    }, inputValue), /*#__PURE__*/React__default.createElement(DotIcon, {
+    }, bindings ? applyBindings(bindings, inputValue) : inputValue), /*#__PURE__*/React__default.createElement(DotIcon, {
       className: "dot-edit-icon",
       "data-testid": dataTestId && `${dataTestId}-edit-icon`,
       iconId: "edit"
@@ -7106,13 +7142,13 @@ const StyledFileUploadContainer = styled.div.withConfig({
   componentId: "sc-1q8bcxy-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:", ";}}}}"], containerClassName, listItemRootClass, theme.palette.layer.n100, theme.palette.layer.n50, listItemRootClass, theme.palette.secondary.main, listItemRootClass, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
+}) => css(["&.", "{.dot-max-files-message.dot-max-files-reached{color:", ";}.", "{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:", ";}}}}"], containerClassName, theme.palette.error[500], listItemRootClass, theme.palette.layer.n100, theme.palette.layer.n50, listItemRootClass, theme.palette.secondary.main, listItemRootClass, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
 const StyledFileUpload = styled.div.withConfig({
   displayName: "FileUploadstyles__StyledFileUpload",
   componentId: "sc-1q8bcxy-1"
 })(["", ""], ({
   theme
-}) => css(["&.", ".", "{align-items:center;background:", ";border:2px dashed ", ";border-radius:4px;color:", ";display:flex;flex-direction:column;flex-wrap:wrap;height:240px;justify-content:center;padding:", ";margin-bottom:", "px;&.disabled .dot-typography{color:", ";}.dot-icon{color:", ";font-size:100px;i.dot-i{height:100px;}}}"], rootClassName$4, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100));
+}) => css(["&.", ".", "{align-items:center;background:", ";border:2px dashed ", ";border-radius:4px;color:", ";display:flex;flex-direction:column;flex-wrap:wrap;height:240px;justify-content:center;padding:", ";margin-bottom:", "px;text-align:center;&.disabled .dot-typography{color:", ";}.dot-icon{color:", ";font-size:100px;i.dot-i{height:100px;}}}"], rootClassName$4, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100));
 
 const DotFileListItem = ({
   ariaLabel,
@@ -7147,6 +7183,40 @@ const DotFileListItem = ({
   }));
 };
 
+const renderMaxSizeMessage = maxSizeMB => /*#__PURE__*/React__default.createElement(DotTypography, {
+  variant: "body2"
+}, "File size should not exceed ", maxSizeMB, "MB.");
+const renderMaxFilesMessage = (maxFiles, maxFilesClasses) => /*#__PURE__*/React__default.createElement(DotTypography, {
+  className: maxFilesClasses,
+  variant: "body2"
+}, maxFiles, " files are the maximum number of files you can upload.");
+const renderSelectFilesButton = (isUploadDisabled, onButtonClick) => /*#__PURE__*/React__default.createElement(DotButton, {
+  disabled: isUploadDisabled,
+  onClick: onButtonClick
+}, "Select file(s)");
+const renderActiveDragArea = () => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotIcon, {
+  iconId: "upload-file"
+}), /*#__PURE__*/React__default.createElement(DotTypography, {
+  variant: "h3"
+}, "Drop the file(s) here ..."));
+const renderDragAndDropArea = (isUploadDisabled, onSelectButtonClick) => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotIcon, {
+  iconId: "upload-file"
+}), /*#__PURE__*/React__default.createElement(DotTypography, {
+  variant: "h3"
+}, "Drag and drop your file(s) here ", /*#__PURE__*/React__default.createElement("br", null), " or"), renderSelectFilesButton(isUploadDisabled, onSelectButtonClick));
+const renderDropzoneContent = ({
+  buttonOnly,
+  isDragActive,
+  isUploadDisabled,
+  open
+}) => {
+  if (buttonOnly) {
+    return renderSelectFilesButton(isUploadDisabled, open);
+  } else {
+    return isDragActive ? renderActiveDragArea() : renderDragAndDropArea(isUploadDisabled, open);
+  }
+};
+const getUploadedFilesList = (uploadedFiles, maxSize, onFileDelete) => uploadedFiles.map(file => parseListItem(onFileDelete, file, maxSize));
 const parseListItem = (deleteFile, fileToBeParsed, maxSize) => {
   const fileErrors = fileToBeParsed.errors;
   const parsedFile = fileToBeParsed.file;
@@ -7160,8 +7230,6 @@ const parseListItem = (deleteFile, fileToBeParsed, maxSize) => {
           return `File exceeds ${maxSize}MB`;
 
         case 'file-invalid-type':
-          return e.message;
-
         case 'too-many-files':
           return e.message;
 
@@ -7177,8 +7245,7 @@ const parseListItem = (deleteFile, fileToBeParsed, maxSize) => {
       deleteFile: deleteFile,
       error: hasErrors,
       errorText: errorText,
-      file: parsedFile,
-      key: CreateUUID()
+      file: parsedFile
     })
   };
 };
@@ -7195,7 +7262,12 @@ const DotFileUpload = ({
   onChange,
   onDragEnter
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$4, className, !_buttonOnly ? dropZoneClassName : '', disabled ? 'disabled' : '');
+  const [uploadedFiles, setUploadedFiles] = useState([]);
+  const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
+  const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
+  const rootClasses = useStylesWithRootClass(rootClassName$4, className, !_buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
+  const allowMultiple = maxFiles === undefined || maxFiles > 1;
   const {
     acceptedFiles,
     fileRejections,
@@ -7205,13 +7277,12 @@ const DotFileUpload = ({
     open
   } = useDropzone({
     accept,
-    disabled,
-    maxFiles,
+    disabled: isUploadDisabled,
     maxSize: maxSize * 1000000,
+    multiple: allowMultiple,
     noClick: true,
     onDragEnter
   });
-  const [uploadedFiles, setUploadedFiles] = useState([]);
   useEffect(() => {
     onChange(uploadedFiles);
   }, [uploadedFiles]);
@@ -7229,7 +7300,16 @@ const DotFileUpload = ({
   };
 
   const parseFiles = () => {
-    // map through accepted files and make them same shape as rejected files
+    const totalFilesToUpload = uploadedFiles.length + acceptedFiles.length + fileRejections.length;
+    const isMaxFilesReached = maxFiles && totalFilesToUpload > maxFiles;
+
+    if (isMaxFilesReached) {
+      setHasMaxFilesError(true);
+      return;
+    }
+
+    setHasMaxFilesError(false); // map through accepted files and make them same shape as rejected files
+
     const mappedFiles = acceptedFiles.map(value => ({
       file: value,
       errors: []
@@ -7240,45 +7320,21 @@ const DotFileUpload = ({
   useEffect(() => {
     parseFiles();
   }, [acceptedFiles, fileRejections]);
-  const maxFilesMessage = /*#__PURE__*/React__default.createElement(DotTypography, {
-    variant: "body2"
-  }, maxFiles, " files are the maximum number of files you can upload at once.");
-  const maxSizeMessage = /*#__PURE__*/React__default.createElement(DotTypography, {
-    variant: "body2"
-  }, "File size should not exceed ", maxSize, "MB.");
-
-  const dropzoneContent = () => {
-    if (_buttonOnly) {
-      return /*#__PURE__*/React__default.createElement(DotButton, {
-        disabled: disabled,
-        onClick: open
-      }, "Select file(s)");
-    } else {
-      return isDragActive ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotIcon, {
-        iconId: "upload-file"
-      }), /*#__PURE__*/React__default.createElement(DotTypography, {
-        variant: "h3"
-      }, "Drop the file(s) here ...")) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotIcon, {
-        iconId: "upload-file"
-      }), /*#__PURE__*/React__default.createElement(DotTypography, {
-        variant: "h3"
-      }, "Drag and drop your file(s) here"), /*#__PURE__*/React__default.createElement(DotTypography, {
-        variant: "h3"
-      }, "or"), /*#__PURE__*/React__default.createElement(DotButton, {
-        disabled: disabled,
-        onClick: open
-      }, "Select file(s)"));
-    }
-  };
-
+  const uploadedFilesList = getUploadedFilesList(uploadedFiles, maxSize, deleteFile);
   return /*#__PURE__*/React__default.createElement(StyledFileUploadContainer, {
     className: containerClassName
   }, /*#__PURE__*/React__default.createElement(StyledFileUpload, Object.assign({}, getRootProps(), {
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId
-  }), /*#__PURE__*/React__default.createElement("input", Object.assign({}, getInputProps())), dropzoneContent()), maxSize && maxSizeMessage, maxFiles && maxFilesMessage, /*#__PURE__*/React__default.createElement(DotList, {
-    items: uploadedFiles.map(file => parseListItem(deleteFile, file, maxSize)),
+  }), /*#__PURE__*/React__default.createElement("input", Object.assign({}, getInputProps())), renderDropzoneContent({
+    buttonOnly: _buttonOnly,
+    isDragActive,
+    isUploadDisabled,
+    open
+  })), maxSize && renderMaxSizeMessage(maxSize), maxFiles && renderMaxFilesMessage(maxFiles, maxFilesClasses), /*#__PURE__*/React__default.createElement(DotList, {
+    "data-testid": dataTestId && `${dataTestId}-file-list`,
+    items: uploadedFilesList,
     width: "100%"
   }));
 };

package/index.umd.js

@@ -2460,7 +2460,7 @@
       componentId: "l3atb4-0"
     })(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    &.", " {\n      align-items: stretch;\n      background: ", ";\n      border-width: 0 1px;\n      border-style: solid;\n      border-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      letter-spacing: 0.01em;\n      padding: ", ";\n      -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n      header {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n        height: 40px;\n        flex-shrink: 0;\n        overflow: hidden;\n        margin-bottom: ", ";\n        padding: ", ";\n        white-space: nowrap;\n\n        &.app-logo {\n          box-sizing: border-box;\n\n          .dot-app-logo {\n            svg,\n            img {\n              max-width: 100%;\n            }\n          }\n        }\n\n        .dot-avatar {\n          margin-right: ", "px;\n        }\n      }\n\n      .go-back {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n\n        .go-back-button {\n          margin: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus-visible {\n            box-shadow: 0 0 0 2px ", ",\n              0 0 0 4px ", ";\n          }\n        }\n      }\n\n      hr.MuiDivider-root {\n        background-color: ", ";\n        margin: ", ";\n      }\n\n      .MuiListSubheader-root {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        margin: ", ";\n\n        .dot-typography {\n          margin: 0;\n        }\n      }\n\n      ul.side-nav {\n        background: transparent;\n        flex-grow: 2;\n        overflow-x: hidden;\n        overflow-y: auto;\n        padding: 0;\n        width: auto;\n\n        .dot-nested-list {\n          background: transparent;\n        }\n\n        .", " {\n          .dot-drawer-paper {\n            padding: ", "px;\n            border-right: 1px solid\n              ", ";\n            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n            padding-top: ", ";\n          }\n\n          .MuiTypography-root.MuiTypography-subtitle2 {\n            border: ", ";\n            color: ", ";\n            font-size: ", ";\n            line-height: 40px;\n            margin: ", ";\n            padding: ", ";\n          }\n\n          .", " {\n            margin: 0;\n            padding-left: ", "px;\n          }\n        }\n\n        .dot-list-item {\n          height: ", ";\n          padding: 0;\n          margin-bottom: ", ";\n\n          &.MuiListItem-root.Mui-selected,\n          &.MuiListItem-root.Mui-selected:hover,\n          &:hover {\n            background-color: ", ";\n          }\n\n          &.Mui-focusVisible {\n            box-shadow: inset 0 0 0 2px ", ";\n            border: 2px solid ", ";\n          }\n\n          &:hover,\n          &:active,\n          &:focus {\n            .dot-typography,\n            .dot-icon i.dot-i:before {\n              color: ", ";\n            }\n          }\n\n          &.open {\n            background-color: ", ";\n            border: ", ";\n            border-radius: ", ";\n\n            &:hover {\n              background-color: ", ";\n            }\n          }\n\n          .MuiTouchRipple-root {\n            display: ", ";\n          }\n\n          .dot-list-item-link .dot-icon {\n            margin-right: ", "px;\n          }\n\n          .dot-icon {\n            border-radius: 50%;\n            height: 40px;\n            margin: ", ";\n            width: 40px;\n          }\n\n          .dot-typography {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      .toggle-nav {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        padding: ", "px;\n        text-align: right;\n\n        .dot-icon {\n          transform: rotate(0deg);\n          -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n        }\n      }\n\n      .powered-by {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        color: ", ";\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n        font-size: 12px;\n        overflow: hidden;\n        padding: ", "px;\n\n        p.desc {\n          white-space: nowrap;\n        }\n\n        .company-name {\n          margin-top: ", "px;\n        }\n\n        .d-icon {\n          display: none;\n        }\n      }\n\n      &.collapsed {\n        overflow: hidden;\n        padding: ", ";\n        width: 58px;\n        -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n        li.MuiListSubheader-root .dot-typography,\n        .go-back .MuiTypography-root,\n        .MuiListItem-divider .dot-list-item-link,\n        .child,\n        .powered-by .company-name,\n        .powered-by p.desc {\n          display: none;\n        }\n\n        .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n        .powered-by .d-icon {\n          display: block;\n        }\n\n        header .dot-app-logo {\n          text-align: center;\n        }\n\n        ul.side-nav {\n          width: 56px;\n          .dot-list-item {\n            margin-left: 0;\n          }\n\n          .toggle-nav {\n            align-self: center;\n          }\n        }\n\n        .powered-by {\n          align-items: center;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      align-items: stretch;\n      background: ", ";\n      border-width: 0 1px;\n      border-style: solid;\n      border-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      letter-spacing: 0.01em;\n      padding: ", ";\n      -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n      header {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n        height: 40px;\n        flex-shrink: 0;\n        overflow: hidden;\n        margin-bottom: ", ";\n        padding: ", ";\n        white-space: nowrap;\n\n        &.app-logo {\n          box-sizing: border-box;\n\n          .dot-app-logo {\n            svg,\n            img {\n              max-width: 100%;\n            }\n          }\n        }\n\n        .dot-avatar {\n          margin-right: ", "px;\n        }\n      }\n\n      .go-back {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n\n        .go-back-button {\n          margin: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus-visible {\n            box-shadow: 0 0 0 2px ", ",\n              0 0 0 4px ", ";\n          }\n        }\n      }\n\n      hr.MuiDivider-root {\n        background-color: ", ";\n        margin: ", ";\n      }\n\n      .MuiListSubheader-root {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        margin: ", ";\n\n        .dot-typography {\n          margin: 0;\n        }\n      }\n\n      ul.side-nav {\n        background: transparent;\n        flex-grow: 2;\n        overflow-x: hidden;\n        overflow-y: auto;\n        padding: 0;\n        width: auto;\n\n        .dot-nested-list {\n          background: transparent;\n        }\n\n        .", " {\n          .dot-drawer-paper {\n            padding: ", "px;\n            border-right: 1px solid\n              ", ";\n            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n            padding-top: ", ";\n          }\n\n          .MuiTypography-root.MuiTypography-subtitle2 {\n            border: ", ";\n            color: ", ";\n            font-size: ", ";\n            line-height: 40px;\n            margin: ", ";\n            padding: ", ";\n          }\n\n          .", " {\n            margin: 0;\n            padding-left: ", "px;\n          }\n        }\n\n        .dot-list-item {\n          height: ", ";\n          padding: 0;\n          margin-bottom: ", ";\n\n          &.MuiListItem-root.Mui-selected,\n          &.MuiListItem-root.Mui-selected:hover,\n          &:hover {\n            background-color: ", ";\n          }\n\n          &.Mui-focusVisible {\n            box-shadow: inset 0 0 0 2px ", ";\n            border: 2px solid ", ";\n          }\n\n          &:hover,\n          &:active,\n          &:focus {\n            .dot-typography,\n            .dot-icon i.dot-i:before {\n              color: ", ";\n            }\n          }\n\n          &.open {\n            background-color: ", ";\n            border: ", ";\n            border-radius: ", ";\n\n            &:hover {\n              background-color: ", ";\n            }\n          }\n\n          .MuiTouchRipple-root {\n            display: ", ";\n          }\n\n          .dot-list-item-link .dot-icon {\n            margin-right: ", "px;\n          }\n\n          .dot-icon {\n            border-radius: 50%;\n            height: 40px;\n            margin: ", ";\n            width: 40px;\n          }\n\n          .dot-typography {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      .toggle-nav {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        padding: ", "px;\n        text-align: right;\n\n        .dot-icon {\n          transform: rotate(0deg);\n          -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n        }\n      }\n\n      .powered-by {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        color: ", ";\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n        font-size: 12px;\n        overflow: hidden;\n        padding: ", "px;\n\n        p.desc {\n          white-space: nowrap;\n        }\n\n        .company-name {\n          margin-top: ", "px;\n        }\n\n        .d-icon {\n          display: none;\n        }\n      }\n\n      &.collapsed {\n        overflow: hidden;\n        padding: ", ";\n        width: 58px;\n        -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n        li.MuiListSubheader-root .dot-typography,\n        .go-back .MuiTypography-root,\n        .MuiListItem-divider .dot-list-item-link,\n        .child,\n        .powered-by .company-name,\n        .powered-by p.desc {\n          display: none;\n        }\n\n        .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n        .powered-by .d-icon {\n          display: block;\n        }\n\n        header .dot-app-logo {\n          text-align: center;\n        }\n\n        ul.side-nav {\n          width: 56px;\n          .dot-list-item {\n            margin-left: 0;\n          }\n\n          .toggle-nav {\n            align-self: center;\n          }\n        }\n\n        .powered-by {\n          align-items: center;\n        }\n      }\n    }\n  "])), rootClassName$I, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && theme.spacing(2) + "px", theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? "1px solid " + theme.palette.agilityInterface.sideNavHoverBorder : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0));
+      return styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    &.", " {\n      align-items: stretch;\n      background: ", ";\n      border-width: 0 1px;\n      border-style: solid;\n      border-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      letter-spacing: 0.01em;\n      padding: ", ";\n      -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n      header {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n        height: 40px;\n        flex-shrink: 0;\n        overflow: hidden;\n        margin-bottom: ", ";\n        padding: ", ";\n        white-space: nowrap;\n\n        &.app-logo {\n          box-sizing: border-box;\n\n          .dot-app-logo {\n            svg,\n            img {\n              max-width: 100%;\n            }\n          }\n        }\n\n        .dot-avatar {\n          margin-right: ", "px;\n        }\n      }\n\n      .go-back {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n\n        .go-back-button {\n          margin: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus-visible {\n            box-shadow: 0 0 0 2px ", ",\n              0 0 0 4px ", ";\n          }\n        }\n      }\n\n      hr.MuiDivider-root {\n        background-color: ", ";\n        margin: ", ";\n      }\n\n      .MuiListSubheader-root {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        margin: ", ";\n\n        .dot-typography {\n          margin: 0;\n        }\n      }\n\n      ul.side-nav {\n        background: transparent;\n        flex-grow: 2;\n        overflow-x: hidden;\n        overflow-y: auto;\n        padding: 0;\n        width: auto;\n\n        .dot-nested-list {\n          background: transparent;\n        }\n\n        .", " {\n          .dot-drawer-paper {\n            padding: ", "px;\n            overflow-y: scroll;\n            border-right: 1px solid\n              ", ";\n            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n            padding-top: ", ";\n          }\n\n          .MuiTypography-root.MuiTypography-subtitle2 {\n            border: ", ";\n            color: ", ";\n            font-size: ", ";\n            line-height: 40px;\n            margin: ", ";\n            padding: ", ";\n          }\n\n          .", " {\n            margin: 0;\n            padding-left: ", "px;\n          }\n        }\n\n        .dot-list-item {\n          height: ", ";\n          padding: 0;\n          margin-bottom: ", ";\n\n          &.MuiListItem-root.Mui-selected,\n          &.MuiListItem-root.Mui-selected:hover,\n          &:hover {\n            background-color: ", ";\n          }\n\n          &.Mui-focusVisible {\n            box-shadow: inset 0 0 0 2px ", ";\n            border: 2px solid ", ";\n          }\n\n          &:hover,\n          &:active,\n          &:focus {\n            .dot-typography,\n            .dot-icon i.dot-i:before {\n              color: ", ";\n            }\n          }\n\n          &.open {\n            background-color: ", ";\n            border: ", ";\n            border-radius: ", ";\n\n            &:hover {\n              background-color: ", ";\n            }\n          }\n\n          .MuiTouchRipple-root {\n            display: ", ";\n          }\n\n          .dot-list-item-link .dot-icon {\n            margin-right: ", "px;\n          }\n\n          .dot-icon {\n            border-radius: 50%;\n            height: 40px;\n            margin: ", ";\n            width: 40px;\n          }\n\n          .dot-typography {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      .toggle-nav {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        padding: ", "px;\n        text-align: right;\n\n        .dot-icon {\n          transform: rotate(0deg);\n          -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n        }\n      }\n\n      .powered-by {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        color: ", ";\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n        font-size: 12px;\n        overflow: hidden;\n        padding: ", "px;\n\n        p.desc {\n          white-space: nowrap;\n        }\n\n        .company-name {\n          margin-top: ", "px;\n        }\n\n        .d-icon {\n          display: none;\n        }\n      }\n\n      &.collapsed {\n        overflow: hidden;\n        padding: ", ";\n        width: 58px;\n        -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n        li.MuiListSubheader-root .dot-typography,\n        .go-back .MuiTypography-root,\n        .MuiListItem-divider .dot-list-item-link,\n        .child,\n        .powered-by .company-name,\n        .powered-by p.desc {\n          display: none;\n        }\n\n        .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n        .powered-by .d-icon {\n          display: block;\n        }\n\n        header .dot-app-logo {\n          text-align: center;\n        }\n\n        ul.side-nav {\n          width: 56px;\n          .dot-list-item {\n            margin-left: 0;\n          }\n\n          .toggle-nav {\n            align-self: center;\n          }\n        }\n\n        .powered-by {\n          align-items: center;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      align-items: stretch;\n      background: ", ";\n      border-width: 0 1px;\n      border-style: solid;\n      border-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      letter-spacing: 0.01em;\n      padding: ", ";\n      -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n      header {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n        height: 40px;\n        flex-shrink: 0;\n        overflow: hidden;\n        margin-bottom: ", ";\n        padding: ", ";\n        white-space: nowrap;\n\n        &.app-logo {\n          box-sizing: border-box;\n\n          .dot-app-logo {\n            svg,\n            img {\n              max-width: 100%;\n            }\n          }\n        }\n\n        .dot-avatar {\n          margin-right: ", "px;\n        }\n      }\n\n      .go-back {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n\n        .go-back-button {\n          margin: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus-visible {\n            box-shadow: 0 0 0 2px ", ",\n              0 0 0 4px ", ";\n          }\n        }\n      }\n\n      hr.MuiDivider-root {\n        background-color: ", ";\n        margin: ", ";\n      }\n\n      .MuiListSubheader-root {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        margin: ", ";\n\n        .dot-typography {\n          margin: 0;\n        }\n      }\n\n      ul.side-nav {\n        background: transparent;\n        flex-grow: 2;\n        overflow-x: hidden;\n        overflow-y: auto;\n        padding: 0;\n        width: auto;\n\n        .dot-nested-list {\n          background: transparent;\n        }\n\n        .", " {\n          .dot-drawer-paper {\n            padding: ", "px;\n            overflow-y: scroll;\n            border-right: 1px solid\n              ", ";\n            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n            padding-top: ", ";\n          }\n\n          .MuiTypography-root.MuiTypography-subtitle2 {\n            border: ", ";\n            color: ", ";\n            font-size: ", ";\n            line-height: 40px;\n            margin: ", ";\n            padding: ", ";\n          }\n\n          .", " {\n            margin: 0;\n            padding-left: ", "px;\n          }\n        }\n\n        .dot-list-item {\n          height: ", ";\n          padding: 0;\n          margin-bottom: ", ";\n\n          &.MuiListItem-root.Mui-selected,\n          &.MuiListItem-root.Mui-selected:hover,\n          &:hover {\n            background-color: ", ";\n          }\n\n          &.Mui-focusVisible {\n            box-shadow: inset 0 0 0 2px ", ";\n            border: 2px solid ", ";\n          }\n\n          &:hover,\n          &:active,\n          &:focus {\n            .dot-typography,\n            .dot-icon i.dot-i:before {\n              color: ", ";\n            }\n          }\n\n          &.open {\n            background-color: ", ";\n            border: ", ";\n            border-radius: ", ";\n\n            &:hover {\n              background-color: ", ";\n            }\n          }\n\n          .MuiTouchRipple-root {\n            display: ", ";\n          }\n\n          .dot-list-item-link .dot-icon {\n            margin-right: ", "px;\n          }\n\n          .dot-icon {\n            border-radius: 50%;\n            height: 40px;\n            margin: ", ";\n            width: 40px;\n          }\n\n          .dot-typography {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      .toggle-nav {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        padding: ", "px;\n        text-align: right;\n\n        .dot-icon {\n          transform: rotate(0deg);\n          -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n        }\n      }\n\n      .powered-by {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        color: ", ";\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n        font-size: 12px;\n        overflow: hidden;\n        padding: ", "px;\n\n        p.desc {\n          white-space: nowrap;\n        }\n\n        .company-name {\n          margin-top: ", "px;\n        }\n\n        .d-icon {\n          display: none;\n        }\n      }\n\n      &.collapsed {\n        overflow: hidden;\n        padding: ", ";\n        width: 58px;\n        -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n        li.MuiListSubheader-root .dot-typography,\n        .go-back .MuiTypography-root,\n        .MuiListItem-divider .dot-list-item-link,\n        .child,\n        .powered-by .company-name,\n        .powered-by p.desc {\n          display: none;\n        }\n\n        .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n        .powered-by .d-icon {\n          display: block;\n        }\n\n        header .dot-app-logo {\n          text-align: center;\n        }\n\n        ul.side-nav {\n          width: 56px;\n          .dot-list-item {\n            margin-left: 0;\n          }\n\n          .toggle-nav {\n            align-self: center;\n          }\n        }\n\n        .powered-by {\n          align-items: center;\n        }\n      }\n    }\n  "])), rootClassName$I, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && theme.spacing(2) + "px", theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? "1px solid " + theme.palette.agilityInterface.sideNavHoverBorder : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0));
     });
     var templateObject_1$L, templateObject_2$J;
 
@@ -6000,6 +6000,37 @@
         iconId: "error-solid"
       })));
     };
+    var applyBindings = function applyBindings(bindings, inlineEditText) {
+      if (!bindings || !bindings.length || !inlineEditText) return;
+      var text = inlineEditText;
+      var boundNode = [];
+      bindings.forEach(function (binding, index) {
+        var stringBinding = binding.binding,
+            _a = binding.className,
+            className = _a === void 0 ? null : _a,
+            value = binding.value;
+        var bindingStringIndex = text.indexOf(stringBinding);
+        var key = 0;
+
+        while (bindingStringIndex >= 0) {
+          // Since key is needed only for bindings with className,
+          // increment key value only if className value is defined
+          className && key++;
+          var nextStartingIndex = bindingStringIndex + stringBinding.length;
+          var previousText = text.substr(0, bindingStringIndex);
+          text = text.substr(nextStartingIndex, text.length);
+          bindingStringIndex = text.indexOf(stringBinding); // Add nodes to array
+
+          boundNode = [boundNode, previousText, className ? /*#__PURE__*/React__default["default"].createElement("span", {
+            className: className,
+            key: index + "-" + key
+          }, value) : value];
+        }
+      }); // Add remainder of the text to the node
+
+      boundNode = [boundNode, text];
+      return boundNode;
+    };
 
     /**
      * @experimental This component is still in development
@@ -6007,6 +6038,7 @@
 
     var DotInlineEdit = function DotInlineEdit(_a) {
       var ariaLabel = _a.ariaLabel,
+          bindings = _a.bindings,
           charactersLimit = _a.charactersLimit,
           className = _a.className,
           dataTestId = _a["data-testid"],
@@ -6060,6 +6092,9 @@
                 if (!inputValue) return [2
                 /*return*/
                 ];
+                if (!onChange) return [3
+                /*break*/
+                , 2];
                 return [4
                 /*yield*/
                 , onChange(inputValue)];
@@ -6074,6 +6109,9 @@
                   ];
                 }
 
+                _b.label = 2;
+
+              case 2:
                 setEditing(false);
 
                 if (onEditStateChange) {
@@ -6198,7 +6236,7 @@
           className: "dot-view-mode-typography",
           "data-testid": dataTestId && dataTestId + "-view-mode-typography",
           variant: typography
-        }, inputValue), /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+        }, bindings ? applyBindings(bindings, inputValue) : inputValue), /*#__PURE__*/React__default["default"].createElement(DotIcon, {
           className: "dot-edit-icon",
           "data-testid": dataTestId && dataTestId + "-edit-icon",
           iconId: "edit"
@@ -7741,14 +7779,14 @@
       componentId: "sc-1q8bcxy-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      .", " {\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    &.", " {\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  "])), containerClassName, listItemRootClass, theme.palette.layer.n100, theme.palette.layer.n50, listItemRootClass, theme.palette.secondary.main, listItemRootClass, theme.palette.error.main, theme.spacing(1), theme.palette.error.main);
+      return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    &.", " {\n      .dot-max-files-message.dot-max-files-reached {\n        color: ", ";\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    }\n  "], ["\n    &.", " {\n      .dot-max-files-message.dot-max-files-reached {\n        color: ", ";\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    }\n  "])), containerClassName, theme.palette.error[500], listItemRootClass, theme.palette.layer.n100, theme.palette.layer.n50, listItemRootClass, theme.palette.secondary.main, listItemRootClass, theme.palette.error.main, theme.spacing(1), theme.palette.error.main);
     });
     var StyledFileUpload = styled__default["default"].div.withConfig({
       displayName: "FileUploadstyles__StyledFileUpload",
       componentId: "sc-1q8bcxy-1"
     })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.", ".", " {\n      align-items: center;\n      background: ", ";\n      border: 2px dashed ", ";\n      border-radius: 4px;\n      color: ", ";\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      height: 240px;\n      justify-content: center;\n      padding: ", ";\n      margin-bottom: ", "px;\n\n      &.disabled .dot-typography {\n        color: ", ";\n      }\n\n      .dot-icon {\n        color: ", ";\n        font-size: 100px;\n\n        i.dot-i {\n          height: 100px;\n        }\n      }\n    }\n  "], ["\n    &.", ".", " {\n      align-items: center;\n      background: ", ";\n      border: 2px dashed ", ";\n      border-radius: 4px;\n      color: ", ";\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      height: 240px;\n      justify-content: center;\n      padding: ", ";\n      margin-bottom: ", "px;\n\n      &.disabled .dot-typography {\n        color: ", ";\n      }\n\n      .dot-icon {\n        color: ", ";\n        font-size: 100px;\n\n        i.dot-i {\n          height: 100px;\n        }\n      }\n    }\n  "])), rootClassName$4, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100);
+      return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.", ".", " {\n      align-items: center;\n      background: ", ";\n      border: 2px dashed ", ";\n      border-radius: 4px;\n      color: ", ";\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      height: 240px;\n      justify-content: center;\n      padding: ", ";\n      margin-bottom: ", "px;\n      text-align: center;\n\n      &.disabled .dot-typography {\n        color: ", ";\n      }\n\n      .dot-icon {\n        color: ", ";\n        font-size: 100px;\n\n        i.dot-i {\n          height: 100px;\n        }\n      }\n    }\n  "], ["\n    &.", ".", " {\n      align-items: center;\n      background: ", ";\n      border: 2px dashed ", ";\n      border-radius: 4px;\n      color: ", ";\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      height: 240px;\n      justify-content: center;\n      padding: ", ";\n      margin-bottom: ", "px;\n      text-align: center;\n\n      &.disabled .dot-typography {\n        color: ", ";\n      }\n\n      .dot-icon {\n        color: ", ";\n        font-size: 100px;\n\n        i.dot-i {\n          height: 100px;\n        }\n      }\n    }\n  "])), rootClassName$4, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100);
     });
     var templateObject_1$4, templateObject_2$4, templateObject_3, templateObject_4;
 
@@ -7795,6 +7833,54 @@
       }));
     };
 
+    var renderMaxSizeMessage = function renderMaxSizeMessage(maxSizeMB) {
+      return /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        variant: "body2"
+      }, "File size should not exceed ", maxSizeMB, "MB.");
+    };
+    var renderMaxFilesMessage = function renderMaxFilesMessage(maxFiles, maxFilesClasses) {
+      return /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        className: maxFilesClasses,
+        variant: "body2"
+      }, maxFiles, " files are the maximum number of files you can upload.");
+    };
+    var renderSelectFilesButton = function renderSelectFilesButton(isUploadDisabled, onButtonClick) {
+      return /*#__PURE__*/React__default["default"].createElement(DotButton, {
+        disabled: isUploadDisabled,
+        onClick: onButtonClick
+      }, "Select file(s)");
+    };
+    var renderActiveDragArea = function renderActiveDragArea() {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+        iconId: "upload-file"
+      }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        variant: "h3"
+      }, "Drop the file(s) here ..."));
+    };
+    var renderDragAndDropArea = function renderDragAndDropArea(isUploadDisabled, onSelectButtonClick) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+        iconId: "upload-file"
+      }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        variant: "h3"
+      }, "Drag and drop your file(s) here ", /*#__PURE__*/React__default["default"].createElement("br", null), " or"), renderSelectFilesButton(isUploadDisabled, onSelectButtonClick));
+    };
+    var renderDropzoneContent = function renderDropzoneContent(_a) {
+      var buttonOnly = _a.buttonOnly,
+          isDragActive = _a.isDragActive,
+          isUploadDisabled = _a.isUploadDisabled,
+          open = _a.open;
+
+      if (buttonOnly) {
+        return renderSelectFilesButton(isUploadDisabled, open);
+      } else {
+        return isDragActive ? renderActiveDragArea() : renderDragAndDropArea(isUploadDisabled, open);
+      }
+    };
+    var getUploadedFilesList = function getUploadedFilesList(uploadedFiles, maxSize, onFileDelete) {
+      return uploadedFiles.map(function (file) {
+        return parseListItem(onFileDelete, file, maxSize);
+      });
+    };
     var parseListItem = function parseListItem(deleteFile, fileToBeParsed, maxSize) {
       var fileErrors = fileToBeParsed.errors;
       var parsedFile = fileToBeParsed.file;
@@ -7808,8 +7894,6 @@
               return "File exceeds " + maxSize + "MB";
 
             case 'file-invalid-type':
-              return e.message;
-
             case 'too-many-files':
               return e.message;
 
@@ -7825,8 +7909,7 @@
           deleteFile: deleteFile,
           error: hasErrors,
           errorText: errorText,
-          file: parsedFile,
-          key: CreateUUID()
+          file: parsedFile
         })
       };
     };
@@ -7843,26 +7926,34 @@
           maxSize = _a.maxSize,
           onChange = _a.onChange,
           onDragEnter = _a.onDragEnter;
-      var rootClasses = useStylesWithRootClass(rootClassName$4, className, !buttonOnly ? dropZoneClassName : '', disabled ? 'disabled' : '');
 
-      var _c = reactDropzone.useDropzone({
+      var _c = React.useState([]),
+          uploadedFiles = _c[0],
+          setUploadedFiles = _c[1];
+
+      var _d = React.useState(false),
+          hasMaxFilesError = _d[0],
+          setHasMaxFilesError = _d[1];
+
+      var isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
+      var rootClasses = useStylesWithRootClass(rootClassName$4, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+      var maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
+      var allowMultiple = maxFiles === undefined || maxFiles > 1;
+
+      var _e = reactDropzone.useDropzone({
         accept: accept,
-        disabled: disabled,
-        maxFiles: maxFiles,
+        disabled: isUploadDisabled,
         maxSize: maxSize * 1000000,
+        multiple: allowMultiple,
         noClick: true,
         onDragEnter: onDragEnter
       }),
-          acceptedFiles = _c.acceptedFiles,
-          fileRejections = _c.fileRejections,
-          getRootProps = _c.getRootProps,
-          getInputProps = _c.getInputProps,
-          isDragActive = _c.isDragActive,
-          open = _c.open;
-
-      var _d = React.useState([]),
-          uploadedFiles = _d[0],
-          setUploadedFiles = _d[1];
+          acceptedFiles = _e.acceptedFiles,
+          fileRejections = _e.fileRejections,
+          getRootProps = _e.getRootProps,
+          getInputProps = _e.getInputProps,
+          isDragActive = _e.isDragActive,
+          open = _e.open;
 
       React.useEffect(function () {
         onChange(uploadedFiles);
@@ -7881,7 +7972,16 @@
       };
 
       var parseFiles = function parseFiles() {
-        // map through accepted files and make them same shape as rejected files
+        var totalFilesToUpload = uploadedFiles.length + acceptedFiles.length + fileRejections.length;
+        var isMaxFilesReached = maxFiles && totalFilesToUpload > maxFiles;
+
+        if (isMaxFilesReached) {
+          setHasMaxFilesError(true);
+          return;
+        }
+
+        setHasMaxFilesError(false); // map through accepted files and make them same shape as rejected files
+
         var mappedFiles = acceptedFiles.map(function (value) {
           return {
             file: value,
@@ -7894,47 +7994,21 @@
       React.useEffect(function () {
         parseFiles();
       }, [acceptedFiles, fileRejections]);
-      var maxFilesMessage = /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-        variant: "body2"
-      }, maxFiles, " files are the maximum number of files you can upload at once.");
-      var maxSizeMessage = /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-        variant: "body2"
-      }, "File size should not exceed ", maxSize, "MB.");
-
-      var dropzoneContent = function dropzoneContent() {
-        if (buttonOnly) {
-          return /*#__PURE__*/React__default["default"].createElement(DotButton, {
-            disabled: disabled,
-            onClick: open
-          }, "Select file(s)");
-        } else {
-          return isDragActive ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
-            iconId: "upload-file"
-          }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-            variant: "h3"
-          }, "Drop the file(s) here ...")) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
-            iconId: "upload-file"
-          }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-            variant: "h3"
-          }, "Drag and drop your file(s) here"), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-            variant: "h3"
-          }, "or"), /*#__PURE__*/React__default["default"].createElement(DotButton, {
-            disabled: disabled,
-            onClick: open
-          }, "Select file(s)"));
-        }
-      };
-
+      var uploadedFilesList = getUploadedFilesList(uploadedFiles, maxSize, deleteFile);
       return /*#__PURE__*/React__default["default"].createElement(StyledFileUploadContainer, {
         className: containerClassName
       }, /*#__PURE__*/React__default["default"].createElement(StyledFileUpload, __assign({}, getRootProps(), {
         "aria-label": ariaLabel,
         className: rootClasses,
         "data-testid": dataTestId
-      }), /*#__PURE__*/React__default["default"].createElement("input", __assign({}, getInputProps())), dropzoneContent()), maxSize && maxSizeMessage, maxFiles && maxFilesMessage, /*#__PURE__*/React__default["default"].createElement(DotList, {
-        items: uploadedFiles.map(function (file) {
-          return parseListItem(deleteFile, file, maxSize);
-        }),
+      }), /*#__PURE__*/React__default["default"].createElement("input", __assign({}, getInputProps())), renderDropzoneContent({
+        buttonOnly: buttonOnly,
+        isDragActive: isDragActive,
+        isUploadDisabled: isUploadDisabled,
+        open: open
+      })), maxSize && renderMaxSizeMessage(maxSize), maxFiles && renderMaxFilesMessage(maxFiles, maxFilesClasses), /*#__PURE__*/React__default["default"].createElement(DotList, {
+        "data-testid": dataTestId && dataTestId + "-file-list",
+        items: uploadedFilesList,
         width: "100%"
       }));
     };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../CommonProps';
-import { MappedFile } from './uploadHelpers';
+import { MappedFile } from './utils/models';
 export interface FileUploadProps extends CommonProps {
     /** Unique file type specifiers <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers" target="_blank">More Info</a> */
     accept?: Array<string>;
@@ -8,7 +8,7 @@ export interface FileUploadProps extends CommonProps {
     buttonOnly?: boolean;
     /** If true, the upload zone will be disabled */
     disabled?: boolean;
-    /** Defines the maximum number of files that can be uploaded at once */
+    /** Defines the maximum number of files that can be uploaded */
     maxFiles?: number;
     /** Defines the maximum file size (in MB) */
     maxSize: number;

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

@@ -0,0 +1,2 @@
+export type { FileUploadProps } from './FileUpload';
+export { DotFileUpload } from './FileUpload';

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { FileWithPath } from 'react-dropzone';
+import { DropzoneContentArgs, MappedFile } 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;
+export declare const renderActiveDragArea: () => ReactNode;
+export declare const renderDragAndDropArea: (isUploadDisabled: boolean, onSelectButtonClick: () => void) => ReactNode;
+export declare const renderDropzoneContent: ({ buttonOnly, isDragActive, isUploadDisabled, open, }: DropzoneContentArgs) => React.ReactNode;
+export declare const getUploadedFilesList: (uploadedFiles: MappedFile[], maxSize: number, onFileDelete: (fileToBeRemoved: FileWithPath) => void) => {
+    child: JSX.Element;
+}[];
+export declare const parseListItem: (deleteFile: (file: FileWithPath) => void, fileToBeParsed: MappedFile, maxSize: number) => {
+    child: JSX.Element;
+};

package/lib/components/file-upload/{uploadHelpers.d.ts → utils/models.d.ts}

@@ -1,13 +1,15 @@
-/// <reference types="react" />
 import { FileWithPath } from 'react-dropzone';
+export interface FileUploadError {
+    code: string;
+    message: string;
+}
 export interface MappedFile {
     errors: Array<FileUploadError>;
     file: FileWithPath;
 }
-export interface FileUploadError {
-    code: string;
-    message: string;
+export interface DropzoneContentArgs {
+    buttonOnly: boolean;
+    isDragActive: boolean;
+    isUploadDisabled: boolean;
+    open: () => void;
 }
-export declare const parseListItem: (deleteFile: (file: FileWithPath) => void, fileToBeParsed: MappedFile, maxSize: number) => {
-    child: JSX.Element;
-};

package/lib/components/index.d.ts

@@ -32,6 +32,7 @@ export type { DraggableItem, DraggableListChangeHandler, } from './draggable-lis
 export type { SnackbarProps, SnackbarSeverity, SnackbarOrigin, } from './snackbar';
 export type { CharactersLimit, InlineEditProps } from './inline-edit';
 export type { progressColorOptions, progressVariantOptions, ProgressProps, } from './progress';
+export type { FileUploadProps } from './file-upload';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -84,7 +85,7 @@ export { DotHeaderRow, DotTable, DotTablePagination } from './table';
 export { DotTooltip } from './tooltip/Tooltip';
 export { DotTabs } from './tabs/Tabs';
 export { DotTypography } from './typography/Typography';
-export { DotFileUpload } from './file-upload/FileUpload';
+export { DotFileUpload } from './file-upload';
 export { DotDivider } from './divider';
 export { DotPopper } from './popper';
 export { DotTruncateWithTooltip } from './truncate-with-tooltip';

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
-import { CharactersLimit } from './utils/models';
+import { CharactersLimit, InlineEditBinding } from './utils/models';
 export interface InlineEditProps extends CommonProps {
+    /** Optional array of bindings, used to replace targeted string in edit mode with the corresponding value in view mode */
+    bindings?: InlineEditBinding[];
     /** Characters limit configuration object */
     charactersLimit?: CharactersLimit;
     /** If true, the input will take up the full width of its container */
@@ -12,7 +14,7 @@ export interface InlineEditProps extends CommonProps {
     /** The name of input element */
     name: string;
     /** An async function which should be executed when the value of the input changes */
-    onChange: (value: string) => Promise<boolean>;
+    onChange?: (value: string) => Promise<boolean>;
     /** A function that informs the parent of current editing state */
     onEditStateChange?: (editing: boolean) => void;
     /** If true, component will behave like a regular text (editing functionality will be disabled). */
@@ -25,4 +27,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, typography, value, }: InlineEditProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+export declare const multipleBindingsClassName = "dot-multiple-bindings-story";
+export declare const StyledWithMultipleBindings: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/inline-edit/utils/helpers.d.ts

@@ -1,3 +1,5 @@
 import { ReactNode } from 'react';
+import { InlineEditBinding } from './models';
 export declare const getCounterAdornment: (currentLength: number, maxLength: number, dataTestId?: string) => ReactNode | undefined;
 export declare const getWarningAdornment: () => JSX.Element;
+export declare const applyBindings: (bindings: InlineEditBinding[], inlineEditText: string) => ReactNode;

package/lib/components/inline-edit/utils/models.d.ts

@@ -3,3 +3,11 @@ export interface CharactersLimit {
     hideCounter?: boolean;
     maxLength: number;
 }
+export interface InlineEditBinding {
+    /** String, written in edit mode, which will be bound to the actual value in view mode */
+    binding: string;
+    /** Optional prop used to define custom CSS for the value when in view mode */
+    className?: string;
+    /** Value which will be displayed in view mode */
+    value: string;
+}

package/package.json

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