@itwin/itwinui-react 1.34.2 → 1.37.0

package/esm/core/Carousel/CarouselDotsList.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/carousel.css';
+/**
+ * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
+ * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
+ * any props or `children`.
+ *
+ * The props can be specified if this component is being used outside `Carousel`. `children` can be specified
+ * to override the individual dots that are shown.
+ *
+ * @example
+ * <Carousel>
+ *   // ...
+ *   <Carousel.Dots />
+ * </Carousel>
+ *
+ * @example
+ * <Carousel.Dots
+ *   length={10}
+ *   maxCount={3}
+ *   currentIndex={current}
+ *   onSlideChange={(i) => setCurrent(i)}
+ * />
+ */
+export declare const CarouselDotsList: React.ForwardRefExoticComponent<{
+    /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
+    length?: number | undefined;
+    /** Index of currently active dot. Will be inferred from Carousel context, or else default to 0. */
+    currentIndex?: number | undefined;
+    /** Callback fired when any of the dots are clicked. */
+    onSlideChange?: ((index: number) => void) | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/esm/core/Carousel/CarouselDotsList.js

@@ -0,0 +1,126 @@
+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 { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, useTheme, } from '../utils';
+import { CarouselDot } from './CarouselDot';
+import '@itwin/itwinui-css/css/carousel.css';
+/**
+ * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
+ * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
+ * any props or `children`.
+ *
+ * The props can be specified if this component is being used outside `Carousel`. `children` can be specified
+ * to override the individual dots that are shown.
+ *
+ * @example
+ * <Carousel>
+ *   // ...
+ *   <Carousel.Dots />
+ * </Carousel>
+ *
+ * @example
+ * <Carousel.Dots
+ *   length={10}
+ *   maxCount={3}
+ *   currentIndex={current}
+ *   onSlideChange={(i) => setCurrent(i)}
+ * />
+ */
+export var CarouselDotsList = React.forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var userCurrentIndex = props.currentIndex, length = props.length, className = props.className, onSlideChange = props.onSlideChange, children = props.children, rest = __rest(props, ["currentIndex", "length", "className", "onSlideChange", "children"]);
+    useTheme();
+    var context = React.useContext(CarouselContext);
+    var slideCount = (_a = length !== null && length !== void 0 ? length : context === null || context === void 0 ? void 0 : context.slideCount) !== null && _a !== void 0 ? _a : React.Children.count(children);
+    var currentIndex = (_b = userCurrentIndex !== null && userCurrentIndex !== void 0 ? userCurrentIndex : context === null || context === void 0 ? void 0 : context.currentIndex) !== null && _b !== void 0 ? _b : 0;
+    var idPrefix = (_c = props.id) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.idPrefix;
+    var handleSlideChange = React.useCallback(function (index) {
+        if (context) {
+            context.setCurrentIndex(index);
+        }
+        onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
+    }, [context, onSlideChange]);
+    var justMounted = React.useRef(true);
+    var _d = React.useState(slideCount), visibleCount = _d[0], setVisibleCount = _d[1];
+    var listRef = React.useRef(null);
+    var _e = React.useState(), width = _e[0], setWidth = _e[1];
+    var _f = useResizeObserver(function (_a) {
+        var width = _a.width;
+        if (!listRef.current) {
+            return;
+        }
+        setWidth(width);
+        var dotWidth = listRef.current.children[0].offsetWidth;
+        setVisibleCount(Math.floor(width / dotWidth));
+    }), resizeRef = _f[0], resizeObserver = _f[1];
+    React.useEffect(function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); }, [resizeObserver]);
+    var refs = useMergedRefs(ref, resizeRef, listRef);
+    var firstVisibleDotIndex = React.useMemo(function () {
+        return getBoundedValue(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount);
+    }, [currentIndex, slideCount, visibleCount]);
+    var lastVisibleDotIndex = React.useMemo(function () {
+        return getBoundedValue(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1);
+    }, [currentIndex, slideCount, visibleCount]);
+    var dots = React.useMemo(function () {
+        return Array(slideCount)
+            .fill(null)
+            .map(function (_, index) {
+            var isFirstSmallDot = (index === firstVisibleDotIndex && index !== 0) ||
+                (index === lastVisibleDotIndex && index !== slideCount - 1);
+            var isSecondSmallDot = (index === firstVisibleDotIndex + 1 && index !== 1) ||
+                (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
+            var isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
+            return (React.createElement(CarouselDot, { key: index, "aria-label": "Slide " + index, isActive: index === currentIndex, onClick: function () { return handleSlideChange(index); }, isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && idPrefix + "--dot-" + index, "aria-controls": idPrefix && idPrefix + "--slide-" + index }));
+        });
+    }, [
+        slideCount,
+        firstVisibleDotIndex,
+        lastVisibleDotIndex,
+        currentIndex,
+        idPrefix,
+        handleSlideChange,
+    ]);
+    React.useEffect(function () {
+        var _a, _b, _c;
+        var firstDot = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[firstVisibleDotIndex];
+        if (!listRef.current || !firstDot) {
+            return;
+        }
+        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;
+        listRef.current.scrollTo({
+            left: firstDot.offsetLeft - listRef.current.offsetLeft,
+            behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
+        });
+        if (justMounted.current) {
+            justMounted.current = false;
+        }
+    }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({ className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs }, rest), children !== null && children !== void 0 ? children : dots)));
+});

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * 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 declare const CarouselNavigation: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> & {
+    PreviousButton: React.ForwardRefExoticComponent<{
+        isActive?: boolean | undefined;
+    } & Omit<import("../Buttons").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+    NextButton: React.ForwardRefExoticComponent<{
+        isActive?: boolean | undefined;
+    } & Omit<import("../Buttons").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+};

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/Header/HeaderButton.js

@@ -55,6 +55,7 @@ export var HeaderButton = React.forwardRef(function (props, ref) {
             : undefined, styleType: 'borderless', className: cx({
             '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.createElement(React.Fragment, null,
             React.createElement("div", null, name),

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;
         }