@instructure/ui-date-time-input 8.36.1-snapshot-20 → 8.36.1-snapshot-26

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.
 
-## [8.36.1-snapshot-20](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-20) (2023-04-17)
+## [8.36.1-snapshot-26](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-26) (2023-04-24)
 
 
 ### Bug Fixes
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **ui-date-time-input:** dateTimeInput does not trigger invalidDateTimeMessage on blur ([307a3f4](https://github.com/instructure/instructure-ui/commit/307a3f4e288aefcc8ae01ef4c39e30015d2c021f))
 
 
+### Features
+
+* **ui-date-time-input:** allow the user to enter non-step divisible time values ([2cf6c9d](https://github.com/instructure/instructure-ui/commit/2cf6c9d60b09f8279ab618c895be5515f3c5b965))
+
+
 
 
 

package/es/DateTimeInput/index.js

@@ -422,7 +422,8 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       colSpacing = _this$props3.colSpacing,
       isRequired = _this$props3.isRequired,
       interaction = _this$props3.interaction,
-      renderWeekdayLabels = _this$props3.renderWeekdayLabels;
+      renderWeekdayLabels = _this$props3.renderWeekdayLabels,
+      allowNonStepInput = _this$props3.allowNonStepInput;
     return /*#__PURE__*/React.createElement(FormFieldGroup, {
       description: description,
       layout: layout,
@@ -462,7 +463,8 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       step: timeStep,
       timezone: timezone,
       inputRef: timeInputRef,
-      interaction: interaction
+      interaction: interaction,
+      allowNonStepInput: allowNonStepInput
     }));
   }
 }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
@@ -472,7 +474,9 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
   timeStep: 30,
   messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
   isRequired: false,
-  dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
+  dateFormat: 'LL',
+  // Localized date with full month, e.g. "August 6, 2014"
+  allowNonStepInput: false
 }, _class2.contextType = ApplyLocaleContext, _class2)) || _class);
 export default DateTimeInput;
 export { DateTimeInput };

package/es/DateTimeInput/props.js

@@ -54,7 +54,8 @@ const propTypes = {
   timeInputRef: PropTypes.func,
   onBlur: PropTypes.func,
   disabledDates: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.string)]),
-  disabledDateTimeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+  disabledDateTimeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  allowNonStepInput: PropTypes.bool
 };
-const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage'];
+const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput'];
 export { propTypes, allowedProps };

package/lib/DateTimeInput/index.js

@@ -430,7 +430,8 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       colSpacing = _this$props3.colSpacing,
       isRequired = _this$props3.isRequired,
       interaction = _this$props3.interaction,
-      renderWeekdayLabels = _this$props3.renderWeekdayLabels;
+      renderWeekdayLabels = _this$props3.renderWeekdayLabels,
+      allowNonStepInput = _this$props3.allowNonStepInput;
     return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, {
       description: description,
       layout: layout,
@@ -470,7 +471,8 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       step: timeStep,
       timezone: timezone,
       inputRef: timeInputRef,
-      interaction: interaction
+      interaction: interaction,
+      allowNonStepInput: allowNonStepInput
     }));
   }
 }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
@@ -480,7 +482,9 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
   timeStep: 30,
   messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
   isRequired: false,
-  dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
+  dateFormat: 'LL',
+  // Localized date with full month, e.g. "August 6, 2014"
+  allowNonStepInput: false
 }, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _class2)) || _class);
 exports.DateTimeInput = DateTimeInput;
 var _default = DateTimeInput;

package/lib/DateTimeInput/props.js

@@ -61,8 +61,9 @@ const propTypes = {
   timeInputRef: _propTypes.default.func,
   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])
+  disabledDateTimeMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
+  allowNonStepInput: _propTypes.default.bool
 };
 exports.propTypes = propTypes;
-const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage'];
+const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.36.1-snapshot-20",
+  "version": "8.36.1-snapshot-26",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.36.1-snapshot-20",
-    "@instructure/ui-test-locator": "8.36.1-snapshot-20",
-    "@instructure/ui-test-utils": "8.36.1-snapshot-20"
+    "@instructure/ui-babel-preset": "8.36.1-snapshot-26",
+    "@instructure/ui-test-locator": "8.36.1-snapshot-26",
+    "@instructure/ui-test-utils": "8.36.1-snapshot-26"
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@instructure/debounce": "8.36.1-snapshot-20",
-    "@instructure/emotion": "8.36.1-snapshot-20",
-    "@instructure/ui-a11y-content": "8.36.1-snapshot-20",
-    "@instructure/ui-buttons": "8.36.1-snapshot-20",
-    "@instructure/ui-calendar": "8.36.1-snapshot-20",
-    "@instructure/ui-date-input": "8.36.1-snapshot-20",
-    "@instructure/ui-form-field": "8.36.1-snapshot-20",
-    "@instructure/ui-i18n": "8.36.1-snapshot-20",
-    "@instructure/ui-icons": "8.36.1-snapshot-20",
-    "@instructure/ui-prop-types": "8.36.1-snapshot-20",
-    "@instructure/ui-react-utils": "8.36.1-snapshot-20",
-    "@instructure/ui-testable": "8.36.1-snapshot-20",
-    "@instructure/ui-time-select": "8.36.1-snapshot-20",
-    "@instructure/ui-utils": "8.36.1-snapshot-20",
+    "@instructure/debounce": "8.36.1-snapshot-26",
+    "@instructure/emotion": "8.36.1-snapshot-26",
+    "@instructure/ui-a11y-content": "8.36.1-snapshot-26",
+    "@instructure/ui-buttons": "8.36.1-snapshot-26",
+    "@instructure/ui-calendar": "8.36.1-snapshot-26",
+    "@instructure/ui-date-input": "8.36.1-snapshot-26",
+    "@instructure/ui-form-field": "8.36.1-snapshot-26",
+    "@instructure/ui-i18n": "8.36.1-snapshot-26",
+    "@instructure/ui-icons": "8.36.1-snapshot-26",
+    "@instructure/ui-prop-types": "8.36.1-snapshot-26",
+    "@instructure/ui-react-utils": "8.36.1-snapshot-26",
+    "@instructure/ui-testable": "8.36.1-snapshot-26",
+    "@instructure/ui-time-select": "8.36.1-snapshot-26",
+    "@instructure/ui-utils": "8.36.1-snapshot-26",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/DateTimeInput/README.md

@@ -47,6 +47,8 @@ render(<Example />)
 
 #### A required DateInput with `stacked` layout that warns if the value in the past:
 
+This sample code also allows the user to enter an arbitrary time value by setting `allowNonStepInput` to `true`.
+
 ```js
 ---
 example: true
@@ -95,6 +97,7 @@ class Example extends React.Component {
             value={this.state.value}
             invalidDateTimeMessage="Invalid date!"
             messages={this.state.messages}
+            allowNonStepInput={true}
             isRequired
           />
         </div>

package/src/DateTimeInput/index.tsx

@@ -60,7 +60,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     timeStep: 30,
     messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
     isRequired: false,
-    dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
+    dateFormat: 'LL', // Localized date with full month, e.g. "August 6, 2014"
+    allowNonStepInput: false
   } as const
 
   declare context: React.ContextType<typeof ApplyLocaleContext>
@@ -515,7 +516,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       colSpacing,
       isRequired,
       interaction,
-      renderWeekdayLabels
+      renderWeekdayLabels,
+      allowNonStepInput
     } = this.props
 
     return (
@@ -573,6 +575,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           timezone={timezone}
           inputRef={timeInputRef}
           interaction={interaction}
+          allowNonStepInput={allowNonStepInput}
         />
       </FormFieldGroup>
     )

package/src/DateTimeInput/props.ts

@@ -220,6 +220,15 @@ type DateTimeInputProps = {
    * If not specified the component will show the `invalidDateTimeMessage`.
    */
   disabledDateTimeMessage?: string | ((rawDateValue: string) => string)
+  /**
+   * Whether to allow the user to enter non-step divisible values in the time
+   * input field. Note that even if this is set to false one can enter non-step
+   * divisible values programmatically. The user will need to enter the value
+   * exactly (except for lower/uppercase) as specified by the `timeFormat` prop
+   * for it to be accepted.
+   * Default is `undefined` which equals to `false`
+   */
+  allowNonStepInput?: boolean
 }
 
 type DateTimeInputState = {
@@ -288,7 +297,8 @@ const propTypes: PropValidators<PropKeys> = {
   disabledDateTimeMessage: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func
-  ])
+  ]),
+  allowNonStepInput: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -319,7 +329,8 @@ const allowedProps: AllowedPropKeys = [
   'timeInputRef',
   'onBlur',
   'disabledDates',
-  'disabledDateTimeMessage'
+  'disabledDateTimeMessage',
+  'allowNonStepInput'
 ]
 
 export type { DateTimeInputProps, DateTimeInputState }