@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/cjs/core/Carousel/CarouselContext.js

@@ -1,32 +1,10 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.CarouselContext = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
+const React = tslib_1.__importStar(require('react'));
 exports.CarouselContext = React.createContext(undefined);

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

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselDotProps = {
+type CarouselDotProps = {
     /** Is this dot currently active? */
     isActive?: boolean;
     /** Should be set to true for dots that are one spot from the edge of truncation. The dot size becomes small.  */

package/cjs/core/Carousel/CarouselDot.js

@@ -1,48 +1,34 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.CarouselDot = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * `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.forwardRef((props, ref) => {
-    const { isActive, isSmaller, isSmall, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'button', 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 }));
+  const { isActive, isSmaller, isSmall, className, ...rest } = props;
+  return React.createElement(index_js_1.ButtonBase, {
+    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

@@ -1,6 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
-declare type CarouselDotsListProps = {
+type CarouselDotsListProps = {
     /** 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;
     /** Index of currently active dot. Will be inferred from Carousel context, or else default to 0. */

package/cjs/core/Carousel/CarouselDotsList.js

@@ -1,42 +1,16 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.CarouselDotsList = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const CarouselContext_js_1 = require("./CarouselContext.js");
-const index_js_1 = require("../utils/index.js");
-const CarouselDot_js_1 = require("./CarouselDot.js");
-require("@itwin/itwinui-css/css/carousel.css");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const CarouselContext_js_1 = require('./CarouselContext.js');
+const index_js_1 = require('../utils/index.js');
+const CarouselDot_js_1 = require('./CarouselDot.js');
 /**
  * The `CarouselDotsList` 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
@@ -60,69 +34,126 @@ require("@itwin/itwinui-css/css/carousel.css");
  * />
  */
 exports.CarouselDotsList = React.forwardRef((props, ref) => {
-    var _a, _b, _c;
-    const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
-    const context = React.useContext(CarouselContext_js_1.CarouselContext);
-    const 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);
-    const currentIndex = (_b = userCurrentIndex !== null && userCurrentIndex !== void 0 ? userCurrentIndex : context === null || context === void 0 ? void 0 : context.currentIndex) !== null && _b !== void 0 ? _b : 0;
-    const idPrefix = (_c = props.id) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.idPrefix;
-    const handleSlideChange = React.useCallback((index) => {
-        if (context) {
-            context.setCurrentIndex(index);
-            context.scrollToSlide.current(index);
-        }
-        onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
-    }, [context, onSlideChange]);
-    const justMounted = React.useRef(true);
-    const [visibleCount, setVisibleCount] = React.useState(slideCount);
-    const listRef = React.useRef(null);
-    const [width, setWidth] = React.useState();
-    const [resizeRef, resizeObserver] = (0, index_js_1.useResizeObserver)(({ width }) => {
-        if (!listRef.current) {
-            return;
-        }
-        setWidth(width);
-        const dotWidth = listRef.current.children[0].offsetWidth;
-        setVisibleCount(Math.floor(width / dotWidth));
-    });
-    React.useEffect(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(), [resizeObserver]);
-    const refs = (0, index_js_1.useMergedRefs)(ref, resizeRef, listRef);
-    const firstVisibleDotIndex = React.useMemo(() => (0, index_js_1.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [currentIndex, slideCount, visibleCount]);
-    const lastVisibleDotIndex = React.useMemo(() => (0, index_js_1.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [currentIndex, slideCount, visibleCount]);
-    const dots = React.useMemo(() => {
-        return Array(slideCount)
-            .fill(null)
-            .map((_, index) => {
-            const isFirstSmallDot = (index === firstVisibleDotIndex && index !== 0) ||
-                (index === lastVisibleDotIndex && index !== slideCount - 1);
-            const isSecondSmallDot = (index === firstVisibleDotIndex + 1 && index !== 1) ||
-                (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
-            const isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-            return (React.createElement(CarouselDot_js_1.CarouselDot, { key: index, "aria-label": `Slide ${index}`, isActive: index === currentIndex, onClick: () => 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(() => {
-        var _a, _b, _c;
-        const firstDot = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[firstVisibleDotIndex];
-        if (!listRef.current || !firstDot) {
-            return;
-        }
-        const motionOk = (_c = (_b = (0, index_js_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',
+  const {
+    currentIndex: userCurrentIndex,
+    length,
+    className,
+    onSlideChange,
+    children,
+    ...rest
+  } = props;
+  const context = React.useContext(CarouselContext_js_1.CarouselContext);
+  const slideCount =
+    length ?? context?.slideCount ?? React.Children.count(children);
+  const currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
+  const idPrefix = props.id ?? context?.idPrefix;
+  const handleSlideChange = React.useCallback(
+    (index) => {
+      if (context) {
+        context.setCurrentIndex(index);
+        context.scrollToSlide.current(index);
+      }
+      onSlideChange?.(index);
+    },
+    [context, onSlideChange],
+  );
+  const justMounted = React.useRef(true);
+  const [visibleCount, setVisibleCount] = React.useState(slideCount);
+  const listRef = React.useRef(null);
+  const [width, setWidth] = React.useState();
+  const [resizeRef, resizeObserver] = (0, index_js_1.useResizeObserver)(
+    ({ width }) => {
+      if (!listRef.current) {
+        return;
+      }
+      setWidth(width);
+      const dotWidth = listRef.current.children[0].offsetWidth;
+      setVisibleCount(Math.floor(width / dotWidth));
+    },
+  );
+  React.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
+  const refs = (0, index_js_1.useMergedRefs)(ref, resizeRef, listRef);
+  const firstVisibleDotIndex = React.useMemo(
+    () =>
+      (0, index_js_1.getBoundedValue)(
+        currentIndex - Math.ceil(visibleCount / 2) + 1,
+        0,
+        slideCount - visibleCount,
+      ),
+    [currentIndex, slideCount, visibleCount],
+  );
+  const lastVisibleDotIndex = React.useMemo(
+    () =>
+      (0, index_js_1.getBoundedValue)(
+        currentIndex + Math.floor(visibleCount / 2),
+        visibleCount - 1,
+        slideCount - 1,
+      ),
+    [currentIndex, slideCount, visibleCount],
+  );
+  const dots = React.useMemo(() => {
+    return Array(slideCount)
+      .fill(null)
+      .map((_, index) => {
+        const isFirstSmallDot =
+          (index === firstVisibleDotIndex && index !== 0) ||
+          (index === lastVisibleDotIndex && index !== slideCount - 1);
+        const isSecondSmallDot =
+          (index === firstVisibleDotIndex + 1 && index !== 1) ||
+          (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
+        const isClipped =
+          index < firstVisibleDotIndex || index > lastVisibleDotIndex;
+        return React.createElement(CarouselDot_js_1.CarouselDot, {
+          key: index,
+          'aria-label': `Slide ${index}`,
+          isActive: index === currentIndex,
+          onClick: () => handleSlideChange(index),
+          isSmall: isSecondSmallDot,
+          isSmaller: isFirstSmallDot || isClipped,
+          id: idPrefix && `${idPrefix}--dot-${index}`,
+          'aria-controls': idPrefix && `${idPrefix}--slide-${index}`,
         });
-        if (justMounted.current) {
-            justMounted.current = false;
-        }
-    }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.Box, { 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)));
+      });
+  }, [
+    slideCount,
+    firstVisibleDotIndex,
+    lastVisibleDotIndex,
+    currentIndex,
+    idPrefix,
+    handleSlideChange,
+  ]);
+  React.useEffect(() => {
+    const firstDot = listRef.current?.children[firstVisibleDotIndex];
+    if (!listRef.current || !firstDot) {
+      return;
+    }
+    const motionOk = (0, index_js_1.getWindow)()?.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    )?.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(
+      index_js_1.Box,
+      {
+        className: (0, classnames_1.default)(
+          'iui-carousel-navigation-dots',
+          className,
+        ),
+        role: 'tablist',
+        'aria-label': 'Slides',
+        ref: refs,
+        ...rest,
+      },
+      children ?? dots,
+    ),
+  );
 });

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

@@ -7,20 +7,22 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
  * `children` can be specified to override what is shown in this navigation section.
  */
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
-    PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
-    NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/cjs/core/Carousel/CarouselNavigation.js

@@ -1,82 +1,111 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.CarouselNavigation = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const CarouselContext_js_1 = require("./CarouselContext.js");
-const index_js_1 = require("../Buttons/index.js");
-const CarouselDotsList_js_1 = require("./CarouselDotsList.js");
-const index_js_2 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const CarouselContext_js_1 = require('./CarouselContext.js');
+const index_js_1 = require('../Buttons/index.js');
+const CarouselDotsList_js_1 = require('./CarouselDotsList.js');
+const index_js_2 = require('../utils/index.js');
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(index_js_2.Box, { as: 'nav', className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
-        React.createElement(index_js_2.Box, { className: 'iui-carousel-navigation-left' },
-            React.createElement(PreviousButton, null)),
+  const { className, children, ...rest } = props;
+  return React.createElement(
+    index_js_2.Box,
+    {
+      as: 'nav',
+      className: (0, classnames_1.default)(
+        'iui-carousel-navigation',
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          index_js_2.Box,
+          { className: 'iui-carousel-navigation-left' },
+          React.createElement(PreviousButton, null),
+        ),
         React.createElement(CarouselDotsList_js_1.CarouselDotsList, null),
-        React.createElement(index_js_2.Box, { className: 'iui-carousel-navigation-right' },
-            React.createElement(NextButton, null))))));
+        React.createElement(
+          index_js_2.Box,
+          { className: 'iui-carousel-navigation-right' },
+          React.createElement(NextButton, null),
+        ),
+      ),
+  );
 });
 /** Button for switching to previous slide */
 const PreviousButton = React.forwardRef((props, ref) => {
-    const context = React.useContext(CarouselContext_js_1.CarouselContext);
-    if (!context) {
-        throw new Error('CarouselNavigation should be used inside Carousel');
-    }
-    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
-    return (React.createElement(index_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref, ...props, onClick: (e) => {
-            var _a;
-            const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-            setCurrentIndex(prevIndex);
-            scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
-            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } },
-        React.createElement(index_js_2.SvgChevronLeft, null)));
+  const context = React.useContext(CarouselContext_js_1.CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const {
+    slideCount,
+    currentIndex,
+    setCurrentIndex,
+    keysPressed,
+    scrollToSlide,
+  } = context;
+  return React.createElement(
+    index_js_1.IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      tabIndex: -1,
+      'data-pressed': keysPressed['ArrowLeft'] || undefined,
+      ref: ref,
+      ...props,
+      onClick: (e) => {
+        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+        setCurrentIndex(prevIndex);
+        scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
+        props?.onClick?.(e);
+      },
+    },
+    React.createElement(index_js_2.SvgChevronLeft, null),
+  );
 });
 /** Button for switching to next slide */
 const NextButton = React.forwardRef((props, ref) => {
-    const context = React.useContext(CarouselContext_js_1.CarouselContext);
-    if (!context) {
-        throw new Error('CarouselNavigation should be used inside Carousel');
-    }
-    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
-    return (React.createElement(index_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref, ...props, onClick: (e) => {
-            var _a;
-            const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-            setCurrentIndex(nextIndex);
-            scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
-            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } },
-        React.createElement(index_js_2.SvgChevronRight, null)));
+  const context = React.useContext(CarouselContext_js_1.CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const {
+    slideCount,
+    currentIndex,
+    setCurrentIndex,
+    keysPressed,
+    scrollToSlide,
+  } = context;
+  return React.createElement(
+    index_js_1.IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      tabIndex: -1,
+      'data-pressed': keysPressed['ArrowRight'] || undefined,
+      ref: ref,
+      ...props,
+      onClick: (e) => {
+        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+        setCurrentIndex(nextIndex);
+        scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
+        props?.onClick?.(e);
+      },
+    },
+    React.createElement(index_js_2.SvgChevronRight, null),
+  );
 });
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
@@ -85,6 +114,6 @@ const NextButton = React.forwardRef((props, ref) => {
  * `children` can be specified to override what is shown in this navigation section.
  */
 exports.CarouselNavigation = Object.assign(CarouselNavigationComponent, {
-    PreviousButton,
-    NextButton,
+  PreviousButton,
+  NextButton,
 });

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

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselSlideProps = {
+type CarouselSlideProps = {
     /**
      * Index of the current slide.
      * Does not need to be manually specified because it will be set in parent (`CarouselSlider`).