@instructure/ui-date-input 8.33.1 → 8.33.2-snapshot-5

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.
@@ -1,51 +1,30 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
4
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = exports.DateInput = void 0;
11
-
12
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
-
14
10
  var _react = _interopRequireWildcard(require("react"));
15
-
16
11
  var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
17
-
18
12
  var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
19
-
20
13
  var _Popover = require("@instructure/ui-popover/lib/Popover");
21
-
22
14
  var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
23
-
24
15
  var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
25
-
26
16
  var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
27
-
28
17
  var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
29
-
30
18
  var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
31
-
32
19
  var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
33
-
34
20
  var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
35
-
36
21
  var _testable = require("@instructure/ui-testable/lib/testable.js");
37
-
38
22
  var _emotion = require("@instructure/emotion");
39
-
40
23
  var _styles = _interopRequireDefault(require("./styles"));
41
-
42
24
  var _props2 = require("./props");
43
-
44
25
  const _excluded = ["renderLabel", "value", "placeholder", "onBlur", "isRequired", "size", "isInline", "layout", "width", "messages", "onRequestValidateDate", "onRequestShowCalendar", "onRequestHideCalendar", "onRequestSelectNextDay", "onRequestSelectPrevDay", "onRequestRenderNextMonth", "onRequestRenderPrevMonth"],
45
- _excluded2 = ["ref"];
46
-
26
+ _excluded2 = ["ref"];
47
27
  var _dec, _dec2, _class, _class2, _IconCalendarMonthLin;
48
-
49
28
  /**
50
29
  ---
51
30
  category: components
@@ -62,16 +41,13 @@ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
62
41
  };
63
42
  this._input = void 0;
64
43
  this.ref = null;
65
-
66
44
  this.formatDateId = date => {
67
45
  // ISO8601 strings may contain a space. Remove any spaces before using the
68
46
  // date as the id.
69
47
  return date.replace(/\s/g, '');
70
48
  };
71
-
72
49
  this.handleInputRef = el => {
73
50
  var _this$props$inputRef, _this$props;
74
-
75
51
  // Ensures that we position the Calendar with respect to the input correctly
76
52
  // if the Calendar is open on mount
77
53
  if (!this.state.hasInputRef) {
@@ -79,117 +55,98 @@ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
79
55
  hasInputRef: true
80
56
  });
81
57
  }
82
-
83
58
  this._input = el;
84
59
  (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
85
60
  };
86
-
87
61
  this.handleInputChange = (event, value) => {
88
62
  var _this$props$onChange, _this$props2;
89
-
90
63
  (_this$props$onChange = (_this$props2 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, event, {
91
64
  value
92
65
  });
93
66
  this.handleShowCalendar(event);
94
67
  };
95
-
96
68
  this.handleShowCalendar = event => {
97
69
  if (this.interaction === 'enabled') {
98
70
  var _this$props$onRequest, _this$props3;
99
-
100
71
  (_this$props$onRequest = (_this$props3 = this.props).onRequestShowCalendar) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props3, event);
101
72
  }
102
73
  };
103
-
104
74
  this.handleHideCalendar = event => {
105
75
  var _this$props$onRequest2, _this$props4, _this$props$onRequest3, _this$props5;
106
-
107
76
  (_this$props$onRequest2 = (_this$props4 = this.props).onRequestValidateDate) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props4, event);
108
77
  (_this$props$onRequest3 = (_this$props5 = this.props).onRequestHideCalendar) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props5, event);
109
78
  };
110
-
111
79
  this.handleHighlightOption = (event, _ref) => {
112
80
  let direction = _ref.direction;
113
81
  const _this$props6 = this.props,
114
- onRequestSelectNextDay = _this$props6.onRequestSelectNextDay,
115
- onRequestSelectPrevDay = _this$props6.onRequestSelectPrevDay;
82
+ onRequestSelectNextDay = _this$props6.onRequestSelectNextDay,
83
+ onRequestSelectPrevDay = _this$props6.onRequestSelectPrevDay;
116
84
  if (direction === -1) onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
117
85
  if (direction === 1) onRequestSelectNextDay === null || onRequestSelectNextDay === void 0 ? void 0 : onRequestSelectNextDay(event);
118
86
  };
119
87
  }
120
-
121
88
  componentDidMount() {
122
89
  var _this$props$makeStyle, _this$props7;
123
-
124
90
  (_this$props$makeStyle = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props7);
125
91
  }
126
-
127
92
  componentDidUpdate() {
128
93
  var _this$props$makeStyle2, _this$props8;
129
-
130
94
  (_this$props$makeStyle2 = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props8);
131
95
  }
132
-
133
96
  get selectedDateId() {
134
97
  let selectedDateId;
135
-
136
98
  _react.Children.toArray(this.props.children).forEach(day => {
137
99
  const _props = day.props,
138
- date = _props.date,
139
- isSelected = _props.isSelected;
140
-
100
+ date = _props.date,
101
+ isSelected = _props.isSelected;
141
102
  if (isSelected) {
142
103
  selectedDateId = this.formatDateId(date);
143
104
  }
144
105
  });
145
-
146
106
  return selectedDateId;
147
107
  }
148
-
149
108
  get interaction() {
150
109
  return (0, _getInteraction.getInteraction)({
151
110
  props: this.props
152
111
  });
153
112
  }
154
-
155
113
  renderMonthNavigationButton() {
156
114
  let type = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 'prev';
157
115
  const _this$props9 = this.props,
158
- renderPrevMonthButton = _this$props9.renderPrevMonthButton,
159
- renderNextMonthButton = _this$props9.renderNextMonthButton;
116
+ renderPrevMonthButton = _this$props9.renderPrevMonthButton,
117
+ renderNextMonthButton = _this$props9.renderNextMonthButton;
160
118
  const button = type === 'prev' ? renderPrevMonthButton : renderNextMonthButton;
161
119
  return button && (0, _safeCloneElement.safeCloneElement)((0, _callRenderProp.callRenderProp)(button), {
162
120
  tabIndex: -1
163
121
  });
164
122
  }
165
-
166
123
  renderDays(getOptionProps) {
167
124
  const children = this.props.children;
168
125
  return _react.Children.map(children, day => {
169
126
  const _day$props = day.props,
170
- date = _day$props.date,
171
- isOutsideMonth = _day$props.isOutsideMonth;
127
+ date = _day$props.date,
128
+ isOutsideMonth = _day$props.isOutsideMonth;
172
129
  const props = {
173
130
  tabIndex: -1,
174
131
  id: this.formatDateId(date)
175
132
  };
176
133
  const optionProps = getOptionProps(props);
177
- const propsAdded = isOutsideMonth ? { ...props,
134
+ const propsAdded = isOutsideMonth ? {
135
+ ...props,
178
136
  onClick: optionProps.onClick,
179
137
  role: 'presentation'
180
138
  } : optionProps;
181
139
  return (0, _safeCloneElement.safeCloneElement)(day, propsAdded);
182
140
  });
183
141
  }
184
-
185
142
  renderCalendar(_ref2) {
186
143
  let getListProps = _ref2.getListProps,
187
- getOptionProps = _ref2.getOptionProps;
144
+ getOptionProps = _ref2.getOptionProps;
188
145
  const _this$props10 = this.props,
189
- onRequestRenderNextMonth = _this$props10.onRequestRenderNextMonth,
190
- onRequestRenderPrevMonth = _this$props10.onRequestRenderPrevMonth,
191
- renderNavigationLabel = _this$props10.renderNavigationLabel,
192
- renderWeekdayLabels = _this$props10.renderWeekdayLabels;
146
+ onRequestRenderNextMonth = _this$props10.onRequestRenderNextMonth,
147
+ onRequestRenderPrevMonth = _this$props10.onRequestRenderPrevMonth,
148
+ renderNavigationLabel = _this$props10.renderNavigationLabel,
149
+ renderWeekdayLabels = _this$props10.renderWeekdayLabels;
193
150
  return (0, _emotion.jsx)(_Calendar.Calendar, getListProps({
194
151
  onRequestRenderNextMonth,
195
152
  onRequestRenderPrevMonth,
@@ -199,35 +156,32 @@ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
199
156
  renderPrevMonthButton: this.renderMonthNavigationButton('prev')
200
157
  }), this.renderDays(getOptionProps));
201
158
  }
202
-
203
159
  renderInput(_ref3) {
204
160
  let getInputProps = _ref3.getInputProps,
205
- getTriggerProps = _ref3.getTriggerProps;
161
+ getTriggerProps = _ref3.getTriggerProps;
206
162
  const _this$props11 = this.props,
207
- renderLabel = _this$props11.renderLabel,
208
- value = _this$props11.value,
209
- placeholder = _this$props11.placeholder,
210
- onBlur = _this$props11.onBlur,
211
- isRequired = _this$props11.isRequired,
212
- size = _this$props11.size,
213
- isInline = _this$props11.isInline,
214
- layout = _this$props11.layout,
215
- width = _this$props11.width,
216
- messages = _this$props11.messages,
217
- onRequestValidateDate = _this$props11.onRequestValidateDate,
218
- onRequestShowCalendar = _this$props11.onRequestShowCalendar,
219
- onRequestHideCalendar = _this$props11.onRequestHideCalendar,
220
- onRequestSelectNextDay = _this$props11.onRequestSelectNextDay,
221
- onRequestSelectPrevDay = _this$props11.onRequestSelectPrevDay,
222
- onRequestRenderNextMonth = _this$props11.onRequestRenderNextMonth,
223
- onRequestRenderPrevMonth = _this$props11.onRequestRenderPrevMonth,
224
- rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded);
163
+ renderLabel = _this$props11.renderLabel,
164
+ value = _this$props11.value,
165
+ placeholder = _this$props11.placeholder,
166
+ onBlur = _this$props11.onBlur,
167
+ isRequired = _this$props11.isRequired,
168
+ size = _this$props11.size,
169
+ isInline = _this$props11.isInline,
170
+ layout = _this$props11.layout,
171
+ width = _this$props11.width,
172
+ messages = _this$props11.messages,
173
+ onRequestValidateDate = _this$props11.onRequestValidateDate,
174
+ onRequestShowCalendar = _this$props11.onRequestShowCalendar,
175
+ onRequestHideCalendar = _this$props11.onRequestHideCalendar,
176
+ onRequestSelectNextDay = _this$props11.onRequestSelectNextDay,
177
+ onRequestSelectPrevDay = _this$props11.onRequestSelectPrevDay,
178
+ onRequestRenderNextMonth = _this$props11.onRequestRenderNextMonth,
179
+ onRequestRenderPrevMonth = _this$props11.onRequestRenderPrevMonth,
180
+ rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded);
225
181
  const interaction = this.interaction;
226
-
227
182
  const _getTriggerProps = getTriggerProps(),
228
- ref = _getTriggerProps.ref,
229
- triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded2);
230
-
183
+ ref = _getTriggerProps.ref,
184
+ triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded2);
231
185
  return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, triggerProps, (0, _passthroughProps.passthroughProps)(rest), getInputProps({
232
186
  renderLabel: (0, _callRenderProp.callRenderProp)(renderLabel),
233
187
  value,
@@ -247,13 +201,12 @@ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
247
201
  }))
248
202
  })));
249
203
  }
250
-
251
204
  render() {
252
205
  const _this$props12 = this.props,
253
- placement = _this$props12.placement,
254
- isShowingCalendar = _this$props12.isShowingCalendar,
255
- assistiveText = _this$props12.assistiveText,
256
- styles = _this$props12.styles;
206
+ placement = _this$props12.placement,
207
+ isShowingCalendar = _this$props12.isShowingCalendar,
208
+ assistiveText = _this$props12.assistiveText,
209
+ styles = _this$props12.styles;
257
210
  return (0, _emotion.jsx)(_Selectable.Selectable, {
258
211
  isShowingOptions: isShowingCalendar,
259
212
  onRequestShowOptions: this.handleShowCalendar,
@@ -264,11 +217,11 @@ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
264
217
  highlightedOptionId: this.selectedDateId
265
218
  }, _ref4 => {
266
219
  let getRootProps = _ref4.getRootProps,
267
- getInputProps = _ref4.getInputProps,
268
- getTriggerProps = _ref4.getTriggerProps,
269
- getListProps = _ref4.getListProps,
270
- getOptionProps = _ref4.getOptionProps,
271
- getDescriptionProps = _ref4.getDescriptionProps;
220
+ getInputProps = _ref4.getInputProps,
221
+ getTriggerProps = _ref4.getTriggerProps,
222
+ getListProps = _ref4.getListProps,
223
+ getOptionProps = _ref4.getOptionProps,
224
+ getDescriptionProps = _ref4.getDescriptionProps;
272
225
  return (0, _emotion.jsx)("span", Object.assign({}, getRootProps({
273
226
  css: styles === null || styles === void 0 ? void 0 : styles.dateInput
274
227
  }), {
@@ -290,7 +243,6 @@ let DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
290
243
  })));
291
244
  });
292
245
  }
293
-
294
246
  }, _class2.displayName = "DateInput", _class2.componentId = 'DateInput', _class2.Day = _Calendar.Calendar.Day, _class2.propTypes = _props2.propTypes, _class2.allowedProps = _props2.allowedProps, _class2.defaultProps = {
295
247
  value: '',
296
248
  size: 'medium',
@@ -10,9 +10,7 @@ Object.defineProperty(exports, "DateInputLocator", {
10
10
  }
11
11
  });
12
12
  exports.default = void 0;
13
-
14
13
  var _DateInputLocator = require("./DateInputLocator");
15
-
16
14
  /*
17
15
  * The MIT License (MIT)
18
16
  *
@@ -1,24 +1,16 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.propTypes = exports.allowedProps = void 0;
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
13
-
14
10
  var _Children = require("@instructure/ui-prop-types/lib/Children.js");
15
-
16
11
  var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
17
-
18
12
  var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
19
-
20
13
  var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
21
-
22
14
  /*
23
15
  * The MIT License (MIT)
24
16
  *
@@ -42,6 +34,7 @@ var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
42
34
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
43
35
  * SOFTWARE.
44
36
  */
37
+
45
38
  const propTypes = {
46
39
  renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
47
40
  value: (0, _controllable.controllable)(_propTypes.default.string),
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  /*
9
8
  * The MIT License (MIT)
10
9
  *
@@ -50,6 +49,5 @@ const generateStyle = (_componentTheme, props) => {
50
49
  }
51
50
  };
52
51
  };
53
-
54
52
  var _default = generateStyle;
55
53
  exports.default = _default;
package/lib/index.js CHANGED
@@ -9,5 +9,4 @@ Object.defineProperty(exports, "DateInput", {
9
9
  return _DateInput.DateInput;
10
10
  }
11
11
  });
12
-
13
12
  var _DateInput = require("./DateInput");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-date-input",
3
- "version": "8.33.1",
3
+ "version": "8.33.2-snapshot-5",
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.33.1",
27
- "@instructure/ui-test-locator": "8.33.1",
28
- "@instructure/ui-test-utils": "8.33.1"
26
+ "@instructure/ui-babel-preset": "8.33.2-snapshot-5",
27
+ "@instructure/ui-test-locator": "8.33.2-snapshot-5",
28
+ "@instructure/ui-test-utils": "8.33.2-snapshot-5"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.13.10",
32
- "@instructure/emotion": "8.33.1",
33
- "@instructure/ui-calendar": "8.33.1",
34
- "@instructure/ui-form-field": "8.33.1",
35
- "@instructure/ui-icons": "8.33.1",
36
- "@instructure/ui-popover": "8.33.1",
37
- "@instructure/ui-position": "8.33.1",
38
- "@instructure/ui-prop-types": "8.33.1",
39
- "@instructure/ui-react-utils": "8.33.1",
40
- "@instructure/ui-selectable": "8.33.1",
41
- "@instructure/ui-testable": "8.33.1",
42
- "@instructure/ui-text-input": "8.33.1",
43
- "@instructure/ui-utils": "8.33.1",
32
+ "@instructure/emotion": "8.33.2-snapshot-5",
33
+ "@instructure/ui-calendar": "8.33.2-snapshot-5",
34
+ "@instructure/ui-form-field": "8.33.2-snapshot-5",
35
+ "@instructure/ui-icons": "8.33.2-snapshot-5",
36
+ "@instructure/ui-popover": "8.33.2-snapshot-5",
37
+ "@instructure/ui-position": "8.33.2-snapshot-5",
38
+ "@instructure/ui-prop-types": "8.33.2-snapshot-5",
39
+ "@instructure/ui-react-utils": "8.33.2-snapshot-5",
40
+ "@instructure/ui-selectable": "8.33.2-snapshot-5",
41
+ "@instructure/ui-testable": "8.33.2-snapshot-5",
42
+ "@instructure/ui-text-input": "8.33.2-snapshot-5",
43
+ "@instructure/ui-utils": "8.33.2-snapshot-5",
44
44
  "prop-types": "^15"
45
45
  },
46
46
  "peerDependencies": {