@instructure/ui-date-input 10.13.1-pr-snapshot-1741357986437 → 10.13.1-snapshot-0
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 +1 -1
- package/lib/DateInput/__new-tests__/DateInput.test.js +8 -8
- package/lib/DateInput/index.js +34 -30
- package/lib/DateInput/props.js +9 -8
- package/lib/DateInput2/__new-tests__/DateInput2.test.js +2 -2
- package/lib/DateInput2/index.js +22 -18
- package/lib/DateInput2/props.js +4 -4
- package/package.json +20 -20
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
|
-
## [10.13.1-
|
6
|
+
## [10.13.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.13.1-snapshot-0) (2025-03-10)
|
7
7
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-date-input
|
9
9
|
|
@@ -7,8 +7,8 @@ var _vitest = require("vitest");
|
|
7
7
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
8
8
|
require("@testing-library/jest-dom");
|
9
9
|
var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
|
10
|
-
var
|
11
|
-
var
|
10
|
+
var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
|
11
|
+
var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
|
12
12
|
var _DateInput = _interopRequireDefault(require("../__examples__/DateInput.examples"));
|
13
13
|
var _index = require("../index");
|
14
14
|
var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
|
@@ -38,11 +38,11 @@ var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
|
|
38
38
|
// eslint-disable-next-line no-restricted-imports
|
39
39
|
describe('<DateInput />', () => {
|
40
40
|
const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
41
|
-
const generateDays = (count =
|
41
|
+
const generateDays = (count = _Calendar.Calendar.DAY_COUNT) => {
|
42
42
|
const days = [];
|
43
43
|
const date = new Date('2019-07-28');
|
44
44
|
while (days.length < count) {
|
45
|
-
days.push(/*#__PURE__*/_react.default.createElement(
|
45
|
+
days.push(/*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
|
46
46
|
key: date.toISOString(),
|
47
47
|
date: date.toISOString(),
|
48
48
|
label: date.toISOString()
|
@@ -441,7 +441,7 @@ describe('<DateInput />', () => {
|
|
441
441
|
const onRequestHideCalendar = _vitest.vi.fn();
|
442
442
|
const onRequestValidateDate = _vitest.vi.fn();
|
443
443
|
const days = generateDays();
|
444
|
-
days[4] = _Calendar$Day || (_Calendar$Day = /*#__PURE__*/_react.default.createElement(
|
444
|
+
days[4] = _Calendar$Day || (_Calendar$Day = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
|
445
445
|
key: "4",
|
446
446
|
label: "4",
|
447
447
|
date: "2019-09-28",
|
@@ -514,7 +514,7 @@ describe('<DateInput />', () => {
|
|
514
514
|
});
|
515
515
|
it('should render days with the correct role', async () => {
|
516
516
|
const days = generateDays();
|
517
|
-
days[5] = _Calendar$Day2 || (_Calendar$Day2 = /*#__PURE__*/_react.default.createElement(
|
517
|
+
days[5] = _Calendar$Day2 || (_Calendar$Day2 = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
|
518
518
|
key: "5",
|
519
519
|
label: "5",
|
520
520
|
date: "2019-09-28",
|
@@ -538,7 +538,7 @@ describe('<DateInput />', () => {
|
|
538
538
|
});
|
539
539
|
it('should assign aria-selected to the selected date and link it to the input', async () => {
|
540
540
|
const days = generateDays();
|
541
|
-
days[7] = _Calendar$Day3 || (_Calendar$Day3 = /*#__PURE__*/_react.default.createElement(
|
541
|
+
days[7] = _Calendar$Day3 || (_Calendar$Day3 = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
|
542
542
|
key: "7",
|
543
543
|
label: "7",
|
544
544
|
date: "2019-09-28",
|
@@ -572,7 +572,7 @@ describe('<DateInput />', () => {
|
|
572
572
|
}) => {
|
573
573
|
const _render7 = (0, _react2.render)(content),
|
574
574
|
container = _render7.container;
|
575
|
-
const axeCheck = await (0,
|
575
|
+
const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
|
576
576
|
expect(axeCheck).toBe(true);
|
577
577
|
});
|
578
578
|
});
|
package/lib/DateInput/index.js
CHANGED
@@ -8,15 +8,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
exports.default = exports.DateInput = void 0;
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
11
|
-
var
|
12
|
-
var
|
13
|
-
var
|
14
|
-
var
|
15
|
-
var
|
16
|
-
var
|
17
|
-
var
|
18
|
-
var
|
19
|
-
var
|
11
|
+
var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
|
12
|
+
var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
|
13
|
+
var _Popover = require("@instructure/ui-popover/lib/Popover");
|
14
|
+
var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
|
15
|
+
var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
|
16
|
+
var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
|
17
|
+
var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
|
18
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
19
|
+
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
20
|
+
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
21
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
22
|
+
var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
|
23
|
+
var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
|
20
24
|
var _emotion = require("@instructure/emotion");
|
21
25
|
var _styles = _interopRequireDefault(require("./styles"));
|
22
26
|
var _props2 = require("./props");
|
@@ -52,7 +56,7 @@ var _dec, _dec2, _class, _DateInput, _IconCalendarMonthLin;
|
|
52
56
|
category: components
|
53
57
|
---
|
54
58
|
**/
|
55
|
-
let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0,
|
59
|
+
let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_DateInput = class DateInput extends _react.Component {
|
56
60
|
constructor(...args) {
|
57
61
|
super(...args);
|
58
62
|
this.state = {
|
@@ -103,7 +107,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
103
107
|
const messages = [];
|
104
108
|
// check if date is enabled
|
105
109
|
const disabledDates = this.props.disabledDates;
|
106
|
-
if (typeof disabledDates === 'function' && disabledDates(date) || Array.isArray(disabledDates) && disabledDates.find(dateString =>
|
110
|
+
if (typeof disabledDates === 'function' && disabledDates(date) || Array.isArray(disabledDates) && disabledDates.find(dateString => _DateTime.DateTime.parse(dateString, this.locale(), this.timezone()).isSame(_DateTime.DateTime.parse(date, this.locale(), this.timezone()), 'day'))) {
|
107
111
|
messages.push(typeof disabledDateErrorMessage === 'function' ? disabledDateErrorMessage(date) : {
|
108
112
|
type: 'error',
|
109
113
|
text: disabledDateErrorMessage
|
@@ -111,7 +115,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
111
115
|
}
|
112
116
|
|
113
117
|
// check if date is valid
|
114
|
-
if (!
|
118
|
+
if (!_DateTime.DateTime.parse(date, this.locale(), this.timezone(), [_DateTime.DateTime.momentISOFormat, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], true).isValid()) {
|
115
119
|
messages.push(typeof invalidDateErrorMessage === 'function' ? invalidDateErrorMessage(date) : {
|
116
120
|
type: 'error',
|
117
121
|
text: invalidDateErrorMessage
|
@@ -151,14 +155,14 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
151
155
|
onChange = _this$props7.onChange,
|
152
156
|
value = _this$props7.value,
|
153
157
|
currentDate = _this$props7.currentDate;
|
154
|
-
const isValueValid = value &&
|
158
|
+
const isValueValid = value && _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid();
|
155
159
|
if (direction === -1) {
|
156
160
|
if (onRequestSelectPrevDay) {
|
157
161
|
onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
|
158
162
|
} else {
|
159
163
|
// @ts-expect-error TODO
|
160
164
|
onChange(event, {
|
161
|
-
value:
|
165
|
+
value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('MMMM D, YYYY')
|
162
166
|
});
|
163
167
|
this.setState({
|
164
168
|
messages: []
|
@@ -171,7 +175,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
171
175
|
} else {
|
172
176
|
// @ts-expect-error TODO
|
173
177
|
onChange(event, {
|
174
|
-
value:
|
178
|
+
value: _DateTime.DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('MMMM D, YYYY')
|
175
179
|
});
|
176
180
|
this.setState({
|
177
181
|
messages: []
|
@@ -187,7 +191,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
187
191
|
} else if (this.context && this.context.locale) {
|
188
192
|
return this.context.locale;
|
189
193
|
}
|
190
|
-
return
|
194
|
+
return _Locale.Locale.browserLocale();
|
191
195
|
}
|
192
196
|
timezone() {
|
193
197
|
if (this.props.timezone) {
|
@@ -195,7 +199,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
195
199
|
} else if (this.context && this.context.timezone) {
|
196
200
|
return this.context.timezone;
|
197
201
|
}
|
198
|
-
return
|
202
|
+
return _DateTime.DateTime.browserTimeZone();
|
199
203
|
}
|
200
204
|
componentDidMount() {
|
201
205
|
var _this$props$makeStyle, _this$props8;
|
@@ -218,7 +222,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
218
222
|
return selectedDateId;
|
219
223
|
}
|
220
224
|
get interaction() {
|
221
|
-
return (0,
|
225
|
+
return (0, _getInteraction.getInteraction)({
|
222
226
|
props: this.props
|
223
227
|
});
|
224
228
|
}
|
@@ -227,7 +231,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
227
231
|
renderPrevMonthButton = _this$props10.renderPrevMonthButton,
|
228
232
|
renderNextMonthButton = _this$props10.renderNextMonthButton;
|
229
233
|
const button = type === 'prev' ? renderPrevMonthButton : renderNextMonthButton;
|
230
|
-
return button && (0,
|
234
|
+
return button && (0, _safeCloneElement.safeCloneElement)((0, _callRenderProp.callRenderProp)(button), {
|
231
235
|
tabIndex: -1
|
232
236
|
});
|
233
237
|
}
|
@@ -248,7 +252,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
248
252
|
onClick: optionProps.onClick,
|
249
253
|
role: 'presentation'
|
250
254
|
} : optionProps;
|
251
|
-
return (0,
|
255
|
+
return (0, _safeCloneElement.safeCloneElement)(day, propsAdded);
|
252
256
|
});
|
253
257
|
}
|
254
258
|
renderCalendar({
|
@@ -264,7 +268,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
264
268
|
onChange = _this$props11.onChange,
|
265
269
|
disabledDates = _this$props11.disabledDates,
|
266
270
|
currentDate = _this$props11.currentDate;
|
267
|
-
const isValidDate = value ?
|
271
|
+
const isValidDate = value ? _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
|
268
272
|
const noChildrenProps = this.props.children ? {} : {
|
269
273
|
disabledDates,
|
270
274
|
currentDate,
|
@@ -278,7 +282,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
278
282
|
this.handleHideCalendar(e, dateString);
|
279
283
|
}
|
280
284
|
};
|
281
|
-
return (0, _emotion.jsx)(
|
285
|
+
return (0, _emotion.jsx)(_Calendar.Calendar, Object.assign({}, getListProps({
|
282
286
|
onRequestRenderNextMonth,
|
283
287
|
onRequestRenderPrevMonth,
|
284
288
|
renderNavigationLabel,
|
@@ -314,8 +318,8 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
314
318
|
ref = _getTriggerProps.ref,
|
315
319
|
triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded2);
|
316
320
|
const messages = this.props.messages || this.state.messages;
|
317
|
-
return (0, _emotion.jsx)(
|
318
|
-
renderLabel: (0,
|
321
|
+
return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, triggerProps, (0, _passthroughProps.passthroughProps)(rest), getInputProps({
|
322
|
+
renderLabel: (0, _callRenderProp.callRenderProp)(renderLabel),
|
319
323
|
value,
|
320
324
|
placeholder,
|
321
325
|
size,
|
@@ -323,12 +327,12 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
323
327
|
width,
|
324
328
|
messages,
|
325
329
|
onChange: this.handleInputChange,
|
326
|
-
onBlur: (0,
|
327
|
-
inputRef: (0,
|
330
|
+
onBlur: (0, _createChainedFunction.createChainedFunction)(onBlur, this.handleHideCalendar),
|
331
|
+
inputRef: (0, _createChainedFunction.createChainedFunction)(ref, this.handleInputRef),
|
328
332
|
interaction,
|
329
333
|
isRequired,
|
330
334
|
display: isInline ? 'inline-block' : 'block',
|
331
|
-
renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(
|
335
|
+
renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, {
|
332
336
|
inline: false
|
333
337
|
}))
|
334
338
|
}), {
|
@@ -350,7 +354,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
350
354
|
assistiveText = _this$props13.assistiveText,
|
351
355
|
styles = _this$props13.styles;
|
352
356
|
const isShowingCalendar = this.shouldShowCalendar();
|
353
|
-
return (0, _emotion.jsx)(
|
357
|
+
return (0, _emotion.jsx)(_Selectable.Selectable, {
|
354
358
|
isShowingOptions: isShowingCalendar,
|
355
359
|
onRequestShowOptions: this.handleShowCalendar,
|
356
360
|
onRequestHideOptions: this.handleHideCalendar,
|
@@ -374,7 +378,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
374
378
|
getTriggerProps
|
375
379
|
}), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
|
376
380
|
css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
|
377
|
-
}), assistiveText), (0, _emotion.jsx)(
|
381
|
+
}), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
|
378
382
|
placement: placement,
|
379
383
|
isShowingContent: isShowingCalendar,
|
380
384
|
positionTarget: this._input,
|
@@ -385,7 +389,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
385
389
|
getOptionProps
|
386
390
|
}))));
|
387
391
|
}
|
388
|
-
}, _DateInput.displayName = "DateInput", _DateInput.componentId = 'DateInput', _DateInput.Day =
|
392
|
+
}, _DateInput.displayName = "DateInput", _DateInput.componentId = 'DateInput', _DateInput.Day = _Calendar.Calendar.Day, _DateInput.propTypes = _props2.propTypes, _DateInput.allowedProps = _props2.allowedProps, _DateInput.defaultProps = {
|
389
393
|
value: '',
|
390
394
|
size: 'medium',
|
391
395
|
onBlur: () => {},
|
package/lib/DateInput/props.js
CHANGED
@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
var
|
10
|
-
var
|
11
|
-
var
|
12
|
-
var
|
9
|
+
var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
|
10
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
11
|
+
var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
|
12
|
+
var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
|
13
|
+
var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
|
13
14
|
/*
|
14
15
|
* The MIT License (MIT)
|
15
16
|
*
|
@@ -36,7 +37,7 @@ var _uiCalendar = require("@instructure/ui-calendar");
|
|
36
37
|
|
37
38
|
const propTypes = exports.propTypes = {
|
38
39
|
renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
|
39
|
-
value: (0,
|
40
|
+
value: (0, _controllable.controllable)(_propTypes.default.string),
|
40
41
|
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
41
42
|
placeholder: _propTypes.default.string,
|
42
43
|
onChange: _propTypes.default.func,
|
@@ -49,8 +50,8 @@ const propTypes = exports.propTypes = {
|
|
49
50
|
width: _propTypes.default.string,
|
50
51
|
display: _propTypes.default.oneOf(['inline-block', 'block']),
|
51
52
|
inputRef: _propTypes.default.func,
|
52
|
-
messages: _propTypes.default.arrayOf(
|
53
|
-
placement:
|
53
|
+
messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
|
54
|
+
placement: _PositionPropTypes.PositionPropTypes.placement,
|
54
55
|
isShowingCalendar: _propTypes.default.bool,
|
55
56
|
onRequestValidateDate: _propTypes.default.func,
|
56
57
|
onRequestShowCalendar: _propTypes.default.func,
|
@@ -63,7 +64,7 @@ const propTypes = exports.propTypes = {
|
|
63
64
|
renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])),
|
64
65
|
renderNextMonthButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
|
65
66
|
renderPrevMonthButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
|
66
|
-
children:
|
67
|
+
children: _Children.Children.oneOf([_Calendar.Calendar.Day]),
|
67
68
|
disabledDates: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func]),
|
68
69
|
currentDate: _propTypes.default.string,
|
69
70
|
disabledDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
|
@@ -8,7 +8,7 @@ var _react2 = require("@testing-library/react");
|
|
8
8
|
var _vitest = require("vitest");
|
9
9
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
10
10
|
require("@testing-library/jest-dom");
|
11
|
-
var
|
11
|
+
var _IconHeartLine2 = require("@instructure/ui-icons/lib/IconHeartLine.js");
|
12
12
|
var _index = require("../index");
|
13
13
|
var _DateInputExample, _DateInputExample2, _IconHeartLine, _DateInputExample3, _DateInputExample4;
|
14
14
|
/*
|
@@ -121,7 +121,7 @@ describe('<DateInput2 />', () => {
|
|
121
121
|
prevMonthButton: 'Previous month'
|
122
122
|
},
|
123
123
|
value: "",
|
124
|
-
renderCalendarIcon: _IconHeartLine || (_IconHeartLine = /*#__PURE__*/_react.default.createElement(
|
124
|
+
renderCalendarIcon: _IconHeartLine || (_IconHeartLine = /*#__PURE__*/_react.default.createElement(_IconHeartLine2.IconHeartLine, null))
|
125
125
|
})),
|
126
126
|
container = _render4.container;
|
127
127
|
const calendarIcon = container.querySelector('svg[name="IconHeart"]');
|
package/lib/DateInput2/index.js
CHANGED
@@ -7,13 +7,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports.default = exports.DateInput2 = void 0;
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
9
|
var _react = require("react");
|
10
|
-
var
|
11
|
-
var
|
12
|
-
var
|
13
|
-
var
|
14
|
-
var
|
15
|
-
var
|
16
|
-
var
|
10
|
+
var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
|
11
|
+
var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
|
12
|
+
var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
|
13
|
+
var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
|
14
|
+
var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
|
15
|
+
var _Popover = require("@instructure/ui-popover/lib/Popover");
|
16
|
+
var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
|
17
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
18
|
+
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
19
|
+
var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
|
20
|
+
var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
|
17
21
|
var _emotion = require("@instructure/emotion");
|
18
22
|
var _props = require("./props");
|
19
23
|
var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
|
@@ -141,7 +145,7 @@ const DateInput2 = ({
|
|
141
145
|
inputRef,
|
142
146
|
...rest
|
143
147
|
}) => {
|
144
|
-
const localeContext = (0, _react.useContext)(
|
148
|
+
const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
|
145
149
|
const getLocale = () => {
|
146
150
|
if (locale) {
|
147
151
|
return locale;
|
@@ -149,7 +153,7 @@ const DateInput2 = ({
|
|
149
153
|
return localeContext.locale;
|
150
154
|
}
|
151
155
|
// default to the system's locale
|
152
|
-
return
|
156
|
+
return _Locale.Locale.browserLocale();
|
153
157
|
};
|
154
158
|
const getTimezone = () => {
|
155
159
|
if (timezone) {
|
@@ -255,7 +259,7 @@ const DateInput2 = ({
|
|
255
259
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
|
256
260
|
};
|
257
261
|
const selectedDate = parseDate(value)[1];
|
258
|
-
return (0, _emotion.jsx)(
|
262
|
+
return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
|
259
263
|
inputRef: inputRef,
|
260
264
|
renderLabel: renderLabel,
|
261
265
|
onChange: handleInputChange,
|
@@ -268,14 +272,14 @@ const DateInput2 = ({
|
|
268
272
|
messages: inputMessages,
|
269
273
|
interaction: interaction,
|
270
274
|
margin: margin,
|
271
|
-
renderAfterInput: (0, _emotion.jsx)(
|
272
|
-
renderTrigger: (0, _emotion.jsx)(
|
275
|
+
renderAfterInput: (0, _emotion.jsx)(_Popover.Popover, {
|
276
|
+
renderTrigger: (0, _emotion.jsx)(_IconButton.IconButton, {
|
273
277
|
withBackground: false,
|
274
278
|
withBorder: false,
|
275
279
|
screenReaderLabel: screenReaderLabels.calendarIcon,
|
276
280
|
shape: "circle",
|
277
281
|
interaction: interaction
|
278
|
-
}, renderCalendarIcon ? (0,
|
282
|
+
}, renderCalendarIcon ? (0, _callRenderProp.callRenderProp)(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
|
279
283
|
isShowingContent: showPopover,
|
280
284
|
onShowContent: () => setShowPopover(true),
|
281
285
|
onHideContent: () => setShowPopover(false),
|
@@ -283,7 +287,7 @@ const DateInput2 = ({
|
|
283
287
|
shouldContainFocus: true,
|
284
288
|
shouldReturnFocus: true,
|
285
289
|
shouldCloseOnDocumentClick: true
|
286
|
-
}, (0, _emotion.jsx)(
|
290
|
+
}, (0, _emotion.jsx)(_Calendar.Calendar, {
|
287
291
|
withYearPicker: withYearPicker,
|
288
292
|
onDateSelected: handleDateSelected,
|
289
293
|
selectedDate: selectedDate,
|
@@ -291,20 +295,20 @@ const DateInput2 = ({
|
|
291
295
|
visibleMonth: selectedDate,
|
292
296
|
locale: getLocale(),
|
293
297
|
timezone: getTimezone(),
|
294
|
-
renderNextMonthButton: (0, _emotion.jsx)(
|
298
|
+
renderNextMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
|
295
299
|
size: "small",
|
296
300
|
withBackground: false,
|
297
301
|
withBorder: false,
|
298
|
-
renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(
|
302
|
+
renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
|
299
303
|
color: "primary"
|
300
304
|
})),
|
301
305
|
screenReaderLabel: screenReaderLabels.nextMonthButton
|
302
306
|
}),
|
303
|
-
renderPrevMonthButton: (0, _emotion.jsx)(
|
307
|
+
renderPrevMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
|
304
308
|
size: "small",
|
305
309
|
withBackground: false,
|
306
310
|
withBorder: false,
|
307
|
-
renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _emotion.jsx)(
|
311
|
+
renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _emotion.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
|
308
312
|
color: "primary"
|
309
313
|
})),
|
310
314
|
screenReaderLabel: screenReaderLabels.prevMonthButton
|
package/lib/DateInput2/props.js
CHANGED
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.propTypes = void 0;
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
var
|
10
|
-
var
|
9
|
+
var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
|
10
|
+
var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
|
11
11
|
/*
|
12
12
|
* The MIT License (MIT)
|
13
13
|
*
|
@@ -35,7 +35,7 @@ var _uiFormField = require("@instructure/ui-form-field");
|
|
35
35
|
const propTypes = exports.propTypes = {
|
36
36
|
renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
|
37
37
|
screenReaderLabels: _propTypes.default.object.isRequired,
|
38
|
-
value: (0,
|
38
|
+
value: (0, _controllable.controllable)(_propTypes.default.string),
|
39
39
|
placeholder: _propTypes.default.string,
|
40
40
|
onChange: _propTypes.default.func,
|
41
41
|
onBlur: _propTypes.default.func,
|
@@ -43,7 +43,7 @@ const propTypes = exports.propTypes = {
|
|
43
43
|
isRequired: _propTypes.default.bool,
|
44
44
|
isInline: _propTypes.default.bool,
|
45
45
|
width: _propTypes.default.string,
|
46
|
-
messages: _propTypes.default.arrayOf(
|
46
|
+
messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
|
47
47
|
invalidDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
|
48
48
|
locale: _propTypes.default.string,
|
49
49
|
timezone: _propTypes.default.string,
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@instructure/ui-date-input",
|
3
|
-
"version": "10.13.1-
|
3
|
+
"version": "10.13.1-snapshot-0",
|
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,11 +23,11 @@
|
|
23
23
|
},
|
24
24
|
"license": "MIT",
|
25
25
|
"devDependencies": {
|
26
|
-
"@instructure/ui-axe-check": "10.13.1-
|
27
|
-
"@instructure/ui-babel-preset": "10.13.1-
|
28
|
-
"@instructure/ui-buttons": "10.13.1-
|
29
|
-
"@instructure/ui-scripts": "10.13.1-
|
30
|
-
"@instructure/ui-test-utils": "10.13.1-
|
26
|
+
"@instructure/ui-axe-check": "10.13.1-snapshot-0",
|
27
|
+
"@instructure/ui-babel-preset": "10.13.1-snapshot-0",
|
28
|
+
"@instructure/ui-buttons": "10.13.1-snapshot-0",
|
29
|
+
"@instructure/ui-scripts": "10.13.1-snapshot-0",
|
30
|
+
"@instructure/ui-test-utils": "10.13.1-snapshot-0",
|
31
31
|
"@testing-library/jest-dom": "^6.6.3",
|
32
32
|
"@testing-library/react": "^16.0.1",
|
33
33
|
"@testing-library/user-event": "^14.5.2",
|
@@ -35,20 +35,20 @@
|
|
35
35
|
},
|
36
36
|
"dependencies": {
|
37
37
|
"@babel/runtime": "^7.26.0",
|
38
|
-
"@instructure/emotion": "10.13.1-
|
39
|
-
"@instructure/shared-types": "10.13.1-
|
40
|
-
"@instructure/ui-calendar": "10.13.1-
|
41
|
-
"@instructure/ui-form-field": "10.13.1-
|
42
|
-
"@instructure/ui-i18n": "10.13.1-
|
43
|
-
"@instructure/ui-icons": "10.13.1-
|
44
|
-
"@instructure/ui-popover": "10.13.1-
|
45
|
-
"@instructure/ui-position": "10.13.1-
|
46
|
-
"@instructure/ui-prop-types": "10.13.1-
|
47
|
-
"@instructure/ui-react-utils": "10.13.1-
|
48
|
-
"@instructure/ui-selectable": "10.13.1-
|
49
|
-
"@instructure/ui-testable": "10.13.1-
|
50
|
-
"@instructure/ui-text-input": "10.13.1-
|
51
|
-
"@instructure/ui-utils": "10.13.1-
|
38
|
+
"@instructure/emotion": "10.13.1-snapshot-0",
|
39
|
+
"@instructure/shared-types": "10.13.1-snapshot-0",
|
40
|
+
"@instructure/ui-calendar": "10.13.1-snapshot-0",
|
41
|
+
"@instructure/ui-form-field": "10.13.1-snapshot-0",
|
42
|
+
"@instructure/ui-i18n": "10.13.1-snapshot-0",
|
43
|
+
"@instructure/ui-icons": "10.13.1-snapshot-0",
|
44
|
+
"@instructure/ui-popover": "10.13.1-snapshot-0",
|
45
|
+
"@instructure/ui-position": "10.13.1-snapshot-0",
|
46
|
+
"@instructure/ui-prop-types": "10.13.1-snapshot-0",
|
47
|
+
"@instructure/ui-react-utils": "10.13.1-snapshot-0",
|
48
|
+
"@instructure/ui-selectable": "10.13.1-snapshot-0",
|
49
|
+
"@instructure/ui-testable": "10.13.1-snapshot-0",
|
50
|
+
"@instructure/ui-text-input": "10.13.1-snapshot-0",
|
51
|
+
"@instructure/ui-utils": "10.13.1-snapshot-0",
|
52
52
|
"moment-timezone": "^0.5.45",
|
53
53
|
"prop-types": "^15.8.1"
|
54
54
|
},
|