@instructure/ui-calendar 11.7.8 → 11.7.9-snapshot-1
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 +8 -0
- package/lib/Calendar/v1/Day/index.js +6 -8
- package/lib/Calendar/v1/index.js +35 -41
- package/lib/Calendar/v2/Day/index.js +6 -8
- package/lib/Calendar/v2/index.js +32 -37
- package/package.json +16 -16
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.9-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-calendar
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @instructure/ui-calendar
|
|
@@ -7,10 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.Day = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
13
|
-
var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
|
|
10
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
11
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
14
12
|
var _emotion = require("@instructure/emotion");
|
|
15
13
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
16
14
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -78,7 +76,7 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
|
|
|
78
76
|
const {
|
|
79
77
|
as
|
|
80
78
|
} = this.props;
|
|
81
|
-
return as || (0,
|
|
79
|
+
return as || (0, _uiReactUtils.getElementType)(Day, this.props);
|
|
82
80
|
}
|
|
83
81
|
shouldApplyAriaSelected() {
|
|
84
82
|
const {
|
|
@@ -136,7 +134,7 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
|
|
|
136
134
|
elementType,
|
|
137
135
|
isDisabled
|
|
138
136
|
} = this;
|
|
139
|
-
const passthroughProps = _v11_.View.omitViewProps((0,
|
|
137
|
+
const passthroughProps = _v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(props, Day.allowedProps), Day);
|
|
140
138
|
return (0, _jsxRuntime.jsx)(_v11_.View, {
|
|
141
139
|
...passthroughProps,
|
|
142
140
|
as: elementType,
|
|
@@ -156,9 +154,9 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
|
|
|
156
154
|
"data-cid": "Calendar.Day",
|
|
157
155
|
children: (0, _jsxRuntime.jsx)("span", {
|
|
158
156
|
css: styles?.day,
|
|
159
|
-
children: (0, _jsxRuntime.jsx)(
|
|
157
|
+
children: (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
160
158
|
alt: selectedLabel && isSelected ? `${label}, ${selectedLabel}` : label,
|
|
161
|
-
children: (0,
|
|
159
|
+
children: (0, _uiReactUtils.callRenderProp)(children)
|
|
162
160
|
})
|
|
163
161
|
})
|
|
164
162
|
});
|
package/lib/Calendar/v1/index.js
CHANGED
|
@@ -7,24 +7,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.Calendar = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
13
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
14
|
-
var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
|
|
10
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
15
12
|
var _console = require("@instructure/console");
|
|
16
|
-
var
|
|
13
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
17
14
|
var _emotion = require("@instructure/emotion");
|
|
18
|
-
var
|
|
19
|
-
var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
|
|
20
|
-
var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
|
|
15
|
+
var _uiI18n = require("@instructure/ui-i18n");
|
|
21
16
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
22
17
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
23
18
|
var _index = require("./Day/index.js");
|
|
24
19
|
var _props = require("./props.js");
|
|
25
20
|
var _v11_2 = require("@instructure/ui-buttons/v11_6");
|
|
26
|
-
var
|
|
27
|
-
var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/generated/IconArrowOpenEndSolid.js");
|
|
21
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
28
22
|
var _v11_3 = require("@instructure/ui-simple-select/v11_6");
|
|
29
23
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
30
24
|
var _dec, _dec2, _class;
|
|
@@ -56,10 +50,10 @@ var _dec, _dec2, _class;
|
|
|
56
50
|
category: components
|
|
57
51
|
---
|
|
58
52
|
**/
|
|
59
|
-
let Calendar = exports.Calendar = (_dec = (0,
|
|
53
|
+
let Calendar = exports.Calendar = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Calendar extends _react.Component {
|
|
60
54
|
static displayName = 'Calendar';
|
|
61
55
|
static componentId = 'Calendar';
|
|
62
|
-
static contextType =
|
|
56
|
+
static contextType = _uiI18n.ApplyLocaleContext;
|
|
63
57
|
static Day = _index.Day;
|
|
64
58
|
static DAY_COUNT = 42; // 6 weeks visible
|
|
65
59
|
|
|
@@ -103,8 +97,8 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
103
97
|
calculateState = (locale, timezone, currentDate) => {
|
|
104
98
|
const visibleMonth = this.props.visibleMonth || currentDate;
|
|
105
99
|
return {
|
|
106
|
-
visibleMonth: visibleMonth ?
|
|
107
|
-
today: currentDate ?
|
|
100
|
+
visibleMonth: visibleMonth ? _uiI18n.DateTime.parse(visibleMonth, locale, timezone) : _uiI18n.DateTime.now(locale, timezone),
|
|
101
|
+
today: currentDate ? _uiI18n.DateTime.parse(currentDate, locale, timezone) : _uiI18n.DateTime.now(locale, timezone)
|
|
108
102
|
};
|
|
109
103
|
};
|
|
110
104
|
get role() {
|
|
@@ -139,24 +133,24 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
139
133
|
months: 1
|
|
140
134
|
}).format('MMMM YYYY');
|
|
141
135
|
return {
|
|
142
|
-
prevButton: renderPrevMonthButton ? (0,
|
|
136
|
+
prevButton: renderPrevMonthButton ? (0, _uiReactUtils.callRenderProp)(renderPrevMonthButton, {
|
|
143
137
|
targetMonthSrLabel: prevMonthName
|
|
144
138
|
}) : (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
|
|
145
139
|
size: "small",
|
|
146
140
|
withBackground: false,
|
|
147
141
|
withBorder: false,
|
|
148
|
-
renderIcon: (0, _jsxRuntime.jsx)(
|
|
142
|
+
renderIcon: (0, _jsxRuntime.jsx)(_uiIcons.IconArrowOpenStartSolid, {
|
|
149
143
|
color: "primary"
|
|
150
144
|
}),
|
|
151
145
|
screenReaderLabel: `Previous month, ${prevMonthName}`
|
|
152
146
|
}),
|
|
153
|
-
nextButton: renderNextMonthButton ? (0,
|
|
147
|
+
nextButton: renderNextMonthButton ? (0, _uiReactUtils.callRenderProp)(renderNextMonthButton, {
|
|
154
148
|
targetMonthSrLabel: nextMonthName
|
|
155
149
|
}) : (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
|
|
156
150
|
size: "small",
|
|
157
151
|
withBackground: false,
|
|
158
152
|
withBorder: false,
|
|
159
|
-
renderIcon: (0, _jsxRuntime.jsx)(
|
|
153
|
+
renderIcon: (0, _jsxRuntime.jsx)(_uiIcons.IconArrowOpenEndSolid, {
|
|
160
154
|
color: "primary"
|
|
161
155
|
}),
|
|
162
156
|
screenReaderLabel: `Next month, ${nextMonthName}`
|
|
@@ -210,7 +204,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
210
204
|
const {
|
|
211
205
|
visibleMonth
|
|
212
206
|
} = this.state;
|
|
213
|
-
const yearNumber = Number(
|
|
207
|
+
const yearNumber = Number(_uiI18n.DateTime.parse(year, this.locale(), this.timezone()).locale('en').format('YYYY'));
|
|
214
208
|
const newDate = visibleMonth.clone();
|
|
215
209
|
if (withYearPicker?.onRequestYearChange) {
|
|
216
210
|
withYearPicker.onRequestYearChange(e, yearNumber);
|
|
@@ -234,8 +228,8 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
234
228
|
prevButton,
|
|
235
229
|
nextButton
|
|
236
230
|
} = this.renderMonthNavigationButtons();
|
|
237
|
-
const cloneButton = (button, onClick) => (0,
|
|
238
|
-
onClick: (0,
|
|
231
|
+
const cloneButton = (button, onClick) => (0, _uiReactUtils.safeCloneElement)(button, {
|
|
232
|
+
onClick: (0, _uiUtils.createChainedFunction)(button.props.onClick, onClick)
|
|
239
233
|
});
|
|
240
234
|
const style = [styles?.navigation, ...(prevButton || nextButton ? [styles?.navigationWithButtons] : [])];
|
|
241
235
|
const yearList = [];
|
|
@@ -246,13 +240,13 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
246
240
|
} = withYearPicker;
|
|
247
241
|
for (let year = endYear; year >= startYear; year--) {
|
|
248
242
|
// add the years to the list with the correct locale
|
|
249
|
-
yearList.push(
|
|
243
|
+
yearList.push(_uiI18n.DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
|
|
250
244
|
}
|
|
251
245
|
}
|
|
252
246
|
return (0, _jsxRuntime.jsxs)("div", {
|
|
253
247
|
children: [(0, _jsxRuntime.jsxs)("div", {
|
|
254
248
|
css: style,
|
|
255
|
-
children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0,
|
|
249
|
+
children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _uiReactUtils.callRenderProp)(renderNavigationLabel) : (0, _jsxRuntime.jsxs)("div", {
|
|
256
250
|
"aria-live": "polite",
|
|
257
251
|
"aria-atomic": "true",
|
|
258
252
|
children: [(0, _jsxRuntime.jsx)("div", {
|
|
@@ -306,33 +300,33 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
306
300
|
scope: "col",
|
|
307
301
|
css: styles?.weekdayHeader,
|
|
308
302
|
id: this._weekdayHeaderIds[i],
|
|
309
|
-
children: (0,
|
|
303
|
+
children: (0, _uiReactUtils.callRenderProp)(label)
|
|
310
304
|
}, i);
|
|
311
305
|
})
|
|
312
306
|
});
|
|
313
307
|
}
|
|
314
308
|
get defaultWeekdays() {
|
|
315
|
-
const shortDayNames =
|
|
316
|
-
const longDayNames =
|
|
317
|
-
return [(0, _jsxRuntime.jsx)(
|
|
309
|
+
const shortDayNames = _uiI18n.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
|
|
310
|
+
const longDayNames = _uiI18n.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
|
|
311
|
+
return [(0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
318
312
|
alt: longDayNames[0],
|
|
319
313
|
children: shortDayNames[0]
|
|
320
|
-
}, 1), (0, _jsxRuntime.jsx)(
|
|
314
|
+
}, 1), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
321
315
|
alt: longDayNames[1],
|
|
322
316
|
children: shortDayNames[1]
|
|
323
|
-
}, 2), (0, _jsxRuntime.jsx)(
|
|
317
|
+
}, 2), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
324
318
|
alt: longDayNames[2],
|
|
325
319
|
children: shortDayNames[2]
|
|
326
|
-
}, 3), (0, _jsxRuntime.jsx)(
|
|
320
|
+
}, 3), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
327
321
|
alt: longDayNames[3],
|
|
328
322
|
children: shortDayNames[3]
|
|
329
|
-
}, 4), (0, _jsxRuntime.jsx)(
|
|
323
|
+
}, 4), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
330
324
|
alt: longDayNames[4],
|
|
331
325
|
children: shortDayNames[4]
|
|
332
|
-
}, 5), (0, _jsxRuntime.jsx)(
|
|
326
|
+
}, 5), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
333
327
|
alt: longDayNames[5],
|
|
334
328
|
children: shortDayNames[5]
|
|
335
|
-
}, 6), (0, _jsxRuntime.jsx)(
|
|
329
|
+
}, 6), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
336
330
|
alt: longDayNames[6],
|
|
337
331
|
children: shortDayNames[6]
|
|
338
332
|
}, 7)];
|
|
@@ -356,10 +350,10 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
356
350
|
role: role,
|
|
357
351
|
children: row.map((day, i) => (0, _jsxRuntime.jsx)("td", {
|
|
358
352
|
role: role,
|
|
359
|
-
children: role === 'presentation' ? (0,
|
|
353
|
+
children: role === 'presentation' ? (0, _uiReactUtils.safeCloneElement)(day, {
|
|
360
354
|
'aria-describedby': this._weekdayHeaderIds[i],
|
|
361
355
|
role: 'option'
|
|
362
|
-
}) : (0,
|
|
356
|
+
}) : (0, _uiReactUtils.safeCloneElement)(day, {
|
|
363
357
|
'aria-describedby': this._weekdayHeaderIds[i],
|
|
364
358
|
role: 'button'
|
|
365
359
|
})
|
|
@@ -372,7 +366,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
372
366
|
} else if (this.context && this.context.locale) {
|
|
373
367
|
return this.context.locale;
|
|
374
368
|
}
|
|
375
|
-
return
|
|
369
|
+
return _uiI18n.Locale.browserLocale();
|
|
376
370
|
}
|
|
377
371
|
timezone() {
|
|
378
372
|
if (this.props.timezone) {
|
|
@@ -380,7 +374,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
380
374
|
} else if (this.context && this.context.timezone) {
|
|
381
375
|
return this.context.timezone;
|
|
382
376
|
}
|
|
383
|
-
return
|
|
377
|
+
return _uiI18n.DateTime.browserTimeZone();
|
|
384
378
|
}
|
|
385
379
|
|
|
386
380
|
// date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
|
|
@@ -388,7 +382,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
388
382
|
date
|
|
389
383
|
}) => {
|
|
390
384
|
if (this.props.onDateSelected) {
|
|
391
|
-
const parsedDate =
|
|
385
|
+
const parsedDate = _uiI18n.DateTime.parse(date, this.locale(), this.timezone());
|
|
392
386
|
this.props.onDateSelected(parsedDate.toISOString(), parsedDate, event);
|
|
393
387
|
}
|
|
394
388
|
};
|
|
@@ -419,7 +413,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
419
413
|
// Sets it to the first local day of the week counting back from the start of the month.
|
|
420
414
|
// Note that first day depends on the locale, e.g. it's Sunday in the US and
|
|
421
415
|
// Monday in most of the EU.
|
|
422
|
-
const currDate =
|
|
416
|
+
const currDate = _uiI18n.DateTime.getFirstDayOfWeek(visibleMonth.clone().startOf('month'));
|
|
423
417
|
const arr = [];
|
|
424
418
|
for (let i = 0; i < Calendar.DAY_COUNT; i++) {
|
|
425
419
|
// This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
|
|
@@ -458,7 +452,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
458
452
|
});
|
|
459
453
|
}
|
|
460
454
|
render() {
|
|
461
|
-
const passthroughProps = _v11_.View.omitViewProps((0,
|
|
455
|
+
const passthroughProps = _v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Calendar.allowedProps), Calendar);
|
|
462
456
|
return (0, _jsxRuntime.jsxs)(_v11_.View, {
|
|
463
457
|
...passthroughProps,
|
|
464
458
|
as: this.props.as,
|
|
@@ -7,10 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.Day = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _latest = require("@instructure/ui-view/latest");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
13
|
-
var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
|
|
10
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
11
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
14
12
|
var _emotion = require("@instructure/emotion");
|
|
15
13
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
16
14
|
var _props = require("./props.js");
|
|
@@ -77,7 +75,7 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyleNew)(_styles.default), _de
|
|
|
77
75
|
const {
|
|
78
76
|
as
|
|
79
77
|
} = this.props;
|
|
80
|
-
return as || (0,
|
|
78
|
+
return as || (0, _uiReactUtils.getElementType)(Day, this.props);
|
|
81
79
|
}
|
|
82
80
|
shouldApplyAriaSelected() {
|
|
83
81
|
const {
|
|
@@ -135,7 +133,7 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyleNew)(_styles.default), _de
|
|
|
135
133
|
elementType,
|
|
136
134
|
isDisabled
|
|
137
135
|
} = this;
|
|
138
|
-
const passthroughProps = _latest.View.omitViewProps((0,
|
|
136
|
+
const passthroughProps = _latest.View.omitViewProps((0, _uiReactUtils.omitProps)(props, Day.allowedProps), Day);
|
|
139
137
|
return (0, _jsxRuntime.jsx)(_latest.View, {
|
|
140
138
|
...passthroughProps,
|
|
141
139
|
as: elementType,
|
|
@@ -155,9 +153,9 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyleNew)(_styles.default), _de
|
|
|
155
153
|
"data-cid": "Calendar.Day",
|
|
156
154
|
children: (0, _jsxRuntime.jsx)("span", {
|
|
157
155
|
css: styles?.day,
|
|
158
|
-
children: (0, _jsxRuntime.jsx)(
|
|
156
|
+
children: (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
159
157
|
alt: selectedLabel && isSelected ? `${label}, ${selectedLabel}` : label,
|
|
160
|
-
children: (0,
|
|
158
|
+
children: (0, _uiReactUtils.callRenderProp)(children)
|
|
161
159
|
})
|
|
162
160
|
})
|
|
163
161
|
});
|
package/lib/Calendar/v2/index.js
CHANGED
|
@@ -7,17 +7,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.Calendar = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _latest = require("@instructure/ui-view/latest");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
13
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
14
|
-
var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
|
|
10
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
15
12
|
var _console = require("@instructure/console");
|
|
16
|
-
var
|
|
13
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
17
14
|
var _emotion = require("@instructure/emotion");
|
|
18
|
-
var
|
|
19
|
-
var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
|
|
20
|
-
var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
|
|
15
|
+
var _uiI18n = require("@instructure/ui-i18n");
|
|
21
16
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
22
17
|
var _index = require("./Day/index.js");
|
|
23
18
|
var _props = require("./props.js");
|
|
@@ -54,10 +49,10 @@ var _dec, _dec2, _class;
|
|
|
54
49
|
category: components
|
|
55
50
|
---
|
|
56
51
|
**/
|
|
57
|
-
let Calendar = exports.Calendar = (_dec = (0,
|
|
52
|
+
let Calendar = exports.Calendar = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class Calendar extends _react.Component {
|
|
58
53
|
static displayName = 'Calendar';
|
|
59
54
|
static componentId = 'Calendar';
|
|
60
|
-
static contextType =
|
|
55
|
+
static contextType = _uiI18n.ApplyLocaleContext;
|
|
61
56
|
static Day = _index.Day;
|
|
62
57
|
static DAY_COUNT = 42; // 6 weeks visible
|
|
63
58
|
|
|
@@ -101,8 +96,8 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
101
96
|
calculateState = (locale, timezone, currentDate) => {
|
|
102
97
|
const visibleMonth = this.props.visibleMonth || currentDate;
|
|
103
98
|
return {
|
|
104
|
-
visibleMonth: visibleMonth ?
|
|
105
|
-
today: currentDate ?
|
|
99
|
+
visibleMonth: visibleMonth ? _uiI18n.DateTime.parse(visibleMonth, locale, timezone) : _uiI18n.DateTime.now(locale, timezone),
|
|
100
|
+
today: currentDate ? _uiI18n.DateTime.parse(currentDate, locale, timezone) : _uiI18n.DateTime.now(locale, timezone)
|
|
106
101
|
};
|
|
107
102
|
};
|
|
108
103
|
get role() {
|
|
@@ -137,7 +132,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
137
132
|
months: 1
|
|
138
133
|
}).format('MMMM YYYY');
|
|
139
134
|
return {
|
|
140
|
-
prevButton: renderPrevMonthButton ? (0,
|
|
135
|
+
prevButton: renderPrevMonthButton ? (0, _uiReactUtils.callRenderProp)(renderPrevMonthButton, {
|
|
141
136
|
targetMonthSrLabel: prevMonthName
|
|
142
137
|
}) : (0, _jsxRuntime.jsx)(_latest2.IconButton, {
|
|
143
138
|
size: "small",
|
|
@@ -148,7 +143,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
148
143
|
}),
|
|
149
144
|
screenReaderLabel: `Previous month, ${prevMonthName}`
|
|
150
145
|
}),
|
|
151
|
-
nextButton: renderNextMonthButton ? (0,
|
|
146
|
+
nextButton: renderNextMonthButton ? (0, _uiReactUtils.callRenderProp)(renderNextMonthButton, {
|
|
152
147
|
targetMonthSrLabel: nextMonthName
|
|
153
148
|
}) : (0, _jsxRuntime.jsx)(_latest2.IconButton, {
|
|
154
149
|
size: "small",
|
|
@@ -208,7 +203,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
208
203
|
const {
|
|
209
204
|
visibleMonth
|
|
210
205
|
} = this.state;
|
|
211
|
-
const yearNumber = Number(
|
|
206
|
+
const yearNumber = Number(_uiI18n.DateTime.parse(year, this.locale(), this.timezone()).locale('en').format('YYYY'));
|
|
212
207
|
const newDate = visibleMonth.clone();
|
|
213
208
|
if (withYearPicker?.onRequestYearChange) {
|
|
214
209
|
withYearPicker.onRequestYearChange(e, yearNumber);
|
|
@@ -232,8 +227,8 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
232
227
|
prevButton,
|
|
233
228
|
nextButton
|
|
234
229
|
} = this.renderMonthNavigationButtons();
|
|
235
|
-
const cloneButton = (button, onClick) => (0,
|
|
236
|
-
onClick: (0,
|
|
230
|
+
const cloneButton = (button, onClick) => (0, _uiReactUtils.safeCloneElement)(button, {
|
|
231
|
+
onClick: (0, _uiUtils.createChainedFunction)(button.props.onClick, onClick)
|
|
237
232
|
});
|
|
238
233
|
const style = [styles?.navigation, ...(prevButton || nextButton ? [styles?.navigationWithButtons] : [])];
|
|
239
234
|
const yearList = [];
|
|
@@ -244,13 +239,13 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
244
239
|
} = withYearPicker;
|
|
245
240
|
for (let year = endYear; year >= startYear; year--) {
|
|
246
241
|
// add the years to the list with the correct locale
|
|
247
|
-
yearList.push(
|
|
242
|
+
yearList.push(_uiI18n.DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
|
|
248
243
|
}
|
|
249
244
|
}
|
|
250
245
|
return (0, _jsxRuntime.jsxs)("div", {
|
|
251
246
|
children: [(0, _jsxRuntime.jsxs)("div", {
|
|
252
247
|
css: style,
|
|
253
|
-
children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0,
|
|
248
|
+
children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _uiReactUtils.callRenderProp)(renderNavigationLabel) : (0, _jsxRuntime.jsxs)("h2", {
|
|
254
249
|
"aria-live": "polite",
|
|
255
250
|
"aria-atomic": "true",
|
|
256
251
|
css: styles?.navigationLabel,
|
|
@@ -305,33 +300,33 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
305
300
|
scope: "col",
|
|
306
301
|
css: styles?.weekdayHeader,
|
|
307
302
|
id: this._weekdayHeaderIds[i],
|
|
308
|
-
children: (0,
|
|
303
|
+
children: (0, _uiReactUtils.callRenderProp)(label)
|
|
309
304
|
}, i);
|
|
310
305
|
})
|
|
311
306
|
});
|
|
312
307
|
}
|
|
313
308
|
get defaultWeekdays() {
|
|
314
|
-
const shortDayNames =
|
|
315
|
-
const longDayNames =
|
|
316
|
-
return [(0, _jsxRuntime.jsx)(
|
|
309
|
+
const shortDayNames = _uiI18n.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
|
|
310
|
+
const longDayNames = _uiI18n.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
|
|
311
|
+
return [(0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
317
312
|
alt: longDayNames[0],
|
|
318
313
|
children: shortDayNames[0]
|
|
319
|
-
}, 1), (0, _jsxRuntime.jsx)(
|
|
314
|
+
}, 1), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
320
315
|
alt: longDayNames[1],
|
|
321
316
|
children: shortDayNames[1]
|
|
322
|
-
}, 2), (0, _jsxRuntime.jsx)(
|
|
317
|
+
}, 2), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
323
318
|
alt: longDayNames[2],
|
|
324
319
|
children: shortDayNames[2]
|
|
325
|
-
}, 3), (0, _jsxRuntime.jsx)(
|
|
320
|
+
}, 3), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
326
321
|
alt: longDayNames[3],
|
|
327
322
|
children: shortDayNames[3]
|
|
328
|
-
}, 4), (0, _jsxRuntime.jsx)(
|
|
323
|
+
}, 4), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
329
324
|
alt: longDayNames[4],
|
|
330
325
|
children: shortDayNames[4]
|
|
331
|
-
}, 5), (0, _jsxRuntime.jsx)(
|
|
326
|
+
}, 5), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
332
327
|
alt: longDayNames[5],
|
|
333
328
|
children: shortDayNames[5]
|
|
334
|
-
}, 6), (0, _jsxRuntime.jsx)(
|
|
329
|
+
}, 6), (0, _jsxRuntime.jsx)(_uiA11yContent.AccessibleContent, {
|
|
335
330
|
alt: longDayNames[6],
|
|
336
331
|
children: shortDayNames[6]
|
|
337
332
|
}, 7)];
|
|
@@ -367,10 +362,10 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
367
362
|
role: role,
|
|
368
363
|
children: row.map((day, i) => (0, _jsxRuntime.jsx)("td", {
|
|
369
364
|
role: role,
|
|
370
|
-
children: role === 'presentation' ? (0,
|
|
365
|
+
children: role === 'presentation' ? (0, _uiReactUtils.safeCloneElement)(day, {
|
|
371
366
|
'aria-describedby': this._weekdayHeaderIds[i],
|
|
372
367
|
role: 'option'
|
|
373
|
-
}) : (0,
|
|
368
|
+
}) : (0, _uiReactUtils.safeCloneElement)(day, {
|
|
374
369
|
'aria-describedby': this._weekdayHeaderIds[i],
|
|
375
370
|
role: 'button'
|
|
376
371
|
})
|
|
@@ -383,7 +378,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
383
378
|
} else if (this.context && this.context.locale) {
|
|
384
379
|
return this.context.locale;
|
|
385
380
|
}
|
|
386
|
-
return
|
|
381
|
+
return _uiI18n.Locale.browserLocale();
|
|
387
382
|
}
|
|
388
383
|
timezone() {
|
|
389
384
|
if (this.props.timezone) {
|
|
@@ -391,7 +386,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
391
386
|
} else if (this.context && this.context.timezone) {
|
|
392
387
|
return this.context.timezone;
|
|
393
388
|
}
|
|
394
|
-
return
|
|
389
|
+
return _uiI18n.DateTime.browserTimeZone();
|
|
395
390
|
}
|
|
396
391
|
|
|
397
392
|
// date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
|
|
@@ -399,7 +394,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
399
394
|
date
|
|
400
395
|
}) => {
|
|
401
396
|
if (this.props.onDateSelected) {
|
|
402
|
-
const parsedDate =
|
|
397
|
+
const parsedDate = _uiI18n.DateTime.parse(date, this.locale(), this.timezone());
|
|
403
398
|
this.props.onDateSelected(parsedDate.toISOString(), parsedDate, event);
|
|
404
399
|
}
|
|
405
400
|
};
|
|
@@ -429,7 +424,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
429
424
|
// Sets it to the first local day of the week counting back from the start of the month.
|
|
430
425
|
// Note that first day depends on the locale, e.g. it's Sunday in the US and
|
|
431
426
|
// Monday in most of the EU.
|
|
432
|
-
const currDate =
|
|
427
|
+
const currDate = _uiI18n.DateTime.getFirstDayOfWeek(visibleMonth.clone().startOf('month'));
|
|
433
428
|
const arr = [];
|
|
434
429
|
for (let i = 0; i < Calendar.DAY_COUNT; i++) {
|
|
435
430
|
// This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
|
|
@@ -468,7 +463,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
468
463
|
});
|
|
469
464
|
}
|
|
470
465
|
render() {
|
|
471
|
-
const passthroughProps = _latest.View.omitViewProps((0,
|
|
466
|
+
const passthroughProps = _latest.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Calendar.allowedProps), Calendar);
|
|
472
467
|
return (0, _jsxRuntime.jsxs)(_latest.View, {
|
|
473
468
|
...passthroughProps,
|
|
474
469
|
as: this.props.as,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-calendar",
|
|
3
|
-
"version": "11.7.
|
|
3
|
+
"version": "11.7.9-snapshot-1",
|
|
4
4
|
"description": "A calendar component.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -15,24 +15,24 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "^7.29.7",
|
|
18
|
-
"@instructure/
|
|
19
|
-
"@instructure/
|
|
20
|
-
"@instructure/
|
|
21
|
-
"@instructure/ui-a11y-content": "11.7.
|
|
22
|
-
"@instructure/ui-buttons": "11.7.
|
|
23
|
-
"@instructure/ui-i18n": "11.7.
|
|
24
|
-
"@instructure/ui-icons": "11.7.
|
|
25
|
-
"@instructure/ui-
|
|
26
|
-
"@instructure/ui-
|
|
27
|
-
"@instructure/ui-
|
|
28
|
-
"@instructure/
|
|
29
|
-
"@instructure/
|
|
30
|
-
"@instructure/ui-
|
|
18
|
+
"@instructure/console": "11.7.9-snapshot-1",
|
|
19
|
+
"@instructure/emotion": "11.7.9-snapshot-1",
|
|
20
|
+
"@instructure/shared-types": "11.7.9-snapshot-1",
|
|
21
|
+
"@instructure/ui-a11y-content": "11.7.9-snapshot-1",
|
|
22
|
+
"@instructure/ui-buttons": "11.7.9-snapshot-1",
|
|
23
|
+
"@instructure/ui-i18n": "11.7.9-snapshot-1",
|
|
24
|
+
"@instructure/ui-icons": "11.7.9-snapshot-1",
|
|
25
|
+
"@instructure/ui-react-utils": "11.7.9-snapshot-1",
|
|
26
|
+
"@instructure/ui-simple-select": "11.7.9-snapshot-1",
|
|
27
|
+
"@instructure/ui-themes": "11.7.9-snapshot-1",
|
|
28
|
+
"@instructure/ui-utils": "11.7.9-snapshot-1",
|
|
29
|
+
"@instructure/uid": "11.7.9-snapshot-1",
|
|
30
|
+
"@instructure/ui-view": "11.7.9-snapshot-1"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"vitest": "^5.0.0",
|
|
34
|
-
"@instructure/ui-babel-preset": "11.7.
|
|
35
|
-
"@instructure/ui-color-utils": "11.7.
|
|
34
|
+
"@instructure/ui-babel-preset": "11.7.9-snapshot-1",
|
|
35
|
+
"@instructure/ui-color-utils": "11.7.9-snapshot-1"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": ">=18 <=19"
|