@instructure/ui-date-time-input 8.52.1-snapshot-7 → 8.53.0

package/CHANGELOG.md

@@ -3,183 +3,98 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.52.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.52.1-snapshot-7) (2024-02-07)
-
+# [8.53.0](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.53.0) (2024-02-08)
 
 ### Features
 
-* **ui-date-time-input:** add placeholder to datetimeinput's timeselect ([3ec8cc3](https://github.com/instructure/instructure-ui/commit/3ec8cc31f06ee570b704f88b09739a0868da9ff7))
-
-
-
-
+- **many:** provide defaults to dateInput for easier setup and use ([dcefc4e](https://github.com/instructure/instructure-ui/commit/dcefc4e259118264d76dfd248b01682a7c2ef661))
+- **ui-date-time-input:** add initialTimeForNewDate prop to datetimeinput ([33711a3](https://github.com/instructure/instructure-ui/commit/33711a3d899c34913aafd40c7dec90faabc88cd0))
+- **ui-date-time-input:** add placeholder to datetimeinput's timeselect ([3ec8cc3](https://github.com/instructure/instructure-ui/commit/3ec8cc31f06ee570b704f88b09739a0868da9ff7))
 
 # [8.52.0](https://github.com/instructure/instructure-ui/compare/v8.51.0...v8.52.0) (2024-02-02)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.51.0](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.51.0) (2023-12-14)
 
-
 ### Features
 
-* **ui-date-time-input:** add showMessages prop ([5212a19](https://github.com/instructure/instructure-ui/commit/5212a192b56fed621c80a697579fc164f9592391))
-
-
-
-
+- **ui-date-time-input:** add showMessages prop ([5212a19](https://github.com/instructure/instructure-ui/commit/5212a192b56fed621c80a697579fc164f9592391))
 
 # [8.50.0](https://github.com/instructure/instructure-ui/compare/v8.49.0...v8.50.0) (2023-12-05)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.49.0](https://github.com/instructure/instructure-ui/compare/v8.48.3...v8.49.0) (2023-11-24)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 ## [8.48.3](https://github.com/instructure/instructure-ui/compare/v8.48.2...v8.48.3) (2023-11-23)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 ## [8.48.2](https://github.com/instructure/instructure-ui/compare/v8.48.1...v8.48.2) (2023-11-21)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 ## [8.48.1](https://github.com/instructure/instructure-ui/compare/v8.48.0...v8.48.1) (2023-11-17)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.48.0](https://github.com/instructure/instructure-ui/compare/v8.47.1...v8.48.0) (2023-11-10)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 ## [8.47.1](https://github.com/instructure/instructure-ui/compare/v8.47.0...v8.47.1) (2023-11-06)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.47.0](https://github.com/instructure/instructure-ui/compare/v8.46.1...v8.47.0) (2023-10-27)
 
-
 ### Bug Fixes
 
-* **ui-date-time-input:** clear TimeSelect value when DateInput value is cleared ([b1a58e5](https://github.com/instructure/instructure-ui/commit/b1a58e5c04822da491966bc0a79403b30749ff7e))
-
-
-
-
+- **ui-date-time-input:** clear TimeSelect value when DateInput value is cleared ([b1a58e5](https://github.com/instructure/instructure-ui/commit/b1a58e5c04822da491966bc0a79403b30749ff7e))
 
 ## [8.46.1](https://github.com/instructure/instructure-ui/compare/v8.46.0...v8.46.1) (2023-10-13)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.46.0](https://github.com/instructure/instructure-ui/compare/v8.45.0...v8.46.0) (2023-10-11)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.45.0](https://github.com/instructure/instructure-ui/compare/v8.44.0...v8.45.0) (2023-10-03)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.44.0](https://github.com/instructure/instructure-ui/compare/v8.43.1...v8.44.0) (2023-09-21)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 ## [8.43.1](https://github.com/instructure/instructure-ui/compare/v8.43.0...v8.43.1) (2023-09-11)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.43.0](https://github.com/instructure/instructure-ui/compare/v8.41.1...v8.43.0) (2023-09-07)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.42.0](https://github.com/instructure/instructure-ui/compare/v8.41.1...v8.42.0) (2023-09-07)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 ## [8.41.1](https://github.com/instructure/instructure-ui/compare/v8.41.0...v8.41.1) (2023-08-24)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.41.0](https://github.com/instructure/instructure-ui/compare/v8.40.1...v8.41.0) (2023-08-21)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 ## [8.40.1](https://github.com/instructure/instructure-ui/compare/v8.40.0...v8.40.1) (2023-08-18)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 
-
-
-
-
 # [8.40.0](https://github.com/instructure/instructure-ui/compare/v8.39.0...v8.40.0) (2023-08-17)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input

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

@@ -0,0 +1,167 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2018 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { userEvent } from '@testing-library/user-event';
+import DateTimeInput from '../index';
+describe('<DateTimeInput />', () => {
+  it("should change value of TimeSelect to initialTimeForNewDate prop's value", async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    render( /*#__PURE__*/React.createElement(DateTimeInput, {
+      description: "date time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date",
+      timeRenderLabel: "time",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      initialTimeForNewDate: "05:05"
+    }));
+    const input = screen.getAllByRole('combobox')[0];
+    fireEvent.click(input);
+    const firstDay = screen.getByText('15');
+    await userEvent.click(firstDay);
+    const allInputs = screen.getAllByRole('combobox');
+    const targetInput = allInputs.find(input => input.value === '5:05 AM');
+    expect(targetInput).toBeInTheDocument();
+  });
+  it("should throw warning if initialTimeForNewDate prop's value is not HH:MM", async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const initialTimeForNewDate = 'WRONG_FORMAT';
+    render( /*#__PURE__*/React.createElement(DateTimeInput, {
+      description: "date time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date",
+      timeRenderLabel: "time",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      initialTimeForNewDate: initialTimeForNewDate
+    }));
+    expect(consoleError.mock.calls[0][2]).toContain(`Invalid prop \`initialTimeForNewDate\` \`${initialTimeForNewDate}\` supplied to \`DateTimeInput\`, expected a HH:MM formatted string.`);
+    const input = screen.getAllByRole('combobox')[0];
+    fireEvent.click(input);
+    const firstDay = screen.getByText('15');
+    await userEvent.click(firstDay);
+    expect(consoleError.mock.calls[1][0]).toBe(`Warning: [DateTimeInput] initialTimeForNewDate prop is not in the correct format. Please use HH:MM format.`);
+  });
+  it('should throw warning if initialTimeForNewDate prop hour and minute values are not in interval', async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const initialTimeForNewDate = '99:99';
+    render( /*#__PURE__*/React.createElement(DateTimeInput, {
+      description: "date time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date",
+      timeRenderLabel: "time",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      initialTimeForNewDate: initialTimeForNewDate
+    }));
+    const input = screen.getAllByRole('combobox')[0];
+    fireEvent.click(input);
+    const firstDay = screen.getByText('15');
+    await userEvent.click(firstDay);
+    expect(consoleError.mock.calls[0][0]).toContain(`Warning: [DateTimeInput] 0 <= hour < 24 and 0 <= minute < 60 for initialTimeForNewDate prop.`);
+  });
+
+  /*
+   * TODO write this test with Cypress
+   * Steps:
+   * 0. Set initialTimeForNewDate and defaultValue props -> check if defaultValue is rendered in the date input and time input fields
+   * 1. Clear date input field
+   * 2. Click on an area outside of the component
+   * 3. Check if time input field got cleared as well
+   * 4. Click on the date input and select a date
+   * 5. Observe if the time input has the value of initialTimeForNewDate
+   */
+
+  // it('should merge defaultValue and initialTimeForNewDate when the user clears date input', async () => {
+  //   const locale = 'en-US'
+  //   const timezone = 'US/Eastern'
+  //
+  //   // const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {})
+  //
+  //   const initialTimeForNewDate = '16:16'
+  //   const defaultValue = '2018-01-18T13:30'
+  //
+  //   const {container} = render(
+  //     <DateTimeInput
+  //       description="date time"
+  //       prevMonthLabel="Previous month"
+  //       nextMonthLabel="Next month"
+  //       dateRenderLabel="date"
+  //       timeRenderLabel="time"
+  //       invalidDateTimeMessage="whoops"
+  //       defaultValue={defaultValue}
+  //       locale={locale}
+  //       timezone={timezone}
+  //       initialTimeForNewDate={initialTimeForNewDate}
+  //     />
+  //   )
+  //
+  //   const dateInput = container.querySelector('input')
+  //
+  //   const timeInput = container.querySelectorAll('input')[1]
+  //
+  //   fireEvent.change(dateInput as Element, { target: { value: '' } })
+  //
+  //
+  //   await waitFor(() => {
+  //   fireEvent.keyDown(dateInput as Element, { key: 'Escape' })
+  //
+  //   expect(timeInput).toHaveValue('')
+  //   })
+  //
+  //   // fireEvent.
+  //   // fireEvent.change(timeInput as Element, { target: { value: '' } })
+  //
+  //
+  //   const firstDay = screen.getByText('15')
+  //
+  //   await userEvent.click(firstDay)
+  //
+  //   const time = screen.getByText('4:16 PM')
+  //
+  //   expect(time).toBeInTheDocument()
+  //
+  //   // expect(consoleWarn.mock.calls[0][0]).toContain(
+  //   //   `Warning: [DateTimeInput] if defaultValue is set, initialTimeForNewDate will be ignored.`
+  //   // )
+  // })
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+});

package/es/DateTimeInput/index.js

@@ -34,6 +34,7 @@ import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
 import { propTypes, allowedProps } from './props';
+import { error } from '@instructure/console';
 
 /**
 ---
@@ -209,6 +210,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     if (dateStr) {
       const parsed = DateTime.parse(dateStr, this.locale(), this.timezone());
       if (parsed.isValid()) {
+        var _this$state;
         if (doNotChangeTime && this.state.timeSelectValue) {
           // There is a selected time, adjust the parsed date to its value
           const timeParsed = DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
@@ -217,6 +219,17 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         if (doNotChangeDate && this.state.iso) {
           parsed.date(this.state.iso.date()).month(this.state.iso.month()).year(this.state.iso.year());
         }
+        if (this.props.initialTimeForNewDate && !((_this$state = this.state) !== null && _this$state !== void 0 && _this$state.timeSelectValue)) {
+          const hour = Number(this.props.initialTimeForNewDate.slice(0, 2));
+          const minute = Number(this.props.initialTimeForNewDate.slice(3, 5));
+          if (isNaN(hour) || isNaN(minute)) {
+            error(false, `[DateTimeInput] initialTimeForNewDate prop is not in the correct format. Please use HH:MM format.`);
+          } else if (hour < 0 || hour > 23 || minute > 59 || minute < 0) {
+            error(false, `[DateTimeInput] 0 <= hour < 24 and 0 <= minute < 60 for initialTimeForNewDate prop.`);
+          } else {
+            parsed.hour(hour).minute(minute);
+          }
+        }
         const newTimeSelectValue = parsed.toISOString();
         if (this.isDisabledDate(parsed)) {
           let text = typeof this.props.disabledDateTimeMessage === 'function' ? this.props.disabledDateTimeMessage(parsed.toISOString(true)) : this.props.disabledDateTimeMessage;
@@ -322,10 +335,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     this.changeStateIfNeeded(newState, event);
   }
   renderDays() {
-    if (!this.state.isShowingCalendar) {
-      // this is an expensive function, only execute if the calendar is open
-      return;
-    }
     const renderedDate = this.state.renderedDate;
     // Sets it to the first local day of the week counting back from the start of the month.
     // Note that first day depends on the locale, e.g. it's Sunday in the US and

package/es/DateTimeInput/props.js

@@ -26,6 +26,15 @@ import { FormPropTypes } from '@instructure/ui-form-field';
 import { I18nPropTypes } from '@instructure/ui-i18n';
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
+const hourMinuteValidator = function (props, propName, componentName, location) {
+  const propValue = props[propName];
+  if (typeof propValue === 'undefined' || propValue === '') return null;
+  const hourMinuteRegex = /^\d{2}:\d{2}$/;
+  if (typeof propValue === 'string' && !propValue.match(hourMinuteRegex)) {
+    return new Error(`Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` + `a HH:MM formatted string.`);
+  }
+  return null;
+};
 const propTypes = {
   description: PropTypes.node.isRequired,
   dateRenderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
@@ -57,7 +66,8 @@ const propTypes = {
   onBlur: PropTypes.func,
   disabledDates: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.string)]),
   disabledDateTimeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  allowNonStepInput: PropTypes.bool
+  allowNonStepInput: PropTypes.bool,
+  initialTimeForNewDate: hourMinuteValidator
 };
 const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'timePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput'];
 export { propTypes, allowedProps };

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

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _userEvent = require("@testing-library/user-event");
+var _index = _interopRequireDefault(require("../index"));
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2018 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+describe('<DateTimeInput />', () => {
+  it("should change value of TimeSelect to initialTimeForNewDate prop's value", async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+      description: "date time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date",
+      timeRenderLabel: "time",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      initialTimeForNewDate: "05:05"
+    }));
+    const input = _react2.screen.getAllByRole('combobox')[0];
+    _react2.fireEvent.click(input);
+    const firstDay = _react2.screen.getByText('15');
+    await _userEvent.userEvent.click(firstDay);
+    const allInputs = _react2.screen.getAllByRole('combobox');
+    const targetInput = allInputs.find(input => input.value === '5:05 AM');
+    expect(targetInput).toBeInTheDocument();
+  });
+  it("should throw warning if initialTimeForNewDate prop's value is not HH:MM", async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const initialTimeForNewDate = 'WRONG_FORMAT';
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+      description: "date time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date",
+      timeRenderLabel: "time",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      initialTimeForNewDate: initialTimeForNewDate
+    }));
+    expect(consoleError.mock.calls[0][2]).toContain(`Invalid prop \`initialTimeForNewDate\` \`${initialTimeForNewDate}\` supplied to \`DateTimeInput\`, expected a HH:MM formatted string.`);
+    const input = _react2.screen.getAllByRole('combobox')[0];
+    _react2.fireEvent.click(input);
+    const firstDay = _react2.screen.getByText('15');
+    await _userEvent.userEvent.click(firstDay);
+    expect(consoleError.mock.calls[1][0]).toBe(`Warning: [DateTimeInput] initialTimeForNewDate prop is not in the correct format. Please use HH:MM format.`);
+  });
+  it('should throw warning if initialTimeForNewDate prop hour and minute values are not in interval', async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const initialTimeForNewDate = '99:99';
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+      description: "date time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date",
+      timeRenderLabel: "time",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      initialTimeForNewDate: initialTimeForNewDate
+    }));
+    const input = _react2.screen.getAllByRole('combobox')[0];
+    _react2.fireEvent.click(input);
+    const firstDay = _react2.screen.getByText('15');
+    await _userEvent.userEvent.click(firstDay);
+    expect(consoleError.mock.calls[0][0]).toContain(`Warning: [DateTimeInput] 0 <= hour < 24 and 0 <= minute < 60 for initialTimeForNewDate prop.`);
+  });
+
+  /*
+   * TODO write this test with Cypress
+   * Steps:
+   * 0. Set initialTimeForNewDate and defaultValue props -> check if defaultValue is rendered in the date input and time input fields
+   * 1. Clear date input field
+   * 2. Click on an area outside of the component
+   * 3. Check if time input field got cleared as well
+   * 4. Click on the date input and select a date
+   * 5. Observe if the time input has the value of initialTimeForNewDate
+   */
+
+  // it('should merge defaultValue and initialTimeForNewDate when the user clears date input', async () => {
+  //   const locale = 'en-US'
+  //   const timezone = 'US/Eastern'
+  //
+  //   // const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {})
+  //
+  //   const initialTimeForNewDate = '16:16'
+  //   const defaultValue = '2018-01-18T13:30'
+  //
+  //   const {container} = render(
+  //     <DateTimeInput
+  //       description="date time"
+  //       prevMonthLabel="Previous month"
+  //       nextMonthLabel="Next month"
+  //       dateRenderLabel="date"
+  //       timeRenderLabel="time"
+  //       invalidDateTimeMessage="whoops"
+  //       defaultValue={defaultValue}
+  //       locale={locale}
+  //       timezone={timezone}
+  //       initialTimeForNewDate={initialTimeForNewDate}
+  //     />
+  //   )
+  //
+  //   const dateInput = container.querySelector('input')
+  //
+  //   const timeInput = container.querySelectorAll('input')[1]
+  //
+  //   fireEvent.change(dateInput as Element, { target: { value: '' } })
+  //
+  //
+  //   await waitFor(() => {
+  //   fireEvent.keyDown(dateInput as Element, { key: 'Escape' })
+  //
+  //   expect(timeInput).toHaveValue('')
+  //   })
+  //
+  //   // fireEvent.
+  //   // fireEvent.change(timeInput as Element, { target: { value: '' } })
+  //
+  //
+  //   const firstDay = screen.getByText('15')
+  //
+  //   await userEvent.click(firstDay)
+  //
+  //   const time = screen.getByText('4:16 PM')
+  //
+  //   expect(time).toBeInTheDocument()
+  //
+  //   // expect(consoleWarn.mock.calls[0][0]).toContain(
+  //   //   `Warning: [DateTimeInput] if defaultValue is set, initialTimeForNewDate will be ignored.`
+  //   // )
+  // })
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+});

package/lib/DateTimeInput/index.js

@@ -19,6 +19,7 @@ var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
 var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
 var _props = require("./props");
+var _console = require("@instructure/console");
 var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 /*
  * The MIT License (MIT)
@@ -217,6 +218,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
     if (dateStr) {
       const parsed = _DateTime.DateTime.parse(dateStr, this.locale(), this.timezone());
       if (parsed.isValid()) {
+        var _this$state;
         if (doNotChangeTime && this.state.timeSelectValue) {
           // There is a selected time, adjust the parsed date to its value
           const timeParsed = _DateTime.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
@@ -225,6 +227,17 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
         if (doNotChangeDate && this.state.iso) {
           parsed.date(this.state.iso.date()).month(this.state.iso.month()).year(this.state.iso.year());
         }
+        if (this.props.initialTimeForNewDate && !((_this$state = this.state) !== null && _this$state !== void 0 && _this$state.timeSelectValue)) {
+          const hour = Number(this.props.initialTimeForNewDate.slice(0, 2));
+          const minute = Number(this.props.initialTimeForNewDate.slice(3, 5));
+          if (isNaN(hour) || isNaN(minute)) {
+            (0, _console.error)(false, `[DateTimeInput] initialTimeForNewDate prop is not in the correct format. Please use HH:MM format.`);
+          } else if (hour < 0 || hour > 23 || minute > 59 || minute < 0) {
+            (0, _console.error)(false, `[DateTimeInput] 0 <= hour < 24 and 0 <= minute < 60 for initialTimeForNewDate prop.`);
+          } else {
+            parsed.hour(hour).minute(minute);
+          }
+        }
         const newTimeSelectValue = parsed.toISOString();
         if (this.isDisabledDate(parsed)) {
           let text = typeof this.props.disabledDateTimeMessage === 'function' ? this.props.disabledDateTimeMessage(parsed.toISOString(true)) : this.props.disabledDateTimeMessage;
@@ -330,10 +343,6 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
     this.changeStateIfNeeded(newState, event);
   }
   renderDays() {
-    if (!this.state.isShowingCalendar) {
-      // this is an expensive function, only execute if the calendar is open
-      return;
-    }
     const renderedDate = this.state.renderedDate;
     // Sets it to the first local day of the week counting back from the start of the month.
     // Note that first day depends on the locale, e.g. it's Sunday in the US and

package/lib/DateTimeInput/props.js

@@ -33,6 +33,15 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * SOFTWARE.
  */
 
+const hourMinuteValidator = function (props, propName, componentName, location) {
+  const propValue = props[propName];
+  if (typeof propValue === 'undefined' || propValue === '') return null;
+  const hourMinuteRegex = /^\d{2}:\d{2}$/;
+  if (typeof propValue === 'string' && !propValue.match(hourMinuteRegex)) {
+    return new Error(`Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` + `a HH:MM formatted string.`);
+  }
+  return null;
+};
 const propTypes = exports.propTypes = {
   description: _propTypes.default.node.isRequired,
   dateRenderLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
@@ -64,6 +73,7 @@ const propTypes = exports.propTypes = {
   onBlur: _propTypes.default.func,
   disabledDates: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.arrayOf(_propTypes.default.string)]),
   disabledDateTimeMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  allowNonStepInput: _propTypes.default.bool
+  allowNonStepInput: _propTypes.default.bool,
+  initialTimeForNewDate: hourMinuteValidator
 };
 const allowedProps = exports.allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'timePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput'];