@yamada-ui/react/dist/cjs/components/steps/use-steps.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_context = require('../../utils/context.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_environment_provider = require('../../core/system/environment-provider.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_hooks_use_descendants_index = require('../../hooks/use-descendants/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/steps/use-steps.ts
const { DescendantsContext: StepsDescendantsContext, useDescendant: useStepsDescendant, useDescendants: useStepsDescendants } = require_hooks_use_descendants_index.createDescendants();
const [StepsContext, useStepsContext] = require_context.createContext({ name: "StepsContext" });
const [StepsItemContext, useStepsItemContext] = require_context.createContext({ name: "StepsItemContext" });
const useSteps = ({ count = 0, defaultIndex = 0, index: indexProp, orientation = "horizontal", onChange,...rest } = {}) => {
	const descendants = useStepsDescendants();
	const [index, setIndex] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue: defaultIndex,
		value: indexProp,
		onChange
	});
	const id = (0, react.useId)();
	const getStatus = (0, react.useCallback)((indexProp$1) => {
		if (indexProp$1 < index) return "complete";
		else if (indexProp$1 > index) return "incomplete";
		else return "current";
	}, [index]);
	const onPrev = (0, react.useCallback)(() => setIndex((index$1) => Math.max(0, index$1 - 1)), [setIndex]);
	const onNext = (0, react.useCallback)(() => {
		setIndex((index$1) => Math.min(count, index$1 + 1));
	}, [count, setIndex]);
	const getRootProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
		...rest,
		...props,
		ref: require_ref.mergeRefs(ref, rest.ref)
	}), [rest]);
	const getListProps = (0, react.useCallback)((props) => {
		return {
			"data-orientation": orientation,
			...props
		};
	}, [orientation]);
	const getContentProps = (0, react.useCallback)(({ index: indexProp$1 = count,...props } = {}) => ({
		id: `${id}-${indexProp$1}`,
		hidden: indexProp$1 !== index,
		tabIndex: 0,
		...props
	}), [
		count,
		id,
		index
	]);
	const getPrevTriggerProps = (0, react.useCallback)((props = {}) => ({
		disabled: index === 0,
		...props,
		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onPrev)
	}), [onPrev, index]);
	return {
		id,
		count,
		descendants,
		getStatus,
		index,
		orientation,
		setIndex,
		getContentProps,
		getListProps,
		getNextTriggerProps: (0, react.useCallback)((props = {}) => {
			return {
				disabled: count <= index,
				...props,
				onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onNext)
			};
		}, [
			count,
			index,
			onNext
		]),
		getPrevTriggerProps,
		getRootProps,
		onNext,
		onPrev
	};
};
const useStepsItem = ({ "aria-labelledby": ariaLabelledbyProp, index,...rest }) => {
	const { descendants, register } = useStepsDescendant();
	const { id, getStatus, orientation } = useStepsContext();
	const status = getStatus(index);
	const current = status === "current";
	const first = index === 0;
	const last = index === descendants.lastValue()?.index;
	const statusDataAttr = `data-${status}`;
	const { getDocument } = require_environment_provider.useEnvironment();
	require_effect.useSafeLayoutEffect(() => {
		const el = descendants.value(index)?.node;
		const hasContent = !!getDocument()?.getElementById(`${id}-${index}`);
		if (el && hasContent) (0, require_utils_index.utils_exports.setAttribute)(el, "aria-labelledby", `${id}-${index}`);
	}, [
		descendants,
		getDocument,
		id,
		index
	]);
	const getRootProps = (0, react.useCallback)(({ ref, "aria-labelledby": ariaLabelledby,...props } = {}) => {
		return {
			"aria-current": current ? "step" : void 0,
			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby),
			"data-orientation": orientation,
			[statusDataAttr]: (0, require_utils_index.utils_exports.dataAttr)(true),
			...rest,
			...props,
			ref: require_ref.mergeRefs(ref, register)
		};
	}, [
		ariaLabelledbyProp,
		current,
		orientation,
		statusDataAttr,
		rest,
		register
	]);
	const getTitleProps = (0, react.useCallback)((props) => ({
		[statusDataAttr]: (0, require_utils_index.utils_exports.dataAttr)(true),
		...props
	}), [statusDataAttr]);
	return {
		first,
		index,
		last,
		status,
		getDescriptionProps: (0, react.useCallback)((props) => ({
			[statusDataAttr]: (0, require_utils_index.utils_exports.dataAttr)(true),
			...props
		}), [statusDataAttr]),
		getIndicatorProps: (0, react.useCallback)((props) => ({
			[statusDataAttr]: (0, require_utils_index.utils_exports.dataAttr)(true),
			...props
		}), [statusDataAttr]),
		getRootProps,
		getSeparatorProps: (0, react.useCallback)((props) => ({
			"data-orientation": orientation,
			role: "separator",
			[statusDataAttr]: (0, require_utils_index.utils_exports.dataAttr)(true),
			...props
		}), [orientation, statusDataAttr]),
		getTitleProps
	};
};

//#endregion
exports.StepsContext = StepsContext;
exports.StepsDescendantsContext = StepsDescendantsContext;
exports.StepsItemContext = StepsItemContext;
exports.useSteps = useSteps;
exports.useStepsContext = useStepsContext;
exports.useStepsDescendant = useStepsDescendant;
exports.useStepsDescendants = useStepsDescendants;
exports.useStepsItem = useStepsItem;
exports.useStepsItemContext = useStepsItemContext;
//# sourceMappingURL=use-steps.cjs.map