@instructure/ui-date-input 8.25.1-snapshot-10 → 8.25.1-snapshot-15

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 (5) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/DateInput/index.js +80 -78
  3. package/lib/DateInput/index.js +80 -78
  4. package/package.json +16 -16
  5. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
6
+ ## [8.25.1-snapshot-15](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-15) (2022-06-23)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-date-input
9
9
 
package/es/DateInput/index.js CHANGED
@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
2
2
  const _excluded = ["renderLabel", "value", "placeholder", "onBlur", "isRequired", "size", "isInline", "layout", "width", "messages", "onRequestValidateDate", "onRequestShowCalendar", "onRequestHideCalendar", "onRequestSelectNextDay", "onRequestSelectPrevDay", "onRequestRenderNextMonth", "onRequestRenderPrevMonth"],
3
3
  _excluded2 = ["ref"];
4
4
 
5
- var _dec, _dec2, _class, _IconCalendarMonthLin;
5
+ var _dec, _dec2, _class, _class2, _IconCalendarMonthLin;
6
6
 
7
7
  /*
8
8
  * The MIT License (MIT)
@@ -50,40 +50,80 @@ The `DateInput` component provides a visual interface for inputting date data.
50
50
  See <https://instructure.design/#DateInput/>
51
51
  @tsProps
52
52
  **/
53
- let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = class DateInput extends Component {
54
- static displayName = "DateInput";
55
- static componentId = 'DateInput';
56
- static Day = Calendar.Day;
57
- static propTypes = propTypes;
58
- static allowedProps = allowedProps;
59
- static defaultProps = {
60
- value: '',
61
- size: 'medium',
62
- onBlur: () => {},
63
- // must have a default so createChainedFunction works
64
- isRequired: false,
65
- isInline: false,
66
- layout: 'stacked',
67
- display: 'inline-block',
68
- placement: 'bottom center',
69
- isShowingCalendar: false
70
- };
71
- state = {
72
- hasInputRef: false
73
- };
74
- _input = void 0;
75
- ref = null;
53
+ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class DateInput extends Component {
54
+ constructor() {
55
+ super(...arguments);
56
+ this.state = {
57
+ hasInputRef: false
58
+ };
59
+ this._input = void 0;
60
+ this.ref = null;
61
+
62
+ this.formatDateId = date => {
63
+ // ISO8601 strings may contain a space. Remove any spaces before using the
64
+ // date as the id.
65
+ return date.replace(/\s/g, '');
66
+ };
67
+
68
+ this.handleInputRef = el => {
69
+ var _this$props$inputRef, _this$props;
70
+
71
+ // Ensures that we position the Calendar with respect to the input correctly
72
+ // if the Calendar is open on mount
73
+ if (!this.state.hasInputRef) {
74
+ this.setState({
75
+ hasInputRef: true
76
+ });
77
+ }
78
+
79
+ this._input = el;
80
+ (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
81
+ };
82
+
83
+ this.handleInputChange = (event, value) => {
84
+ var _this$props$onChange, _this$props2;
85
+
86
+ (_this$props$onChange = (_this$props2 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, event, {
87
+ value
88
+ });
89
+ this.handleShowCalendar(event);
90
+ };
91
+
92
+ this.handleShowCalendar = event => {
93
+ if (this.interaction === 'enabled') {
94
+ var _this$props$onRequest, _this$props3;
95
+
96
+ (_this$props$onRequest = (_this$props3 = this.props).onRequestShowCalendar) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props3, event);
97
+ }
98
+ };
99
+
100
+ this.handleHideCalendar = event => {
101
+ var _this$props$onRequest2, _this$props4, _this$props$onRequest3, _this$props5;
102
+
103
+ (_this$props$onRequest2 = (_this$props4 = this.props).onRequestValidateDate) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props4, event);
104
+ (_this$props$onRequest3 = (_this$props5 = this.props).onRequestHideCalendar) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props5, event);
105
+ };
106
+
107
+ this.handleHighlightOption = (event, _ref) => {
108
+ let direction = _ref.direction;
109
+ const _this$props6 = this.props,
110
+ onRequestSelectNextDay = _this$props6.onRequestSelectNextDay,
111
+ onRequestSelectPrevDay = _this$props6.onRequestSelectPrevDay;
112
+ if (direction === -1) onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
113
+ if (direction === 1) onRequestSelectNextDay === null || onRequestSelectNextDay === void 0 ? void 0 : onRequestSelectNextDay(event);
114
+ };
115
+ }
76
116
 
77
117
  componentDidMount() {
78
- var _this$props$makeStyle, _this$props;
118
+ var _this$props$makeStyle, _this$props7;
79
119
 
80
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
120
+ (_this$props$makeStyle = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props7);
81
121
  }
82
122
 
83
123
  componentDidUpdate() {
84
- var _this$props$makeStyle2, _this$props2;
124
+ var _this$props$makeStyle2, _this$props8;
85
125
 
86
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
126
+ (_this$props$makeStyle2 = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props8);
87
127
  }
88
128
 
89
129
  get selectedDateId() {
@@ -106,55 +146,6 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
106
146
  });
107
147
  }
108
148
 
109
- formatDateId = date => {
110
- // ISO8601 strings may contain a space. Remove any spaces before using the
111
- // date as the id.
112
- return date.replace(/\s/g, '');
113
- };
114
- handleInputRef = el => {
115
- var _this$props$inputRef, _this$props3;
116
-
117
- // Ensures that we position the Calendar with respect to the input correctly
118
- // if the Calendar is open on mount
119
- if (!this.state.hasInputRef) {
120
- this.setState({
121
- hasInputRef: true
122
- });
123
- }
124
-
125
- this._input = el;
126
- (_this$props$inputRef = (_this$props3 = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props3, el);
127
- };
128
- handleInputChange = (event, value) => {
129
- var _this$props$onChange, _this$props4;
130
-
131
- (_this$props$onChange = (_this$props4 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props4, event, {
132
- value
133
- });
134
- this.handleShowCalendar(event);
135
- };
136
- handleShowCalendar = event => {
137
- if (this.interaction === 'enabled') {
138
- var _this$props$onRequest, _this$props5;
139
-
140
- (_this$props$onRequest = (_this$props5 = this.props).onRequestShowCalendar) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props5, event);
141
- }
142
- };
143
- handleHideCalendar = event => {
144
- var _this$props$onRequest2, _this$props6, _this$props$onRequest3, _this$props7;
145
-
146
- (_this$props$onRequest2 = (_this$props6 = this.props).onRequestValidateDate) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props6, event);
147
- (_this$props$onRequest3 = (_this$props7 = this.props).onRequestHideCalendar) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props7, event);
148
- };
149
- handleHighlightOption = (event, _ref) => {
150
- let direction = _ref.direction;
151
- const _this$props8 = this.props,
152
- onRequestSelectNextDay = _this$props8.onRequestSelectNextDay,
153
- onRequestSelectPrevDay = _this$props8.onRequestSelectPrevDay;
154
- if (direction === -1) onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
155
- if (direction === 1) onRequestSelectNextDay === null || onRequestSelectNextDay === void 0 ? void 0 : onRequestSelectNextDay(event);
156
- };
157
-
158
149
  renderMonthNavigationButton() {
159
150
  let type = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 'prev';
160
151
  const _this$props9 = this.props,
@@ -296,6 +287,17 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
296
287
  });
297
288
  }
298
289
 
299
- }) || _class) || _class);
290
+ }, _class2.displayName = "DateInput", _class2.componentId = 'DateInput', _class2.Day = Calendar.Day, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
291
+ value: '',
292
+ size: 'medium',
293
+ onBlur: () => {},
294
+ // must have a default so createChainedFunction works
295
+ isRequired: false,
296
+ isInline: false,
297
+ layout: 'stacked',
298
+ display: 'inline-block',
299
+ placement: 'bottom center',
300
+ isShowingCalendar: false
301
+ }, _class2)) || _class) || _class);
300
302
  export default DateInput;
301
303
  export { DateInput };
package/lib/DateInput/index.js CHANGED
@@ -44,7 +44,7 @@ var _props2 = require("./props");
44
44
  const _excluded = ["renderLabel", "value", "placeholder", "onBlur", "isRequired", "size", "isInline", "layout", "width", "messages", "onRequestValidateDate", "onRequestShowCalendar", "onRequestHideCalendar", "onRequestSelectNextDay", "onRequestSelectPrevDay", "onRequestRenderNextMonth", "onRequestRenderPrevMonth"],
45
45
  _excluded2 = ["ref"];
46
46
 
47
- var _dec, _dec2, _class, _IconCalendarMonthLin;
47
+ var _dec, _dec2, _class, _class2, _IconCalendarMonthLin;
48
48
 
49
49
  /**
50
50
  ---
@@ -54,40 +54,80 @@ The `DateInput` component provides a visual interface for inputting date data.
54
54
  See <https://instructure.design/#DateInput/>
55
55
  @tsProps
56
56
  **/
57
- let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class DateInput extends _react.Component {
58
- static displayName = "DateInput";
59
- static componentId = 'DateInput';
60
- static Day = _Calendar.Calendar.Day;
61
- static propTypes = _props2.propTypes;
62
- static allowedProps = _props2.allowedProps;
63
- static defaultProps = {
64
- value: '',
65
- size: 'medium',
66
- onBlur: () => {},
67
- // must have a default so createChainedFunction works
68
- isRequired: false,
69
- isInline: false,
70
- layout: 'stacked',
71
- display: 'inline-block',
72
- placement: 'bottom center',
73
- isShowingCalendar: false
74
- };
75
- state = {
76
- hasInputRef: false
77
- };
78
- _input = void 0;
79
- ref = null;
57
+ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class DateInput extends _react.Component {
58
+ constructor() {
59
+ super(...arguments);
60
+ this.state = {
61
+ hasInputRef: false
62
+ };
63
+ this._input = void 0;
64
+ this.ref = null;
65
+
66
+ this.formatDateId = date => {
67
+ // ISO8601 strings may contain a space. Remove any spaces before using the
68
+ // date as the id.
69
+ return date.replace(/\s/g, '');
70
+ };
71
+
72
+ this.handleInputRef = el => {
73
+ var _this$props$inputRef, _this$props;
74
+
75
+ // Ensures that we position the Calendar with respect to the input correctly
76
+ // if the Calendar is open on mount
77
+ if (!this.state.hasInputRef) {
78
+ this.setState({
79
+ hasInputRef: true
80
+ });
81
+ }
82
+
83
+ this._input = el;
84
+ (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
85
+ };
86
+
87
+ this.handleInputChange = (event, value) => {
88
+ var _this$props$onChange, _this$props2;
89
+
90
+ (_this$props$onChange = (_this$props2 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, event, {
91
+ value
92
+ });
93
+ this.handleShowCalendar(event);
94
+ };
95
+
96
+ this.handleShowCalendar = event => {
97
+ if (this.interaction === 'enabled') {
98
+ var _this$props$onRequest, _this$props3;
99
+
100
+ (_this$props$onRequest = (_this$props3 = this.props).onRequestShowCalendar) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props3, event);
101
+ }
102
+ };
103
+
104
+ this.handleHideCalendar = event => {
105
+ var _this$props$onRequest2, _this$props4, _this$props$onRequest3, _this$props5;
106
+
107
+ (_this$props$onRequest2 = (_this$props4 = this.props).onRequestValidateDate) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props4, event);
108
+ (_this$props$onRequest3 = (_this$props5 = this.props).onRequestHideCalendar) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props5, event);
109
+ };
110
+
111
+ this.handleHighlightOption = (event, _ref) => {
112
+ let direction = _ref.direction;
113
+ const _this$props6 = this.props,
114
+ onRequestSelectNextDay = _this$props6.onRequestSelectNextDay,
115
+ onRequestSelectPrevDay = _this$props6.onRequestSelectPrevDay;
116
+ if (direction === -1) onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
117
+ if (direction === 1) onRequestSelectNextDay === null || onRequestSelectNextDay === void 0 ? void 0 : onRequestSelectNextDay(event);
118
+ };
119
+ }
80
120
 
81
121
  componentDidMount() {
82
- var _this$props$makeStyle, _this$props;
122
+ var _this$props$makeStyle, _this$props7;
83
123
 
84
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
124
+ (_this$props$makeStyle = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props7);
85
125
  }
86
126
 
87
127
  componentDidUpdate() {
88
- var _this$props$makeStyle2, _this$props2;
128
+ var _this$props$makeStyle2, _this$props8;
89
129
 
90
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
130
+ (_this$props$makeStyle2 = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props8);
91
131
  }
92
132
 
93
133
  get selectedDateId() {
@@ -112,55 +152,6 @@ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
112
152
  });
113
153
  }
114
154
 
115
- formatDateId = date => {
116
- // ISO8601 strings may contain a space. Remove any spaces before using the
117
- // date as the id.
118
- return date.replace(/\s/g, '');
119
- };
120
- handleInputRef = el => {
121
- var _this$props$inputRef, _this$props3;
122
-
123
- // Ensures that we position the Calendar with respect to the input correctly
124
- // if the Calendar is open on mount
125
- if (!this.state.hasInputRef) {
126
- this.setState({
127
- hasInputRef: true
128
- });
129
- }
130
-
131
- this._input = el;
132
- (_this$props$inputRef = (_this$props3 = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props3, el);
133
- };
134
- handleInputChange = (event, value) => {
135
- var _this$props$onChange, _this$props4;
136
-
137
- (_this$props$onChange = (_this$props4 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props4, event, {
138
- value
139
- });
140
- this.handleShowCalendar(event);
141
- };
142
- handleShowCalendar = event => {
143
- if (this.interaction === 'enabled') {
144
- var _this$props$onRequest, _this$props5;
145
-
146
- (_this$props$onRequest = (_this$props5 = this.props).onRequestShowCalendar) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props5, event);
147
- }
148
- };
149
- handleHideCalendar = event => {
150
- var _this$props$onRequest2, _this$props6, _this$props$onRequest3, _this$props7;
151
-
152
- (_this$props$onRequest2 = (_this$props6 = this.props).onRequestValidateDate) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props6, event);
153
- (_this$props$onRequest3 = (_this$props7 = this.props).onRequestHideCalendar) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props7, event);
154
- };
155
- handleHighlightOption = (event, _ref) => {
156
- let direction = _ref.direction;
157
- const _this$props8 = this.props,
158
- onRequestSelectNextDay = _this$props8.onRequestSelectNextDay,
159
- onRequestSelectPrevDay = _this$props8.onRequestSelectPrevDay;
160
- if (direction === -1) onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
161
- if (direction === 1) onRequestSelectNextDay === null || onRequestSelectNextDay === void 0 ? void 0 : onRequestSelectNextDay(event);
162
- };
163
-
164
155
  renderMonthNavigationButton() {
165
156
  let type = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 'prev';
166
157
  const _this$props9 = this.props,
@@ -300,7 +291,18 @@ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
300
291
  });
301
292
  }
302
293
 
303
- }) || _class) || _class);
294
+ }, _class2.displayName = "DateInput", _class2.componentId = 'DateInput', _class2.Day = _Calendar.Calendar.Day, _class2.propTypes = _props2.propTypes, _class2.allowedProps = _props2.allowedProps, _class2.defaultProps = {
295
+ value: '',
296
+ size: 'medium',
297
+ onBlur: () => {},
298
+ // must have a default so createChainedFunction works
299
+ isRequired: false,
300
+ isInline: false,
301
+ layout: 'stacked',
302
+ display: 'inline-block',
303
+ placement: 'bottom center',
304
+ isShowingCalendar: false
305
+ }, _class2)) || _class) || _class);
304
306
  exports.DateInput = DateInput;
305
307
  var _default = DateInput;
306
308
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-date-input",
3
- "version": "8.25.1-snapshot-10",
3
+ "version": "8.25.1-snapshot-15",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,24 +23,24 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
27
- "@instructure/ui-test-locator": "8.25.1-snapshot-10",
28
- "@instructure/ui-test-utils": "8.25.1-snapshot-10"
26
+ "@instructure/ui-babel-preset": "8.25.1-snapshot-15",
27
+ "@instructure/ui-test-locator": "8.25.1-snapshot-15",
28
+ "@instructure/ui-test-utils": "8.25.1-snapshot-15"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.13.10",
32
- "@instructure/emotion": "8.25.1-snapshot-10",
33
- "@instructure/ui-calendar": "8.25.1-snapshot-10",
34
- "@instructure/ui-form-field": "8.25.1-snapshot-10",
35
- "@instructure/ui-icons": "8.25.1-snapshot-10",
36
- "@instructure/ui-popover": "8.25.1-snapshot-10",
37
- "@instructure/ui-position": "8.25.1-snapshot-10",
38
- "@instructure/ui-prop-types": "8.25.1-snapshot-10",
39
- "@instructure/ui-react-utils": "8.25.1-snapshot-10",
40
- "@instructure/ui-selectable": "8.25.1-snapshot-10",
41
- "@instructure/ui-testable": "8.25.1-snapshot-10",
42
- "@instructure/ui-text-input": "8.25.1-snapshot-10",
43
- "@instructure/ui-utils": "8.25.1-snapshot-10",
32
+ "@instructure/emotion": "8.25.1-snapshot-15",
33
+ "@instructure/ui-calendar": "8.25.1-snapshot-15",
34
+ "@instructure/ui-form-field": "8.25.1-snapshot-15",
35
+ "@instructure/ui-icons": "8.25.1-snapshot-15",
36
+ "@instructure/ui-popover": "8.25.1-snapshot-15",
37
+ "@instructure/ui-position": "8.25.1-snapshot-15",
38
+ "@instructure/ui-prop-types": "8.25.1-snapshot-15",
39
+ "@instructure/ui-react-utils": "8.25.1-snapshot-15",
40
+ "@instructure/ui-selectable": "8.25.1-snapshot-15",
41
+ "@instructure/ui-testable": "8.25.1-snapshot-15",
42
+ "@instructure/ui-text-input": "8.25.1-snapshot-15",
43
+ "@instructure/ui-utils": "8.25.1-snapshot-15",
44
44
  "prop-types": "^15"
45
45
  },
46
46
  "peerDependencies": {