@yamada-ui/react/dist/cjs/components/slider/use-slider.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_dom = require('../../utils/dom.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_hooks_use_pan_event_index = require('../../hooks/use-pan-event/index.cjs');
const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
const require_use_field_props = require('../field/use-field-props.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/slider/use-slider.ts
const useSlider = (props = {}) => {
	const { props: { id, ref, name, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, betweenThumbs = 0, defaultValue = 0, disabled, getAriaValueText, max = 100, min = 0, orientation = "horizontal", readOnly, required, step = 1, value: valueProp, onChange: onChangeProp, onChangeEnd, onChangeStart,...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
	const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue,
		value: valueProp,
		onChange: onChangeProp
	});
	const { t } = require_i18n_provider.useI18n("slider");
	const currentIndex = (0, react.useRef)(0);
	const interactive = !(disabled || readOnly);
	const [_, getPanEventProps] = require_hooks_use_pan_event_index.usePanEvent({
		onEnd: (_$1, point, rect) => {
			if (!interactive) return;
			const panValue = getPanValue(point, rect);
			if (range) {
				const start = currentIndex.current === 0;
				const oppositeValue = value[currentIndex.current === 0 ? 1 : 0];
				onChangeEnd?.(start ? [panValue, oppositeValue] : [oppositeValue, panValue]);
			} else onChangeEnd?.(panValue);
		},
		onMove: (_$1, point, rect) => {
			if (!interactive) return;
			const panValue = getPanValue(point, rect);
			onChange(currentIndex.current, panValue);
		},
		onStart: (_$1, point, rect) => {
			if (!interactive) return;
			const panValue = getPanValue(point, rect);
			if (range) {
				const distances = value.map((value$1) => Math.abs(value$1 - panValue));
				const closest = Math.min(...distances);
				const index = distances.indexOf(closest);
				currentIndex.current = index;
				const start = index === 0;
				const oppositeValue = value[index === 0 ? 1 : 0];
				onChangeStart?.(start ? [panValue, oppositeValue] : [oppositeValue, panValue]);
			} else {
				currentIndex.current = 0;
				onChangeStart?.(value);
			}
			onChange(currentIndex.current, panValue);
		}
	});
	const range = !(0, require_utils_index.utils_exports.isNumber)(value);
	const percent = range ? value.map((value$1) => (0, require_utils_index.utils_exports.valueToPercent)(value$1, min, max)) : (0, require_utils_index.utils_exports.valueToPercent)(value, min, max);
	const tenStep = (max - min) / 10;
	const oneStep = step || (max - min) / 100;
	if (max < min) console.warn("Do not assign a number less than 'min' to 'max'");
	const getMinMax = (0, react.useCallback)((index) => {
		const start = index === 0;
		const oppositeValue = range ? value[index === 0 ? 1 : 0] : value;
		return {
			max: range ? start ? oppositeValue - betweenThumbs : max : max,
			min: range ? start ? min : oppositeValue + betweenThumbs : min
		};
	}, [
		betweenThumbs,
		max,
		min,
		range,
		value
	]);
	const getPanValue = (0, react.useCallback)(({ x, y }, { bottom, height, left, width }) => {
		let nextValue = (0, require_utils_index.utils_exports.percentToValue)((orientation === "horizontal" ? x - left : bottom - y) / (orientation === "horizontal" ? width : height), min, max);
		nextValue = parseFloat((0, require_utils_index.utils_exports.roundNumberToStep)(nextValue, min, step));
		nextValue = (0, require_utils_index.utils_exports.clampNumber)(nextValue, min, max);
		return nextValue;
	}, [
		orientation,
		min,
		max,
		step
	]);
	const onChange = (0, react.useCallback)((index, value$1) => {
		if (!interactive) return;
		const { max: max$1, min: min$1 } = getMinMax(index);
		value$1 = parseFloat((0, require_utils_index.utils_exports.roundNumberToStep)(value$1, min$1, oneStep));
		value$1 = (0, require_utils_index.utils_exports.clampNumber)(value$1, min$1, max$1);
		setValue((prev) => {
			if ((0, require_utils_index.utils_exports.isArray)(prev)) {
				const next = [...prev];
				next[index] = value$1;
				return next;
			} else return value$1;
		});
	}, [
		getMinMax,
		interactive,
		oneStep,
		setValue
	]);
	const stepUp = (0, react.useCallback)((index, step$1 = oneStep) => range ? onChange(index, value[index] + step$1) : onChange(index, value + step$1), [
		oneStep,
		range,
		onChange,
		value
	]);
	const stepDown = (0, react.useCallback)((index, step$1 = oneStep) => range ? onChange(index, value[index] - step$1) : onChange(index, value - step$1), [
		oneStep,
		range,
		onChange,
		value
	]);
	const onKeyDown = (0, react.useCallback)((index) => (ev) => {
		const { max: max$1, min: min$1 } = getMinMax(index);
		require_dom.runKeyAction(ev, {
			ArrowDown: () => stepDown(index),
			ArrowLeft: () => stepDown(index),
			ArrowRight: () => stepUp(index),
			ArrowUp: () => stepUp(index),
			End: () => onChange(index, max$1),
			Home: () => onChange(index, min$1),
			PageDown: () => stepDown(index, tenStep),
			PageUp: () => stepUp(index, tenStep)
		});
	}, [
		getMinMax,
		onChange,
		stepDown,
		stepUp,
		tenStep
	]);
	const getRootProps = (0, react.useCallback)((props$1 = {}) => {
		const computedProps = {
			...dataProps,
			"data-orientation": orientation,
			...rest,
			...props$1,
			onBlur: (0, require_utils_index.utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
			onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
		};
		computedProps.style ??= {};
		if ((0, require_utils_index.utils_exports.isArray)(percent)) {
			computedProps.style["--range-start"] = `${Math.abs(percent[0])}%`;
			computedProps.style["--range-end"] = `${Math.abs(percent[1])}%`;
		} else {
			computedProps.style["--range-start"] = "0%";
			computedProps.style["--range-end"] = `${Math.abs(percent)}%`;
		}
		return computedProps;
	}, [
		dataProps,
		eventProps,
		orientation,
		percent,
		rest
	]);
	const getInputProps = (0, react.useCallback)(({ index = 0,...props$1 } = {}) => ({
		...require_dom.visuallyHiddenAttributes,
		...dataProps,
		...ariaProps,
		id,
		type: "hidden",
		name,
		disabled,
		readOnly,
		required,
		value: range ? value[index] : value,
		...props$1,
		ref: index === 0 ? require_ref.mergeRefs(props$1.ref, ref) : props$1.ref
	}), [
		dataProps,
		ariaProps,
		id,
		name,
		disabled,
		readOnly,
		required,
		range,
		value,
		ref
	]);
	const getTrackProps = (0, react.useCallback)((props$1) => getPanEventProps({
		...dataProps,
		"data-orientation": orientation,
		...props$1
	}), [
		dataProps,
		getPanEventProps,
		orientation
	]);
	const getRangeProps = (0, react.useCallback)((props$1) => ({
		...dataProps,
		"data-orientation": orientation,
		"data-range": (0, require_utils_index.utils_exports.dataAttr)(range),
		...props$1
	}), [
		dataProps,
		orientation,
		range
	]);
	return {
		percent,
		range,
		setValue,
		stepDown,
		stepUp,
		value,
		getInputProps,
		getMarkProps: (0, react.useCallback)(({ style, value: valueProp$1,...props$1 }) => {
			const between = range ? value[0] < valueProp$1 && valueProp$1 < value[1] : valueProp$1 < value;
			const percent$1 = (0, require_utils_index.utils_exports.valueToPercent)(valueProp$1, min, max);
			return {
				...dataProps,
				"aria-hidden": true,
				"data-between": (0, require_utils_index.utils_exports.dataAttr)(between),
				"data-orientation": orientation,
				role: "presentation",
				...props$1,
				style: {
					...style,
					"--mark-position": `${percent$1}%`
				}
			};
		}, [
			dataProps,
			max,
			min,
			orientation,
			range,
			value
		]),
		getRangeProps,
		getRootProps,
		getThumbProps: (0, react.useCallback)(({ index = 0,...rest$1 } = {}) => {
			const { max: max$1, min: min$1 } = getMinMax(index);
			const props$1 = {
				...dataProps,
				...ariaProps,
				"aria-label": t("Slider thumb"),
				"aria-orientation": orientation,
				"aria-valuemax": max$1,
				"aria-valuemin": min$1,
				role: "slider",
				tabIndex: interactive ? 0 : -1,
				...rest$1,
				"aria-labelledby": (0, require_utils_index.utils_exports.cx)(rest$1["aria-labelledby"], ariaLabelledBy),
				onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(rest$1.onKeyDown, onKeyDown(index))
			};
			if (range) {
				const currentValue = value[index];
				props$1["data-start"] = (0, require_utils_index.utils_exports.dataAttr)(index === 0);
				props$1["data-end"] = (0, require_utils_index.utils_exports.dataAttr)(index === 1);
				props$1["aria-valuenow"] = currentValue;
				props$1["aria-valuetext"] = ariaValueText ?? getAriaValueText?.(currentValue, index) ?? currentValue.toString();
			} else {
				props$1["data-end"] = (0, require_utils_index.utils_exports.dataAttr)(index === 0);
				props$1["aria-valuenow"] = value;
				props$1["aria-valuetext"] = ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString();
			}
			return props$1;
		}, [
			t,
			ariaLabelledBy,
			ariaProps,
			ariaValueText,
			dataProps,
			getAriaValueText,
			getMinMax,
			interactive,
			onKeyDown,
			orientation,
			range,
			value
		]),
		getTrackProps,
		onChange
	};
};

//#endregion
exports.useSlider = useSlider;
//# sourceMappingURL=use-slider.cjs.map