@digital-ai/dot-components 2.7.3 → 2.7.4

package/index.umd.js

@@ -4748,6 +4748,7 @@
         filterSelectedOptions = _f === void 0 ? true : _f,
         _g = _a.freesolo,
         freesolo = _g === void 0 ? true : _g,
+        checkIfOptionDisabled = _a.checkIfOptionDisabled,
         _h = _a.group,
         group = _h === void 0 ? false : _h,
         helperText = _a.helperText,
@@ -4985,6 +4986,7 @@
         getOptionLabel: function (option) {
           return parseAutoCompleteValue(option);
         },
+        getOptionDisabled: checkIfOptionDisabled,
         groupBy: group ? function (option) {
           return option.group;
         } : undefined,
@@ -10298,6 +10300,28 @@
       }, void 0);
     };
 
+    exports.DatePickerKeydownContext = void 0;
+    (function (DatePickerKeydownContext) {
+      DatePickerKeydownContext[DatePickerKeydownContext["Input"] = 0] = "Input";
+      DatePickerKeydownContext[DatePickerKeydownContext["PickerButton"] = 1] = "PickerButton";
+      DatePickerKeydownContext[DatePickerKeydownContext["Popper"] = 2] = "Popper";
+    })(exports.DatePickerKeydownContext || (exports.DatePickerKeydownContext = {}));
+
+    /** This returns a `boolean` indicating whether the Day.js object contains a valid date or not. */
+    var checkIfValidDate = function checkIfValidDate(date, format) {
+      return dayjs__default["default"](date, format, true).isValid();
+    };
+    var getContextEnumBasedOnTarget = function getContextEnumBasedOnTarget(event, inputElement, contextEnum) {
+      var targetElement = event.target;
+      var isWithinInput = inputElement === null || inputElement === void 0 ? void 0 : inputElement.contains(targetElement);
+      var currentContextEnum = contextEnum;
+      // Key was captured within text field but not on the input itself
+      if (contextEnum === exports.DatePickerKeydownContext.Input && !isWithinInput) {
+        currentContextEnum = exports.DatePickerKeydownContext.PickerButton;
+      }
+      return currentContextEnum;
+    };
+
     var rootClassName$1 = 'dot-date-picker';
     var containerClassName$1 = 'dot-date-picker-container';
     var rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
@@ -10327,6 +10351,7 @@
         disableRipple: true
       }), void 0);
     };
+    var DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
     var DotDatePicker = function DotDatePicker(_a) {
       var ariaLabel = _a.ariaLabel,
         _b = _a.autoFocus,
@@ -10362,6 +10387,7 @@
         onChange = _a.onChange,
         onClose = _a.onClose,
         onError = _a.onError,
+        onKeyDown = _a.onKeyDown,
         onOpen = _a.onOpen,
         open = _a.open,
         persistentLabel = _a.persistentLabel,
@@ -10371,7 +10397,7 @@
         required = _h === void 0 ? false : _h,
         showDaysOutsideCurrentMonth = _a.showDaysOutsideCurrentMonth,
         value = _a.value;
-      var dateFormat = format || 'YYYY-MM-DD';
+      var displayFormat = format || DEFAULT_DATE_FORMAT;
       var hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
       var hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
       var isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
@@ -10405,14 +10431,14 @@
       }, [locale]);
       var handleChange = function 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);
       };
       var handleAccept = function handleAccept(changedValue) {
         if (!onAccept) return;
-        onAccept(changedValue ? changedValue.format(dateFormat) : null);
+        onAccept(changedValue ? changedValue.format(DEFAULT_DATE_FORMAT) : null);
       };
       var handleError = function handleError(validationError, currentValue) {
-        return onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs__default["default"](currentValue).format(dateFormat));
+        return onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs__default["default"](currentValue).format(DEFAULT_DATE_FORMAT));
       };
       var handleOpen = function handleOpen() {
         if (focusInputOnPopperOpened && inputRef.current) {
@@ -10429,6 +10455,12 @@
         }
         return actionBar;
       };
+      var handleKeyDown = function handleKeyDown(contextEnum) {
+        return function (event) {
+          var currentContextEnum = getContextEnumBasedOnTarget(event, inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, contextEnum);
+          onKeyDown(event, currentContextEnum);
+        };
+      };
       return jsxRuntime.jsx(StyledDatePickerContainer, __assign({
         className: containerClasses,
         "data-testid": dataTestId
@@ -10448,16 +10480,16 @@
             autoFocus: autoFocus,
             closeOnSelect: closeOnSelect,
             className: rootClasses,
-            defaultValue: defaultValue && dayjs__default["default"](defaultValue, dateFormat),
+            defaultValue: defaultValue && dayjs__default["default"](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__default["default"](maxDate, dateFormat),
-            minDate: minDate && dayjs__default["default"](minDate, dateFormat),
+            maxDate: maxDate && dayjs__default["default"](maxDate, DEFAULT_DATE_FORMAT),
+            minDate: minDate && dayjs__default["default"](minDate, DEFAULT_DATE_FORMAT),
             onAccept: handleAccept,
             onChange: handleChange,
             onClose: onClose,
@@ -10496,6 +10528,7 @@
                   'data-testid': 'dot-date-picker-input',
                   onBlur: onBlur
                 },
+                onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Input),
                 inputRef: inputRef,
                 fullWidth: fullWidth,
                 name: inputName
@@ -10507,10 +10540,11 @@
                 disableEnforceFocus: true
               },
               popper: {
-                disablePortal: disablePortal
+                disablePortal: disablePortal,
+                onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Popper)
               }
             },
-            value: value && dayjs__default["default"](value, dateFormat)
+            value: value && dayjs__default["default"](value, DEFAULT_DATE_FORMAT)
           }, void 0)]
         }), void 0)
       }), void 0);
@@ -10597,6 +10631,12 @@
     var getTimePickerButtonType = function getTimePickerButtonType(selectedDaytime) {
       return selectedDaytime && selectedDaytime === exports.Daytime.PM ? 'primary' : 'text';
     };
+    var checkIfOpenPropDefined = function checkIfOpenPropDefined(open) {
+      return open !== null && open !== undefined;
+    };
+    var getDaytimeButtonType = function getDaytimeButtonType(daytimeSelected) {
+      return daytimeSelected && daytimeSelected === exports.Daytime.AM ? 'primary' : 'text';
+    };
 
     var rootClassName = 'dot-time-picker';
     var containerClassName = 'dot-time-picker-container';
@@ -10621,12 +10661,12 @@
     var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
     dayjs__default["default"].extend(utc__default["default"]);
-    var DEFAULT_PICKER_TIME_FORMAT = 'hh:mm';
-    var DEFAULT_TIME_FORMAT = 'hh:mm A';
+    var DEFAULT_PICKER_TIME_FORMAT = 'HH:mm';
+    var DEFAULT_TIME_FORMAT = 'HH:mm';
     var DEFAULT_TIME = '01:00';
     var DotTimePicker = function DotTimePicker(_a) {
       var _b = _a.ampm,
-        ampm = _b === void 0 ? true : _b,
+        ampm = _b === void 0 ? false : _b,
         ariaLabel = _a.ariaLabel,
         _c = _a.autoFocus,
         autoFocus = _c === void 0 ? false : _c,
@@ -10635,11 +10675,13 @@
         defaultValue = _a.defaultValue,
         _d = _a.disableOpenPicker,
         disableOpenPicker = _d === void 0 ? false : _d,
+        _e = _a.disableClickAwayListener,
+        disableClickAwayListener = _e === void 0 ? false : _e,
         disabled = _a.disabled,
         error = _a.error,
         format = _a.format,
-        _e = _a.fullWidth,
-        fullWidth = _e === void 0 ? false : _e,
+        _f = _a.fullWidth,
+        fullWidth = _f === void 0 ? false : _f,
         helperText = _a.helperText,
         hideActionButtons = _a.hideActionButtons,
         inputId = _a.inputId,
@@ -10647,32 +10689,34 @@
         label = _a.label,
         onAccept = _a.onAccept,
         onBlur = _a.onBlur,
+        onCancel = _a.onCancel,
         onChange = _a.onChange,
         onClose = _a.onClose,
+        onKeyDown = _a.onKeyDown,
         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,
         value = _a.value;
-      var timeFormat = format || DEFAULT_TIME_FORMAT;
+      var displayFormat = 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 _j = React.useState(null),
-        time = _j[0],
-        setTime = _j[1];
-      var _k = React.useState(),
-        pickerTime = _k[0],
-        setPickerTime = _k[1];
+      var _j = React.useState(false),
+        isPickerOpened = _j[0],
+        setIsPickerOpened = _j[1];
+      var _k = React.useState(null),
+        time = _k[0],
+        setTime = _k[1];
+      var _l = React.useState(),
+        pickerTime = _l[0],
+        setPickerTime = _l[1];
       var hoursRef = React.useRef(null);
       var minutesRef = React.useRef(null);
       var daytimeRef = React.useRef(null);
@@ -10680,7 +10724,7 @@
       var minutes = getMinutesForTimePicker();
       var daytimeSelected = getSelectedDaytime(pickerTime);
       var selectedPickerHour = pickerTime && calculateHourBasedOnTimeFormat(pickerTime, ampm);
-      var isOpenPropDefined = open !== null && open !== undefined;
+      var isOpenPropDefined = checkIfOpenPropDefined(open);
       var isControlledComponent = onChange && value !== undefined;
       React.useEffect(function () {
         if (hasValueWithoutChangeHandler) {
@@ -10693,9 +10737,9 @@
       React.useEffect(function () {
         var 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);
@@ -10721,7 +10765,7 @@
         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);
+        onChange === null || onChange === void 0 ? void 0 : onChange(currentValue ? currentValue.format(DEFAULT_TIME_FORMAT) : null, context);
       };
       var handleClose = function handleClose() {
         !isOpenPropDefined && setIsPickerOpened(false);
@@ -10746,6 +10790,7 @@
       };
       var handleCancel = function handleCancel() {
         setPickerTime(time);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         handleClose();
       };
       var handleSet = function handleSet() {
@@ -10754,12 +10799,18 @@
           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();
       };
+      var handleKeyDown = function handleKeyDown(contextEnum) {
+        return function (event) {
+          var currentContextEnum = getContextEnumBasedOnTarget(event, inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, contextEnum);
+          onKeyDown(event, currentContextEnum);
+        };
+      };
       var scrollToSelectedTime = function scrollToSelectedTime() {
         if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
         var selectedHour = calculateHourBasedOnTimeFormat(time, ampm);
@@ -10794,6 +10845,118 @@
         if (event.key !== 'Escape' || !isPickerOpened) return;
         handleCancel();
       };
+      var wrapWithClickAwayListener = function wrapWithClickAwayListener(children) {
+        return jsxRuntime.jsx(material.ClickAwayListener, __assign({
+          onClickAway: handleSet
+        }, {
+          children: children
+        }), void 0);
+      };
+      var renderTimePickerHours = function renderTimePickerHours() {
+        return 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')
+          }), hour);
+        });
+      };
+      var renderTimePickerMinutes = function renderTimePickerMinutes() {
+        return minutes.map(function (minute, index) {
+          var isSelected = pickerTime ? pickerTime.minute() === minute : false;
+          return jsxRuntime.jsx(DotButton, __assign({
+            className: "dot-picker-button",
+            "data-testid": dataTestId && dataTestId + "-minute-button-" + minute,
+            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);
+        });
+      };
+      var renderTimePickerActionButtons = function renderTimePickerActionButtons() {
+        return jsxRuntime.jsxs("div", __assign({
+          className: "dot-time-picker-action-buttons"
+        }, {
+          children: [jsxRuntime.jsx(DotButton, __assign({
+            "data-testid": dataTestId && dataTestId + "-cancel",
+            onClick: handleCancel,
+            size: "small",
+            type: "text"
+          }, {
+            children: "Cancel"
+          }), void 0), jsxRuntime.jsx(DotButton, __assign({
+            "data-testid": dataTestId && dataTestId + "-set",
+            onClick: handleSet,
+            size: "small",
+            type: "text"
+          }, {
+            children: "Set"
+          }), void 0)]
+        }), void 0);
+      };
+      var renderDaytime = function renderDaytime() {
+        return jsxRuntime.jsxs("div", __assign({
+          className: "dot-time-picker-daytime",
+          ref: daytimeRef
+        }, {
+          children: [jsxRuntime.jsx(DotButton, __assign({
+            className: "dot-picker-button",
+            "data-testid": dataTestId && dataTestId + "-am-button",
+            onClick: function () {
+              return handleDaytimeSelection(exports.Daytime.AM);
+            },
+            onKeyDown: handleTimeKeydown(daytimeRef, 0),
+            tabIndex: getDaytimeButtonTabIndex(exports.Daytime.AM, daytimeSelected),
+            type: getDaytimeButtonType(daytimeSelected)
+          }, {
+            children: exports.Daytime.AM
+          }), exports.Daytime.AM), jsxRuntime.jsx(DotButton, __assign({
+            className: "dot-picker-button",
+            "data-testid": dataTestId && dataTestId + "-pm-button",
+            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)]
+        }), void 0);
+      };
+      var paperComponent = jsxRuntime.jsxs(material.Paper, __assign({
+        className: "dot-time-picker-paper",
+        elevation: 8
+      }, {
+        children: [jsxRuntime.jsxs("div", __assign({
+          className: "dot-time-picker-selection"
+        }, {
+          children: [jsxRuntime.jsx("div", __assign({
+            className: "dot-time-picker-hours",
+            ref: hoursRef
+          }, {
+            children: renderTimePickerHours()
+          }), void 0), jsxRuntime.jsx("div", __assign({
+            className: "dot-time-picker-minutes",
+            ref: minutesRef
+          }, {
+            children: renderTimePickerMinutes()
+          }), void 0), ampm && renderDaytime()]
+        }), void 0), !hideActionButtons && renderTimePickerActionButtons()]
+      }), void 0);
       return jsxRuntime.jsxs(StyledTimePickerContainer, __assign({
         className: containerClasses,
         "data-testid": dataTestId,
@@ -10815,7 +10978,7 @@
             autoFocus: autoFocus,
             className: rootClasses,
             disabled: disabled,
-            format: format,
+            format: displayFormat,
             inputRef: inputRef,
             label: persistentLabel ? null : label,
             onChange: handleInputChange,
@@ -10847,7 +11010,8 @@
                   onBlur: onBlur
                 },
                 fullWidth: fullWidth,
-                name: inputName
+                name: inputName,
+                onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Input)
               },
               field: {
                 readOnly: isComponentReadOnly
@@ -10861,105 +11025,10 @@
           "data-testid": dataTestId && dataTestId + "-popper",
           disablePortal: true,
           open: isPickerOpened,
+          onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Popper),
           placement: "bottom-start"
         }, {
-          children: jsxRuntime.jsx(material.ClickAwayListener, __assign({
-            onClickAway: handleSet
-          }, {
-            children: jsxRuntime.jsxs(material.Paper, __assign({
-              className: "dot-time-picker-paper",
-              elevation: 8
-            }, {
-              children: [jsxRuntime.jsxs("div", __assign({
-                className: "dot-time-picker-selection"
-              }, {
-                children: [jsxRuntime.jsx("div", __assign({
-                  className: "dot-time-picker-hours",
-                  ref: hoursRef
-                }, {
-                  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')
-                    }), hour);
-                  })
-                }), void 0), jsxRuntime.jsx("div", __assign({
-                  className: "dot-time-picker-minutes",
-                  ref: minutesRef
-                }, {
-                  children: minutes.map(function (minute, index) {
-                    var isSelected = pickerTime ? pickerTime.minute() === minute : false;
-                    return jsxRuntime.jsx(DotButton, __assign({
-                      className: "dot-picker-button",
-                      "data-testid": dataTestId && dataTestId + "-minute-button-" + minute,
-                      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",
-                  ref: daytimeRef
-                }, {
-                  children: [jsxRuntime.jsx(DotButton, __assign({
-                    className: "dot-picker-button",
-                    "data-testid": dataTestId && dataTestId + "-am-button",
-                    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",
-                    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)]
-                }), void 0)]
-              }), void 0), !hideActionButtons && jsxRuntime.jsxs("div", __assign({
-                className: "dot-time-picker-action-buttons"
-              }, {
-                children: [jsxRuntime.jsx(DotButton, __assign({
-                  "data-testid": dataTestId && dataTestId + "-cancel",
-                  onClick: handleCancel,
-                  size: "small",
-                  type: "text"
-                }, {
-                  children: "Cancel"
-                }), void 0), jsxRuntime.jsx(DotButton, __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);
     };
@@ -11052,6 +11121,7 @@
     exports.DotTruncateWithTooltip = DotTruncateWithTooltip;
     exports.DotTypography = DotTypography;
     exports.avatarColors = avatarColors;
+    exports.checkIfValidDate = checkIfValidDate;
     exports.lightColors = lightThemeColors;
     exports.mockScrollIntoView = mockScrollIntoView;
     exports.parseAutoCompleteValue = parseAutoCompleteValue;

package/lib/components/auto-complete/AutoComplete.d.ts

@@ -30,6 +30,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     actionItem?: ActionItem;
     /** This prop helps users to fill forms faster */
     autoFocus?: boolean;
+    /** Used to determine the disabled state for a given option. */
+    checkIfOptionDisabled?: (option: T) => boolean;
     /** default option that is selected */
     defaultValue?: AutoCompleteValue;
     /** Controls size of chip spacing within the autocomplete **/
@@ -94,4 +96,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;

package/lib/components/auto-complete/AutoComplete.stories.d.ts

@@ -1,10 +1,11 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { AutoCompleteOption, AutoCompleteProps } from './AutoComplete';
 import { AutoCompleteWithRenderOption } from './Autocomplete.stories.data';
-declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
+declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
 export default _default;
 export declare const Default: any;
 export declare const WithActionItem: any;
+export declare const WithDisabledItems: any;
 export declare const WithCustomActionItem: Story<AutoCompleteProps>;
 export declare const WithAsyncLoad: Story<AutoCompleteProps>;
 declare type AutoCompleteWithRenderOptionProps = AutoCompleteProps<AutoCompleteWithRenderOption>;

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

@@ -1,8 +1,9 @@
-import { FocusEvent, ReactNode } from 'react';
+import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
 import { PickersDayProps } from '@mui/x-date-pickers';
 import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 import { CommonProps } from '../CommonProps';
 import { DatePickerLocale } from './';
+import { DatePickerKeydownContext } from './utils/models';
 export declare const RectanglePickersDay: (pickersDayProps: PickersDayProps<unknown>) => JSX.Element;
 export interface DatePickerProps extends CommonProps {
     /** If `true`, the `input` element is focused during the first mount. */
@@ -57,6 +58,8 @@ export interface DatePickerProps extends CommonProps {
     onClose?: () => void;
     /** Callback fired when the error associated to the current value changes. */
     onError?: (error: string, value: string) => void;
+    /** A function that should be executed when key is pressed from input or popper */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>, contextEnum: DatePickerKeydownContext) => void;
     /** Callback fired when the popup requests to be opened. Use in controlled mode (see `open`). */
     onOpen?: () => void;
     /** Control the popup or dialog open state. */
@@ -74,7 +77,7 @@ export interface DatePickerProps extends CommonProps {
      * - ignored if `calendars` equals more than `1` on range pickers.
      */
     showDaysOutsideCurrentMonth?: boolean;
-    /** The selected value. Used when the component is controlled. */
+    /** The selected value. Used when the component is controlled. Date in ISO 8601 format, ie: YYYY-MM-DD  */
     value?: string;
 }
-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;
+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, onKeyDown, 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, 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>;
+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, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: DatePickerProps;
 export declare const WithHelperText: any;
@@ -24,8 +24,4 @@ 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/index.d.ts

@@ -1,3 +1,5 @@
 export type { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 export type { DatePickerLocale } from './utils/models';
+export { DatePickerKeydownContext } from './utils/models';
+export { checkIfValidDate } from './utils/helpers';
 export * from './DatePicker';

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

@@ -0,0 +1,5 @@
+import { DatePickerKeydownContext } from './models';
+import { KeyboardEvent } from 'react';
+/** This returns a `boolean` indicating whether the Day.js object contains a valid date or not. */
+export declare const checkIfValidDate: (date: string, format?: string) => boolean;
+export declare const getContextEnumBasedOnTarget: (event: KeyboardEvent<HTMLElement>, inputElement: HTMLInputElement | null, contextEnum: DatePickerKeydownContext) => DatePickerKeydownContext;

package/lib/components/date-picker/utils/models.d.ts

@@ -36,3 +36,8 @@ export interface DatePickerLocale {
     weekdaysShort?: string[];
     yearStart?: number;
 }
+export declare enum DatePickerKeydownContext {
+    Input = 0,
+    PickerButton = 1,
+    Popper = 2
+}

package/lib/components/index.d.ts

@@ -96,7 +96,7 @@ export { DotPopper } from './popper';
 export { DotTruncateWithTooltip } from './truncate-with-tooltip';
 export { DotDraggableList } from './draggable-list';
 export { DotLinearProgress } from './linear-progress';
-export { DotDatePicker } from './date-picker';
+export { DatePickerKeydownContext, DotDatePicker, checkIfValidDate, } from './date-picker';
 export { Daytime, DotTimePicker, mockScrollIntoView } from './time-picker';
 export { DotClickAwayListener } from './click-away-listener';
 export { CreateUUID } from './createUUID';