@digital-ai/dot-components 2.7.0 → 2.7.2

package/CHANGE_LOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [2.7.2](https://www.npmjs.com/package/@digital-ai/dot-components) (04/24/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.1...2.7.2)
+
+**Features:**
+
+- S-92086: `DotDatePicker` improvements [\#1461](https://github.com/digital-ai/dot-components/pull/1461) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- Issue-1449: Update status pills to have generally lighter backgrounds [\#1456](https://github.com/digital-ai/dot-components/pull/1456) ([jmcnally](https://github.com/jmcnally))
+
+## [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)
@@ -545,6 +575,7 @@
 - D-20736: Fix text alignment for small DotAvatar [\#1116](https://github.com/digital-ai/dot-components/pull/1116) ([selsemore](https://github.com/selsemore))
 - D-20719:  `DotTable`: Checkbox column takes up to much space in a multi-select table [\#1112](https://github.com/digital-ai/dot-components/pull/1112) ([dmiletic85](https://github.com/dmiletic85))
 - D-20660: `DotNavigationRail`: Should be able to update the selected rail [\#1106](https://github.com/digital-ai/dot-components/pull/1106) ([dmiletic85](https://github.com/dmiletic85))
+- D-20511: remove extra period [\#1094](https://github.com/digital-ai/dot-components/pull/1094) ([CWSites](https://github.com/CWSites))
 
 ## [1.14.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/01/2022)
 
@@ -588,7 +619,6 @@
 
 **Fixed bugs:**
 
-- D-20511: remove extra period [\#1094](https://github.com/digital-ai/dot-components/pull/1094) ([CWSites](https://github.com/CWSites))
 - D-20463: Change the DotDrawer stories to make drawers not open initially [\#1086](https://github.com/digital-ai/dot-components/pull/1086) ([selsemore](https://github.com/selsemore))
 - D-20418: `DotTable`: Strange scrolling behavior with action menu [\#1082](https://github.com/digital-ai/dot-components/pull/1082) ([dmiletic85](https://github.com/dmiletic85))
 - D-20426: `DotConfirmation `: `title` and `message` prop are not applying correct font family [\#1081](https://github.com/digital-ai/dot-components/pull/1081) ([dmiletic85](https://github.com/dmiletic85))

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,
@@ -7321,7 +7324,7 @@ const StyledPill = styled(Chip).withConfig({
   componentId: "l7oxi2-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background-color:", ";color:", ";border-color:", ";&.error{background-color:", ";color:", ";}&.success{background-color:", ";color:", ";}&.warning{background-color:", ";color:", ";}&.in-progress{background-color:", ";color:", ";}"], rootClassName$n, ({
+}) => css(["&.", "{background-color:", ";color:", ";border-color:", ";&.error{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.success{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.warning{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.in-progress{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}"], rootClassName$n, ({
   backgroundcolor
 }) => {
   return backgroundcolor || theme.palette.grey[200];
@@ -7333,7 +7336,7 @@ const StyledPill = styled(Chip).withConfig({
   bordercolor
 }) => {
   return bordercolor ? bordercolor : theme.palette.layer.n700;
-}, theme.palette.error[500], theme.palette.layer.n0, theme.palette.success[500], theme.palette.layer.n0, theme.palette.warning[500], theme.palette.layer.n700, theme.palette.primary.main, theme.palette.layer.n0));
+}, theme.palette.error[100], theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n700, theme.palette.success[100], theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n700, theme.palette.warning[100], theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.primary[100], theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n700));
 
 const DotPill = ({
   ariaLabel,
@@ -9479,13 +9482,16 @@ const DotDatePicker = ({
   className,
   closeOnSelect: _closeOnSelect = true,
   'data-testid': dataTestId,
+  defaultValue,
   disableOpenPicker,
   disablePast,
+  disablePortal: _disablePortal = false,
   disabled,
   displayWeekNumber,
   displayClearButton: _displayClearButton = true,
   error,
   fixedWeekNumber,
+  focusInputOnPopperOpened,
   format,
   fullWidth: _fullWidth = false,
   helperText,
@@ -9493,6 +9499,8 @@ const DotDatePicker = ({
   inputName,
   label,
   locale,
+  maxDate,
+  minDate,
   onAccept,
   onBlur,
   onChange,
@@ -9506,8 +9514,31 @@ 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 inputRef = useRef(null);
+  const rootClasses = useStylesWithRootClass(rootClassName$1, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, _fullWidth ? 'full-width' : '', className);
+  const focusInput = ref => {
+    setTimeout(() => {
+      ref.current.focus();
+    }, 0);
+  };
+  useEffect(() => {
+    if (focusInputOnPopperOpened && open && inputRef.current) {
+      focusInput(inputRef);
+    }
+  }, [open, focusInputOnPopperOpened]);
+  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 +9546,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 +9554,13 @@ 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 handleOpen = () => {
+    if (focusInputOnPopperOpened && inputRef.current) {
+      focusInput(inputRef);
+    }
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  };
   const createActionBar = () => {
     const actionBar = {
       actions: []
@@ -9552,18 +9589,21 @@ 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,
-        onOpen: onOpen,
+        onError: handleError,
+        onOpen: handleOpen,
         open: open,
         showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
         slots: {
@@ -9587,20 +9627,27 @@ const DotDatePicker = ({
             required: _required,
             helperText,
             error,
-            focused: _readOnly ? false : undefined,
+            focused: isInputReadOnly ? false : undefined,
             inputProps: {
               className: 'dot-input',
               'data-testid': 'dot-date-picker-input',
               onBlur
             },
+            inputRef,
             fullWidth: _fullWidth,
             name: inputName
           },
           field: {
-            readOnly: _readOnly
+            readOnly: isInputReadOnly
+          },
+          desktopTrapFocus: {
+            disableEnforceFocus: true
+          },
+          popper: {
+            disablePortal: _disablePortal
           }
         },
-        value: value && dayjs(value)
+        value: value && dayjs(value, dateFormat)
       }, void 0)]
     }), void 0)
   }), void 0);
@@ -9665,6 +9712,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 +9746,7 @@ const DotTimePicker = ({
   autoFocus: _autoFocus = false,
   className,
   'data-testid': dataTestId,
+  defaultValue,
   disableOpenPicker: _disableOpenPicker = false,
   disabled,
   error,
@@ -9716,24 +9768,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 +9823,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 +9854,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 +9881,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 +9927,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 +9951,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 +9978,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 +9995,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)]
@@ -9954,4 +10057,16 @@ const DotTimePicker = ({
   }), void 0);
 };
 
-export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };
+const DotClickAwayListener = ({
+  children,
+  disableReactTree: _disableReactTree = false,
+  onClickAway
+}) => {
+  return jsx(ClickAwayListener, {
+    children: children,
+    disableReactTree: _disableReactTree,
+    onClickAway: onClickAway
+  }, void 0);
+};
+
+export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };

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,
@@ -7940,7 +7948,7 @@
       componentId: "l7oxi2-0"
     })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        color: ", ";\n      }\n      &.warning {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        color: ", ";\n      }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        color: ", ";\n      }\n      &.warning {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        color: ", ";\n      }\n  "])), rootClassName$n, function (_a) {
+      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.warning {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.warning {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n  "])), rootClassName$n, function (_a) {
         var backgroundcolor = _a.backgroundcolor;
         return backgroundcolor || theme.palette.grey[200];
       }, function (_a) {
@@ -7949,7 +7957,7 @@
       }, function (_a) {
         var bordercolor = _a.bordercolor;
         return bordercolor ? bordercolor : theme.palette.layer.n700;
-      }, theme.palette.error[500], theme.palette.layer.n0, theme.palette.success[500], theme.palette.layer.n0, theme.palette.warning[500], theme.palette.layer.n700, theme.palette.primary.main, theme.palette.layer.n0);
+      }, theme.palette.error[100], theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n700, theme.palette.success[100], theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n700, theme.palette.warning[100], theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.primary[100], theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n700);
     });
     var templateObject_1$n, templateObject_2$m;
 
@@ -10308,22 +10316,28 @@
         _c = _a.closeOnSelect,
         closeOnSelect = _c === void 0 ? true : _c,
         dataTestId = _a["data-testid"],
+        defaultValue = _a.defaultValue,
         disableOpenPicker = _a.disableOpenPicker,
         disablePast = _a.disablePast,
+        _d = _a.disablePortal,
+        disablePortal = _d === void 0 ? false : _d,
         disabled = _a.disabled,
         displayWeekNumber = _a.displayWeekNumber,
-        _d = _a.displayClearButton,
-        displayClearButton = _d === void 0 ? true : _d,
+        _e = _a.displayClearButton,
+        displayClearButton = _e === void 0 ? true : _e,
         error = _a.error,
         fixedWeekNumber = _a.fixedWeekNumber,
+        focusInputOnPopperOpened = _a.focusInputOnPopperOpened,
         format = _a.format,
-        _e = _a.fullWidth,
-        fullWidth = _e === void 0 ? false : _e,
+        _f = _a.fullWidth,
+        fullWidth = _f === void 0 ? false : _f,
         helperText = _a.helperText,
         inputId = _a.inputId,
         inputName = _a.inputName,
         label = _a.label,
         locale = _a.locale,
+        maxDate = _a.maxDate,
+        minDate = _a.minDate,
         onAccept = _a.onAccept,
         onBlur = _a.onBlur,
         onChange = _a.onChange,
@@ -10332,14 +10346,37 @@
         onOpen = _a.onOpen,
         open = _a.open,
         persistentLabel = _a.persistentLabel,
-        _f = _a.readOnly,
-        readOnly = _f === void 0 ? false : _f,
-        _g = _a.required,
-        required = _g === void 0 ? false : _g,
+        _g = _a.readOnly,
+        readOnly = _g === void 0 ? false : _g,
+        _h = _a.required,
+        required = _h === void 0 ? false : _h,
         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 inputRef = React.useRef(null);
+      var rootClasses = useStylesWithRootClass(rootClassName$1, className, isInputReadOnly ? 'read-only' : '');
       var containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
+      var focusInput = function focusInput(ref) {
+        setTimeout(function () {
+          ref.current.focus();
+        }, 0);
+      };
+      React.useEffect(function () {
+        if (focusInputOnPopperOpened && open && inputRef.current) {
+          focusInput(inputRef);
+        }
+      }, [open, focusInputOnPopperOpened]);
+      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 +10384,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 +10392,15 @@
         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 handleOpen = function handleOpen() {
+        if (focusInputOnPopperOpened && inputRef.current) {
+          focusInput(inputRef);
+        }
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+      };
       var createActionBar = function createActionBar() {
         var actionBar = {
           actions: []
@@ -10384,18 +10429,21 @@
             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,
-            onOpen: onOpen,
+            onError: handleError,
+            onOpen: handleOpen,
             open: open,
             showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
             slots: {
@@ -10423,20 +10471,27 @@
                 required: required,
                 helperText: helperText,
                 error: error,
-                focused: readOnly ? false : undefined,
+                focused: isInputReadOnly ? false : undefined,
                 inputProps: {
                   className: 'dot-input',
                   'data-testid': 'dot-date-picker-input',
                   onBlur: onBlur
                 },
+                inputRef: inputRef,
                 fullWidth: fullWidth,
                 name: inputName
               },
               field: {
-                readOnly: readOnly
+                readOnly: isInputReadOnly
+              },
+              desktopTrapFocus: {
+                disableEnforceFocus: true
+              },
+              popper: {
+                disablePortal: disablePortal
               }
             },
-            value: value && dayjs__default["default"](value)
+            value: value && dayjs__default["default"](value, dateFormat)
           }, void 0)]
         }), void 0)
       }), void 0);
@@ -10511,6 +10566,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 +10613,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 +10638,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 +10656,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();
@@ -10612,7 +10699,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 +10730,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 +10757,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 +10805,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 +10831,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 +10858,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 +10877,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 +10885,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)]
@@ -10824,6 +10945,18 @@
       }), void 0);
     };
 
+    var DotClickAwayListener = function DotClickAwayListener(_a) {
+      var children = _a.children,
+        _b = _a.disableReactTree,
+        disableReactTree = _b === void 0 ? false : _b,
+        onClickAway = _a.onClickAway;
+      return jsxRuntime.jsx(material.ClickAwayListener, {
+        children: children,
+        disableReactTree: disableReactTree,
+        onClickAway: onClickAway
+      }, void 0);
+    };
+
     exports.Cell = Cell;
     exports.CreateUUID = CreateUUID;
     exports.CssCell = CssCell;
@@ -10849,6 +10982,7 @@
     exports.DotCheckbox = DotCheckbox;
     exports.DotCheckboxGroup = DotCheckboxGroup;
     exports.DotChip = DotChip;
+    exports.DotClickAwayListener = DotClickAwayListener;
     exports.DotConfirmationDialog = DotConfirmationDialog;
     exports.DotCopyButton = DotCopyButton;
     exports.DotCoreApiProvider = DotCoreApiProvider;

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/click-away-listener/ClickAwayListener.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export interface ClickAwayListenerProps {
+    /** The wrapped element. */
+    children: ReactElement;
+    /** If true, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled.  */
+    disableReactTree?: boolean;
+    /** Callback fired when a "click away" event is detected. */
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+}
+export declare const DotClickAwayListener: ({ children, disableReactTree, onClickAway, }: ClickAwayListenerProps) => JSX.Element;

package/lib/components/click-away-listener/ClickAwayListener.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import { ClickAwayListenerProps } from './ClickAwayListener';
+declare const _default: ComponentMeta<({ children, disableReactTree, onClickAway, }: ClickAwayListenerProps) => JSX.Element>;
+export default _default;
+export declare const Default: Story<ClickAwayListenerProps>;

package/lib/components/click-away-listener/index.d.ts

@@ -0,0 +1,2 @@
+export type { ClickAwayListenerProps } from './ClickAwayListener';
+export { DotClickAwayListener } from './ClickAwayListener';

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

@@ -9,10 +9,14 @@ 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. */
     disablePast?: boolean;
+    /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
+    disablePortal?: boolean;
     /** If `true`, the picker and text field are disabled. */
     disabled?: boolean;
     /** If `true`, 'Clear' button will be displayed in the calendar popper. `True` by default. */
@@ -23,6 +27,8 @@ export interface DatePickerProps extends CommonProps {
     error?: boolean;
     /** Calendar will show more weeks in order to match this value. Put it to 6 for having fix number of week in Gregorian calendars */
     fixedWeekNumber?: number;
+    /** If `true`, focus will be automatically set to the input field when popper opens */
+    focusInputOnPopperOpened?: boolean;
     /** Format of the date when rendered in the input(s). Defaults to localized format based on the used `views`. */
     format?: string;
     /** If true, the input will take up the full width of its container */
@@ -37,6 +43,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 +77,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, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, 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, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, 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,16 @@ 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 WithInputFocusOnPopperOpened: 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>;
+export interface TaskDateViewContentProps {
+    date: string;
+}
+export declare const TaskDateViewContent: ({ date }: TaskDateViewContentProps) => JSX.Element;
+export declare const WithConditionalRendering: Story<DatePickerProps>;

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

@@ -1,6 +1,8 @@
 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 datePickerWithConditionalRenderingClassName = "dot-date-picker-with-conditional-rendering";
 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>;
+export declare const StyledDatePickerWithConditionalRendering: 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/index.d.ts

@@ -35,6 +35,7 @@ export type { FileItemProps, FileUploadError, FileUploadProps, ListItemFile, Map
 export type { LinearProgressColor, LinearProgressProps, LinearProgressVariant, } from './linear-progress';
 export type { DatePickerLocale, DatePickerProps, FieldChangeHandlerContext, } from './date-picker';
 export type { TimePickerProps } from './time-picker';
+export type { ClickAwayListenerProps } from './click-away-listener';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -97,4 +98,5 @@ export { DotDraggableList } from './draggable-list';
 export { DotLinearProgress } from './linear-progress';
 export { DotDatePicker } from './date-picker';
 export { Daytime, DotTimePicker, mockScrollIntoView } from './time-picker';
+export { DotClickAwayListener } from './click-away-listener';
 export { CreateUUID } from './createUUID';

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.2",
   "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",