@itwin/itwinui-react 1.34.2 → 1.37.0

package/cjs/core/Carousel/CarouselSlide.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
+ *
+ * It is recommended that the slide content bring its own dimensions (esp. height) and that
+ * the dimensions should be the same for all slides.
+ */
+export declare const CarouselSlide: React.ForwardRefExoticComponent<{
+    /**
+     * Index of the current slide.
+     * Does not need to be manually specified because it will be set in parent (`CarouselSlider`).
+     */
+    index?: number | undefined;
+} & Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & React.RefAttributes<HTMLLIElement>>;

package/cjs/core/Carousel/CarouselSlide.js

@@ -0,0 +1,63 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselSlide = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+var CarouselContext_1 = require("./CarouselContext");
+/**
+ * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
+ *
+ * It is recommended that the slide content bring its own dimensions (esp. height) and that
+ * the dimensions should be the same for all slides.
+ */
+exports.CarouselSlide = react_1.default.forwardRef(function (props, ref) {
+    var index = props.index, className = props.className, children = props.children, rest = __rest(props, ["index", "className", "children"]);
+    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+    if (!context || index == null) {
+        throw new Error('CarouselSlide must be used within Carousel');
+    }
+    var currentIndex = context.currentIndex, isManuallyUpdating = context.isManuallyUpdating, setCurrentIndex = context.setCurrentIndex;
+    var updateActiveIndexOnScroll = react_1.default.useCallback(function () {
+        // only update index if scroll was triggered by browser
+        if (!isManuallyUpdating.current && currentIndex !== index) {
+            setCurrentIndex(index);
+        }
+        // when manual scroll completes, reset the state of `isManuallyUpdating` so that it's ready for future actions
+        if (currentIndex === index) {
+            isManuallyUpdating.current = false;
+        }
+    }, [currentIndex, index, isManuallyUpdating, setCurrentIndex]);
+    var intersectionRef = (0, utils_1.useIntersection)(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
+    var refs = (0, utils_1.useMergedRefs)(intersectionRef, ref);
+    return (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs }, rest), children));
+});

package/cjs/core/Carousel/CarouselSlider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
+ */
+export declare const CarouselSlider: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "key" | keyof React.OlHTMLAttributes<HTMLOListElement>> & React.RefAttributes<HTMLOListElement>>;

package/cjs/core/Carousel/CarouselSlider.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselSlider = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var CarouselContext_1 = require("./CarouselContext");
+var utils_1 = require("../utils");
+/**
+ * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
+ */
+exports.CarouselSlider = react_1.default.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+    if (!context) {
+        throw new Error('CarouselSlider must be used within Carousel');
+    }
+    var currentIndex = context.currentIndex, setSlideCount = context.setSlideCount, idPrefix = context.idPrefix, isManuallyUpdating = context.isManuallyUpdating, scrollInstantly = context.scrollInstantly;
+    var items = react_1.default.useMemo(function () {
+        var _a;
+        return (_a = react_1.default.Children.map(children, function (child, index) {
+            return react_1.default.isValidElement(child)
+                ? react_1.default.cloneElement(child, {
+                    id: idPrefix + "--slide-" + index,
+                    index: index,
+                })
+                : child;
+        })) !== null && _a !== void 0 ? _a : [];
+    }, [children, idPrefix]);
+    react_1.default.useLayoutEffect(function () {
+        setSlideCount(items.length);
+    }, [items.length, setSlideCount]);
+    var _a = react_1.default.useState(), width = _a[0], setWidth = _a[1];
+    var resizeRef = (0, utils_1.useResizeObserver)(function (_a) {
+        var width = _a.width;
+        return setWidth(width);
+    })[0];
+    var sliderRef = react_1.default.useRef(null);
+    var refs = (0, utils_1.useMergedRefs)(sliderRef, resizeRef, ref);
+    var justMounted = react_1.default.useRef(true);
+    var previousWidth = react_1.default.useRef();
+    react_1.default.useLayoutEffect(function () {
+        var _a, _b, _c;
+        var slideToShow = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children.item(currentIndex);
+        if (!sliderRef.current ||
+            !slideToShow ||
+            (!isManuallyUpdating.current && previousWidth.current === width)) {
+            return;
+        }
+        // instant scroll on first mount
+        if (justMounted.current) {
+            scrollInstantly.current = true;
+            justMounted.current = false;
+        }
+        var motionOk = (_c = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
+        sliderRef.current.scrollTo({
+            left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
+            behavior: (scrollInstantly.current || !motionOk
+                ? 'instant'
+                : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
+        });
+        scrollInstantly.current = false;
+        previousWidth.current = width;
+    }, [currentIndex, isManuallyUpdating, scrollInstantly, width]);
+    return (react_1.default.createElement("ol", __assign({ "aria-live": 'polite', className: (0, classnames_1.default)('iui-carousel-slider', className), ref: refs }, rest), items));
+});

package/cjs/core/Carousel/index.d.ts

@@ -0,0 +1,4 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
+declare const _default: "./Carousel";
+export default _default;

package/cjs/core/Carousel/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Carousel = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var Carousel_1 = require("./Carousel");
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
+exports.default = './Carousel';

package/cjs/core/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "onClick" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -36,6 +36,11 @@ export declare type DatePickerProps = {
      * @default false
      */
     showTime?: boolean;
+    /**
+     * Show additional buttons to select year.
+     * @default false
+     */
+    showYearSelection?: boolean;
 } & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component

package/cjs/core/DatePicker/DatePicker.js

@@ -32,6 +32,8 @@ exports.DatePicker = exports.generateLocalizedStrings = void 0;
  *--------------------------------------------------------------------------------------------*/
 var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeft"));
 var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var ChevronLeftDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeftDouble"));
+var ChevronRightDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRightDouble"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -127,15 +129,15 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  */
 var DatePicker = function (props) {
     var _a, _b, _c;
-    var date = props.date, onChange = props.onChange, localizedNames = props.localizedNames, className = props.className, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, _e = props.showTime, showTime = _e === void 0 ? false : _e, _f = props.use12Hours, use12Hours = _f === void 0 ? false : _f, precision = props.precision, hourStep = props.hourStep, minuteStep = props.minuteStep, secondStep = props.secondStep, rest = __rest(props, ["date", "onChange", "localizedNames", "className", "style", "setFocus", "showTime", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep"]);
+    var date = props.date, onChange = props.onChange, localizedNames = props.localizedNames, className = props.className, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, _e = props.showTime, showTime = _e === void 0 ? false : _e, _f = props.use12Hours, use12Hours = _f === void 0 ? false : _f, precision = props.precision, hourStep = props.hourStep, minuteStep = props.minuteStep, secondStep = props.secondStep, _g = props.showYearSelection, showYearSelection = _g === void 0 ? false : _g, rest = __rest(props, ["date", "onChange", "localizedNames", "className", "style", "setFocus", "showTime", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep", "showYearSelection"]);
     (0, utils_1.useTheme)();
     var monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
     var shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
     var longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
-    var _g = react_1.default.useState(date), selectedDay = _g[0], setSelectedDay = _g[1];
-    var _h = react_1.default.useState(selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date()), focusedDay = _h[0], setFocusedDay = _h[1];
-    var _j = react_1.default.useState(selectedDay ? selectedDay.getMonth() : new Date().getMonth()), displayedMonthIndex = _j[0], setDisplayedMonthIndex = _j[1];
-    var _k = react_1.default.useState(selectedDay ? selectedDay.getFullYear() : new Date().getFullYear()), displayedYear = _k[0], setDisplayedYear = _k[1];
+    var _h = react_1.default.useState(date), selectedDay = _h[0], setSelectedDay = _h[1];
+    var _j = react_1.default.useState(selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date()), focusedDay = _j[0], setFocusedDay = _j[1];
+    var _k = react_1.default.useState(selectedDay ? selectedDay.getMonth() : new Date().getMonth()), displayedMonthIndex = _k[0], setDisplayedMonthIndex = _k[1];
+    var _l = react_1.default.useState(selectedDay ? selectedDay.getFullYear() : new Date().getFullYear()), displayedYear = _l[0], setDisplayedYear = _l[1];
     // Used to focus days only when days are changed
     // e.g. without this, when changing months day would be focused
     var needFocus = react_1.default.useRef(setFocus);
@@ -181,6 +183,16 @@ var DatePicker = function (props) {
         var newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
         return newDate;
     };
+    var handleMoveToPreviousYear = function () {
+        var newYear = displayedYear - 1;
+        setMonthAndYear(displayedMonthIndex, newYear);
+        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+    };
+    var handleMoveToNextYear = function () {
+        var newYear = displayedYear + 1;
+        setMonthAndYear(displayedMonthIndex, newYear);
+        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+    };
     var handleMoveToPreviousMonth = function () {
         var newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
         var newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
@@ -253,26 +265,39 @@ var DatePicker = function (props) {
                 break;
         }
     };
+    var getDayClass = function (day) {
+        if (day.getMonth() !== displayedMonthIndex) {
+            return 'iui-calendar-day-outside-month';
+        }
+        var dayClass = 'iui-calendar-day';
+        if (isSameDay(day, selectedDay)) {
+            dayClass += '-selected';
+        }
+        if (isSameDay(day, new Date())) {
+            dayClass += '-today';
+        }
+        return dayClass;
+    };
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-date-picker', className), style: style }, rest),
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: 'iui-calendar-month-year' },
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month' },
+                showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
+                    react_1.default.createElement(ChevronLeftDouble_1.default, null))),
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
                     react_1.default.createElement(ChevronLeft_1.default, null)),
                 react_1.default.createElement("span", { "aria-live": 'polite' },
                     react_1.default.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month' },
-                    react_1.default.createElement(ChevronRight_1.default, null))),
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
+                    react_1.default.createElement(ChevronRight_1.default, null)),
+                showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
+                    react_1.default.createElement(ChevronRightDouble_1.default, null)))),
             react_1.default.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (react_1.default.createElement("div", { key: day, title: longDays[index] }, day)); })),
             react_1.default.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
                 return (react_1.default.createElement("div", { key: "week-" + displayedMonthIndex + "-" + weekIndex, className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
                     var dateValue = weekDay.getDate();
-                    return (react_1.default.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: (0, classnames_1.default)('iui-calendar-day', {
-                            'iui-outside-month': weekDay.getMonth() !== displayedMonthIndex,
-                            'iui-today': isSameDay(weekDay, new Date()),
-                            'iui-selected': isSameDay(weekDay, selectedDay),
-                        }), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
+                    return (react_1.default.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: getDayClass(weekDay), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
                             return isSameDay(weekDay, focusedDay) &&
                                 needFocus.current &&
                                 (element === null || element === void 0 ? void 0 : element.focus());

package/cjs/core/Header/HeaderButton.js

@@ -61,6 +61,7 @@ exports.HeaderButton = react_1.default.forwardRef(function (props, ref) {
             : undefined, styleType: 'borderless', className: (0, classnames_1.default)({
             'iui-header-button': !isSplitButton(props),
             'iui-header-split-button': isSplitButton(props),
+            'iui-header-dropdown-button': !isSplitButton(props) && isDropdownButton(props),
             'iui-active': isActive,
         }, className), 'aria-current': isActive ? 'location' : undefined, children: (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", null, name),

package/cjs/core/Menu/Menu.js

@@ -46,9 +46,14 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
     react_1.default.useEffect(function () {
         setFocusedIndex(null);
     }, [children]);
+    var getFocusableNodes = react_1.default.useCallback(function () {
+        var focusableItems = (0, utils_1.getFocusableElements)(menuRef.current);
+        // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
+        return focusableItems.filter(function (i) { return !focusableItems.some(function (p) { return p.contains(i.parentElement); }); });
+    }, []);
     react_1.default.useEffect(function () {
         var _a;
-        var items = (0, utils_1.getFocusableElements)(menuRef.current);
+        var items = getFocusableNodes();
         if (focusedIndex != null) {
             (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             return;
@@ -57,9 +62,9 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
         if (setFocus) {
             setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
         }
-    }, [setFocus, focusedIndex]);
+    }, [setFocus, focusedIndex, getFocusableNodes]);
     var onKeyDown = function (event) {
-        var items = (0, utils_1.getFocusableElements)(menuRef.current);
+        var items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;
         }

package/cjs/core/Modal/Modal.d.ts

@@ -45,6 +45,11 @@ export declare type ModalProps = {
      * @default document
      */
     ownerDocument?: Document;
+    /**
+     * Type of the modal.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'fullPage';
     /**
      * Content of the modal.
      */

package/cjs/core/Modal/Modal.js

@@ -37,6 +37,7 @@ var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Clos
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/modal.css");
 var IconButton_1 = require("../Buttons/IconButton");
+var react_transition_group_1 = require("react-transition-group");
 /**
  * Modal component which can wrap any content.
  * @example
@@ -59,7 +60,7 @@ var IconButton_1 = require("../Buttons/IconButton");
  * </Modal>
  */
 var Modal = function (props) {
-    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? (0, utils_1.getDocument)() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "modalRootId", "ownerDocument"]);
+    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.styleType, styleType = _e === void 0 ? 'default' : _e, _f = props.modalRootId, modalRootId = _f === void 0 ? 'iui-react-portal-container' : _f, _g = props.ownerDocument, ownerDocument = _g === void 0 ? (0, utils_1.getDocument)() : _g, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "styleType", "modalRootId", "ownerDocument"]);
     (0, utils_1.useTheme)();
     var container = (0, utils_1.getContainer)(modalRootId, ownerDocument);
     var overlayRef = react_1.default.useRef(null);
@@ -117,14 +118,15 @@ var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (react_dom_1.default.createPortal(isOpen && (react_1.default.createElement(utils_1.FocusTrap, null,
-        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal', 'iui-modal-visible', className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-            react_1.default.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                react_1.default.createElement("div", { className: 'iui-title-bar' },
-                    react_1.default.createElement("div", { className: 'iui-title' }, title),
-                    isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                        react_1.default.createElement(Close_1.default, null)))),
-                children)))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
+    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-modal-animation', timeout: { exit: 600 }, unmountOnExit: true },
+        react_1.default.createElement(utils_1.FocusTrap, null,
+            react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal', { 'iui-modal-full-page': styleType === 'fullPage' }, { 'iui-modal-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
+                react_1.default.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
+                    react_1.default.createElement("div", { className: 'iui-title-bar' },
+                        react_1.default.createElement("div", { className: 'iui-title' }, title),
+                        isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+                            react_1.default.createElement(Close_1.default, null)))),
+                    children)))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

package/cjs/core/Modal/ModalContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/modal.css';
+export declare type ModalContentProps = {
+    /**
+     * Main content in the `Modal`.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * Container for content in `Modal`.
+ */
+export declare const ModalContent: (props: ModalContentProps) => JSX.Element;
+export default ModalContent;

package/cjs/core/Modal/ModalContent.js

@@ -0,0 +1,46 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/modal.css");
+/**
+ * Container for content in `Modal`.
+ */
+var ModalContent = function (props) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal-content', className) }, rest), children));
+};
+exports.ModalContent = ModalContent;
+exports.default = exports.ModalContent;

package/cjs/core/Modal/index.d.ts

@@ -2,5 +2,7 @@ export { Modal } from './Modal';
 export type { ModalProps } from './Modal';
 export { ModalButtonBar } from './ModalButtonBar';
 export type { ModalButtonBarProps } from './ModalButtonBar';
+export { ModalContent } from './ModalContent';
+export type { ModalContentProps } from './ModalContent';
 declare const _default: "./Modal";
 export default _default;

package/cjs/core/Modal/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalButtonBar = exports.Modal = void 0;
+exports.ModalContent = exports.ModalButtonBar = exports.Modal = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -9,4 +9,6 @@ var Modal_1 = require("./Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 var ModalButtonBar_1 = require("./ModalButtonBar");
 Object.defineProperty(exports, "ModalButtonBar", { enumerable: true, get: function () { return ModalButtonBar_1.ModalButtonBar; } });
+var ModalContent_1 = require("./ModalContent");
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return ModalContent_1.ModalContent; } });
 exports.default = './Modal';

package/cjs/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/skip-to-content.css';
+export declare type SkipToContentLinkProps = {
+    /**
+     * The id of the main content that the link directs to. Don't forget the #!
+     */
+    href: string;
+    /**
+     * Localize 'Skip to main content' label.
+     * @default 'Skip to main content'
+     */
+    children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
+/**
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
+ * @example
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
+ */
+export declare const SkipToContentLink: React.ForwardRefExoticComponent<{
+    /**
+     * The id of the main content that the link directs to. Don't forget the #!
+     */
+    href: string;
+    /**
+     * Localize 'Skip to main content' label.
+     * @default 'Skip to main content'
+     */
+    children?: React.ReactNode;
+} & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
+export default SkipToContentLink;

package/cjs/core/SkipToContentLink/SkipToContentLink.js

@@ -0,0 +1,50 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkipToContentLink = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/skip-to-content.css");
+/**
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
+ * @example
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
+ */
+exports.SkipToContentLink = react_1.default.forwardRef(function (props, ref) {
+    var _a = props.children, children = _a === void 0 ? 'Skip to main content' : _a, className = props.className, rest = __rest(props, ["children", "className"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("a", __assign({ ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className) }, rest), children));
+});
+exports.default = exports.SkipToContentLink;

package/cjs/core/SkipToContentLink/index.d.ts

@@ -0,0 +1,4 @@
+export { SkipToContentLink } from './SkipToContentLink';
+export type { SkipToContentLinkProps } from './SkipToContentLink';
+declare const _default: "./SkipToContentLink";
+export default _default;