@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/esm/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.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.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/esm/core/Carousel/CarouselNavigation.js

@@ -5,49 +5,100 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import { Box, SvgChevronLeft, SvgChevronRight } from '../utils/index.js';
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(Box, { as: 'nav', className: cx('iui-carousel-navigation', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
-        React.createElement(Box, { className: 'iui-carousel-navigation-left' },
-            React.createElement(PreviousButton, null)),
+  const { className, children, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'nav',
+      className: cx('iui-carousel-navigation', className),
+      ref: ref,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          Box,
+          { className: 'iui-carousel-navigation-left' },
+          React.createElement(PreviousButton, null),
+        ),
         React.createElement(CarouselDotsList, null),
-        React.createElement(Box, { className: 'iui-carousel-navigation-right' },
-            React.createElement(NextButton, null))))));
+        React.createElement(
+          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);
-    if (!context) {
-        throw new Error('CarouselNavigation should be used inside Carousel');
-    }
-    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
-    return (React.createElement(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(SvgChevronLeft, null)));
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const {
+    slideCount,
+    currentIndex,
+    setCurrentIndex,
+    keysPressed,
+    scrollToSlide,
+  } = context;
+  return React.createElement(
+    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(SvgChevronLeft, null),
+  );
 });
 /** Button for switching to next slide */
 const NextButton = React.forwardRef((props, ref) => {
-    const context = React.useContext(CarouselContext);
-    if (!context) {
-        throw new Error('CarouselNavigation should be used inside Carousel');
-    }
-    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
-    return (React.createElement(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(SvgChevronRight, null)));
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const {
+    slideCount,
+    currentIndex,
+    setCurrentIndex,
+    keysPressed,
+    scrollToSlide,
+  } = context;
+  return React.createElement(
+    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(SvgChevronRight, null),
+  );
 });
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
@@ -56,6 +107,6 @@ const NextButton = React.forwardRef((props, ref) => {
  * `children` can be specified to override what is shown in this navigation section.
  */
 export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
-    PreviousButton,
-    NextButton,
+  PreviousButton,
+  NextButton,
 });

package/esm/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`).

package/esm/core/Carousel/CarouselSlide.js

@@ -13,19 +13,34 @@ import { CarouselContext } from './CarouselContext.js';
  * the dimensions should be the same for all slides.
  */
 export const CarouselSlide = React.forwardRef((props, ref) => {
-    const { index, className, children, ...rest } = props;
-    const context = React.useContext(CarouselContext);
-    if (!context || index == null) {
-        throw new Error('CarouselSlide must be used within Carousel');
+  const { index, className, children, ...rest } = props;
+  const context = React.useContext(CarouselContext);
+  if (!context || index == null) {
+    throw new Error('CarouselSlide must be used within Carousel');
+  }
+  const { isManuallyUpdating, setCurrentIndex } = context;
+  const updateActiveIndexOnScroll = React.useCallback(() => {
+    // only update index if scroll was triggered by browser
+    if (!isManuallyUpdating.current) {
+      setCurrentIndex(index);
     }
-    const { isManuallyUpdating, setCurrentIndex } = context;
-    const updateActiveIndexOnScroll = React.useCallback(() => {
-        // only update index if scroll was triggered by browser
-        if (!isManuallyUpdating.current) {
-            setCurrentIndex(index);
-        }
-    }, [index, isManuallyUpdating, setCurrentIndex]);
-    const intersectionRef = useIntersection(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
-    const refs = useMergedRefs(intersectionRef, ref);
-    return (React.createElement(Box, { as: 'li', className: cx('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs, ...rest }, children));
+  }, [index, isManuallyUpdating, setCurrentIndex]);
+  const intersectionRef = useIntersection(
+    updateActiveIndexOnScroll,
+    { threshold: 0.5 },
+    false,
+  );
+  const refs = useMergedRefs(intersectionRef, ref);
+  return React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: cx('iui-carousel-slider-item', className),
+      role: 'tabpanel',
+      'aria-roledescription': 'slide',
+      ref: refs,
+      ...rest,
+    },
+    children,
+  );
 });

package/esm/core/Carousel/CarouselSlider.js

@@ -5,54 +5,74 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getWindow, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
+import {
+  getWindow,
+  useMergedRefs,
+  useIsomorphicLayoutEffect,
+  Box,
+} from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
 export const CarouselSlider = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const context = React.useContext(CarouselContext);
-    if (!context) {
-        throw new Error('CarouselSlider must be used within Carousel');
-    }
-    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
-    const items = React.useMemo(() => {
-        var _a;
-        return (_a = React.Children.map(children, (child, index) => React.isValidElement(child)
-            ? React.cloneElement(child, {
-                id: `${idPrefix}--slide-${index}`,
-                index,
+  const { children, className, ...rest } = props;
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error('CarouselSlider must be used within Carousel');
+  }
+  const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } =
+    context;
+  const items = React.useMemo(
+    () =>
+      React.Children.map(children, (child, index) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child, {
+              id: `${idPrefix}--slide-${index}`,
+              index,
             })
-            : child)) !== null && _a !== void 0 ? _a : [];
-    }, [children, idPrefix]);
-    useIsomorphicLayoutEffect(() => {
-        setSlideCount(items.length);
-    }, [items.length, setSlideCount]);
-    const sliderRef = React.useRef(null);
-    const refs = useMergedRefs(sliderRef, ref);
-    scrollToSlide.current = (slideIndex, { instant } = {}) => {
-        var _a, _b, _c;
-        isManuallyUpdating.current = true; // start manual update
-        const slideToShow = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children.item(slideIndex);
-        if (!sliderRef.current || !slideToShow) {
-            return;
-        }
-        const motionOk = (_c = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
-        sliderRef.current.scrollTo({
-            left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
-            behavior: (instant || !motionOk ? 'instant' : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
-        });
-    };
-    const scrollTimeout = React.useRef();
-    // reset isManuallyUpdating.current to false after the last scroll event
-    const handleOnScroll = React.useCallback(() => {
-        var _a, _b;
-        if (scrollTimeout.current) {
-            (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.clearTimeout(scrollTimeout.current);
-        }
-        scrollTimeout.current = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
-            isManuallyUpdating.current = false;
-        }, 100);
-    }, [isManuallyUpdating]);
-    return (React.createElement(Box, { as: 'ol', "aria-live": 'polite', className: cx('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, ...rest }, items));
+          : child,
+      ) ?? [],
+    [children, idPrefix],
+  );
+  useIsomorphicLayoutEffect(() => {
+    setSlideCount(items.length);
+  }, [items.length, setSlideCount]);
+  const sliderRef = React.useRef(null);
+  const refs = useMergedRefs(sliderRef, ref);
+  scrollToSlide.current = (slideIndex, { instant } = {}) => {
+    isManuallyUpdating.current = true; // start manual update
+    const slideToShow = sliderRef.current?.children.item(slideIndex);
+    if (!sliderRef.current || !slideToShow) {
+      return;
+    }
+    const motionOk = getWindow()?.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    )?.matches;
+    sliderRef.current.scrollTo({
+      left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
+      behavior: instant || !motionOk ? 'instant' : 'smooth', // scrollTo accepts 'instant' but ScrollBehavior type is wrong
+    });
+  };
+  const scrollTimeout = React.useRef();
+  // reset isManuallyUpdating.current to false after the last scroll event
+  const handleOnScroll = React.useCallback(() => {
+    if (scrollTimeout.current) {
+      getWindow()?.clearTimeout(scrollTimeout.current);
+    }
+    scrollTimeout.current = getWindow()?.setTimeout(() => {
+      isManuallyUpdating.current = false;
+    }, 100);
+  }, [isManuallyUpdating]);
+  return React.createElement(
+    Box,
+    {
+      as: 'ol',
+      'aria-live': 'polite',
+      className: cx('iui-carousel-slider', className),
+      ref: refs,
+      onScroll: handleOnScroll,
+      ...rest,
+    },
+    items,
+  );
 });

package/esm/core/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CheckboxProps = {
+type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.
      */
@@ -19,15 +19,19 @@ declare type CheckboxProps = {
      * @default 'default'
      */
     variant?: 'default' | 'eyeball';
-    /**
-     * Set focus on checkbox.
-     */
-    setFocus?: boolean;
     /**
      * Display a loading state.
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * Passes properties for checkbox wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes properties for checkbox label.
+     */
+    labelProps?: React.ComponentProps<'span'>;
 };
 /**
  * Simple input checkbox

package/esm/core/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { ProgressRadial } from '../ProgressIndicators/index.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { useMergedRefs, Box } from '../utils/index.js';
 /**
  * Simple input checkbox
@@ -19,34 +19,84 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
 export const Checkbox = React.forwardRef((props, ref) => {
-    const { className, disabled = false, indeterminate = false, label, status, variant = 'default', setFocus, isLoading = false, style, ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = useMergedRefs(inputElementRef, ref);
-    React.useEffect(() => {
-        if (inputElementRef.current && setFocus) {
-            inputElementRef.current.focus();
-        }
-    }, [setFocus]);
-    React.useEffect(() => {
-        if (inputElementRef.current) {
-            inputElementRef.current.indeterminate = indeterminate;
-            inputElementRef.current.checked = indeterminate
-                ? false
-                : inputElementRef.current.checked;
-        }
-    });
-    const checkbox = (React.createElement(React.Fragment, null,
-        React.createElement(Box, { as: 'input', className: cx('iui-checkbox', {
-                'iui-checkbox-visibility': variant === 'eyeball',
-                'iui-loading': isLoading,
-            }, className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled || isLoading, type: 'checkbox', ref: refs, ...rest }),
-        isLoading && React.createElement(ProgressRadial, { size: 'x-small', indeterminate: true })));
-    return !label ? (checkbox) : (React.createElement(Box, { as: 'label', className: cx('iui-checkbox-wrapper', {
-            'iui-disabled': disabled,
-            [`iui-${status}`]: !!status,
-            'iui-loading': isLoading,
-        }, className), style: style },
+  const {
+    className,
+    disabled = false,
+    indeterminate = false,
+    label,
+    status,
+    variant = 'default',
+    isLoading = false,
+    wrapperProps = {},
+    labelProps = {},
+    style,
+    ...rest
+  } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = useMergedRefs(inputElementRef, ref);
+  React.useEffect(() => {
+    if (inputElementRef.current) {
+      inputElementRef.current.indeterminate = indeterminate;
+      inputElementRef.current.checked = indeterminate
+        ? false
+        : inputElementRef.current.checked;
+    }
+  });
+  const checkbox = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Box, {
+      as: 'input',
+      className: cx(
+        'iui-checkbox',
+        {
+          'iui-checkbox-visibility': variant === 'eyeball',
+          'iui-loading': isLoading,
+        },
+        className,
+      ),
+      style: style,
+      disabled: disabled || isLoading,
+      type: 'checkbox',
+      ref: refs,
+      ...rest,
+    }),
+    isLoading &&
+      React.createElement(ProgressRadial, {
+        size: 'x-small',
+        indeterminate: true,
+      }),
+  );
+  const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+  const { className: labelClassName, ...restLabelProps } = labelProps;
+  return !label
+    ? checkbox
+    : React.createElement(
+        Box,
+        {
+          as: 'label',
+          className: cx(
+            'iui-checkbox-wrapper',
+            {
+              'iui-disabled': disabled,
+              [`iui-${status}`]: !!status,
+              'iui-loading': isLoading,
+            },
+            wrapperClassName,
+          ),
+          ...restWrapperProps,
+        },
         checkbox,
-        label && (React.createElement(Box, { as: 'span', className: 'iui-checkbox-label' }, label))));
+        label &&
+          React.createElement(
+            Box,
+            {
+              as: 'span',
+              className: cx('iui-checkbox-label', labelClassName),
+              ...restLabelProps,
+            },
+            label,
+          ),
+      );
 });
 export default Checkbox;