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

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 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.

package/es/DateTimeInput/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2, _temp, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
+var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 
 /*
  * The MIT License (MIT)
@@ -42,7 +42,7 @@ category: components
 @tsProps
 **/
 
-let DateTimeInput = (_dec = testable(), _dec(_class = (_temp = _class2 = class DateTimeInput extends Component {
+let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeInput extends Component {
   // extra verbose localized date and time
   // This is used by Tooltip for positioning
   constructor(props) {
@@ -439,18 +439,21 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_temp = _class2 = class D
           timezone = _this$props2.timezone,
           messages = _this$props2.messages,
           layout = _this$props2.layout,
+          rowSpacing = _this$props2.rowSpacing,
+          colSpacing = _this$props2.colSpacing,
           isRequired = _this$props2.isRequired,
           interaction = _this$props2.interaction,
           renderWeekdayLabels = _this$props2.renderWeekdayLabels;
     return /*#__PURE__*/React.createElement(FormFieldGroup, {
       description: description,
-      colSpacing: "medium",
-      rowSpacing: "small",
       layout: layout,
+      rowSpacing: rowSpacing,
+      colSpacing: colSpacing,
       vAlign: "top",
       elementRef: this.handleRef,
       messages: [...(this.state.message ? [this.state.message] : []), ...(messages || [])]
     }, /*#__PURE__*/React.createElement(DateInput, {
+      display: "block",
       value: this.state.dateInputText,
       onChange: this.handleDateTextChange,
       onBlur: this.handleBlur,
@@ -489,11 +492,13 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_temp = _class2 = class D
 
 }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   layout: 'inline',
+  colSpacing: 'medium',
+  rowSpacing: 'small',
   timeStep: 30,
   messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
   isRequired: false,
   dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
 
-}, _class2.contextType = ApplyLocaleContext, _temp)) || _class);
+}, _class2.contextType = ApplyLocaleContext, _class2)) || _class);
 export default DateTimeInput;
 export { DateTimeInput };

package/es/DateTimeInput/props.js

@@ -42,6 +42,8 @@ const propTypes = {
   messages: PropTypes.arrayOf(FormPropTypes.message),
   messageFormat: PropTypes.string,
   layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
+  rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
   value: controllable(I18nPropTypes.iso8601, 'onChange'),
   defaultValue: I18nPropTypes.iso8601,
   renderWeekdayLabels: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),
@@ -51,5 +53,5 @@ const propTypes = {
   timeInputRef: PropTypes.func,
   onBlur: PropTypes.func
 };
-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'];
+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'];
 export { propTypes, allowedProps };

package/lib/DateTimeInput/index.js

@@ -37,7 +37,7 @@ var _debounce = require("@instructure/debounce");
 
 var _props = require("./props");
 
-var _dec, _class, _class2, _temp, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
+var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 
 /**
 ---
@@ -45,7 +45,7 @@ category: components
 ---
 @tsProps
 **/
-let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class DateTimeInput extends _react.Component {
+let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 = class DateTimeInput extends _react.Component {
   // extra verbose localized date and time
   // This is used by Tooltip for positioning
   constructor(props) {
@@ -450,18 +450,21 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
           timezone = _this$props2.timezone,
           messages = _this$props2.messages,
           layout = _this$props2.layout,
+          rowSpacing = _this$props2.rowSpacing,
+          colSpacing = _this$props2.colSpacing,
           isRequired = _this$props2.isRequired,
           interaction = _this$props2.interaction,
           renderWeekdayLabels = _this$props2.renderWeekdayLabels;
     return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, {
       description: description,
-      colSpacing: "medium",
-      rowSpacing: "small",
       layout: layout,
+      rowSpacing: rowSpacing,
+      colSpacing: colSpacing,
       vAlign: "top",
       elementRef: this.handleRef,
       messages: [...(this.state.message ? [this.state.message] : []), ...(messages || [])]
     }, /*#__PURE__*/_react.default.createElement(_DateInput.DateInput, {
+      display: "block",
       value: this.state.dateInputText,
       onChange: this.handleDateTextChange,
       onBlur: this.handleBlur,
@@ -500,12 +503,14 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
 
 }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   layout: 'inline',
+  colSpacing: 'medium',
+  rowSpacing: 'small',
   timeStep: 30,
   messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
   isRequired: false,
   dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
 
-}, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _temp)) || _class);
+}, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _class2)) || _class);
 exports.DateTimeInput = DateTimeInput;
 var _default = DateTimeInput;
 exports.default = _default;

package/lib/DateTimeInput/props.js

@@ -55,6 +55,8 @@ const propTypes = {
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
   messageFormat: _propTypes.default.string,
   layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline']),
+  rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
   value: (0, _controllable.controllable)(_I18nPropTypes.I18nPropTypes.iso8601, 'onChange'),
   defaultValue: _I18nPropTypes.I18nPropTypes.iso8601,
   renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])),
@@ -65,5 +67,5 @@ const propTypes = {
   onBlur: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-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'];
+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'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.23.0",
+  "version": "8.23.1-snapshot.11+5e829fae6",
   "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.23.0",
-    "@instructure/ui-test-locator": "8.23.0",
-    "@instructure/ui-test-utils": "8.23.0"
+    "@instructure/ui-babel-preset": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-test-locator": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-test-utils": "8.23.1-snapshot.11+5e829fae6"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.23.0",
-    "@instructure/emotion": "8.23.0",
-    "@instructure/ui-a11y-content": "8.23.0",
-    "@instructure/ui-buttons": "8.23.0",
-    "@instructure/ui-calendar": "8.23.0",
-    "@instructure/ui-date-input": "8.23.0",
-    "@instructure/ui-form-field": "8.23.0",
-    "@instructure/ui-i18n": "8.23.0",
-    "@instructure/ui-icons": "8.23.0",
-    "@instructure/ui-prop-types": "8.23.0",
-    "@instructure/ui-react-utils": "8.23.0",
-    "@instructure/ui-testable": "8.23.0",
-    "@instructure/ui-time-select": "8.23.0",
-    "@instructure/ui-utils": "8.23.0",
+    "@instructure/debounce": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/emotion": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-a11y-content": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-buttons": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-calendar": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-date-input": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-form-field": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-i18n": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-icons": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-prop-types": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-react-utils": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-testable": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-time-select": "8.23.1-snapshot.11+5e829fae6",
+    "@instructure/ui-utils": "8.23.1-snapshot.11+5e829fae6",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -51,5 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "5e829fae6b005f080497818df8b3fff19365aab3"
 }

package/src/DateTimeInput/index.tsx

@@ -56,6 +56,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
   static allowedProps = allowedProps
   static defaultProps = {
     layout: 'inline',
+    colSpacing: 'medium',
+    rowSpacing: 'small',
     timeStep: 30,
     messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
     isRequired: false,
@@ -491,16 +493,19 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       timezone,
       messages,
       layout,
+      rowSpacing,
+      colSpacing,
       isRequired,
       interaction,
       renderWeekdayLabels
     } = this.props
+
     return (
       <FormFieldGroup
         description={description}
-        colSpacing="medium"
-        rowSpacing="small"
         layout={layout}
+        rowSpacing={rowSpacing}
+        colSpacing={colSpacing}
         vAlign="top"
         elementRef={this.handleRef}
         messages={[
@@ -509,6 +514,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
         ]}
       >
         <DateInput
+          display="block"
           value={this.state.dateInputText}
           onChange={this.handleDateTextChange}
           onBlur={this.handleBlur}

package/src/DateTimeInput/props.ts

@@ -152,6 +152,14 @@ type DateTimeInputProps = {
    * See [FormFieldGroup](#FormFieldGroup) for details.
    **/
   layout?: 'stacked' | 'columns' | 'inline'
+  /**
+   * Controls the spacing between the inputs when they are in a vertical layout.
+   **/
+  rowSpacing?: 'none' | 'small' | 'medium' | 'large'
+  /**
+   * Controls the spacing between the inputs when they are in a horizontal layout.
+   **/
+  colSpacing?: 'none' | 'small' | 'medium' | 'large'
   /**
    * An ISO 8601 formatted date string representing the current date-time
    * (must be accompanied by an onChange prop).
@@ -264,6 +272,8 @@ const propTypes: PropValidators<PropKeys> = {
   messages: PropTypes.arrayOf(FormPropTypes.message),
   messageFormat: PropTypes.string,
   layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
+  rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
   value: controllable(I18nPropTypes.iso8601, 'onChange'),
   defaultValue: I18nPropTypes.iso8601,
   renderWeekdayLabels: PropTypes.arrayOf(
@@ -293,6 +303,8 @@ const allowedProps: AllowedPropKeys = [
   'messages',
   'messageFormat',
   'layout',
+  'rowSpacing',
+  'colSpacing',
   'value',
   'defaultValue',
   'renderWeekdayLabels',