@digital-ai/dot-components 2.7.2 → 2.7.4

package/CHANGE_LOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [2.7.4](https://www.npmjs.com/package/@digital-ai/dot-components) (05/04/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.3...2.7.4)
+
+**Features:**
+
+- S-92362: `DotAutoComplete` - Expose `getOptionDisabled` from MUI Autocomplete [\#1474](https://github.com/digital-ai/dot-components/pull/1474) ([dmiletic85](https://github.com/dmiletic85))
+- S-92310 Use ISO format for `DatePicker` and `TimePicker` [\#1472](https://github.com/digital-ai/dot-components/pull/1472) ([angel-git](https://github.com/angel-git))
+- S-92224: `DotDatePicker`, `DotTimePicker` - Improve keyboard accessibility [\#1470](https://github.com/digital-ai/dot-components/pull/1470) ([dmiletic85](https://github.com/dmiletic85))
+
+## [2.7.3](https://www.npmjs.com/package/@digital-ai/dot-components) (05/01/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.2...2.7.3)
+
+**Features:**
+
+- D-24626: Add startEditable attribute to InlineEdit [\#1466](https://github.com/digital-ai/dot-components/pull/1466) ([jmcnally](https://github.com/jmcnally))
+
+**Misc:**
+
+- Updates to deprecated github action `set-output` [\#1465](https://github.com/digital-ai/dot-components/pull/1465) ([CWSites](https://github.com/CWSites))
+- remove use of set-output [\#1464](https://github.com/digital-ai/dot-components/pull/1464) ([CWSites](https://github.com/CWSites))
+- S-91985: Improve form input labelling for accessibility [\#1463](https://github.com/digital-ai/dot-components/pull/1463) ([jmcnally](https://github.com/jmcnally))
+
 ## [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)
@@ -575,7 +599,6 @@
 - 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)
 
@@ -619,6 +642,7 @@
 
 **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))
@@ -941,6 +965,7 @@
 
 - \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
 - D-19189: Extended sidenav drawer should collapse when another drawer option is clicked [\#830](https://github.com/digital-ai/dot-components/pull/830) ([dmiletic85](https://github.com/dmiletic85))
+- D-19177: `Go back` item in `DotSidebar` is not aligned with rest of items [\#826](https://github.com/digital-ai/dot-components/pull/826) ([dmiletic85](https://github.com/dmiletic85))
 
 **Misc:**
 
@@ -959,7 +984,6 @@
 **Fixed bugs:**
 
 - D-19151: `DotBadge` generates console warnings [\#827](https://github.com/digital-ai/dot-components/pull/827) ([dmiletic85](https://github.com/dmiletic85))
-- D-19177: `Go back` item in `DotSidebar` is not aligned with rest of items [\#826](https://github.com/digital-ai/dot-components/pull/826) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.3.4](https://www.npmjs.com/package/@digital-ai/dot-components) (11/30/2021)
 

package/index.esm.js

@@ -4290,6 +4290,9 @@ const getChipsFromAutocomplete = ({
 };
 const checkIfDuplicateItem = (itemText, autocompleteOptions) => autocompleteOptions.some(autocompleteOption => autocompleteOption.title === itemText);
 
+function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
+  return ariaLabel || label || placeholder;
+}
 const DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
 const DotAutoComplete = ({
   ListboxComponent,
@@ -4306,6 +4309,7 @@ const DotAutoComplete = ({
   error: _error = false,
   filterSelectedOptions: _filterSelectedOptions = true,
   freesolo: _freesolo = true,
+  checkIfOptionDisabled,
   group: _group = false,
   helperText,
   inputId,
@@ -4527,6 +4531,7 @@ const DotAutoComplete = ({
     filterSelectedOptions: _filterSelectedOptions,
     freeSolo: _freesolo,
     getOptionLabel: option => parseAutoCompleteValue(option),
+    getOptionDisabled: checkIfOptionDisabled,
     groupBy: _group ? option => option.group : undefined,
     ListboxComponent: ListboxComponent,
     loading: loading,
@@ -4582,11 +4587,17 @@ const DotAutoComplete = ({
             error: _error,
             focused: _readOnly ? false : undefined,
             helperText: helperText,
+            id: inputId,
             inputProps: Object.assign(Object.assign({}, inputProps), {
+              'aria-label': ariaLabelOrAlternates(ariaLabel, label, placeholder),
+              'data-testid': dataTestId && `${dataTestId}-input`,
               id: inputId,
               className: useStylesWithRootClass(inputProps.className, 'dot-input'),
               readOnly: _readOnly
             }),
+            InputLabelProps: {
+              htmlFor: inputId
+            },
             InputProps: Object.assign(Object.assign({}, params.InputProps), {
               endAdornment: !_readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined
             }),
@@ -7054,6 +7065,7 @@ const DotInlineEdit = ({
   onEditStateChange,
   readOnly,
   selectTextOnEdit,
+  startEditable: _startEditable = false,
   tabIndex: _tabIndex = 0,
   tooltip,
   typography: _typography = 'body1',
@@ -7065,6 +7077,11 @@ const DotInlineEdit = ({
   const [inputValue, setInputValue] = useState(_value);
   const inputRef = useRef();
   const inlineEditRef = useRef();
+  useEffect(() => {
+    if (_startEditable && !readOnly) {
+      enterEditMode();
+    }
+  }, []);
   useEffect(() => {
     if (_value !== inputValue) {
       setInputValue(_value);
@@ -7077,10 +7094,13 @@ const DotInlineEdit = ({
       setShowTooltip(visible);
     }
   };
-  const handleInlineEditClick = () => {
-    if (editing) return;
+  const enterEditMode = () => {
     setOriginalValue(inputValue);
     setEditing(true);
+  };
+  const handleInlineEditClick = () => {
+    if (editing) return;
+    enterEditMode();
     if (onEditStateChange) {
       onEditStateChange(true);
     }
@@ -7185,7 +7205,7 @@ const DotInlineEdit = ({
         error: false,
         fullWidth: _fullWidth,
         inputProps: {
-          'data-testid': dataTestId,
+          'data-testid': `${dataTestId}-input`,
           className: 'dot-input',
           maxLength: charactersLimit === null || charactersLimit === void 0 ? void 0 : charactersLimit.maxLength
         },
@@ -9450,6 +9470,26 @@ const DotLinearProgress = ({
   }, void 0);
 };
 
+var DatePickerKeydownContext;
+(function (DatePickerKeydownContext) {
+  DatePickerKeydownContext[DatePickerKeydownContext["Input"] = 0] = "Input";
+  DatePickerKeydownContext[DatePickerKeydownContext["PickerButton"] = 1] = "PickerButton";
+  DatePickerKeydownContext[DatePickerKeydownContext["Popper"] = 2] = "Popper";
+})(DatePickerKeydownContext || (DatePickerKeydownContext = {}));
+
+/** This returns a `boolean` indicating whether the Day.js object contains a valid date or not. */
+const checkIfValidDate = (date, format) => dayjs(date, format, true).isValid();
+const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
+  const targetElement = event.target;
+  const isWithinInput = inputElement === null || inputElement === void 0 ? void 0 : inputElement.contains(targetElement);
+  let currentContextEnum = contextEnum;
+  // Key was captured within text field but not on the input itself
+  if (contextEnum === DatePickerKeydownContext.Input && !isWithinInput) {
+    currentContextEnum = DatePickerKeydownContext.PickerButton;
+  }
+  return currentContextEnum;
+};
+
 const rootClassName$1 = 'dot-date-picker';
 const containerClassName$1 = 'dot-date-picker-container';
 const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
@@ -9476,6 +9516,7 @@ const RectanglePickersDay = pickersDayProps => {
     disableRipple: true
   }), void 0);
 };
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
 const DotDatePicker = ({
   ariaLabel,
   autoFocus: _autoFocus = false,
@@ -9506,6 +9547,7 @@ const DotDatePicker = ({
   onChange,
   onClose,
   onError,
+  onKeyDown,
   onOpen,
   open,
   persistentLabel,
@@ -9514,7 +9556,7 @@ const DotDatePicker = ({
   showDaysOutsideCurrentMonth,
   value
 }) => {
-  const dateFormat = format || 'YYYY-MM-DD';
+  const displayFormat = format || DEFAULT_DATE_FORMAT;
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = _readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
@@ -9548,13 +9590,13 @@ const DotDatePicker = ({
   }, [locale]);
   const handleChange = (changedValue, context) => {
     if (!onChange || changedValue && !changedValue.isValid()) return;
-    onChange(changedValue ? changedValue.format(dateFormat) : null, context);
+    onChange(changedValue ? changedValue.format(DEFAULT_DATE_FORMAT) : null, context);
   };
   const handleAccept = changedValue => {
     if (!onAccept) return;
-    onAccept(changedValue ? changedValue.format(dateFormat) : null);
+    onAccept(changedValue ? changedValue.format(DEFAULT_DATE_FORMAT) : null);
   };
-  const handleError = (validationError, currentValue) => onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs(currentValue).format(dateFormat));
+  const handleError = (validationError, currentValue) => onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs(currentValue).format(DEFAULT_DATE_FORMAT));
   const handleOpen = () => {
     if (focusInputOnPopperOpened && inputRef.current) {
       focusInput(inputRef);
@@ -9570,6 +9612,10 @@ const DotDatePicker = ({
     }
     return actionBar;
   };
+  const handleKeyDown = contextEnum => event => {
+    const currentContextEnum = getContextEnumBasedOnTarget(event, inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, contextEnum);
+    onKeyDown(event, currentContextEnum);
+  };
   return jsx(StyledDatePickerContainer, Object.assign({
     className: containerClasses,
     "data-testid": dataTestId
@@ -9589,16 +9635,16 @@ const DotDatePicker = ({
         autoFocus: _autoFocus,
         closeOnSelect: _closeOnSelect,
         className: rootClasses,
-        defaultValue: defaultValue && dayjs(defaultValue, dateFormat),
+        defaultValue: defaultValue && dayjs(defaultValue, DEFAULT_DATE_FORMAT),
         disableOpenPicker: disableOpenPicker || isInputReadOnly || disabled,
         disablePast: disablePast,
         disabled: disabled,
         displayWeekNumber: displayWeekNumber,
         fixedWeekNumber: fixedWeekNumber,
-        format: dateFormat,
+        format: displayFormat,
         label: persistentLabel ? null : label,
-        maxDate: maxDate && dayjs(maxDate, dateFormat),
-        minDate: minDate && dayjs(minDate, dateFormat),
+        maxDate: maxDate && dayjs(maxDate, DEFAULT_DATE_FORMAT),
+        minDate: minDate && dayjs(minDate, DEFAULT_DATE_FORMAT),
         onAccept: handleAccept,
         onChange: handleChange,
         onClose: onClose,
@@ -9633,6 +9679,7 @@ const DotDatePicker = ({
               'data-testid': 'dot-date-picker-input',
               onBlur
             },
+            onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Input),
             inputRef,
             fullWidth: _fullWidth,
             name: inputName
@@ -9644,10 +9691,11 @@ const DotDatePicker = ({
             disableEnforceFocus: true
           },
           popper: {
-            disablePortal: _disablePortal
+            disablePortal: _disablePortal,
+            onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Popper)
           }
         },
-        value: value && dayjs(value, dateFormat)
+        value: value && dayjs(value, DEFAULT_DATE_FORMAT)
       }, void 0)]
     }), void 0)
   }), void 0);
@@ -9716,6 +9764,8 @@ const getPopperButtonTabIndex = (index, isSelected, selectedValue) => selectedVa
 const getDaytimeButtonTabIndex = (currentDaytime, selectedDaytime) => selectedDaytime && currentDaytime === selectedDaytime || !selectedDaytime && currentDaytime === Daytime.AM ? undefined : -1;
 const getSelectedDaytime = dateTime => dateTime && dateTime.format('A') || Daytime.AM;
 const getTimePickerButtonType = selectedDaytime => selectedDaytime && selectedDaytime === Daytime.PM ? 'primary' : 'text';
+const checkIfOpenPropDefined = open => open !== null && open !== undefined;
+const getDaytimeButtonType = daytimeSelected => daytimeSelected && daytimeSelected === Daytime.AM ? 'primary' : 'text';
 
 const rootClassName = 'dot-time-picker';
 const containerClassName = 'dot-time-picker-container';
@@ -9737,17 +9787,18 @@ const StyledTimePicker = styled(TimePicker).withConfig({
 }) => css(["&.", "{", ";}"], rootClassName, pickerInputStyles(theme)));
 
 dayjs.extend(utc);
-const DEFAULT_PICKER_TIME_FORMAT = 'hh:mm';
-const DEFAULT_TIME_FORMAT = 'hh:mm A';
+const DEFAULT_PICKER_TIME_FORMAT = 'HH:mm';
+const DEFAULT_TIME_FORMAT = 'HH:mm';
 const DEFAULT_TIME = '01:00';
 const DotTimePicker = ({
-  ampm: _ampm = true,
+  ampm: _ampm = false,
   ariaLabel,
   autoFocus: _autoFocus = false,
   className,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker: _disableOpenPicker = false,
+  disableClickAwayListener: _disableClickAwayListener = false,
   disabled,
   error,
   format,
@@ -9759,8 +9810,10 @@ const DotTimePicker = ({
   label,
   onAccept,
   onBlur,
+  onCancel,
   onChange,
   onClose,
+  onKeyDown,
   onOpen,
   open,
   persistentLabel,
@@ -9768,7 +9821,7 @@ const DotTimePicker = ({
   required: _required = false,
   value
 }) => {
-  const timeFormat = format || DEFAULT_TIME_FORMAT;
+  const displayFormat = format || DEFAULT_TIME_FORMAT;
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = _readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
@@ -9785,7 +9838,7 @@ const DotTimePicker = ({
   const minutes = getMinutesForTimePicker();
   const daytimeSelected = getSelectedDaytime(pickerTime);
   const selectedPickerHour = pickerTime && calculateHourBasedOnTimeFormat(pickerTime, _ampm);
-  const isOpenPropDefined = open !== null && open !== undefined;
+  const isOpenPropDefined = checkIfOpenPropDefined(open);
   const isControlledComponent = onChange && value !== undefined;
   useEffect(() => {
     if (hasValueWithoutChangeHandler) {
@@ -9798,9 +9851,9 @@ const DotTimePicker = ({
   useEffect(() => {
     let timeValue = null;
     if (defaultValue) {
-      timeValue = getDayjsUtcDate(defaultValue, timeFormat);
+      timeValue = getDayjsUtcDate(defaultValue, DEFAULT_TIME_FORMAT);
     } else if (value) {
-      timeValue = getDayjsUtcDate(value, timeFormat);
+      timeValue = getDayjsUtcDate(value, DEFAULT_TIME_FORMAT);
     }
     setTime(timeValue);
     setPickerTime(timeValue);
@@ -9826,7 +9879,7 @@ const DotTimePicker = ({
     const currentTimeValue = currentValue ? currentValue : null;
     setPickerTime(currentValue ? currentValue : null);
     !isControlledComponent && setTime(currentTimeValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(currentValue ? currentValue.format(timeFormat) : null, context);
+    onChange === null || onChange === void 0 ? void 0 : onChange(currentValue ? currentValue.format(DEFAULT_TIME_FORMAT) : null, context);
   };
   const handleClose = () => {
     !isOpenPropDefined && setIsPickerOpened(false);
@@ -9851,6 +9904,7 @@ const DotTimePicker = ({
   };
   const handleCancel = () => {
     setPickerTime(time);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     handleClose();
   };
   const handleSet = () => {
@@ -9859,12 +9913,16 @@ const DotTimePicker = ({
       return;
     }
     setTime(pickerTime);
-    onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
+    onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(DEFAULT_TIME_FORMAT), {
       validationError: null
     });
-    onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
+    onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(DEFAULT_TIME_FORMAT));
     handleClose();
   };
+  const handleKeyDown = contextEnum => event => {
+    const currentContextEnum = getContextEnumBasedOnTarget(event, inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, contextEnum);
+    onKeyDown(event, currentContextEnum);
+  };
   const scrollToSelectedTime = () => {
     if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
     const selectedHour = calculateHourBasedOnTimeFormat(time, _ampm);
@@ -9897,6 +9955,100 @@ const DotTimePicker = ({
     if (event.key !== 'Escape' || !isPickerOpened) return;
     handleCancel();
   };
+  const wrapWithClickAwayListener = children => jsx(ClickAwayListener, Object.assign({
+    onClickAway: handleSet
+  }, {
+    children: children
+  }), void 0);
+  const renderTimePickerHours = () => hours.map((hour, index) => {
+    const isSelected = pickerTime ? selectedPickerHour === hour : false;
+    return jsx(DotButton, Object.assign({
+      className: "dot-picker-button",
+      "data-testid": dataTestId && `${dataTestId}-hour-button-${hour}`,
+      onClick: () => handleHourClick(hour),
+      onKeyDown: handleTimeKeydown(hoursRef, index),
+      tabIndex: getPopperButtonTabIndex(index, isSelected, selectedPickerHour),
+      type: isSelected ? 'primary' : 'text'
+    }, {
+      children: hour.toString().padStart(2, '0')
+    }), hour);
+  });
+  const renderTimePickerMinutes = () => minutes.map((minute, index) => {
+    const isSelected = pickerTime ? pickerTime.minute() === minute : false;
+    return jsx(DotButton, Object.assign({
+      className: "dot-picker-button",
+      "data-testid": dataTestId && `${dataTestId}-minute-button-${minute}`,
+      type: isSelected ? 'primary' : 'text',
+      onClick: () => handleMinuteClick(minute),
+      onKeyDown: handleTimeKeydown(minutesRef, index),
+      tabIndex: getPopperButtonTabIndex(index, isSelected, pickerTime === null || pickerTime === void 0 ? void 0 : pickerTime.minute())
+    }, {
+      children: minute.toString().padStart(2, '0')
+    }), minute);
+  });
+  const renderTimePickerActionButtons = () => jsxs("div", Object.assign({
+    className: "dot-time-picker-action-buttons"
+  }, {
+    children: [jsx(DotButton, Object.assign({
+      "data-testid": dataTestId && `${dataTestId}-cancel`,
+      onClick: handleCancel,
+      size: "small",
+      type: "text"
+    }, {
+      children: "Cancel"
+    }), void 0), jsx(DotButton, Object.assign({
+      "data-testid": dataTestId && `${dataTestId}-set`,
+      onClick: handleSet,
+      size: "small",
+      type: "text"
+    }, {
+      children: "Set"
+    }), void 0)]
+  }), void 0);
+  const renderDaytime = () => jsxs("div", Object.assign({
+    className: "dot-time-picker-daytime",
+    ref: daytimeRef
+  }, {
+    children: [jsx(DotButton, Object.assign({
+      className: "dot-picker-button",
+      "data-testid": dataTestId && `${dataTestId}-am-button`,
+      onClick: () => handleDaytimeSelection(Daytime.AM),
+      onKeyDown: handleTimeKeydown(daytimeRef, 0),
+      tabIndex: getDaytimeButtonTabIndex(Daytime.AM, daytimeSelected),
+      type: getDaytimeButtonType(daytimeSelected)
+    }, {
+      children: Daytime.AM
+    }), Daytime.AM), jsx(DotButton, Object.assign({
+      className: "dot-picker-button",
+      "data-testid": dataTestId && `${dataTestId}-pm-button`,
+      onClick: () => handleDaytimeSelection(Daytime.PM),
+      onKeyDown: handleTimeKeydown(daytimeRef, 1),
+      tabIndex: getDaytimeButtonTabIndex(Daytime.PM, daytimeSelected),
+      type: getTimePickerButtonType(daytimeSelected)
+    }, {
+      children: Daytime.PM
+    }), Daytime.PM)]
+  }), void 0);
+  const paperComponent = jsxs(Paper, Object.assign({
+    className: "dot-time-picker-paper",
+    elevation: 8
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: "dot-time-picker-selection"
+    }, {
+      children: [jsx("div", Object.assign({
+        className: "dot-time-picker-hours",
+        ref: hoursRef
+      }, {
+        children: renderTimePickerHours()
+      }), void 0), jsx("div", Object.assign({
+        className: "dot-time-picker-minutes",
+        ref: minutesRef
+      }, {
+        children: renderTimePickerMinutes()
+      }), void 0), _ampm && renderDaytime()]
+    }), void 0), !hideActionButtons && renderTimePickerActionButtons()]
+  }), void 0);
   return jsxs(StyledTimePickerContainer, Object.assign({
     className: containerClasses,
     "data-testid": dataTestId,
@@ -9918,7 +10070,7 @@ const DotTimePicker = ({
         autoFocus: _autoFocus,
         className: rootClasses,
         disabled: disabled,
-        format: format,
+        format: displayFormat,
         inputRef: inputRef,
         label: persistentLabel ? null : label,
         onChange: handleInputChange,
@@ -9948,7 +10100,8 @@ const DotTimePicker = ({
               onBlur
             },
             fullWidth: _fullWidth,
-            name: inputName
+            name: inputName,
+            onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Input)
           },
           field: {
             readOnly: isComponentReadOnly
@@ -9962,97 +10115,10 @@ const DotTimePicker = ({
       "data-testid": dataTestId && `${dataTestId}-popper`,
       disablePortal: true,
       open: isPickerOpened,
+      onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Popper),
       placement: "bottom-start"
     }, {
-      children: jsx(ClickAwayListener, Object.assign({
-        onClickAway: handleSet
-      }, {
-        children: jsxs(Paper, Object.assign({
-          className: "dot-time-picker-paper",
-          elevation: 8
-        }, {
-          children: [jsxs("div", Object.assign({
-            className: "dot-time-picker-selection"
-          }, {
-            children: [jsx("div", Object.assign({
-              className: "dot-time-picker-hours",
-              ref: hoursRef
-            }, {
-              children: hours.map((hour, index) => {
-                const isSelected = pickerTime ? selectedPickerHour === hour : false;
-                return jsx(DotButton, Object.assign({
-                  className: "dot-picker-button",
-                  "data-testid": dataTestId && `${dataTestId}-hour-button-${hour}`,
-                  onClick: () => handleHourClick(hour),
-                  onKeyDown: handleTimeKeydown(hoursRef, index),
-                  tabIndex: getPopperButtonTabIndex(index, isSelected, selectedPickerHour),
-                  type: isSelected ? 'primary' : 'text'
-                }, {
-                  children: hour.toString().padStart(2, '0')
-                }), hour);
-              })
-            }), void 0), jsx("div", Object.assign({
-              className: "dot-time-picker-minutes",
-              ref: minutesRef
-            }, {
-              children: minutes.map((minute, index) => {
-                const isSelected = pickerTime ? pickerTime.minute() === minute : false;
-                return jsx(DotButton, Object.assign({
-                  className: "dot-picker-button",
-                  "data-testid": dataTestId && `${dataTestId}-minute-button-${minute}`,
-                  type: isSelected ? 'primary' : 'text',
-                  onClick: () => handleMinuteClick(minute),
-                  onKeyDown: handleTimeKeydown(minutesRef, index),
-                  tabIndex: getPopperButtonTabIndex(index, isSelected, pickerTime === null || pickerTime === void 0 ? void 0 : pickerTime.minute())
-                }, {
-                  children: minute.toString().padStart(2, '0')
-                }), minute);
-              })
-            }), void 0), _ampm && jsxs("div", Object.assign({
-              className: "dot-time-picker-daytime",
-              ref: daytimeRef
-            }, {
-              children: [jsx(DotButton, Object.assign({
-                className: "dot-picker-button",
-                "data-testid": dataTestId && `${dataTestId}-am-button`,
-                onClick: () => handleDaytimeSelection(Daytime.AM),
-                onKeyDown: handleTimeKeydown(daytimeRef, 0),
-                tabIndex: getDaytimeButtonTabIndex(Daytime.AM, daytimeSelected),
-                type: daytimeSelected && daytimeSelected === Daytime.AM ? 'primary' : 'text'
-              }, {
-                children: Daytime.AM
-              }), Daytime.AM), jsx(DotButton, Object.assign({
-                className: "dot-picker-button",
-                "data-testid": dataTestId && `${dataTestId}-pm-button`,
-                onClick: () => handleDaytimeSelection(Daytime.PM),
-                onKeyDown: handleTimeKeydown(daytimeRef, 1),
-                tabIndex: getDaytimeButtonTabIndex(Daytime.PM, daytimeSelected),
-                type: getTimePickerButtonType(daytimeSelected)
-              }, {
-                children: Daytime.PM
-              }), Daytime.PM)]
-            }), void 0)]
-          }), void 0), !hideActionButtons && jsxs("div", Object.assign({
-            className: "dot-time-picker-action-buttons"
-          }, {
-            children: [jsx(DotButton, Object.assign({
-              "data-testid": dataTestId && `${dataTestId}-cancel`,
-              onClick: handleCancel,
-              size: "small",
-              type: "text"
-            }, {
-              children: "Cancel"
-            }), void 0), jsx(DotButton, Object.assign({
-              "data-testid": dataTestId && `${dataTestId}-set`,
-              onClick: handleSet,
-              size: "small",
-              type: "text"
-            }, {
-              children: "Set"
-            }), void 0)]
-          }), void 0)]
-        }), void 0)
-      }), void 0)
+      children: _disableClickAwayListener ? paperComponent : wrapWithClickAwayListener(paperComponent)
     }), void 0)]
   }), void 0);
 };
@@ -10069,4 +10135,4 @@ const DotClickAwayListener = ({
   }, void 0);
 };
 
-export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };
+export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, checkIfValidDate, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };