@digital-ai/dot-components 2.9.0 → 2.10.0

package/CHANGE_LOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.10.0](https://www.npmjs.com/package/@digital-ai/dot-components) (06/22/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.9.0...2.10.0)
+
+**Features:**
+
+- S-92995: Add placeholder prop to inline edit [\#1519](https://github.com/digital-ai/dot-components/pull/1519) ([CWSites](https://github.com/CWSites))
+
+**Fixed bugs:**
+
+- S-91947: Fix table truncation defect [\#1526](https://github.com/digital-ai/dot-components/pull/1526) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- S-91982: update keyboard functions [\#1524](https://github.com/digital-ai/dot-components/pull/1524) ([CWSites](https://github.com/CWSites))
+
 ## [2.9.0](https://www.npmjs.com/package/@digital-ai/dot-components) (06/07/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.2...2.9.0)
@@ -835,10 +851,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.8.0...1.8.1)
 
-**Fixed bugs:**
-
-- D-19803: Fix DotDrawer regression [\#980](https://github.com/digital-ai/dot-components/pull/980) ([selsemore](https://github.com/selsemore))
-
 **Misc:**
 
 - S-76846: NX major upgrade to `13.7.3` [\#952](https://github.com/digital-ai/dot-components/pull/952) ([CWSites](https://github.com/CWSites))
@@ -854,6 +866,7 @@
 
 **Fixed bugs:**
 
+- D-19803: Fix DotDrawer regression [\#980](https://github.com/digital-ai/dot-components/pull/980) ([selsemore](https://github.com/selsemore))
 - D-19722: `Table`: Fix Storybook issues by refactoring Table's story. [\#974](https://github.com/digital-ai/dot-components/pull/974) ([dmiletic85](https://github.com/dmiletic85))
 - D-19713: Do not show alert banner close button if onClose not provided [\#973](https://github.com/digital-ai/dot-components/pull/973) ([selsemore](https://github.com/selsemore))
 
@@ -1158,6 +1171,7 @@
 - D-18997: when specified width of sidebar, it should be applied properly [\#737](https://github.com/digital-ai/dot-components/pull/737) ([CWSites](https://github.com/CWSites))
 - D-18986: update app toolbar to be dense by default [\#735](https://github.com/digital-ai/dot-components/pull/735) ([CWSites](https://github.com/CWSites))
 - D-18985: update menu list to be content-box sizing [\#734](https://github.com/digital-ai/dot-components/pull/734) ([CWSites](https://github.com/CWSites))
+- D-18963: add ariaLabel to sidebar collapse button [\#731](https://github.com/digital-ai/dot-components/pull/731) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -1175,7 +1189,6 @@
 
 **Fixed bugs:**
 
-- D-18963: add ariaLabel to sidebar collapse button [\#731](https://github.com/digital-ai/dot-components/pull/731) ([CWSites](https://github.com/CWSites))
 - D-18979: export `Tooltip` component [\#729](https://github.com/digital-ai/dot-components/pull/729) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -1408,7 +1421,6 @@
 - Upload of commit icon [\#575](https://github.com/digital-ai/dot-components/pull/575) ([BojanKocijan](https://github.com/BojanKocijan))
 - S-76321: Remove PB-related code from dot-components repo [\#570](https://github.com/digital-ai/dot-components/pull/570) ([dmiletic85](https://github.com/dmiletic85))
 - Issue \#562: Fix EmptyState behavior when no imageSrc prop is passed [\#568](https://github.com/digital-ai/dot-components/pull/568) ([selsemore](https://github.com/selsemore))
-- Issue \#566: Fix DotPill console warning message [\#567](https://github.com/digital-ai/dot-components/pull/567) ([selsemore](https://github.com/selsemore))
 - Navigation rail improvements [\#565](https://github.com/digital-ai/dot-components/pull/565) ([dmiletic85](https://github.com/dmiletic85))
 - New icons 27 5 2021 [\#564](https://github.com/digital-ai/dot-components/pull/564) ([BojanKocijan](https://github.com/BojanKocijan))
 - Add isUnderToolbar property to Sidebar for use beneath AppToolbar [\#560](https://github.com/digital-ai/dot-components/pull/560) ([selsemore](https://github.com/selsemore))

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",
@@ -1708,7 +1712,7 @@ const DotAvatar = ({
   }, {
     children: jsx(StyledAvatar, Object.assign({
       alt: alt,
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabel || alt,
       className: _size,
       classes: {
         root: rootClasses,
@@ -1932,6 +1936,7 @@ const DotProgress = ({
       },
       color: _color,
       "data-testid": dataTestId,
+      role: "progressbar",
       size: _size,
       thickness: _thickness,
       value: value,
@@ -2462,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,
@@ -2518,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"
@@ -2529,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 = ({
@@ -2584,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, {
@@ -2671,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,
@@ -2992,7 +3002,7 @@ const DotInputText = ({
         startAdornment: startAdornmentIcon(),
         endAdornment: endAdornmentIconOrText()
       },
-      "aria-label": name,
+      "aria-label": name || label,
       autoComplete: _autoComplete,
       autoFocus: autoFocus,
       classes: {
@@ -3015,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,
@@ -3024,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"
@@ -3548,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"
     }, {
@@ -3598,7 +3610,7 @@ const DotAppSwitcherView = ({
           }, void 0)
         }), void 0), jsx("div", Object.assign({
           className: "product-applications",
-          role: "list"
+          role: "presentation"
         }, {
           children: filteredAppInstances()
         }), void 0)]
@@ -3609,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
           })),
@@ -3643,6 +3656,7 @@ const DotAppSwitcherView = ({
     }), void 0)
   };
   return jsx(StyledAppSwitcher, Object.assign({
+    ariaLabel: "App Switcher",
     className: rootClasses,
     ModalProps: {
       style: {
@@ -3891,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"
       }, {
@@ -4155,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"
       }, {
@@ -4584,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
@@ -4645,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
@@ -5109,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
@@ -5125,6 +5139,8 @@ const DotButtonToggle = ({
     }, {
       children: children
     }), void 0) : jsx(ToggleButton, Object.assign({}, commonProps, {
+      role: "button"
+    }, {
       children: children
     }), void 0);
   };
@@ -5155,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);
 });
 
@@ -5312,6 +5330,7 @@ function DotCheckbox({
     onChange: handleChange,
     required: required,
     size: size,
+    tabIndex: 0,
     value: value
   }, void 0);
   return jsx(StyledFormControlLabel, {
@@ -6297,7 +6316,7 @@ const StyledRadioButton = styled(Radio).withConfig({
 
 function DotRadioButton({
   ariaLabel,
-  checked,
+  checked = false,
   className,
   'data-testid': dataTestId,
   disabled,
@@ -6315,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
@@ -6326,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
@@ -6416,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,
@@ -6474,7 +6496,8 @@ const DotSwitch = ({
     },
     inputRef: inputRef,
     onChange: handleChange,
-    size: _size
+    size: _size,
+    tabIndex: 0
   }, void 0);
   return jsx(StyledFormControlLabel, {
     className: rootClassName$C,
@@ -7016,7 +7039,7 @@ const DotDynamicForm = ({
           }
         case 'custom-element':
           {
-            return jsx(Fragment, {
+            return jsx(Fragment$1, {
               children: customElement
             }, elementIndex);
           }
@@ -7051,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';
@@ -7060,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 {
@@ -7159,6 +7183,7 @@ const DotInlineEdit = ({
   name,
   onChange,
   onEditStateChange,
+  placeholder,
   readOnly,
   selectTextOnEdit,
   startEditable: _startEditable = false,
@@ -7259,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`,
@@ -7290,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()
@@ -7729,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,
@@ -7960,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,
@@ -8202,6 +8229,7 @@ const DotBodyCell = ({
   'data-testid': dataTestId,
   noWrap,
   onActionMenuTrigger,
+  style,
   typography,
   value
 }) => {
@@ -8266,7 +8294,8 @@ const DotBodyCell = ({
       root: rootClasses
     },
     colSpan: colspan,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    style: style
   }, {
     children: getTableCellValue()
   }), void 0);
@@ -8356,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
@@ -8371,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);
     })]
@@ -8444,7 +8488,7 @@ const DotTableBody = ({
       }, index);
     });
   };
-  return jsxs(Fragment$1, {
+  return jsxs(Fragment, {
     children: [jsx(StyledTableBody, Object.assign({
       classes: {
         root: rootClassName$c
@@ -8673,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"
         }, {
@@ -9005,7 +9049,7 @@ const DotTableActions = ({
       onClick: action.onClick
     }, `action-${index}`));
   };
-  return jsxs(Fragment$1, {
+  return jsxs(Fragment, {
     children: [jsxs(TableActionsContainer, Object.assign({
       className: rootClassName$8,
       ref: wrapperRef
@@ -9201,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({
@@ -9210,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({
@@ -9368,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%"
@@ -9766,7 +9810,7 @@ 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",
@@ -10197,7 +10241,7 @@ 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`,

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",
@@ -1933,7 +1937,7 @@
       }, {
         children: jsxRuntime.jsx(StyledAvatar, __assign({
           alt: alt,
-          "aria-label": ariaLabel,
+          "aria-label": ariaLabel || alt,
           className: size,
           classes: {
             root: rootClasses,
@@ -2185,6 +2189,7 @@
           },
           color: color,
           "data-testid": dataTestId,
+          role: "progressbar",
           size: size,
           thickness: thickness,
           value: value,
@@ -2762,6 +2767,7 @@
       return jsxRuntime.jsxs(StyledDrawer, __assign({
         ModalProps: ModalProps,
         PaperProps: __assign(__assign({}, PaperProps), {
+          'aria-label': ariaLabel,
           role: ariaRole
         }),
         anchor: anchor,
@@ -2819,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"
@@ -2830,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) {
@@ -2895,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, {
@@ -3330,7 +3340,7 @@
             startAdornment: startAdornmentIcon(),
             endAdornment: endAdornmentIconOrText()
           },
-          "aria-label": name,
+          "aria-label": name || label,
           autoComplete: autoComplete,
           autoFocus: autoFocus,
           classes: {
@@ -3353,6 +3363,8 @@
           },
           inputRef: inputRef,
           label: persistentLabel ? null : label,
+          maxRows: multiline ? maxRows : null,
+          minRows: multiline ? minRows : null,
           multiline: multiline,
           name: name,
           onBlur: onBlur,
@@ -3362,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"
@@ -3989,7 +4001,7 @@
               }, void 0)
             }), void 0), jsxRuntime.jsx("div", __assign({
               className: "product-applications",
-              role: "list"
+              role: "presentation"
             }, {
               children: filteredAppInstances()
             }), void 0)]
@@ -4000,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
@@ -4036,6 +4049,7 @@
         }), void 0)
       };
       return jsxRuntime.jsx(StyledAppSwitcher, __assign({
+        ariaLabel: "App Switcher",
         className: rootClasses,
         ModalProps: {
           style: {
@@ -5622,6 +5636,8 @@
         }, {
           children: children
         }), void 0) : jsxRuntime.jsx(material.ToggleButton, __assign({}, commonProps, {
+          role: "button"
+        }, {
           children: children
         }), void 0);
       };
@@ -5650,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);
     });
 
@@ -5810,6 +5828,7 @@
         onChange: handleChange,
         required: required,
         size: size,
+        tabIndex: 0,
         value: value
       }, void 0);
       return jsxRuntime.jsx(StyledFormControlLabel, {
@@ -6857,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
@@ -6887,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
@@ -6980,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,
@@ -7042,7 +7065,8 @@
         },
         inputRef: inputRef,
         onChange: handleChange,
-        size: size
+        size: size,
+        tabIndex: 0
       }, void 0);
       return jsxRuntime.jsx(StyledFormControlLabel, {
         className: rootClassName$C,
@@ -7618,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';
@@ -7627,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));
@@ -7724,6 +7749,7 @@
         name = _a.name,
         onChange = _a.onChange,
         onEditStateChange = _a.onEditStateChange,
+        placeholder = _a.placeholder,
         readOnly = _a.readOnly,
         selectTextOnEdit = _a.selectTextOnEdit,
         _d = _a.startEditable,
@@ -7880,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",
@@ -8918,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),
@@ -8987,7 +9016,8 @@
           root: rootClasses
         },
         colSpan: colspan,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        style: style
       }, {
         children: getTableCellValue()
       }), void 0);
@@ -9080,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
@@ -9097,6 +9139,9 @@
             onActionMenuTrigger: function (menuRef, menuItem) {
               return onActionMenuTrigger(menuRef, menuItem);
             },
+            style: {
+              maxWidth: parseMaxWidth(column.width)
+            },
             value: rowData[column.id]
           }, index);
         })]
@@ -10200,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%"

package/lib/components/accordion/Accordion.styles.d.ts

@@ -1,5 +1,4 @@
-import { Accordion } from '@mui/material';
 export declare const rootClassName = "dot-accordion";
 export declare const summaryClassName = "dot-accordion-summary";
 export declare const detailClassName = "dot-accordion-details";
-export declare const StyledAccordion: import("styled-components").StyledComponent<typeof Accordion, any, {}, never>;
+export declare const StyledAccordion: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AccordionTypeMap<{}, "div">>, any, {}, never>;

package/lib/components/app-switcher/AppSwitcher.d.ts

@@ -21,7 +21,7 @@ interface AppSwitcherViewProps extends CommonAppSwitcherProps {
     selectedAppType: string;
 }
 export declare const DotAppSwitcherView: ({ activeApp, apps, className, maxRecentInstances, noAppTypeLabel, platformConsoleUrl, onClose, open, searchInstancesThreshold, selectedAppType, yOffset, zIndex, }: AppSwitcherViewProps) => JSX.Element;
-interface AppSwitcherProps extends CommonAppSwitcherProps {
+export interface AppSwitcherProps extends CommonAppSwitcherProps {
     accountId?: string;
     includePlatformConsole?: boolean;
 }

package/lib/components/app-switcher/AppSwitcher.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, ComponentMeta } from '@storybook/react';
+import { AppSwitcherProps } from './AppSwitcher';
+declare const _default: ComponentMeta<({ accountId, includePlatformConsole, onClose, ...commonProps }: AppSwitcherProps) => JSX.Element>;
+export default _default;
+export declare const Default: Story<AppSwitcherProps>;

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

@@ -11,6 +11,12 @@ export declare const StyledFileListItem: ((props: {
     componentsProps?: {
         root?: import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides;
     };
+    slotProps?: {
+        root?: import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides;
+    };
+    slots?: {
+        root?: import("react").ElementType<any>;
+    };
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions>;
     centerRipple?: boolean;
@@ -29,7 +35,7 @@ export declare const StyledFileListItem: ((props: {
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions>;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
     ref?: import("react").Ref<HTMLAnchorElement>;
-}, "button" | "style" | "className" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected" | "components" | "componentsProps">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
+}, "button" | "style" | "className" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected" | "components" | "componentsProps" | "slotProps" | "slots">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
     button: true;
 }, "div">>> & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ListItemTypeMap<{
     button?: false;

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

@@ -16,6 +16,8 @@ export interface InlineEditProps extends CommonProps {
     onChange?: (value: string) => Promise<boolean>;
     /** A function that informs the parent of current editing state */
     onEditStateChange?: (editing: boolean) => void;
+    /** If provided will display placeholder text when field is empty */
+    placeholder?: string;
     /** If true, component will behave like a regular text (editing functionality will be disabled). */
     readOnly?: boolean;
     /** If true, when starting edit it will select all text in the input */
@@ -34,4 +36,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, placeholder, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;

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

@@ -1,9 +1,10 @@
 import { ComponentMeta } from '@storybook/react';
 import { InlineEditProps } from './InlineEdit';
-declare const _default: ComponentMeta<({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, placeholder, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
 export default _default;
 export declare const Default: any;
 export declare const WithCharactersLimit: any;
+export declare const WithPlaceholder: any;
 export declare const WithMultipleLines: any;
 export declare const WithReadOnlyMode: any;
 export declare const WithoutActionButtons: any;

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

@@ -2,6 +2,7 @@ import { TypographyVariant } from '../typography/Typography';
 export declare const rootClassName = "dot-inline-edit";
 export declare const editModeClassName = "dot-edit-mode";
 export declare const viewModeClassName = "dot-view-mode";
+export declare const placeholderClassName = "dot-placeholder";
 export declare const readOnlyClassName = "dot-read-only";
 export declare const editActionsClassName = "dot-edit-actions";
 export declare const editTextFieldClassName = "dot-edit-text-field";

package/lib/components/input-form-fields/InputFormFields.styles.d.ts

@@ -1,4 +1,4 @@
-import { TextField, InputLabel } from '@mui/material';
+import { TextField } from '@mui/material';
 export declare const rootClassName = "dot-text-field";
 export declare const rootSelectClassName = "dot-select-field";
 export declare const labelClassName = "dot-input-label";
@@ -8,6 +8,6 @@ export declare const successClassName = "dot-success";
 export declare const adornmentIconClassName = "dot-adornment-icon";
 export declare const fieldsetClassName = "MuiOutlinedInput-notchedOutline";
 export declare const StyledAdornment: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").InputAdornmentTypeMap<{}, "div">>, any, {}, never>;
-export declare const StyledInputLabel: import("styled-components").StyledComponent<typeof InputLabel, any, {}, never>;
+export declare const StyledInputLabel: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").InputLabelTypeMap<{}, "label">>, any, {}, never>;
 export declare const StyledTextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTextField: import("styled-components").StyledComponent<typeof TextField, any, {}, never>;

package/lib/components/list/ListItem.styles.d.ts

@@ -13,6 +13,12 @@ export declare const StyledListItem: ((props: {
     componentsProps?: {
         root?: import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides;
     };
+    slotProps?: {
+        root?: import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides;
+    };
+    slots?: {
+        root?: import("react").ElementType<any>;
+    };
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions>;
     centerRipple?: boolean;
@@ -31,7 +37,7 @@ export declare const StyledListItem: ((props: {
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions>;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
     ref?: import("react").Ref<HTMLAnchorElement>;
-}, "button" | "style" | "className" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected" | "components" | "componentsProps">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
+}, "button" | "style" | "className" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected" | "components" | "componentsProps" | "slotProps" | "slots">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
     button: true;
 }, "div">>> & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ListItemTypeMap<{
     button?: false;

package/lib/components/menu/Menu.styles.d.ts

@@ -5,5 +5,14 @@ interface StyledPopperArgs {
     $maxHeight?: number | string;
 }
 export declare const getListMaxHeight: (maxHeight: string | number) => string;
-export declare const StyledPopper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@mui/material").PopperProps, "slot" | "style" | "title" | "anchorEl" | "children" | "container" | "disablePortal" | "keepMounted" | "modifiers" | "open" | "placement" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "transition" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "componentsProps"> & import("react").RefAttributes<HTMLDivElement>>, any, StyledPopperArgs, never>;
+export declare const StyledPopper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+    component?: import("react").ElementType<any>;
+    components?: {
+        Root?: import("react").ElementType<any>;
+    };
+    componentsProps?: {
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps>;
+    };
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("react").RefAttributes<HTMLDivElement>>, any, StyledPopperArgs, never>;
 export {};

package/lib/components/popper/Popper.styles.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 export declare const rootClassName = "dot-popper";
-export declare const StyledPopper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@mui/material").PopperProps, "slot" | "style" | "title" | "anchorEl" | "children" | "container" | "disablePortal" | "keepMounted" | "modifiers" | "open" | "placement" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "transition" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "componentsProps"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledPopper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+    component?: import("react").ElementType<any>;
+    components?: {
+        Root?: import("react").ElementType<any>;
+    };
+    componentsProps?: {
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps>;
+    };
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/lib/components/table/Table.stories.d.ts

@@ -2,9 +2,9 @@ import { Story, ComponentMeta } from '@storybook/react';
 import { TableProps } from './Table';
 declare const _default: ComponentMeta<({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<TableProps>;
-export declare const LocallyPaginatedTable: Story<TableProps>;
-export declare const RemotelyPaginatedTable: Story<TableProps>;
-export declare const WithActionMenu: Story<TableProps>;
-export declare const WithCheckboxSelection: Story<TableProps>;
-export declare const EmptyTable: Story<TableProps>;
+export declare const Default: Story;
+export declare const LocallyPaginatedTable: Story;
+export declare const RemotelyPaginatedTable: Story;
+export declare const WithActionMenu: Story;
+export declare const WithCheckboxSelection: Story;
+export declare const EmptyTable: Story;

package/lib/components/table/TableCell.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
 export declare type TextAlignment = 'center' | 'inherit' | 'justify' | 'left' | 'right';
@@ -9,10 +9,11 @@ export interface CellProps extends CommonProps {
     id?: string;
     noWrap?: boolean;
     onActionMenuTrigger?: (el: HTMLElement, menuItem: Array<ReactNode>) => void;
+    style?: CSSProperties;
     typography: TypographyVariant;
     value?: unknown;
 }
 /**
  * A wrapper component around the TableCell component from @material-ui.
  */
-export declare const DotBodyCell: ({ ariaLabel, align, cellKey, className, colspan, "data-testid": dataTestId, noWrap, onActionMenuTrigger, typography, value, }: CellProps) => JSX.Element;
+export declare const DotBodyCell: ({ ariaLabel, align, cellKey, className, colspan, "data-testid": dataTestId, noWrap, onActionMenuTrigger, style, typography, value, }: CellProps) => JSX.Element;

package/package.json

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