@digital-ai/dot-components 2.6.1 → 2.7.1

package/CHANGE_LOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## [2.7.1](https://www.npmjs.com/package/@digital-ai/dot-components) (04/20/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.0...2.7.1)
+
+**Features:**
+
+- S-91943: `DotDatePicker` - add `minDate` and `maxDate` props [\#1450](https://github.com/digital-ai/dot-components/pull/1450) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- `DotTimePicker`, `DotDatePicker`: fix issues with controlled and uncontrolled states [\#1454](https://github.com/digital-ai/dot-components/pull/1454) ([dmiletic85](https://github.com/dmiletic85))
+- D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
+
+**Misc:**
+
+- S-91314: Remove use of deprecated `StylesProvider` [\#1457](https://github.com/digital-ai/dot-components/pull/1457) ([CWSites](https://github.com/CWSites))
+- S-91975: `TimePicker` - Improve keyboard access [\#1455](https://github.com/digital-ai/dot-components/pull/1455) ([dmiletic85](https://github.com/dmiletic85))
+
+## [2.7.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/14/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.6.1...2.7.0)
+
+**Features:**
+
+- S-91919: `DotDatePicker`, `DotTimePicker`: expose `onBlur` prop [\#1443](https://github.com/digital-ai/dot-components/pull/1443) ([dmiletic85](https://github.com/dmiletic85))
+- S-91870 `DotButton`: expose `tabIndex` prop [\#1439](https://github.com/digital-ai/dot-components/pull/1439) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- D-24793:  `DotTimePicker` - set clock instead of calendar icon [\#1444](https://github.com/digital-ai/dot-components/pull/1444) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [2.6.1](https://www.npmjs.com/package/@digital-ai/dot-components) (04/06/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.6.0...2.6.1)
@@ -292,10 +323,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.4...2.0.0-rc.3)
 
-**Features:**
-
-- S-87620 Adjust height for inputs and for medium sized buttons [\#1263](https://github.com/digital-ai/dot-components/pull/1263) ([nikolinadapic](https://github.com/nikolinadapic))
-
 **Fixed bugs:**
 
 - D-22512: Design differences between 2.0 and 1.x [\#1285](https://github.com/digital-ai/dot-components/pull/1285) ([CWSites](https://github.com/CWSites))
@@ -313,6 +340,7 @@
 **Features:**
 
 - S-87871 Expose callback when sidebar collapses/expands [\#1274](https://github.com/digital-ai/dot-components/pull/1274) ([angel-git](https://github.com/angel-git))
+- S-87620 Adjust height for inputs and for medium sized buttons [\#1263](https://github.com/digital-ai/dot-components/pull/1263) ([nikolinadapic](https://github.com/nikolinadapic))
 
 **Fixed bugs:**
 
@@ -354,6 +382,7 @@
 
 **Fixed bugs:**
 
+- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -384,7 +413,6 @@
 
 **Fixed bugs:**
 
-- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - D-20931: `DotAccordion` - display top border correctly when expanded [\#1232](https://github.com/digital-ai/dot-components/pull/1232) ([CWSites](https://github.com/CWSites))
 - D-22087: `DotRadioGroup` / `DotCheckboxGroup` helper texts do not follow the same styles as other helper texts [\#1225](https://github.com/digital-ai/dot-components/pull/1225) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -497,7 +525,6 @@
 
 **Fixed bugs:**
 
-- S-84816: `InlineEdit`: Disable Save button when value contains only spaces [\#1156](https://github.com/digital-ai/dot-components/pull/1156) ([dmiletic85](https://github.com/dmiletic85))
 - D-20958: Safari animation jitter [\#1154](https://github.com/digital-ai/dot-components/pull/1154) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -514,6 +541,7 @@
 
 **Fixed bugs:**
 
+- S-84816: `InlineEdit`: Disable Save button when value contains only spaces [\#1156](https://github.com/digital-ai/dot-components/pull/1156) ([dmiletic85](https://github.com/dmiletic85))
 - D-20970: DotTableActions component [\#1134](https://github.com/digital-ai/dot-components/pull/1134) ([selsemore](https://github.com/selsemore))
 - D-20359: only display tooltip if string [\#1127](https://github.com/digital-ai/dot-components/pull/1127) ([CWSites](https://github.com/CWSites))
 
@@ -895,7 +923,6 @@
 - S-79571: DotInput - expose onKeyDown [\#846](https://github.com/digital-ai/dot-components/pull/846) ([monapatel91](https://github.com/monapatel91))
 - S-79357: evaluate codebase and remove old references to core Tooltip [\#844](https://github.com/digital-ai/dot-components/pull/844) ([CWSites](https://github.com/CWSites))
 - S-80621: file upload  [\#840](https://github.com/digital-ai/dot-components/pull/840) ([CWSites](https://github.com/CWSites))
-- S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
 - S-76922: file upload [\#820](https://github.com/digital-ai/dot-components/pull/820) ([CWSites](https://github.com/CWSites))
 
 **Fixed bugs:**
@@ -914,6 +941,7 @@
 
 **Features:**
 
+- S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
 - S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -1090,6 +1118,7 @@
 
 - MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
 - pass value to tab [\#694](https://github.com/digital-ai/dot-components/pull/694) ([kmmarsh](https://github.com/kmmarsh))
+- S-78831: update AppToolbar component for Agility [\#691](https://github.com/digital-ai/dot-components/pull/691) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.12](https://www.npmjs.com/package/@digital-ai/dot-components) (09/23/2021)
 
@@ -1108,7 +1137,6 @@
 
 **Misc:**
 
-- S-78831: update AppToolbar component for Agility [\#691](https://github.com/digital-ai/dot-components/pull/691) ([CWSites](https://github.com/CWSites))
 - Next Release [\#689](https://github.com/digital-ai/dot-components/pull/689) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.11](https://www.npmjs.com/package/@digital-ai/dot-components) (09/16/2021)
@@ -1238,7 +1266,6 @@
 - S-77681: setup test-coverage for reporting on dot-components [\#610](https://github.com/digital-ai/dot-components/pull/610) ([CWSites](https://github.com/CWSites))
 - S-76838: address Sonarcloud code issues [\#608](https://github.com/digital-ai/dot-components/pull/608) ([CWSites](https://github.com/CWSites))
 - S-77317: Add 'height' prop to DotDrawer component [\#603](https://github.com/digital-ai/dot-components/pull/603) ([selsemore](https://github.com/selsemore))
-- Update GitHub prerelease [\#599](https://github.com/digital-ai/dot-components/pull/599) ([CWSites](https://github.com/CWSites))
 - S-76917: remove progressionBoard styles from theme provider [\#597](https://github.com/digital-ai/dot-components/pull/597) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.3](https://www.npmjs.com/package/@digital-ai/dot-components) (07/27/2021)

package/index.esm.js

@@ -1,11 +1,10 @@
 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, 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 { 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';
 import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
-import { StylesProvider } from '@mui/styles';
 import jwt_decode from 'jwt-decode';
 import { useDropzone } from 'react-dropzone';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
@@ -873,7 +872,7 @@ function DotThemeProvider({
   theme = lightTheme
 }) {
   const userTheme = typeof theme === 'string' && theme === 'dark' ? darkTheme : lightTheme;
-  return jsx(StylesProvider, Object.assign({
+  return jsx(StyledEngineProvider, Object.assign({
     injectFirst: true
   }, {
     children: jsx(ThemeProvider, Object.assign({
@@ -914,6 +913,8 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
     children: content
   }), void 0) : content;
 };
+const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
+const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
 const DotAlertBanner = ({
   action,
@@ -1728,8 +1729,10 @@ const DotButton = /*#__PURE__*/forwardRef(({
   fullWidth: _fullWidth = false,
   isSubmit: _isSubmit = false,
   onClick,
+  onKeyDown,
   size: _size = 'medium',
   startIcon,
+  tabIndex,
   tooltip,
   type: _type = 'primary'
 }, ref) => {
@@ -1770,9 +1773,11 @@ const DotButton = /*#__PURE__*/forwardRef(({
       endIcon: endIcon,
       fullWidth: _fullWidth,
       onClick: event => onClick && onClick(event),
+      onKeyDown: onKeyDown,
       ref: ref,
       size: _size,
       startIcon: startIcon,
+      tabIndex: tabIndex,
       type: _isSubmit ? 'submit' : 'button',
       variant: variant
     }, {
@@ -9477,6 +9482,7 @@ const DotDatePicker = ({
   className,
   closeOnSelect: _closeOnSelect = true,
   'data-testid': dataTestId,
+  defaultValue,
   disableOpenPicker,
   disablePast,
   disabled,
@@ -9491,7 +9497,10 @@ const DotDatePicker = ({
   inputName,
   label,
   locale,
+  maxDate,
+  minDate,
   onAccept,
+  onBlur,
   onChange,
   onClose,
   onError,
@@ -9503,8 +9512,20 @@ const DotDatePicker = ({
   showDaysOutsideCurrentMonth,
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1, className, _readOnly ? 'read-only' : '');
+  const dateFormat = format || 'YYYY-MM-DD';
+  const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
+  const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
+  const isInputReadOnly = _readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
+  const rootClasses = useStylesWithRootClass(rootClassName$1, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, _fullWidth ? 'full-width' : '', className);
+  useEffect(() => {
+    if (hasValueWithoutChangeHandler) {
+      console.warn('Warning: You provided a `value` prop without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.');
+    }
+    if (hasBothValueAndDefaultValue) {
+      console.warn('Warning: A component contains both `value` and `defaultValue` props. Component must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.');
+    }
+  }, []);
   useEffect(() => {
     if (!locale) return;
     const userLocaleName = dayjs.locale();
@@ -9512,7 +9533,6 @@ const DotDatePicker = ({
     dayjs.extend(updateLocale);
     dayjs.updateLocale(userLocaleName, Object.assign(Object.assign({}, userLocaleProps), locale));
   }, [locale]);
-  const dateFormat = format || 'YYYY-MM-DD';
   const handleChange = (changedValue, context) => {
     if (!onChange || changedValue && !changedValue.isValid()) return;
     onChange(changedValue ? changedValue.format(dateFormat) : null, context);
@@ -9521,6 +9541,7 @@ const DotDatePicker = ({
     if (!onAccept) return;
     onAccept(changedValue ? changedValue.format(dateFormat) : null);
   };
+  const handleError = (validationError, currentValue) => onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs(currentValue).format(dateFormat));
   const createActionBar = () => {
     const actionBar = {
       actions: []
@@ -9549,17 +9570,20 @@ const DotDatePicker = ({
         autoFocus: _autoFocus,
         closeOnSelect: _closeOnSelect,
         className: rootClasses,
-        disableOpenPicker: disableOpenPicker || _readOnly || disabled,
+        defaultValue: defaultValue && dayjs(defaultValue, dateFormat),
+        disableOpenPicker: disableOpenPicker || isInputReadOnly || disabled,
         disablePast: disablePast,
         disabled: disabled,
         displayWeekNumber: displayWeekNumber,
         fixedWeekNumber: fixedWeekNumber,
-        format: format,
+        format: dateFormat,
         label: persistentLabel ? null : label,
+        maxDate: maxDate && dayjs(maxDate, dateFormat),
+        minDate: minDate && dayjs(minDate, dateFormat),
         onAccept: handleAccept,
         onChange: handleChange,
         onClose: onClose,
-        onError: onError,
+        onError: handleError,
         onOpen: onOpen,
         open: open,
         showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
@@ -9584,19 +9608,23 @@ const DotDatePicker = ({
             required: _required,
             helperText,
             error,
-            focused: _readOnly ? false : undefined,
+            focused: isInputReadOnly ? false : undefined,
             inputProps: {
               className: 'dot-input',
-              'data-testid': 'dot-date-picker-input'
+              'data-testid': 'dot-date-picker-input',
+              onBlur
             },
             fullWidth: _fullWidth,
             name: inputName
           },
           field: {
-            readOnly: _readOnly
+            readOnly: isInputReadOnly
+          },
+          desktopTrapFocus: {
+            disableEnforceFocus: true
           }
         },
-        value: value && dayjs(value)
+        value: value && dayjs(value, dateFormat)
       }, void 0)]
     }), void 0)
   }), void 0);
@@ -9661,6 +9689,10 @@ const getSelectedHourButtonIndex = (selectedHour, is12HourFormat) => {
     return selectedHour;
   }
 };
+const getPopperButtonTabIndex = (index, isSelected, selectedValue) => selectedValue && isSelected || !selectedValue && index === 0 ? undefined : -1;
+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 rootClassName = 'dot-time-picker';
 const containerClassName = 'dot-time-picker-container';
@@ -9691,6 +9723,7 @@ const DotTimePicker = ({
   autoFocus: _autoFocus = false,
   className,
   'data-testid': dataTestId,
+  defaultValue,
   disableOpenPicker: _disableOpenPicker = false,
   disabled,
   error,
@@ -9701,6 +9734,8 @@ const DotTimePicker = ({
   inputId,
   inputName,
   label,
+  onAccept,
+  onBlur,
   onChange,
   onClose,
   onOpen,
@@ -9710,24 +9745,43 @@ const DotTimePicker = ({
   required: _required = false,
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName, className, _readOnly ? 'read-only' : '');
+  const timeFormat = format || DEFAULT_TIME_FORMAT;
+  const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
+  const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
+  const isComponentReadOnly = _readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
+  const rootClasses = useStylesWithRootClass(rootClassName, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName, _fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
-  const timeFormat = format || DEFAULT_TIME_FORMAT;
   const [time, setTime] = useState(null);
   const [pickerTime, setPickerTime] = useState();
   const hoursRef = useRef(null);
   const minutesRef = useRef(null);
+  const daytimeRef = useRef(null);
   const hours = getHoursForTimePicker(_ampm);
   const minutes = getMinutesForTimePicker();
-  const daytimeSelected = pickerTime && pickerTime.format('A') || Daytime.AM;
+  const daytimeSelected = getSelectedDaytime(pickerTime);
+  const selectedPickerHour = pickerTime && calculateHourBasedOnTimeFormat(pickerTime, _ampm);
   const isOpenPropDefined = open !== null && open !== undefined;
+  const isControlledComponent = onChange && value !== undefined;
+  useEffect(() => {
+    if (hasValueWithoutChangeHandler) {
+      console.warn('Warning: You provided a `value` prop without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.');
+    }
+    if (hasBothValueAndDefaultValue) {
+      console.warn('Warning: A component contains both `value` and `defaultValue` props. Component must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.');
+    }
+  }, []);
   useEffect(() => {
-    const timeValue = value ? getDayjsUtcDate(value, timeFormat) : null;
+    let timeValue = null;
+    if (defaultValue) {
+      timeValue = getDayjsUtcDate(defaultValue, timeFormat);
+    } else if (value) {
+      timeValue = getDayjsUtcDate(value, timeFormat);
+    }
     setTime(timeValue);
     setPickerTime(timeValue);
-  }, [value]);
+  }, [value, defaultValue]);
   useLayoutEffect(() => {
     if (isPickerOpened && time) {
       scrollToSelectedTime();
@@ -9746,7 +9800,9 @@ const DotTimePicker = ({
     setPickerTime(pickedDateTime);
   };
   const handleInputChange = (currentValue, context) => {
+    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);
   };
   const handleClose = () => {
@@ -9775,11 +9831,16 @@ const DotTimePicker = ({
     handleClose();
   };
   const handleSet = () => {
-    handleClose();
+    if (!pickerTime) {
+      handleClose();
+      return;
+    }
     setTime(pickerTime);
     onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
       validationError: null
     });
+    onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
+    handleClose();
   };
   const scrollToSelectedTime = () => {
     if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
@@ -9797,9 +9858,26 @@ const DotTimePicker = ({
       minutesRef.current.children[selectedMinute].scrollIntoView(scrollOptions);
     }
   };
+  const handleTimeKeydown = (ref, index) => event => {
+    const numberOfElements = ref.current.children.length;
+    const prevElement = index > 0 && ref.current.children[index - 1];
+    const nextElement = index < numberOfElements - 1 && ref.current.children[index + 1];
+    if (checkIfArrowUpPressed(event) && prevElement) {
+      event.preventDefault();
+      prevElement.focus();
+    } else if (checkIfArrowDownPressed(event) && nextElement) {
+      event.preventDefault();
+      nextElement.focus();
+    }
+  };
+  const handleTimePickerKeyDown = event => {
+    if (event.key !== 'Escape' || !isPickerOpened) return;
+    handleCancel();
+  };
   return jsxs(StyledTimePickerContainer, Object.assign({
     className: containerClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    onKeyDown: handleTimePickerKeyDown
   }, {
     children: [jsxs(LocalizationProvider, Object.assign({
       dateAdapter: AdapterDayjs
@@ -9826,16 +9904,16 @@ const DotTimePicker = ({
             required: _required,
             helperText,
             error,
-            focused: _readOnly ? false : undefined,
+            focused: isComponentReadOnly ? false : undefined,
             InputProps: {
               endAdornment: jsxs(Fragment$1, {
                 children: [error && jsx(DotIcon, {
                   className: "dot-error-icon",
                   "data-testid": dataTestId && `${dataTestId}-input-error-icon`,
                   iconId: "error-solid"
-                }, void 0), !_disableOpenPicker && !_readOnly && !disabled && jsx(DotIconButton, {
+                }, void 0), !_disableOpenPicker && !isComponentReadOnly && !disabled && jsx(DotIconButton, {
                   "data-testid": dataTestId && `${dataTestId}-open-btn`,
-                  iconId: "calendar",
+                  iconId: "pending-clock",
                   onClick: _event => handleTimePickerButtonClick(),
                   size: "small"
                 }, void 0)]
@@ -9843,23 +9921,24 @@ const DotTimePicker = ({
             },
             inputProps: {
               className: 'dot-input',
-              'data-testid': dataTestId && `${dataTestId}-input`
+              'data-testid': dataTestId && `${dataTestId}-input`,
+              onBlur
             },
             fullWidth: _fullWidth,
             name: inputName
           },
           field: {
-            readOnly: _readOnly
+            readOnly: isComponentReadOnly
           }
         },
         value: time
       }, void 0)]
     }), void 0), jsx(Popper, Object.assign({
+      anchorEl: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current,
       className: "dot-time-picker-popper",
       "data-testid": dataTestId && `${dataTestId}-popper`,
-      open: isPickerOpened,
-      anchorEl: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current,
       disablePortal: true,
+      open: isPickerOpened,
       placement: "bottom-start"
     }, {
       children: jsx(ClickAwayListener, Object.assign({
@@ -9876,12 +9955,14 @@ const DotTimePicker = ({
               className: "dot-time-picker-hours",
               ref: hoursRef
             }, {
-              children: hours.map(hour => {
-                const isSelected = pickerTime ? calculateHourBasedOnTimeFormat(pickerTime, _ampm) === hour : false;
+              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')
@@ -9891,32 +9972,39 @@ const DotTimePicker = ({
               className: "dot-time-picker-minutes",
               ref: minutesRef
             }, {
-              children: minutes.map(minute => {
+              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)
+                  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"
+              className: "dot-time-picker-daytime",
+              ref: daytimeRef
             }, {
               children: [jsx(DotButton, Object.assign({
                 className: "dot-picker-button",
                 "data-testid": dataTestId && `${dataTestId}-am-button`,
-                type: daytimeSelected && daytimeSelected === Daytime.AM ? 'primary' : 'text',
-                onClick: () => handleDaytimeSelection(Daytime.AM)
+                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`,
-                type: daytimeSelected && daytimeSelected === Daytime.PM ? 'primary' : 'text',
-                onClick: () => handleDaytimeSelection(Daytime.PM)
+                onClick: () => handleDaytimeSelection(Daytime.PM),
+                onKeyDown: handleTimeKeydown(daytimeRef, 1),
+                tabIndex: getDaytimeButtonTabIndex(Daytime.PM, daytimeSelected),
+                type: getTimePickerButtonType(daytimeSelected)
               }, {
                 children: Daytime.PM
               }), Daytime.PM)]

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@mui/material'), require('@digital-ai/dot-icons'), require('styled-components'), require('@mui/material/styles'), require('@mui/styles'), require('jwt-decode'), require('react-dropzone'), require('react-grid-layout'), require('dayjs'), require('dayjs/plugin/updateLocale'), require('@mui/x-date-pickers'), require('@mui/x-date-pickers/AdapterDayjs'), require('dayjs/plugin/utc')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@mui/material', '@digital-ai/dot-icons', 'styled-components', '@mui/material/styles', '@mui/styles', 'jwt-decode', 'react-dropzone', 'react-grid-layout', 'dayjs', 'dayjs/plugin/updateLocale', '@mui/x-date-pickers', '@mui/x-date-pickers/AdapterDayjs', 'dayjs/plugin/utc'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DotComponents = {}, global.jsxRuntime, global.React, global.MuiCore, null, global.styled, global.styles, global.styles$1, global.jwt_decode, global.ReactDropzone, global.GridLayout, global.dayjs, global.updateLocale, global.xDatePickers, global.AdapterDayjs, global.utc));
-})(this, (function (exports, jsxRuntime, React, material, dotIcons, styled, styles, styles$1, jwt_decode, reactDropzone, GridLayout, dayjs, updateLocale, xDatePickers, AdapterDayjs, utc) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@mui/material'), require('@digital-ai/dot-icons'), require('styled-components'), require('@mui/material/styles'), require('jwt-decode'), require('react-dropzone'), require('react-grid-layout'), require('dayjs'), require('dayjs/plugin/updateLocale'), require('@mui/x-date-pickers'), require('@mui/x-date-pickers/AdapterDayjs'), require('dayjs/plugin/utc')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@mui/material', '@digital-ai/dot-icons', 'styled-components', '@mui/material/styles', 'jwt-decode', 'react-dropzone', 'react-grid-layout', 'dayjs', 'dayjs/plugin/updateLocale', '@mui/x-date-pickers', '@mui/x-date-pickers/AdapterDayjs', 'dayjs/plugin/utc'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DotComponents = {}, global.jsxRuntime, global.React, global.MuiCore, null, global.styled, global.styles, global.jwt_decode, global.ReactDropzone, global.GridLayout, global.dayjs, global.updateLocale, global.xDatePickers, global.AdapterDayjs, global.utc));
+})(this, (function (exports, jsxRuntime, React, material, dotIcons, styled, styles, jwt_decode, reactDropzone, GridLayout, dayjs, updateLocale, xDatePickers, AdapterDayjs, utc) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1007,7 +1007,7 @@
         _b = _a.theme,
         theme = _b === void 0 ? lightTheme : _b;
       var userTheme = typeof theme === 'string' && theme === 'dark' ? darkTheme : lightTheme;
-      return jsxRuntime.jsx(styles$1.StylesProvider, __assign({
+      return jsxRuntime.jsx(material.StyledEngineProvider, __assign({
         injectFirst: true
       }, {
         children: jsxRuntime.jsx(styles.ThemeProvider, __assign({
@@ -1059,6 +1059,12 @@
         children: content
       }), void 0) : content;
     };
+    var checkIfArrowUpPressed = function checkIfArrowUpPressed(event) {
+      return event.key === 'ArrowUp';
+    };
+    var checkIfArrowDownPressed = function checkIfArrowDownPressed(event) {
+      return event.key === 'ArrowDown';
+    };
 
     var DotAlertBanner = function DotAlertBanner(_a) {
       var action = _a.action,
@@ -1954,9 +1960,11 @@
         _f = _a.isSubmit,
         isSubmit = _f === void 0 ? false : _f,
         onClick = _a.onClick,
+        onKeyDown = _a.onKeyDown,
         _g = _a.size,
         size = _g === void 0 ? 'medium' : _g,
         startIcon = _a.startIcon,
+        tabIndex = _a.tabIndex,
         tooltip = _a.tooltip,
         _h = _a.type,
         type = _h === void 0 ? 'primary' : _h;
@@ -1999,9 +2007,11 @@
           onClick: function (event) {
             return onClick && onClick(event);
           },
+          onKeyDown: onKeyDown,
           ref: ref,
           size: size,
           startIcon: startIcon,
+          tabIndex: tabIndex,
           type: isSubmit ? 'submit' : 'button',
           variant: variant
         }, {
@@ -10306,6 +10316,7 @@
         _c = _a.closeOnSelect,
         closeOnSelect = _c === void 0 ? true : _c,
         dataTestId = _a["data-testid"],
+        defaultValue = _a.defaultValue,
         disableOpenPicker = _a.disableOpenPicker,
         disablePast = _a.disablePast,
         disabled = _a.disabled,
@@ -10322,7 +10333,10 @@
         inputName = _a.inputName,
         label = _a.label,
         locale = _a.locale,
+        maxDate = _a.maxDate,
+        minDate = _a.minDate,
         onAccept = _a.onAccept,
+        onBlur = _a.onBlur,
         onChange = _a.onChange,
         onClose = _a.onClose,
         onError = _a.onError,
@@ -10335,8 +10349,20 @@
         required = _g === void 0 ? false : _g,
         showDaysOutsideCurrentMonth = _a.showDaysOutsideCurrentMonth,
         value = _a.value;
-      var rootClasses = useStylesWithRootClass(rootClassName$1, className, readOnly ? 'read-only' : '');
+      var dateFormat = format || 'YYYY-MM-DD';
+      var hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
+      var hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
+      var isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
+      var rootClasses = useStylesWithRootClass(rootClassName$1, className, isInputReadOnly ? 'read-only' : '');
       var containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
+      React.useEffect(function () {
+        if (hasValueWithoutChangeHandler) {
+          console.warn('Warning: You provided a `value` prop without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.');
+        }
+        if (hasBothValueAndDefaultValue) {
+          console.warn('Warning: A component contains both `value` and `defaultValue` props. Component must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.');
+        }
+      }, []);
       React.useEffect(function () {
         if (!locale) return;
         var userLocaleName = dayjs__default["default"].locale();
@@ -10344,7 +10370,6 @@
         dayjs__default["default"].extend(updateLocale__default["default"]);
         dayjs__default["default"].updateLocale(userLocaleName, __assign(__assign({}, userLocaleProps), locale));
       }, [locale]);
-      var dateFormat = format || 'YYYY-MM-DD';
       var handleChange = function handleChange(changedValue, context) {
         if (!onChange || changedValue && !changedValue.isValid()) return;
         onChange(changedValue ? changedValue.format(dateFormat) : null, context);
@@ -10353,6 +10378,9 @@
         if (!onAccept) return;
         onAccept(changedValue ? changedValue.format(dateFormat) : null);
       };
+      var handleError = function handleError(validationError, currentValue) {
+        return onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs__default["default"](currentValue).format(dateFormat));
+      };
       var createActionBar = function createActionBar() {
         var actionBar = {
           actions: []
@@ -10381,17 +10409,20 @@
             autoFocus: autoFocus,
             closeOnSelect: closeOnSelect,
             className: rootClasses,
-            disableOpenPicker: disableOpenPicker || readOnly || disabled,
+            defaultValue: defaultValue && dayjs__default["default"](defaultValue, dateFormat),
+            disableOpenPicker: disableOpenPicker || isInputReadOnly || disabled,
             disablePast: disablePast,
             disabled: disabled,
             displayWeekNumber: displayWeekNumber,
             fixedWeekNumber: fixedWeekNumber,
-            format: format,
+            format: dateFormat,
             label: persistentLabel ? null : label,
+            maxDate: maxDate && dayjs__default["default"](maxDate, dateFormat),
+            minDate: minDate && dayjs__default["default"](minDate, dateFormat),
             onAccept: handleAccept,
             onChange: handleChange,
             onClose: onClose,
-            onError: onError,
+            onError: handleError,
             onOpen: onOpen,
             open: open,
             showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
@@ -10420,19 +10451,23 @@
                 required: required,
                 helperText: helperText,
                 error: error,
-                focused: readOnly ? false : undefined,
+                focused: isInputReadOnly ? false : undefined,
                 inputProps: {
                   className: 'dot-input',
-                  'data-testid': 'dot-date-picker-input'
+                  'data-testid': 'dot-date-picker-input',
+                  onBlur: onBlur
                 },
                 fullWidth: fullWidth,
                 name: inputName
               },
               field: {
-                readOnly: readOnly
+                readOnly: isInputReadOnly
+              },
+              desktopTrapFocus: {
+                disableEnforceFocus: true
               }
             },
-            value: value && dayjs__default["default"](value)
+            value: value && dayjs__default["default"](value, dateFormat)
           }, void 0)]
         }), void 0)
       }), void 0);
@@ -10507,6 +10542,18 @@
         return selectedHour;
       }
     };
+    var getPopperButtonTabIndex = function getPopperButtonTabIndex(index, isSelected, selectedValue) {
+      return selectedValue && isSelected || !selectedValue && index === 0 ? undefined : -1;
+    };
+    var getDaytimeButtonTabIndex = function getDaytimeButtonTabIndex(currentDaytime, selectedDaytime) {
+      return selectedDaytime && currentDaytime === selectedDaytime || !selectedDaytime && currentDaytime === exports.Daytime.AM ? undefined : -1;
+    };
+    var getSelectedDaytime = function getSelectedDaytime(dateTime) {
+      return dateTime && dateTime.format('A') || exports.Daytime.AM;
+    };
+    var getTimePickerButtonType = function getTimePickerButtonType(selectedDaytime) {
+      return selectedDaytime && selectedDaytime === exports.Daytime.PM ? 'primary' : 'text';
+    };
 
     var rootClassName = 'dot-time-picker';
     var containerClassName = 'dot-time-picker-container';
@@ -10542,6 +10589,7 @@
         autoFocus = _c === void 0 ? false : _c,
         className = _a.className,
         dataTestId = _a["data-testid"],
+        defaultValue = _a.defaultValue,
         _d = _a.disableOpenPicker,
         disableOpenPicker = _d === void 0 ? false : _d,
         disabled = _a.disabled,
@@ -10554,6 +10602,8 @@
         inputId = _a.inputId,
         inputName = _a.inputName,
         label = _a.label,
+        onAccept = _a.onAccept,
+        onBlur = _a.onBlur,
         onChange = _a.onChange,
         onClose = _a.onClose,
         onOpen = _a.onOpen,
@@ -10564,13 +10614,16 @@
         _g = _a.required,
         required = _g === void 0 ? false : _g,
         value = _a.value;
-      var rootClasses = useStylesWithRootClass(rootClassName, className, readOnly ? 'read-only' : '');
+      var timeFormat = format || DEFAULT_TIME_FORMAT;
+      var hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
+      var hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
+      var isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
+      var rootClasses = useStylesWithRootClass(rootClassName, className, isComponentReadOnly ? 'read-only' : '');
       var containerClasses = useStylesWithRootClass(containerClassName, fullWidth ? 'full-width' : '', className);
       var inputRef = React.useRef(null);
       var _h = React.useState(false),
         isPickerOpened = _h[0],
         setIsPickerOpened = _h[1];
-      var timeFormat = format || DEFAULT_TIME_FORMAT;
       var _j = React.useState(null),
         time = _j[0],
         setTime = _j[1];
@@ -10579,15 +10632,31 @@
         setPickerTime = _k[1];
       var hoursRef = React.useRef(null);
       var minutesRef = React.useRef(null);
+      var daytimeRef = React.useRef(null);
       var hours = getHoursForTimePicker(ampm);
       var minutes = getMinutesForTimePicker();
-      var daytimeSelected = pickerTime && pickerTime.format('A') || exports.Daytime.AM;
+      var daytimeSelected = getSelectedDaytime(pickerTime);
+      var selectedPickerHour = pickerTime && calculateHourBasedOnTimeFormat(pickerTime, ampm);
       var isOpenPropDefined = open !== null && open !== undefined;
+      var isControlledComponent = onChange && value !== undefined;
+      React.useEffect(function () {
+        if (hasValueWithoutChangeHandler) {
+          console.warn('Warning: You provided a `value` prop without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.');
+        }
+        if (hasBothValueAndDefaultValue) {
+          console.warn('Warning: A component contains both `value` and `defaultValue` props. Component must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.');
+        }
+      }, []);
       React.useEffect(function () {
-        var timeValue = value ? getDayjsUtcDate(value, timeFormat) : null;
+        var timeValue = null;
+        if (defaultValue) {
+          timeValue = getDayjsUtcDate(defaultValue, timeFormat);
+        } else if (value) {
+          timeValue = getDayjsUtcDate(value, timeFormat);
+        }
         setTime(timeValue);
         setPickerTime(timeValue);
-      }, [value]);
+      }, [value, defaultValue]);
       React.useLayoutEffect(function () {
         if (isPickerOpened && time) {
           scrollToSelectedTime();
@@ -10606,7 +10675,9 @@
         setPickerTime(pickedDateTime);
       };
       var handleInputChange = function handleInputChange(currentValue, context) {
+        var 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);
       };
       var handleClose = function handleClose() {
@@ -10635,11 +10706,16 @@
         handleClose();
       };
       var handleSet = function handleSet() {
-        handleClose();
+        if (!pickerTime) {
+          handleClose();
+          return;
+        }
         setTime(pickerTime);
         onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
           validationError: null
         });
+        onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
+        handleClose();
       };
       var scrollToSelectedTime = function scrollToSelectedTime() {
         if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
@@ -10657,9 +10733,28 @@
           minutesRef.current.children[selectedMinute].scrollIntoView(scrollOptions);
         }
       };
+      var handleTimeKeydown = function handleTimeKeydown(ref, index) {
+        return function (event) {
+          var numberOfElements = ref.current.children.length;
+          var prevElement = index > 0 && ref.current.children[index - 1];
+          var nextElement = index < numberOfElements - 1 && ref.current.children[index + 1];
+          if (checkIfArrowUpPressed(event) && prevElement) {
+            event.preventDefault();
+            prevElement.focus();
+          } else if (checkIfArrowDownPressed(event) && nextElement) {
+            event.preventDefault();
+            nextElement.focus();
+          }
+        };
+      };
+      var handleTimePickerKeyDown = function handleTimePickerKeyDown(event) {
+        if (event.key !== 'Escape' || !isPickerOpened) return;
+        handleCancel();
+      };
       return jsxRuntime.jsxs(StyledTimePickerContainer, __assign({
         className: containerClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        onKeyDown: handleTimePickerKeyDown
       }, {
         children: [jsxRuntime.jsxs(xDatePickers.LocalizationProvider, __assign({
           dateAdapter: AdapterDayjs.AdapterDayjs
@@ -10686,16 +10781,16 @@
                 required: required,
                 helperText: helperText,
                 error: error,
-                focused: readOnly ? false : undefined,
+                focused: isComponentReadOnly ? false : undefined,
                 InputProps: {
                   endAdornment: jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [error && jsxRuntime.jsx(DotIcon, {
                       className: "dot-error-icon",
                       "data-testid": dataTestId && dataTestId + "-input-error-icon",
                       iconId: "error-solid"
-                    }, void 0), !disableOpenPicker && !readOnly && !disabled && jsxRuntime.jsx(DotIconButton, {
+                    }, void 0), !disableOpenPicker && !isComponentReadOnly && !disabled && jsxRuntime.jsx(DotIconButton, {
                       "data-testid": dataTestId && dataTestId + "-open-btn",
-                      iconId: "calendar",
+                      iconId: "pending-clock",
                       onClick: function (_event) {
                         return handleTimePickerButtonClick();
                       },
@@ -10705,23 +10800,24 @@
                 },
                 inputProps: {
                   className: 'dot-input',
-                  'data-testid': dataTestId && dataTestId + "-input"
+                  'data-testid': dataTestId && dataTestId + "-input",
+                  onBlur: onBlur
                 },
                 fullWidth: fullWidth,
                 name: inputName
               },
               field: {
-                readOnly: readOnly
+                readOnly: isComponentReadOnly
               }
             },
             value: time
           }, void 0)]
         }), void 0), jsxRuntime.jsx(material.Popper, __assign({
+          anchorEl: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current,
           className: "dot-time-picker-popper",
           "data-testid": dataTestId && dataTestId + "-popper",
-          open: isPickerOpened,
-          anchorEl: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current,
           disablePortal: true,
+          open: isPickerOpened,
           placement: "bottom-start"
         }, {
           children: jsxRuntime.jsx(material.ClickAwayListener, __assign({
@@ -10738,14 +10834,16 @@
                   className: "dot-time-picker-hours",
                   ref: hoursRef
                 }, {
-                  children: hours.map(function (hour) {
-                    var isSelected = pickerTime ? calculateHourBasedOnTimeFormat(pickerTime, ampm) === hour : false;
+                  children: hours.map(function (hour, index) {
+                    var isSelected = pickerTime ? selectedPickerHour === hour : false;
                     return jsxRuntime.jsx(DotButton, __assign({
                       className: "dot-picker-button",
                       "data-testid": dataTestId && dataTestId + "-hour-button-" + hour,
                       onClick: function () {
                         return handleHourClick(hour);
                       },
+                      onKeyDown: handleTimeKeydown(hoursRef, index),
+                      tabIndex: getPopperButtonTabIndex(index, isSelected, selectedPickerHour),
                       type: isSelected ? 'primary' : 'text'
                     }, {
                       children: hour.toString().padStart(2, '0')
@@ -10755,7 +10853,7 @@
                   className: "dot-time-picker-minutes",
                   ref: minutesRef
                 }, {
-                  children: minutes.map(function (minute) {
+                  children: minutes.map(function (minute, index) {
                     var isSelected = pickerTime ? pickerTime.minute() === minute : false;
                     return jsxRuntime.jsx(DotButton, __assign({
                       className: "dot-picker-button",
@@ -10763,30 +10861,37 @@
                       type: isSelected ? 'primary' : 'text',
                       onClick: function () {
                         return 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 && jsxRuntime.jsxs("div", __assign({
-                  className: "dot-time-picker-daytime"
+                  className: "dot-time-picker-daytime",
+                  ref: daytimeRef
                 }, {
                   children: [jsxRuntime.jsx(DotButton, __assign({
                     className: "dot-picker-button",
                     "data-testid": dataTestId && dataTestId + "-am-button",
-                    type: daytimeSelected && daytimeSelected === exports.Daytime.AM ? 'primary' : 'text',
                     onClick: function () {
                       return handleDaytimeSelection(exports.Daytime.AM);
-                    }
+                    },
+                    onKeyDown: handleTimeKeydown(daytimeRef, 0),
+                    tabIndex: getDaytimeButtonTabIndex(exports.Daytime.AM, daytimeSelected),
+                    type: daytimeSelected && daytimeSelected === exports.Daytime.AM ? 'primary' : 'text'
                   }, {
                     children: exports.Daytime.AM
                   }), exports.Daytime.AM), jsxRuntime.jsx(DotButton, __assign({
                     className: "dot-picker-button",
                     "data-testid": dataTestId && dataTestId + "-pm-button",
-                    type: daytimeSelected && daytimeSelected === exports.Daytime.PM ? 'primary' : 'text',
                     onClick: function () {
                       return handleDaytimeSelection(exports.Daytime.PM);
-                    }
+                    },
+                    onKeyDown: handleTimeKeydown(daytimeRef, 1),
+                    tabIndex: getDaytimeButtonTabIndex(exports.Daytime.PM, daytimeSelected),
+                    type: getTimePickerButtonType(daytimeSelected)
                   }, {
                     children: exports.Daytime.PM
                   }), exports.Daytime.PM)]

package/lib/components/button/Button.d.ts

@@ -1,12 +1,15 @@
-import { ReactNode } from 'react';
+import { KeyboardEventHandler, ReactNode } from 'react';
 import { BaseButtonProps } from '../BaseButtonProps';
 export interface ButtonProps extends BaseButtonProps {
     /** The text for the button. Button text should be in sentence case. */
     children: ReactNode;
     /** Icon placed after the children. */
     endIcon?: ReactNode;
+    onKeyDown?: KeyboardEventHandler;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
+    /** Tab order for the button. */
+    tabIndex?: number;
 }
 /** This component wraps the Button component from @material-ui. */
 export declare const DotButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/components/button/Button.stories.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, Story } from '@storybook/react';
 import { ButtonProps } from './Button';
-declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>>;
+import React from 'react';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
 export default _default;
 export declare const Default: any;
 export declare const WithStartIcon: any;
@@ -9,3 +9,4 @@ export declare const WithEndIcon: any;
 export declare const WithDestructiveType: any;
 export declare const WithOutlinedType: any;
 export declare const WithTextType: any;
+export declare const WithTabbableLinkAsChildren: Story<ButtonProps>;

package/lib/components/button/Button.stories.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonWithLinkClassName = "dot-button-with-link";
+export declare const StyledButtonWithLink: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/date-picker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { FocusEvent, ReactNode } from 'react';
 import { PickersDayProps } from '@mui/x-date-pickers';
 import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 import { CommonProps } from '../CommonProps';
@@ -9,6 +9,8 @@ export interface DatePickerProps extends CommonProps {
     autoFocus?: boolean;
     /** If `true`, the popover or modal will close after submitting the full date. */
     closeOnSelect?: boolean;
+    /** The default value. Use when the component is not controlled. */
+    defaultValue?: string;
     /** If `true`, the open picker button will not be rendered (renders only the field). */
     disableOpenPicker?: boolean;
     /** If `true`, disable values before the current date for date components, time for time components and both for date time components. */
@@ -37,8 +39,14 @@ export interface DatePickerProps extends CommonProps {
     label?: string;
     /** Locale for the date library you are using */
     locale?: DatePickerLocale;
+    /** Maximal selectable date */
+    maxDate?: string;
+    /** Minimal selectable date. */
+    minDate?: string;
     /** Callback fired when the value is accepted. */
     onAccept?: (value: string) => void;
+    /** A function that should be executed when the input loses focus */
+    onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
     /** Callback fired when the value changes. */
     onChange?: (value: string, context: FieldChangeHandlerContext<string>) => void;
     /** Callback fired when the popup requests to be closed. Use in controlled mode (see `open`). */
@@ -65,4 +73,4 @@ export interface DatePickerProps extends CommonProps {
     /** The selected value. Used when the component is controlled. */
     value?: string;
 }
-export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;
+export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;

package/lib/components/date-picker/DatePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { DatePickerProps } from './';
-declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: DatePickerProps;
 export declare const WithHelperText: any;
@@ -16,5 +16,10 @@ export declare const WithRequiredOption: any;
 export declare const WithDaysOutsideOfCurrentMonth: any;
 export declare const WithFullWidth: any;
 export declare const WithoutClearButton: any;
+export declare const WithConsoleWarning: any;
+export declare const WithDefaultValue: any;
 export declare const WithControlledMode: Story<DatePickerProps>;
+export declare const WithMinMaxDates: Story<DatePickerProps>;
 export declare const WithLocaleConfiguration: Story<DatePickerProps>;
+export declare const WithChangeOnBlur: Story<DatePickerProps>;
+export declare const WithOpenedPopperInControlledMode: Story<DatePickerProps>;

package/lib/components/date-picker/DatePicker.stories.styles.d.ts

@@ -1,4 +1,6 @@
 export declare const datePickerWithControlledModeClassName = "dot-date-picker-with-controlled-mode";
 export declare const datePickerWithLocaleClassName = "dot-date-picker-with-locale";
+export declare const datePickerWithBlurClassName = "dot-date-picker-with-blur";
 export declare const StyledDatePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDatePickerWithChangeOnBlur: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledDatePickerWithLocale: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/helpers.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, KeyboardEvent } from 'react';
 import { TypographyVariant } from './typography/Typography';
 import { AvatarColor } from './avatar/Avatar';
 export declare const calculateNumberFromText: (text: string) => number;
@@ -9,3 +9,5 @@ export declare const isLowerCase: (str: string) => boolean;
 export declare const isNumber: (num: unknown) => boolean;
 export declare const renderNodeOrTypography: (content: string | ReactNode, typographyVariant?: TypographyVariant) => ReactNode;
 export declare const searchString: (needle: string, haystack: string) => boolean;
+export declare const checkIfArrowUpPressed: (event: KeyboardEvent) => boolean;
+export declare const checkIfArrowDownPressed: (event: KeyboardEvent) => boolean;

package/lib/components/time-picker/TimePicker.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { FocusEvent, ReactNode } from 'react';
 import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 import { CommonProps } from '../CommonProps';
 export interface TimePickerProps extends CommonProps {
@@ -6,6 +6,8 @@ export interface TimePickerProps extends CommonProps {
     ampm?: boolean;
     /** If `true`, the `input` element is focused during the first mount. */
     autoFocus?: boolean;
+    /** The default value. Use when the component is not controlled. */
+    defaultValue?: string;
     /** If `true`, the open picker button will not be rendered (renders only the field). */
     disableOpenPicker?: boolean;
     /** If `true`, the picker and text field are disabled. */
@@ -25,6 +27,10 @@ export interface TimePickerProps extends CommonProps {
     inputName?: string;
     /** The label content. */
     label?: string;
+    /** Callback fired when the value is changed from the popper. */
+    onAccept?: (value: string) => void;
+    /** A function that should be executed when the input loses focus */
+    onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
     /** Callback fired when the value changes. */
     onChange?: (value: string, context: FieldChangeHandlerContext<string>) => void;
     /** Callback fired when the popup requests to be closed. Use in controlled mode (see `open`). */
@@ -45,4 +51,4 @@ export interface TimePickerProps extends CommonProps {
 export declare const DEFAULT_PICKER_TIME_FORMAT = "hh:mm";
 export declare const DEFAULT_TIME_FORMAT = "hh:mm A";
 export declare const DEFAULT_TIME = "01:00";
-export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;
+export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;

package/lib/components/time-picker/TimePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { TimePickerProps } from './';
-declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: TimePickerProps;
 export declare const WithAutoFocus: any;
@@ -15,6 +15,9 @@ export declare const WithReadOnly: any;
 export declare const WithHelperText: any;
 export declare const WithRequiredOption: any;
 export declare const WithOpenedTimePopper: any;
+export declare const WithConsoleWarning: any;
+export declare const WithDefaultValue: any;
 export declare const WithControlledMode: Story<TimePickerProps>;
 export declare const WithHourFormatPicker: Story<TimePickerProps>;
 export declare const WithOutsideTimeSetter: Story<TimePickerProps>;
+export declare const WithChangeOnBlur: Story<TimePickerProps>;

package/lib/components/time-picker/TimePicker.stories.styles.d.ts

@@ -1,6 +1,8 @@
 export declare const timePickerWithControlledModeClassName = "dot-time-picker-with-controlled-mode";
 export declare const timePickerWithHourFormatPickerClassName = "dot-time-picker-with-hour-format-picker";
 export declare const timePickerWithOutsideTimeSetterClassName = "dot-time-picker-with-outside-time-setter";
+export declare const timePickerWithBlurClassName = "dot-time-picker-with-blur";
 export declare const StyledTimePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTimePickerWithHourFormatPicker: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTimePickerWithOutsideTimeSetter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTimePickerWithChangeOnBlur: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/time-picker/utils/helpers.d.ts

@@ -1,5 +1,6 @@
 import dayjs, { Dayjs } from 'dayjs';
 import { Daytime } from './models';
+import { ButtonType } from '../../BaseButtonProps';
 export declare const getDayjsUtcDate: (value: string, timeFormat?: string) => dayjs.Dayjs;
 export declare const createNumbersArray: (length: number, offset?: number) => number[];
 export declare const getHoursForTimePicker: (hasDaytimeSelection: boolean) => number[];
@@ -9,3 +10,7 @@ export declare const calculateTimeForHourSelection: (is12hourFormat: boolean, se
 export declare const calculateTimeForDaytimeSelection: (currentTime: Dayjs, selectedDaytime: Daytime) => Dayjs;
 export declare const calculateHourBasedOnTimeFormat: (time: Dayjs, is12hourFormat: boolean) => number;
 export declare const getSelectedHourButtonIndex: (selectedHour: number, is12HourFormat: boolean) => number;
+export declare const getPopperButtonTabIndex: (index: number, isSelected: boolean, selectedValue?: number) => number | undefined;
+export declare const getDaytimeButtonTabIndex: (currentDaytime: Daytime, selectedDaytime?: string) => number | undefined;
+export declare const getSelectedDaytime: (dateTime?: Dayjs) => string;
+export declare const getTimePickerButtonType: (selectedDaytime: string) => ButtonType;

package/lib/testing-utils/index.d.ts

@@ -56,5 +56,6 @@ declare const renderWithTheme: (ui: ReactNode) => {
     findByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions, waitForElementOptions?: import("@testing-library/react").waitForOptions) => Promise<HTMLElement>;
     findAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions, waitForElementOptions?: import("@testing-library/react").waitForOptions) => Promise<HTMLElement[]>;
 };
+declare const rerenderWithTheme: (rerenderFn: (ui: ReactNode) => void, ui: ReactNode) => void;
 export * from '@testing-library/react';
-export { renderWithTheme as render };
+export { renderWithTheme as render, rerenderWithTheme as rerender };

package/lib/testing-utils/scroll-into-view-mock.d.ts

@@ -1 +1,3 @@
-export declare const mockScrollIntoView: (scrollIntoViewMock: typeof jest.fn) => void;
+declare type ScrollIntoViewMock = (arg?: boolean | ScrollIntoViewOptions) => void;
+export declare const mockScrollIntoView: (scrollIntoViewMock: ScrollIntoViewMock) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.6.1",
+  "version": "2.7.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -28,7 +28,6 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/material": "^5.2.5",
-    "@mui/styles": "^5.2.3",
     "@mui/x-date-pickers": "^6.0.1",
     "jwt-decode": "^3.1.2",
     "react-dropzone": "^11.4.2",