@instructure/ui-date-time-input 8.53.3-snapshot-23 → 8.54.0

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.3-snapshot-23](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-23) (2024-03-20)
+# [8.54.0](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.54.0) (2024-03-21)
 
-**Note:** Version bump only for package @instructure/ui-date-time-input
+
+### Features
+
+* **ui-date-time-input:** make resetting programatically possible ([a474dab](https://github.com/instructure/instructure-ui/commit/a474daba920a16b6704f89e3c825902902ed1c0b))
 
 
 

package/es/DateTimeInput/index.js

@@ -51,6 +51,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     this.handleRef = el => {
       this.ref = el;
     };
+    this.reset = () => this.setState(this.recalculateState());
     // Called when the user enters text into dateInput
     this.handleDateTextChange = (_event, date) => {
       const dateParsed = this.tryParseDate(date.value);
@@ -189,10 +190,12 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     this.state = this.recalculateState(props.value || props.defaultValue);
   }
   componentDidMount() {
+    var _this$props$reset, _this$props3;
     // we'll need to recalculate the state because the context value is
     // set at this point (and it might change locale & timezone)
     const initState = this.recalculateState(this.props.value || this.props.defaultValue);
     this.setState(initState);
+    (_this$props$reset = (_this$props3 = this.props).reset) === null || _this$props$reset === void 0 ? void 0 : _this$props$reset.call(_this$props3, this.reset);
   }
   componentDidUpdate(prevProps) {
     const valueChanged = prevProps.value !== this.props.value || prevProps.defaultValue !== this.props.defaultValue;
@@ -411,27 +414,27 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     });
   }
   render() {
-    const _this$props3 = this.props,
-      description = _this$props3.description,
-      datePlaceholder = _this$props3.datePlaceholder,
-      timePlaceholder = _this$props3.timePlaceholder,
-      dateRenderLabel = _this$props3.dateRenderLabel,
-      dateInputRef = _this$props3.dateInputRef,
-      timeRenderLabel = _this$props3.timeRenderLabel,
-      timeFormat = _this$props3.timeFormat,
-      timeStep = _this$props3.timeStep,
-      timeInputRef = _this$props3.timeInputRef,
-      locale = _this$props3.locale,
-      timezone = _this$props3.timezone,
-      showMessages = _this$props3.showMessages,
-      messages = _this$props3.messages,
-      layout = _this$props3.layout,
-      rowSpacing = _this$props3.rowSpacing,
-      colSpacing = _this$props3.colSpacing,
-      isRequired = _this$props3.isRequired,
-      interaction = _this$props3.interaction,
-      renderWeekdayLabels = _this$props3.renderWeekdayLabels,
-      allowNonStepInput = _this$props3.allowNonStepInput;
+    const _this$props4 = this.props,
+      description = _this$props4.description,
+      datePlaceholder = _this$props4.datePlaceholder,
+      timePlaceholder = _this$props4.timePlaceholder,
+      dateRenderLabel = _this$props4.dateRenderLabel,
+      dateInputRef = _this$props4.dateInputRef,
+      timeRenderLabel = _this$props4.timeRenderLabel,
+      timeFormat = _this$props4.timeFormat,
+      timeStep = _this$props4.timeStep,
+      timeInputRef = _this$props4.timeInputRef,
+      locale = _this$props4.locale,
+      timezone = _this$props4.timezone,
+      showMessages = _this$props4.showMessages,
+      messages = _this$props4.messages,
+      layout = _this$props4.layout,
+      rowSpacing = _this$props4.rowSpacing,
+      colSpacing = _this$props4.colSpacing,
+      isRequired = _this$props4.isRequired,
+      interaction = _this$props4.interaction,
+      renderWeekdayLabels = _this$props4.renderWeekdayLabels,
+      allowNonStepInput = _this$props4.allowNonStepInput;
     return /*#__PURE__*/React.createElement(FormFieldGroup, {
       description: description,
       layout: layout,

package/es/DateTimeInput/props.js

@@ -67,7 +67,8 @@ const propTypes = {
   disabledDates: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.string)]),
   disabledDateTimeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   allowNonStepInput: PropTypes.bool,
+  reset: PropTypes.func,
   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'];
+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', 'reset'];
 export { propTypes, allowedProps };

package/lib/DateTimeInput/index.js

@@ -59,6 +59,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
     this.handleRef = el => {
       this.ref = el;
     };
+    this.reset = () => this.setState(this.recalculateState());
     // Called when the user enters text into dateInput
     this.handleDateTextChange = (_event, date) => {
       const dateParsed = this.tryParseDate(date.value);
@@ -197,10 +198,12 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
     this.state = this.recalculateState(props.value || props.defaultValue);
   }
   componentDidMount() {
+    var _this$props$reset, _this$props3;
     // we'll need to recalculate the state because the context value is
     // set at this point (and it might change locale & timezone)
     const initState = this.recalculateState(this.props.value || this.props.defaultValue);
     this.setState(initState);
+    (_this$props$reset = (_this$props3 = this.props).reset) === null || _this$props$reset === void 0 ? void 0 : _this$props$reset.call(_this$props3, this.reset);
   }
   componentDidUpdate(prevProps) {
     const valueChanged = prevProps.value !== this.props.value || prevProps.defaultValue !== this.props.defaultValue;
@@ -419,27 +422,27 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
     });
   }
   render() {
-    const _this$props3 = this.props,
-      description = _this$props3.description,
-      datePlaceholder = _this$props3.datePlaceholder,
-      timePlaceholder = _this$props3.timePlaceholder,
-      dateRenderLabel = _this$props3.dateRenderLabel,
-      dateInputRef = _this$props3.dateInputRef,
-      timeRenderLabel = _this$props3.timeRenderLabel,
-      timeFormat = _this$props3.timeFormat,
-      timeStep = _this$props3.timeStep,
-      timeInputRef = _this$props3.timeInputRef,
-      locale = _this$props3.locale,
-      timezone = _this$props3.timezone,
-      showMessages = _this$props3.showMessages,
-      messages = _this$props3.messages,
-      layout = _this$props3.layout,
-      rowSpacing = _this$props3.rowSpacing,
-      colSpacing = _this$props3.colSpacing,
-      isRequired = _this$props3.isRequired,
-      interaction = _this$props3.interaction,
-      renderWeekdayLabels = _this$props3.renderWeekdayLabels,
-      allowNonStepInput = _this$props3.allowNonStepInput;
+    const _this$props4 = this.props,
+      description = _this$props4.description,
+      datePlaceholder = _this$props4.datePlaceholder,
+      timePlaceholder = _this$props4.timePlaceholder,
+      dateRenderLabel = _this$props4.dateRenderLabel,
+      dateInputRef = _this$props4.dateInputRef,
+      timeRenderLabel = _this$props4.timeRenderLabel,
+      timeFormat = _this$props4.timeFormat,
+      timeStep = _this$props4.timeStep,
+      timeInputRef = _this$props4.timeInputRef,
+      locale = _this$props4.locale,
+      timezone = _this$props4.timezone,
+      showMessages = _this$props4.showMessages,
+      messages = _this$props4.messages,
+      layout = _this$props4.layout,
+      rowSpacing = _this$props4.rowSpacing,
+      colSpacing = _this$props4.colSpacing,
+      isRequired = _this$props4.isRequired,
+      interaction = _this$props4.interaction,
+      renderWeekdayLabels = _this$props4.renderWeekdayLabels,
+      allowNonStepInput = _this$props4.allowNonStepInput;
     return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, {
       description: description,
       layout: layout,

package/lib/DateTimeInput/props.js

@@ -74,6 +74,7 @@ const propTypes = exports.propTypes = {
   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,
+  reset: _propTypes.default.func,
   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'];
+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', 'reset'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.53.3-snapshot-23",
+  "version": "8.54.0",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,30 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.3-snapshot-23",
-    "@instructure/ui-test-locator": "8.53.3-snapshot-23",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-23",
+    "@instructure/ui-babel-preset": "8.54.0",
+    "@instructure/ui-test-locator": "8.54.0",
+    "@instructure/ui-test-utils": "8.54.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.53.3-snapshot-23",
-    "@instructure/debounce": "8.53.3-snapshot-23",
-    "@instructure/emotion": "8.53.3-snapshot-23",
-    "@instructure/ui-a11y-content": "8.53.3-snapshot-23",
-    "@instructure/ui-buttons": "8.53.3-snapshot-23",
-    "@instructure/ui-calendar": "8.53.3-snapshot-23",
-    "@instructure/ui-date-input": "8.53.3-snapshot-23",
-    "@instructure/ui-form-field": "8.53.3-snapshot-23",
-    "@instructure/ui-i18n": "8.53.3-snapshot-23",
-    "@instructure/ui-icons": "8.53.3-snapshot-23",
-    "@instructure/ui-prop-types": "8.53.3-snapshot-23",
-    "@instructure/ui-react-utils": "8.53.3-snapshot-23",
-    "@instructure/ui-testable": "8.53.3-snapshot-23",
-    "@instructure/ui-time-select": "8.53.3-snapshot-23",
-    "@instructure/ui-utils": "8.53.3-snapshot-23",
+    "@instructure/console": "8.54.0",
+    "@instructure/debounce": "8.54.0",
+    "@instructure/emotion": "8.54.0",
+    "@instructure/ui-a11y-content": "8.54.0",
+    "@instructure/ui-buttons": "8.54.0",
+    "@instructure/ui-calendar": "8.54.0",
+    "@instructure/ui-date-input": "8.54.0",
+    "@instructure/ui-form-field": "8.54.0",
+    "@instructure/ui-i18n": "8.54.0",
+    "@instructure/ui-icons": "8.54.0",
+    "@instructure/ui-prop-types": "8.54.0",
+    "@instructure/ui-react-utils": "8.54.0",
+    "@instructure/ui-testable": "8.54.0",
+    "@instructure/ui-time-select": "8.54.0",
+    "@instructure/ui-utils": "8.54.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/DateTimeInput/README.md

@@ -219,3 +219,69 @@ class Example extends React.Component {
 
 render(<Example />)
 ```
+
+#### Programatically reset `DateTimeInput`
+
+Due to `onChange` not being called on every typing event, and `value` isn't representing the inner value-state of the component, it's not possible to reset the `DateTimeInput` by setting the `value` to `undefined`. Instead, you can use the `reset` function that is passed to the `DateTimeInput` as a prop.
+
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
+      this.state = {
+        date: ''
+      }
+    }
+
+    resetFn = null
+
+    render() {
+      return (
+        <div>
+          <DateTimeInput
+            description="Pick a date and time"
+            datePlaceholder="Choose a date"
+            dateRenderLabel="Date"
+            timeRenderLabel="Time"
+            invalidDateTimeMessage="Invalid date!"
+            prevMonthLabel="Previous month"
+            nextMonthLabel="Next month"
+            value={this.state.date}
+            onChange={(e, newDate) => this.setState({ date: newDate })}
+            reset={(reset) => (this.resetFn = reset)}
+          />
+          <Button onClick={() => this.resetFn()}>Clear</Button>
+          <p>{this.state.date}</p>
+        </div>
+      )
+    }
+  }
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [date, setDate] = useState('')
+    const resetFn = useRef()
+
+    return (
+      <div>
+        <DateTimeInput
+          description="Pick a date and time"
+          datePlaceholder="Choose a date"
+          dateRenderLabel="Date"
+          timeRenderLabel="Time"
+          invalidDateTimeMessage="Invalid date!"
+          prevMonthLabel="Previous month"
+          nextMonthLabel="Next month"
+          value={date}
+          onChange={(e, newDate) => setDate(newDate)}
+          reset={(reset) => (resetFn.current = reset)}
+        />
+        <Button onClick={() => resetFn.current()}>Clear</Button>
+        <p>{date}</p>
+      </div>
+    )
+  }
+  render(<Example />)
+  ```

package/src/DateTimeInput/index.tsx

@@ -88,6 +88,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       this.props.value || this.props.defaultValue
     )
     this.setState(initState)
+    this.props.reset?.(this.reset)
   }
 
   componentDidUpdate(prevProps: Readonly<DateTimeInputProps>): void {
@@ -206,6 +207,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     }
   }
 
+  reset = () => this.setState(this.recalculateState())
+
   locale(): string {
     if (this.props.locale) {
       return this.props.locale

package/src/DateTimeInput/props.ts

@@ -247,6 +247,13 @@ type DateTimeInputProps = {
    * An error is thrown if the time format is not HH:MM.
    */
   initialTimeForNewDate?: string
+  /**
+   * Used for getting the internal reset function of DateTimeInput. If that
+   * function is called, the component will reset to its default inner state.
+   * The callback function will be called in componentDidMount
+   * NOTE: this won't call onChange, so you have to reset the value manually when calling reset
+   */
+  reset?: (reset: () => void) => void
 }
 
 type DateTimeInputState = {
@@ -339,6 +346,7 @@ const propTypes: PropValidators<PropKeys> = {
     PropTypes.func
   ]),
   allowNonStepInput: PropTypes.bool,
+  reset: PropTypes.func,
   initialTimeForNewDate: hourMinuteValidator
 }
 
@@ -373,7 +381,8 @@ const allowedProps: AllowedPropKeys = [
   'onBlur',
   'disabledDates',
   'disabledDateTimeMessage',
-  'allowNonStepInput'
+  'allowNonStepInput',
+  'reset'
 ]
 
 export type { DateTimeInputProps, DateTimeInputState }