@itwin/itwinui-react 2.11.2 → 2.11.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/cjs/core/DatePicker/DatePicker.js +4 -20
  3. package/cjs/core/FileUpload/FileUploadCard.d.ts +1 -0
  4. package/cjs/core/FileUpload/FileUploadCard.js +6 -4
  5. package/cjs/core/FileUpload/FileUploadTemplate.js +2 -1
  6. package/esm/core/DatePicker/DatePicker.js +4 -20
  7. package/esm/core/FileUpload/FileUploadCard.d.ts +1 -0
  8. package/esm/core/FileUpload/FileUploadCard.js +7 -5
  9. package/esm/core/FileUpload/FileUploadTemplate.js +2 -1
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.11.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1319](https://github.com/iTwin/iTwinUI/pull/1319): DatePicker will no longer disable month and year navigation when the next/previous months are disabled.
8
+
9
+ ## 2.11.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [#1309](https://github.com/iTwin/iTwinUI/pull/1309): Fixed missing CSS imports in `FileUploadCard` and `FileUpoadTemplate`.
14
+
3
15
  ## 2.11.2
4
16
 
5
17
  ### Patch Changes
package/cjs/core/DatePicker/DatePicker.js CHANGED
@@ -279,10 +279,6 @@ const DatePicker = (props) => {
279
279
  }
280
280
  }
281
281
  };
282
- const isPreviousMonthDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear, displayedMonthIndex, 0));
283
- const isNextMonthDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear, displayedMonthIndex + 1, 1));
284
- const isPreviousYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear - 1, 11, 31));
285
- const isNextYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear + 1, 0, 1));
286
282
  const handleCalendarKeyDown = (event) => {
287
283
  if (event.altKey) {
288
284
  return;
@@ -295,9 +291,6 @@ const DatePicker = (props) => {
295
291
  case 'ArrowDown':
296
292
  adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
297
293
  if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
298
- if (isNextMonthDisabled) {
299
- return;
300
- }
301
294
  handleMoveToNextMonth();
302
295
  }
303
296
  setFocusedDay(adjustedFocusedDay);
@@ -307,9 +300,6 @@ const DatePicker = (props) => {
307
300
  case 'ArrowUp':
308
301
  adjustedFocusedDay.setDate(focusedDay.getDate() - 7);
309
302
  if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
310
- if (isPreviousMonthDisabled) {
311
- return;
312
- }
313
303
  handleMoveToPreviousMonth();
314
304
  }
315
305
  setFocusedDay(adjustedFocusedDay);
@@ -319,9 +309,6 @@ const DatePicker = (props) => {
319
309
  case 'ArrowLeft':
320
310
  adjustedFocusedDay.setDate(focusedDay.getDate() - 1);
321
311
  if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
322
- if (isPreviousMonthDisabled) {
323
- return;
324
- }
325
312
  handleMoveToPreviousMonth();
326
313
  }
327
314
  setFocusedDay(adjustedFocusedDay);
@@ -331,9 +318,6 @@ const DatePicker = (props) => {
331
318
  case 'ArrowRight':
332
319
  adjustedFocusedDay.setDate(focusedDay.getDate() + 1);
333
320
  if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
334
- if (isNextMonthDisabled) {
335
- return;
336
- }
337
321
  handleMoveToNextMonth();
338
322
  }
339
323
  setFocusedDay(adjustedFocusedDay);
@@ -380,17 +364,17 @@ const DatePicker = (props) => {
380
364
  return (React.createElement("div", { className: (0, classnames_1.default)('iui-date-picker', className), style: style, ...rest },
381
365
  React.createElement("div", null,
382
366
  React.createElement("div", { className: 'iui-calendar-month-year' },
383
- showYearSelection && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small', disabled: isPreviousYearDisabled },
367
+ showYearSelection && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
384
368
  React.createElement(index_js_1.SvgChevronLeftDouble, null))),
385
- React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small', disabled: isPreviousMonthDisabled },
369
+ React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
386
370
  React.createElement(index_js_1.SvgChevronLeft, null)),
387
371
  React.createElement("span", { "aria-live": 'polite' },
388
372
  React.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
389
373
  "\u00A0",
390
374
  displayedYear),
391
- React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small', disabled: isNextMonthDisabled },
375
+ React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
392
376
  React.createElement(index_js_1.SvgChevronRight, null)),
393
- showYearSelection && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small', disabled: isNextYearDisabled },
377
+ showYearSelection && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
394
378
  React.createElement(index_js_1.SvgChevronRightDouble, null)))),
395
379
  React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (React.createElement("div", { key: day, title: longDays[index] }, day)))),
396
380
  React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
package/cjs/core/FileUpload/FileUploadCard.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import '@itwin/itwinui-css/css/file-upload.css';
2
3
  export declare type FileUploadCardIconProps = React.ComponentPropsWithRef<'span'>;
3
4
  export declare type FileUploadCardInfoProps = React.ComponentPropsWithRef<'span'>;
4
5
  export declare type FileUploadCardTitleProps = React.ComponentPropsWithRef<'span'>;
package/cjs/core/FileUpload/FileUploadCard.js CHANGED
@@ -35,6 +35,8 @@ const React = __importStar(require("react"));
35
35
  const index_js_1 = require("../utils/index.js");
36
36
  const classnames_1 = __importDefault(require("classnames"));
37
37
  const FileEmptyCard_js_1 = require("./FileEmptyCard.js");
38
+ const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
39
+ require("@itwin/itwinui-css/css/file-upload.css");
38
40
  const toBytes = (bytes) => {
39
41
  const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
40
42
  let i = 0;
@@ -82,13 +84,13 @@ const FileUploadCardAction = React.forwardRef((props, ref) => {
82
84
  });
83
85
  FileUploadCardAction.displayName = 'FileUploadCard.Action';
84
86
  const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
85
- const { children, className, ...rest } = props;
87
+ const { children, ...rest } = props;
86
88
  const { inputId } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
87
- return (React.createElement("label", { className: (0, classnames_1.default)('iui-anchor', className), ref: ref, htmlFor: inputId, ...rest }, children));
89
+ return (React.createElement(Anchor_js_1.Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
88
90
  });
89
91
  FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
90
92
  const FileUploadCardInput = React.forwardRef((props, ref) => {
91
- const { children, className, onChange, id, ...rest } = props;
93
+ const { children, onChange, id, ...rest } = props;
92
94
  const { files, onFilesChange, setInternalFiles, inputId, setInputId } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
93
95
  const setNativeFilesRef = React.useCallback((node) => {
94
96
  var _a;
@@ -107,7 +109,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
107
109
  }
108
110
  }, [id, inputId, setInputId]);
109
111
  return (React.createElement(React.Fragment, null,
110
- React.createElement("input", { className: (0, classnames_1.default)('iui-visually-hidden', className), type: 'file', onChange: (0, index_js_1.mergeEventHandlers)(onChange, (e) => {
112
+ React.createElement(index_js_1.VisuallyHidden, { as: 'input', type: 'file', onChange: (0, index_js_1.mergeEventHandlers)(onChange, (e) => {
111
113
  const _files = Array.from(e.currentTarget.files || []);
112
114
  onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
113
115
  setInternalFiles(_files);
package/cjs/core/FileUpload/FileUploadTemplate.js CHANGED
@@ -35,6 +35,7 @@ const React = __importStar(require("react"));
35
35
  const classnames_1 = __importDefault(require("classnames"));
36
36
  const index_js_1 = require("../utils/index.js");
37
37
  require("@itwin/itwinui-css/css/file-upload.css");
38
+ const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
38
39
  /**
39
40
  * Default template to be used with the `FileUpload` wrapper component.
40
41
  * Contains a hidden input with styled labels (customizable).
@@ -47,7 +48,7 @@ const FileUploadTemplate = (props) => {
47
48
  return (React.createElement("div", { className: (0, classnames_1.default)('iui-file-upload-template', className), ...rest },
48
49
  React.createElement(index_js_1.SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
49
50
  React.createElement("div", { className: 'iui-template-text' },
50
- React.createElement("label", { className: 'iui-anchor' },
51
+ React.createElement(Anchor_js_1.Anchor, { as: 'label' },
51
52
  React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
52
53
  label),
53
54
  React.createElement("div", null, subtitle),
package/esm/core/DatePicker/DatePicker.js CHANGED
@@ -249,10 +249,6 @@ export const DatePicker = (props) => {
249
249
  }
250
250
  }
251
251
  };
252
- const isPreviousMonthDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear, displayedMonthIndex, 0));
253
- const isNextMonthDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear, displayedMonthIndex + 1, 1));
254
- const isPreviousYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear - 1, 11, 31));
255
- const isNextYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear + 1, 0, 1));
256
252
  const handleCalendarKeyDown = (event) => {
257
253
  if (event.altKey) {
258
254
  return;
@@ -265,9 +261,6 @@ export const DatePicker = (props) => {
265
261
  case 'ArrowDown':
266
262
  adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
267
263
  if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
268
- if (isNextMonthDisabled) {
269
- return;
270
- }
271
264
  handleMoveToNextMonth();
272
265
  }
273
266
  setFocusedDay(adjustedFocusedDay);
@@ -277,9 +270,6 @@ export const DatePicker = (props) => {
277
270
  case 'ArrowUp':
278
271
  adjustedFocusedDay.setDate(focusedDay.getDate() - 7);
279
272
  if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
280
- if (isPreviousMonthDisabled) {
281
- return;
282
- }
283
273
  handleMoveToPreviousMonth();
284
274
  }
285
275
  setFocusedDay(adjustedFocusedDay);
@@ -289,9 +279,6 @@ export const DatePicker = (props) => {
289
279
  case 'ArrowLeft':
290
280
  adjustedFocusedDay.setDate(focusedDay.getDate() - 1);
291
281
  if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
292
- if (isPreviousMonthDisabled) {
293
- return;
294
- }
295
282
  handleMoveToPreviousMonth();
296
283
  }
297
284
  setFocusedDay(adjustedFocusedDay);
@@ -301,9 +288,6 @@ export const DatePicker = (props) => {
301
288
  case 'ArrowRight':
302
289
  adjustedFocusedDay.setDate(focusedDay.getDate() + 1);
303
290
  if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
304
- if (isNextMonthDisabled) {
305
- return;
306
- }
307
291
  handleMoveToNextMonth();
308
292
  }
309
293
  setFocusedDay(adjustedFocusedDay);
@@ -350,17 +334,17 @@ export const DatePicker = (props) => {
350
334
  return (React.createElement("div", { className: cx('iui-date-picker', className), style: style, ...rest },
351
335
  React.createElement("div", null,
352
336
  React.createElement("div", { className: 'iui-calendar-month-year' },
353
- showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small', disabled: isPreviousYearDisabled },
337
+ showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
354
338
  React.createElement(SvgChevronLeftDouble, null))),
355
- React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small', disabled: isPreviousMonthDisabled },
339
+ React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
356
340
  React.createElement(SvgChevronLeft, null)),
357
341
  React.createElement("span", { "aria-live": 'polite' },
358
342
  React.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
359
343
  "\u00A0",
360
344
  displayedYear),
361
- React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small', disabled: isNextMonthDisabled },
345
+ React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
362
346
  React.createElement(SvgChevronRight, null)),
363
- showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small', disabled: isNextYearDisabled },
347
+ showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
364
348
  React.createElement(SvgChevronRightDouble, null)))),
365
349
  React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (React.createElement("div", { key: day, title: longDays[index] }, day)))),
366
350
  React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
package/esm/core/FileUpload/FileUploadCard.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import '@itwin/itwinui-css/css/file-upload.css';
2
3
  export declare type FileUploadCardIconProps = React.ComponentPropsWithRef<'span'>;
3
4
  export declare type FileUploadCardInfoProps = React.ComponentPropsWithRef<'span'>;
4
5
  export declare type FileUploadCardTitleProps = React.ComponentPropsWithRef<'span'>;
package/esm/core/FileUpload/FileUploadCard.js CHANGED
@@ -3,9 +3,11 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  import * as React from 'react';
6
- import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, } from '../utils/index.js';
6
+ import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, VisuallyHidden, } from '../utils/index.js';
7
7
  import cx from 'classnames';
8
8
  import { FileEmptyCard } from './FileEmptyCard.js';
9
+ import { Anchor } from '../Typography/Anchor/Anchor.js';
10
+ import '@itwin/itwinui-css/css/file-upload.css';
9
11
  const toBytes = (bytes) => {
10
12
  const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
11
13
  let i = 0;
@@ -53,13 +55,13 @@ const FileUploadCardAction = React.forwardRef((props, ref) => {
53
55
  });
54
56
  FileUploadCardAction.displayName = 'FileUploadCard.Action';
55
57
  const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
56
- const { children, className, ...rest } = props;
58
+ const { children, ...rest } = props;
57
59
  const { inputId } = useSafeContext(FileUploadCardContext);
58
- return (React.createElement("label", { className: cx('iui-anchor', className), ref: ref, htmlFor: inputId, ...rest }, children));
60
+ return (React.createElement(Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
59
61
  });
60
62
  FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
61
63
  const FileUploadCardInput = React.forwardRef((props, ref) => {
62
- const { children, className, onChange, id, ...rest } = props;
64
+ const { children, onChange, id, ...rest } = props;
63
65
  const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
64
66
  const setNativeFilesRef = React.useCallback((node) => {
65
67
  var _a;
@@ -78,7 +80,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
78
80
  }
79
81
  }, [id, inputId, setInputId]);
80
82
  return (React.createElement(React.Fragment, null,
81
- React.createElement("input", { className: cx('iui-visually-hidden', className), type: 'file', onChange: mergeEventHandlers(onChange, (e) => {
83
+ React.createElement(VisuallyHidden, { as: 'input', type: 'file', onChange: mergeEventHandlers(onChange, (e) => {
82
84
  const _files = Array.from(e.currentTarget.files || []);
83
85
  onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
84
86
  setInternalFiles(_files);
package/esm/core/FileUpload/FileUploadTemplate.js CHANGED
@@ -6,6 +6,7 @@ import * as React from 'react';
6
6
  import cx from 'classnames';
7
7
  import { useTheme, SvgUpload } from '../utils/index.js';
8
8
  import '@itwin/itwinui-css/css/file-upload.css';
9
+ import { Anchor } from '../Typography/Anchor/Anchor.js';
9
10
  /**
10
11
  * Default template to be used with the `FileUpload` wrapper component.
11
12
  * Contains a hidden input with styled labels (customizable).
@@ -18,7 +19,7 @@ export const FileUploadTemplate = (props) => {
18
19
  return (React.createElement("div", { className: cx('iui-file-upload-template', className), ...rest },
19
20
  React.createElement(SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
20
21
  React.createElement("div", { className: 'iui-template-text' },
21
- React.createElement("label", { className: 'iui-anchor' },
22
+ React.createElement(Anchor, { as: 'label' },
22
23
  React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
23
24
  label),
24
25
  React.createElement("div", null, subtitle),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-react",
3
- "version": "2.11.2",
3
+ "version": "2.11.4",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "cjs/index.js",