@itwin/itwinui-react 1.34.2 → 1.37.0

package/cjs/core/index.d.ts

@@ -8,6 +8,8 @@ export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from '.
 export type { ButtonProps, DropdownButtonProps, IconButtonProps, IdeasButtonProps, SplitButtonProps, } from './Buttons';
 export { ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { ColorPicker, ColorSwatch, ColorBuilder, ColorInputPanel, ColorPalette, } from './ColorPicker';
@@ -48,8 +50,8 @@ export { LabeledTextarea } from './LabeledTextarea';
 export type { LabeledTextareaProps } from './LabeledTextarea';
 export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
 export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, } from './Menu';
-export { Modal, ModalButtonBar } from './Modal';
-export type { ModalProps, ModalButtonBarProps } from './Modal';
+export { Modal, ModalButtonBar, ModalContent } from './Modal';
+export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export type { ProgressLinearProps, ProgressRadialProps, } from './ProgressIndicators';
 export { Radio } from './Radio';
@@ -60,11 +62,15 @@ export { Select } from './Select';
 export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
 export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
+export { SkipToContentLink } from './SkipToContentLink';
+export type { SkipToContentLinkProps } from './SkipToContentLink';
 export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
 export { StatusMessage } from './StatusMessage';
 export type { StatusMessageProps } from './StatusMessage';
-export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
+export { Surface } from './Surface';
+export type { SurfaceProps } from './Surface';
+export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export type { TagProps, TagContainerProps } from './Tag';

package/cjs/core/index.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.StatusMessage = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
+exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
+exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -23,6 +24,8 @@ Object.defineProperty(exports, "IdeasButton", { enumerable: true, get: function
 Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return Buttons_1.SplitButton; } });
 var ButtonGroup_1 = require("./ButtonGroup");
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
+var Carousel_1 = require("./Carousel");
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
 var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
 var ColorPicker_1 = require("./ColorPicker");
@@ -85,6 +88,7 @@ Object.defineProperty(exports, "MenuExtraContent", { enumerable: true, get: func
 var Modal_1 = require("./Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 Object.defineProperty(exports, "ModalButtonBar", { enumerable: true, get: function () { return Modal_1.ModalButtonBar; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return Modal_1.ModalContent; } });
 var ProgressIndicators_1 = require("./ProgressIndicators");
 Object.defineProperty(exports, "ProgressLinear", { enumerable: true, get: function () { return ProgressIndicators_1.ProgressLinear; } });
 Object.defineProperty(exports, "ProgressRadial", { enumerable: true, get: function () { return ProgressIndicators_1.ProgressRadial; } });
@@ -100,10 +104,14 @@ Object.defineProperty(exports, "SideNavigation", { enumerable: true, get: functi
 Object.defineProperty(exports, "SidenavButton", { enumerable: true, get: function () { return SideNavigation_1.SidenavButton; } });
 Object.defineProperty(exports, "SidenavSubmenu", { enumerable: true, get: function () { return SideNavigation_1.SidenavSubmenu; } });
 Object.defineProperty(exports, "SidenavSubmenuHeader", { enumerable: true, get: function () { return SideNavigation_1.SidenavSubmenuHeader; } });
+var SkipToContentLink_1 = require("./SkipToContentLink");
+Object.defineProperty(exports, "SkipToContentLink", { enumerable: true, get: function () { return SkipToContentLink_1.SkipToContentLink; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 var StatusMessage_1 = require("./StatusMessage");
 Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return StatusMessage_1.StatusMessage; } });
+var Surface_1 = require("./Surface");
+Object.defineProperty(exports, "Surface", { enumerable: true, get: function () { return Surface_1.Surface; } });
 var Table_1 = require("./Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
 Object.defineProperty(exports, "tableFilters", { enumerable: true, get: function () { return Table_1.tableFilters; } });
@@ -111,6 +119,9 @@ Object.defineProperty(exports, "FilterButtonBar", { enumerable: true, get: funct
 Object.defineProperty(exports, "DefaultCell", { enumerable: true, get: function () { return Table_1.DefaultCell; } });
 Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return Table_1.EditableCell; } });
 Object.defineProperty(exports, "TablePaginator", { enumerable: true, get: function () { return Table_1.TablePaginator; } });
+Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return Table_1.ActionColumn; } });
+Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return Table_1.ExpanderColumn; } });
+Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return Table_1.SelectionColumn; } });
 var Tag_1 = require("./Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
 Object.defineProperty(exports, "TagContainer", { enumerable: true, get: function () { return Tag_1.TagContainer; } });

package/cjs/core/utils/components/Popover.js

@@ -78,7 +78,19 @@ exports.Popover = react_1.default.forwardRef(function (props, ref) {
         };
     }
     else {
-        computedProps.content = mounted ? props.content : '';
+        // Fixing issue where elements below Popover gets click events.
+        // Tippy uses react Portal, which propagates events by react tree, not dom tree.
+        // Read more: https://reactjs.org/docs/portals.html#event-bubbling-through-portals
+        var clonedContent = react_1.default.isValidElement(props.content)
+            ? react_1.default.cloneElement(props.content, {
+                onClick: function (e) {
+                    var _a, _b;
+                    e.stopPropagation();
+                    (_b = (_a = props.content.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                },
+            })
+            : props.content;
+        computedProps.content = mounted ? clonedContent : '';
     }
     return react_1.default.createElement(react_2.default, __assign({}, computedProps, { ref: refs }));
 });

package/cjs/core/utils/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from './useResizeObserver';
 export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
+export * from './useMediaQuery';

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

@@ -21,3 +21,4 @@ __exportStar(require("./useResizeObserver"), exports);
 __exportStar(require("./useContainerWidth"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);
+__exportStar(require("./useMediaQuery"), exports);

package/cjs/core/utils/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare const useMediaQuery: (queryString: string) => boolean;
+export default useMediaQuery;

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

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaQuery = 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 functions_1 = require("../functions");
+var useMediaQuery = function (queryString) {
+    var _a = react_1.default.useState(), matches = _a[0], setMatches = _a[1];
+    react_1.default.useLayoutEffect(function () {
+        var _a, _b, _c;
+        var mediaQueryList = (_b = (_a = (0, functions_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
+        var handleChange = function (_a) {
+            var matches = _a.matches;
+            return setMatches(matches);
+        };
+        if (mediaQueryList != undefined) {
+            setMatches(mediaQueryList.matches);
+            try {
+                mediaQueryList.addEventListener('change', handleChange);
+            }
+            catch (_d) {
+                // Safari 13 fallback
+                (_c = mediaQueryList.addListener) === null || _c === void 0 ? void 0 : _c.call(mediaQueryList, handleChange);
+            }
+        }
+        return function () {
+            var _a;
+            try {
+                mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeEventListener('change', handleChange);
+            }
+            catch (_b) {
+                // Safari 13 fallback
+                (_a = mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeListener) === null || _a === void 0 ? void 0 : _a.call(mediaQueryList, handleChange);
+            }
+        };
+    }, [queryString]);
+    return !!matches;
+};
+exports.useMediaQuery = useMediaQuery;
+exports.default = exports.useMediaQuery;

package/cjs/core/utils/hooks/useTheme.d.ts

@@ -6,6 +6,11 @@ export declare type ThemeOptions = {
      * @default document
      */
     ownerDocument?: Document;
+    /**
+     * Whether to apply high-contrast versions of light and dark themes.
+     * Will default to user preference if browser supports it.
+     */
+    highContrast?: boolean;
 };
 export declare type ThemeType = 'light' | 'dark' | 'os';
 /**

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