@digital-ai/dot-components 2.8.2 → 2.10.0

package/index.umd.js

@@ -163,6 +163,7 @@
         title = _a.title;
       var rootClasses = useStylesWithRootClass('dot-tooltip', className);
       return title ? jsxRuntime.jsx(material.Tooltip, __assign({
+        "aria-hidden": open ? false : true,
         "aria-label": ariaLabel,
         className: rootClasses,
         "data-testid": dataTestId,
@@ -204,7 +205,7 @@
       }, {
         children: jsxRuntime.jsx(StyledIcon, __assign({
           "aria-hidden": "false",
-          "aria-label": ariaLabel,
+          "aria-label": ariaLabel || iconId + " icon",
           classes: {
             root: rootClasses
           },
@@ -213,6 +214,7 @@
           role: ariaRole
         }, {
           children: jsxRuntime.jsx("i", {
+            "aria-label": ariaLabel || iconId + " icon}",
             className: "icon-" + iconId + " dot-i",
             "data-testid": dataTestId && dataTestId + "-i",
             role: ariaRole
@@ -312,13 +314,15 @@
         square: square
       }, {
         children: [jsxRuntime.jsxs(material.AccordionSummary, __assign({
+          "aria-label": ariaLabel || summary,
           classes: {
             root: summaryClassName
           },
           "data-testid": dataTestId + "-summary",
           expandIcon: jsxRuntime.jsx(DotIcon, {
             iconId: "chevron-down"
-          }, void 0)
+          }, void 0),
+          role: "button"
         }, {
           children: [startIcon, jsxRuntime.jsx(DotTooltip, __assign({
             "data-testid": "accordion-tooltip",
@@ -1850,10 +1854,21 @@
       var dataTestId = _a["data-testid"],
         iconId = _a.iconId,
         imageSrc = _a.imageSrc,
+        number = _a.number,
         size = _a.size,
         text = _a.text,
         type = _a.type;
+      var parsedNumber = function parsedNumber() {
+        if (!isNumber(number)) return;
+        var numberArray = number.toString().split('');
+        if (numberArray.length > 1) {
+          return "" + numberArray[0] + numberArray[1];
+        } else {
+          return number;
+        }
+      };
       var parsedText = function parsedText() {
+        if (!isString$1(text)) return;
         var textArray = text.split(' ');
         if (textArray.length > 1) {
           var firstInitial = textArray[0].slice(0, 1);
@@ -1880,7 +1895,7 @@
         return jsxRuntime.jsx(DotTypography, __assign({
           variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
         }, {
-          children: parsedText()
+          children: parsedNumber() || parsedText()
         }), void 0);
       }
       return null;
@@ -1898,6 +1913,7 @@
         iconId = _a.iconId,
         imageSrc = _a.imageSrc,
         onClick = _a.onClick,
+        number = _a.number,
         _d = _a.size,
         size = _d === void 0 ? 'medium' : _d,
         _e = _a.tabIndex,
@@ -1921,7 +1937,7 @@
       }, {
         children: jsxRuntime.jsx(StyledAvatar, __assign({
           alt: alt,
-          "aria-label": ariaLabel,
+          "aria-label": ariaLabel || alt,
           className: size,
           classes: {
             root: rootClasses,
@@ -1943,6 +1959,7 @@
             "data-testid": dataTestId,
             iconId: iconId,
             imageSrc: imageSrc,
+            number: number,
             size: size,
             text: text,
             type: type
@@ -2172,6 +2189,7 @@
           },
           color: color,
           "data-testid": dataTestId,
+          role: "progressbar",
           size: size,
           thickness: thickness,
           value: value,
@@ -2601,7 +2619,7 @@
         title: tooltip
       }, {
         children: jsxRuntime.jsx(StyledIconButton, __assign({
-          "aria-label": ariaLabel,
+          "aria-label": ariaLabel || tooltip || iconId + " icon button",
           classes: {
             root: rootClasses
           },
@@ -2640,6 +2658,7 @@
         role: "heading"
       }, {
         children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "close drawer",
           className: "close-button",
           iconId: "close",
           onClick: onClose
@@ -2674,6 +2693,7 @@
         role: ariaRole
       }, {
         children: [children, !headerExists && variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "close drawer",
           className: "dot-drawer-close-button",
           iconId: "close",
           onClick: onClose
@@ -2747,6 +2767,7 @@
       return jsxRuntime.jsxs(StyledDrawer, __assign({
         ModalProps: ModalProps,
         PaperProps: __assign(__assign({}, PaperProps), {
+          'aria-label': ariaLabel,
           role: ariaRole
         }),
         anchor: anchor,
@@ -2804,7 +2825,8 @@
         index = _a.index;
       if (item.text) {
         return jsxRuntime.jsx(material.ListSubheader, __assign({
-          disableSticky: true
+          disableSticky: true,
+          role: "heading"
         }, {
           children: jsxRuntime.jsx(DotTypography, __assign({
             variant: "overline"
@@ -2815,7 +2837,8 @@
       }
       return jsxRuntime.jsx(material.Divider, {
         "aria-hidden": true,
-        "data-testid": "divider-" + index
+        "data-testid": "divider-" + index,
+        role: "separator"
       }, void 0);
     };
     var DotList = function DotList(_a) {
@@ -2880,9 +2903,11 @@
             }
           };
           if (item.child) {
-            return jsxRuntime.jsx(React.Fragment, {
+            return jsxRuntime.jsx("div", __assign({
+              role: "listitem"
+            }, {
               children: item.child
-            }, "item-child-" + index);
+            }), "item-child-" + index);
           }
           if (item.divider) {
             return jsxRuntime.jsx(DotListDivider, {
@@ -3315,7 +3340,7 @@
             startAdornment: startAdornmentIcon(),
             endAdornment: endAdornmentIconOrText()
           },
-          "aria-label": name,
+          "aria-label": name || label,
           autoComplete: autoComplete,
           autoFocus: autoFocus,
           classes: {
@@ -3338,6 +3363,8 @@
           },
           inputRef: inputRef,
           label: persistentLabel ? null : label,
+          maxRows: multiline ? maxRows : null,
+          minRows: multiline ? minRows : null,
           multiline: multiline,
           name: name,
           onBlur: onBlur,
@@ -3347,9 +3374,9 @@
           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"
@@ -3406,6 +3433,7 @@
         iconId: "search"
       }, void 0);
       var clearSearchIcon = jsxRuntime.jsx(DotIconButton, {
+        ariaLabel: "clear search text",
         iconId: "close",
         onClick: handleClear,
         size: "small",
@@ -3482,7 +3510,7 @@
         "data-testid": dataTestId
       }, {
         children: [!showCopiedIcon && jsxRuntime.jsx(DotIconButton, {
-          ariaLabel: ariaLabel,
+          ariaLabel: ariaLabel || 'copy to clipboard',
           "data-testid": dataTestId + "-button",
           iconId: "duplicate",
           onClick: copy,
@@ -3973,7 +4001,7 @@
               }, void 0)
             }), void 0), jsxRuntime.jsx("div", __assign({
               className: "product-applications",
-              role: "list"
+              role: "presentation"
             }, {
               children: filteredAppInstances()
             }), void 0)]
@@ -3984,6 +4012,7 @@
             role: "contentinfo"
           }, {
             children: [jsxRuntime.jsx(DotList, {
+              ariaRole: "presentation",
               items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(function (item) {
                 return {
                   child: item.children
@@ -4020,6 +4049,7 @@
         }), void 0)
       };
       return jsxRuntime.jsx(StyledAppSwitcher, __assign({
+        ariaLabel: "App Switcher",
         className: rootClasses,
         ModalProps: {
           style: {
@@ -4238,7 +4268,7 @@
         }), void 0), jsxRuntime.jsx(DotTooltip, __assign({
           title: "digital.ai"
         }, {
-          children: theme.palette.mode === "light" ? jsxRuntime.jsx(ForwardRef$1, {
+          children: theme.palette.mode === 'light' ? jsxRuntime.jsx(ForwardRef$1, {
             className: "company-name"
           }, void 0) : jsxRuntime.jsx(ForwardRef, {
             className: "company-name"
@@ -4359,6 +4389,7 @@
           className: "go-back"
         }, {
           children: [jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "go back",
             className: "go-back-button",
             "data-testid": "back-button",
             iconId: backItem.iconId || 'back',
@@ -4767,7 +4798,9 @@
         _c = _a.isReadOnly,
         isReadOnly = _c === void 0 ? false : _c,
         values = _a.values;
+      if (values === undefined) return;
       return values.map(function (option, index) {
+        if (!option) return null;
         var hasStringValue = isString$1(option);
         var optionAsString = option;
         var optionAsObject = option;
@@ -4834,44 +4867,43 @@
         onInputChange = _a.onInputChange,
         onOpen = _a.onOpen,
         open = _a.open,
-        options = _a.options,
+        _k = _a.options,
+        options = _k === void 0 ? [] : _k,
         persistentLabel = _a.persistentLabel,
         placeholder = _a.placeholder,
-        _k = _a.readOnly,
-        readOnly = _k === void 0 ? false : _k,
+        _l = _a.readOnly,
+        readOnly = _l === void 0 ? false : _l,
         renderOption = _a.renderOption,
         renderTags = _a.renderTags,
-        _l = _a.required,
-        required = _l === void 0 ? false : _l,
-        _m = _a.size,
-        size = _m === void 0 ? 'small' : _m,
+        _m = _a.required,
+        required = _m === void 0 ? false : _m,
+        _o = _a.size,
+        size = _o === void 0 ? 'small' : _o,
         value = _a.value,
-        _o = _a.warning,
-        warning = _o === void 0 ? false : _o;
-      var _p = React.useState(!value && !defaultValue),
-        showPlaceholder = _p[0],
-        setShowPlaceholder = _p[1];
-      var _q = actionItem || {},
-        _r = _q.iconId,
-        actionIconId = _r === void 0 ? 'add' : _r,
-        actionItemText = _q.text,
-        onActionItemClick = _q.onClick,
-        preventDuplicateInsertion = _q.preventDuplicateInsertion;
+        _p = _a.warning,
+        warning = _p === void 0 ? false : _p;
+      var _q = React.useState(!value && !defaultValue),
+        showPlaceholder = _q[0],
+        setShowPlaceholder = _q[1];
+      var _r = React.useState(false),
+        isOpened = _r[0],
+        setIsOpened = _r[1];
+      var _s = React.useState(''),
+        inputText = _s[0],
+        setInputText = _s[1];
+      // Used for focus management while popper is opened
+      var actionItemRef = React.useRef();
+      var onActionItemClick = actionItem === null || actionItem === void 0 ? void 0 : actionItem.onClick;
+      var allowActionButtonClick = !freesolo && onActionItemClick;
       var isActionItemDefined = onActionItemClick !== undefined;
-      var highlightedOption = null;
-      var _s = React.useState(false),
-        isOpened = _s[0],
-        setIsOpened = _s[1];
-      var _t = React.useState(''),
-        inputText = _t[0],
-        setInputText = _t[1];
+      var popperOpen = !readOnly && (open || isOpened);
+      var preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
       var textFieldWarningClassName = !error && warning && warningClassName;
       var rootClasses = useStylesWithRootClass(rootClassName$I, size === 'medium' && inputMediumClassName, className);
-      var textFieldRootClasses = useStylesWithRootClass(rootClassName$13, className, readOnly ? 'read-only' : '', textFieldWarningClassName);
+      var textFieldRootClasses = useStylesWithRootClass(rootClassName$13, readOnly && 'read-only', textFieldWarningClassName);
       var inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
+      var highlightedOption = null;
       var textFieldInput;
-      // Used for focus management while popper is opened
-      var actionItemRef = React.useRef();
       var textFieldRef = function textFieldRef(element) {
         // We want to use this element in callback function
         textFieldInput = element;
@@ -4920,14 +4952,13 @@
         // item insertion and input text is found inside the 'options'
         var isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, options);
         // Display warning icon if disabled
-        var actionStartIconId = isActionDisabled ? 'warning-solid' : actionIconId;
+        var actionStartIconId = isActionDisabled ? 'warning-solid' : (actionItem === null || actionItem === void 0 ? void 0 : actionItem.iconId) || 'add';
         var defaultText = inputText ? "Add \"" + inputText + "\"" : DEFAULT_ACTION_ITEM_TEXT;
-        var nonDisabledText = actionItemText ? actionItemText : defaultText;
+        var nonDisabledText = (actionItem === null || actionItem === void 0 ? void 0 : actionItem.text) || defaultText;
         var 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.
         var itemTextNode = isString$1(itemText) ? jsxRuntime.jsx("span", __assign({
           className: "dot-action-item-text"
         }, {
@@ -4995,10 +5026,11 @@
       } || undefined;
       // Create callback when action item click event handler is defined,
       // free-solo mode is NOT set and 'Enter' key has been pressed
-      var handleKeyDown = !freesolo && onActionItemClick && function (event) {
+      var handleKeyDown = allowActionButtonClick && function (event) {
         if (event.key === 'Enter') {
+          var 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;
@@ -5011,7 +5043,7 @@
         });
       };
       var handleTagsRender = function handleTagsRender() {
-        if (!multiple) return;
+        if (!multiple || isString$1(defaultValue)) return;
         return renderTags || handleRenderChips;
       };
       var renderErrorOrWarningIcon = function renderErrorOrWarningIcon() {
@@ -5048,7 +5080,7 @@
           inputRoot: inputRootClasses
         },
         "data-testid": dataTestId,
-        defaultValue: defaultValue,
+        defaultValue: multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
         disabled: disabled,
         filterOptions: filterOptions,
         filterSelectedOptions: filterSelectedOptions,
@@ -5082,7 +5114,7 @@
         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: function (params) {
           // InputBaseComponentProps is used here because that is the base
@@ -5142,7 +5174,7 @@
                     (_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"
@@ -5207,7 +5239,7 @@
       componentId: "sc-7cg374-1"
     })(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
+      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
     });
     var templateObject_1$I, templateObject_2$F, templateObject_3$9, templateObject_4$7;
 
@@ -5604,6 +5636,8 @@
         }, {
           children: children
         }), void 0) : jsxRuntime.jsx(material.ToggleButton, __assign({}, commonProps, {
+          role: "button"
+        }, {
           children: children
         }), void 0);
       };
@@ -5632,7 +5666,9 @@
       return jsxRuntime.jsx(DotTooltip, __assign({}, CustomTooltipProps, {
         children: jsxRuntime.jsx(material.ToggleButton, __assign({
           ref: ref
-        }, props), void 0)
+        }, props, {
+          role: "button"
+        }), void 0)
       }), void 0);
     });
 
@@ -5792,6 +5828,7 @@
         onChange: handleChange,
         required: required,
         size: size,
+        tabIndex: 0,
         value: value
       }, void 0);
       return jsxRuntime.jsx(StyledFormControlLabel, {
@@ -6059,6 +6096,7 @@
           className: "dot-dialog-title"
         }, {
           children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "close dialog",
             iconId: "close",
             onClick: handleCancel,
             size: "small"
@@ -6838,27 +6876,30 @@
 
     function DotRadioButton(_a) {
       var ariaLabel = _a.ariaLabel,
-        checked = _a.checked,
+        _b = _a.checked,
+        checked = _b === void 0 ? false : _b,
         className = _a.className,
         dataTestId = _a["data-testid"],
         disabled = _a.disabled,
         id = _a.id,
         inputRef = _a.inputRef,
         label = _a.label,
-        _b = _a.labelPlacement,
-        labelPlacement = _b === void 0 ? 'end' : _b,
+        _c = _a.labelPlacement,
+        labelPlacement = _c === void 0 ? 'end' : _c,
         name = _a.name,
         onChange = _a.onChange,
         required = _a.required,
-        _c = _a.size,
-        size = _c === void 0 ? 'medium' : _c,
+        _d = _a.size,
+        size = _d === void 0 ? 'medium' : _d,
         value = _a.value;
       var rootClasses = useStylesWithRootClass(rootClassName$C, className);
       var handleChange = function 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
       var radioControl = jsxRuntime.jsx(StyledRadioButton, {
-        "aria-label": ariaLabel,
+        "aria-checked": checked,
+        "aria-label": ariaLabel || label,
         checked: checked,
         classes: {
           root: rootClassName$r
@@ -6868,15 +6909,16 @@
         disabled: disabled,
         id: id,
         inputRef: inputRef,
-        name: name,
+        name: name || value,
         onChange: handleChange,
         required: required,
-        size: size
+        size: size,
+        tabIndex: 0
       }, void 0);
       return jsxRuntime.jsx(StyledFormControlLabel, {
         className: rootClasses,
         control: radioControl,
-        "aria-label": value,
+        "aria-label": ariaLabel || label,
         label: label || radioControl,
         labelPlacement: labelPlacement,
         value: value
@@ -6961,7 +7003,7 @@
               children: endIcon
             }), void 0)]
           }), void 0), jsxRuntime.jsx(StyledRadioGroup, __assign({
-            "aria-label": ariaLabel,
+            "aria-label": ariaLabel || groupLabel,
             className: groupClassName,
             "data-testid": dataTestId,
             defaultValue: defaultValue,
@@ -7023,7 +7065,8 @@
         },
         inputRef: inputRef,
         onChange: handleChange,
-        size: size
+        size: size,
+        tabIndex: 0
       }, void 0);
       return jsxRuntime.jsx(StyledFormControlLabel, {
         className: rootClassName$C,
@@ -7599,6 +7642,7 @@
     var rootClassName$p = 'dot-inline-edit';
     var editModeClassName = 'dot-edit-mode';
     var viewModeClassName = 'dot-view-mode';
+    var placeholderClassName = 'dot-placeholder';
     var readOnlyClassName = 'dot-read-only';
     var editActionsClassName = 'dot-edit-actions';
     var editTextFieldClassName = 'dot-edit-text-field';
@@ -7608,7 +7652,7 @@
     })(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
         fullWidth = _a.fullWidth;
-      return styled.css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n    &.", " {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", ";\n\n      &:not(.", "):focus-visible {\n        border-radius: ", ";\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: ", ";\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: ", ";\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", ";\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          &:hover {\n            background: ", ";\n          }\n\n          .editing-actions {\n            display: flex;\n            justify-content: flex-end;\n            margin-top: ", ";\n          }\n\n          .dot-icon-btn {\n            background: ", ";\n            border: 1px solid ", ";\n            color: ", ";\n            margin-left: ", ";\n            padding: ", ";\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: ", ";\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", ";\n\n      &:not(.", "):focus-visible {\n        border-radius: ", ";\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: ", ";\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: ", ";\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", ";\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          &:hover {\n            background: ", ";\n          }\n\n          .editing-actions {\n            display: flex;\n            justify-content: flex-end;\n            margin-top: ", ";\n          }\n\n          .dot-icon-btn {\n            background: ", ";\n            border: 1px solid ", ";\n            color: ", ";\n            margin-left: ", ";\n            padding: ", ";\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: ", ";\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "])), 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), function (_a) {
+      return styled.css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n    &.", " {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", ";\n\n      &:not(.", "):focus-visible {\n        border-radius: ", ";\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: ", ";\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            color: ", ";\n          }\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: ", ";\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", ";\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          &:hover {\n            background: ", ";\n          }\n\n          .editing-actions {\n            display: flex;\n            justify-content: flex-end;\n            margin-top: ", ";\n          }\n\n          .dot-icon-btn {\n            background: ", ";\n            border: 1px solid ", ";\n            color: ", ";\n            margin-left: ", ";\n            padding: ", ";\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: ", ";\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      display: ", ";\n      align-items: center;\n      color: ", ";\n      min-width: ", ";\n\n      &:not(.", "):focus-visible {\n        border-radius: ", ";\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: ", ";\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            color: ", ";\n          }\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: ", ";\n      }\n\n      /* Conditionally setting font related props */\n      ", "\n\n      .", " .dot-input {\n        padding-left: ", ";\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          &:hover {\n            background: ", ";\n          }\n\n          .editing-actions {\n            display: flex;\n            justify-content: flex-end;\n            margin-top: ", ";\n          }\n\n          .dot-icon-btn {\n            background: ", ";\n            border: 1px solid ", ";\n            color: ", ";\n            margin-left: ", ";\n            padding: ", ";\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: ", ";\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n      }\n    }\n  "])), 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), 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 + ";\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], theme.palette.grey[50], theme.spacing(0.5), theme.palette.grey[0], theme.palette.grey[300], theme.palette.grey[700], theme.spacing(1), theme.spacing(0.25), editActionsClassName, theme.spacing(0, 0, 0, 0.5), theme.spacing(0.75), theme.spacing(0), theme.spacing(0));
@@ -7705,6 +7749,7 @@
         name = _a.name,
         onChange = _a.onChange,
         onEditStateChange = _a.onEditStateChange,
+        placeholder = _a.placeholder,
         readOnly = _a.readOnly,
         selectTextOnEdit = _a.selectTextOnEdit,
         _d = _a.startEditable,
@@ -7861,14 +7906,16 @@
         }
       };
       var renderViewMode = function renderViewMode() {
-        var viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
+        var bindingsValue = bindings ? applyBindings(bindings, inputValue) : null;
+        var typographyClasses = useStylesWithRootClass('dot-view-mode-typography', !inputValue && placeholderClassName);
+        var viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly && readOnlyClassName);
         var viewModeChildren = jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(DotTypography, __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), jsxRuntime.jsx(DotIcon, {
             className: "dot-edit-icon",
             "data-testid": dataTestId && dataTestId + "-edit-icon",
@@ -8899,6 +8946,7 @@
         dataTestId = _a["data-testid"],
         noWrap = _a.noWrap,
         onActionMenuTrigger = _a.onActionMenuTrigger,
+        style = _a.style,
         typography = _a.typography,
         value = _a.value;
       var _b = React.useState(false),
@@ -8968,7 +9016,8 @@
           root: rootClasses
         },
         colSpan: colspan,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        style: style
       }, {
         children: getTableCellValue()
       }), void 0);
@@ -9061,6 +9110,18 @@
           rowId: id
         }, void 0);
       };
+      var parseMaxWidth = function parseMaxWidth(width) {
+        if (!width) {
+          return;
+        }
+        // if contains % then convert to % of viewport
+        if (width.includes('%')) {
+          var percent = Number.parseFloat(width) / 100;
+          return "calc(100vw * " + percent + ")";
+        }
+        // if contains 'px' or 'vw' then pass as is
+        return "" + width;
+      };
       return jsxRuntime.jsxs(StyledTableRowStyles, __assign({
         classes: {
           root: rootClasses
@@ -9078,6 +9139,9 @@
             onActionMenuTrigger: function (menuRef, menuItem) {
               return onActionMenuTrigger(menuRef, menuItem);
             },
+            style: {
+              maxWidth: parseMaxWidth(column.width)
+            },
             value: rowData[column.id]
           }, index);
         })]
@@ -9774,6 +9838,7 @@
           ref: wrapperRef
         }, {
           children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "more options",
             className: "dot-table-action-icon",
             iconId: "options",
             iconSize: "small",
@@ -9965,6 +10030,7 @@
             children: errorText
           }), void 0)]
         }), void 0), jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "delete file",
           className: rootClassName$5 + "-end-icon",
           "data-testid": dataTestId && dataTestId + "-end-icon",
           disabled: disableDelete,
@@ -10179,7 +10245,7 @@
             isUploadDisabled: isUploadDisabled,
             open: open
           })]
-        }), void 0), maxSize && renderMaxSizeMessage(maxSize), maxFiles && renderMaxFilesMessage(maxFiles, maxFilesClasses), !hideFilesList && jsxRuntime.jsx(DotList, {
+        }), void 0), !!maxSize && renderMaxSizeMessage(maxSize), !!maxFiles && renderMaxFilesMessage(maxFiles, maxFilesClasses), !hideFilesList || jsxRuntime.jsx(DotList, {
           "data-testid": dataTestId && dataTestId + "-file-list",
           items: uploadedFilesList,
           width: "100%"
@@ -10618,6 +10684,7 @@
                     "data-testid": "dot-error-icon",
                     iconId: "error-solid"
                   }, void 0), jsxRuntime.jsx(DotIconButton, {
+                    ariaLabel: "Open date picker",
                     "data-testid": "date-picker-open-btn",
                     iconId: "calendar",
                     onClick: pickerButtonProps.onClick,
@@ -11110,6 +11177,7 @@
                       "data-testid": dataTestId && dataTestId + "-input-error-icon",
                       iconId: "error-solid"
                     }, void 0), !disableOpenPicker && !isComponentReadOnly && !disabled && jsxRuntime.jsx(DotIconButton, {
+                      ariaLabel: "Open time picker",
                       "data-testid": dataTestId && dataTestId + "-open-btn",
                       iconId: "pending-clock",
                       onClick: function (_event) {