@digital-ai/dot-components 2.7.3 → 2.8.0

package/index.esm.js

@@ -1,6 +1,6 @@
 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 { 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, 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 '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
@@ -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
     },
@@ -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);
@@ -1719,6 +1735,7 @@ const StyledButton = styled(Button).withConfig({
 /** 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
       }, {
@@ -2984,6 +3022,7 @@ const StyledSearchInput = styled.span.withConfig({
 
 function SearchInput({
   'data-testid': dataTestId,
+  ariaRole = 'searchbox',
   autoFocus = true,
   className,
   disabled = false,
@@ -3028,6 +3067,7 @@ function SearchInput({
       title: tooltip
     }, {
       children: jsx(DotInputText, {
+        ariaRole: ariaRole,
         "data-testid": dataTestId,
         autoFocus: autoFocus,
         className: "search-text",
@@ -3504,7 +3544,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 +3561,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 +3576,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 +3599,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 +3613,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,8 +4356,10 @@ const DotAutoComplete = ({
   disablePortal: _disablePortal = true,
   endAdornmentTooltip,
   error: _error = false,
+  filterOptions,
   filterSelectedOptions: _filterSelectedOptions = true,
   freesolo: _freesolo = true,
+  checkIfOptionDisabled,
   group: _group = false,
   helperText,
   inputId,
@@ -4527,9 +4578,11 @@ 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,
     ListboxComponent: ListboxComponent,
     loading: loading,
@@ -4967,7 +5020,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)
@@ -6250,6 +6305,7 @@ function DotRadioButton({
   return jsx(StyledFormControlLabel, {
     className: rootClasses,
     control: radioControl,
+    "aria-label": value,
     label: label || radioControl,
     labelPlacement: labelPlacement,
     value: value
@@ -6258,6 +6314,7 @@ function DotRadioButton({
 
 const DotRadioGroup = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'radiogroup',
   className,
   'data-testid': dataTestId,
   defaultValue,
@@ -6336,6 +6393,7 @@ const DotRadioGroup = ({
         defaultValue: defaultValue,
         name: name,
         onChange: handleChange,
+        role: _ariaRole,
         row: row,
         value: selectedValue
       }, {
@@ -7052,6 +7110,7 @@ const checkIfEmptyValue = inputValue => inputValue.trim() === '';
  */
 const DotInlineEdit = ({
   ariaLabel,
+  ariaRole: _ariaRole = 'combobox',
   bindings,
   charactersLimit,
   className,
@@ -7184,7 +7243,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);
@@ -7256,6 +7316,7 @@ const DotInlineEdit = ({
     onMouseOut: () => handleShowTooltip(false),
     onKeyDown: !readOnly ? event => handleKeyPress(event) : undefined,
     ref: inlineEditRef,
+    role: _ariaRole,
     tabIndex: !readOnly ? _tabIndex : undefined,
     typography: _typography
   }, {
@@ -7342,19 +7403,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,
@@ -9177,6 +9242,7 @@ const joinAcceptedAndRejectedFiles = (filesAccepted, filesRejected) => mapAccept
 const DotFileUpload = ({
   accept,
   ariaLabel,
+  ariaRole: _ariaRole = 'region',
   buttonOnly: _buttonOnly = false,
   className,
   'data-testid': dataTestId,
@@ -9240,7 +9306,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,
@@ -9468,6 +9535,26 @@ const DotLinearProgress = ({
   }, void 0);
 };
 
+var DatePickerKeydownContext;
+(function (DatePickerKeydownContext) {
+  DatePickerKeydownContext[DatePickerKeydownContext["Input"] = 0] = "Input";
+  DatePickerKeydownContext[DatePickerKeydownContext["PickerButton"] = 1] = "PickerButton";
+  DatePickerKeydownContext[DatePickerKeydownContext["Popper"] = 2] = "Popper";
+})(DatePickerKeydownContext || (DatePickerKeydownContext = {}));
+
+/** This returns a `boolean` indicating whether the Day.js object contains a valid date or not. */
+const checkIfValidDate = (date, format) => dayjs(date, format, true).isValid();
+const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
+  const targetElement = event.target;
+  const isWithinInput = inputElement === null || inputElement === void 0 ? void 0 : inputElement.contains(targetElement);
+  let currentContextEnum = contextEnum;
+  // Key was captured within text field but not on the input itself
+  if (contextEnum === DatePickerKeydownContext.Input && !isWithinInput) {
+    currentContextEnum = DatePickerKeydownContext.PickerButton;
+  }
+  return currentContextEnum;
+};
+
 const rootClassName$1 = 'dot-date-picker';
 const containerClassName$1 = 'dot-date-picker-container';
 const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
@@ -9494,6 +9581,7 @@ const RectanglePickersDay = pickersDayProps => {
     disableRipple: true
   }), void 0);
 };
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
 const DotDatePicker = ({
   ariaLabel,
   autoFocus: _autoFocus = false,
@@ -9524,6 +9612,7 @@ const DotDatePicker = ({
   onChange,
   onClose,
   onError,
+  onKeyDown,
   onOpen,
   open,
   persistentLabel,
@@ -9532,7 +9621,7 @@ const DotDatePicker = ({
   showDaysOutsideCurrentMonth,
   value
 }) => {
-  const dateFormat = format || 'YYYY-MM-DD';
+  const displayFormat = format || DEFAULT_DATE_FORMAT;
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = _readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
@@ -9566,13 +9655,13 @@ const DotDatePicker = ({
   }, [locale]);
   const handleChange = (changedValue, context) => {
     if (!onChange || changedValue && !changedValue.isValid()) return;
-    onChange(changedValue ? changedValue.format(dateFormat) : null, context);
+    onChange(changedValue ? changedValue.format(DEFAULT_DATE_FORMAT) : null, context);
   };
   const handleAccept = changedValue => {
     if (!onAccept) return;
-    onAccept(changedValue ? changedValue.format(dateFormat) : null);
+    onAccept(changedValue ? changedValue.format(DEFAULT_DATE_FORMAT) : null);
   };
-  const handleError = (validationError, currentValue) => onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs(currentValue).format(dateFormat));
+  const handleError = (validationError, currentValue) => onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs(currentValue).format(DEFAULT_DATE_FORMAT));
   const handleOpen = () => {
     if (focusInputOnPopperOpened && inputRef.current) {
       focusInput(inputRef);
@@ -9588,6 +9677,10 @@ const DotDatePicker = ({
     }
     return actionBar;
   };
+  const handleKeyDown = contextEnum => event => {
+    const currentContextEnum = getContextEnumBasedOnTarget(event, inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, contextEnum);
+    onKeyDown(event, currentContextEnum);
+  };
   return jsx(StyledDatePickerContainer, Object.assign({
     className: containerClasses,
     "data-testid": dataTestId
@@ -9607,16 +9700,16 @@ const DotDatePicker = ({
         autoFocus: _autoFocus,
         closeOnSelect: _closeOnSelect,
         className: rootClasses,
-        defaultValue: defaultValue && dayjs(defaultValue, dateFormat),
+        defaultValue: defaultValue && dayjs(defaultValue, DEFAULT_DATE_FORMAT),
         disableOpenPicker: disableOpenPicker || isInputReadOnly || disabled,
         disablePast: disablePast,
         disabled: disabled,
         displayWeekNumber: displayWeekNumber,
         fixedWeekNumber: fixedWeekNumber,
-        format: dateFormat,
+        format: displayFormat,
         label: persistentLabel ? null : label,
-        maxDate: maxDate && dayjs(maxDate, dateFormat),
-        minDate: minDate && dayjs(minDate, dateFormat),
+        maxDate: maxDate && dayjs(maxDate, DEFAULT_DATE_FORMAT),
+        minDate: minDate && dayjs(minDate, DEFAULT_DATE_FORMAT),
         onAccept: handleAccept,
         onChange: handleChange,
         onClose: onClose,
@@ -9651,6 +9744,7 @@ const DotDatePicker = ({
               'data-testid': 'dot-date-picker-input',
               onBlur
             },
+            onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Input),
             inputRef,
             fullWidth: _fullWidth,
             name: inputName
@@ -9662,10 +9756,11 @@ const DotDatePicker = ({
             disableEnforceFocus: true
           },
           popper: {
-            disablePortal: _disablePortal
+            disablePortal: _disablePortal,
+            onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Popper)
           }
         },
-        value: value && dayjs(value, dateFormat)
+        value: value && dayjs(value, DEFAULT_DATE_FORMAT)
       }, void 0)]
     }), void 0)
   }), void 0);
@@ -9734,6 +9829,8 @@ const getPopperButtonTabIndex = (index, isSelected, selectedValue) => selectedVa
 const getDaytimeButtonTabIndex = (currentDaytime, selectedDaytime) => selectedDaytime && currentDaytime === selectedDaytime || !selectedDaytime && currentDaytime === Daytime.AM ? undefined : -1;
 const getSelectedDaytime = dateTime => dateTime && dateTime.format('A') || Daytime.AM;
 const getTimePickerButtonType = selectedDaytime => selectedDaytime && selectedDaytime === Daytime.PM ? 'primary' : 'text';
+const checkIfOpenPropDefined = open => open !== null && open !== undefined;
+const getDaytimeButtonType = daytimeSelected => daytimeSelected && daytimeSelected === Daytime.AM ? 'primary' : 'text';
 
 const rootClassName = 'dot-time-picker';
 const containerClassName = 'dot-time-picker-container';
@@ -9755,17 +9852,18 @@ const StyledTimePicker = styled(TimePicker).withConfig({
 }) => css(["&.", "{", ";}"], rootClassName, pickerInputStyles(theme)));
 
 dayjs.extend(utc);
-const DEFAULT_PICKER_TIME_FORMAT = 'hh:mm';
-const DEFAULT_TIME_FORMAT = 'hh:mm A';
+const DEFAULT_PICKER_TIME_FORMAT = 'HH:mm';
+const DEFAULT_TIME_FORMAT = 'HH:mm';
 const DEFAULT_TIME = '01:00';
 const DotTimePicker = ({
-  ampm: _ampm = true,
+  ampm: _ampm = false,
   ariaLabel,
   autoFocus: _autoFocus = false,
   className,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker: _disableOpenPicker = false,
+  disableClickAwayListener: _disableClickAwayListener = false,
   disabled,
   error,
   format,
@@ -9777,8 +9875,10 @@ const DotTimePicker = ({
   label,
   onAccept,
   onBlur,
+  onCancel,
   onChange,
   onClose,
+  onKeyDown,
   onOpen,
   open,
   persistentLabel,
@@ -9786,7 +9886,7 @@ const DotTimePicker = ({
   required: _required = false,
   value
 }) => {
-  const timeFormat = format || DEFAULT_TIME_FORMAT;
+  const displayFormat = format || DEFAULT_TIME_FORMAT;
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = _readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
@@ -9803,7 +9903,7 @@ const DotTimePicker = ({
   const minutes = getMinutesForTimePicker();
   const daytimeSelected = getSelectedDaytime(pickerTime);
   const selectedPickerHour = pickerTime && calculateHourBasedOnTimeFormat(pickerTime, _ampm);
-  const isOpenPropDefined = open !== null && open !== undefined;
+  const isOpenPropDefined = checkIfOpenPropDefined(open);
   const isControlledComponent = onChange && value !== undefined;
   useEffect(() => {
     if (hasValueWithoutChangeHandler) {
@@ -9816,9 +9916,9 @@ const DotTimePicker = ({
   useEffect(() => {
     let timeValue = null;
     if (defaultValue) {
-      timeValue = getDayjsUtcDate(defaultValue, timeFormat);
+      timeValue = getDayjsUtcDate(defaultValue, DEFAULT_TIME_FORMAT);
     } else if (value) {
-      timeValue = getDayjsUtcDate(value, timeFormat);
+      timeValue = getDayjsUtcDate(value, DEFAULT_TIME_FORMAT);
     }
     setTime(timeValue);
     setPickerTime(timeValue);
@@ -9844,7 +9944,7 @@ const DotTimePicker = ({
     const currentTimeValue = currentValue ? currentValue : null;
     setPickerTime(currentValue ? currentValue : null);
     !isControlledComponent && setTime(currentTimeValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(currentValue ? currentValue.format(timeFormat) : null, context);
+    onChange === null || onChange === void 0 ? void 0 : onChange(currentValue ? currentValue.format(DEFAULT_TIME_FORMAT) : null, context);
   };
   const handleClose = () => {
     !isOpenPropDefined && setIsPickerOpened(false);
@@ -9869,6 +9969,7 @@ const DotTimePicker = ({
   };
   const handleCancel = () => {
     setPickerTime(time);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     handleClose();
   };
   const handleSet = () => {
@@ -9877,12 +9978,16 @@ const DotTimePicker = ({
       return;
     }
     setTime(pickerTime);
-    onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
+    onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(DEFAULT_TIME_FORMAT), {
       validationError: null
     });
-    onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
+    onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(DEFAULT_TIME_FORMAT));
     handleClose();
   };
+  const handleKeyDown = contextEnum => event => {
+    const currentContextEnum = getContextEnumBasedOnTarget(event, inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, contextEnum);
+    onKeyDown(event, currentContextEnum);
+  };
   const scrollToSelectedTime = () => {
     if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
     const selectedHour = calculateHourBasedOnTimeFormat(time, _ampm);
@@ -9915,6 +10020,100 @@ const DotTimePicker = ({
     if (event.key !== 'Escape' || !isPickerOpened) return;
     handleCancel();
   };
+  const wrapWithClickAwayListener = children => jsx(ClickAwayListener, Object.assign({
+    onClickAway: handleSet
+  }, {
+    children: children
+  }), void 0);
+  const renderTimePickerHours = () => hours.map((hour, index) => {
+    const isSelected = pickerTime ? selectedPickerHour === hour : false;
+    return jsx(DotButton, Object.assign({
+      className: "dot-picker-button",
+      "data-testid": dataTestId && `${dataTestId}-hour-button-${hour}`,
+      onClick: () => handleHourClick(hour),
+      onKeyDown: handleTimeKeydown(hoursRef, index),
+      tabIndex: getPopperButtonTabIndex(index, isSelected, selectedPickerHour),
+      type: isSelected ? 'primary' : 'text'
+    }, {
+      children: hour.toString().padStart(2, '0')
+    }), hour);
+  });
+  const renderTimePickerMinutes = () => minutes.map((minute, index) => {
+    const isSelected = pickerTime ? pickerTime.minute() === minute : false;
+    return jsx(DotButton, Object.assign({
+      className: "dot-picker-button",
+      "data-testid": dataTestId && `${dataTestId}-minute-button-${minute}`,
+      type: isSelected ? 'primary' : 'text',
+      onClick: () => handleMinuteClick(minute),
+      onKeyDown: handleTimeKeydown(minutesRef, index),
+      tabIndex: getPopperButtonTabIndex(index, isSelected, pickerTime === null || pickerTime === void 0 ? void 0 : pickerTime.minute())
+    }, {
+      children: minute.toString().padStart(2, '0')
+    }), minute);
+  });
+  const renderTimePickerActionButtons = () => jsxs("div", Object.assign({
+    className: "dot-time-picker-action-buttons"
+  }, {
+    children: [jsx(DotButton, Object.assign({
+      "data-testid": dataTestId && `${dataTestId}-cancel`,
+      onClick: handleCancel,
+      size: "small",
+      type: "text"
+    }, {
+      children: "Cancel"
+    }), void 0), jsx(DotButton, Object.assign({
+      "data-testid": dataTestId && `${dataTestId}-set`,
+      onClick: handleSet,
+      size: "small",
+      type: "text"
+    }, {
+      children: "Set"
+    }), void 0)]
+  }), void 0);
+  const renderDaytime = () => jsxs("div", Object.assign({
+    className: "dot-time-picker-daytime",
+    ref: daytimeRef
+  }, {
+    children: [jsx(DotButton, Object.assign({
+      className: "dot-picker-button",
+      "data-testid": dataTestId && `${dataTestId}-am-button`,
+      onClick: () => handleDaytimeSelection(Daytime.AM),
+      onKeyDown: handleTimeKeydown(daytimeRef, 0),
+      tabIndex: getDaytimeButtonTabIndex(Daytime.AM, daytimeSelected),
+      type: getDaytimeButtonType(daytimeSelected)
+    }, {
+      children: Daytime.AM
+    }), Daytime.AM), jsx(DotButton, Object.assign({
+      className: "dot-picker-button",
+      "data-testid": dataTestId && `${dataTestId}-pm-button`,
+      onClick: () => handleDaytimeSelection(Daytime.PM),
+      onKeyDown: handleTimeKeydown(daytimeRef, 1),
+      tabIndex: getDaytimeButtonTabIndex(Daytime.PM, daytimeSelected),
+      type: getTimePickerButtonType(daytimeSelected)
+    }, {
+      children: Daytime.PM
+    }), Daytime.PM)]
+  }), void 0);
+  const paperComponent = jsxs(Paper, Object.assign({
+    className: "dot-time-picker-paper",
+    elevation: 8
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: "dot-time-picker-selection"
+    }, {
+      children: [jsx("div", Object.assign({
+        className: "dot-time-picker-hours",
+        ref: hoursRef
+      }, {
+        children: renderTimePickerHours()
+      }), void 0), jsx("div", Object.assign({
+        className: "dot-time-picker-minutes",
+        ref: minutesRef
+      }, {
+        children: renderTimePickerMinutes()
+      }), void 0), _ampm && renderDaytime()]
+    }), void 0), !hideActionButtons && renderTimePickerActionButtons()]
+  }), void 0);
   return jsxs(StyledTimePickerContainer, Object.assign({
     className: containerClasses,
     "data-testid": dataTestId,
@@ -9936,7 +10135,7 @@ const DotTimePicker = ({
         autoFocus: _autoFocus,
         className: rootClasses,
         disabled: disabled,
-        format: format,
+        format: displayFormat,
         inputRef: inputRef,
         label: persistentLabel ? null : label,
         onChange: handleInputChange,
@@ -9966,7 +10165,8 @@ const DotTimePicker = ({
               onBlur
             },
             fullWidth: _fullWidth,
-            name: inputName
+            name: inputName,
+            onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Input)
           },
           field: {
             readOnly: isComponentReadOnly
@@ -9980,97 +10180,10 @@ const DotTimePicker = ({
       "data-testid": dataTestId && `${dataTestId}-popper`,
       disablePortal: true,
       open: isPickerOpened,
+      onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Popper),
       placement: "bottom-start"
     }, {
-      children: jsx(ClickAwayListener, Object.assign({
-        onClickAway: handleSet
-      }, {
-        children: jsxs(Paper, Object.assign({
-          className: "dot-time-picker-paper",
-          elevation: 8
-        }, {
-          children: [jsxs("div", Object.assign({
-            className: "dot-time-picker-selection"
-          }, {
-            children: [jsx("div", Object.assign({
-              className: "dot-time-picker-hours",
-              ref: hoursRef
-            }, {
-              children: hours.map((hour, index) => {
-                const isSelected = pickerTime ? selectedPickerHour === hour : false;
-                return jsx(DotButton, Object.assign({
-                  className: "dot-picker-button",
-                  "data-testid": dataTestId && `${dataTestId}-hour-button-${hour}`,
-                  onClick: () => handleHourClick(hour),
-                  onKeyDown: handleTimeKeydown(hoursRef, index),
-                  tabIndex: getPopperButtonTabIndex(index, isSelected, selectedPickerHour),
-                  type: isSelected ? 'primary' : 'text'
-                }, {
-                  children: hour.toString().padStart(2, '0')
-                }), hour);
-              })
-            }), void 0), jsx("div", Object.assign({
-              className: "dot-time-picker-minutes",
-              ref: minutesRef
-            }, {
-              children: minutes.map((minute, index) => {
-                const isSelected = pickerTime ? pickerTime.minute() === minute : false;
-                return jsx(DotButton, Object.assign({
-                  className: "dot-picker-button",
-                  "data-testid": dataTestId && `${dataTestId}-minute-button-${minute}`,
-                  type: isSelected ? 'primary' : 'text',
-                  onClick: () => handleMinuteClick(minute),
-                  onKeyDown: handleTimeKeydown(minutesRef, index),
-                  tabIndex: getPopperButtonTabIndex(index, isSelected, pickerTime === null || pickerTime === void 0 ? void 0 : pickerTime.minute())
-                }, {
-                  children: minute.toString().padStart(2, '0')
-                }), minute);
-              })
-            }), void 0), _ampm && jsxs("div", Object.assign({
-              className: "dot-time-picker-daytime",
-              ref: daytimeRef
-            }, {
-              children: [jsx(DotButton, Object.assign({
-                className: "dot-picker-button",
-                "data-testid": dataTestId && `${dataTestId}-am-button`,
-                onClick: () => handleDaytimeSelection(Daytime.AM),
-                onKeyDown: handleTimeKeydown(daytimeRef, 0),
-                tabIndex: getDaytimeButtonTabIndex(Daytime.AM, daytimeSelected),
-                type: daytimeSelected && daytimeSelected === Daytime.AM ? 'primary' : 'text'
-              }, {
-                children: Daytime.AM
-              }), Daytime.AM), jsx(DotButton, Object.assign({
-                className: "dot-picker-button",
-                "data-testid": dataTestId && `${dataTestId}-pm-button`,
-                onClick: () => handleDaytimeSelection(Daytime.PM),
-                onKeyDown: handleTimeKeydown(daytimeRef, 1),
-                tabIndex: getDaytimeButtonTabIndex(Daytime.PM, daytimeSelected),
-                type: getTimePickerButtonType(daytimeSelected)
-              }, {
-                children: Daytime.PM
-              }), Daytime.PM)]
-            }), void 0)]
-          }), void 0), !hideActionButtons && jsxs("div", Object.assign({
-            className: "dot-time-picker-action-buttons"
-          }, {
-            children: [jsx(DotButton, Object.assign({
-              "data-testid": dataTestId && `${dataTestId}-cancel`,
-              onClick: handleCancel,
-              size: "small",
-              type: "text"
-            }, {
-              children: "Cancel"
-            }), void 0), jsx(DotButton, Object.assign({
-              "data-testid": dataTestId && `${dataTestId}-set`,
-              onClick: handleSet,
-              size: "small",
-              type: "text"
-            }, {
-              children: "Set"
-            }), void 0)]
-          }), void 0)]
-        }), void 0)
-      }), void 0)
+      children: _disableClickAwayListener ? paperComponent : wrapWithClickAwayListener(paperComponent)
     }), void 0)]
   }), void 0);
 };
@@ -10087,4 +10200,4 @@ const DotClickAwayListener = ({
   }, void 0);
 };
 
-export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };
+export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, checkIfValidDate, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };