@itwin/itwinui-react 1.34.1 → 1.36.0

package/cjs/core/utils/hooks/useTheme.js

@@ -11,6 +11,7 @@ exports.useTheme = void 0;
 var react_1 = __importDefault(require("react"));
 require("@itwin/itwinui-css/css/global.css");
 var dom_1 = require("../functions/dom");
+var useMediaQuery_1 = require("./useMediaQuery");
 /**
  * Hook that applies styling and theme to all components.
  * Defaults to light theme if none provided or set elsewhere.
@@ -20,6 +21,8 @@ var dom_1 = require("../functions/dom");
 var useTheme = function (theme, themeOptions) {
     var _a;
     var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, dom_1.getDocument)();
+    var prefersHighContrast = (0, useMediaQuery_1.useMediaQuery)('(prefers-contrast: more)');
+    var highContrast = react_1.default.useMemo(function () { var _a; return !!((_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast); }, [prefersHighContrast, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast]);
     react_1.default.useLayoutEffect(function () {
         if (!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.contains('iui-body'))) {
             ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.add('iui-body');
@@ -34,20 +37,20 @@ var useTheme = function (theme, themeOptions) {
         var addOSTheme = function (_a) {
             var isDark = _a.matches;
             if (isDark) {
-                addDarkTheme(ownerDocument);
+                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
             }
             else {
-                addLightTheme(ownerDocument);
+                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
             }
         };
         switch (theme) {
             case 'light':
                 (_c = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                addLightTheme(ownerDocument);
+                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 break;
             case 'dark':
                 (_d = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                addDarkTheme(ownerDocument);
+                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
                 break;
             case 'os':
                 if (prefersDarkMediaQuery != undefined) {
@@ -55,26 +58,29 @@ var useTheme = function (theme, themeOptions) {
                     (_e = prefersDarkMediaQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersDarkMediaQuery, 'change', addOSTheme);
                 }
                 else {
-                    addLightTheme(ownerDocument);
+                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 }
                 break;
             default:
                 if (ownerDocument.documentElement.className.indexOf('iui-theme') === -1) {
-                    addLightTheme(ownerDocument);
+                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 }
         }
         return function () {
             var _a;
             (_a = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkMediaQuery, 'change', addOSTheme);
         };
-    }, [ownerDocument, theme]);
+    }, [highContrast, ownerDocument, theme]);
 };
 exports.useTheme = useTheme;
-var addLightTheme = function (ownerDocument) {
-    ownerDocument.documentElement.classList.add('iui-theme-light');
-    ownerDocument.documentElement.classList.remove('iui-theme-dark');
-};
-var addDarkTheme = function (ownerDocument) {
-    ownerDocument.documentElement.classList.add('iui-theme-dark');
-    ownerDocument.documentElement.classList.remove('iui-theme-light');
+var applyTheme = function (theme, _a) {
+    var ownerDocument = _a.ownerDocument, highContrast = _a.highContrast;
+    var classList = ownerDocument.documentElement.classList;
+    var currentTheme = Array.from(classList).find(function (cls) {
+        return cls.startsWith('iui-theme');
+    });
+    if (currentTheme) {
+        classList.remove(currentTheme);
+    }
+    classList.add("iui-theme-" + theme + (highContrast ? '-hc' : ''));
 };

package/cjs/types/react-table-config.d.ts

@@ -2,9 +2,22 @@
 declare module 'react-table' {
     type FieldType = 'text' | 'number' | 'date' | string;
     type CellRendererProps<D extends object = {}> = {
+        /**
+         * Cell HTML props passed from the Table.
+         */
         cellElementProps: TableCellProps;
+        /**
+         * Table specific cell props like `column`, `row`.
+         */
         cellProps: CellProps<D>;
+        /**
+         * Cell's content.
+         */
         children: React.ReactNode;
+        /**
+         * Function that returns whether the cell is disabled.
+         */
+        isDisabled?: (rowData: D) => boolean;
     };
     interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
         /**
@@ -73,6 +86,11 @@ declare module 'react-table' {
          * @default false
          */
         disableReordering?: boolean;
+        /**
+         * If true, column's visibility cannot be toggled.
+         * @default false
+         */
+        disableToggleVisibility?: boolean;
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
         originalWidth: number;

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -65,6 +65,7 @@ export var ButtonGroup = React.forwardRef(function (props, ref) {
     return (React.createElement("div", __assign({ className: cx({
             '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.createElement(React.Fragment, null,
         overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),

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

@@ -0,0 +1,124 @@
+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 { getRandomValue, useMergedRefs, useTheme } from '../utils';
+import '@itwin/itwinui-css/css/carousel.css';
+import { CarouselContext } from './CarouselContext';
+import { CarouselSlider } from './CarouselSlider';
+import { CarouselSlide } from './CarouselSlide';
+import { CarouselDotsList } from './CarouselDotsList';
+import { CarouselDot } from './CarouselDot';
+import { CarouselNavigation } from './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>
+ */
+export var Carousel = Object.assign(React.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.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-" + getRandomValue(10); })[0];
+    useTheme();
+    var isManuallyUpdating = React.useRef(false);
+    var scrollInstantly = React.useRef(false);
+    var carouselRef = React.useRef(null);
+    var refs = useMergedRefs(carouselRef, ref);
+    var _b = React.useState(userActiveIndex), currentIndex = _b[0], _setCurrentIndex = _b[1];
+    React.useEffect(function () {
+        _setCurrentIndex(userActiveIndex);
+    }, [userActiveIndex]);
+    var setCurrentIndex = React.useCallback(function (index) {
+        var _a;
+        _setCurrentIndex(index);
+        isManuallyUpdating.current = true;
+        (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    var _c = React.useState(0), slideCount = _c[0], setSlideCount = _c[1];
+    var _d = React.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.useRef(onSlideChange);
+    React.useEffect(function () {
+        var _a;
+        (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
+    }, [currentIndex]);
+    return (React.createElement("section", __assign({ "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: cx('iui-carousel', className) }, rest, { id: id }),
+        React.createElement(CarouselContext.Provider, { value: {
+                currentIndex: currentIndex,
+                setCurrentIndex: setCurrentIndex,
+                slideCount: slideCount,
+                setSlideCount: setSlideCount,
+                keysPressed: keysPressed,
+                idPrefix: id,
+                isManuallyUpdating: isManuallyUpdating,
+                scrollInstantly: scrollInstantly,
+            } }, children)));
+}), {
+    Slider: CarouselSlider,
+    Slide: CarouselSlide,
+    Navigation: CarouselNavigation,
+    DotsList: CarouselDotsList,
+    Dot: CarouselDot,
+});
+export default Carousel;

package/esm/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/esm/core/Carousel/CarouselContext.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.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+export var CarouselContext = React.createContext(undefined);

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

@@ -0,0 +1,40 @@
+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';
+/**
+ * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
+ * It should be used as a child of `CarouselDotsList`.
+ */
+export var CarouselDot = React.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.createElement("button", __assign({ type: 'button', role: 'tab', tabIndex: -1, className: cx('iui-carousel-navigation-dot', {
+            'iui-active': isActive,
+            'iui-first': isSmaller,
+            'iui-second': isSmall,
+        }, className), "aria-selected": isActive, ref: ref }, rest)));
+});

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