@kubit-ui-web/react-components/dist/esm/components/stepperNumber/stepperNumberStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { ScreenReaderOnly } from '../screenReaderOnly/screenReaderOnly';
import { buildAriaCurrent } from './helpers/aria';
import { buildScreenReaderText } from './helpers/screnReader';
import { mapToStepState } from './helpers/stepState';
import { BuilStepContainerStyled, ScreenReaderCompletedStep, ScreenReaderTitle, StepBarStyled, StepCircleBarWrapperStyled, StepCircleStyled, StepContainerStyled, StepperNumberContainerStyled, StepperNumberContainerVerticalStep, StepsContainerStyled, } from './stepperNumber.styled';
import { StepperNumberOrientationType } from './types/orientation';
import { StepperNumberStateType } from './types/state';
const defaultStep = 0;
const StepperNumberStandAloneComponent = ({ currentStep = defaultStep, dataTestId = 'stepper-number', ...props }, ref) => {
    const id = useId('stepperNumber');
    const screenReaderTitleId = `${id}ScreenReaderTitle`;
    const ariaLabelledBy = props.screenReaderTitle?.content ? screenReaderTitleId : undefined;
    const steps = mapToStepState(props.steps, currentStep);
    const isVertical = props.orientation === StepperNumberOrientationType.VERTICAL;
    const usingScreenReaderTextBuilder = Boolean(props.screenReaderTextBuilder);
    return (_jsxs(StepperNumberContainerStyled, { ref: ref, "aria-hidden": !isVertical, "aria-label": props['aria-label'], "aria-labelledby": ariaLabelledBy, "data-testid": dataTestId, children: [props.screenReaderTitle?.content && (_jsx(ScreenReaderTitle, { as: props.screenReaderTitle.component, id: screenReaderTitleId, children: props.screenReaderTitle?.content })), _jsx(StepsContainerStyled, { "data-testid": `${dataTestId}-steps-container`, styles: props.styles, children: steps.map((step, index) => {
                    const isLastStep = index === steps.length - 1;
                    return (_jsxs(BuilStepContainerStyled, { "$orientation": props.orientation, "aria-current": buildAriaCurrent(currentStep, index, props.orientation), "data-testid": `${dataTestId}-li-${index}`, horizontalOrientationWidth: isLastStep ? 'auto' : props.horizontalOrientationWidth, children: [usingScreenReaderTextBuilder && (_jsx(ScreenReaderOnly, { children: buildScreenReaderText(index, currentStep, steps.length, props.screenReaderTextBuilder, step.name, isVertical) })), _jsxs(StepContainerStyled, { "aria-hidden": !isVertical || usingScreenReaderTextBuilder ? true : undefined, state: step.state, styles: props.styles, children: [_jsxs(StepCircleBarWrapperStyled, { "$orientation": props.orientation, children: [_jsx(StepCircleStyled, { state: step.state, styles: props.styles, children: step.state === StepperNumberStateType.COMPLETED ? (_jsxs(React.Fragment, { children: [_jsx(ElementOrIcon, { customIconStyles: props.styles?.[step.state]?.iconSelected, ...props.completedStepIcon }), _jsx(ScreenReaderOnly, { children: index + 1 })] })) : (_jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles?.[step.state]?.stepIndex, children: index + 1 })) }), !isLastStep && (_jsx(StepBarStyled, { state: steps[index + 1].state, styles: props.styles }))] }), isVertical && (_jsxs(StepperNumberContainerVerticalStep, { "aria-hidden": usingScreenReaderTextBuilder ? true : undefined, isLastStep: isLastStep, state: step.state, styles: props.styles, children: [_jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles?.[step.state]?.stepName, maxTruncatedLines: props.stepMaxTruncatedLines, children: step.name }), !usingScreenReaderTextBuilder &&
                                                step.state === StepperNumberStateType.COMPLETED &&
                                                props.screenReaderCompletedStep?.content && (_jsxs(ScreenReaderCompletedStep, { as: props.screenReaderCompletedStep.component, "data-testid": props.screenReaderCompletedStep.dataTestId, children: ["\u00A0", props.screenReaderCompletedStep.content] }))] }))] })] }, 'stepContainer' + index));
                }) })] }));
};
export const StepperNumberStandAlone = React.forwardRef(StepperNumberStandAloneComponent);
//# sourceMappingURL=stepperNumberStandAlone.js.map