@itwin/itwinui-react 1.34.1 → 1.36.0

package/esm/core/Carousel/CarouselNavigation.js

@@ -0,0 +1,82 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { CarouselContext } from './CarouselContext';
+import { IconButton } from '../Buttons';
+import { CarouselDotsList } from './CarouselDotsList';
+import SvgChevronLeft from '@itwin/itwinui-icons-react/cjs/icons/ChevronLeft';
+import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+/** Button for switching to previous slide */
+var PreviousButton = React.forwardRef(function (props, ref) {
+    var context = React.useContext(CarouselContext);
+    if (!context) {
+        throw new Error('CarouselNavigation should be used inside Carousel');
+    }
+    var slideCount = context.slideCount, setCurrentIndex = context.setCurrentIndex, keysPressed = context.keysPressed, scrollInstantly = context.scrollInstantly;
+    return (React.createElement(IconButton, __assign({ styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref }, props, { onClick: function (e) {
+            var _a;
+            if (e.detail > 3) {
+                scrollInstantly.current = true;
+            }
+            setCurrentIndex(function (old) { return (slideCount + old - 1) % slideCount; });
+            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }),
+        React.createElement(SvgChevronLeft, null)));
+});
+/** Button for switching to next slide */
+var NextButton = React.forwardRef(function (props, ref) {
+    var context = React.useContext(CarouselContext);
+    if (!context) {
+        throw new Error('CarouselNavigation should be used inside Carousel');
+    }
+    var slideCount = context.slideCount, setCurrentIndex = context.setCurrentIndex, keysPressed = context.keysPressed, scrollInstantly = context.scrollInstantly;
+    return (React.createElement(IconButton, __assign({ styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref }, props, { onClick: function (e) {
+            var _a;
+            if (e.detail > 3) {
+                scrollInstantly.current = true;
+            }
+            setCurrentIndex(function (old) { return (slideCount + old + 1) % slideCount; });
+            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }),
+        React.createElement(SvgChevronRight, null)));
+});
+/**
+ * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
+ * shown on the left and right, and the `CarouselDotsList` component shown in the middle.
+ *
+ * `children` can be specified to override what is shown in this navigation section.
+ */
+export var CarouselNavigation = Object.assign(React.forwardRef(function (props, ref) {
+    var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
+    return (React.createElement("nav", __assign({ className: cx('iui-carousel-navigation', className), ref: ref }, rest), children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: 'iui-carousel-navigation-left' },
+            React.createElement(PreviousButton, null)),
+        React.createElement(CarouselDotsList, null),
+        React.createElement("div", { className: 'iui-carousel-navigation-right' },
+            React.createElement(NextButton, null))))));
+}), { PreviousButton: PreviousButton, NextButton: NextButton });

package/esm/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/esm/core/Carousel/CarouselSlide.js

@@ -0,0 +1,57 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useIntersection, useMergedRefs } from '../utils';
+import { CarouselContext } from './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.
+ */
+export var CarouselSlide = React.forwardRef(function (props, ref) {
+    var index = props.index, className = props.className, children = props.children, rest = __rest(props, ["index", "className", "children"]);
+    var context = React.useContext(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.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 = useIntersection(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
+    var refs = useMergedRefs(intersectionRef, ref);
+    return (React.createElement("li", __assign({ className: cx('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs }, rest), children));
+});

package/esm/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/esm/core/Carousel/CarouselSlider.js

@@ -0,0 +1,88 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { CarouselContext } from './CarouselContext';
+import { getWindow, useMergedRefs, useResizeObserver } from '../utils';
+/**
+ * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
+ */
+export var CarouselSlider = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    var context = React.useContext(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.useMemo(function () {
+        var _a;
+        return (_a = React.Children.map(children, function (child, index) {
+            return React.isValidElement(child)
+                ? React.cloneElement(child, {
+                    id: idPrefix + "--slide-" + index,
+                    index: index,
+                })
+                : child;
+        })) !== null && _a !== void 0 ? _a : [];
+    }, [children, idPrefix]);
+    React.useLayoutEffect(function () {
+        setSlideCount(items.length);
+    }, [items.length, setSlideCount]);
+    var _a = React.useState(), width = _a[0], setWidth = _a[1];
+    var resizeRef = useResizeObserver(function (_a) {
+        var width = _a.width;
+        return setWidth(width);
+    })[0];
+    var sliderRef = React.useRef(null);
+    var refs = useMergedRefs(sliderRef, resizeRef, ref);
+    var justMounted = React.useRef(true);
+    var previousWidth = React.useRef();
+    React.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 = 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.createElement("ol", __assign({ "aria-live": 'polite', className: cx('iui-carousel-slider', className), ref: refs }, rest), items));
+});

package/esm/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/esm/core/Carousel/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { Carousel } from './Carousel';
+export default './Carousel';

package/esm/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/esm/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/esm/core/DatePicker/DatePicker.js

@@ -26,6 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import SvgChevronLeft from '@itwin/itwinui-icons-react/cjs/icons/ChevronLeft';
 import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import SvgChevronLeftDouble from '@itwin/itwinui-icons-react/cjs/icons/ChevronLeftDouble';
+import SvgChevronRightDouble from '@itwin/itwinui-icons-react/cjs/icons/ChevronRightDouble';
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
@@ -120,15 +122,15 @@ export var generateLocalizedStrings = function (locale) {
  */
 export 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"]);
     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.useState(date), selectedDay = _g[0], setSelectedDay = _g[1];
-    var _h = React.useState(selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date()), focusedDay = _h[0], setFocusedDay = _h[1];
-    var _j = React.useState(selectedDay ? selectedDay.getMonth() : new Date().getMonth()), displayedMonthIndex = _j[0], setDisplayedMonthIndex = _j[1];
-    var _k = React.useState(selectedDay ? selectedDay.getFullYear() : new Date().getFullYear()), displayedYear = _k[0], setDisplayedYear = _k[1];
+    var _h = React.useState(date), selectedDay = _h[0], setSelectedDay = _h[1];
+    var _j = React.useState(selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date()), focusedDay = _j[0], setFocusedDay = _j[1];
+    var _k = React.useState(selectedDay ? selectedDay.getMonth() : new Date().getMonth()), displayedMonthIndex = _k[0], setDisplayedMonthIndex = _k[1];
+    var _l = React.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.useRef(setFocus);
@@ -174,6 +176,16 @@ export 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;
@@ -246,26 +258,39 @@ export 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.createElement("div", __assign({ className: cx('iui-date-picker', className), style: style }, rest),
         React.createElement("div", null,
             React.createElement("div", { className: 'iui-calendar-month-year' },
-                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month' },
+                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
+                    React.createElement(SvgChevronLeftDouble, null))),
+                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
                     React.createElement(SvgChevronLeft, null)),
                 React.createElement("span", { "aria-live": 'polite' },
                     React.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
-                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month' },
-                    React.createElement(SvgChevronRight, null))),
+                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
+                    React.createElement(SvgChevronRight, null)),
+                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
+                    React.createElement(SvgChevronRightDouble, null)))),
             React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (React.createElement("div", { key: day, title: longDays[index] }, day)); })),
             React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
                 return (React.createElement("div", { key: "week-" + displayedMonthIndex + "-" + weekIndex, className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
                     var dateValue = weekDay.getDate();
-                    return (React.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: cx('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.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/esm/core/Menu/Menu.js

@@ -40,9 +40,14 @@ export var Menu = React.forwardRef(function (props, ref) {
     React.useEffect(function () {
         setFocusedIndex(null);
     }, [children]);
+    var getFocusableNodes = React.useCallback(function () {
+        var focusableItems = 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.useEffect(function () {
         var _a;
-        var items = 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;
@@ -51,9 +56,9 @@ export var Menu = React.forwardRef(function (props, ref) {
         if (setFocus) {
             setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
         }
-    }, [setFocus, focusedIndex]);
+    }, [setFocus, focusedIndex, getFocusableNodes]);
     var onKeyDown = function (event) {
-        var items = getFocusableElements(menuRef.current);
+        var items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;
         }

package/esm/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/esm/core/Modal/Modal.js

@@ -31,6 +31,7 @@ import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
 import { useTheme, getContainer, getDocument, FocusTrap, } from '../utils';
 import '@itwin/itwinui-css/css/modal.css';
 import { IconButton } from '../Buttons/IconButton';
+import { CSSTransition } from 'react-transition-group';
 /**
  * Modal component which can wrap any content.
  * @example
@@ -53,7 +54,7 @@ import { IconButton } from '../Buttons/IconButton';
  * </Modal>
  */
 export 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 ? 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 ? getDocument() : _g, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "styleType", "modalRootId", "ownerDocument"]);
     useTheme();
     var container = getContainer(modalRootId, ownerDocument);
     var overlayRef = React.useRef(null);
@@ -111,13 +112,14 @@ export var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (ReactDOM.createPortal(isOpen && (React.createElement(FocusTrap, null,
-        React.createElement("div", __assign({ className: cx('iui-modal', 'iui-modal-visible', className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-            React.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                React.createElement("div", { className: 'iui-title-bar' },
-                    React.createElement("div", { className: 'iui-title' }, title),
-                    isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                        React.createElement(SvgClose, null)))),
-                children)))), container)) : (React.createElement(React.Fragment, null));
+    return !!container ? (ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-modal-animation', timeout: { exit: 600 }, unmountOnExit: true },
+        React.createElement(FocusTrap, null,
+            React.createElement("div", __assign({ className: cx('iui-modal', { 'iui-modal-full-page': styleType === 'fullPage' }, { 'iui-modal-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
+                React.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
+                    React.createElement("div", { className: 'iui-title-bar' },
+                        React.createElement("div", { className: 'iui-title' }, title),
+                        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+                            React.createElement(SvgClose, null)))),
+                    children)))), container)) : (React.createElement(React.Fragment, null));
 };
 export default Modal;

package/esm/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/esm/core/Modal/ModalContent.js

@@ -0,0 +1,39 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/modal.css';
+/**
+ * Container for content in `Modal`.
+ */
+export var ModalContent = function (props) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-modal-content', className) }, rest), children));
+};
+export default ModalContent;

package/esm/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/esm/core/Modal/index.js

@@ -4,4 +4,5 @@
  *--------------------------------------------------------------------------------------------*/
 export { Modal } from './Modal';
 export { ModalButtonBar } from './ModalButtonBar';
+export { ModalContent } from './ModalContent';
 export default './Modal';

package/esm/core/Table/Table.d.ts

@@ -3,6 +3,7 @@ import { CellProps, TableOptions, Row, TableState } from 'react-table';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
 import { TableFilterValue } from './filters';
+export declare const tableResizeStartAction = "tableResizeStart";
 export declare type TablePaginatorRendererProps = {
     /**
      * The zero-based index of the current page.