@digital-ai/dot-components 2.7.2 → 2.7.4

package/index.umd.js

@@ -4723,6 +4723,9 @@
       });
     };
 
+    function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
+      return ariaLabel || label || placeholder;
+    }
     var DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
     var DotAutoComplete = function DotAutoComplete(_a) {
       var ListboxComponent = _a.ListboxComponent,
@@ -4745,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,
@@ -4982,6 +4986,7 @@
         getOptionLabel: function (option) {
           return parseAutoCompleteValue(option);
         },
+        getOptionDisabled: checkIfOptionDisabled,
         groupBy: group ? function (option) {
           return option.group;
         } : undefined,
@@ -5041,11 +5046,17 @@
                 error: error,
                 focused: readOnly ? false : undefined,
                 helperText: helperText,
+                id: inputId,
                 inputProps: __assign(__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: __assign(__assign({}, params.InputProps), {
                   endAdornment: !readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined
                 }),
@@ -7601,27 +7612,34 @@
         onEditStateChange = _a.onEditStateChange,
         readOnly = _a.readOnly,
         selectTextOnEdit = _a.selectTextOnEdit,
-        _c = _a.tabIndex,
-        tabIndex = _c === void 0 ? 0 : _c,
+        _c = _a.startEditable,
+        startEditable = _c === void 0 ? false : _c,
+        _d = _a.tabIndex,
+        tabIndex = _d === void 0 ? 0 : _d,
         tooltip = _a.tooltip,
-        _d = _a.typography,
-        typography = _d === void 0 ? 'body1' : _d,
-        _e = _a.value,
-        value = _e === void 0 ? '' : _e;
-      var _f = React.useState(false),
-        editing = _f[0],
-        setEditing = _f[1];
+        _e = _a.typography,
+        typography = _e === void 0 ? 'body1' : _e,
+        _f = _a.value,
+        value = _f === void 0 ? '' : _f;
       var _g = React.useState(false),
-        showTooltip = _g[0],
-        setShowTooltip = _g[1];
-      var _h = React.useState(''),
-        originalValue = _h[0],
-        setOriginalValue = _h[1];
-      var _j = React.useState(value),
-        inputValue = _j[0],
-        setInputValue = _j[1];
+        editing = _g[0],
+        setEditing = _g[1];
+      var _h = React.useState(false),
+        showTooltip = _h[0],
+        setShowTooltip = _h[1];
+      var _j = React.useState(''),
+        originalValue = _j[0],
+        setOriginalValue = _j[1];
+      var _k = React.useState(value),
+        inputValue = _k[0],
+        setInputValue = _k[1];
       var inputRef = React.useRef();
       var inlineEditRef = React.useRef();
+      React.useEffect(function () {
+        if (startEditable && !readOnly) {
+          enterEditMode();
+        }
+      }, []);
       React.useEffect(function () {
         if (value !== inputValue) {
           setInputValue(value);
@@ -7634,10 +7652,13 @@
           setShowTooltip(visible);
         }
       };
-      var handleInlineEditClick = function handleInlineEditClick() {
-        if (editing) return;
+      var enterEditMode = function enterEditMode() {
         setOriginalValue(inputValue);
         setEditing(true);
+      };
+      var handleInlineEditClick = function handleInlineEditClick() {
+        if (editing) return;
+        enterEditMode();
         if (onEditStateChange) {
           onEditStateChange(true);
         }
@@ -7787,7 +7808,7 @@
             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
             },
@@ -10279,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';
@@ -10308,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,
@@ -10343,6 +10387,7 @@
         onChange = _a.onChange,
         onClose = _a.onClose,
         onError = _a.onError,
+        onKeyDown = _a.onKeyDown,
         onOpen = _a.onOpen,
         open = _a.open,
         persistentLabel = _a.persistentLabel,
@@ -10352,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;
@@ -10386,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) {
@@ -10410,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
@@ -10429,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,
@@ -10477,6 +10528,7 @@
                   'data-testid': 'dot-date-picker-input',
                   onBlur: onBlur
                 },
+                onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Input),
                 inputRef: inputRef,
                 fullWidth: fullWidth,
                 name: inputName
@@ -10488,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);
@@ -10578,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';
@@ -10602,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,
@@ -10616,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,
@@ -10628,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);
@@ -10661,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) {
@@ -10674,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);
@@ -10702,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);
@@ -10727,6 +10790,7 @@
       };
       var handleCancel = function handleCancel() {
         setPickerTime(time);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         handleClose();
       };
       var handleSet = function handleSet() {
@@ -10735,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);
@@ -10775,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,
@@ -10796,7 +10978,7 @@
             autoFocus: autoFocus,
             className: rootClasses,
             disabled: disabled,
-            format: format,
+            format: displayFormat,
             inputRef: inputRef,
             label: persistentLabel ? null : label,
             onChange: handleInputChange,
@@ -10828,7 +11010,8 @@
                   onBlur: onBlur
                 },
                 fullWidth: fullWidth,
-                name: inputName
+                name: inputName,
+                onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Input)
               },
               field: {
                 readOnly: isComponentReadOnly
@@ -10842,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);
     };
@@ -11033,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;