@digital-ai/dot-components 2.7.3 → 2.7.4

package/CHANGE_LOG.md

@@ -1,5 +1,15 @@
 # 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)
@@ -22,6 +32,10 @@
 
 - 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)
@@ -32,7 +46,6 @@
 
 **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))
 - `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))
 
@@ -492,7 +505,6 @@
 
 **Features:**
 
-- S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
 - S-85256: `Map` component example in demo app [\#1184](https://github.com/digital-ai/dot-components/pull/1184) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -511,6 +523,7 @@
 
 **Features:**
 
+- S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
 - S-85283: `InlineEdit` component should provide a tooltip out the box [\#1181](https://github.com/digital-ai/dot-components/pull/1181) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -717,7 +730,6 @@
 **Fixed bugs:**
 
 - D-20004: Fix multiSelect for tables that use onUpdateData callback [\#1005](https://github.com/digital-ai/dot-components/pull/1005) ([selsemore](https://github.com/selsemore))
-- D-19932: `Avatar` tooltip appears in wrong position [\#995](https://github.com/digital-ai/dot-components/pull/995) ([dmiletic85](https://github.com/dmiletic85))
 
 **Misc:**
 
@@ -738,6 +750,7 @@
 **Fixed bugs:**
 
 - D-19944: `Drawer` close icon doesn't have enough padding [\#996](https://github.com/digital-ai/dot-components/pull/996) ([dmiletic85](https://github.com/dmiletic85))
+- D-19932: `Avatar` tooltip appears in wrong position [\#995](https://github.com/digital-ai/dot-components/pull/995) ([dmiletic85](https://github.com/dmiletic85))
 - D-19816: `SplitButton`: `data-testid` is assigned to multiple elements [\#986](https://github.com/digital-ai/dot-components/pull/986) ([dmiletic85](https://github.com/dmiletic85))
 - D-19820: Failing `Table` unit tests on NX major upgrade branch [\#983](https://github.com/digital-ai/dot-components/pull/983) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -952,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:**
 
@@ -970,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)
 
@@ -1014,7 +1027,6 @@
 - S-80109: Expose built-in `leaveDelay`, `onClose`, `open` props on `DotTooltip` component [\#786](https://github.com/digital-ai/dot-components/pull/786) ([dmiletic85](https://github.com/dmiletic85))
 - S-76907: update ButtonToggle styles, update unit tests and add e2e tests [\#785](https://github.com/digital-ai/dot-components/pull/785) ([CWSites](https://github.com/CWSites))
 - S-80048: product wrapper demo [\#782](https://github.com/digital-ai/dot-components/pull/782) ([CWSites](https://github.com/CWSites))
-- Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 
 ## [1.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (11/05/2021)
 
@@ -1029,6 +1041,7 @@
 
 - Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
+- Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 - S-76893: Webpack 4 - update peer dependencies [\#768](https://github.com/digital-ai/dot-components/pull/768) ([CWSites](https://github.com/CWSites))
 - S-79957: improve husky [\#765](https://github.com/digital-ai/dot-components/pull/765) ([CWSites](https://github.com/CWSites))
 

package/index.esm.js

@@ -4309,6 +4309,7 @@ const DotAutoComplete = ({
   error: _error = false,
   filterSelectedOptions: _filterSelectedOptions = true,
   freesolo: _freesolo = true,
+  checkIfOptionDisabled,
   group: _group = false,
   helperText,
   inputId,
@@ -4530,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,
@@ -9468,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';
@@ -9494,6 +9516,7 @@ const RectanglePickersDay = pickersDayProps => {
     disableRipple: true
   }), void 0);
 };
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
 const DotDatePicker = ({
   ariaLabel,
   autoFocus: _autoFocus = false,
@@ -9524,6 +9547,7 @@ const DotDatePicker = ({
   onChange,
   onClose,
   onError,
+  onKeyDown,
   onOpen,
   open,
   persistentLabel,
@@ -9532,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;
@@ -9566,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);
@@ -9588,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
@@ -9607,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,
@@ -9651,6 +9679,7 @@ const DotDatePicker = ({
               'data-testid': 'dot-date-picker-input',
               onBlur
             },
+            onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Input),
             inputRef,
             fullWidth: _fullWidth,
             name: inputName
@@ -9662,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);
@@ -9734,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';
@@ -9755,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,
@@ -9777,8 +9810,10 @@ const DotTimePicker = ({
   label,
   onAccept,
   onBlur,
+  onCancel,
   onChange,
   onClose,
+  onKeyDown,
   onOpen,
   open,
   persistentLabel,
@@ -9786,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;
@@ -9803,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) {
@@ -9816,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);
@@ -9844,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);
@@ -9869,6 +9904,7 @@ const DotTimePicker = ({
   };
   const handleCancel = () => {
     setPickerTime(time);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     handleClose();
   };
   const handleSet = () => {
@@ -9877,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);
@@ -9915,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,
@@ -9936,7 +10070,7 @@ const DotTimePicker = ({
         autoFocus: _autoFocus,
         className: rootClasses,
         disabled: disabled,
-        format: format,
+        format: displayFormat,
         inputRef: inputRef,
         label: persistentLabel ? null : label,
         onChange: handleInputChange,
@@ -9966,7 +10100,8 @@ const DotTimePicker = ({
               onBlur
             },
             fullWidth: _fullWidth,
-            name: inputName
+            name: inputName,
+            onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Input)
           },
           field: {
             readOnly: isComponentReadOnly
@@ -9980,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);
 };
@@ -10087,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 };