@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-cjs/core/SideNavigation/SidenavButton.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SidenavButton", {
+    enumerable: true,
+    get: function() {
+        return SidenavButton;
+    }
+});
+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("../Buttons/Button.js");
+const _Tooltip = require("../Tooltip/Tooltip.js");
+const _SideNavigation = require("./SideNavigation.js");
+const SidenavButton = _react.forwardRef((props, ref)=>{
+    let { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
+    let isExpanded = true === _react.useContext(_SideNavigation.SidenavExpandedContext);
+    let sidenavButton = _react.createElement(_Button.Button, {
+        className: (0, _classnames.default)('iui-sidenav-button', {
+            'iui-submenu-open': isSubmenuOpen
+        }, className),
+        "data-iui-active": isActive,
+        size: "large",
+        disabled: disabled,
+        ref: ref,
+        ...rest
+    }, children);
+    return isExpanded ? sidenavButton : _react.createElement(_Tooltip.Tooltip, {
+        content: children,
+        placement: "right",
+        ariaStrategy: "none"
+    }, sidenavButton);
+});
+SidenavButton.displayName = 'SidenavButton';

package/DEV-cjs/core/SideNavigation/SidenavSubmenu.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SidenavSubmenu", {
+    enumerable: true,
+    get: function() {
+        return SidenavSubmenu;
+    }
+});
+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 _index = require("../../utils/index.js");
+const SidenavSubmenu = _react.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-side-navigation-submenu', className),
+        ref: ref,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        className: "iui-side-navigation-submenu-content"
+    }, children));
+});
+SidenavSubmenu.displayName = 'SidenavSubmenu';

package/DEV-cjs/core/SideNavigation/SidenavSubmenuHeader.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SidenavSubmenuHeader", {
+    enumerable: true,
+    get: function() {
+        return SidenavSubmenuHeader;
+    }
+});
+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 _index = require("../../utils/index.js");
+const SidenavSubmenuHeader = _react.forwardRef((props, forwardedRef)=>{
+    let { children, actions, className, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-side-navigation-submenu-header', className),
+        ref: forwardedRef,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        className: "iui-side-navigation-submenu-header-label"
+    }, children), actions && _react.createElement(_index.Box, {
+        className: "iui-side-navigation-submenu-header-actions"
+    }, actions));
+});
+SidenavSubmenuHeader.displayName = 'SidenavSubmenuHeader';

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SkipToContentLink", {
+    enumerable: true,
+    get: function() {
+        return SkipToContentLink;
+    }
+});
+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 SkipToContentLink = _react.forwardRef((props, ref)=>{
+    let { children = 'Skip to main content', className, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        as: "a",
+        ref: ref,
+        className: (0, _classnames.default)('iui-skip-to-content-link', className),
+        ...rest
+    }, children);
+});
+SkipToContentLink.displayName = 'SkipToContentLink';

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

@@ -0,0 +1,281 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Slider", {
+    enumerable: true,
+    get: function() {
+        return Slider;
+    }
+});
+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 _index = require("../../utils/index.js");
+const _Track = require("./Track.js");
+const _Thumb = require("./Thumb.js");
+const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation)=>{
+    if ('horizontal' === orientation) {
+        let position = (0, _index.getBoundedValue)(pointerX, rect.left, rect.right);
+        return (position - rect.left) / rect.width;
+    }
+    let position = (0, _index.getBoundedValue)(pointerY, rect.top, rect.bottom);
+    return (rect.bottom - position) / rect.height;
+};
+const getClosestValueIndex = (values, pointerValue)=>{
+    if (1 === values.length) return 0;
+    let distances = values.map((value)=>Math.abs(value - pointerValue));
+    let smallest = Math.min(...distances);
+    return distances.indexOf(smallest);
+};
+const getDefaultTrackDisplay = (trackDisplayMode, values)=>{
+    if ('auto' !== trackDisplayMode) return trackDisplayMode;
+    return values.length % 2 ? 'even-segments' : 'odd-segments';
+};
+const roundValueToClosestStep = (value, step, min)=>Math.round((value - min) / step) * step + min;
+const formatNumberValue = (value, step, numDecimals)=>{
+    if (Number.isInteger(step)) return value.toFixed(0);
+    return value.toFixed(numDecimals);
+};
+const focusThumb = (sliderContainer, activeIndex)=>{
+    let doc = sliderContainer.ownerDocument;
+    if (!sliderContainer.contains(doc.activeElement) || Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex) {
+        let thumbToFocus = sliderContainer.querySelector(`[data-index="${activeIndex}"]`);
+        thumbToFocus && thumbToFocus.focus();
+    }
+};
+const Slider = _react.forwardRef((props, ref)=>{
+    let { min = 0, max = 100, values, step = 1, tooltipProps, disabled = false, tickLabels, minLabel, maxLabel, trackDisplayMode = 'auto', thumbMode = 'inhibit-crossing', onChange, onUpdate, thumbProps, className, trackContainerProps, minProps, maxProps, trackProps, tickProps, ticksProps, orientation = 'horizontal', ...rest } = props;
+    let [currentValues, setCurrentValues] = _react.useState(values);
+    _react.useEffect(()=>{
+        setCurrentValues(values);
+    }, [
+        values
+    ]);
+    let [minValueLabel, setMinValueLabel] = _react.useState(()=>minLabel ?? min.toString());
+    _react.useEffect(()=>{
+        setMinValueLabel(minLabel ?? min.toString());
+    }, [
+        minLabel,
+        min
+    ]);
+    let [maxValueLabel, setMaxValueLabel] = _react.useState(()=>maxLabel ?? max.toString());
+    _react.useEffect(()=>{
+        setMaxValueLabel(maxLabel ?? max.toString());
+    }, [
+        maxLabel,
+        max
+    ]);
+    let [trackDisplay, setTrackDisplay] = _react.useState(()=>getDefaultTrackDisplay(trackDisplayMode, currentValues));
+    _react.useEffect(()=>{
+        setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
+    }, [
+        trackDisplayMode,
+        currentValues
+    ]);
+    let containerRef = _react.useRef(null);
+    let getNumDecimalPlaces = _react.useMemo(()=>{
+        let stepString = step.toString();
+        let decimalIndex = stepString.indexOf('.');
+        return stepString.length - (decimalIndex + 1);
+    }, [
+        step
+    ]);
+    let getAllowableThumbRange = _react.useCallback((index)=>{
+        if ('inhibit-crossing' === thumbMode) {
+            let minVal = 0 === index ? min : currentValues[index - 1] + step;
+            let maxVal = index < currentValues.length - 1 ? currentValues[index + 1] - step : max;
+            return [
+                minVal,
+                maxVal
+            ];
+        }
+        return [
+            min,
+            max
+        ];
+    }, [
+        max,
+        min,
+        step,
+        thumbMode,
+        currentValues
+    ]);
+    let [activeThumbIndex, setActiveThumbIndex] = _react.useState(void 0);
+    let updateThumbValue = _react.useCallback((event, callbackType)=>{
+        if (containerRef.current && void 0 !== activeThumbIndex) {
+            let percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
+            let pointerValue = min + (max - min) * percent;
+            pointerValue = roundValueToClosestStep(pointerValue, step, min);
+            let [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
+            pointerValue = (0, _index.getBoundedValue)(pointerValue, minVal, maxVal);
+            if (pointerValue !== currentValues[activeThumbIndex]) {
+                let newValues = [
+                    ...currentValues
+                ];
+                newValues[activeThumbIndex] = pointerValue;
+                setCurrentValues(newValues);
+                'onChange' === callbackType ? onChange?.(newValues) : onUpdate?.(newValues);
+            } else if ('onChange' === callbackType) onChange?.(currentValues);
+        }
+    }, [
+        activeThumbIndex,
+        min,
+        max,
+        step,
+        getAllowableThumbRange,
+        currentValues,
+        onUpdate,
+        onChange,
+        orientation
+    ]);
+    let handlePointerMove = _react.useCallback((event)=>{
+        if (void 0 === activeThumbIndex) return;
+        event.preventDefault();
+        event.stopPropagation();
+        updateThumbValue(event, 'onUpdate');
+    }, [
+        activeThumbIndex,
+        updateThumbValue
+    ]);
+    let onThumbValueChanged = _react.useCallback((index, value, keyboardReleased)=>{
+        if (currentValues[index] === value && !keyboardReleased) return;
+        if (keyboardReleased) onChange?.(currentValues);
+        else {
+            let newValues = [
+                ...currentValues
+            ];
+            newValues[index] = value;
+            onUpdate?.(newValues);
+            setCurrentValues(newValues);
+        }
+    }, [
+        currentValues,
+        onUpdate,
+        onChange
+    ]);
+    let onThumbActivated = _react.useCallback((index)=>{
+        setActiveThumbIndex(index);
+    }, []);
+    let handlePointerUp = _react.useCallback((event)=>{
+        if (void 0 === activeThumbIndex) return;
+        updateThumbValue(event, 'onChange');
+        setActiveThumbIndex(void 0);
+        event.preventDefault();
+        event.stopPropagation();
+    }, [
+        activeThumbIndex,
+        updateThumbValue
+    ]);
+    let handlePointerDownOnSlider = _react.useCallback((event)=>{
+        if (containerRef.current) {
+            let percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
+            let pointerValue = min + (max - min) * percent;
+            pointerValue = roundValueToClosestStep(pointerValue, step, min);
+            let closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
+            let [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
+            pointerValue = (0, _index.getBoundedValue)(pointerValue, minVal, maxVal);
+            if (pointerValue === currentValues[closestValueIndex]) return;
+            let newValues = [
+                ...currentValues
+            ];
+            newValues[closestValueIndex] = pointerValue;
+            setCurrentValues(newValues);
+            onChange?.(newValues);
+            onUpdate?.(newValues);
+            focusThumb(containerRef.current, closestValueIndex);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [
+        min,
+        max,
+        step,
+        currentValues,
+        getAllowableThumbRange,
+        onChange,
+        onUpdate,
+        orientation
+    ]);
+    (0, _index.useEventListener)('pointermove', handlePointerMove, containerRef.current?.ownerDocument);
+    (0, _index.useEventListener)('pointerup', handlePointerUp, containerRef.current?.ownerDocument);
+    let tickMarkArea = _react.useMemo(()=>{
+        if (!tickLabels) return null;
+        if (Array.isArray(tickLabels)) return _react.createElement(_index.Box, {
+            as: "div",
+            ...ticksProps,
+            className: (0, _classnames.default)('iui-slider-ticks', ticksProps?.className)
+        }, tickLabels.map((label, index)=>_react.createElement(_index.Box, {
+                as: "span",
+                ...tickProps,
+                key: index,
+                className: (0, _classnames.default)('iui-slider-tick', tickProps?.className)
+            }, label)));
+        return tickLabels;
+    }, [
+        tickLabels,
+        tickProps,
+        ticksProps
+    ]);
+    let generateTooltipProps = _react.useCallback((index, val)=>{
+        let outProps = tooltipProps ? tooltipProps(index, val, step) : {};
+        return {
+            ...outProps,
+            content: outProps.content ? outProps.content : formatNumberValue(val, step, getNumDecimalPlaces)
+        };
+    }, [
+        getNumDecimalPlaces,
+        step,
+        tooltipProps
+    ]);
+    return _react.createElement(_index.Box, {
+        ref: ref,
+        className: (0, _classnames.default)('iui-slider-container', className),
+        "data-iui-orientation": orientation,
+        "data-iui-disabled": disabled ? 'true' : void 0,
+        ...rest
+    }, minValueLabel && _react.createElement(_index.Box, {
+        as: "span",
+        ...minProps,
+        className: (0, _classnames.default)('iui-slider-min', minProps?.className)
+    }, minValueLabel), _react.createElement(_index.Box, {
+        ref: containerRef,
+        ...trackContainerProps,
+        className: (0, _classnames.default)('iui-slider', {
+            'iui-grabbing': void 0 !== activeThumbIndex
+        }, trackContainerProps?.className),
+        onPointerDown: handlePointerDownOnSlider
+    }, currentValues.map((thumbValue, index)=>{
+        let [minVal, maxVal] = getAllowableThumbRange(index);
+        let thisThumbProps = thumbProps?.(index);
+        return _react.createElement(_Thumb.Thumb, {
+            key: thisThumbProps?.id ?? index,
+            index: index,
+            disabled: disabled,
+            isActive: activeThumbIndex === index,
+            onThumbActivated: onThumbActivated,
+            onThumbValueChanged: onThumbValueChanged,
+            minVal: minVal,
+            maxVal: maxVal,
+            value: thumbValue,
+            tooltipProps: generateTooltipProps(index, thumbValue),
+            thumbProps: thisThumbProps,
+            step: step,
+            sliderMin: min,
+            sliderMax: max
+        });
+    }), _react.createElement(_Track.Track, {
+        trackDisplayMode: trackDisplay,
+        sliderMin: min,
+        sliderMax: max,
+        values: currentValues,
+        orientation: orientation,
+        ...trackProps
+    })), tickMarkArea, maxValueLabel && _react.createElement(_index.Box, {
+        as: "span",
+        ...maxProps,
+        className: (0, _classnames.default)('iui-slider-max', maxProps?.className)
+    }, maxValueLabel));
+});
+Slider.displayName = 'Slider';

package/DEV-cjs/core/Slider/Thumb.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Thumb", {
+    enumerable: true,
+    get: function() {
+        return Thumb;
+    }
+});
+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 _Tooltip = require("../Tooltip/Tooltip.js");
+const _index = require("../../utils/index.js");
+const Thumb = (props)=>{
+    let { value, index, minVal, maxVal, step, sliderMin, sliderMax, isActive, onThumbActivated, onThumbValueChanged, tooltipProps, thumbProps, disabled } = props;
+    let thumbRef = _react.useRef(null);
+    let handleOnKeyboardEvent = _react.useCallback((event, keyboardReleased)=>{
+        if (disabled || event.altKey) return;
+        switch(event.key){
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                onThumbValueChanged(index, Math.max(value - step, minVal), keyboardReleased);
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                onThumbValueChanged(index, Math.min(value + step, maxVal), keyboardReleased);
+                break;
+            case 'Home':
+                onThumbValueChanged(index, minVal, keyboardReleased);
+                break;
+            case 'End':
+                onThumbValueChanged(index, maxVal, keyboardReleased);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }, [
+        disabled,
+        onThumbValueChanged,
+        index,
+        value,
+        step,
+        minVal,
+        maxVal
+    ]);
+    let handlePointerDownOnThumb = _react.useCallback(()=>{
+        disabled || onThumbActivated(index);
+    }, [
+        disabled,
+        index,
+        onThumbActivated
+    ]);
+    let adjustedValue = _react.useMemo(()=>{
+        if (value < sliderMin) return sliderMin;
+        if (value > sliderMax) return sliderMax;
+        return value;
+    }, [
+        sliderMax,
+        sliderMin,
+        value
+    ]);
+    let lowPercent = _react.useMemo(()=>{
+        if (sliderMax === sliderMin) return 0;
+        return 100.0 * (adjustedValue - sliderMin) / (sliderMax - sliderMin);
+    }, [
+        adjustedValue,
+        sliderMax,
+        sliderMin
+    ]);
+    let { style, className, ...rest } = thumbProps || {};
+    return _react.createElement(_Tooltip.Tooltip, {
+        placement: "top",
+        autoUpdateOptions: {
+            animationFrame: true
+        },
+        ariaStrategy: "none",
+        ...tooltipProps
+    }, _react.createElement(_index.Box, {
+        ...rest,
+        ref: (0, _index.useMergedRefs)(thumbRef, thumbProps?.ref),
+        style: {
+            ...style,
+            '--iui-slider-thumb-position': `${lowPercent}%`
+        },
+        className: (0, _classnames.default)('iui-slider-thumb', {
+            'iui-active': isActive
+        }, className),
+        role: "slider",
+        tabIndex: disabled ? void 0 : 0,
+        "aria-valuemin": minVal,
+        "aria-valuenow": value,
+        "aria-valuemax": maxVal,
+        "aria-disabled": disabled,
+        onPointerDown: handlePointerDownOnThumb,
+        onKeyDown: (event)=>handleOnKeyboardEvent(event, false),
+        onKeyUp: (event)=>handleOnKeyboardEvent(event, true)
+    }));
+};

package/DEV-cjs/core/Slider/Track.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Track", {
+    enumerable: true,
+    get: function() {
+        return Track;
+    }
+});
+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");
+function shouldDisplaySegment(segmentIndex, mode) {
+    if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) return true;
+    if ('even-segments' === mode && 0 === segmentIndex % 2) return true;
+    return false;
+}
+function generateSegments(values, min, max) {
+    let segments = [];
+    let newValues = [
+        ...values
+    ];
+    newValues.sort((a, b)=>a - b);
+    if (0 === newValues.length || newValues[0] < min || newValues[newValues.length - 1] > max || min === max) return [];
+    let lastValue = min;
+    for(let i = 0; i < newValues.length; i++){
+        segments.push({
+            left: lastValue,
+            right: newValues[i]
+        });
+        lastValue = newValues[i];
+    }
+    segments.push({
+        left: lastValue,
+        right: max
+    });
+    return segments;
+}
+const Track = (props)=>{
+    let { className, trackDisplayMode, sliderMin, sliderMax, values, orientation } = props;
+    let [segments, setSegments] = _react.useState(()=>generateSegments(values, sliderMin, sliderMax));
+    _react.useEffect(()=>{
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [
+        values,
+        sliderMin,
+        sliderMax
+    ]);
+    return _react.createElement(_react.Fragment, null, 'none' !== trackDisplayMode && segments.map((segment, index)=>{
+        let lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin ? 100.0 * (segment.left - sliderMin) / (sliderMax - sliderMin) : 0;
+        let highPercent = segment.right >= sliderMin && sliderMax !== sliderMin ? 100.0 - 100.0 * (segment.right - sliderMin) / (sliderMax - sliderMin) : 100;
+        return _react.createElement(_react.Fragment, {
+            key: index
+        }, shouldDisplaySegment(index, trackDisplayMode) ? _react.createElement(_index.Box, {
+            className: (0, _classnames.default)('iui-slider-track', className),
+            style: {
+                ...'horizontal' === orientation ? {
+                    insetInlineStart: `${lowPercent}%`,
+                    insetInlineEnd: `${highPercent}%`
+                } : {
+                    insetBlockStart: `${highPercent}%`,
+                    insetBlockEnd: `${lowPercent}%`
+                }
+            }
+        }) : null);
+    }));
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "StatusMessage", {
+    enumerable: true,
+    get: function() {
+        return StatusMessage;
+    }
+});
+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 _index = require("../../utils/index.js");
+const _classnames = _interop_require_default._(require("classnames"));
+const _Icon = require("../Icon/Icon.js");
+const StatusMessage = _react.forwardRef((props, ref)=>{
+    let { children, startIcon: userStartIcon, status, className, iconProps, contentProps, ...rest } = props;
+    let icon = userStartIcon ?? (status && _index.StatusIconMap[status]());
+    let shouldShowIcon = null !== userStartIcon && !!icon;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-status-message', className),
+        "data-iui-status": status,
+        ref: ref,
+        ...rest
+    }, shouldShowIcon ? _react.createElement(_Icon.Icon, {
+        "aria-hidden": true,
+        ...iconProps
+    }, icon) : null, _react.createElement(_index.Box, contentProps, children));
+});
+StatusMessage.displayName = 'StatusMessage';

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Stepper", {
+    enumerable: true,
+    get: function() {
+        return Stepper;
+    }
+});
+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 _index = require("../../utils/index.js");
+const _StepperStep = require("./StepperStep.js");
+const defaultStepperLocalization = {
+    stepsCountLabel: (currentStep, totalSteps)=>`Step ${currentStep} of ${totalSteps}:`
+};
+const Stepper = _react.forwardRef((props, ref)=>{
+    let { currentStep, steps, type = 'default', localization = defaultStepperLocalization, onStepClick, stepProps, trackContentProps, circleProps, nameProps, labelProps, labelCountProps, ...rest } = props;
+    let boundedCurrentStep = Math.min(Math.max(0, currentStep ?? 0), steps.length - 1);
+    return _react.createElement(_index.Box, {
+        className: 'iui-stepper',
+        ref: ref,
+        ...rest
+    }, _react.createElement("ol", null, steps.map((s, index)=>{
+        let thisStepProps = stepProps?.(index);
+        let thisTrackContentProps = trackContentProps?.(index);
+        let thisCircleProps = circleProps?.(index);
+        let thisNameProps = nameProps?.(index);
+        return _react.createElement(_StepperStep.StepperStep, {
+            stepProps: thisStepProps,
+            trackContentProps: thisTrackContentProps,
+            circleProps: thisCircleProps,
+            nameProps: thisNameProps,
+            key: index,
+            index: index,
+            title: 'long' === type ? '' : s.name,
+            currentStepNumber: boundedCurrentStep,
+            totalSteps: steps.length,
+            type: type,
+            onClick: onStepClick,
+            description: s.description
+        });
+    })), 'long' === type && _react.createElement(_index.Box, {
+        as: "div",
+        ...labelProps,
+        className: (0, _classnames.default)('iui-stepper-steps-label', labelProps?.className)
+    }, _react.createElement(_index.Box, {
+        as: "span",
+        ...labelCountProps,
+        className: (0, _classnames.default)('iui-stepper-steps-label-count', labelCountProps?.className)
+    }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)), steps[boundedCurrentStep].name));
+});
+Stepper.displayName = 'Stepper';