@instructure/ui-date-input 7.18.0 → 7.20.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.20.1](https://github.com/instructure/instructure-ui/compare/v7.20.0...v7.20.1) (2022-07-22)
+
+### Bug Fixes
+
+- **ui-date-input:** add `display` prop to DateInput ([1c2b6a7](https://github.com/instructure/instructure-ui/commit/1c2b6a7))
+
+# [7.20.0](https://github.com/instructure/instructure-ui/compare/v7.19.0...v7.20.0) (2022-06-22)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+# [7.19.0](https://github.com/instructure/instructure-ui/compare/v7.18.0...v7.19.0) (2022-06-03)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
 # [7.18.0](https://github.com/instructure/instructure-ui/compare/v7.17.0...v7.18.0) (2022-03-30)
 
 **Note:** Version bump only for package @instructure/ui-date-input

package/es/DateInput/index.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -33,6 +34,7 @@ var _dec, _dec2, _dec3, _class, _class2, _temp;
  */
 import React, { Children, Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Calendar } from '@instructure/ui-calendar';
 import { IconCalendarMonthLine } from '@instructure/ui-icons';
 import { Popover } from '@instructure/ui-popover';
@@ -46,12 +48,13 @@ import { FormPropTypes } from '@instructure/ui-form-field';
 import { testable } from '@instructure/ui-testable';
 import { themeable } from '@instructure/ui-themeable';
 var styles = {
-  componentId: 'buGWj',
+  componentId: 'bBhxr',
   template: function template(theme) {
-    return "\n\n.buGWj_bGBk{display:inline-block}\n\n.buGWj_dJgE{display:none}";
+    return "\n\n.bBhxr_ZftU{display:block}\n\n.bBhxr_cbWx{display:inline-block}\n\n.bBhxr_dJgE{display:none}";
   },
-  'root': 'buGWj_bGBk',
-  'assistiveText': 'buGWj_dJgE'
+  'display-block': 'bBhxr_ZftU',
+  'display-inline-block': 'bBhxr_cbWx',
+  'assistiveText': 'bBhxr_dJgE'
 };
 /**
 ---
@@ -260,7 +263,8 @@ var DateInput = (_dec = deprecated('8.0.0', {
       var _this$props6 = this.props,
           placement = _this$props6.placement,
           isShowingCalendar = _this$props6.isShowingCalendar,
-          assistiveText = _this$props6.assistiveText;
+          assistiveText = _this$props6.assistiveText,
+          display = _this$props6.display;
       var selectedDateId = this.selectedDateId;
       return /*#__PURE__*/React.createElement(Selectable, {
         isShowingOptions: isShowingCalendar,
@@ -271,6 +275,8 @@ var DateInput = (_dec = deprecated('8.0.0', {
         selectedOptionId: selectedDateId,
         highlightedOptionId: selectedDateId
       }, function (_ref6) {
+        var _classnames;
+
         var getRootProps = _ref6.getRootProps,
             getInputProps = _ref6.getInputProps,
             getTriggerProps = _ref6.getTriggerProps,
@@ -278,7 +284,7 @@ var DateInput = (_dec = deprecated('8.0.0', {
             getOptionProps = _ref6.getOptionProps,
             getDescriptionProps = _ref6.getDescriptionProps;
         return /*#__PURE__*/React.createElement("span", getRootProps({
-          className: styles.root
+          className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles["display-".concat(display)], display), _classnames))
         }), _this3.renderInput({
           getInputProps: getInputProps,
           getTriggerProps: getTriggerProps
@@ -397,6 +403,11 @@ var DateInput = (_dec = deprecated('8.0.0', {
    */
   width: PropTypes.string,
 
+  /**
+   * Specifies the display property of the container.
+   */
+  display: PropTypes.oneOf(['inline-block', 'block']),
+
   /**
    * Provides a ref to the underlying input element.
    */
@@ -513,6 +524,7 @@ var DateInput = (_dec = deprecated('8.0.0', {
   assistiveText: void 0,
   layout: 'stacked',
   width: null,
+  display: 'inline-block',
   inputRef: function inputRef(el) {},
   messages: void 0,
   placement: 'bottom center',

package/lib/DateInput/index.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DateInput = exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -27,6 +29,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
 var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
 
 var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
@@ -64,12 +68,13 @@ var _themeable = require("@instructure/ui-themeable/lib/themeable.js");
 var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'buGWj',
+  componentId: 'bBhxr',
   template: function template(theme) {
-    return "\n\n.buGWj_bGBk{display:inline-block}\n\n.buGWj_dJgE{display:none}";
+    return "\n\n.bBhxr_ZftU{display:block}\n\n.bBhxr_cbWx{display:inline-block}\n\n.bBhxr_dJgE{display:none}";
   },
-  'root': 'buGWj_bGBk',
-  'assistiveText': 'buGWj_dJgE'
+  'display-block': 'bBhxr_ZftU',
+  'display-inline-block': 'bBhxr_cbWx',
+  'assistiveText': 'bBhxr_dJgE'
 };
 /**
 ---
@@ -276,7 +281,8 @@ var DateInput = (_dec = (0, _deprecated.deprecated)('8.0.0', {
       var _this$props6 = this.props,
           placement = _this$props6.placement,
           isShowingCalendar = _this$props6.isShowingCalendar,
-          assistiveText = _this$props6.assistiveText;
+          assistiveText = _this$props6.assistiveText,
+          display = _this$props6.display;
       var selectedDateId = this.selectedDateId;
       return /*#__PURE__*/_react.default.createElement(_Selectable.Selectable, {
         isShowingOptions: isShowingCalendar,
@@ -287,6 +293,8 @@ var DateInput = (_dec = (0, _deprecated.deprecated)('8.0.0', {
         selectedOptionId: selectedDateId,
         highlightedOptionId: selectedDateId
       }, function (_ref6) {
+        var _classnames;
+
         var getRootProps = _ref6.getRootProps,
             getInputProps = _ref6.getInputProps,
             getTriggerProps = _ref6.getTriggerProps,
@@ -294,7 +302,7 @@ var DateInput = (_dec = (0, _deprecated.deprecated)('8.0.0', {
             getOptionProps = _ref6.getOptionProps,
             getDescriptionProps = _ref6.getDescriptionProps;
         return /*#__PURE__*/_react.default.createElement("span", getRootProps({
-          className: styles.root
+          className: (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.root, true), (0, _defineProperty2.default)(_classnames, styles["display-".concat(display)], display), _classnames))
         }), _this3.renderInput({
           getInputProps: getInputProps,
           getTriggerProps: getTriggerProps
@@ -414,6 +422,11 @@ var DateInput = (_dec = (0, _deprecated.deprecated)('8.0.0', {
    */
   width: _propTypes.default.string,
 
+  /**
+   * Specifies the display property of the container.
+   */
+  display: _propTypes.default.oneOf(['inline-block', 'block']),
+
   /**
    * Provides a ref to the underlying input element.
    */
@@ -530,6 +543,7 @@ var DateInput = (_dec = (0, _deprecated.deprecated)('8.0.0', {
   assistiveText: void 0,
   layout: 'stacked',
   width: null,
+  display: 'inline-block',
   inputRef: function inputRef(el) {},
   messages: void 0,
   placement: 'bottom center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "7.18.0",
+  "version": "7.20.1",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -22,24 +22,25 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.18.0",
-    "@instructure/ui-test-locator": "^7.18.0",
-    "@instructure/ui-test-utils": "^7.18.0"
+    "@instructure/ui-babel-preset": "^7.20.1",
+    "@instructure/ui-test-locator": "^7.20.1",
+    "@instructure/ui-test-utils": "^7.20.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/ui-calendar": "^7.18.0",
-    "@instructure/ui-form-field": "^7.18.0",
-    "@instructure/ui-icons": "^7.18.0",
-    "@instructure/ui-popover": "^7.18.0",
-    "@instructure/ui-position": "^7.18.0",
-    "@instructure/ui-prop-types": "^7.18.0",
-    "@instructure/ui-react-utils": "^7.18.0",
-    "@instructure/ui-selectable": "^7.18.0",
-    "@instructure/ui-testable": "^7.18.0",
-    "@instructure/ui-text-input": "^7.18.0",
-    "@instructure/ui-themeable": "^7.18.0",
-    "@instructure/ui-utils": "^7.18.0",
+    "@instructure/ui-calendar": "^7.20.1",
+    "@instructure/ui-form-field": "^7.20.1",
+    "@instructure/ui-icons": "^7.20.1",
+    "@instructure/ui-popover": "^7.20.1",
+    "@instructure/ui-position": "^7.20.1",
+    "@instructure/ui-prop-types": "^7.20.1",
+    "@instructure/ui-react-utils": "^7.20.1",
+    "@instructure/ui-selectable": "^7.20.1",
+    "@instructure/ui-testable": "^7.20.1",
+    "@instructure/ui-text-input": "^7.20.1",
+    "@instructure/ui-themeable": "^7.20.1",
+    "@instructure/ui-utils": "^7.20.1",
+    "classnames": "^2",
     "prop-types": "^15"
   },
   "peerDependencies": {

package/src/DateInput/index.js

@@ -24,6 +24,7 @@
 
 import React, { Children, Component } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 import { Calendar } from '@instructure/ui-calendar'
 import { IconCalendarMonthLine } from '@instructure/ui-icons'
@@ -126,6 +127,10 @@ class DateInput extends Component {
      * Specifies the width of the input.
      */
     width: PropTypes.string,
+    /**
+     * Specifies the display property of the container.
+     */
+    display: PropTypes.oneOf(['inline-block', 'block']),
     /**
      * Provides a ref to the underlying input element.
      */
@@ -240,6 +245,7 @@ class DateInput extends Component {
     assistiveText: undefined,
     layout: 'stacked',
     width: null,
+    display: 'inline-block',
     inputRef: (el) => {},
     messages: undefined,
     placement: 'bottom center',
@@ -432,7 +438,7 @@ class DateInput extends Component {
   }
 
   render() {
-    const { placement, isShowingCalendar, assistiveText } = this.props
+    const { placement, isShowingCalendar, assistiveText, display } = this.props
 
     const { selectedDateId } = this
 
@@ -454,7 +460,14 @@ class DateInput extends Component {
           getOptionProps,
           getDescriptionProps
         }) => (
-          <span {...getRootProps({ className: styles.root })}>
+          <span
+            {...getRootProps({
+              className: classnames({
+                [styles.root]: true,
+                [styles[`display-${display}`]]: display
+              })
+            })}
+          >
             {this.renderInput({ getInputProps, getTriggerProps })}
             <span {...getDescriptionProps()} className={styles.assistiveText}>
               {assistiveText}

package/src/DateInput/styles.css

@@ -1,4 +1,10 @@
-.root {
+.root {}
+
+.display-block {
+  display: block;
+}
+
+.display-inline-block {
   display: inline-block;
 }
 

package/types/index.d.ts

@@ -10,6 +10,8 @@ export type DateInputInteraction = "enabled" | "disabled" | "readonly";
 
 export type DateInputLayout = "stacked" | "inline";
 
+export type DateInputDisplay = "inline-block" | "block";
+
 export type DateInputRenderNavigationLabel = ((...args: any[])=>any) | React.ReactNode;
 
 export type DateInputRenderWeekdayLabels = ((...args: any[])=>any) | React.ReactNode;
@@ -81,6 +83,10 @@ export interface DateInputProps {
      * Specifies the width of the input.
      */
     width?: string;
+    /**
+     * Specifies the display property of the container.
+     */
+    display?: DateInputDisplay;
     /**
      * Provides a ref to the underlying input element.
      */