@instructure/ui-date-time-input 8.52.1-snapshot-1 → 8.52.1-snapshot-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/DateTimeInput/index.js +2 -0
  3. package/es/DateTimeInput/props.js +2 -1
  4. package/lib/DateTimeInput/index.js +2 -0
  5. package/lib/DateTimeInput/props.js +2 -1
  6. package/package.json +18 -18
  7. package/src/DateTimeInput/index.tsx +2 -0
  8. package/src/DateTimeInput/props.ts +8 -0
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/DateTimeInput/index.d.ts.map +1 -1
  11. package/types/DateTimeInput/props.d.ts +5 -0
  12. package/types/DateTimeInput/props.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [8.52.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.52.1-snapshot-1) (2024-02-06)
6
+ ## [8.52.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.52.1-snapshot-2) (2024-02-06)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-date-time-input
8
+
9
+ ### Features
10
+
11
+ * **ui-date-time-input:** add placeholder to datetimeinput's timeselect ([3ec8cc3](https://github.com/instructure/instructure-ui/commit/3ec8cc31f06ee570b704f88b09739a0868da9ff7))
9
12
 
10
13
 
11
14
 
package/es/DateTimeInput/index.js CHANGED
@@ -405,6 +405,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
405
405
  const _this$props3 = this.props,
406
406
  description = _this$props3.description,
407
407
  datePlaceholder = _this$props3.datePlaceholder,
408
+ timePlaceholder = _this$props3.timePlaceholder,
408
409
  dateRenderLabel = _this$props3.dateRenderLabel,
409
410
  dateInputRef = _this$props3.dateInputRef,
410
411
  timeRenderLabel = _this$props3.timeRenderLabel,
@@ -454,6 +455,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
454
455
  }, this.renderDays()), /*#__PURE__*/React.createElement(TimeSelect, {
455
456
  value: this.state.timeSelectValue,
456
457
  onChange: this.updateStateBasedOnTimeSelect,
458
+ placeholder: timePlaceholder,
457
459
  onBlur: this.handleBlur,
458
460
  renderLabel: timeRenderLabel,
459
461
  locale: locale,
package/es/DateTimeInput/props.js CHANGED
@@ -32,6 +32,7 @@ const propTypes = {
32
32
  prevMonthLabel: PropTypes.string.isRequired,
33
33
  nextMonthLabel: PropTypes.string.isRequired,
34
34
  datePlaceholder: PropTypes.string,
35
+ timePlaceholder: PropTypes.string,
35
36
  dateFormat: PropTypes.string,
36
37
  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
37
38
  timeRenderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
@@ -58,5 +59,5 @@ const propTypes = {
58
59
  disabledDateTimeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
59
60
  allowNonStepInput: PropTypes.bool
60
61
  };
61
- const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', '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'];
62
+ 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'];
62
63
  export { propTypes, allowedProps };
package/lib/DateTimeInput/index.js CHANGED
@@ -413,6 +413,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
413
413
  const _this$props3 = this.props,
414
414
  description = _this$props3.description,
415
415
  datePlaceholder = _this$props3.datePlaceholder,
416
+ timePlaceholder = _this$props3.timePlaceholder,
416
417
  dateRenderLabel = _this$props3.dateRenderLabel,
417
418
  dateInputRef = _this$props3.dateInputRef,
418
419
  timeRenderLabel = _this$props3.timeRenderLabel,
@@ -462,6 +463,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
462
463
  }, this.renderDays()), /*#__PURE__*/_react.default.createElement(_TimeSelect.TimeSelect, {
463
464
  value: this.state.timeSelectValue,
464
465
  onChange: this.updateStateBasedOnTimeSelect,
466
+ placeholder: timePlaceholder,
465
467
  onBlur: this.handleBlur,
466
468
  renderLabel: timeRenderLabel,
467
469
  locale: locale,
package/lib/DateTimeInput/props.js CHANGED
@@ -39,6 +39,7 @@ const propTypes = exports.propTypes = {
39
39
  prevMonthLabel: _propTypes.default.string.isRequired,
40
40
  nextMonthLabel: _propTypes.default.string.isRequired,
41
41
  datePlaceholder: _propTypes.default.string,
42
+ timePlaceholder: _propTypes.default.string,
42
43
  dateFormat: _propTypes.default.string,
43
44
  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
44
45
  timeRenderLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
@@ -65,4 +66,4 @@ const propTypes = exports.propTypes = {
65
66
  disabledDateTimeMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
66
67
  allowNonStepInput: _propTypes.default.bool
67
68
  };
68
- const allowedProps = exports.allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', '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'];
69
+ 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'];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-date-time-input",
3
- "version": "8.52.1-snapshot-1",
3
+ "version": "8.52.1-snapshot-2",
4
4
  "description": "A UI component that allows to select date and time.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,26 +23,26 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.52.1-snapshot-1",
27
- "@instructure/ui-test-locator": "8.52.1-snapshot-1",
28
- "@instructure/ui-test-utils": "8.52.1-snapshot-1"
26
+ "@instructure/ui-babel-preset": "8.52.1-snapshot-2",
27
+ "@instructure/ui-test-locator": "8.52.1-snapshot-2",
28
+ "@instructure/ui-test-utils": "8.52.1-snapshot-2"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.23.2",
32
- "@instructure/debounce": "8.52.1-snapshot-1",
33
- "@instructure/emotion": "8.52.1-snapshot-1",
34
- "@instructure/ui-a11y-content": "8.52.1-snapshot-1",
35
- "@instructure/ui-buttons": "8.52.1-snapshot-1",
36
- "@instructure/ui-calendar": "8.52.1-snapshot-1",
37
- "@instructure/ui-date-input": "8.52.1-snapshot-1",
38
- "@instructure/ui-form-field": "8.52.1-snapshot-1",
39
- "@instructure/ui-i18n": "8.52.1-snapshot-1",
40
- "@instructure/ui-icons": "8.52.1-snapshot-1",
41
- "@instructure/ui-prop-types": "8.52.1-snapshot-1",
42
- "@instructure/ui-react-utils": "8.52.1-snapshot-1",
43
- "@instructure/ui-testable": "8.52.1-snapshot-1",
44
- "@instructure/ui-time-select": "8.52.1-snapshot-1",
45
- "@instructure/ui-utils": "8.52.1-snapshot-1",
32
+ "@instructure/debounce": "8.52.1-snapshot-2",
33
+ "@instructure/emotion": "8.52.1-snapshot-2",
34
+ "@instructure/ui-a11y-content": "8.52.1-snapshot-2",
35
+ "@instructure/ui-buttons": "8.52.1-snapshot-2",
36
+ "@instructure/ui-calendar": "8.52.1-snapshot-2",
37
+ "@instructure/ui-date-input": "8.52.1-snapshot-2",
38
+ "@instructure/ui-form-field": "8.52.1-snapshot-2",
39
+ "@instructure/ui-i18n": "8.52.1-snapshot-2",
40
+ "@instructure/ui-icons": "8.52.1-snapshot-2",
41
+ "@instructure/ui-prop-types": "8.52.1-snapshot-2",
42
+ "@instructure/ui-react-utils": "8.52.1-snapshot-2",
43
+ "@instructure/ui-testable": "8.52.1-snapshot-2",
44
+ "@instructure/ui-time-select": "8.52.1-snapshot-2",
45
+ "@instructure/ui-utils": "8.52.1-snapshot-2",
46
46
  "prop-types": "^15.8.1"
47
47
  },
48
48
  "peerDependencies": {
package/src/DateTimeInput/index.tsx CHANGED
@@ -510,6 +510,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
510
510
  const {
511
511
  description,
512
512
  datePlaceholder,
513
+ timePlaceholder,
513
514
  dateRenderLabel,
514
515
  dateInputRef,
515
516
  timeRenderLabel,
@@ -576,6 +577,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
576
577
  <TimeSelect
577
578
  value={this.state.timeSelectValue}
578
579
  onChange={this.updateStateBasedOnTimeSelect}
580
+ placeholder={timePlaceholder}
579
581
  onBlur={this.handleBlur}
580
582
  renderLabel={timeRenderLabel}
581
583
  locale={locale}
package/src/DateTimeInput/props.ts CHANGED
@@ -56,6 +56,12 @@ type DateTimeInputProps = {
56
56
  * This should be hint text, not a label replacement.
57
57
  **/
58
58
  datePlaceholder?: string
59
+
60
+ /**
61
+ * HTML placeholder text to display when the time input has no value.
62
+ * This should be hint text, not a label replacement.
63
+ **/
64
+ timePlaceholder?: string
59
65
  /**
60
66
  * The format of the date shown in the `DateInput` when a date is selected.
61
67
  * Valid formats are compatible with
@@ -270,6 +276,7 @@ const propTypes: PropValidators<PropKeys> = {
270
276
  prevMonthLabel: PropTypes.string.isRequired,
271
277
  nextMonthLabel: PropTypes.string.isRequired,
272
278
  datePlaceholder: PropTypes.string,
279
+ timePlaceholder: PropTypes.string,
273
280
  dateFormat: PropTypes.string,
274
281
  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
275
282
  timeRenderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
@@ -315,6 +322,7 @@ const allowedProps: AllowedPropKeys = [
315
322
  'prevMonthLabel',
316
323
  'nextMonthLabel',
317
324
  'datePlaceholder',
325
+ 'timePlaceholder',
318
326
  'dateFormat',
319
327
  'interaction',
320
328
  'timeRenderLabel',