@instructure/ui-date-time-input 10.16.1-snapshot-0 → 10.16.1-snapshot-1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 

package/es/DateTimeInput/__new-tests__/DateTimeInput.test.js

@@ -23,13 +23,13 @@ var _DateTimeInput, _DateTimeInput2, _DateTimeInput3;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { DateTimeInput } from '../index';
 import { ApplyLocale, DateTime } from '@instructure/ui-i18n';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<DateTimeInput />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -46,7 +46,7 @@ describe('<DateTimeInput />', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
     const dateTime = DateTime.parse('2017-05-01T17:30Z', locale, timezone);
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       prevMonthLabel: "Previous month",
       nextMonthLabel: "Next month",
@@ -67,7 +67,7 @@ describe('<DateTimeInput />', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
     const dateTime = DateTime.parse('2017-05-01T23:30Z', locale, timezone);
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       prevMonthLabel: "Previous month",
       nextMonthLabel: "Next month",
@@ -90,7 +90,7 @@ describe('<DateTimeInput />', () => {
     const value = DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const defaultValue = DateTime.parse('2016-04-01T17:00Z', locale, timezone);
     const onChange = vi.fn();
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       prevMonthLabel: "Previous month",
       nextMonthLabel: "Next month",
@@ -113,7 +113,7 @@ describe('<DateTimeInput />', () => {
     const timezone = 'US/Eastern';
     const dateObj = DateTime.parse('2017-04-01T18:30Z', locale, timezone);
     const date = dateObj.toISOString().split('T')[0];
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       dateRenderLabel: "date-input",
       prevMonthLabel: "Previous month",
@@ -131,7 +131,7 @@ describe('<DateTimeInput />', () => {
   });
   it('should call invalidDateTimeMessage if time is set w/o a date and is required', async () => {
     const invalidDateTimeMessage = vi.fn(_rawd => 'whoops');
-    const _render = render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    const _render = render(_jsx(DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",
@@ -153,7 +153,7 @@ describe('<DateTimeInput />', () => {
   });
   it('should not call invalidDateTimeMessage if time is set w/o a date', async () => {
     const invalidDateTimeMessage = vi.fn(_rawd => 'whoops');
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       dateRenderLabel: "date-input",
       prevMonthLabel: "Previous month",
@@ -176,7 +176,7 @@ describe('<DateTimeInput />', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
     const defaultValue = DateTime.parse('2017-05-01T17:00', locale, timezone);
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       dateRenderLabel: "date-input",
       prevMonthLabel: "Previous month",
@@ -205,7 +205,7 @@ describe('<DateTimeInput />', () => {
     });
   });
   it('should show correct message when TimeInput value changes', () => {
-    const _render2 = render(_DateTimeInput || (_DateTimeInput = /*#__PURE__*/React.createElement(DateTimeInput, {
+    const _render2 = render(_DateTimeInput || (_DateTimeInput = _jsx(DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",
@@ -234,7 +234,7 @@ describe('<DateTimeInput />', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
     const defaultValue = DateTime.parse('2017-05-01T17:30Z', locale, timezone);
-    const _render3 = render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    const _render3 = render(_jsx(DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",
@@ -252,7 +252,7 @@ describe('<DateTimeInput />', () => {
     const timezone = 'US/Eastern';
     const locale = 'fr';
     const defaultValue = DateTime.parse('2017-05-01T17:30Z', locale, timezone);
-    const _render4 = render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    const _render4 = render(_jsx(DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",
@@ -269,7 +269,7 @@ describe('<DateTimeInput />', () => {
   it('should provide the html elements for date and time input', () => {
     let dref;
     let tref;
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       dateRenderLabel: "date-input",
       prevMonthLabel: "Previous month",
@@ -307,13 +307,16 @@ describe('<DateTimeInput />', () => {
       value: dateTime.toISOString(),
       onChange
     };
-    const _render5 = render(/*#__PURE__*/React.createElement(DateTimeInput, props)),
+    const _render5 = render(_jsx(DateTimeInput, {
+        ...props
+      })),
       container = _render5.container,
       rerender = _render5.rerender;
     expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       value: "2018-03-29T16:30Z"
-    })));
+    }));
     expect(container).toHaveTextContent('March 29, 2018 12:30 PM');
   });
   it('should update message when locale changed', () => {
@@ -333,13 +336,16 @@ describe('<DateTimeInput />', () => {
       onChange,
       value: dateTime.toISOString()
     };
-    const _render6 = render(/*#__PURE__*/React.createElement(DateTimeInput, props)),
+    const _render6 = render(_jsx(DateTimeInput, {
+        ...props
+      })),
       container = _render6.container,
       rerender = _render6.rerender;
     expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       locale: "fr"
-    })));
+    }));
     expect(container).toHaveTextContent('1 mai 2017 13:30');
   });
   it('should update message when timezone changed', () => {
@@ -359,17 +365,20 @@ describe('<DateTimeInput />', () => {
       onChange,
       value: dateTime.toISOString()
     };
-    const _render7 = render(/*#__PURE__*/React.createElement(DateTimeInput, props)),
+    const _render7 = render(_jsx(DateTimeInput, {
+        ...props
+      })),
       container = _render7.container,
       rerender = _render7.rerender;
     expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       timezone: "Europe/Paris"
-    })));
+    }));
     expect(container).toHaveTextContent('May 1, 2017 7:30 PM');
   });
   it('should show error message if initial value is invalid', async () => {
-    const _render8 = render(_DateTimeInput2 || (_DateTimeInput2 = /*#__PURE__*/React.createElement(DateTimeInput, {
+    const _render8 = render(_DateTimeInput2 || (_DateTimeInput2 = _jsx(DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",
@@ -386,7 +395,7 @@ describe('<DateTimeInput />', () => {
     });
   });
   it('should show error message if initial defaultValue is invalid', async () => {
-    const _render9 = render(_DateTimeInput3 || (_DateTimeInput3 = /*#__PURE__*/React.createElement(DateTimeInput, {
+    const _render9 = render(_DateTimeInput3 || (_DateTimeInput3 = _jsx(DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",
@@ -417,13 +426,16 @@ describe('<DateTimeInput />', () => {
       timezone,
       value: dateTime.toISOString()
     };
-    const _render10 = render(/*#__PURE__*/React.createElement(DateTimeInput, props)),
+    const _render10 = render(_jsx(DateTimeInput, {
+        ...props
+      })),
       container = _render10.container,
       rerender = _render10.rerender;
     expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       value: "A very invalid date"
-    })));
+    }));
     const dateInput = screen.getByLabelText('date-input');
     fireEvent.blur(dateInput);
     await waitFor(() => {
@@ -445,16 +457,19 @@ describe('<DateTimeInput />', () => {
       timezone,
       value: dateTime.toISOString()
     };
-    const _render11 = render(/*#__PURE__*/React.createElement(DateTimeInput, props)),
+    const _render11 = render(_jsx(DateTimeInput, {
+        ...props
+      })),
       container = _render11.container,
       rerender = _render11.rerender;
     expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       messages: [{
         text: 'message_text',
         type: 'success'
       }]
-    })));
+    }));
     const dateInput = screen.getByLabelText('date-input');
     fireEvent.blur(dateInput);
     await waitFor(() => {
@@ -477,32 +492,35 @@ describe('<DateTimeInput />', () => {
       timezone,
       value: dateTime.toISOString()
     };
-    const _render12 = render(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    const _render12 = render(_jsx(DateTimeInput, {
+        ...props,
         showMessages: false
-      }))),
+      })),
       container = _render12.container,
       rerender = _render12.rerender;
     expect(container).not.toHaveTextContent('2017');
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       showMessages: false,
       messages: [{
         text: 'message_text',
         type: 'success'
       }]
-    })));
+    }));
     const dateInput = screen.getByLabelText('date-input');
     fireEvent.blur(dateInput);
     await waitFor(() => {
       expect(container).not.toHaveTextContent('2017');
       expect(container).toHaveTextContent('message_text');
     });
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       messages: [{
         text: 'message_text',
         type: 'success'
       }],
       showMessages: true
-    })));
+    }));
     fireEvent.blur(screen.getByLabelText('date-input'));
     await waitFor(() => {
       expect(container).toHaveTextContent('2017');
@@ -513,21 +531,21 @@ describe('<DateTimeInput />', () => {
     const onChange = vi.fn();
     const dateTime = DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
     const _render13 = render(
-      /*#__PURE__*/
       // Africa/Nairobi is GMT +3
-      React.createElement(ApplyLocale, {
+      _jsx(ApplyLocale, {
         locale: "fr",
-        timezone: "Africa/Nairobi"
-      }, /*#__PURE__*/React.createElement(DateTimeInput, {
-        description: "date_time",
-        dateRenderLabel: "date-input",
-        prevMonthLabel: "Previous month",
-        nextMonthLabel: "Next month",
-        timeRenderLabel: "time-input",
-        invalidDateTimeMessage: "whoops",
-        value: dateTime.toISOString(),
-        onChange: onChange
-      }))),
+        timezone: "Africa/Nairobi",
+        children: _jsx(DateTimeInput, {
+          description: "date_time",
+          dateRenderLabel: "date-input",
+          prevMonthLabel: "Previous month",
+          nextMonthLabel: "Next month",
+          timeRenderLabel: "time-input",
+          invalidDateTimeMessage: "whoops",
+          value: dateTime.toISOString(),
+          onChange: onChange
+        })
+      })),
       container = _render13.container;
     expect(container).toHaveTextContent('lundi 1 mai 2017 20:30');
   });
@@ -544,15 +562,17 @@ describe('<DateTimeInput />', () => {
       value: dateTime.toISOString(),
       onChange
     };
-    const _render14 = render(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    const _render14 = render(_jsx(DateTimeInput, {
+        ...props,
         dateFormat: "l" // localized numeric date like 9/4/2017
-      }))),
+      })),
       rerender = _render14.rerender;
     const dateInput = screen.getByLabelText('date-input');
     expect(dateInput).toHaveValue('5/1/2017');
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       dateFormat: "yyyy MMMM"
-    })));
+    }));
     fireEvent.blur(screen.getByLabelText('date-input'));
     await waitFor(() => {
       expect(dateInput).toHaveValue('2017 May');
@@ -573,13 +593,16 @@ describe('<DateTimeInput />', () => {
       locale: 'en-US',
       timezone: 'US/Eastern'
     };
-    const _render15 = render(/*#__PURE__*/React.createElement(DateTimeInput, props)),
+    const _render15 = render(_jsx(DateTimeInput, {
+        ...props
+      })),
       container = _render15.container,
       rerender = _render15.rerender;
     expect(container).toHaveTextContent('Monday, May 1, 2017 1:30 PM');
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       messageFormat: "l, LT"
-    })));
+    }));
     fireEvent.blur(screen.getByLabelText('date-input'));
     await waitFor(() => {
       expect(container).toHaveTextContent('5/1/2017, 1:30 PM');
@@ -600,15 +623,18 @@ describe('<DateTimeInput />', () => {
       timezone,
       value: dateTime.toISOString()
     };
-    const _render16 = render(/*#__PURE__*/React.createElement(DateTimeInput, props)),
+    const _render16 = render(_jsx(DateTimeInput, {
+        ...props
+      })),
       container = _render16.container,
       rerender = _render16.rerender;
     expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
     const newDateStr = '2022-03-29T19:00Z';
     const newDateTime = DateTime.parse(newDateStr, locale, timezone);
-    rerender(/*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+    rerender(_jsx(DateTimeInput, {
+      ...props,
       value: newDateStr
-    })));
+    }));
     const dateInput = screen.getByLabelText('date-input');
     const timeInput = screen.getByLabelText('time-input');
     fireEvent.blur(dateInput);
@@ -619,7 +645,7 @@ describe('<DateTimeInput />', () => {
   });
   it("should throw warning if initialTimeForNewDate prop's value is not HH:MM", async () => {
     const initialTimeForNewDate = 'WRONG_FORMAT';
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       dateRenderLabel: "date-input",
       prevMonthLabel: "Previous month",
@@ -634,7 +660,7 @@ describe('<DateTimeInput />', () => {
   });
   it("should throw warning if date select and initialTimeForNewDate prop's value is not HH:MM", async () => {
     const initialTimeForNewDate = 'WRONG_FORMAT';
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       dateRenderLabel: "date-input",
       prevMonthLabel: "Previous month",
@@ -662,7 +688,7 @@ describe('<DateTimeInput />', () => {
   });
   it('should throw warning if initialTimeForNewDate prop hour and minute values are not in interval', async () => {
     const initialTimeForNewDate = '99:99';
-    render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    render(_jsx(DateTimeInput, {
       description: "date_time",
       dateRenderLabel: "date-input",
       prevMonthLabel: "Previous month",
@@ -693,7 +719,7 @@ describe('<DateTimeInput />', () => {
     const timezone = 'US/Eastern';
     const initialTimeForNewDate = '16:16';
     const defaultValue = '2018-01-18T13:30';
-    const _render17 = render(/*#__PURE__*/React.createElement(DateTimeInput, {
+    const _render17 = render(_jsx(DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",

package/es/DateTimeInput/index.js

@@ -23,7 +23,7 @@ var _dec, _class, _DateTimeInput, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { DateInput } from '@instructure/ui-date-input';
@@ -41,6 +41,7 @@ import { error } from '@instructure/console';
 category: components
 ---
 **/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let DateTimeInput = (_dec = testable(), _dec(_class = (_DateTimeInput = class DateTimeInput extends Component {
   constructor(props) {
     super(props);
@@ -374,8 +375,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_DateTimeInput = class Da
     }
     return arr.map(date => {
       const dateStr = date.toISOString();
-      return /*#__PURE__*/React.createElement(DateInput.Day, {
-        key: dateStr,
+      return _jsx(DateInput.Day, {
         date: dateStr,
         isSelected: this.state.calendarSelectedDate ? date.isSame(this.state.calendarSelectedDate, 'day') : false,
         isToday: date.isSame(DateTime.now(this.locale(), this.timezone()), 'day'),
@@ -383,8 +383,9 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_DateTimeInput = class Da
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
         onClick: this.handleDayClick,
-        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
-      }, date.format('DD'));
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled',
+        children: date.format('DD')
+      }, dateStr);
     });
   }
 
@@ -396,40 +397,40 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_DateTimeInput = class Da
     }
     const shortDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
     const longDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
-    return [/*#__PURE__*/React.createElement(AccessibleContent, {
-      key: 1,
-      alt: longDayNames[0]
-    }, shortDayNames[0]), /*#__PURE__*/React.createElement(AccessibleContent, {
-      key: 2,
-      alt: longDayNames[1]
-    }, shortDayNames[1]), /*#__PURE__*/React.createElement(AccessibleContent, {
-      key: 3,
-      alt: longDayNames[2]
-    }, shortDayNames[2]), /*#__PURE__*/React.createElement(AccessibleContent, {
-      key: 4,
-      alt: longDayNames[3]
-    }, shortDayNames[3]), /*#__PURE__*/React.createElement(AccessibleContent, {
-      key: 5,
-      alt: longDayNames[4]
-    }, shortDayNames[4]), /*#__PURE__*/React.createElement(AccessibleContent, {
-      key: 6,
-      alt: longDayNames[5]
-    }, shortDayNames[5]), /*#__PURE__*/React.createElement(AccessibleContent, {
-      key: 7,
-      alt: longDayNames[6]
-    }, shortDayNames[6])];
+    return [_jsx(AccessibleContent, {
+      alt: longDayNames[0],
+      children: shortDayNames[0]
+    }, 1), _jsx(AccessibleContent, {
+      alt: longDayNames[1],
+      children: shortDayNames[1]
+    }, 2), _jsx(AccessibleContent, {
+      alt: longDayNames[2],
+      children: shortDayNames[2]
+    }, 3), _jsx(AccessibleContent, {
+      alt: longDayNames[3],
+      children: shortDayNames[3]
+    }, 4), _jsx(AccessibleContent, {
+      alt: longDayNames[4],
+      children: shortDayNames[4]
+    }, 5), _jsx(AccessibleContent, {
+      alt: longDayNames[5],
+      children: shortDayNames[5]
+    }, 6), _jsx(AccessibleContent, {
+      alt: longDayNames[6],
+      children: shortDayNames[6]
+    }, 7)];
   }
   renderNextPrevMonthButton(type) {
     if (!this.state.isShowingCalendar) {
       return;
     }
-    return /*#__PURE__*/React.createElement(IconButton, {
+    return _jsx(IconButton, {
       size: "small",
       withBackground: false,
       withBorder: false,
-      renderIcon: type === 'prev' ? _IconArrowOpenStartSo || (_IconArrowOpenStartSo = /*#__PURE__*/React.createElement(IconArrowOpenStartSolid, {
+      renderIcon: type === 'prev' ? _IconArrowOpenStartSo || (_IconArrowOpenStartSo = _jsx(IconArrowOpenStartSolid, {
         color: "primary"
-      })) : _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = /*#__PURE__*/React.createElement(IconArrowOpenEndSolid, {
+      })) : _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = _jsx(IconArrowOpenEndSolid, {
         color: "primary"
       })),
       screenReaderLabel: type === 'prev' ? this.props.prevMonthLabel : this.props.nextMonthLabel
@@ -464,7 +465,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_DateTimeInput = class Da
       type: 'newError',
       text: ''
     }] : [];
-    return /*#__PURE__*/React.createElement(FormFieldGroup, {
+    return _jsxs(FormFieldGroup, {
       description: description,
       layout: layout,
       rowSpacing: rowSpacing,
@@ -472,45 +473,53 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_DateTimeInput = class Da
       vAlign: "top",
       elementRef: this.handleRef,
       isGroup: false,
-      messages: [...(showMessages && this.state.message ? [this.state.message] : []), ...(messages || [])]
-    }, /*#__PURE__*/React.createElement(DateInput, {
-      display: "block",
-      value: this.state.dateInputText,
-      onChange: this.handleDateTextChange,
-      onBlur: this.handleBlur,
-      inputRef: dateInputRef,
-      placeholder: datePlaceholder,
-      renderLabel: dateRenderLabel,
-      renderWeekdayLabels: renderWeekdayLabels ? renderWeekdayLabels : this.defaultWeekdays,
-      onRequestShowCalendar: this.handleShowCalendar,
-      onRequestHideCalendar: this.handleHideCalendar,
-      isShowingCalendar: this.state.isShowingCalendar,
-      renderNextMonthButton: this.renderNextPrevMonthButton('next'),
-      renderPrevMonthButton: this.renderNextPrevMonthButton('prev'),
-      onRequestSelectNextDay: this.handleSelectNextDay,
-      onRequestSelectPrevDay: this.handleSelectPrevDay,
-      onRequestRenderNextMonth: this.handleRenderNextMonth,
-      onRequestRenderPrevMonth: this.handleRenderPrevMonth,
-      isRequired: isRequired,
-      messages: subComponentMessages,
-      interaction: interaction,
-      renderNavigationLabel: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, this.state.renderedDate.format('MMMM')), /*#__PURE__*/React.createElement("div", null, this.state.renderedDate.format('y')))
-    }, this.renderDays()), /*#__PURE__*/React.createElement(TimeSelect, {
-      value: this.state.timeSelectValue,
-      onChange: this.updateStateBasedOnTimeSelect,
-      placeholder: timePlaceholder,
-      onBlur: this.handleBlur,
-      renderLabel: timeRenderLabel,
-      locale: locale,
-      format: timeFormat,
-      step: timeStep,
-      timezone: timezone,
-      inputRef: timeInputRef,
-      interaction: interaction,
-      allowNonStepInput: allowNonStepInput,
-      isRequired: isRequired,
-      messages: subComponentMessages
-    }));
+      messages: [...(showMessages && this.state.message ? [this.state.message] : []), ...(messages || [])],
+      children: [_jsx(DateInput, {
+        display: "block",
+        value: this.state.dateInputText,
+        onChange: this.handleDateTextChange,
+        onBlur: this.handleBlur,
+        inputRef: dateInputRef,
+        placeholder: datePlaceholder,
+        renderLabel: dateRenderLabel,
+        renderWeekdayLabels: renderWeekdayLabels ? renderWeekdayLabels : this.defaultWeekdays,
+        onRequestShowCalendar: this.handleShowCalendar,
+        onRequestHideCalendar: this.handleHideCalendar,
+        isShowingCalendar: this.state.isShowingCalendar,
+        renderNextMonthButton: this.renderNextPrevMonthButton('next'),
+        renderPrevMonthButton: this.renderNextPrevMonthButton('prev'),
+        onRequestSelectNextDay: this.handleSelectNextDay,
+        onRequestSelectPrevDay: this.handleSelectPrevDay,
+        onRequestRenderNextMonth: this.handleRenderNextMonth,
+        onRequestRenderPrevMonth: this.handleRenderPrevMonth,
+        isRequired: isRequired,
+        messages: subComponentMessages,
+        interaction: interaction,
+        renderNavigationLabel: _jsxs("span", {
+          children: [_jsx("div", {
+            children: this.state.renderedDate.format('MMMM')
+          }), _jsx("div", {
+            children: this.state.renderedDate.format('y')
+          })]
+        }),
+        children: this.renderDays()
+      }), _jsx(TimeSelect, {
+        value: this.state.timeSelectValue,
+        onChange: this.updateStateBasedOnTimeSelect,
+        placeholder: timePlaceholder,
+        onBlur: this.handleBlur,
+        renderLabel: timeRenderLabel,
+        locale: locale,
+        format: timeFormat,
+        step: timeStep,
+        timezone: timezone,
+        inputRef: timeInputRef,
+        interaction: interaction,
+        allowNonStepInput: allowNonStepInput,
+        isRequired: isRequired,
+        messages: subComponentMessages
+      })]
+    });
   }
 }, _DateTimeInput.displayName = "DateTimeInput", _DateTimeInput.DEFAULT_MESSAGE_FORMAT = 'LLLL', _DateTimeInput.propTypes = propTypes, _DateTimeInput.allowedProps = allowedProps, _DateTimeInput.defaultProps = {
   layout: 'inline',