@digital-ai/dot-components 2.8.2 → 2.10.0

package/index.esm.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useEffect, useState, useRef, useMemo, useContext, createContext, forwardRef, Fragment, useCallback, createElement, useLayoutEffect } from 'react';
+import { useEffect, useState, useRef, useMemo, useContext, createContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
@@ -33,6 +33,7 @@ const DotTooltip = ({
 }) => {
   const rootClasses = useStylesWithRootClass('dot-tooltip', className);
   return title ? jsx(Tooltip, Object.assign({
+    "aria-hidden": open ? false : true,
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId,
@@ -70,7 +71,7 @@ const DotIcon = ({
   }, {
     children: jsx(StyledIcon, Object.assign({
       "aria-hidden": "false",
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabel || `${iconId} icon`,
       classes: {
         root: rootClasses
       },
@@ -79,6 +80,7 @@ const DotIcon = ({
       role: _ariaRole
     }, {
       children: jsx("i", {
+        "aria-label": ariaLabel || `${iconId} icon}`,
         className: `icon-${iconId} dot-i`,
         "data-testid": dataTestId && `${dataTestId}-i`,
         role: _ariaRole
@@ -170,13 +172,15 @@ const DotAccordion = ({
     square: _square
   }, {
     children: [jsxs(AccordionSummary, Object.assign({
+      "aria-label": ariaLabel || summary,
       classes: {
         root: summaryClassName
       },
       "data-testid": `${dataTestId}-summary`,
       expandIcon: jsx(DotIcon, {
         iconId: "chevron-down"
-      }, void 0)
+      }, void 0),
+      role: "button"
     }, {
       children: [_startIcon, jsx(DotTooltip, Object.assign({
         "data-testid": "accordion-tooltip",
@@ -1634,11 +1638,22 @@ const AvatarContent = ({
   'data-testid': dataTestId,
   iconId,
   imageSrc,
+  number,
   size,
   text,
   type
 }) => {
+  const parsedNumber = () => {
+    if (!isNumber(number)) return;
+    const numberArray = number.toString().split('');
+    if (numberArray.length > 1) {
+      return `${numberArray[0]}${numberArray[1]}`;
+    } else {
+      return number;
+    }
+  };
   const parsedText = () => {
+    if (!isString$1(text)) return;
     const textArray = text.split(' ');
     if (textArray.length > 1) {
       const firstInitial = textArray[0].slice(0, 1);
@@ -1661,7 +1676,7 @@ const AvatarContent = ({
     return jsx(DotTypography, Object.assign({
       variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
     }, {
-      children: parsedText()
+      children: parsedNumber() || parsedText()
     }), void 0);
   }
   return null;
@@ -1677,6 +1692,7 @@ const DotAvatar = ({
   iconId,
   imageSrc,
   onClick,
+  number,
   size: _size = 'medium',
   tabIndex: _tabIndex = 0,
   text: _text = alt,
@@ -1696,7 +1712,7 @@ const DotAvatar = ({
   }, {
     children: jsx(StyledAvatar, Object.assign({
       alt: alt,
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabel || alt,
       className: _size,
       classes: {
         root: rootClasses,
@@ -1716,6 +1732,7 @@ const DotAvatar = ({
         "data-testid": dataTestId,
         iconId: iconId,
         imageSrc: imageSrc,
+        number: number,
         size: _size,
         text: _text,
         type: _type
@@ -1919,6 +1936,7 @@ const DotProgress = ({
       },
       color: _color,
       "data-testid": dataTestId,
+      role: "progressbar",
       size: _size,
       thickness: _thickness,
       value: value,
@@ -2310,7 +2328,7 @@ const DotIconButton = ({
     title: tooltip
   }, {
     children: jsx(StyledIconButton, Object.assign({
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabel || tooltip || `${iconId} icon button`,
       classes: {
         root: rootClasses
       },
@@ -2348,6 +2366,7 @@ const DotDrawerHeader = ({
     role: "heading"
   }, {
     children: [children, variant !== 'permanent' && jsx(DotIconButton, {
+      ariaLabel: "close drawer",
       className: "close-button",
       iconId: "close",
       onClick: onClose
@@ -2379,6 +2398,7 @@ const DotDrawerBody = ({
     role: _ariaRole
   }, {
     children: [children, !headerExists && variant !== 'permanent' && jsx(DotIconButton, {
+      ariaLabel: "close drawer",
       className: "dot-drawer-close-button",
       iconId: "close",
       onClick: onClose
@@ -2447,6 +2467,7 @@ const DotDrawer = ({
   return jsxs(StyledDrawer, Object.assign({
     ModalProps: ModalProps,
     PaperProps: Object.assign(Object.assign({}, PaperProps), {
+      'aria-label': ariaLabel,
       role: _ariaRole
     }),
     anchor: _anchor,
@@ -2503,7 +2524,8 @@ const DotListDivider = ({
 }) => {
   if (item.text) {
     return jsx(ListSubheader, Object.assign({
-      disableSticky: true
+      disableSticky: true,
+      role: "heading"
     }, {
       children: jsx(DotTypography, Object.assign({
         variant: "overline"
@@ -2514,7 +2536,8 @@ const DotListDivider = ({
   }
   return jsx(Divider, {
     "aria-hidden": true,
-    "data-testid": `divider-${index}`
+    "data-testid": `divider-${index}`,
+    role: "separator"
   }, void 0);
 };
 const DotList = ({
@@ -2569,9 +2592,11 @@ const DotList = ({
         }
       };
       if (item.child) {
-        return jsx(Fragment, {
+        return jsx("div", Object.assign({
+          role: "listitem"
+        }, {
           children: item.child
-        }, `item-child-${index}`);
+        }), `item-child-${index}`);
       }
       if (item.divider) {
         return jsx(DotListDivider, {
@@ -2656,7 +2681,7 @@ const DotListItem = ({
     }
     return endIcon;
   };
-  return jsxs(Fragment$1, {
+  return jsxs(Fragment, {
     children: [jsx(DotTooltip, Object.assign({
       "data-testid": `${dataTestId}-tooltip`,
       placement: _tooltipPlacement,
@@ -2977,7 +3002,7 @@ const DotInputText = ({
         startAdornment: startAdornmentIcon(),
         endAdornment: endAdornmentIconOrText()
       },
-      "aria-label": name,
+      "aria-label": name || label,
       autoComplete: _autoComplete,
       autoFocus: autoFocus,
       classes: {
@@ -3000,6 +3025,8 @@ const DotInputText = ({
       },
       inputRef: inputRef,
       label: persistentLabel ? null : label,
+      maxRows: _multiline ? maxRows : null,
+      minRows: _multiline ? minRows : null,
       multiline: _multiline,
       name: name,
       onBlur: onBlur,
@@ -3009,9 +3036,9 @@ const DotInputText = ({
       onMouseUp: onMouseUp,
       placeholder: placeholder,
       required: _required,
-      minRows: _multiline ? minRows : null,
-      maxRows: _multiline ? maxRows : null,
+      role: "textbox",
       size: _size,
+      tabIndex: 0,
       type: _type,
       value: inputTextValue,
       variant: "outlined"
@@ -3059,6 +3086,7 @@ function SearchInput({
     iconId: "search"
   }, void 0);
   const clearSearchIcon = jsx(DotIconButton, {
+    ariaLabel: "clear search text",
     iconId: "close",
     onClick: handleClear,
     size: "small",
@@ -3128,7 +3156,7 @@ const DotCopyButton = ({
     "data-testid": dataTestId
   }, {
     children: [!showCopiedIcon && jsx(DotIconButton, {
-      ariaLabel: _ariaLabel,
+      ariaLabel: _ariaLabel || 'copy to clipboard',
       "data-testid": `${dataTestId}-button`,
       iconId: "duplicate",
       onClick: copy,
@@ -3532,7 +3560,7 @@ const DotAppSwitcherView = ({
       setRecentAppInstances(recentAppInstancesSetter(latestInstance, _maxRecentInstances));
     }
   }, [recentAppInstances]);
-  const recentAppInstancesSection = jsxs(Fragment$1, {
+  const recentAppInstancesSection = jsxs(Fragment, {
     children: [sectionHeaderMenuItem('RECENT', recentAppInstances.length).children, jsx("div", Object.assign({
       className: "product-applications"
     }, {
@@ -3582,7 +3610,7 @@ const DotAppSwitcherView = ({
           }, void 0)
         }), void 0), jsx("div", Object.assign({
           className: "product-applications",
-          role: "list"
+          role: "presentation"
         }, {
           children: filteredAppInstances()
         }), void 0)]
@@ -3593,6 +3621,7 @@ const DotAppSwitcherView = ({
         role: "contentinfo"
       }, {
         children: [jsx(DotList, {
+          ariaRole: "presentation",
           items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(item => ({
             child: item.children
           })),
@@ -3627,6 +3656,7 @@ const DotAppSwitcherView = ({
     }), void 0)
   };
   return jsx(StyledAppSwitcher, Object.assign({
+    ariaLabel: "App Switcher",
     className: rootClasses,
     ModalProps: {
       style: {
@@ -3844,7 +3874,7 @@ const Brand = ({
     }), void 0), jsx(DotTooltip, Object.assign({
       title: "digital.ai"
     }, {
-      children: theme.palette.mode === "light" ? jsx(ForwardRef$1, {
+      children: theme.palette.mode === 'light' ? jsx(ForwardRef$1, {
         className: "company-name"
       }, void 0) : jsx(ForwardRef, {
         className: "company-name"
@@ -3875,7 +3905,7 @@ const Header = ({
       appLogo: appLogo,
       appLogoSmall: appLogoSmall,
       smallOnly: !isOpen
-    }, void 0) : jsxs(Fragment$1, {
+    }, void 0) : jsxs(Fragment, {
       children: [jsx(DotAvatar, Object.assign({}, titleAvatarProps), void 0), isOpen && jsx(DotTypography, Object.assign({
         variant: "h4"
       }, {
@@ -3950,6 +3980,7 @@ const DotSidebar = ({
       className: "go-back"
     }, {
       children: [jsx(DotIconButton, {
+        ariaLabel: "go back",
         className: "go-back-button",
         "data-testid": "back-button",
         iconId: backItem.iconId || 'back',
@@ -4138,7 +4169,7 @@ const DotAppToolbar = ({
       borderBottomColor: borderColor
     }
   }, {
-    children: [showMainMenu && jsxs(Fragment$1, {
+    children: [showMainMenu && jsxs(Fragment, {
       children: [jsx("div", Object.assign({
         className: "dot-main-menu-btn"
       }, {
@@ -4325,7 +4356,9 @@ const getChipsFromAutocomplete = ({
   isReadOnly: _isReadOnly = false,
   values
 }) => {
+  if (values === undefined) return;
   return values.map((option, index) => {
+    if (!option) return null;
     const hasStringValue = isString$1(option);
     const optionAsString = option;
     const optionAsObject = option;
@@ -4380,7 +4413,7 @@ const DotAutoComplete = ({
   onInputChange,
   onOpen,
   open,
-  options,
+  options: _options = [],
   persistentLabel,
   placeholder,
   readOnly: _readOnly = false,
@@ -4392,23 +4425,21 @@ const DotAutoComplete = ({
   warning: _warning = false
 }) => {
   const [showPlaceholder, setShowPlaceholder] = useState(!value && !defaultValue);
-  const {
-    iconId: actionIconId = 'add',
-    text: actionItemText,
-    onClick: onActionItemClick,
-    preventDuplicateInsertion
-  } = actionItem || {};
-  const isActionItemDefined = onActionItemClick !== undefined;
-  let highlightedOption = null;
   const [isOpened, setIsOpened] = useState(false);
   const [inputText, setInputText] = useState('');
+  // Used for focus management while popper is opened
+  const actionItemRef = useRef();
+  const onActionItemClick = actionItem === null || actionItem === void 0 ? void 0 : actionItem.onClick;
+  const allowActionButtonClick = !_freesolo && onActionItemClick;
+  const isActionItemDefined = onActionItemClick !== undefined;
+  const popperOpen = !_readOnly && (open || isOpened);
+  const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !_error && _warning && warningClassName;
   const rootClasses = useStylesWithRootClass(rootClassName$I, _size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$13, className, _readOnly ? 'read-only' : '', textFieldWarningClassName);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$13, _readOnly && 'read-only', textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !_dense && inputMediumClassName);
+  let highlightedOption = null;
   let textFieldInput;
-  // Used for focus management while popper is opened
-  const actionItemRef = useRef();
   const textFieldRef = element => {
     // We want to use this element in callback function
     textFieldInput = element;
@@ -4432,11 +4463,11 @@ const DotAutoComplete = ({
     setShowPlaceholder(parseAutoCompleteValue(val) === '');
   };
   const sortOptions = () => {
-    return _group ? options.sort((a, b) => {
+    return _group ? _options.sort((a, b) => {
       const aGroup = a.group ? a.group : '';
       const bGroup = b.group ? b.group : '';
       return -bGroup.localeCompare(aGroup);
-    }) : options;
+    }) : _options;
   };
   const handleBlur = event => {
     event.relatedTarget !== actionItemRef.current && setIsOpened(false);
@@ -4456,16 +4487,15 @@ const DotAutoComplete = ({
     }), void 0);
     // Disable action if customer explicitly enabled duplicate
     // item insertion and input text is found inside the 'options'
-    const isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, options);
+    const isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, _options);
     // Display warning icon if disabled
-    const actionStartIconId = isActionDisabled ? 'warning-solid' : actionIconId;
+    const actionStartIconId = isActionDisabled ? 'warning-solid' : (actionItem === null || actionItem === void 0 ? void 0 : actionItem.iconId) || 'add';
     const defaultText = inputText ? `Add "${inputText}"` : DEFAULT_ACTION_ITEM_TEXT;
-    const nonDisabledText = actionItemText ? actionItemText : defaultText;
+    const nonDisabledText = (actionItem === null || actionItem === void 0 ? void 0 : actionItem.text) || defaultText;
     const itemText = isActionDisabled ? 'Value already exists' : nonDisabledText;
-    // If simple text, we need to give it a class so that
-    // styling for displaying ellipsis on a long text
-    // can be applied. If it is custom node coming from the
-    // consumer, then leave it as it is.
+    // If simple text, we need to give it a class so that styling for
+    // displaying ellipsis on a long text can be applied. If it is
+    // custom node coming from the consumer, then leave it as it is.
     const itemTextNode = isString$1(itemText) ? jsx("span", Object.assign({
       className: "dot-action-item-text"
     }, {
@@ -4531,10 +4561,11 @@ const DotAutoComplete = ({
   }) || undefined;
   // Create callback when action item click event handler is defined,
   // free-solo mode is NOT set and 'Enter' key has been pressed
-  const handleKeyDown = !_freesolo && onActionItemClick && (event => {
+  const handleKeyDown = allowActionButtonClick && (event => {
     if (event.key === 'Enter') {
+      const isDuplicate = checkIfDuplicateItem(inputText, _options);
       // Do NOT execute callback if duplicate item or have selected an option from the dropdown
-      if (preventDuplicateInsertion && checkIfDuplicateItem(inputText, options) || highlightedOption) return;
+      if (preventDuplicateInsertion && isDuplicate || highlightedOption) return;
       onActionButtonClick();
     }
   }) || undefined;
@@ -4545,7 +4576,7 @@ const DotAutoComplete = ({
     values
   });
   const handleTagsRender = () => {
-    if (!_multiple) return;
+    if (!_multiple || isString$1(defaultValue)) return;
     return renderTags || handleRenderChips;
   };
   const renderErrorOrWarningIcon = () => {
@@ -4567,7 +4598,7 @@ const DotAutoComplete = ({
         children: icon
       }), void 0) : icon;
     };
-    return jsxs(Fragment$1, {
+    return jsxs(Fragment, {
       children: [loading && jsx(DotProgress, {
         color: "inherit",
         size: 20
@@ -4582,7 +4613,7 @@ const DotAutoComplete = ({
       inputRoot: inputRootClasses
     },
     "data-testid": dataTestId,
-    defaultValue: defaultValue,
+    defaultValue: _multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
     disabled: _disabled,
     filterOptions: filterOptions,
     filterSelectedOptions: _filterSelectedOptions,
@@ -4610,7 +4641,7 @@ const DotAutoComplete = ({
     onKeyDown: handleKeyDown,
     // We want to close the popper each time focus is shifted from the autocomplete
     onOpen: handleOpen,
-    open: !_readOnly && (open || isOpened),
+    open: popperOpen,
     options: sortOptions(),
     renderInput: params => {
       // InputBaseComponentProps is used here because that is the base
@@ -4628,7 +4659,7 @@ const DotAutoComplete = ({
         // at least pick up any styling that is used there. Should additional
         // functionality be added to DotInputText we will have to make a
         // decision about if/how to expose it here.
-        jsxs(Fragment$1, {
+        jsxs(Fragment, {
           children: [persistentLabel && jsx(DotInputLabel, Object.assign({
             "data-testid": dataTestId && `${dataTestId}-persistent-label`,
             id: inputId
@@ -4670,7 +4701,7 @@ const DotAutoComplete = ({
                 (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
               }
             },
-            placeholder: showPlaceholder ? placeholder : undefined,
+            placeholder: showPlaceholder && placeholder,
             required: _required,
             size: _size,
             variant: "outlined"
@@ -4728,7 +4759,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs).withConfig({
   componentId: "sc-7cg374-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]));
+}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]));
 
 const compareWidth = (parentEl, childEl) => {
   return parentEl.getBoundingClientRect().width < childEl.getBoundingClientRect().width;
@@ -5092,7 +5123,7 @@ const DotButtonToggle = ({
       key,
       value: optionValue
     };
-    const children = jsxs(Fragment$1, {
+    const children = jsxs(Fragment, {
       children: [optionIconId && jsx(DotIcon, {
         className: "dot-toggle-icon",
         iconId: optionIconId
@@ -5108,6 +5139,8 @@ const DotButtonToggle = ({
     }, {
       children: children
     }), void 0) : jsx(ToggleButton, Object.assign({}, commonProps, {
+      role: "button"
+    }, {
       children: children
     }), void 0);
   };
@@ -5138,7 +5171,9 @@ const TooltipToggleButton = /*#__PURE__*/forwardRef((_a, ref) => {
   return jsx(DotTooltip, Object.assign({}, CustomTooltipProps, {
     children: jsx(ToggleButton, Object.assign({
       ref: ref
-    }, props), void 0)
+    }, props, {
+      role: "button"
+    }), void 0)
   }), void 0);
 });
 
@@ -5295,6 +5330,7 @@ function DotCheckbox({
     onChange: handleChange,
     required: required,
     size: size,
+    tabIndex: 0,
     value: value
   }, void 0);
   return jsx(StyledFormControlLabel, {
@@ -5538,6 +5574,7 @@ const DotDialog = ({
       className: "dot-dialog-title"
     }, {
       children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsx(DotIconButton, {
+        ariaLabel: "close dialog",
         iconId: "close",
         onClick: handleCancel,
         size: "small"
@@ -6279,7 +6316,7 @@ const StyledRadioButton = styled(Radio).withConfig({
 
 function DotRadioButton({
   ariaLabel,
-  checked,
+  checked = false,
   className,
   'data-testid': dataTestId,
   disabled,
@@ -6297,8 +6334,10 @@ function DotRadioButton({
   const handleChange = event => {
     onChange && onChange(event, event.target.value);
   };
+  // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
   const radioControl = jsx(StyledRadioButton, {
-    "aria-label": ariaLabel,
+    "aria-checked": checked,
+    "aria-label": ariaLabel || label,
     checked: checked,
     classes: {
       root: rootClassName$r
@@ -6308,15 +6347,16 @@ function DotRadioButton({
     disabled: disabled,
     id: id,
     inputRef: inputRef,
-    name: name,
+    name: name || value,
     onChange: handleChange,
     required: required,
-    size: size
+    size: size,
+    tabIndex: 0
   }, void 0);
   return jsx(StyledFormControlLabel, {
     className: rootClasses,
     control: radioControl,
-    "aria-label": value,
+    "aria-label": ariaLabel || label,
     label: label || radioControl,
     labelPlacement: labelPlacement,
     value: value
@@ -6398,7 +6438,7 @@ const DotRadioGroup = ({
           children: endIcon
         }), void 0)]
       }), void 0), jsx(StyledRadioGroup, Object.assign({
-        "aria-label": ariaLabel,
+        "aria-label": ariaLabel || groupLabel,
         className: groupClassName,
         "data-testid": dataTestId,
         defaultValue: defaultValue,
@@ -6456,7 +6496,8 @@ const DotSwitch = ({
     },
     inputRef: inputRef,
     onChange: handleChange,
-    size: _size
+    size: _size,
+    tabIndex: 0
   }, void 0);
   return jsx(StyledFormControlLabel, {
     className: rootClassName$C,
@@ -6998,7 +7039,7 @@ const DotDynamicForm = ({
           }
         case 'custom-element':
           {
-            return jsx(Fragment, {
+            return jsx(Fragment$1, {
               children: customElement
             }, elementIndex);
           }
@@ -7033,6 +7074,7 @@ const DotDynamicForm = ({
 const rootClassName$p = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
+const placeholderClassName = 'dot-placeholder';
 const readOnlyClassName = 'dot-read-only';
 const editActionsClassName = 'dot-edit-actions';
 const editTextFieldClassName = 'dot-edit-text-field';
@@ -7042,7 +7084,7 @@ const StyledInlineEdit = styled.div.withConfig({
 })(["", ""], ({
   theme,
   fullWidth
-}) => css(["&.", "{display:", ";align-items:center;color:", ";min-width:", ";&:not(.", "):focus-visible{border-radius:", ";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:", ";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:", ";}", " .", " .dot-input{padding-left:", ";}.MuiOutlinedInput-input:focus{cursor:auto;}.dot-counter-adornment{.dot-counter-max-length{color:", ";}.dot-counter-length,.dot-counter-max-length{&.dot-counter-limit{color:", ";}&:hover{background:", ";}.editing-actions{display:flex;justify-content:flex-end;margin-top:", ";}.dot-icon-btn{background:", ";border:1px solid ", ";color:", ";margin-left:", ";padding:", ";}}}.dot-read-only-adornment{display:none;}.", "{display:flex;align-items:center;margin:", ";.dot-button{padding:", ";margin-top:", ";margin-bottom:", ";}}}"], rootClassName$p, 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), ({
+}) => css(["&.", "{display:", ";align-items:center;color:", ";min-width:", ";&:not(.", "):focus-visible{border-radius:", ";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:", ";background-color:", ";cursor:pointer;.dot-edit-icon{display:block;}}.dot-view-mode-typography{padding:", ";margin-bottom:0;&.", "{color:", ";}}}.dot-empty-value fieldset{border-color:", ";}.dot-adornment-error{color:", ";}.MuiInputBase-input{height:auto;}.MuiInputBase-root{margin-bottom:", ";}", " .", " .dot-input{padding-left:", ";}.MuiOutlinedInput-input:focus{cursor:auto;}.dot-counter-adornment{.dot-counter-max-length{color:", ";}.dot-counter-length,.dot-counter-max-length{&.dot-counter-limit{color:", ";}&:hover{background:", ";}.editing-actions{display:flex;justify-content:flex-end;margin-top:", ";}.dot-icon-btn{background:", ";border:1px solid ", ";color:", ";margin-left:", ";padding:", ";}}}.dot-read-only-adornment{display:none;}.", "{display:flex;align-items:center;margin:", ";.dot-button{padding:", ";margin-top:", ";margin-bottom:", ";}}}"], rootClassName$p, 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), placeholderClassName, theme.palette.grey[200], theme.palette.error[500], theme.palette.error[500], theme.spacing(0), ({
   typography
 }) => typography && `
          .MuiInputBase-root {
@@ -7141,6 +7183,7 @@ const DotInlineEdit = ({
   name,
   onChange,
   onEditStateChange,
+  placeholder,
   readOnly,
   selectTextOnEdit,
   startEditable: _startEditable = false,
@@ -7241,14 +7284,16 @@ const DotInlineEdit = ({
     }
   };
   const renderViewMode = () => {
-    const viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
-    const viewModeChildren = jsxs(Fragment$1, {
+    const bindingsValue = bindings ? applyBindings(bindings, inputValue) : null;
+    const typographyClasses = useStylesWithRootClass('dot-view-mode-typography', !inputValue && placeholderClassName);
+    const viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly && readOnlyClassName);
+    const viewModeChildren = jsxs(Fragment, {
       children: [jsx(DotTypography, Object.assign({
-        className: "dot-view-mode-typography",
+        className: typographyClasses,
         "data-testid": dataTestId && `${dataTestId}-view-mode-typography`,
         variant: _typography
       }, {
-        children: bindings ? applyBindings(bindings, inputValue) : inputValue
+        children: bindingsValue || inputValue || placeholder
       }), void 0), jsx(DotIcon, {
         className: "dot-edit-icon",
         "data-testid": dataTestId && `${dataTestId}-edit-icon`,
@@ -7272,7 +7317,7 @@ const DotInlineEdit = ({
   };
   const renderEditMode = () => {
     const textFieldClasses = useStylesWithRootClass(editTextFieldClassName, isSaveDisabled ? 'dot-empty-value' : '');
-    return jsxs(Fragment$1, {
+    return jsxs(Fragment, {
       children: [jsx(TextField, {
         InputProps: {
           endAdornment: renderEndAdornment()
@@ -7711,7 +7756,7 @@ const DotSplitButton = ({
     setOpen(false);
     onOptionClick(itemKey);
   };
-  return jsxs(Fragment$1, {
+  return jsxs(Fragment, {
     children: [jsxs(StyledSplitButtonGroup, Object.assign({
       "aria-label": ariaLabel,
       className: rootClasses,
@@ -7942,7 +7987,7 @@ const DotStepper = ({
               span: 6
             }
           }, {
-            children: jsxs(Fragment$1, {
+            children: jsxs(Fragment, {
               children: [displayCancelButton && jsx(DotButton, Object.assign({
                 className: "cancel-stepper",
                 onClick: onCancel,
@@ -8184,6 +8229,7 @@ const DotBodyCell = ({
   'data-testid': dataTestId,
   noWrap,
   onActionMenuTrigger,
+  style,
   typography,
   value
 }) => {
@@ -8248,7 +8294,8 @@ const DotBodyCell = ({
       root: rootClasses
     },
     colSpan: colspan,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    style: style
   }, {
     children: getTableCellValue()
   }), void 0);
@@ -8338,6 +8385,18 @@ const DotTableRow = ({
       rowId: id
     }, void 0);
   };
+  const parseMaxWidth = width => {
+    if (!width) {
+      return;
+    }
+    // if contains % then convert to % of viewport
+    if (width.includes('%')) {
+      const percent = Number.parseFloat(width) / 100;
+      return `calc(100vw * ${percent})`;
+    }
+    // if contains 'px' or 'vw' then pass as is
+    return `${width}`;
+  };
   return jsxs(StyledTableRowStyles, Object.assign({
     classes: {
       root: rootClasses
@@ -8353,6 +8412,9 @@ const DotTableRow = ({
         className: rowData.className && `${rowData.className}-${column.id}`,
         noWrap: column.truncate,
         onActionMenuTrigger: (menuRef, menuItem) => onActionMenuTrigger(menuRef, menuItem),
+        style: {
+          maxWidth: parseMaxWidth(column.width)
+        },
         value: rowData[column.id]
       }, index);
     })]
@@ -8426,7 +8488,7 @@ const DotTableBody = ({
       }, index);
     });
   };
-  return jsxs(Fragment$1, {
+  return jsxs(Fragment, {
     children: [jsx(StyledTableBody, Object.assign({
       classes: {
         root: rootClassName$c
@@ -8655,7 +8717,7 @@ const DotTableSelectionToolbar = ({
         variant: "h3"
       }, {
         children: [selectedRowsNumber, " selected"]
-      }), void 0), onClearAll && jsxs(Fragment$1, {
+      }), void 0), onClearAll && jsxs(Fragment, {
         children: [jsx(DotTypography, Object.assign({
           className: "dot-selected-rows-divider"
         }, {
@@ -8987,12 +9049,13 @@ const DotTableActions = ({
       onClick: action.onClick
     }, `action-${index}`));
   };
-  return jsxs(Fragment$1, {
+  return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, Object.assign({
       className: rootClassName$8,
       ref: wrapperRef
     }, {
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
+        ariaLabel: "more options",
         className: "dot-table-action-icon",
         iconId: "options",
         iconSize: "small",
@@ -9155,6 +9218,7 @@ const DotFileListItem = ({
         children: errorText
       }), void 0)]
     }), void 0), jsx(DotIconButton, {
+      ariaLabel: "delete file",
       className: `${rootClassName$5}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
@@ -9181,7 +9245,7 @@ const renderSelectFilesButton = (isUploadDisabled, onButtonClick) => jsx(DotButt
 }, {
   children: "Select file(s)"
 }), void 0);
-const renderActiveDragArea = () => jsxs(Fragment$1, {
+const renderActiveDragArea = () => jsxs(Fragment, {
   children: [jsx(DotIcon, {
     iconId: "upload-file"
   }, void 0), jsx(DotTypography, Object.assign({
@@ -9190,7 +9254,7 @@ const renderActiveDragArea = () => jsxs(Fragment$1, {
     children: "Drop the file(s) here ..."
   }), void 0)]
 }, void 0);
-const renderDragAndDropArea = (isUploadDisabled, onSelectButtonClick) => jsxs(Fragment$1, {
+const renderDragAndDropArea = (isUploadDisabled, onSelectButtonClick) => jsxs(Fragment, {
   children: [jsx(DotIcon, {
     iconId: "upload-file"
   }, void 0), jsxs(DotTypography, Object.assign({
@@ -9348,7 +9412,7 @@ const DotFileUpload = ({
         isUploadDisabled,
         open
       })]
-    }), void 0), maxSize && renderMaxSizeMessage(maxSize), maxFiles && renderMaxFilesMessage(maxFiles, maxFilesClasses), !hideFilesList && jsx(DotList, {
+    }), void 0), !!maxSize && renderMaxSizeMessage(maxSize), !!maxFiles && renderMaxFilesMessage(maxFiles, maxFilesClasses), !hideFilesList || jsx(DotList, {
       "data-testid": dataTestId && `${dataTestId}-file-list`,
       items: uploadedFilesList,
       width: "100%"
@@ -9746,12 +9810,13 @@ const DotDatePicker = ({
         open: open,
         showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
         slots: {
-          openPickerButton: pickerButtonProps => jsxs(Fragment$1, {
+          openPickerButton: pickerButtonProps => jsxs(Fragment, {
             children: [error && jsx(DotIcon, {
               className: "dot-error-icon",
               "data-testid": "dot-error-icon",
               iconId: "error-solid"
             }, void 0), jsx(DotIconButton, {
+              ariaLabel: "Open date picker",
               "data-testid": "date-picker-open-btn",
               iconId: "calendar",
               onClick: pickerButtonProps.onClick,
@@ -10176,12 +10241,13 @@ const DotTimePicker = ({
             error,
             focused: isComponentReadOnly ? false : undefined,
             InputProps: {
-              endAdornment: jsxs(Fragment$1, {
+              endAdornment: jsxs(Fragment, {
                 children: [error && jsx(DotIcon, {
                   className: "dot-error-icon",
                   "data-testid": dataTestId && `${dataTestId}-input-error-icon`,
                   iconId: "error-solid"
                 }, void 0), !_disableOpenPicker && !isComponentReadOnly && !disabled && jsx(DotIconButton, {
+                  ariaLabel: "Open time picker",
                   "data-testid": dataTestId && `${dataTestId}-open-btn`,
                   iconId: "pending-clock",
                   onClick: _event => handleTimePickerButtonClick(),