@digital-ai/dot-components 2.7.0 → 2.7.1

package/CHANGE_LOG.md

@@ -1,5 +1,23 @@
 # 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)
@@ -322,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:**
 
@@ -334,7 +353,6 @@
 **Features:**
 
 - S-87726 Align input content with helper text [\#1265](https://github.com/digital-ai/dot-components/pull/1265) ([nikolinadapic](https://github.com/nikolinadapic))
-- 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))
 - S-87616 Adjust left margin for helper text [\#1262](https://github.com/digital-ai/dot-components/pull/1262) ([nikolinadapic](https://github.com/nikolinadapic))
 - S-87599: `DotAutocomplete`  Add optional `persistentLabel` prop [\#1258](https://github.com/digital-ai/dot-components/pull/1258) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -507,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:**
@@ -524,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))
 
@@ -1248,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,6 +1729,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
   fullWidth: _fullWidth = false,
   isSubmit: _isSubmit = false,
   onClick,
+  onKeyDown,
   size: _size = 'medium',
   startIcon,
   tabIndex,
@@ -1771,6 +1773,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
       endIcon: endIcon,
       fullWidth: _fullWidth,
       onClick: event => onClick && onClick(event),
+      onKeyDown: onKeyDown,
       ref: ref,
       size: _size,
       startIcon: startIcon,
@@ -9479,6 +9482,7 @@ const DotDatePicker = ({
   className,
   closeOnSelect: _closeOnSelect = true,
   'data-testid': dataTestId,
+  defaultValue,
   disableOpenPicker,
   disablePast,
   disabled,
@@ -9493,6 +9497,8 @@ const DotDatePicker = ({
   inputName,
   label,
   locale,
+  maxDate,
+  minDate,
   onAccept,
   onBlur,
   onChange,
@@ -9506,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();
@@ -9515,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);
@@ -9524,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: []
@@ -9552,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,
@@ -9587,7 +9608,7 @@ const DotDatePicker = ({
             required: _required,
             helperText,
             error,
-            focused: _readOnly ? false : undefined,
+            focused: isInputReadOnly ? false : undefined,
             inputProps: {
               className: 'dot-input',
               'data-testid': 'dot-date-picker-input',
@@ -9597,10 +9618,13 @@ const DotDatePicker = ({
             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);
@@ -9665,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';
@@ -9695,6 +9723,7 @@ const DotTimePicker = ({
   autoFocus: _autoFocus = false,
   className,
   'data-testid': dataTestId,
+  defaultValue,
   disableOpenPicker: _disableOpenPicker = false,
   disabled,
   error,
@@ -9716,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();
@@ -9752,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 = () => {
@@ -9781,12 +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;
@@ -9804,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
@@ -9833,14 +9904,14 @@ 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: "pending-clock",
                   onClick: _event => handleTimePickerButtonClick(),
@@ -9857,17 +9928,17 @@ const DotTimePicker = ({
             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({
@@ -9884,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')
@@ -9899,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,6 +1960,7 @@
         _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,
@@ -2000,6 +2007,7 @@
           onClick: function (event) {
             return onClick && onClick(event);
           },
+          onKeyDown: onKeyDown,
           ref: ref,
           size: size,
           startIcon: startIcon,
@@ -10308,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,
@@ -10324,6 +10333,8 @@
         inputName = _a.inputName,
         label = _a.label,
         locale = _a.locale,
+        maxDate = _a.maxDate,
+        minDate = _a.minDate,
         onAccept = _a.onAccept,
         onBlur = _a.onBlur,
         onChange = _a.onChange,
@@ -10338,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();
@@ -10347,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);
@@ -10356,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: []
@@ -10384,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,
@@ -10423,7 +10451,7 @@
                 required: required,
                 helperText: helperText,
                 error: error,
-                focused: readOnly ? false : undefined,
+                focused: isInputReadOnly ? false : undefined,
                 inputProps: {
                   className: 'dot-input',
                   'data-testid': 'dot-date-picker-input',
@@ -10433,10 +10461,13 @@
                 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);
@@ -10511,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';
@@ -10546,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,
@@ -10570,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];
@@ -10585,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 () {
-        var timeValue = value ? getDayjsUtcDate(value, timeFormat) : null;
+        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 = 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();
@@ -10612,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() {
@@ -10641,12 +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;
@@ -10664,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
@@ -10693,14 +10781,14 @@
                 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: "pending-clock",
                       onClick: function (_event) {
@@ -10719,17 +10807,17 @@
                 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({
@@ -10746,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')
@@ -10763,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",
@@ -10771,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,10 +1,11 @@
-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. */

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

@@ -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,6 +39,10 @@ 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 */
@@ -67,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, onBlur, 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, onBlur, 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,6 +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/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

@@ -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. */
@@ -49,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, onAccept, onBlur, 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, onAccept, onBlur, 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,8 @@ 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>;

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.7.0",
+  "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",