@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SplitButton", {
+    enumerable: true,
+    get: function() {
+        return SplitButton;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _Button = require("./Button.js");
+const _IconButton = require("./IconButton.js");
+const _index = require("../../utils/index.js");
+const _Menu = require("../Menu/Menu.js");
+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 = (0, _index.useId)();
+    let trigger = _react.createElement(_IconButton.IconButton, {
+        styleType: styleType,
+        size: size,
+        disabled: props.disabled,
+        "aria-labelledby": props.labelProps?.id || labelId,
+        ...menuButtonProps
+    }, visible ? _react.createElement(_index.SvgCaretUpSmall, null) : _react.createElement(_index.SvgCaretDownSmall, null));
+    let [positionReference, setPositionReference] = _react.useState(null);
+    return _react.createElement(_index.Box, {
+        as: "div",
+        ...wrapperProps,
+        ref: setPositionReference,
+        className: (0, _classnames.default)('iui-button-split', {
+            'iui-disabled': props.disabled
+        }, wrapperProps?.className)
+    }, _react.createElement(_Button.Button, {
+        className: className,
+        styleType: styleType,
+        size: size,
+        onClick: onClick,
+        ref: forwardedRef,
+        ...rest,
+        labelProps: {
+            id: labelId,
+            ...props.labelProps
+        }
+    }, children), _react.createElement(_Menu.Menu, {
+        popoverProps: popoverProps,
+        trigger: trigger,
+        portal: portal,
+        positionReference: positionReference,
+        onKeyDown: ({ key })=>{
+            if ('Tab' === key) setVisible(false);
+        }
+    }, menuContent));
+});
+SplitButton.displayName = 'SplitButton';

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Carousel", {
+    enumerable: true,
+    get: function() {
+        return Carousel;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _CarouselContext = require("./CarouselContext.js");
+const _CarouselSlider = require("./CarouselSlider.js");
+const _CarouselSlide = require("./CarouselSlide.js");
+const _CarouselDotsList = require("./CarouselDotsList.js");
+const _CarouselDot = require("./CarouselDot.js");
+const _CarouselNavigation = require("./CarouselNavigation.js");
+const CarouselComponent = _react.forwardRef((props, ref)=>{
+    let idPrefix = (0, _index.useId)();
+    let { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, id = idPrefix, ...rest } = props;
+    let isManuallyUpdating = _react.useRef(false);
+    let carouselRef = _react.useRef(null);
+    let refs = (0, _index.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 = (0, _index.useLatestRef)(onSlideChange);
+    _react.useEffect(()=>{
+        userOnSlideChange.current?.(currentIndex);
+    }, [
+        userOnSlideChange,
+        currentIndex
+    ]);
+    return _react.createElement(_index.Box, {
+        as: "section",
+        "aria-roledescription": "carousel",
+        ref: refs,
+        className: (0, _classnames.default)('iui-carousel', className),
+        ...rest,
+        id: id
+    }, _react.createElement(_CarouselContext.CarouselContext.Provider, {
+        value: {
+            currentIndex,
+            setCurrentIndex,
+            slideCount,
+            setSlideCount,
+            idPrefix: id,
+            isManuallyUpdating,
+            scrollToSlide
+        }
+    }, children));
+});
+CarouselComponent.displayName = 'Carousel';
+const Carousel = Object.assign(CarouselComponent, {
+    Slider: _CarouselSlider.CarouselSlider,
+    Slide: _CarouselSlide.CarouselSlide,
+    Navigation: _CarouselNavigation.CarouselNavigation,
+    DotsList: _CarouselDotsList.CarouselDotsList,
+    Dot: _CarouselDot.CarouselDot
+});

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselContext", {
+    enumerable: true,
+    get: function() {
+        return CarouselContext;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const CarouselContext = _react.createContext(void 0);
+CarouselContext.displayName = 'CarouselContext';

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselDot", {
+    enumerable: true,
+    get: function() {
+        return CarouselDot;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const CarouselDot = _react.forwardRef((props, ref)=>{
+    let { isActive, isSmaller, isSmall, className, ...rest } = props;
+    return _react.createElement(_index.ButtonBase, {
+        role: "tab",
+        tabIndex: isActive ? 0 : -1,
+        className: (0, _classnames.default)('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-cjs/core/Carousel/CarouselDotsList.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselDotsList", {
+    enumerable: true,
+    get: function() {
+        return CarouselDotsList;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _CarouselContext = require("./CarouselContext.js");
+const _index = require("../../utils/index.js");
+const _CarouselDot = require("./CarouselDot.js");
+const CarouselDotsList = _react.forwardRef((props, ref)=>{
+    let { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
+    let context = _react.useContext(_CarouselContext.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] = (0, _index.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 = (0, _index.useMergedRefs)(ref, resizeRef, listRef);
+    let firstVisibleDotIndex = _react.useMemo(()=>(0, _index.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [
+        currentIndex,
+        slideCount,
+        visibleCount
+    ]);
+    let lastVisibleDotIndex = _react.useMemo(()=>(0, _index.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.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 = (0, _index.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(_index.Box, {
+        className: (0, _classnames.default)('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-cjs/core/Carousel/CarouselNavigation.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselNavigation", {
+    enumerable: true,
+    get: function() {
+        return CarouselNavigation;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _CarouselContext = require("./CarouselContext.js");
+const _IconButton = require("../Buttons/IconButton.js");
+const _CarouselDotsList = require("./CarouselDotsList.js");
+const _index = require("../../utils/index.js");
+const CarouselNavigationComponent = _react.forwardRef((props, ref)=>{
+    let { className, children, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-carousel-navigation', className),
+        ref: ref,
+        ...rest
+    }, children ?? _react.createElement(_react.Fragment, null, _react.createElement(_index.Box, {
+        className: "iui-carousel-navigation-left"
+    }, _react.createElement(PreviousButton, null)), _react.createElement(_CarouselDotsList.CarouselDotsList, null), _react.createElement(_index.Box, {
+        className: "iui-carousel-navigation-right"
+    }, _react.createElement(NextButton, null))));
+});
+CarouselNavigationComponent.displayName = 'Carousel.Navigation';
+const PreviousButton = _react.forwardRef((props, ref)=>{
+    let context = _react.useContext(_CarouselContext.CarouselContext);
+    if (!context) throw new Error('CarouselNavigation should be used inside Carousel');
+    let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+    return _react.createElement(_IconButton.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(_index.SvgChevronLeft, null));
+});
+PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
+const NextButton = _react.forwardRef((props, ref)=>{
+    let context = _react.useContext(_CarouselContext.CarouselContext);
+    if (!context) throw new Error('CarouselNavigation should be used inside Carousel');
+    let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+    return _react.createElement(_IconButton.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(_index.SvgChevronRight, null));
+});
+NextButton.displayName = 'Carousel.Navigation.NextButton';
+const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
+    PreviousButton,
+    NextButton
+});

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselSlide", {
+    enumerable: true,
+    get: function() {
+        return CarouselSlide;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _CarouselContext = require("./CarouselContext.js");
+const CarouselSlide = _react.forwardRef((props, ref)=>{
+    let { index, className, children, ...rest } = props;
+    let context = _react.useContext(_CarouselContext.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 = (0, _index.useIntersection)(updateActiveIndexOnScroll, {
+        threshold: 0.5
+    }, false);
+    let refs = (0, _index.useMergedRefs)(intersectionRef, ref);
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('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: (0, _index.mergeEventHandlers)(props.onKeyDown, (event)=>{
+            if ('ArrowLeft' === event.key || 'ArrowRight' === event.key) event.preventDefault();
+        })
+    }, children);
+});
+CarouselSlide.displayName = 'Carousel.Slide';

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselSlider", {
+    enumerable: true,
+    get: function() {
+        return CarouselSlider;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _CarouselContext = require("./CarouselContext.js");
+const _index = require("../../utils/index.js");
+const CarouselSlider = _react.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let context = _react.useContext(_CarouselContext.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
+    ]);
+    (0, _index.useLayoutEffect)(()=>{
+        setSlideCount(items.length);
+    }, [
+        items.length,
+        setSlideCount
+    ]);
+    let sliderRef = _react.useRef(null);
+    let refs = (0, _index.useMergedRefs)(sliderRef, ref);
+    scrollToSlide.current = (slideIndex, { instant } = {})=>{
+        isManuallyUpdating.current = true;
+        let slideToShow = sliderRef.current?.children.item(slideIndex);
+        if (!sliderRef.current || !slideToShow) return;
+        let motionOk = (0, _index.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) (0, _index.getWindow)()?.clearTimeout(scrollTimeout.current);
+        scrollTimeout.current = (0, _index.getWindow)()?.setTimeout(()=>{
+            isManuallyUpdating.current = false;
+        }, 100);
+    }, [
+        isManuallyUpdating
+    ]);
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-carousel-slider', className),
+        ref: refs,
+        onScroll: handleOnScroll,
+        tabIndex: -1,
+        ...rest
+    }, items);
+});
+CarouselSlider.displayName = 'Carousel.Slider';

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+    enumerable: true,
+    get: function() {
+        return Checkbox;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _ProgressRadial = require("../ProgressIndicators/ProgressRadial.js");
+const _index = require("../../utils/index.js");
+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 = (0, _index.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(_index.Box, {
+        as: "input",
+        className: (0, _classnames.default)('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.ProgressRadial, {
+        size: "x-small",
+        indeterminate: true
+    }));
+    let { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+    let { className: labelClassName, ...restLabelProps } = labelProps;
+    return label ? _react.createElement(_index.Box, {
+        as: "label",
+        className: (0, _classnames.default)('iui-checkbox-wrapper', {
+            'iui-disabled': disabled,
+            [`iui-${status}`]: !!status,
+            'iui-loading': isLoading
+        }, wrapperClassName),
+        ...restWrapperProps
+    }, checkbox, label && _react.createElement(_index.Box, {
+        as: "span",
+        className: (0, _classnames.default)('iui-checkbox-label', labelClassName),
+        ...restLabelProps
+    }, label)) : checkbox;
+});
+Checkbox.displayName = 'Checkbox';