@gravity-ui/uikit
Version:
Gravity UI base styling and components
24 lines (23 loc) • 1.33 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { filterDOMProps } from "../utils/filterDOMProps.js";
import { StepperItem } from "./StepperItem.js";
import { StepperSeparator } from "./StepperSeparator.js";
import { StepperContext } from "./context.js";
import { b } from "./utils.js";
import "./Stepper.css";
export const Stepper = (props) => {
const { children, value, size = 's', className, onUpdate, separator } = props;
const stepItems = React.useMemo(() => {
return React.Children.map(children, (child, index) => {
const itemId = child.props?.id || index;
const clonedChild = React.cloneElement(child, { id: itemId });
return (_jsxs("li", { className: b('list-item'), children: [clonedChild, Boolean(index !== React.Children.count(children) - 1) && (_jsx(StepperSeparator, { separator: separator }))] }, itemId));
});
}, [children, separator]);
return (_jsx(StepperContext.Provider, { value: { size, onUpdate, value }, children: _jsx("ol", { ...filterDOMProps(props, { labelable: true }), className: b(null, className), style: props.style, "data-qa": props.qa, children: stepItems }) }));
};
Stepper.Item = StepperItem;
Stepper.displayName = 'Stepper';
//# sourceMappingURL=Stepper.js.map