@yamada-ui/react/dist/esm/components/steps/use-steps.js

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

"use client";


import { createContext as createContext$1 } from "../../utils/context.js";
import { useSafeLayoutEffect } from "../../utils/effect.js";
import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useEnvironment } from "../../core/system/environment-provider.js";
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
import { createDescendants } from "../../hooks/use-descendants/index.js";
import { useCallback, useId } from "react";

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

//#endregion
export { StepsContext, StepsDescendantsContext, StepsItemContext, useSteps, useStepsContext, useStepsDescendant, useStepsDescendants, useStepsItem, useStepsItemContext };
//# sourceMappingURL=use-steps.js.map