@instructure/ui-date-time-input 8.23.1-snapshot.1 → 8.23.1-snapshot.11

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/es/DateTimeInput/index.js +10 -5
  2. package/es/DateTimeInput/props.js +3 -1
  3. package/lib/DateTimeInput/index.js +10 -5
  4. package/lib/DateTimeInput/props.js +3 -1
  5. package/package.json +19 -19
  6. package/src/DateTimeInput/index.tsx +8 -2
  7. package/src/DateTimeInput/props.ts +12 -0
  8. package/tsconfig.build.tsbuildinfo +1 -1
  9. package/types/DateTimeInput/index.d.ts +2 -0
  10. package/types/DateTimeInput/index.d.ts.map +1 -1
  11. package/types/DateTimeInput/props.d.ts +8 -0
  12. package/types/DateTimeInput/props.d.ts.map +1 -1
package/es/DateTimeInput/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _class2, _temp, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
1
+ var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
2
2
 
3
3
  /*
4
4
  * The MIT License (MIT)
@@ -42,7 +42,7 @@ category: components
42
42
  @tsProps
43
43
  **/
44
44
 
45
- let DateTimeInput = (_dec = testable(), _dec(_class = (_temp = _class2 = class DateTimeInput extends Component {
45
+ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeInput extends Component {
46
46
  // extra verbose localized date and time
47
47
  // This is used by Tooltip for positioning
48
48
  constructor(props) {
@@ -439,18 +439,21 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_temp = _class2 = class D
439
439
  timezone = _this$props2.timezone,
440
440
  messages = _this$props2.messages,
441
441
  layout = _this$props2.layout,
442
+ rowSpacing = _this$props2.rowSpacing,
443
+ colSpacing = _this$props2.colSpacing,
442
444
  isRequired = _this$props2.isRequired,
443
445
  interaction = _this$props2.interaction,
444
446
  renderWeekdayLabels = _this$props2.renderWeekdayLabels;
445
447
  return /*#__PURE__*/React.createElement(FormFieldGroup, {
446
448
  description: description,
447
- colSpacing: "medium",
448
- rowSpacing: "small",
449
449
  layout: layout,
450
+ rowSpacing: rowSpacing,
451
+ colSpacing: colSpacing,
450
452
  vAlign: "top",
451
453
  elementRef: this.handleRef,
452
454
  messages: [...(this.state.message ? [this.state.message] : []), ...(messages || [])]
453
455
  }, /*#__PURE__*/React.createElement(DateInput, {
456
+ display: "block",
454
457
  value: this.state.dateInputText,
455
458
  onChange: this.handleDateTextChange,
456
459
  onBlur: this.handleBlur,
@@ -489,11 +492,13 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_temp = _class2 = class D
489
492
 
490
493
  }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
491
494
  layout: 'inline',
495
+ colSpacing: 'medium',
496
+ rowSpacing: 'small',
492
497
  timeStep: 30,
493
498
  messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
494
499
  isRequired: false,
495
500
  dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
496
501
 
497
- }, _class2.contextType = ApplyLocaleContext, _temp)) || _class);
502
+ }, _class2.contextType = ApplyLocaleContext, _class2)) || _class);
498
503
  export default DateTimeInput;
499
504
  export { DateTimeInput };
package/es/DateTimeInput/props.js CHANGED
@@ -42,6 +42,8 @@ const propTypes = {
42
42
  messages: PropTypes.arrayOf(FormPropTypes.message),
43
43
  messageFormat: PropTypes.string,
44
44
  layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
45
+ rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
46
+ colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
45
47
  value: controllable(I18nPropTypes.iso8601, 'onChange'),
46
48
  defaultValue: I18nPropTypes.iso8601,
47
49
  renderWeekdayLabels: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),
@@ -51,5 +53,5 @@ const propTypes = {
51
53
  timeInputRef: PropTypes.func,
52
54
  onBlur: PropTypes.func
53
55
  };
54
- const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur'];
56
+ 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'];
55
57
  export { propTypes, allowedProps };
package/lib/DateTimeInput/index.js CHANGED
@@ -37,7 +37,7 @@ var _debounce = require("@instructure/debounce");
37
37
 
38
38
  var _props = require("./props");
39
39
 
40
- var _dec, _class, _class2, _temp, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
40
+ var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
41
41
 
42
42
  /**
43
43
  ---
@@ -45,7 +45,7 @@ category: components
45
45
  ---
46
46
  @tsProps
47
47
  **/
48
- let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class DateTimeInput extends _react.Component {
48
+ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 = class DateTimeInput extends _react.Component {
49
49
  // extra verbose localized date and time
50
50
  // This is used by Tooltip for positioning
51
51
  constructor(props) {
@@ -450,18 +450,21 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
450
450
  timezone = _this$props2.timezone,
451
451
  messages = _this$props2.messages,
452
452
  layout = _this$props2.layout,
453
+ rowSpacing = _this$props2.rowSpacing,
454
+ colSpacing = _this$props2.colSpacing,
453
455
  isRequired = _this$props2.isRequired,
454
456
  interaction = _this$props2.interaction,
455
457
  renderWeekdayLabels = _this$props2.renderWeekdayLabels;
456
458
  return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, {
457
459
  description: description,
458
- colSpacing: "medium",
459
- rowSpacing: "small",
460
460
  layout: layout,
461
+ rowSpacing: rowSpacing,
462
+ colSpacing: colSpacing,
461
463
  vAlign: "top",
462
464
  elementRef: this.handleRef,
463
465
  messages: [...(this.state.message ? [this.state.message] : []), ...(messages || [])]
464
466
  }, /*#__PURE__*/_react.default.createElement(_DateInput.DateInput, {
467
+ display: "block",
465
468
  value: this.state.dateInputText,
466
469
  onChange: this.handleDateTextChange,
467
470
  onBlur: this.handleBlur,
@@ -500,12 +503,14 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
500
503
 
501
504
  }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
502
505
  layout: 'inline',
506
+ colSpacing: 'medium',
507
+ rowSpacing: 'small',
503
508
  timeStep: 30,
504
509
  messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
505
510
  isRequired: false,
506
511
  dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
507
512
 
508
- }, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _temp)) || _class);
513
+ }, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _class2)) || _class);
509
514
  exports.DateTimeInput = DateTimeInput;
510
515
  var _default = DateTimeInput;
511
516
  exports.default = _default;
package/lib/DateTimeInput/props.js CHANGED
@@ -55,6 +55,8 @@ const propTypes = {
55
55
  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
56
56
  messageFormat: _propTypes.default.string,
57
57
  layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline']),
58
+ rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
59
+ colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
58
60
  value: (0, _controllable.controllable)(_I18nPropTypes.I18nPropTypes.iso8601, 'onChange'),
59
61
  defaultValue: _I18nPropTypes.I18nPropTypes.iso8601,
60
62
  renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])),
@@ -65,5 +67,5 @@ const propTypes = {
65
67
  onBlur: _propTypes.default.func
66
68
  };
67
69
  exports.propTypes = propTypes;
68
- const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur'];
70
+ 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'];
69
71
  exports.allowedProps = allowedProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-date-time-input",
3
- "version": "8.23.1-snapshot.1+cca389181",
3
+ "version": "8.23.1-snapshot.11+5e829fae6",
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.23.1-snapshot.1+cca389181",
27
- "@instructure/ui-test-locator": "8.23.1-snapshot.1+cca389181",
28
- "@instructure/ui-test-utils": "8.23.1-snapshot.1+cca389181"
26
+ "@instructure/ui-babel-preset": "8.23.1-snapshot.11+5e829fae6",
27
+ "@instructure/ui-test-locator": "8.23.1-snapshot.11+5e829fae6",
28
+ "@instructure/ui-test-utils": "8.23.1-snapshot.11+5e829fae6"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.13.10",
32
- "@instructure/debounce": "8.23.1-snapshot.1+cca389181",
33
- "@instructure/emotion": "8.23.1-snapshot.1+cca389181",
34
- "@instructure/ui-a11y-content": "8.23.1-snapshot.1+cca389181",
35
- "@instructure/ui-buttons": "8.23.1-snapshot.1+cca389181",
36
- "@instructure/ui-calendar": "8.23.1-snapshot.1+cca389181",
37
- "@instructure/ui-date-input": "8.23.1-snapshot.1+cca389181",
38
- "@instructure/ui-form-field": "8.23.1-snapshot.1+cca389181",
39
- "@instructure/ui-i18n": "8.23.1-snapshot.1+cca389181",
40
- "@instructure/ui-icons": "8.23.1-snapshot.1+cca389181",
41
- "@instructure/ui-prop-types": "8.23.1-snapshot.1+cca389181",
42
- "@instructure/ui-react-utils": "8.23.1-snapshot.1+cca389181",
43
- "@instructure/ui-testable": "8.23.1-snapshot.1+cca389181",
44
- "@instructure/ui-time-select": "8.23.1-snapshot.1+cca389181",
45
- "@instructure/ui-utils": "8.23.1-snapshot.1+cca389181",
32
+ "@instructure/debounce": "8.23.1-snapshot.11+5e829fae6",
33
+ "@instructure/emotion": "8.23.1-snapshot.11+5e829fae6",
34
+ "@instructure/ui-a11y-content": "8.23.1-snapshot.11+5e829fae6",
35
+ "@instructure/ui-buttons": "8.23.1-snapshot.11+5e829fae6",
36
+ "@instructure/ui-calendar": "8.23.1-snapshot.11+5e829fae6",
37
+ "@instructure/ui-date-input": "8.23.1-snapshot.11+5e829fae6",
38
+ "@instructure/ui-form-field": "8.23.1-snapshot.11+5e829fae6",
39
+ "@instructure/ui-i18n": "8.23.1-snapshot.11+5e829fae6",
40
+ "@instructure/ui-icons": "8.23.1-snapshot.11+5e829fae6",
41
+ "@instructure/ui-prop-types": "8.23.1-snapshot.11+5e829fae6",
42
+ "@instructure/ui-react-utils": "8.23.1-snapshot.11+5e829fae6",
43
+ "@instructure/ui-testable": "8.23.1-snapshot.11+5e829fae6",
44
+ "@instructure/ui-time-select": "8.23.1-snapshot.11+5e829fae6",
45
+ "@instructure/ui-utils": "8.23.1-snapshot.11+5e829fae6",
46
46
  "prop-types": "^15"
47
47
  },
48
48
  "peerDependencies": {
@@ -52,5 +52,5 @@
52
52
  "access": "public"
53
53
  },
54
54
  "sideEffects": false,
55
- "gitHead": "cca3891819b4261fc5748838ab764506acec33fd"
55
+ "gitHead": "5e829fae6b005f080497818df8b3fff19365aab3"
56
56
  }
package/src/DateTimeInput/index.tsx CHANGED
@@ -56,6 +56,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
56
56
  static allowedProps = allowedProps
57
57
  static defaultProps = {
58
58
  layout: 'inline',
59
+ colSpacing: 'medium',
60
+ rowSpacing: 'small',
59
61
  timeStep: 30,
60
62
  messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
61
63
  isRequired: false,
@@ -491,16 +493,19 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
491
493
  timezone,
492
494
  messages,
493
495
  layout,
496
+ rowSpacing,
497
+ colSpacing,
494
498
  isRequired,
495
499
  interaction,
496
500
  renderWeekdayLabels
497
501
  } = this.props
502
+
498
503
  return (
499
504
  <FormFieldGroup
500
505
  description={description}
501
- colSpacing="medium"
502
- rowSpacing="small"
503
506
  layout={layout}
507
+ rowSpacing={rowSpacing}
508
+ colSpacing={colSpacing}
504
509
  vAlign="top"
505
510
  elementRef={this.handleRef}
506
511
  messages={[
@@ -509,6 +514,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
509
514
  ]}
510
515
  >
511
516
  <DateInput
517
+ display="block"
512
518
  value={this.state.dateInputText}
513
519
  onChange={this.handleDateTextChange}
514
520
  onBlur={this.handleBlur}
package/src/DateTimeInput/props.ts CHANGED
@@ -152,6 +152,14 @@ type DateTimeInputProps = {
152
152
  * See [FormFieldGroup](#FormFieldGroup) for details.
153
153
  **/
154
154
  layout?: 'stacked' | 'columns' | 'inline'
155
+ /**
156
+ * Controls the spacing between the inputs when they are in a vertical layout.
157
+ **/
158
+ rowSpacing?: 'none' | 'small' | 'medium' | 'large'
159
+ /**
160
+ * Controls the spacing between the inputs when they are in a horizontal layout.
161
+ **/
162
+ colSpacing?: 'none' | 'small' | 'medium' | 'large'
155
163
  /**
156
164
  * An ISO 8601 formatted date string representing the current date-time
157
165
  * (must be accompanied by an onChange prop).
@@ -264,6 +272,8 @@ const propTypes: PropValidators<PropKeys> = {
264
272
  messages: PropTypes.arrayOf(FormPropTypes.message),
265
273
  messageFormat: PropTypes.string,
266
274
  layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
275
+ rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
276
+ colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
267
277
  value: controllable(I18nPropTypes.iso8601, 'onChange'),
268
278
  defaultValue: I18nPropTypes.iso8601,
269
279
  renderWeekdayLabels: PropTypes.arrayOf(
@@ -293,6 +303,8 @@ const allowedProps: AllowedPropKeys = [
293
303
  'messages',
294
304
  'messageFormat',
295
305
  'layout',
306
+ 'rowSpacing',
307
+ 'colSpacing',
296
308
  'value',
297
309
  'defaultValue',
298
310
  'renderWeekdayLabels',