@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/core/Buttons/DropdownButton.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Button } from './Button.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
+export const DropdownButton = React.forwardRef((props, forwardedRef)=>{
+    let { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
+    let [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    return React.createElement(DropdownMenu, {
+        menuItems: menuItems,
+        matchWidth: true,
+        visible: isMenuOpen,
+        ...dropdownMenuProps,
+        onVisibleChange: (open)=>{
+            setIsMenuOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
+        }
+    }, React.createElement(Button, {
+        className: cx('iui-button-dropdown', className),
+        size: size,
+        styleType: styleType,
+        endIcon: isMenuOpen ? React.createElement(SvgCaretUpSmall, {
+            "aria-hidden": true
+        }) : React.createElement(SvgCaretDownSmall, {
+            "aria-hidden": true
+        }),
+        ref: forwardedRef,
+        ...rest
+    }, children));
+});
+DropdownButton.displayName = 'DropdownButton';

package/DEV-esm/core/Buttons/IconButton.js

@@ -0,0 +1,34 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box, ButtonBase } from '../../utils/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
+import { PopoverOpenContext } from '../Popover/Popover.js';
+export const IconButton = React.forwardRef((props, ref)=>{
+    let { isActive, children, styleType = 'default', size, className, label, iconProps, labelProps, ...rest } = props;
+    let buttonGroupOrientation = React.useContext(ButtonGroupContext);
+    let hasPopoverOpen = React.useContext(PopoverOpenContext);
+    let button = React.createElement(ButtonBase, {
+        ref: ref,
+        className: cx('iui-button', 'iui-field', className),
+        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
+        "data-iui-size": size,
+        "data-iui-active": isActive,
+        "data-iui-has-popover": hasPopoverOpen ? 'open' : void 0,
+        "aria-pressed": isActive,
+        ...rest
+    }, React.createElement(Box, {
+        as: "span",
+        "aria-hidden": true,
+        ...iconProps,
+        className: cx('iui-button-icon', iconProps?.className)
+    }, children), label ? React.createElement(VisuallyHidden, null, label) : null);
+    return label ? React.createElement(Tooltip, {
+        placement: 'vertical' === buttonGroupOrientation ? 'right' : 'top',
+        ...labelProps,
+        content: label,
+        ariaStrategy: "none"
+    }, button) : button;
+});
+IconButton.displayName = 'IconButton';

package/DEV-esm/core/Buttons/IdeasButton.js

@@ -0,0 +1,18 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { SvgSmileyHappy } from '../../utils/index.js';
+import { Button } from './Button.js';
+export const IdeasButton = React.forwardRef((props, ref)=>{
+    let { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
+    return React.createElement(Button, {
+        ref: ref,
+        className: cx('iui-button-idea', className),
+        "data-iui-variant": "high-visibility",
+        onClick: onClick,
+        startIcon: React.createElement(SvgSmileyHappy, {
+            "aria-hidden": true
+        }),
+        ...rest
+    }, feedbackLabel);
+});
+IdeasButton.displayName = 'IdeasButton';

package/DEV-esm/core/Buttons/SplitButton.js

@@ -0,0 +1,59 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Button } from './Button.js';
+import { IconButton } from './IconButton.js';
+import { Box, SvgCaretDownSmall, SvgCaretUpSmall, useId } from '../../utils/index.js';
+import { Menu } from '../Menu/Menu.js';
+export const SplitButton = React.forwardRef((props, forwardedRef)=>{
+    let { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, wrapperProps, menuButtonProps, portal = true, ...rest } = props;
+    let [visible, setVisible] = React.useState(false);
+    let menuContent = React.useMemo(()=>{
+        if ('function' == typeof menuItems) return menuItems(()=>setVisible(false));
+        return menuItems;
+    }, [
+        menuItems
+    ]);
+    let popoverProps = {
+        visible,
+        onVisibleChange: setVisible,
+        placement: menuPlacement,
+        matchWidth: true
+    };
+    let labelId = useId();
+    let trigger = React.createElement(IconButton, {
+        styleType: styleType,
+        size: size,
+        disabled: props.disabled,
+        "aria-labelledby": props.labelProps?.id || labelId,
+        ...menuButtonProps
+    }, visible ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null));
+    let [positionReference, setPositionReference] = React.useState(null);
+    return React.createElement(Box, {
+        as: "div",
+        ...wrapperProps,
+        ref: setPositionReference,
+        className: cx('iui-button-split', {
+            'iui-disabled': props.disabled
+        }, wrapperProps?.className)
+    }, React.createElement(Button, {
+        className: className,
+        styleType: styleType,
+        size: size,
+        onClick: onClick,
+        ref: forwardedRef,
+        ...rest,
+        labelProps: {
+            id: labelId,
+            ...props.labelProps
+        }
+    }, children), React.createElement(Menu, {
+        popoverProps: popoverProps,
+        trigger: trigger,
+        portal: portal,
+        positionReference: positionReference,
+        onKeyDown: ({ key })=>{
+            if ('Tab' === key) setVisible(false);
+        }
+    }, menuContent));
+});
+SplitButton.displayName = 'SplitButton';

package/DEV-esm/core/Carousel/Carousel.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useMergedRefs, Box, useLatestRef, useId } from '../../utils/index.js';
+import { CarouselContext } from './CarouselContext.js';
+import { CarouselSlider } from './CarouselSlider.js';
+import { CarouselSlide } from './CarouselSlide.js';
+import { CarouselDotsList } from './CarouselDotsList.js';
+import { CarouselDot } from './CarouselDot.js';
+import { CarouselNavigation } from './CarouselNavigation.js';
+let CarouselComponent = React.forwardRef((props, ref)=>{
+    let idPrefix = useId();
+    let { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, id = idPrefix, ...rest } = props;
+    let isManuallyUpdating = React.useRef(false);
+    let carouselRef = React.useRef(null);
+    let refs = useMergedRefs(carouselRef, ref);
+    let [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
+    let scrollToSlide = React.useRef(()=>{});
+    let justMounted = React.useRef(true);
+    React.useEffect(()=>{
+        setCurrentIndex(userActiveIndex);
+        scrollToSlide.current(userActiveIndex, {
+            instant: justMounted.current
+        });
+        justMounted.current = false;
+    }, [
+        userActiveIndex
+    ]);
+    let [slideCount, setSlideCount] = React.useState(0);
+    let userOnSlideChange = useLatestRef(onSlideChange);
+    React.useEffect(()=>{
+        userOnSlideChange.current?.(currentIndex);
+    }, [
+        userOnSlideChange,
+        currentIndex
+    ]);
+    return React.createElement(Box, {
+        as: "section",
+        "aria-roledescription": "carousel",
+        ref: refs,
+        className: cx('iui-carousel', className),
+        ...rest,
+        id: id
+    }, React.createElement(CarouselContext.Provider, {
+        value: {
+            currentIndex,
+            setCurrentIndex,
+            slideCount,
+            setSlideCount,
+            idPrefix: id,
+            isManuallyUpdating,
+            scrollToSlide
+        }
+    }, children));
+});
+CarouselComponent.displayName = 'Carousel';
+export const Carousel = Object.assign(CarouselComponent, {
+    Slider: CarouselSlider,
+    Slide: CarouselSlide,
+    Navigation: CarouselNavigation,
+    DotsList: CarouselDotsList,
+    Dot: CarouselDot
+});

package/DEV-esm/core/Carousel/CarouselContext.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export const CarouselContext = React.createContext(void 0);
+CarouselContext.displayName = 'CarouselContext';

package/DEV-esm/core/Carousel/CarouselDot.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { ButtonBase } from '../../utils/index.js';
+export const CarouselDot = React.forwardRef((props, ref)=>{
+    let { isActive, isSmaller, isSmall, className, ...rest } = props;
+    return React.createElement(ButtonBase, {
+        role: "tab",
+        tabIndex: isActive ? 0 : -1,
+        className: cx('iui-carousel-navigation-dot', {
+            'iui-active': isActive,
+            'iui-first': isSmaller,
+            'iui-second': isSmall
+        }, className),
+        "aria-selected": isActive,
+        ref: ref,
+        ...rest
+    });
+});
+CarouselDot.displayName = 'Carousel.Dot';

package/DEV-esm/core/Carousel/CarouselDotsList.js

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { CarouselContext } from './CarouselContext.js';
+import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, Box } from '../../utils/index.js';
+import { CarouselDot } from './CarouselDot.js';
+export const CarouselDotsList = React.forwardRef((props, ref)=>{
+    let { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
+    let context = React.useContext(CarouselContext);
+    let slideCount = length ?? context?.slideCount ?? React.Children.count(children);
+    let currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
+    let idPrefix = props.id ?? context?.idPrefix;
+    let handleSlideChange = React.useCallback((index)=>{
+        if (context) {
+            context.setCurrentIndex(index);
+            context.scrollToSlide.current(index);
+        }
+        listRef.current?.children[index]?.focus();
+        onSlideChange?.(index);
+    }, [
+        context,
+        onSlideChange
+    ]);
+    let justMounted = React.useRef(true);
+    let [visibleCount, setVisibleCount] = React.useState(slideCount);
+    let listRef = React.useRef(null);
+    let [width, setWidth] = React.useState();
+    let [resizeRef, resizeObserver] = useResizeObserver(({ width })=>{
+        if (!listRef.current) return;
+        setWidth(width);
+        let dotWidth = listRef.current.children[0].offsetWidth;
+        setVisibleCount(Math.floor(width / dotWidth));
+    });
+    React.useEffect(()=>resizeObserver?.disconnect(), [
+        resizeObserver
+    ]);
+    let refs = useMergedRefs(ref, resizeRef, listRef);
+    let firstVisibleDotIndex = React.useMemo(()=>getBoundedValue(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [
+        currentIndex,
+        slideCount,
+        visibleCount
+    ]);
+    let lastVisibleDotIndex = React.useMemo(()=>getBoundedValue(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [
+        currentIndex,
+        slideCount,
+        visibleCount
+    ]);
+    let dots = React.useMemo(()=>Array(slideCount).fill(null).map((_, index)=>{
+            let isFirstSmallDot = index === firstVisibleDotIndex && 0 !== index || index === lastVisibleDotIndex && index !== slideCount - 1;
+            let isSecondSmallDot = index === firstVisibleDotIndex + 1 && 1 !== index || index === lastVisibleDotIndex - 1 && index !== slideCount - 2;
+            let isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
+            return React.createElement(CarouselDot, {
+                key: index,
+                "aria-label": `Slide ${index + 1}`,
+                isActive: index === currentIndex,
+                onClick: ()=>handleSlideChange(index),
+                isSmall: isSecondSmallDot,
+                isSmaller: isFirstSmallDot || isClipped,
+                id: idPrefix && `${idPrefix}--dot-${index}`
+            });
+        }), [
+        slideCount,
+        firstVisibleDotIndex,
+        lastVisibleDotIndex,
+        currentIndex,
+        idPrefix,
+        handleSlideChange
+    ]);
+    React.useEffect(()=>{
+        let firstDot = listRef.current?.children[firstVisibleDotIndex];
+        if (!listRef.current || !firstDot) return;
+        let motionOk = 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
+    ]);
+    let handleKeyDown = (event)=>{
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+        let key = event.key;
+        if ('ArrowLeft' === key || 'ArrowRight' === key) event.preventDefault();
+    };
+    let handleKeyUp = (event)=>{
+        switch(event.key){
+            case 'ArrowLeft':
+                handleSlideChange((slideCount + currentIndex - 1) % slideCount);
+                break;
+            case 'ArrowRight':
+                handleSlideChange((slideCount + currentIndex + 1) % slideCount);
+                break;
+        }
+    };
+    return React.createElement(React.Fragment, null, React.createElement(Box, {
+        className: cx('iui-carousel-navigation-dots', className),
+        role: "tablist",
+        "aria-label": "Slides",
+        ref: refs,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        tabIndex: -1,
+        ...rest
+    }, children ?? dots));
+});
+CarouselDotsList.displayName = 'Carousel.DotsList';

package/DEV-esm/core/Carousel/CarouselNavigation.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { CarouselContext } from './CarouselContext.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { CarouselDotsList } from './CarouselDotsList.js';
+import { Box, SvgChevronLeft, SvgChevronRight } from '../../utils/index.js';
+let CarouselNavigationComponent = React.forwardRef((props, ref)=>{
+    let { className, children, ...rest } = props;
+    return React.createElement(Box, {
+        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))));
+});
+CarouselNavigationComponent.displayName = 'Carousel.Navigation';
+let PreviousButton = React.forwardRef((props, ref)=>{
+    let context = React.useContext(CarouselContext);
+    if (!context) throw new Error('CarouselNavigation should be used inside Carousel');
+    let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+    return React.createElement(IconButton, {
+        styleType: "borderless",
+        size: "small",
+        tabIndex: -1,
+        "aria-label": "Previous",
+        ref: ref,
+        ...props,
+        onClick: (e)=>{
+            let prevIndex = (slideCount + currentIndex - 1) % slideCount;
+            setCurrentIndex(prevIndex);
+            scrollToSlide.current(prevIndex, {
+                instant: e.detail > 3
+            });
+            props?.onClick?.(e);
+        }
+    }, React.createElement(SvgChevronLeft, null));
+});
+PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
+let NextButton = React.forwardRef((props, ref)=>{
+    let context = React.useContext(CarouselContext);
+    if (!context) throw new Error('CarouselNavigation should be used inside Carousel');
+    let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+    return React.createElement(IconButton, {
+        styleType: "borderless",
+        size: "small",
+        tabIndex: -1,
+        "aria-label": "Next",
+        ref: ref,
+        ...props,
+        onClick: (e)=>{
+            let nextIndex = (slideCount + currentIndex + 1) % slideCount;
+            setCurrentIndex(nextIndex);
+            scrollToSlide.current(nextIndex, {
+                instant: e.detail > 3
+            });
+            props?.onClick?.(e);
+        }
+    }, React.createElement(SvgChevronRight, null));
+});
+NextButton.displayName = 'Carousel.Navigation.NextButton';
+export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
+    PreviousButton,
+    NextButton
+});

package/DEV-esm/core/Carousel/CarouselSlide.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, mergeEventHandlers, useIntersection, useMergedRefs } from '../../utils/index.js';
+import { CarouselContext } from './CarouselContext.js';
+export const CarouselSlide = React.forwardRef((props, ref)=>{
+    let { index, className, children, ...rest } = props;
+    let context = React.useContext(CarouselContext);
+    if (!context || null == index) throw new Error('CarouselSlide must be used within Carousel');
+    let { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
+    let updateActiveIndexOnScroll = React.useCallback(()=>{
+        if (!isManuallyUpdating.current) setCurrentIndex(index);
+    }, [
+        index,
+        isManuallyUpdating,
+        setCurrentIndex
+    ]);
+    let intersectionRef = useIntersection(updateActiveIndexOnScroll, {
+        threshold: 0.5
+    }, false);
+    let refs = useMergedRefs(intersectionRef, ref);
+    return React.createElement(Box, {
+        className: cx('iui-carousel-slider-item', className),
+        role: "tabpanel",
+        "aria-roledescription": "slide",
+        tabIndex: index === currentIndex ? 0 : void 0,
+        ref: refs,
+        inert: index !== currentIndex ? '' : void 0,
+        ...rest,
+        onKeyDown: mergeEventHandlers(props.onKeyDown, (event)=>{
+            if ('ArrowLeft' === event.key || 'ArrowRight' === event.key) event.preventDefault();
+        })
+    }, children);
+});
+CarouselSlide.displayName = 'Carousel.Slide';

package/DEV-esm/core/Carousel/CarouselSlider.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { CarouselContext } from './CarouselContext.js';
+import { getWindow, useMergedRefs, useLayoutEffect, Box } from '../../utils/index.js';
+export const CarouselSlider = React.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let context = React.useContext(CarouselContext);
+    if (!context) throw new Error('CarouselSlider must be used within Carousel');
+    let { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
+    let items = React.useMemo(()=>React.Children.map(children, (child, index)=>React.isValidElement(child) ? React.cloneElement(child, {
+                id: `${idPrefix}--slide-${index}`,
+                'aria-labelledby': `${idPrefix}--dot-${index}`,
+                index
+            }) : child) ?? [], [
+        children,
+        idPrefix
+    ]);
+    useLayoutEffect(()=>{
+        setSlideCount(items.length);
+    }, [
+        items.length,
+        setSlideCount
+    ]);
+    let sliderRef = React.useRef(null);
+    let refs = useMergedRefs(sliderRef, ref);
+    scrollToSlide.current = (slideIndex, { instant } = {})=>{
+        isManuallyUpdating.current = true;
+        let slideToShow = sliderRef.current?.children.item(slideIndex);
+        if (!sliderRef.current || !slideToShow) return;
+        let motionOk = getWindow()?.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
+        sliderRef.current.scrollTo({
+            left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
+            behavior: instant || !motionOk ? 'instant' : 'smooth'
+        });
+    };
+    let scrollTimeout = React.useRef();
+    let handleOnScroll = React.useCallback(()=>{
+        if (scrollTimeout.current) getWindow()?.clearTimeout(scrollTimeout.current);
+        scrollTimeout.current = getWindow()?.setTimeout(()=>{
+            isManuallyUpdating.current = false;
+        }, 100);
+    }, [
+        isManuallyUpdating
+    ]);
+    return React.createElement(Box, {
+        className: cx('iui-carousel-slider', className),
+        ref: refs,
+        onScroll: handleOnScroll,
+        tabIndex: -1,
+        ...rest
+    }, items);
+});
+CarouselSlider.displayName = 'Carousel.Slider';

package/DEV-esm/core/Checkbox/Checkbox.js

@@ -0,0 +1,46 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
+import { useMergedRefs, Box } from '../../utils/index.js';
+export const Checkbox = React.forwardRef((props, ref)=>{
+    let { className, disabled = false, indeterminate = false, label, status, variant = 'default', isLoading = false, wrapperProps = {}, labelProps = {}, style, ...rest } = props;
+    let inputElementRef = React.useRef(null);
+    let refs = useMergedRefs(inputElementRef, ref);
+    React.useEffect(()=>{
+        if (inputElementRef.current) {
+            inputElementRef.current.indeterminate = indeterminate;
+            inputElementRef.current.checked = !indeterminate && inputElementRef.current.checked;
+        }
+    });
+    let checkbox = React.createElement(React.Fragment, null, React.createElement(Box, {
+        as: "input",
+        className: cx('iui-checkbox', {
+            'iui-checkbox-visibility': 'eyeball' === variant,
+            'iui-loading': isLoading
+        }, className),
+        style: style,
+        disabled: disabled || isLoading,
+        type: "checkbox",
+        ref: refs,
+        ...rest
+    }), isLoading && React.createElement(ProgressRadial, {
+        size: "x-small",
+        indeterminate: true
+    }));
+    let { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+    let { className: labelClassName, ...restLabelProps } = labelProps;
+    return label ? 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: cx('iui-checkbox-label', labelClassName),
+        ...restLabelProps
+    }, label)) : checkbox;
+});
+Checkbox.displayName = 'Checkbox';