@digital-ai/dot-components 2.7.4 → 2.8.1

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, useEffect, useRef, useMemo, useContext, createContext, forwardRef, Fragment, useCallback, createElement, useLayoutEffect } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, darken, 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 { useEffect, useState, useRef, useMemo, useContext, createContext, forwardRef, Fragment, useCallback, createElement, 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';
 import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
@@ -21,6 +21,7 @@ function useStylesWithRootClass(name, className, ...args) {
 
 const DotTooltip = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'tooltip',
   children,
   className,
   'data-testid': dataTestId,
@@ -39,6 +40,7 @@ const DotTooltip = ({
     onClose: onClose,
     open: open,
     placement: _placement,
+    role: _ariaRole,
     title: title
   }, {
     children: jsx("span", {
@@ -55,6 +57,7 @@ const StyledIcon = styled(Icon).withConfig({
 
 const DotIcon = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'img',
   className,
   'data-testid': dataTestId,
   fontSize: _fontSize = 'medium',
@@ -72,11 +75,13 @@ const DotIcon = ({
         root: rootClasses
       },
       "data-testid": dataTestId,
-      fontSize: _fontSize
+      fontSize: _fontSize,
+      role: _ariaRole
     }, {
       children: jsx("i", {
         className: `icon-${iconId} dot-i`,
-        "data-testid": dataTestId && `${dataTestId}-i`
+        "data-testid": dataTestId && `${dataTestId}-i`,
+        role: _ariaRole
       }, void 0)
     }), void 0)
   }), void 0);
@@ -84,6 +89,8 @@ const DotIcon = ({
 
 const DotTypography = ({
   ariaLabel,
+  ariaLevel,
+  ariaRole,
   className,
   'data-testid': dataTestId,
   children,
@@ -93,14 +100,21 @@ const DotTypography = ({
   variant
 }) => {
   const rootClasses = useStylesWithRootClass('dot-typography', className);
+  useEffect(() => {
+    if (ariaRole === 'heading' && !ariaLevel) {
+      console.warn('please include ariaLevel when using ariaRole="heading"');
+    }
+  }, []);
   return jsx(Typography, Object.assign({
     "aria-label": ariaLabel,
+    "aria-level": ariaLevel,
     classes: {
       root: rootClasses
     },
     component: component,
     "data-testid": dataTestId,
     noWrap: noWrap,
+    role: ariaRole,
     style: {
       marginBottom: noMarginBottom ? 0 : undefined
     },
@@ -220,7 +234,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}}&.", ",&.", "{.", "{color:", ";.dot-icon i{margin-top:-2px;}}.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus{background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiFormLabel-root.Mui-focused{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$13, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.spacing(1.5), InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme)));
+}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus{background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiFormLabel-root.Mui-focused{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$13, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme)));
 
 const rootClassName$12 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar).withConfig({
@@ -1655,6 +1669,7 @@ const AvatarContent = ({
 const DotAvatar = ({
   alt,
   ariaLabel,
+  ariaRole: _ariaRole = 'img',
   className,
   component: _component = 'div',
   color,
@@ -1691,6 +1706,7 @@ const DotAvatar = ({
       component: onClick ? 'button' : _component,
       "data-testid": dataTestId,
       onClick: event => onClick ? onClick(event) : null,
+      role: onClick ? 'button' : _ariaRole,
       src: _type === 'image' ? imageSrc : null,
       style: style,
       tabIndex: tooltip ? _tabIndex : undefined,
@@ -1700,9 +1716,9 @@ const DotAvatar = ({
         "data-testid": dataTestId,
         iconId: iconId,
         imageSrc: imageSrc,
+        size: _size,
         text: _text,
-        type: _type,
-        size: _size
+        type: _type
       }, void 0)
     }), void 0)
   }), void 0);
@@ -1714,11 +1730,12 @@ const StyledButton = styled(Button).withConfig({
   componentId: "sx99hh-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin:", ";min-width:auto;white-space:nowrap;&.MuiButton-outlined:not([disabled]){border-color:rgba(0,0,0,0.23);color:", ";}&:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall){height:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover,&:active{background-color:", ";}}&.MuiButton-text{padding:6px 16px;}.dot-icon{display:flex;padding:0;}}"], rootClassName$$, theme.spacing(0.5), theme.palette.grey[700], theme.spacing(5), theme.palette.error.main, darken(theme.palette.error.main, 0.2)));
+}) => css(["&.", "{margin:", ";padding:", ";min-width:auto;white-space:nowrap;&:hover{background-color:", ";}&:active{background-color:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}}&.MuiButton-outlined,&.MuiButton-text{&:hover{background-color:", ";}&:active{background-color:", ";}}&.MuiButton-outlined{border-color:", ";color:", ";}&.MuiButton-text{background-color:transparent;color:", ";}&.Mui-disabled{background-color:", ";color:", ";&.MuiButton-outlined{border-color:", ";}&.MuiButton-text,&.MuiButton-containedSecondary{background-color:transparent;}}&:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall){height:", ";}.dot-icon{display:flex;padding:0;}}"], rootClassName$$, theme.spacing(0.5), theme.spacing(0.75, 2), theme.palette.primary[800], theme.palette.primary[400], theme.palette.error[500], theme.palette.error[600], theme.palette.error[400], theme.palette.grey[50], theme.palette.grey[100], theme.palette.grey[300], theme.palette.grey[700], theme.palette.grey[700], theme.palette.grey[50], theme.palette.grey[400], theme.palette.grey[200], theme.spacing(5)));
 
 /** This component wraps the Button component from @material-ui. */
 const DotButton = /*#__PURE__*/forwardRef(({
   ariaLabel,
+  ariaRole: _ariaRole = 'button',
   autoFocus: _autoFocus = false,
   children,
   className,
@@ -1775,6 +1792,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
       onClick: event => onClick && onClick(event),
       onKeyDown: onKeyDown,
       ref: ref,
+      role: _ariaRole,
       size: _size,
       startIcon: startIcon,
       tabIndex: tabIndex,
@@ -1794,6 +1812,7 @@ const StyledLink = styled(Link).withConfig({
 
 const DotLink = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'link',
   children,
   className,
   color: _color = 'primary',
@@ -1831,6 +1850,7 @@ const DotLink = ({
       onMouseEnter: onMouseEnter,
       onPointerDown: onPointerDown,
       rel: _rel,
+      role: _ariaRole,
       tabIndex: _tabIndex,
       target: target,
       underline: underline
@@ -2126,6 +2146,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
 const DotMenu = ({
   anchorEl,
   ariaLabel,
+  ariaRole: _ariaRole = 'menu',
   className,
   'data-testid': dataTestId,
   dense: _dense = true,
@@ -2223,6 +2244,7 @@ const DotMenu = ({
               onSelect: onSelect,
               selectedKey: selectedKey
             }, void 0),
+            ariaRole: _ariaRole,
             selectedKey: selectedKey
           }, void 0)
         }), void 0)
@@ -2269,6 +2291,7 @@ const StyledIconButton = styled(IconButton).withConfig({
 
 const DotIconButton = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'button',
   className,
   color: _color = 'inherit',
   'data-testid': dataTestId,
@@ -2296,6 +2319,7 @@ const DotIconButton = ({
       disableRipple: _disableRipple,
       disabled: _disabled,
       onClick: event => onClick && onClick(event),
+      role: _ariaRole,
       size: _size
     }, {
       children: jsx(DotIcon, {
@@ -2318,8 +2342,10 @@ const DotDrawerHeader = ({
   const rootClasses = useStylesWithRootClass(rootClassName$T, className);
   return jsxs(StyleDrawerHeader, Object.assign({
     "aria-label": ariaLabel,
+    "aria-level": 2,
     className: rootClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    role: "heading"
   }, {
     children: [children, variant !== 'permanent' && jsx(DotIconButton, {
       className: "close-button",
@@ -2337,6 +2363,7 @@ const StyleDrawerBody = styled.div.withConfig({
 
 const DotDrawerBody = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'region',
   children,
   className,
   'data-testid': dataTestId,
@@ -2348,7 +2375,8 @@ const DotDrawerBody = ({
   return jsxs(StyleDrawerBody, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    role: _ariaRole
   }, {
     children: [children, !headerExists && variant !== 'permanent' && jsx(DotIconButton, {
       className: "dot-drawer-close-button",
@@ -2368,6 +2396,7 @@ const StyleDrawerFooter = styled.div.withConfig({
 
 const DotDrawerFooter = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'region',
   children,
   className,
   'data-testid': dataTestId
@@ -2376,7 +2405,8 @@ const DotDrawerFooter = ({
   return jsx(StyleDrawerFooter, Object.assign({
     "aria-label": ariaLabel,
     className: rootClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    role: _ariaRole
   }, {
     children: children
   }), void 0);
@@ -2385,6 +2415,7 @@ const DotDrawerFooter = ({
 const DotDrawer = ({
   anchor: _anchor = 'right',
   ariaLabel,
+  ariaRole: _ariaRole = 'presentation',
   className,
   children,
   'data-testid': dataTestId,
@@ -2414,7 +2445,9 @@ const DotDrawer = ({
   const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
   return jsxs(StyledDrawer, Object.assign({
     ModalProps: ModalProps,
-    PaperProps: PaperProps,
+    PaperProps: Object.assign(Object.assign({}, PaperProps), {
+      role: _ariaRole
+    }),
     anchor: _anchor,
     "aria-label": ariaLabel,
     classes: {
@@ -2425,6 +2458,7 @@ const DotDrawer = ({
     height: height,
     onClose: handleClose,
     open: open,
+    role: _ariaRole,
     variant: _variant,
     width: _width
   }, {
@@ -2483,6 +2517,7 @@ const DotListDivider = ({
 };
 const DotList = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'list',
   children,
   className,
   component: _component = 'ul',
@@ -2512,6 +2547,7 @@ const DotList = ({
     dense: _dense,
     disablePadding: _disablePadding,
     ref: listRef,
+    role: _ariaRole,
     style: {
       width: listWidth
     }
@@ -2568,6 +2604,7 @@ const DotList = ({
 };
 const DotListItem = ({
   ariaLabel,
+  ariaRole: _ariaRole2 = 'listitem',
   className,
   component: _component2 = 'li',
   'data-testid': dataTestId,
@@ -2634,6 +2671,7 @@ const DotListItem = ({
         divider: _divider,
         href: onClick ? null : href,
         onClick: onClick || !href ? handleClick : null,
+        role: onClick ? 'button' : _ariaRole2,
         selected: isFlyout ? isOpened : selected,
         target: target
       }, {
@@ -2799,6 +2837,7 @@ const EndAdornment = ({
   error,
   dataTestId,
   endIcon,
+  endText,
   success,
   warning
 }) => {
@@ -2814,7 +2853,7 @@ const EndAdornment = ({
     className: `${adornmentIconClassName} end`,
     position: "end"
   }, {
-    children: endAdornmentIcon
+    children: endAdornmentIcon || endText
   }), void 0);
   return endAdornmentTooltip ? jsx(DotTooltip, Object.assign({
     title: endAdornmentTooltip
@@ -2838,6 +2877,7 @@ const DotInputText = ({
   hasDebounce,
   helperText,
   endIcon,
+  endText,
   id,
   inputRef,
   label,
@@ -2908,13 +2948,14 @@ const DotInputText = ({
       children: startIcon
     }), void 0);
   };
-  const endAdornmentIcon = () => {
-    if (!hasEndAdornmentIcon) return null;
+  const endAdornmentIconOrText = () => {
+    if (!hasEndAdornmentIcon && !endText) return null;
     return jsx(EndAdornment, Object.assign({}, {
       endAdornmentTooltip,
       error: _error,
       dataTestId,
       endIcon,
+      endText,
       success,
       warning: _warning
     }), void 0);
@@ -2932,7 +2973,7 @@ const DotInputText = ({
     }), void 0), jsx(StyledTextField, {
       InputProps: {
         startAdornment: startAdornmentIcon(),
-        endAdornment: endAdornmentIcon()
+        endAdornment: endAdornmentIconOrText()
       },
       "aria-label": name,
       autoComplete: _autoComplete,
@@ -2984,6 +3025,7 @@ const StyledSearchInput = styled.span.withConfig({
 
 function SearchInput({
   'data-testid': dataTestId,
+  ariaRole = 'searchbox',
   autoFocus = true,
   className,
   disabled = false,
@@ -3028,6 +3070,7 @@ function SearchInput({
       title: tooltip
     }, {
       children: jsx(DotInputText, {
+        ariaRole: ariaRole,
         "data-testid": dataTestId,
         autoFocus: autoFocus,
         className: "search-text",
@@ -3504,7 +3547,8 @@ const DotAppSwitcherView = ({
     if (selectedAppType && appTypeMap && appTypeLabels) {
       const labelConfig = appTypeLabels.get(selectedAppType);
       return jsxs("div", Object.assign({
-        className: "content"
+        className: "content",
+        role: "contentinfo"
       }, {
         children: [jsx("span", {
           children: jsx(DotButton, Object.assign({
@@ -3520,7 +3564,9 @@ const DotAppSwitcherView = ({
             }, void 0)
           }), void 0)
         }, void 0), jsx("div", Object.assign({
-          className: "product-heading"
+          "aria-level": 2,
+          className: "product-heading",
+          role: "heading"
         }, {
           children: createAppTypeLabel(selectedAppType, labelConfig.logo, labelConfig.singleTypeApps)
         }), void 0), ((_a = appTypeMap === null || appTypeMap === void 0 ? void 0 : appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.length) >= _searchInstancesThreshold && jsx("div", Object.assign({
@@ -3533,14 +3579,16 @@ const DotAppSwitcherView = ({
             value: searchText
           }, void 0)
         }), void 0), jsx("div", Object.assign({
-          className: "product-applications"
+          className: "product-applications",
+          role: "list"
         }, {
           children: filteredAppInstances()
         }), void 0)]
       }), void 0);
     } else {
       return jsxs("div", Object.assign({
-        className: "content"
+        className: "content",
+        role: "contentinfo"
       }, {
         children: [jsx(DotList, {
           items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(item => ({
@@ -3554,7 +3602,9 @@ const DotAppSwitcherView = ({
   const header = {
     className: 'app-switcher-header',
     children: jsxs("div", Object.assign({
+      "aria-level": 1,
       className: "app-switcher-header-title",
+      role: "heading",
       style: {
         marginTop: _yOffset + 'px',
         width: '80%'
@@ -3566,6 +3616,8 @@ const DotAppSwitcherView = ({
         type: "image",
         variant: "circular"
       }, void 0), jsx(DotTypography, Object.assign({
+        ariaRole: "heading",
+        ariaLevel: 1,
         className: "app-switcher-label"
       }, {
         children: "App switcher"
@@ -4307,6 +4359,7 @@ const DotAutoComplete = ({
   disablePortal: _disablePortal = true,
   endAdornmentTooltip,
   error: _error = false,
+  filterOptions,
   filterSelectedOptions: _filterSelectedOptions = true,
   freesolo: _freesolo = true,
   checkIfOptionDisabled,
@@ -4314,6 +4367,7 @@ const DotAutoComplete = ({
   helperText,
   inputId,
   inputRef,
+  inputValue,
   label,
   loading,
   maxHeight,
@@ -4469,9 +4523,9 @@ const DotAutoComplete = ({
     }
   });
   // Create handler only if 'onInputChange' or 'actionItem' prop is defined
-  const handleInputChange = (onInputChange || isActionItemDefined) && ((event, inputValue, reason) => {
-    isActionItemDefined && setInputText(inputValue);
-    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, inputValue, reason);
+  const handleInputChange = (onInputChange || isActionItemDefined) && ((event, currentInputValue, reason) => {
+    isActionItemDefined && setInputText(currentInputValue);
+    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
   }) || undefined;
   // Create callback when action item click event handler is defined,
   // free-solo mode is NOT set and 'Enter' key has been pressed
@@ -4528,11 +4582,13 @@ const DotAutoComplete = ({
     "data-testid": dataTestId,
     defaultValue: defaultValue,
     disabled: _disabled,
+    filterOptions: filterOptions,
     filterSelectedOptions: _filterSelectedOptions,
     freeSolo: _freesolo,
     getOptionLabel: option => parseAutoCompleteValue(option),
     getOptionDisabled: checkIfOptionDisabled,
     groupBy: _group ? option => option.group : undefined,
+    inputValue: inputValue,
     ListboxComponent: ListboxComponent,
     loading: loading,
     multiple: _multiple,
@@ -4565,7 +4621,7 @@ const DotAutoComplete = ({
         // passed to renderInput includes inputProps and InputProps properties
         // that must be passed to TextField in order for Autocomplete to work
         // correctly. We decided that at this time exposing those props in
-        // DotInputText would not be a worthwhile tradeoff. Instead we are
+        // DotInputText would not be a worthwhile tradeoff. Instead, we are
         // using the StyledTextField used by DotInputText so that we will
         // at least pick up any styling that is used there. Should additional
         // functionality be added to DotInputText we will have to make a
@@ -4969,7 +5025,9 @@ const DotBreadcrumbs = ({
       itemsAfterCollapse: itemsAfterCollapse,
       maxItems: getMaxItems(adjustMaxItems, maxVisibleItems, maxItems),
       ref: breadcrumbRef,
+      role: "navigation",
       separator: jsx(DotIcon, {
+        ariaRole: "presentation",
         className: "separator",
         iconId: "chevron-right"
       }, void 0)
@@ -6052,6 +6110,7 @@ const DotInputSelect = ({
   defaultValue,
   disabled: _disabled = false,
   endIcon,
+  endText,
   error: _error = false,
   fullWidth: _fullWidth = true,
   helperText,
@@ -6076,6 +6135,7 @@ const DotInputSelect = ({
 }) => {
   const hasWarning = !_error && _warning && warningClassName;
   const hasSuccess = !_error && !_warning && success && successClassName;
+  const endAdornment = endIcon || endText;
   const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, _readOnly ? 'read-only' : '');
   const getOption = option => {
     return typeof option === 'string' ? option : option.option;
@@ -6100,11 +6160,11 @@ const DotInputSelect = ({
         }, {
           children: startIcon
         }), void 0),
-        endAdornment: endIcon && jsx(StyledAdornment, Object.assign({
+        endAdornment: endAdornment && jsx(StyledAdornment, Object.assign({
           className: `${adornmentIconClassName} end`,
           position: "end"
         }, {
-          children: endIcon
+          children: endAdornment
         }), void 0)
       },
       SelectProps: {
@@ -6252,6 +6312,7 @@ function DotRadioButton({
   return jsx(StyledFormControlLabel, {
     className: rootClasses,
     control: radioControl,
+    "aria-label": value,
     label: label || radioControl,
     labelPlacement: labelPlacement,
     value: value
@@ -6260,6 +6321,7 @@ function DotRadioButton({
 
 const DotRadioGroup = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'radiogroup',
   className,
   'data-testid': dataTestId,
   defaultValue,
@@ -6338,6 +6400,7 @@ const DotRadioGroup = ({
         defaultValue: defaultValue,
         name: name,
         onChange: handleChange,
+        role: _ariaRole,
         row: row,
         value: selectedValue
       }, {
@@ -7054,6 +7117,7 @@ const checkIfEmptyValue = inputValue => inputValue.trim() === '';
  */
 const DotInlineEdit = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'combobox',
   bindings,
   charactersLimit,
   className,
@@ -7186,7 +7250,8 @@ const DotInlineEdit = ({
       children: viewModeChildren
     }), void 0) : jsx("div", Object.assign({
       className: viewModeClasses,
-      "data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`
+      "data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`,
+      role: "presentation"
     }, {
       children: viewModeChildren
     }), void 0);
@@ -7258,6 +7323,7 @@ const DotInlineEdit = ({
     onMouseOut: () => handleShowTooltip(false),
     onKeyDown: !readOnly ? event => handleKeyPress(event) : undefined,
     ref: inlineEditRef,
+    role: _ariaRole,
     tabIndex: !readOnly ? _tabIndex : undefined,
     typography: _typography
   }, {
@@ -7344,19 +7410,23 @@ const StyledPill = styled(Chip).withConfig({
   componentId: "l7oxi2-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background-color:", ";color:", ";border-color:", ";&.error{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.success{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.warning{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.in-progress{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}"], rootClassName$n, ({
+}) => css(["&.", "{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}&.MuiChip-outlined{&.error{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.success{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.warning{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.in-progress{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}}&.MuiChip-filled{&.error{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.success{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.warning{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.in-progress{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}}}"], rootClassName$n, ({
   backgroundcolor
 }) => {
   return backgroundcolor || theme.palette.grey[200];
+}, ({
+  bordercolor
+}) => {
+  return bordercolor ? bordercolor : theme.palette.layer.n700;
 }, ({
   labelcolor
 }) => {
   return labelcolor ? labelcolor : theme.palette.layer.n700;
 }, ({
-  bordercolor
+  labelcolor
 }) => {
-  return bordercolor ? bordercolor : theme.palette.layer.n700;
-}, theme.palette.error[100], theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n700, theme.palette.success[100], theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n700, theme.palette.warning[100], theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.primary[100], theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n700));
+  return labelcolor ? labelcolor : theme.palette.layer.n700;
+}, theme.palette.error[100], theme.palette.error.main, theme.palette.layer.n700, theme.palette.error.main, theme.palette.success[100], theme.palette.success.main, theme.palette.layer.n700, theme.palette.success.main, theme.palette.warning[100], theme.palette.warning.main, theme.palette.layer.n700, theme.palette.warning.main, theme.palette.primary[100], theme.palette.primary.main, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n0, theme.palette.layer.n0));
 
 const DotPill = ({
   ariaLabel,
@@ -9179,6 +9249,7 @@ const joinAcceptedAndRejectedFiles = (filesAccepted, filesRejected) => mapAccept
 const DotFileUpload = ({
   accept,
   ariaLabel,
+  ariaRole: _ariaRole = 'region',
   buttonOnly: _buttonOnly = false,
   className,
   'data-testid': dataTestId,
@@ -9242,7 +9313,8 @@ const DotFileUpload = ({
     uploadedFiles
   });
   return jsxs(StyledFileUploadContainer, Object.assign({
-    className: containerClassName$2
+    className: containerClassName$2,
+    role: _ariaRole
   }, {
     children: [jsxs(StyledFileUpload, Object.assign({}, getRootProps(), {
       "aria-label": ariaLabel,
@@ -9815,6 +9887,7 @@ const DotTimePicker = ({
   onClose,
   onKeyDown,
   onOpen,
+  onPopperTimeChange,
   open,
   persistentLabel,
   readOnly: _readOnly = false,
@@ -9874,6 +9947,7 @@ const DotTimePicker = ({
   };
   const handlePickerChange = pickedDateTime => {
     setPickerTime(pickedDateTime);
+    onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
   };
   const handleInputChange = (currentValue, context) => {
     const currentTimeValue = currentValue ? currentValue : null;