@instructure/ui-time-select 11.7.2-snapshot-48 → 11.7.2-snapshot-50

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.
package/CHANGELOG.md CHANGED
@@ -3,9 +3,19 @@
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
- ## [11.7.2-snapshot-48](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-48) (2026-04-16)
6
+ ## [11.7.2-snapshot-50](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-50) (2026-04-21)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-time-select
8
+
9
+ ### Features
10
+
11
+ * **many:** rework Select, SimpleSelect and TimeSelect ([fb95519](https://github.com/instructure/instructure-ui/commit/fb9551958326bdc8e95d55075c27c7e078c0c69c))
12
+
13
+
14
+ ### BREAKING CHANGES
15
+
16
+ * **many:** contains breaking changes due to component using the new theming system
17
+
18
+ INSTUI-4807
9
19
 
10
20
 
11
21
 
@@ -0,0 +1,535 @@
1
+ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
+ const _excluded = ["value", "defaultValue", "placeholder", "renderLabel", "inputRef", "id", "listRef", "renderBeforeInput", "renderAfterInput", "isRequired", "isInline", "width", "format", "step", "optionsMaxWidth", "visibleOptionsCount", "messages", "placement", "constrain", "onFocus", "onShowOptions", "onHideOptions", "onInputChange", "onKeyDown", "mountNode"];
3
+ var _dec, _class, _TimeSelect;
4
+ /*
5
+ * The MIT License (MIT)
6
+ *
7
+ * Copyright (c) 2015 - present Instructure, Inc.
8
+ *
9
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
10
+ * of this software and associated documentation files (the "Software"), to deal
11
+ * in the Software without restriction, including without limitation the rights
12
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13
+ * copies of the Software, and to permit persons to whom the Software is
14
+ * furnished to do so, subject to the following conditions:
15
+ *
16
+ * The above copyright notice and this permission notice shall be included in all
17
+ * copies or substantial portions of the Software.
18
+ *
19
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25
+ * SOFTWARE.
26
+ */
27
+
28
+ import { Component } from 'react';
29
+ import { ApplyLocaleContext, Locale, DateTime } from '@instructure/ui-i18n';
30
+ import { getInteraction, passthroughProps, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
31
+ import { Select } from '@instructure/ui-select/latest';
32
+ import * as utils from '@instructure/ui-utils';
33
+ import { allowedProps } from "./props.js";
34
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
35
+ /**
36
+ ---
37
+ category: components
38
+ ---
39
+
40
+ A component used to select a time value.
41
+ **/
42
+ let TimeSelect = (_dec = withDeterministicId(), _dec(_class = (_TimeSelect = class TimeSelect extends Component {
43
+ constructor(props) {
44
+ super(props);
45
+ this.ref = null;
46
+ this._emptyOptionId = this.props.deterministicId('Select-EmptyOption');
47
+ this.getOption = (field, value, options = this.state.options) => {
48
+ return options.find(option => option[field] === value);
49
+ };
50
+ this.handleRef = node => {
51
+ this.ref = node;
52
+ };
53
+ this.handleBlur = event => {
54
+ var _this$props$onBlur, _this$props;
55
+ (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, event);
56
+ };
57
+ this.handleInputChange = event => {
58
+ var _this$props$onInputCh, _this$props3;
59
+ const value = event.target.value;
60
+ const newOptions = this.filterOptions(value);
61
+ if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.length) == 1) {
62
+ // if there is only 1 option, it will be automatically selected except
63
+ // if in controlled mode (it would commit this change)
64
+ if (!this.isControlled) {
65
+ this.setState({
66
+ selectedOptionId: newOptions[0].id
67
+ });
68
+ }
69
+ this.setState({
70
+ fireChangeOnBlur: newOptions[0]
71
+ });
72
+ } else {
73
+ this.setState({
74
+ fireChangeOnBlur: void 0,
75
+ isInputCleared: this.props.allowClearingSelection && value === ''
76
+ });
77
+ }
78
+ this.setState({
79
+ inputValue: value,
80
+ filteredOptions: newOptions,
81
+ highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : void 0,
82
+ isShowingOptions: true
83
+ });
84
+ if (!this.state.isShowingOptions) {
85
+ var _this$props$onShowOpt, _this$props2;
86
+ (_this$props$onShowOpt = (_this$props2 = this.props).onShowOptions) === null || _this$props$onShowOpt === void 0 ? void 0 : _this$props$onShowOpt.call(_this$props2, event);
87
+ }
88
+ const inputAsDate = this.parseInputText(value);
89
+ (_this$props$onInputCh = (_this$props3 = this.props).onInputChange) === null || _this$props$onInputCh === void 0 ? void 0 : _this$props$onInputCh.call(_this$props3, event, value, inputAsDate.isValid() ? inputAsDate.toISOString() : void 0);
90
+ };
91
+ this.onKeyDown = event => {
92
+ var _this$props$onKeyDown, _this$props4;
93
+ const input = this.parseInputText(this.state.inputValue);
94
+ if (event.key === 'Enter' && this.props.allowNonStepInput && input.isValid()) {
95
+ this.setState(() => ({
96
+ isShowingOptions: false,
97
+ highlightedOptionId: void 0
98
+ }));
99
+ // others are set in handleBlurOrEsc
100
+ }
101
+ (_this$props$onKeyDown = (_this$props4 = this.props).onKeyDown) === null || _this$props$onKeyDown === void 0 ? void 0 : _this$props$onKeyDown.call(_this$props4, event);
102
+ };
103
+ this.handleShowOptions = event => {
104
+ var _this$props$onShowOpt2, _this$props5;
105
+ this.setState({
106
+ isShowingOptions: true,
107
+ highlightedOptionId: this.state.selectedOptionId
108
+ });
109
+ (_this$props$onShowOpt2 = (_this$props5 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props5, event);
110
+ if (event.type.startsWith('key')) {
111
+ const keyboardEvent = event;
112
+ const children = this.state.filteredOptions;
113
+ if (!this.state.inputValue && children.length > 0 && !this.props.allowClearingSelection) {
114
+ const optionId = keyboardEvent.key === 'ArrowDown' ? children[0].id : keyboardEvent.key === 'ArrowUp' ? children[children.length - 1].id : void 0;
115
+ optionId && this.setState({
116
+ highlightedOptionId: optionId
117
+ });
118
+ }
119
+ }
120
+ };
121
+ // Called when the input is blurred (=when clicking outside, tabbing away),
122
+ // when pressing ESC. NOT called when an item is selected via Enter/click,
123
+ // (but in this case it will be called later when the input is blurred.)
124
+ this.handleBlurOrEsc = event => {
125
+ var _this$props$onHideOpt, _this$props8;
126
+ const _this$state = this.state,
127
+ selectedOptionId = _this$state.selectedOptionId,
128
+ inputValue = _this$state.inputValue,
129
+ isInputCleared = _this$state.isInputCleared;
130
+ let defaultValue = '';
131
+ if (this.props.defaultValue) {
132
+ const date = DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
133
+ defaultValue = this.props.format ? date.format(this.props.format) : date.toISOString();
134
+ }
135
+ const selectedOption = this.getOption('id', selectedOptionId);
136
+ let newInputValue = defaultValue;
137
+ // if input was completely cleared, ensure it stays clear
138
+ // e.g. defaultValue defined, but no selection yet made
139
+ if (inputValue === '' && this.props.allowClearingSelection) {
140
+ newInputValue = '';
141
+ } else if (selectedOption) {
142
+ // If there is a selected option use its value in the input field.
143
+ newInputValue = selectedOption.label;
144
+ } else if (this.props.value) {
145
+ // If controlled and input is cleared and blurred after the first render, it should revert to value
146
+ const date = DateTime.parse(this.props.value, this.locale(), this.timezone());
147
+ newInputValue = this.props.format ? date.format(this.props.format) : date.toISOString();
148
+ }
149
+ this.setState(() => ({
150
+ isShowingOptions: false,
151
+ highlightedOptionId: void 0,
152
+ inputValue: newInputValue,
153
+ filteredOptions: this.filterOptions('')
154
+ }));
155
+ if (this.state.fireChangeOnBlur && event.key !== 'Escape') {
156
+ var _this$props$onChange, _this$props6;
157
+ this.setState(() => ({
158
+ fireChangeOnBlur: void 0
159
+ }));
160
+ (_this$props$onChange = (_this$props6 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props6, event, {
161
+ value: this.state.fireChangeOnBlur.value.toISOString(),
162
+ inputText: this.state.fireChangeOnBlur.label
163
+ });
164
+ } else if (isInputCleared && event.key !== 'Escape' && this.props.allowClearingSelection) {
165
+ var _this$props$onChange2, _this$props7;
166
+ this.setState(() => ({
167
+ isInputCleared: false
168
+ }));
169
+ (_this$props$onChange2 = (_this$props7 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props7, event, {
170
+ value: '',
171
+ inputText: ''
172
+ });
173
+ }
174
+ // TODO only fire this if handleSelectOption was not called before.
175
+ (_this$props$onHideOpt = (_this$props8 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props8, event);
176
+ };
177
+ // Called when an option is selected via mouse click or Enter.
178
+ this.handleSelectOption = (event, data) => {
179
+ var _this$props$onHideOpt2, _this$props0;
180
+ if (data.id === this._emptyOptionId) {
181
+ this.setState({
182
+ isShowingOptions: false
183
+ });
184
+ return;
185
+ }
186
+ const selectedOption = this.getOption('id', data.id);
187
+ let newInputValue;
188
+ const currentSelectedOptionId = this.state.selectedOptionId;
189
+
190
+ // Focus needs to be reapplied to input
191
+ // after selecting an item to make sure VoiceOver behaves correctly on iOS
192
+ if (utils.isAndroidOrIOS()) {
193
+ this.blur();
194
+ this.focus();
195
+ }
196
+ if (this.isControlled) {
197
+ // in controlled mode we leave to the user to set the value of the
198
+ // component e.g. in the onChange event handler.
199
+ // This is accomplished by not setting a selectedOptionId
200
+ const prev = this.getOption('id', this.state.selectedOptionId);
201
+ newInputValue = prev ? prev.label : '';
202
+ this.setState({
203
+ isShowingOptions: false
204
+ });
205
+ } else {
206
+ newInputValue = selectedOption.label;
207
+ this.setState({
208
+ isShowingOptions: false,
209
+ selectedOptionId: data.id,
210
+ inputValue: newInputValue
211
+ });
212
+ }
213
+ if (data.id !== currentSelectedOptionId) {
214
+ var _this$props$onChange3, _this$props9;
215
+ (_this$props$onChange3 = (_this$props9 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props9, event, {
216
+ value: selectedOption.value.toISOString(),
217
+ inputText: newInputValue
218
+ });
219
+ }
220
+ (_this$props$onHideOpt2 = (_this$props0 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props0, event);
221
+ };
222
+ this.handleHighlightOption = (_event, data) => {
223
+ if (data.id === this._emptyOptionId) return;
224
+ this.setState(state => ({
225
+ highlightedOptionId: data.id,
226
+ inputValue: state.inputValue
227
+ }));
228
+ };
229
+ this.parseInputText = inputValue => {
230
+ const input = DateTime.parse(inputValue, this.locale(), this.timezone(), [this.props.format], true);
231
+ const baseDate = this.getBaseDate();
232
+ input.year(baseDate.year());
233
+ input.month(baseDate.month());
234
+ input.date(baseDate.date());
235
+ return input;
236
+ };
237
+ this.state = this.getInitialState();
238
+ }
239
+ componentDidMount() {
240
+ // we'll need to recalculate the state because the context value is
241
+ // set at this point (and it might change locale & timezone)
242
+ this.setState(this.getInitialState());
243
+ }
244
+ focus() {
245
+ var _this$ref;
246
+ (_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.focus();
247
+ }
248
+ blur() {
249
+ this.ref && this.ref.blur();
250
+ }
251
+ get _select() {
252
+ return this.ref;
253
+ }
254
+ get isControlled() {
255
+ return typeof this.props.value !== 'undefined';
256
+ }
257
+ get interaction() {
258
+ return getInteraction({
259
+ props: this.props
260
+ });
261
+ }
262
+ get focused() {
263
+ return this.ref && this.ref.focused;
264
+ }
265
+ get id() {
266
+ return this.ref && this.ref.id;
267
+ }
268
+ locale() {
269
+ if (this.props.locale) {
270
+ return this.props.locale;
271
+ } else if (this.context && this.context.locale) {
272
+ return this.context.locale;
273
+ }
274
+ return Locale.browserLocale();
275
+ }
276
+ timezone() {
277
+ if (this.props.timezone) {
278
+ return this.props.timezone;
279
+ } else if (this.context && this.context.timezone) {
280
+ return this.context.timezone;
281
+ }
282
+ return DateTime.browserTimeZone();
283
+ }
284
+ componentDidUpdate(prevProps) {
285
+ if (this.props.step !== prevProps.step || this.props.format !== prevProps.format || this.props.locale !== prevProps.locale || this.props.timezone !== prevProps.timezone || this.props.allowNonStepInput !== prevProps.allowNonStepInput) {
286
+ // options change, reset everything
287
+ // when controlled, selection will be preserved
288
+ // when uncontrolled, selection will be lost
289
+ this.setState(this.getInitialState());
290
+ }
291
+ if (this.props.value !== prevProps.value) {
292
+ let newValue;
293
+ if (this.props.value) {
294
+ newValue = DateTime.parse(this.props.value, this.locale(), this.timezone());
295
+ }
296
+ // value changed
297
+ const initState = this.getInitialState();
298
+ this.setState(initState);
299
+ // options need to be passed because state is not set immediately
300
+ let option;
301
+ if (!this.isControlled) {
302
+ // preserve current value when changing from controlled to uncontrolled
303
+ if (prevProps.value) {
304
+ option = this.getOption('id', this.getFormattedId(DateTime.parse(prevProps.value, this.locale(), this.timezone())));
305
+ }
306
+ } else if (newValue) {
307
+ option = this.getOption('id', this.getFormattedId(newValue), initState.options);
308
+ }
309
+ const outsideVal = this.props.value ? this.props.value : '';
310
+ // value does not match an existing option
311
+ const date = DateTime.parse(outsideVal, this.locale(), this.timezone());
312
+ let label = '';
313
+ if (date.isValid()) {
314
+ label = this.props.format ? date.format(this.props.format) : date.toISOString();
315
+ }
316
+ this.setState({
317
+ inputValue: option ? option.label : label,
318
+ selectedOptionId: option ? option.id : void 0
319
+ });
320
+ }
321
+ }
322
+ getFormattedId(date) {
323
+ // ISO8601 strings may contain a space. Remove any spaces before using the
324
+ // date as the id.
325
+ return date.toISOString().replace(/\s/g, '');
326
+ }
327
+ getInitialState() {
328
+ const initialOptions = this.generateOptions();
329
+ const initialSelection = this.getInitialOption(initialOptions);
330
+ return {
331
+ inputValue: initialSelection ? initialSelection.label : '',
332
+ options: initialOptions,
333
+ // 288 = 5 min step
334
+ filteredOptions: initialOptions.length > 288 ? initialOptions.filter(opt => opt.value.minute() % this.props.step === 0) : initialOptions,
335
+ isShowingOptions: false,
336
+ highlightedOptionId: initialSelection ? initialSelection.id : void 0,
337
+ selectedOptionId: initialSelection ? initialSelection.id : void 0,
338
+ isInputCleared: false
339
+ };
340
+ }
341
+ getInitialOption(options) {
342
+ const _this$props1 = this.props,
343
+ value = _this$props1.value,
344
+ defaultValue = _this$props1.defaultValue,
345
+ defaultToFirstOption = _this$props1.defaultToFirstOption,
346
+ format = _this$props1.format;
347
+ const initialValue = value || defaultValue;
348
+ if (typeof initialValue === 'string') {
349
+ const date = DateTime.parse(initialValue, this.locale(), this.timezone());
350
+ // get option based on value or defaultValue, if provided
351
+ const option = this.getOption('value', date, options);
352
+ if (option) {
353
+ // value matches an existing option
354
+ return option;
355
+ }
356
+ // value does not match an existing option
357
+ return {
358
+ id: this.getFormattedId(date),
359
+ label: format ? date.format(format) : date.toISOString(),
360
+ value: date
361
+ };
362
+ }
363
+ // otherwise, return first option, if desired
364
+ if (defaultToFirstOption) {
365
+ return options[0];
366
+ }
367
+ return void 0;
368
+ }
369
+ getBaseDate() {
370
+ let baseDate;
371
+ const baseValue = this.props.value || this.props.defaultValue;
372
+ if (baseValue) {
373
+ baseDate = DateTime.parse(baseValue, this.locale(), this.timezone());
374
+ } else {
375
+ baseDate = DateTime.now(this.locale(), this.timezone());
376
+ }
377
+ return baseDate.set({
378
+ second: 0,
379
+ millisecond: 0
380
+ }).clone();
381
+ }
382
+ generateOptions() {
383
+ const date = this.getBaseDate();
384
+ const options = [];
385
+ const step = this.props.step ? this.props.step : 30;
386
+ const maxMinute = this.props.allowNonStepInput ? 60 : 60 / step;
387
+ const minuteStep = this.props.allowNonStepInput ? 1 : step;
388
+ for (let hour = 0; hour < 24; hour++) {
389
+ for (let minute = 0; minute < maxMinute; minute++) {
390
+ const minutes = minute * minuteStep;
391
+ const newDate = date.set({
392
+ hour: hour,
393
+ minute: minutes
394
+ });
395
+ // store time options
396
+ options.push({
397
+ id: this.getFormattedId(newDate),
398
+ value: newDate.clone(),
399
+ label: this.props.format ? newDate.format(this.props.format) : newDate.toISOString()
400
+ });
401
+ }
402
+ }
403
+ return options;
404
+ }
405
+ filterOptions(inputValue) {
406
+ var _this$state3;
407
+ let inputNoSeconds = inputValue;
408
+ // if the input contains seconds disregard them (e.g. if format = LTS)
409
+ if (inputValue.length > 5) {
410
+ // e.g. "5:34:"
411
+ const input = this.parseInputText(inputValue);
412
+ if (input.isValid()) {
413
+ input.set({
414
+ second: 0
415
+ });
416
+ inputNoSeconds = input.format(this.props.format);
417
+ }
418
+ }
419
+ if (this.props.allowNonStepInput && inputNoSeconds.length < 3) {
420
+ var _this$state2;
421
+ // could show too many results, show only step values
422
+ return (_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.options.filter(option => {
423
+ return option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase()) && option.value.minute() % this.props.step == 0;
424
+ });
425
+ }
426
+ return (_this$state3 = this.state) === null || _this$state3 === void 0 ? void 0 : _this$state3.options.filter(option => option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase()));
427
+ }
428
+ renderOptions() {
429
+ const _this$state4 = this.state,
430
+ filteredOptions = _this$state4.filteredOptions,
431
+ highlightedOptionId = _this$state4.highlightedOptionId,
432
+ selectedOptionId = _this$state4.selectedOptionId;
433
+ if (filteredOptions.length < 1) {
434
+ return this.renderEmptyOption();
435
+ }
436
+ return filteredOptions.map(option => {
437
+ const id = option.id,
438
+ label = option.label;
439
+ return _jsx(Select.Option, {
440
+ id: id,
441
+ isHighlighted: id === highlightedOptionId,
442
+ isSelected: id === selectedOptionId,
443
+ children: label
444
+ }, id);
445
+ });
446
+ }
447
+ renderEmptyOption() {
448
+ return _jsx(Select.Option, {
449
+ id: this._emptyOptionId,
450
+ isHighlighted: false,
451
+ isSelected: false,
452
+ children: callRenderProp(this.props.renderEmptyOption)
453
+ });
454
+ }
455
+ render() {
456
+ const _this$props10 = this.props,
457
+ value = _this$props10.value,
458
+ defaultValue = _this$props10.defaultValue,
459
+ placeholder = _this$props10.placeholder,
460
+ renderLabel = _this$props10.renderLabel,
461
+ inputRef = _this$props10.inputRef,
462
+ id = _this$props10.id,
463
+ listRef = _this$props10.listRef,
464
+ renderBeforeInput = _this$props10.renderBeforeInput,
465
+ renderAfterInput = _this$props10.renderAfterInput,
466
+ isRequired = _this$props10.isRequired,
467
+ isInline = _this$props10.isInline,
468
+ width = _this$props10.width,
469
+ format = _this$props10.format,
470
+ step = _this$props10.step,
471
+ optionsMaxWidth = _this$props10.optionsMaxWidth,
472
+ visibleOptionsCount = _this$props10.visibleOptionsCount,
473
+ messages = _this$props10.messages,
474
+ placement = _this$props10.placement,
475
+ constrain = _this$props10.constrain,
476
+ onFocus = _this$props10.onFocus,
477
+ onShowOptions = _this$props10.onShowOptions,
478
+ onHideOptions = _this$props10.onHideOptions,
479
+ onInputChange = _this$props10.onInputChange,
480
+ onKeyDown = _this$props10.onKeyDown,
481
+ mountNode = _this$props10.mountNode,
482
+ rest = _objectWithoutProperties(_this$props10, _excluded);
483
+ const _this$state5 = this.state,
484
+ inputValue = _this$state5.inputValue,
485
+ isShowingOptions = _this$state5.isShowingOptions;
486
+ return _jsx(Select, {
487
+ mountNode: mountNode,
488
+ renderLabel: renderLabel,
489
+ inputValue: inputValue,
490
+ interaction: this.interaction,
491
+ placeholder: placeholder,
492
+ id: id,
493
+ onFocus: onFocus,
494
+ onBlur: this.handleBlur,
495
+ ref: this.handleRef,
496
+ inputRef: inputRef,
497
+ listRef: listRef,
498
+ isRequired: isRequired,
499
+ isInline: isInline,
500
+ width: width,
501
+ optionsMaxWidth: optionsMaxWidth,
502
+ visibleOptionsCount: visibleOptionsCount,
503
+ messages: messages,
504
+ placement: placement,
505
+ constrain: constrain,
506
+ renderBeforeInput: renderBeforeInput,
507
+ renderAfterInput: renderAfterInput,
508
+ isShowingOptions: isShowingOptions,
509
+ onRequestShowOptions: this.handleShowOptions,
510
+ onRequestHideOptions: this.handleBlurOrEsc,
511
+ onRequestHighlightOption: this.handleHighlightOption,
512
+ onRequestSelectOption: this.handleSelectOption,
513
+ onInputChange: this.handleInputChange,
514
+ onKeyDown: this.onKeyDown,
515
+ ...passthroughProps(rest),
516
+ "data-cid": "TimeSelect",
517
+ children: isShowingOptions && this.renderOptions()
518
+ });
519
+ }
520
+ }, _TimeSelect.displayName = "TimeSelect", _TimeSelect.componentId = 'TimeSelect', _TimeSelect.allowedProps = allowedProps, _TimeSelect.defaultProps = {
521
+ defaultToFirstOption: false,
522
+ format: 'LT',
523
+ // see https://momentjs.com/docs/#/displaying/
524
+ step: 30,
525
+ isRequired: false,
526
+ isInline: false,
527
+ visibleOptionsCount: 8,
528
+ placement: 'bottom stretch',
529
+ constrain: 'window',
530
+ renderEmptyOption: '---',
531
+ allowNonStepInput: false,
532
+ allowClearingSelection: false
533
+ }, _TimeSelect.contextType = ApplyLocaleContext, _TimeSelect)) || _class);
534
+ export { TimeSelect };
535
+ export default TimeSelect;
@@ -0,0 +1,26 @@
1
+ /*
2
+ * The MIT License (MIT)
3
+ *
4
+ * Copyright (c) 2015 - present Instructure, Inc.
5
+ *
6
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
7
+ * of this software and associated documentation files (the "Software"), to deal
8
+ * in the Software without restriction, including without limitation the rights
9
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
+ * copies of the Software, and to permit persons to whom the Software is
11
+ * furnished to do so, subject to the following conditions:
12
+ *
13
+ * The above copyright notice and this permission notice shall be included in all
14
+ * copies or substantial portions of the Software.
15
+ *
16
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
+ * SOFTWARE.
23
+ */
24
+
25
+ const allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone', 'allowNonStepInput', 'onInputChange', 'allowClearingSelection'];
26
+ export { allowedProps };
@@ -0,0 +1,24 @@
1
+ /*
2
+ * The MIT License (MIT)
3
+ *
4
+ * Copyright (c) 2015 - present Instructure, Inc.
5
+ *
6
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
7
+ * of this software and associated documentation files (the "Software"), to deal
8
+ * in the Software without restriction, including without limitation the rights
9
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
+ * copies of the Software, and to permit persons to whom the Software is
11
+ * furnished to do so, subject to the following conditions:
12
+ *
13
+ * The above copyright notice and this permission notice shall be included in all
14
+ * copies or substantial portions of the Software.
15
+ *
16
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
+ * SOFTWARE.
23
+ */
24
+ export { TimeSelect } from "../TimeSelect/v2/index.js";