@itwin/itwinui-react 1.34.0 → 1.35.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [1.35.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.34.2...v1.35.0) (2022-04-05)
+
+### What's new
+
+* **Carousel:** Add new Carousel Component ([#569](https://www.github.com/iTwin/iTwinUI-react/issues/569)) ([fc7040c](https://www.github.com/iTwin/iTwinUI-react/commit/fc7040c712011bdf40a6d5b3e9c4bad78a532523))
+* **DatePicker:** Add year selection ([#604](https://www.github.com/iTwin/iTwinUI-react/issues/604)) ([2f57da6](https://www.github.com/iTwin/iTwinUI-react/commit/2f57da6ef07202290e4f6d214a0581dae1528007))
+* **Modal:** Add full page modal ([#588](https://www.github.com/iTwin/iTwinUI-react/issues/588)) ([711a55b](https://www.github.com/iTwin/iTwinUI-react/commit/711a55b2b4373ce4bd99d770a3edc5f9aae516bc))
+  - Add `ModalContent` component for better scroll experience.
+* **Theme:** Add support for high contrast themes ([#610](https://www.github.com/iTwin/iTwinUI-react/issues/610)) ([b1b6d95](https://www.github.com/iTwin/iTwinUI-react/commit/b1b6d9519ec0290bd6759a31fc4cc4a7c8ab03e3))
+  - High contrast themes are automatically used if user's OS prefers it. It can also be specified manually using `themeOptions.highContrast`.
+
+### Fixes
+
+* **Table:** `onBottomReached` was triggered on filtered Table ([#607](https://www.github.com/iTwin/iTwinUI-react/issues/607)) ([2f9cf24](https://www.github.com/iTwin/iTwinUI-react/commit/2f9cf24fd0eecee1bff27cbf8d69281062e3e33d))
+
+### [1.34.2](https://www.github.com/iTwin/iTwinUI-react/compare/v1.34.1...v1.34.2) (2022-03-29)
+
+### Fixes
+
+* **Table:** Date filter makes range from the begigging to the end of the day ([#601](https://www.github.com/iTwin/iTwinUI-react/issues/601)) ([ae978b7](https://www.github.com/iTwin/iTwinUI-react/commit/ae978b7df3a59f9cd18474346d88083d888e36e3))
+
+### [1.34.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.34.0...v1.34.1) (2022-03-24)
+
+### Fixes
+
+* **ComboBox:** Combine internal input onChange with `inputProps.onChange` ([#597](https://www.github.com/iTwin/iTwinUI-react/issues/597)) ([e033753](https://www.github.com/iTwin/iTwinUI-react/commit/e033753c81f3b9298df6eb198581c75344f96c00))
+
 ## [1.34.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.33.1...v1.34.0) (2022-03-22)
 
 ### What's new

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -71,6 +71,7 @@ exports.ButtonGroup = react_1.default.forwardRef(function (props, ref) {
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)({
             'iui-button-group': orientation === 'horizontal',
             'iui-button-group-vertical': orientation === 'vertical',
+            'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
         }, className), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
         overflowButton && overflowPlacement === 'start' && (react_1.default.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/carousel.css';
+export declare type CarouselProps = {
+    /**
+     * Index of the currently shown slide.
+     * Can be used to set the default index or control the active slide programmatically.
+     * @default 0
+     */
+    activeSlideIndex?: number;
+    /**
+     * Callback fired when the current slide changes.
+     */
+    onSlideChange?: (index: number) => void;
+} & React.ComponentPropsWithoutRef<'div'>;
+/**
+ * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
+ * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+ *
+ * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
+ *
+ * This component uses a composition approach so it should be used with the provided subcomponents.
+ *
+ * @example
+ * <Carousel>
+ *   <Carousel.Slider>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *   </Carousel.Slider>
+ *   <Carousel.Navigation />
+ * </Carousel>
+ */
+export declare const Carousel: React.ForwardRefExoticComponent<{
+    /**
+     * Index of the currently shown slide.
+     * Can be used to set the default index or control the active slide programmatically.
+     * @default 0
+     */
+    activeSlideIndex?: number | undefined;
+    /**
+     * Callback fired when the current slide changes.
+     */
+    onSlideChange?: ((index: number) => void) | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLElement>> & {
+    Slider: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "key" | keyof React.OlHTMLAttributes<HTMLOListElement>> & React.RefAttributes<HTMLOListElement>>;
+    Slide: React.ForwardRefExoticComponent<{
+        index?: number | undefined;
+    } & Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & React.RefAttributes<HTMLLIElement>>;
+    Navigation: 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("..").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+        NextButton: React.ForwardRefExoticComponent<{
+            isActive?: boolean | undefined;
+        } & Omit<import("..").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+    };
+    DotsList: React.ForwardRefExoticComponent<{
+        length?: number | undefined;
+        currentIndex?: number | undefined;
+        onSlideChange?: ((index: number) => void) | undefined;
+    } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+    Dot: React.ForwardRefExoticComponent<{
+        isActive?: boolean | undefined;
+        isSmall?: boolean | undefined;
+        isSmaller?: boolean | undefined;
+    } & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
+};
+export default Carousel;

package/cjs/core/Carousel/Carousel.js

@@ -0,0 +1,130 @@
+"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.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 react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/carousel.css");
+var CarouselContext_1 = require("./CarouselContext");
+var CarouselSlider_1 = require("./CarouselSlider");
+var CarouselSlide_1 = require("./CarouselSlide");
+var CarouselDotsList_1 = require("./CarouselDotsList");
+var CarouselDot_1 = require("./CarouselDot");
+var CarouselNavigation_1 = require("./CarouselNavigation");
+/**
+ * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
+ * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+ *
+ * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
+ *
+ * This component uses a composition approach so it should be used with the provided subcomponents.
+ *
+ * @example
+ * <Carousel>
+ *   <Carousel.Slider>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *   </Carousel.Slider>
+ *   <Carousel.Navigation />
+ * </Carousel>
+ */
+exports.Carousel = Object.assign(react_1.default.forwardRef(function (props, ref) {
+    var _a = props.activeSlideIndex, userActiveIndex = _a === void 0 ? 0 : _a, onSlideChange = props.onSlideChange, className = props.className, children = props.children, rest = __rest(props, ["activeSlideIndex", "onSlideChange", "className", "children"]);
+    // Generate a stateful random id if not specified
+    var id = react_1.default.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-" + (0, utils_1.getRandomValue)(10); })[0];
+    (0, utils_1.useTheme)();
+    var isManuallyUpdating = react_1.default.useRef(false);
+    var scrollInstantly = react_1.default.useRef(false);
+    var carouselRef = react_1.default.useRef(null);
+    var refs = (0, utils_1.useMergedRefs)(carouselRef, ref);
+    var _b = react_1.default.useState(userActiveIndex), currentIndex = _b[0], _setCurrentIndex = _b[1];
+    react_1.default.useEffect(function () {
+        _setCurrentIndex(userActiveIndex);
+    }, [userActiveIndex]);
+    var setCurrentIndex = react_1.default.useCallback(function (index) {
+        var _a;
+        _setCurrentIndex(index);
+        isManuallyUpdating.current = true;
+        (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    var _c = react_1.default.useState(0), slideCount = _c[0], setSlideCount = _c[1];
+    var _d = react_1.default.useState({}), keysPressed = _d[0], setKeysPressed = _d[1];
+    var handleKeyDown = function (event) {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+            return;
+        }
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            setKeysPressed(function (old) {
+                var _a;
+                return (__assign(__assign({}, old), (_a = {}, _a[event.key] = true, _a)));
+            });
+        }
+    };
+    var handleKeyUp = function (event) {
+        switch (event.key) {
+            case 'ArrowLeft': {
+                setKeysPressed(function (old) { return (__assign(__assign({}, old), { ArrowLeft: false })); });
+                setCurrentIndex(function (old) { return (slideCount + old - 1) % slideCount; });
+                break;
+            }
+            case 'ArrowRight': {
+                setKeysPressed(function (old) { return (__assign(__assign({}, old), { ArrowRight: false })); });
+                setCurrentIndex(function (old) { return (slideCount + old + 1) % slideCount; });
+                break;
+            }
+        }
+    };
+    var userOnSlideChange = react_1.default.useRef(onSlideChange);
+    react_1.default.useEffect(function () {
+        var _a;
+        (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
+    }, [currentIndex]);
+    return (react_1.default.createElement("section", __assign({ "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className) }, rest, { id: id }),
+        react_1.default.createElement(CarouselContext_1.CarouselContext.Provider, { value: {
+                currentIndex: currentIndex,
+                setCurrentIndex: setCurrentIndex,
+                slideCount: slideCount,
+                setSlideCount: setSlideCount,
+                keysPressed: keysPressed,
+                idPrefix: id,
+                isManuallyUpdating: isManuallyUpdating,
+                scrollInstantly: scrollInstantly,
+            } }, children)));
+}), {
+    Slider: CarouselSlider_1.CarouselSlider,
+    Slide: CarouselSlide_1.CarouselSlide,
+    Navigation: CarouselNavigation_1.CarouselNavigation,
+    DotsList: CarouselDotsList_1.CarouselDotsList,
+    Dot: CarouselDot_1.CarouselDot,
+});
+exports.default = exports.Carousel;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+export declare const CarouselContext: React.Context<{
+    /**
+     * Stateful index of currently active slide.
+     */
+    currentIndex: number;
+    /**
+     * State updater for currentIndex.
+     */
+    setCurrentIndex: (index: number | ((old: number) => void)) => void;
+    /**
+     * Number of slides in the carousel. Gets set in `CarouselSlider` for reading in `CarouselDotsList`.
+     */
+    slideCount: number;
+    /**
+     * State updater for slideCount.
+     */
+    setSlideCount: (length: number | ((old: number) => void)) => void;
+    /**
+     * Stateful value of the left/right arrow keys currently pressed.
+     */
+    keysPressed: Record<string, boolean>;
+    /**
+     * Prefix used for setting id for internal carousel components.
+     */
+    idPrefix: string;
+    /**
+     * Ref object used for preventing intersection observer callback from interfering with manual slide updates.
+     *
+     * Should be set to true when updating slides using any manual actions (e.g. clicking buttons), and should be set to false when the slide update completes.
+     */
+    isManuallyUpdating: React.MutableRefObject<boolean>;
+    /**
+     * Ref object used to skip smooth scrolling when button is clicked too many times.
+     */
+    scrollInstantly: React.MutableRefObject<boolean>;
+} | undefined>;

package/cjs/core/Carousel/CarouselContext.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselContext = 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"));
+exports.CarouselContext = react_1.default.createContext(undefined);

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

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
+ * It should be used as a child of `CarouselDotsList`.
+ */
+export declare const CarouselDot: React.ForwardRefExoticComponent<{
+    /** Is this dot currently active? */
+    isActive?: boolean | undefined;
+    /** Should be set to true for dots that are one spot from the edge of truncation. The dot size becomes small.  */
+    isSmall?: boolean | undefined;
+    /** Should be set to true for dots that are at the edge of truncation. The dot size becomes even smaller.  */
+    isSmaller?: boolean | undefined;
+} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;

package/cjs/core/Carousel/CarouselDot.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.CarouselDot = 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"));
+/**
+ * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
+ * It should be used as a child of `CarouselDotsList`.
+ */
+exports.CarouselDot = react_1.default.forwardRef(function (props, ref) {
+    var isActive = props.isActive, isSmaller = props.isSmaller, isSmall = props.isSmall, className = props.className, rest = __rest(props, ["isActive", "isSmaller", "isSmall", "className"]);
+    return (react_1.default.createElement("button", __assign({ type: 'button', role: 'tab', tabIndex: -1, className: (0, classnames_1.default)('iui-carousel-navigation-dot', {
+            'iui-active': isActive,
+            'iui-first': isSmaller,
+            'iui-second': isSmall,
+        }, className), "aria-selected": isActive, ref: ref }, rest)));
+});

package/cjs/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/cjs/core/Carousel/CarouselDotsList.js

@@ -0,0 +1,132 @@
+"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.CarouselDotsList = 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");
+var CarouselDot_1 = require("./CarouselDot");
+require("@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)}
+ * />
+ */
+exports.CarouselDotsList = react_1.default.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"]);
+    (0, utils_1.useTheme)();
+    var context = react_1.default.useContext(CarouselContext_1.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_1.default.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_1.default.useCallback(function (index) {
+        if (context) {
+            context.setCurrentIndex(index);
+        }
+        onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
+    }, [context, onSlideChange]);
+    var justMounted = react_1.default.useRef(true);
+    var _d = react_1.default.useState(slideCount), visibleCount = _d[0], setVisibleCount = _d[1];
+    var listRef = react_1.default.useRef(null);
+    var _e = react_1.default.useState(), width = _e[0], setWidth = _e[1];
+    var _f = (0, utils_1.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_1.default.useEffect(function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); }, [resizeObserver]);
+    var refs = (0, utils_1.useMergedRefs)(ref, resizeRef, listRef);
+    var firstVisibleDotIndex = react_1.default.useMemo(function () {
+        return (0, utils_1.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount);
+    }, [currentIndex, slideCount, visibleCount]);
+    var lastVisibleDotIndex = react_1.default.useMemo(function () {
+        return (0, utils_1.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1);
+    }, [currentIndex, slideCount, visibleCount]);
+    var dots = react_1.default.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_1.default.createElement(CarouselDot_1.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_1.default.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 = (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;
+        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_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs }, rest), children !== null && children !== void 0 ? children : dots)));
+});

package/cjs/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/cjs/core/Carousel/CarouselNavigation.js

@@ -0,0 +1,88 @@
+"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.CarouselNavigation = 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 Buttons_1 = require("../Buttons");
+var CarouselDotsList_1 = require("./CarouselDotsList");
+var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeft"));
+var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+/** Button for switching to previous slide */
+var PreviousButton = react_1.default.forwardRef(function (props, ref) {
+    var context = react_1.default.useContext(CarouselContext_1.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_1.default.createElement(Buttons_1.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_1.default.createElement(ChevronLeft_1.default, null)));
+});
+/** Button for switching to next slide */
+var NextButton = react_1.default.forwardRef(function (props, ref) {
+    var context = react_1.default.useContext(CarouselContext_1.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_1.default.createElement(Buttons_1.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_1.default.createElement(ChevronRight_1.default, 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.
+ */
+exports.CarouselNavigation = Object.assign(react_1.default.forwardRef(function (props, ref) {
+    var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
+    return (react_1.default.createElement("nav", __assign({ className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref }, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: 'iui-carousel-navigation-left' },
+            react_1.default.createElement(PreviousButton, null)),
+        react_1.default.createElement(CarouselDotsList_1.CarouselDotsList, null),
+        react_1.default.createElement("div", { className: 'iui-carousel-navigation-right' },
+            react_1.default.createElement(NextButton, null))))));
+}), { PreviousButton: PreviousButton, NextButton: NextButton });

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