@gravity-ui/uikit
Version:
Gravity UI base styling and components
29 lines (28 loc) • 1.69 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stepper = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const filterDOMProps_1 = require("../utils/filterDOMProps.js");
const StepperItem_1 = require("./StepperItem.js");
const StepperSeparator_1 = require("./StepperSeparator.js");
const context_1 = require("./context.js");
const utils_1 = require("./utils.js");
require("./Stepper.css");
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 ((0, jsx_runtime_1.jsxs)("li", { className: (0, utils_1.b)('list-item'), children: [clonedChild, Boolean(index !== React.Children.count(children) - 1) && ((0, jsx_runtime_1.jsx)(StepperSeparator_1.StepperSeparator, { separator: separator }))] }, itemId));
});
}, [children, separator]);
return ((0, jsx_runtime_1.jsx)(context_1.StepperContext.Provider, { value: { size, onUpdate, value }, children: (0, jsx_runtime_1.jsx)("ol", { ...(0, filterDOMProps_1.filterDOMProps)(props, { labelable: true }), className: (0, utils_1.b)(null, className), style: props.style, "data-qa": props.qa, children: stepItems }) }));
};
exports.Stepper = Stepper;
exports.Stepper.Item = StepperItem_1.StepperItem;
exports.Stepper.displayName = 'Stepper';
//# sourceMappingURL=Stepper.js.map