@instructure/ui-date-input 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/es/DateInput2/v1/index.js

@@ -1,5 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _CalendarInstUIIcon, _ChevronRightInstUIIc, _ChevronLeftInstUIIco;
 /*
  * The MIT License (MIT)
  *
@@ -131,23 +129,15 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const userLocale = locale || getLocale();
   const userTimezone = timezone || getTimezone();
-  const _useState = useState(messages || []),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputMessages = _useState2[0],
-    setInputMessages = _useState2[1];
-  const _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showPopover = _useState4[0],
-    setShowPopover = _useState4[1];
+  const [inputMessages, setInputMessages] = useState(messages || []);
+  const [showPopover, setShowPopover] = useState(false);
   useEffect(() => {
     // don't set input messages if there is an internal error set already
     if (inputMessages.find(m => m.text === invalidDateErrorMessage)) return;
     setInputMessages(messages || []);
   }, [messages]);
   useEffect(() => {
-    const _parseDate = parseDate(value),
-      _parseDate2 = _slicedToArray(_parseDate, 2),
-      utcIsoDate = _parseDate2[1];
+    const [, utcIsoDate] = parseDate(value);
     // clear error messages if date becomes valid
     if (utcIsoDate || !value) {
       setInputMessages(messages || []);
@@ -170,7 +160,7 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
   };
   const formatDate = (date, timeZone = userTimezone) => {
     // use formatter function if provided
-    if (typeof dateFormat !== 'string' && dateFormat !== null && dateFormat !== void 0 && dateFormat.formatter) {
+    if (typeof dateFormat !== 'string' && dateFormat?.formatter) {
       return dateFormat.formatter(date);
     }
     // if dateFormat set to a locale, use that, otherwise default to the user's locale
@@ -196,25 +186,20 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
     return formattedDate.replace(regex(year), match => 'Y'.repeat(match.length)).replace(regex(month), match => 'M'.repeat(match.length)).replace(regex(day), match => 'D'.repeat(match.length));
   };
   const handleInputChange = (e, newValue) => {
-    const _parseDate3 = parseDate(newValue),
-      _parseDate4 = _slicedToArray(_parseDate3, 2),
-      utcIsoDate = _parseDate4[1];
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, utcIsoDate);
+    const [, utcIsoDate] = parseDate(newValue);
+    onChange?.(e, newValue, utcIsoDate);
   };
   const handleDateSelected = (dateString, _momentDate, e) => {
     setShowPopover(false);
     const newValue = formatDate(new Date(dateString));
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, dateString);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, newValue, dateString);
+    onChange?.(e, newValue, dateString);
+    onRequestValidateDate?.(e, newValue, dateString);
   };
   const handleBlur = e => {
-    const _parseDate5 = parseDate(value),
-      _parseDate6 = _slicedToArray(_parseDate5, 2),
-      localeDate = _parseDate6[0],
-      utcIsoDate = _parseDate6[1];
+    const [localeDate, utcIsoDate] = parseDate(value);
     if (localeDate) {
       if (localeDate !== value) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, localeDate, utcIsoDate);
+        onChange?.(e, localeDate, utcIsoDate);
       }
     } else if (value && invalidDateErrorMessage) {
       setInputMessages([{
@@ -222,8 +207,8 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
         text: invalidDateErrorMessage
       }]);
     }
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, value || '', utcIsoDate);
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
+    onRequestValidateDate?.(e, value || '', utcIsoDate);
+    onBlur?.(e, value || '', utcIsoDate);
   };
   const selectedDate = parseDate(value)[1];
   return _jsx(TextInput, {
@@ -236,7 +221,7 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
     onBlur: handleBlur,
     isRequired: isRequired,
     value: value,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFormatHint(),
+    placeholder: placeholder ?? getDateFormatHint(),
     width: width,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
@@ -248,9 +233,9 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         interaction: interaction,
-        children: renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _CalendarInstUIIcon || (_CalendarInstUIIcon = _jsx(CalendarInstUIIcon, {
+        children: renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _jsx(CalendarInstUIIcon, {
           color: "baseColor"
-        }))
+        })
       }),
       isShowingContent: showPopover,
       onShowContent: () => setShowPopover(true),
@@ -272,18 +257,18 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: _ChevronRightInstUIIc || (_ChevronRightInstUIIc = _jsx(ChevronRightInstUIIcon, {
+          renderIcon: _jsx(ChevronRightInstUIIcon, {
             color: "baseColor"
-          })),
+          }),
           screenReaderLabel: screenReaderLabels.nextMonthButton
         }),
         renderPrevMonthButton: _jsx(IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: _ChevronLeftInstUIIco || (_ChevronLeftInstUIIco = _jsx(ChevronLeftInstUIIcon, {
+          renderIcon: _jsx(ChevronLeftInstUIIcon, {
             color: "baseColor"
-          })),
+          }),
           screenReaderLabel: screenReaderLabels.prevMonthButton
         })
       })

package/lib/DateInput/v1/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DateInput = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _v11_ = require("@instructure/ui-calendar/v11_6");
 var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/generated/IconCalendarMonthLine.js");
@@ -21,11 +20,9 @@ var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
 var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _props2 = require("./props");
+var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-const _excluded = ["renderLabel", "value", "placeholder", "onBlur", "isRequired", "size", "isInline", "layout", "width", "onRequestValidateDate", "onRequestShowCalendar", "onRequestHideCalendar", "onRequestSelectNextDay", "onRequestSelectPrevDay", "onRequestRenderNextMonth", "onRequestRenderPrevMonth"],
-  _excluded2 = ["ref"];
-var _dec, _class, _DateInput, _IconCalendarMonthLin;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -54,135 +51,31 @@ var _dec, _class, _DateInput, _IconCalendarMonthLin;
 category: components
 ---
 **/
-let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = (_DateInput = class DateInput extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      hasInputRef: false,
-      isShowingCalendar: false,
-      validatedDate: void 0,
-      messages: []
-    };
-    this._input = void 0;
-    this.ref = null;
-    this.formatDateId = date => {
-      // ISO8601 strings may contain a space. Remove any spaces before using the
-      // date as the id.
-      return date.replace(/\s/g, '');
-    };
-    this.handleInputRef = el => {
-      var _this$props$inputRef, _this$props;
-      // Ensures that we position the Calendar with respect to the input correctly
-      // if the Calendar is open on mount
-      if (!this.state.hasInputRef) {
-        this.setState({
-          hasInputRef: true
-        });
-      }
-      this._input = el;
-      (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
-    };
-    this.handleInputChange = (event, value) => {
-      var _this$props$onChange, _this$props2;
-      (_this$props$onChange = (_this$props2 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, event, {
-        value
-      });
-      this.handleShowCalendar(event);
-    };
-    this.handleShowCalendar = event => {
-      if (!this.props.children) {
-        this.setState({
-          isShowingCalendar: true
-        });
-      } else if (this.interaction === 'enabled' && this.props.children) {
-        var _this$props$onRequest, _this$props3;
-        (_this$props$onRequest = (_this$props3 = this.props).onRequestShowCalendar) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props3, event);
-      }
-    };
-    this.validateDate = date => {
-      const invalidDateErrorMessage = this.props.invalidDateErrorMessage;
-      const disabledDateErrorMessage = this.props.disabledDateErrorMessage || invalidDateErrorMessage;
-      const messages = [];
-      // check if date is enabled
-      const disabledDates = this.props.disabledDates;
-      if (typeof disabledDates === 'function' && disabledDates(date) || Array.isArray(disabledDates) && disabledDates.find(dateString => _DateTime.DateTime.parse(dateString, this.locale(), this.timezone()).isSame(_DateTime.DateTime.parse(date, this.locale(), this.timezone()), 'day'))) {
-        messages.push(typeof disabledDateErrorMessage === 'function' ? disabledDateErrorMessage(date) : {
-          type: 'error',
-          text: disabledDateErrorMessage
-        });
-      }
-
-      // check if date is valid
-      if (!_DateTime.DateTime.parse(date, this.locale(), this.timezone(), [_DateTime.DateTime.momentISOFormat, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], true).isValid()) {
-        messages.push(typeof invalidDateErrorMessage === 'function' ? invalidDateErrorMessage(date) : {
-          type: 'error',
-          text: invalidDateErrorMessage
-        });
-      }
-      return messages;
-    };
-    this.handleHideCalendar = (event, setectedDate) => {
-      if (!this.props.children) {
-        const dateString = setectedDate || this.props.value;
-        const messages = [];
-        if (this.props.onRequestValidateDate) {
-          var _this$props$onRequest2, _this$props4;
-          const userValidatedDate = (_this$props$onRequest2 = (_this$props4 = this.props).onRequestValidateDate) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props4, event, dateString || '', this.validateDate(dateString || ''));
-          messages.push(...(userValidatedDate || []));
-        } else {
-          if (dateString) {
-            messages.push(...this.validateDate(dateString));
-          }
-        }
-        this.setState({
-          messages,
-          isShowingCalendar: false
-        });
-      } else {
-        var _this$props$onRequest3, _this$props5, _this$props$onRequest4, _this$props6;
-        (_this$props$onRequest3 = (_this$props5 = this.props).onRequestValidateDate) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props5, event);
-        (_this$props$onRequest4 = (_this$props6 = this.props).onRequestHideCalendar) === null || _this$props$onRequest4 === void 0 ? void 0 : _this$props$onRequest4.call(_this$props6, event);
-      }
-    };
-    this.handleHighlightOption = (event, {
-      direction
-    }) => {
-      const _this$props7 = this.props,
-        onRequestSelectNextDay = _this$props7.onRequestSelectNextDay,
-        onRequestSelectPrevDay = _this$props7.onRequestSelectPrevDay,
-        onChange = _this$props7.onChange,
-        value = _this$props7.value,
-        currentDate = _this$props7.currentDate;
-      const isValueValid = value && _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid();
-      if (direction === -1) {
-        if (onRequestSelectPrevDay) {
-          onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
-        } else {
-          // @ts-expect-error TODO
-          onChange(event, {
-            value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('MMMM D, YYYY')
-          });
-          this.setState({
-            messages: []
-          });
-        }
-      }
-      if (direction === 1) {
-        if (onRequestSelectNextDay) {
-          onRequestSelectNextDay === null || onRequestSelectNextDay === void 0 ? void 0 : onRequestSelectNextDay(event);
-        } else {
-          // @ts-expect-error TODO
-          onChange(event, {
-            value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('MMMM D, YYYY')
-          });
-          this.setState({
-            messages: []
-          });
-        }
-      }
-    };
-    this.shouldShowCalendar = () => this.props.children ? this.props.isShowingCalendar : this.state.isShowingCalendar;
-  }
+let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = class DateInput extends _react.Component {
+  static displayName = "DateInput";
+  static componentId = 'DateInput';
+  static Day = _v11_.Calendar.Day;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    value: '',
+    size: 'medium',
+    onBlur: () => {},
+    // must have a default so createChainedFunction works
+    isRequired: false,
+    isInline: false,
+    layout: 'stacked',
+    display: 'inline-block',
+    placement: 'bottom center',
+    isShowingCalendar: false
+  };
+  state = {
+    hasInputRef: false,
+    isShowingCalendar: false,
+    validatedDate: undefined,
+    messages: []
+  };
+  _input = undefined;
+  ref = null;
   locale() {
     if (this.props.locale) {
       return this.props.locale;
@@ -200,19 +93,18 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
     return _DateTime.DateTime.browserTimeZone();
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props8;
-    (_this$props$makeStyle = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props8);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props9;
-    (_this$props$makeStyle2 = (_this$props9 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props9);
+    this.props.makeStyles?.();
   }
   get selectedDateId() {
     let selectedDateId;
     _react.Children.toArray(this.props.children).forEach(day => {
-      const _props = day.props,
-        date = _props.date,
-        isSelected = _props.isSelected;
+      const {
+        date,
+        isSelected
+      } = day.props;
       if (isSelected) {
         selectedDateId = this.formatDateId(date);
       }
@@ -224,10 +116,127 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
       props: this.props
     });
   }
+  formatDateId = date => {
+    // ISO8601 strings may contain a space. Remove any spaces before using the
+    // date as the id.
+    return date.replace(/\s/g, '');
+  };
+  handleInputRef = el => {
+    // Ensures that we position the Calendar with respect to the input correctly
+    // if the Calendar is open on mount
+    if (!this.state.hasInputRef) {
+      this.setState({
+        hasInputRef: true
+      });
+    }
+    this._input = el;
+    this.props.inputRef?.(el);
+  };
+  handleInputChange = (event, value) => {
+    this.props.onChange?.(event, {
+      value
+    });
+    this.handleShowCalendar(event);
+  };
+  handleShowCalendar = event => {
+    if (!this.props.children) {
+      this.setState({
+        isShowingCalendar: true
+      });
+    } else if (this.interaction === 'enabled' && this.props.children) {
+      this.props.onRequestShowCalendar?.(event);
+    }
+  };
+  validateDate = date => {
+    const {
+      invalidDateErrorMessage
+    } = this.props;
+    const disabledDateErrorMessage = this.props.disabledDateErrorMessage || invalidDateErrorMessage;
+    const messages = [];
+    // check if date is enabled
+    const {
+      disabledDates
+    } = this.props;
+    if (typeof disabledDates === 'function' && disabledDates(date) || Array.isArray(disabledDates) && disabledDates.find(dateString => _DateTime.DateTime.parse(dateString, this.locale(), this.timezone()).isSame(_DateTime.DateTime.parse(date, this.locale(), this.timezone()), 'day'))) {
+      messages.push(typeof disabledDateErrorMessage === 'function' ? disabledDateErrorMessage(date) : {
+        type: 'error',
+        text: disabledDateErrorMessage
+      });
+    }
+
+    // check if date is valid
+    if (!_DateTime.DateTime.parse(date, this.locale(), this.timezone(), [_DateTime.DateTime.momentISOFormat, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], true).isValid()) {
+      messages.push(typeof invalidDateErrorMessage === 'function' ? invalidDateErrorMessage(date) : {
+        type: 'error',
+        text: invalidDateErrorMessage
+      });
+    }
+    return messages;
+  };
+  handleHideCalendar = (event, setectedDate) => {
+    if (!this.props.children) {
+      const dateString = setectedDate || this.props.value;
+      const messages = [];
+      if (this.props.onRequestValidateDate) {
+        const userValidatedDate = this.props.onRequestValidateDate?.(event, dateString || '', this.validateDate(dateString || ''));
+        messages.push(...(userValidatedDate || []));
+      } else {
+        if (dateString) {
+          messages.push(...this.validateDate(dateString));
+        }
+      }
+      this.setState({
+        messages,
+        isShowingCalendar: false
+      });
+    } else {
+      this.props.onRequestValidateDate?.(event);
+      this.props.onRequestHideCalendar?.(event);
+    }
+  };
+  handleHighlightOption = (event, {
+    direction
+  }) => {
+    const {
+      onRequestSelectNextDay,
+      onRequestSelectPrevDay,
+      onChange,
+      value,
+      currentDate
+    } = this.props;
+    const isValueValid = value && _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid();
+    if (direction === -1) {
+      if (onRequestSelectPrevDay) {
+        onRequestSelectPrevDay?.(event);
+      } else {
+        // @ts-expect-error TODO
+        onChange(event, {
+          value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('MMMM D, YYYY')
+        });
+        this.setState({
+          messages: []
+        });
+      }
+    }
+    if (direction === 1) {
+      if (onRequestSelectNextDay) {
+        onRequestSelectNextDay?.(event);
+      } else {
+        // @ts-expect-error TODO
+        onChange(event, {
+          value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('MMMM D, YYYY')
+        });
+        this.setState({
+          messages: []
+        });
+      }
+    }
+  };
   renderMonthNavigationButton(type = 'prev') {
-    const _this$props0 = this.props,
-      renderPrevMonthButton = _this$props0.renderPrevMonthButton,
-      renderNextMonthButton = _this$props0.renderNextMonthButton;
+    const {
+      renderPrevMonthButton,
+      renderNextMonthButton
+    } = this.props;
     const button = type === 'prev' ? renderPrevMonthButton : renderNextMonthButton;
     return button && (0, _safeCloneElement.safeCloneElement)((0, _callRenderProp.callRenderProp)(button), {
       tabIndex: -1
@@ -237,9 +246,10 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
     const children = this.props.children;
     if (!children) return;
     return _react.Children.map(children, day => {
-      const _day$props = day.props,
-        date = _day$props.date,
-        isOutsideMonth = _day$props.isOutsideMonth;
+      const {
+        date,
+        isOutsideMonth
+      } = day.props;
       const props = {
         tabIndex: -1,
         id: this.formatDateId(date)
@@ -257,24 +267,25 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
     getListProps,
     getOptionProps
   }) {
-    const _this$props1 = this.props,
-      onRequestRenderNextMonth = _this$props1.onRequestRenderNextMonth,
-      onRequestRenderPrevMonth = _this$props1.onRequestRenderPrevMonth,
-      renderNavigationLabel = _this$props1.renderNavigationLabel,
-      renderWeekdayLabels = _this$props1.renderWeekdayLabels,
-      value = _this$props1.value,
-      onChange = _this$props1.onChange,
-      disabledDates = _this$props1.disabledDates,
-      currentDate = _this$props1.currentDate;
+    const {
+      onRequestRenderNextMonth,
+      onRequestRenderPrevMonth,
+      renderNavigationLabel,
+      renderWeekdayLabels,
+      value,
+      onChange,
+      disabledDates,
+      currentDate
+    } = this.props;
     const isValidDate = value ? _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
     const noChildrenProps = this.props.children ? {} : {
       disabledDates,
       currentDate,
-      selectedDate: isValidDate ? value : void 0,
-      visibleMonth: isValidDate ? value : void 0,
+      selectedDate: isValidDate ? value : undefined,
+      visibleMonth: isValidDate ? value : undefined,
       onDateSelected: (dateString, momentDate, e) => {
         // @ts-expect-error TODO
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+        onChange?.(e, {
           value: `${momentDate.format('MMMM')} ${momentDate.format('D')}, ${momentDate.format('YYYY')}`
         });
         this.handleHideCalendar(e, dateString);
@@ -297,28 +308,33 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
     getInputProps,
     getTriggerProps
   }) {
-    const _this$props10 = this.props,
-      renderLabel = _this$props10.renderLabel,
-      value = _this$props10.value,
-      placeholder = _this$props10.placeholder,
-      onBlur = _this$props10.onBlur,
-      isRequired = _this$props10.isRequired,
-      size = _this$props10.size,
-      isInline = _this$props10.isInline,
-      layout = _this$props10.layout,
-      width = _this$props10.width,
-      onRequestValidateDate = _this$props10.onRequestValidateDate,
-      onRequestShowCalendar = _this$props10.onRequestShowCalendar,
-      onRequestHideCalendar = _this$props10.onRequestHideCalendar,
-      onRequestSelectNextDay = _this$props10.onRequestSelectNextDay,
-      onRequestSelectPrevDay = _this$props10.onRequestSelectPrevDay,
-      onRequestRenderNextMonth = _this$props10.onRequestRenderNextMonth,
-      onRequestRenderPrevMonth = _this$props10.onRequestRenderPrevMonth,
-      rest = (0, _objectWithoutProperties2.default)(_this$props10, _excluded);
-    const interaction = this.interaction;
-    const _getTriggerProps = getTriggerProps(),
-      ref = _getTriggerProps.ref,
-      triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded2);
+    const {
+      renderLabel,
+      value,
+      placeholder,
+      onBlur,
+      isRequired,
+      size,
+      isInline,
+      layout,
+      width,
+      onRequestValidateDate,
+      onRequestShowCalendar,
+      onRequestHideCalendar,
+      onRequestSelectNextDay,
+      onRequestSelectPrevDay,
+      onRequestRenderNextMonth,
+      onRequestRenderPrevMonth,
+      ...rest
+    } = this.props;
+    const {
+      interaction
+    } = this;
+    const {
+      ref,
+      // Apply this to the actual inputRef
+      ...triggerProps
+    } = getTriggerProps();
     const messages = this.props.messages || this.state.messages;
     return (0, _jsxRuntime.jsx)(_v11_3.TextInput, {
       ...triggerProps,
@@ -337,27 +353,28 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
         interaction,
         isRequired,
         display: isInline ? 'inline-block' : 'block',
-        renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _jsxRuntime.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, {
+        renderAfterInput: (0, _jsxRuntime.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, {
           inline: false
-        }))
+        })
       }),
       onKeyDown: e => {
-        var _triggerProps$onKeyDo;
         if (!this.props.children) {
           if (e.key === 'Enter') {
             // @ts-expect-error TODO
             this.handleHideCalendar(e);
           }
         }
-        (_triggerProps$onKeyDo = triggerProps.onKeyDown) === null || _triggerProps$onKeyDo === void 0 ? void 0 : _triggerProps$onKeyDo.call(triggerProps, e);
+        triggerProps.onKeyDown?.(e);
       }
     });
   }
+  shouldShowCalendar = () => this.props.children ? this.props.isShowingCalendar : this.state.isShowingCalendar;
   render() {
-    const _this$props11 = this.props,
-      placement = _this$props11.placement,
-      assistiveText = _this$props11.assistiveText,
-      styles = _this$props11.styles;
+    const {
+      placement,
+      assistiveText,
+      styles
+    } = this.props;
     const isShowingCalendar = this.shouldShowCalendar();
     return (0, _jsxRuntime.jsx)(_Selectable.Selectable, {
       isShowingOptions: isShowingCalendar,
@@ -376,7 +393,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
         getDescriptionProps
       }) => (0, _jsxRuntime.jsxs)("span", {
         ...getRootProps({
-          css: styles === null || styles === void 0 ? void 0 : styles.dateInput
+          css: styles?.dateInput
         }),
         ref: el => {
           this.ref = el;
@@ -387,7 +404,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
           getTriggerProps
         }), (0, _jsxRuntime.jsx)("span", {
           ...getDescriptionProps(),
-          css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
+          css: styles?.assistiveText,
           children: assistiveText
         }), (0, _jsxRuntime.jsx)(_v11_2.Popover, {
           placement: placement,
@@ -403,16 +420,5 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_style
       })
     });
   }
-}, _DateInput.displayName = "DateInput", _DateInput.componentId = 'DateInput', _DateInput.Day = _v11_.Calendar.Day, _DateInput.allowedProps = _props2.allowedProps, _DateInput.defaultProps = {
-  value: '',
-  size: 'medium',
-  onBlur: () => {},
-  // must have a default so createChainedFunction works
-  isRequired: false,
-  isInline: false,
-  layout: 'stacked',
-  display: 'inline-block',
-  placement: 'bottom center',
-  isShowingCalendar: false
-}, _DateInput)) || _class);
+}) || _class);
 var _default = exports.default = DateInput;