@digital-ai/dot-components 1.21.1 → 1.21.2

package/CHANGE_LOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [1.21.2](https://github.com/digital-ai/dot-components/tree/1.21.2) (09/09/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/2.0.0-rc.1...1.21.2)
+
+**Features:**
+
+- Add focus state for Inline Edit component [\#1253](https://github.com/digital-ai/dot-components/issues/1253)
+- Support React 18 [\#1173](https://github.com/digital-ai/dot-components/issues/1173)
+- S-87316 Add focus state for Inline Edit [\#1255](https://github.com/digital-ai/dot-components/pull/1255) ([nikolinadapic](https://github.com/nikolinadapic))
+
+**Fixed bugs:**
+
+- Use of `release-2.0` branch causes `Typography` to use default styling [\#1151](https://github.com/digital-ai/dot-components/issues/1151)
+- D-22241: `DotFileListItem`: fix focus states and expose `onKeyPress` [\#1254](https://github.com/digital-ai/dot-components/pull/1254) ([dmiletic85](https://github.com/dmiletic85))
+
+## [2.0.0-rc.1](https://github.com/digital-ai/dot-components/tree/2.0.0-rc.1) (08/31/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.21.1...2.0.0-rc.1)
+
+**Fixed bugs:**
+
+- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
+- S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
+
+**Merged pull requests:**
+
+- Release Candidate Workflow [\#1251](https://github.com/digital-ai/dot-components/pull/1251) ([CWSites](https://github.com/CWSites))
+- S-85001: add support for react 18 [\#1244](https://github.com/digital-ai/dot-components/pull/1244) ([CWSites](https://github.com/CWSites))
+- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
+
 ## [1.21.1](https://github.com/digital-ai/dot-components/tree/1.21.1) (08/31/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.21.0...1.21.1)
@@ -131,7 +161,6 @@
 
 - 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)
 
@@ -142,6 +171,10 @@
 - `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

@@ -83,7 +83,8 @@ const DotIcon = ({
       fontSize: _fontSize === 'small' ? _fontSize : 'medium'
     }, {
       children: jsx("i", {
-        className: `icon-${iconId} dot-i`
+        className: `icon-${iconId} dot-i`,
+        "data-testid": dataTestId && `${dataTestId}-i`
       }, void 0)
     }), void 0)
   }), void 0);
@@ -6105,7 +6106,7 @@ const StyledInlineEdit = styled.div.withConfig({
 })(["", ""], ({
   theme,
   fullWidth
-}) => css(["&.dot-inline-edit{display:", ";align-items:center;color:", ";min-width:", "px;.", "{display:flex;width:100%;position:relative;.dot-edit-icon{height:100%;position:absolute;right:0;width:40px;background-color:", ";border-radius:", ";display:none;.dot-i{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}&:not(.", "):hover{border-radius:", "px;background-color:", ";cursor:pointer;.dot-edit-icon{display:block;}}.dot-view-mode-typography{padding:", ";margin-bottom:0;}}.dot-empty-value fieldset{border-color:", ";}.dot-adornment-error{color:", ";}.MuiInputBase-input{height:auto;}.MuiInputBase-root{margin-bottom:", "px;}", " .", " .dot-input{padding-left:", "px;}.MuiOutlinedInput-input:focus{cursor:auto;}.dot-counter-adornment{.dot-counter-max-length{color:", ";}.dot-counter-length,.dot-counter-max-length{&.dot-counter-limit{color:", ";}}}.dot-read-only-adornment{display:none;}.", "{display:flex;align-items:center;margin:", ";.dot-button{padding:", "px;margin-top:", ";margin-bottom:", ";}}}"], fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), theme.palette.error[500], theme.palette.error[500], theme.spacing(0), ({
+}) => css(["&.dot-inline-edit{display:", ";align-items:center;color:", ";min-width:", "px;&:not(.", "):focus-visible{border-radius:", "px;background-color:", ";cursor:pointer;outline:0;.dot-edit-icon{display:block;}}.", "{display:flex;width:100%;position:relative;.dot-edit-icon{height:100%;position:absolute;right:0;width:40px;background-color:", ";border-radius:", ";display:none;.dot-i{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}&:not(.", "):hover{border-radius:", "px;background-color:", ";cursor:pointer;.dot-edit-icon{display:block;}}.dot-view-mode-typography{padding:", ";margin-bottom:0;}}.dot-empty-value fieldset{border-color:", ";}.dot-adornment-error{color:", ";}.MuiInputBase-input{height:auto;}.MuiInputBase-root{margin-bottom:", "px;}", " .", " .dot-input{padding-left:", "px;}.MuiOutlinedInput-input:focus{cursor:auto;}.dot-counter-adornment{.dot-counter-max-length{color:", ";}.dot-counter-length,.dot-counter-max-length{&.dot-counter-limit{color:", ";}}}.dot-read-only-adornment{display:none;}.", "{display:flex;align-items:center;margin:", ";.dot-button{padding:", "px;margin-top:", ";margin-bottom:", ";}}}"], fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), theme.palette.error[500], theme.palette.error[500], theme.spacing(0), ({
   typography
 }) => typography && `
          .MuiInputBase-root {
@@ -6207,18 +6208,27 @@ const DotInlineEdit = ({
   onEditStateChange,
   readOnly,
   selectTextOnEdit,
+  tabIndex: _tabIndex = 0,
   tooltip,
   typography: _typography = 'body1',
   value: _value = ''
 }) => {
   const [editing, setEditing] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
   const [originalValue, setOriginalValue] = useState('');
   const [inputValue, setInputValue] = useState(_value);
+  const isNotReadOnlyOrEditing = !readOnly && !editing;
   const inputRef = useRef();
   const inlineEditRef = useRef();
   const isSaveDisabled = checkIfEmptyValue(inputValue);
   const rootClasses = useStylesWithRootClass(rootClassName$n, className, editing ? editModeClassName : '');
 
+  const handleShowTooltip = visible => {
+    if (isNotReadOnlyOrEditing) {
+      setShowTooltip(visible);
+    }
+  };
+
   const handleInlineEditClick = () => {
     if (editing) return;
     setOriginalValue(inputValue);
@@ -6232,6 +6242,7 @@ const DotInlineEdit = ({
   const handleSave = () => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
 
+    setShowTooltip(false);
     if (isSaveDisabled) return;
 
     if (onChange) {
@@ -6251,6 +6262,7 @@ const DotInlineEdit = ({
   });
 
   const handleCancel = () => {
+    setShowTooltip(false);
     setEditing(false);
     setInputValue(originalValue);
 
@@ -6262,7 +6274,12 @@ const DotInlineEdit = ({
   const handleKeyPress = event => __awaiter(void 0, void 0, void 0, function* () {
     switch (event.key) {
       case 'Enter':
-        // Save only when Enter is pressed within input field
+        if (!editing) {
+          handleInlineEditClick();
+          return;
+        } // Save only when Enter is pressed within input field
+
+
         if (inputRef.current !== event.target) return;
         yield handleSave();
         break;
@@ -6274,8 +6291,12 @@ const DotInlineEdit = ({
   });
 
   const handleBlur = event => __awaiter(void 0, void 0, void 0, function* () {
-    if (!event.relatedTarget || !inlineEditRef.current.contains(event.relatedTarget)) {
-      yield handleSave();
+    if (!editing) {
+      setShowTooltip(false);
+    } else {
+      if (!event.relatedTarget || !inlineEditRef.current.contains(event.relatedTarget)) {
+        yield handleSave();
+      }
     }
   });
 
@@ -6309,7 +6330,8 @@ const DotInlineEdit = ({
     return tooltip ? jsx(DotTooltip, Object.assign({
       title: tooltip,
       className: viewModeClasses,
-      "data-testid": dataTestId && `${dataTestId}-view-mode-tooltip-wrapper`
+      "data-testid": dataTestId && `${dataTestId}-view-mode-tooltip-wrapper`,
+      open: showTooltip
     }, {
       children: viewModeChildren
     }), void 0) : jsx("div", Object.assign({
@@ -6381,10 +6403,14 @@ const DotInlineEdit = ({
     className: rootClasses,
     "data-testid": dataTestId,
     fullWidth: _fullWidth,
-    onBlur: !readOnly && editing ? handleBlur : undefined,
+    onBlur: !readOnly ? handleBlur : undefined,
     onClick: !readOnly ? handleInlineEditClick : undefined,
+    onFocus: () => handleShowTooltip(true),
+    onMouseOver: () => handleShowTooltip(true),
+    onMouseOut: () => handleShowTooltip(false),
     onKeyDown: !readOnly ? event => handleKeyPress(event) : undefined,
     ref: inlineEditRef,
+    tabIndex: !readOnly ? _tabIndex : undefined,
     typography: _typography
   }, {
     children: editing ? renderEditMode() : renderViewMode()
@@ -7993,7 +8019,7 @@ const StyledFileListItem = styled(StyledListItem).withConfig({
   componentId: "sc-6mp1tz-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{border-bottom:1px solid ", ";&:hover{cursor:pointer;background:", ";}&.file-success:not(:hover){.", "-end-icon .dot-icon i:before{color:", ";}}&.file-error:not(:hover){.MuiListItemText-secondary,.", "-end-icon .dot-icon i:before{color:", ";}}.dot-typography,.file-item-text{flex-grow:2;padding-left:", "px;}.file-item-text{display:flex;flex-direction:column;.MuiTypography-body2{color:", ";}}}"], rootClassName$4, theme.palette.layer.n100, theme.palette.layer.n50, rootClassName$4, theme.palette.secondary.main, rootClassName$4, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
+}) => css(["&.", "{border-bottom:1px solid ", ";&:hover{cursor:pointer;background:", ";}&:focus-visible{background-color:", ";outline:none;}&.file-success:not(:hover,:focus-visible) .", "-end-icon{i:before{color:", ";}&:focus-visible i:before{color:unset;}}&.file-error:not(:hover,:focus-visible) .", "-end-icon{i:before,.MuiListItemText-secondary{color:", ";}&:focus-visible i:before{color:unset;}}.dot-typography,.file-item-text{flex-grow:2;padding-left:", "px;}.file-item-text{display:flex;flex-direction:column;.MuiTypography-body2{color:", ";}}}"], rootClassName$4, theme.palette.layer.n100, theme.palette.layer.n50, theme.palette.layer.n100, rootClassName$4, theme.palette.secondary.main, rootClassName$4, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
 
 const DotFileListItem = ({
   ariaLabel,
@@ -8004,7 +8030,9 @@ const DotFileListItem = ({
   error: _error = false,
   errorText,
   file,
-  onClick
+  onClick,
+  onKeyPress,
+  tabIndex: _tabIndex = 0
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$4, className, _error ? 'file-error' : 'file-success');
   const defaultIcon = _error ? 'error-solid' : 'check-solid';
@@ -8021,9 +8049,13 @@ const DotFileListItem = ({
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId,
+    onBlur: () => setEndIcon(defaultIcon),
     onClick: handleItemClick(file),
+    onFocus: () => setEndIcon('delete'),
     onMouseEnter: () => setEndIcon('delete'),
-    onMouseLeave: () => setEndIcon(defaultIcon)
+    onMouseLeave: () => setEndIcon(defaultIcon),
+    onKeyPress: onKeyPress,
+    tabIndex: _tabIndex
   }, {
     children: [jsx(DotIcon, {
       "data-testid": dataTestId && `${dataTestId}-start-icon`,

package/index.umd.js

@@ -202,7 +202,8 @@
           fontSize: fontSize === 'small' ? fontSize : 'medium'
         }, {
           children: jsxRuntime.jsx("i", {
-            className: "icon-" + iconId + " dot-i"
+            className: "icon-" + iconId + " dot-i",
+            "data-testid": dataTestId && dataTestId + "-i"
           }, void 0)
         }), void 0)
       }), void 0);
@@ -6516,7 +6517,7 @@
     })(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
           fullWidth = _a.fullWidth;
-      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.dot-inline-edit {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", "px;\n\n      .", " {\n        display: flex;\n        width: 100%;\n        position: relative;\n\n        .dot-edit-icon {\n          height: 100%;\n          position: absolute;\n          right: 0;\n          width: 40px;\n          background-color: ", ";\n          border-radius: ", ";\n          display: none;\n\n          .dot-i {\n            margin: 0;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n        }\n\n        // Display pointer and edit icon only when NOT in read only mode\n        &:not(.", "):hover {\n          border-radius: ", "px;\n          background-color: ", ";\n          cursor: pointer;\n\n          .dot-edit-icon {\n            display: block;\n          }\n        }\n\n        .dot-view-mode-typography {\n          padding: ", ";\n          margin-bottom: 0;\n        }\n      }\n\n      .dot-empty-value fieldset {\n        border-color: ", ";\n      }\n\n      .dot-adornment-error {\n        color: ", ";\n      }\n\n      .MuiInputBase-input {\n        height: auto;\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: ", "px;\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", "px;\n      }\n\n      .MuiOutlinedInput-input:focus {\n        cursor: auto;\n      }\n\n      .dot-counter-adornment {\n        .dot-counter-max-length {\n          color: ", ";\n        }\n\n        .dot-counter-length,\n        .dot-counter-max-length {\n          &.dot-counter-limit {\n            color: ", ";\n          }\n        }\n      }\n\n      .dot-read-only-adornment {\n        display: none;\n      }\n\n      .", " {\n        display: flex;\n        align-items: center;\n        margin: ", ";\n\n        .dot-button {\n          padding: ", "px;\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "], ["\n    &.dot-inline-edit {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", "px;\n\n      .", " {\n        display: flex;\n        width: 100%;\n        position: relative;\n\n        .dot-edit-icon {\n          height: 100%;\n          position: absolute;\n          right: 0;\n          width: 40px;\n          background-color: ", ";\n          border-radius: ", ";\n          display: none;\n\n          .dot-i {\n            margin: 0;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n        }\n\n        // Display pointer and edit icon only when NOT in read only mode\n        &:not(.", "):hover {\n          border-radius: ", "px;\n          background-color: ", ";\n          cursor: pointer;\n\n          .dot-edit-icon {\n            display: block;\n          }\n        }\n\n        .dot-view-mode-typography {\n          padding: ", ";\n          margin-bottom: 0;\n        }\n      }\n\n      .dot-empty-value fieldset {\n        border-color: ", ";\n      }\n\n      .dot-adornment-error {\n        color: ", ";\n      }\n\n      .MuiInputBase-input {\n        height: auto;\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: ", "px;\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", "px;\n      }\n\n      .MuiOutlinedInput-input:focus {\n        cursor: auto;\n      }\n\n      .dot-counter-adornment {\n        .dot-counter-max-length {\n          color: ", ";\n        }\n\n        .dot-counter-length,\n        .dot-counter-max-length {\n          &.dot-counter-limit {\n            color: ", ";\n          }\n        }\n      }\n\n      .dot-read-only-adornment {\n        display: none;\n      }\n\n      .", " {\n        display: flex;\n        align-items: center;\n        margin: ", ";\n\n        .dot-button {\n          padding: ", "px;\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "])), fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), theme.palette.error[500], theme.palette.error[500], theme.spacing(0), function (_a) {
+      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.dot-inline-edit {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", "px;\n\n      &:not(.", "):focus-visible {\n        border-radius: ", "px;\n        background-color: ", ";\n        cursor: pointer;\n        outline: 0;\n\n        .dot-edit-icon {\n          display: block;\n        }\n      }\n\n      .", " {\n        display: flex;\n        width: 100%;\n        position: relative;\n\n        .dot-edit-icon {\n          height: 100%;\n          position: absolute;\n          right: 0;\n          width: 40px;\n          background-color: ", ";\n          border-radius: ", ";\n          display: none;\n\n          .dot-i {\n            margin: 0;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n        }\n\n        // Display pointer and edit icon only when NOT in read only mode\n        &:not(.", "):hover {\n          border-radius: ", "px;\n          background-color: ", ";\n          cursor: pointer;\n\n          .dot-edit-icon {\n            display: block;\n          }\n        }\n\n        .dot-view-mode-typography {\n          padding: ", ";\n          margin-bottom: 0;\n        }\n      }\n\n      .dot-empty-value fieldset {\n        border-color: ", ";\n      }\n\n      .dot-adornment-error {\n        color: ", ";\n      }\n\n      .MuiInputBase-input {\n        height: auto;\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: ", "px;\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", "px;\n      }\n\n      .MuiOutlinedInput-input:focus {\n        cursor: auto;\n      }\n\n      .dot-counter-adornment {\n        .dot-counter-max-length {\n          color: ", ";\n        }\n\n        .dot-counter-length,\n        .dot-counter-max-length {\n          &.dot-counter-limit {\n            color: ", ";\n          }\n        }\n      }\n\n      .dot-read-only-adornment {\n        display: none;\n      }\n\n      .", " {\n        display: flex;\n        align-items: center;\n        margin: ", ";\n\n        .dot-button {\n          padding: ", "px;\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "], ["\n    &.dot-inline-edit {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", "px;\n\n      &:not(.", "):focus-visible {\n        border-radius: ", "px;\n        background-color: ", ";\n        cursor: pointer;\n        outline: 0;\n\n        .dot-edit-icon {\n          display: block;\n        }\n      }\n\n      .", " {\n        display: flex;\n        width: 100%;\n        position: relative;\n\n        .dot-edit-icon {\n          height: 100%;\n          position: absolute;\n          right: 0;\n          width: 40px;\n          background-color: ", ";\n          border-radius: ", ";\n          display: none;\n\n          .dot-i {\n            margin: 0;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n        }\n\n        // Display pointer and edit icon only when NOT in read only mode\n        &:not(.", "):hover {\n          border-radius: ", "px;\n          background-color: ", ";\n          cursor: pointer;\n\n          .dot-edit-icon {\n            display: block;\n          }\n        }\n\n        .dot-view-mode-typography {\n          padding: ", ";\n          margin-bottom: 0;\n        }\n      }\n\n      .dot-empty-value fieldset {\n        border-color: ", ";\n      }\n\n      .dot-adornment-error {\n        color: ", ";\n      }\n\n      .MuiInputBase-input {\n        height: auto;\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: ", "px;\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", "px;\n      }\n\n      .MuiOutlinedInput-input:focus {\n        cursor: auto;\n      }\n\n      .dot-counter-adornment {\n        .dot-counter-max-length {\n          color: ", ";\n        }\n\n        .dot-counter-length,\n        .dot-counter-max-length {\n          &.dot-counter-limit {\n            color: ", ";\n          }\n        }\n      }\n\n      .dot-read-only-adornment {\n        display: none;\n      }\n\n      .", " {\n        display: flex;\n        align-items: center;\n        margin: ", ";\n\n        .dot-button {\n          padding: ", "px;\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "])), fullWidth ? 'flex' : 'inline-flex', theme.palette.grey[700], theme.spacing(32), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, viewModeClassName, theme.palette.layer.n50, theme.spacing(0, 0.5, 0.5, 0), readOnlyClassName, theme.spacing(0.5), theme.palette.layer.n50, theme.spacing(1.3125, 1), theme.palette.error[500], theme.palette.error[500], theme.spacing(0), function (_a) {
         var typography = _a.typography;
         return typography && "\n         .MuiInputBase-root {\n            font-family: " + (theme.typography[typography].fontFamily || 'inherit') + ";\n            font-size: " + theme.typography[typography].fontSize + "px;\n            line-height: " + (theme.typography[typography].lineHeight || 'normal') + ";\n            letter-spacing: " + (theme.typography[typography].letterSpacing || 'normal') + ";\n            text-transform: " + (theme.typography[typography].textTransform || 'none') + ";\n         }\n      ";
       }, editTextFieldClassName, theme.spacing(1), theme.palette.layer.n400, theme.palette.error[500], editActionsClassName, theme.spacing(0, 0, 0, 0.5), theme.spacing(0.75), theme.spacing(0), theme.spacing(0));
@@ -6615,29 +6616,42 @@
           onEditStateChange = _a.onEditStateChange,
           readOnly = _a.readOnly,
           selectTextOnEdit = _a.selectTextOnEdit,
+          _c = _a.tabIndex,
+          tabIndex = _c === void 0 ? 0 : _c,
           tooltip = _a.tooltip,
-          _c = _a.typography,
-          typography = _c === void 0 ? 'body1' : _c,
-          _d = _a.value,
-          value = _d === void 0 ? '' : _d;
+          _d = _a.typography,
+          typography = _d === void 0 ? 'body1' : _d,
+          _e = _a.value,
+          value = _e === void 0 ? '' : _e;
 
-      var _e = React.useState(false),
-          editing = _e[0],
-          setEditing = _e[1];
+      var _f = React.useState(false),
+          editing = _f[0],
+          setEditing = _f[1];
+
+      var _g = React.useState(false),
+          showTooltip = _g[0],
+          setShowTooltip = _g[1];
 
-      var _f = React.useState(''),
-          originalValue = _f[0],
-          setOriginalValue = _f[1];
+      var _h = React.useState(''),
+          originalValue = _h[0],
+          setOriginalValue = _h[1];
 
-      var _g = React.useState(value),
-          inputValue = _g[0],
-          setInputValue = _g[1];
+      var _j = React.useState(value),
+          inputValue = _j[0],
+          setInputValue = _j[1];
 
+      var isNotReadOnlyOrEditing = !readOnly && !editing;
       var inputRef = React.useRef();
       var inlineEditRef = React.useRef();
       var isSaveDisabled = checkIfEmptyValue(inputValue);
       var rootClasses = useStylesWithRootClass(rootClassName$n, className, editing ? editModeClassName : '');
 
+      var handleShowTooltip = function handleShowTooltip(visible) {
+        if (isNotReadOnlyOrEditing) {
+          setShowTooltip(visible);
+        }
+      };
+
       var handleInlineEditClick = function handleInlineEditClick() {
         if (editing) return;
         setOriginalValue(inputValue);
@@ -6657,6 +6671,7 @@
           return __generator(this, function (_b) {
             switch (_b.label) {
               case 0:
+                setShowTooltip(false);
                 if (isSaveDisabled) return [2
                 /*return*/
                 ];
@@ -6695,6 +6710,7 @@
       };
 
       var handleCancel = function handleCancel() {
+        setShowTooltip(false);
         setEditing(false);
         setInputValue(originalValue);
 
@@ -6729,7 +6745,14 @@
                 , 4];
 
               case 1:
-                // Save only when Enter is pressed within input field
+                if (!editing) {
+                  handleInlineEditClick();
+                  return [2
+                  /*return*/
+                  ];
+                } // Save only when Enter is pressed within input field
+
+
                 if (inputRef.current !== event.target) return [2
                 /*return*/
                 ];
@@ -6764,19 +6787,28 @@
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
+                if (!!editing) return [3
+                /*break*/
+                , 1];
+                setShowTooltip(false);
+                return [3
+                /*break*/
+                , 3];
+
+              case 1:
                 if (!(!event.relatedTarget || !inlineEditRef.current.contains(event.relatedTarget))) return [3
                 /*break*/
-                , 2];
+                , 3];
                 return [4
                 /*yield*/
                 , handleSave()];
 
-              case 1:
+              case 2:
                 _a.sent();
 
-                _a.label = 2;
+                _a.label = 3;
 
-              case 2:
+              case 3:
                 return [2
                 /*return*/
                 ];
@@ -6815,7 +6847,8 @@
         return tooltip ? jsxRuntime.jsx(DotTooltip, __assign({
           title: tooltip,
           className: viewModeClasses,
-          "data-testid": dataTestId && dataTestId + "-view-mode-tooltip-wrapper"
+          "data-testid": dataTestId && dataTestId + "-view-mode-tooltip-wrapper",
+          open: showTooltip
         }, {
           children: viewModeChildren
         }), void 0) : jsxRuntime.jsx("div", __assign({
@@ -6891,12 +6924,22 @@
         className: rootClasses,
         "data-testid": dataTestId,
         fullWidth: fullWidth,
-        onBlur: !readOnly && editing ? handleBlur : undefined,
+        onBlur: !readOnly ? handleBlur : undefined,
         onClick: !readOnly ? handleInlineEditClick : undefined,
+        onFocus: function () {
+          return handleShowTooltip(true);
+        },
+        onMouseOver: function () {
+          return handleShowTooltip(true);
+        },
+        onMouseOut: function () {
+          return handleShowTooltip(false);
+        },
         onKeyDown: !readOnly ? function (event) {
           return handleKeyPress(event);
         } : undefined,
         ref: inlineEditRef,
+        tabIndex: !readOnly ? tabIndex : undefined,
         typography: typography
       }, {
         children: editing ? renderEditMode() : renderViewMode()
@@ -8674,7 +8717,7 @@
       componentId: "sc-6mp1tz-0"
     })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    &.", " {\n      border-bottom: 1px solid ", ";\n      &:hover {\n        cursor: pointer;\n        background: ", ";\n      }\n\n      &.file-success:not(:hover) {\n        .", "-end-icon .dot-icon i:before {\n          color: ", ";\n        }\n      }\n\n      &.file-error:not(:hover) {\n        .MuiListItemText-secondary,\n        .", "-end-icon .dot-icon i:before {\n          color: ", ";\n        }\n      }\n\n      .dot-typography,\n      .file-item-text {\n        flex-grow: 2;\n        padding-left: ", "px;\n      }\n\n      .file-item-text {\n        display: flex;\n        flex-direction: column;\n\n        .MuiTypography-body2 {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      border-bottom: 1px solid ", ";\n      &:hover {\n        cursor: pointer;\n        background: ", ";\n      }\n\n      &.file-success:not(:hover) {\n        .", "-end-icon .dot-icon i:before {\n          color: ", ";\n        }\n      }\n\n      &.file-error:not(:hover) {\n        .MuiListItemText-secondary,\n        .", "-end-icon .dot-icon i:before {\n          color: ", ";\n        }\n      }\n\n      .dot-typography,\n      .file-item-text {\n        flex-grow: 2;\n        padding-left: ", "px;\n      }\n\n      .file-item-text {\n        display: flex;\n        flex-direction: column;\n\n        .MuiTypography-body2 {\n          color: ", ";\n        }\n      }\n    }\n  "])), rootClassName$4, theme.palette.layer.n100, theme.palette.layer.n50, rootClassName$4, theme.palette.secondary.main, rootClassName$4, theme.palette.error.main, theme.spacing(1), theme.palette.error.main);
+      return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    &.", " {\n      border-bottom: 1px solid ", ";\n      &:hover {\n        cursor: pointer;\n        background: ", ";\n      }\n\n      &:focus-visible {\n        background-color: ", ";\n        outline: none;\n      }\n\n      &.file-success:not(:hover, :focus-visible) .", "-end-icon {\n        i:before {\n          color: ", ";\n        }\n\n        &:focus-visible i:before {\n          color: unset;\n        }\n      }\n\n      &.file-error:not(:hover, :focus-visible) .", "-end-icon {\n        i:before,\n        .MuiListItemText-secondary {\n          color: ", ";\n        }\n\n        &:focus-visible i:before {\n          color: unset;\n        }\n      }\n\n      .dot-typography,\n      .file-item-text {\n        flex-grow: 2;\n        padding-left: ", "px;\n      }\n\n      .file-item-text {\n        display: flex;\n        flex-direction: column;\n\n        .MuiTypography-body2 {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      border-bottom: 1px solid ", ";\n      &:hover {\n        cursor: pointer;\n        background: ", ";\n      }\n\n      &:focus-visible {\n        background-color: ", ";\n        outline: none;\n      }\n\n      &.file-success:not(:hover, :focus-visible) .", "-end-icon {\n        i:before {\n          color: ", ";\n        }\n\n        &:focus-visible i:before {\n          color: unset;\n        }\n      }\n\n      &.file-error:not(:hover, :focus-visible) .", "-end-icon {\n        i:before,\n        .MuiListItemText-secondary {\n          color: ", ";\n        }\n\n        &:focus-visible i:before {\n          color: unset;\n        }\n      }\n\n      .dot-typography,\n      .file-item-text {\n        flex-grow: 2;\n        padding-left: ", "px;\n      }\n\n      .file-item-text {\n        display: flex;\n        flex-direction: column;\n\n        .MuiTypography-body2 {\n          color: ", ";\n        }\n      }\n    }\n  "])), rootClassName$4, theme.palette.layer.n100, theme.palette.layer.n50, theme.palette.layer.n100, rootClassName$4, theme.palette.secondary.main, rootClassName$4, theme.palette.error.main, theme.spacing(1), theme.palette.error.main);
     });
     var templateObject_1$4, templateObject_2$4;
 
@@ -8688,13 +8731,16 @@
           error = _b === void 0 ? false : _b,
           errorText = _a.errorText,
           file = _a.file,
-          onClick = _a.onClick;
+          onClick = _a.onClick,
+          onKeyPress = _a.onKeyPress,
+          _c = _a.tabIndex,
+          tabIndex = _c === void 0 ? 0 : _c;
       var rootClasses = useStylesWithRootClass(rootClassName$4, className, error ? 'file-error' : 'file-success');
       var defaultIcon = error ? 'error-solid' : 'check-solid';
 
-      var _c = React.useState(defaultIcon),
-          endIcon = _c[0],
-          setEndIcon = _c[1];
+      var _d = React.useState(defaultIcon),
+          endIcon = _d[0],
+          setEndIcon = _d[1];
 
       var handleItemClick = function handleItemClick(clickedFile) {
         return function (_event) {
@@ -8713,13 +8759,21 @@
         "aria-label": ariaLabel,
         className: rootClasses,
         "data-testid": dataTestId,
+        onBlur: function () {
+          return setEndIcon(defaultIcon);
+        },
         onClick: handleItemClick(file),
+        onFocus: function () {
+          return setEndIcon('delete');
+        },
         onMouseEnter: function () {
           return setEndIcon('delete');
         },
         onMouseLeave: function () {
           return setEndIcon(defaultIcon);
-        }
+        },
+        onKeyPress: onKeyPress,
+        tabIndex: tabIndex
       }, {
         children: [jsxRuntime.jsx(DotIcon, {
           "data-testid": dataTestId && dataTestId + "-start-icon",

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

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

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

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

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

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

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

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

package/package.json

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