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

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepperNumberStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const useId_1 = require("../../hooks/useId/useId");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
const aria_1 = require("./helpers/aria");
const screnReader_1 = require("./helpers/screnReader");
const stepState_1 = require("./helpers/stepState");
const stepperNumber_styled_1 = require("./stepperNumber.styled");
const orientation_1 = require("./types/orientation");
const state_1 = require("./types/state");
const defaultStep = 0;
const StepperNumberStandAloneComponent = ({ currentStep = defaultStep, dataTestId = 'stepper-number', ...props }, ref) => {
    const id = (0, useId_1.useId)('stepperNumber');
    const screenReaderTitleId = `${id}ScreenReaderTitle`;
    const ariaLabelledBy = props.screenReaderTitle?.content ? screenReaderTitleId : undefined;
    const steps = (0, stepState_1.mapToStepState)(props.steps, currentStep);
    const isVertical = props.orientation === orientation_1.StepperNumberOrientationType.VERTICAL;
    const usingScreenReaderTextBuilder = Boolean(props.screenReaderTextBuilder);
    return ((0, jsx_runtime_1.jsxs)(stepperNumber_styled_1.StepperNumberContainerStyled, { ref: ref, "aria-hidden": !isVertical, "aria-label": props['aria-label'], "aria-labelledby": ariaLabelledBy, "data-testid": dataTestId, children: [props.screenReaderTitle?.content && ((0, jsx_runtime_1.jsx)(stepperNumber_styled_1.ScreenReaderTitle, { as: props.screenReaderTitle.component, id: screenReaderTitleId, children: props.screenReaderTitle?.content })), (0, jsx_runtime_1.jsx)(stepperNumber_styled_1.StepsContainerStyled, { "data-testid": `${dataTestId}-steps-container`, styles: props.styles, children: steps.map((step, index) => {
                    const isLastStep = index === steps.length - 1;
                    return ((0, jsx_runtime_1.jsxs)(stepperNumber_styled_1.BuilStepContainerStyled, { "$orientation": props.orientation, "aria-current": (0, aria_1.buildAriaCurrent)(currentStep, index, props.orientation), "data-testid": `${dataTestId}-li-${index}`, horizontalOrientationWidth: isLastStep ? 'auto' : props.horizontalOrientationWidth, children: [usingScreenReaderTextBuilder && ((0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { children: (0, screnReader_1.buildScreenReaderText)(index, currentStep, steps.length, props.screenReaderTextBuilder, step.name, isVertical) })), (0, jsx_runtime_1.jsxs)(stepperNumber_styled_1.StepContainerStyled, { "aria-hidden": !isVertical || usingScreenReaderTextBuilder ? true : undefined, state: step.state, styles: props.styles, children: [(0, jsx_runtime_1.jsxs)(stepperNumber_styled_1.StepCircleBarWrapperStyled, { "$orientation": props.orientation, children: [(0, jsx_runtime_1.jsx)(stepperNumber_styled_1.StepCircleStyled, { state: step.state, styles: props.styles, children: step.state === state_1.StepperNumberStateType.COMPLETED ? ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles?.[step.state]?.iconSelected, ...props.completedStepIcon }), (0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { children: index + 1 })] })) : ((0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles?.[step.state]?.stepIndex, children: index + 1 })) }), !isLastStep && ((0, jsx_runtime_1.jsx)(stepperNumber_styled_1.StepBarStyled, { state: steps[index + 1].state, styles: props.styles }))] }), isVertical && ((0, jsx_runtime_1.jsxs)(stepperNumber_styled_1.StepperNumberContainerVerticalStep, { "aria-hidden": usingScreenReaderTextBuilder ? true : undefined, isLastStep: isLastStep, state: step.state, styles: props.styles, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles?.[step.state]?.stepName, maxTruncatedLines: props.stepMaxTruncatedLines, children: step.name }), !usingScreenReaderTextBuilder &&
                                                step.state === state_1.StepperNumberStateType.COMPLETED &&
                                                props.screenReaderCompletedStep?.content && ((0, jsx_runtime_1.jsxs)(stepperNumber_styled_1.ScreenReaderCompletedStep, { as: props.screenReaderCompletedStep.component, "data-testid": props.screenReaderCompletedStep.dataTestId, children: ["\u00A0", props.screenReaderCompletedStep.content] }))] }))] })] }, 'stepContainer' + index));
                }) })] }));
};
exports.StepperNumberStandAlone = react_1.default.forwardRef(StepperNumberStandAloneComponent);
//# sourceMappingURL=stepperNumberStandAlone.js.map