@mantine/core/cjs/components/AngleSlider/AngleSlider.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_rem = require("../../core/utils/units-converters/rem.cjs");
const require_find_closest_number = require("../../core/utils/find-closest-number/find-closest-number.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_AngleSlider_module = require("./AngleSlider.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/AngleSlider/AngleSlider.tsx
const defaultProps = {
	step: 1,
	withLabel: true
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { size, thumbSize }) => ({ root: {
	"--slider-size": require_rem.rem(size),
	"--thumb-size": require_rem.rem(thumbSize)
} }));
const AngleSlider = require_factory.factory((_props) => {
	const props = require_use_props.useProps("AngleSlider", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, step, value, defaultValue, onChange, onMouseDown, withLabel, marks, thumbSize, restrictToMarks, formatLabel, onChangeEnd, disabled, onTouchStart, name, hiddenInputProps, "aria-label": ariaLabel, tabIndex, onScrubStart, onScrubEnd, mod, attributes, ref, ...others } = props;
	const rootRef = (0, react.useRef)(null);
	const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
		value,
		defaultValue,
		finalValue: 0,
		onChange
	});
	const update = (val) => {
		if (rootRef.current && !disabled) setValue(restrictToMarks && Array.isArray(marks) ? require_find_closest_number.findClosestNumber(val, marks.map((mark) => mark.value)) : val);
	};
	const { ref: radialMoveRef } = (0, _mantine_hooks.useRadialMove)(update, {
		step,
		onChangeEnd,
		onScrubStart,
		onScrubEnd
	});
	const getStyles = require_use_styles.useStyles({
		name: "AngleSlider",
		classes: require_AngleSlider_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const handleKeyDown = (event) => {
		if (disabled) return;
		let newValue = _value;
		if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
			event.preventDefault();
			if (_value === 0) newValue = 359;
			else newValue = (0, _mantine_hooks.normalizeRadialValue)(_value - step, step);
		}
		if (event.key === "ArrowRight" || event.key === "ArrowUp") {
			event.preventDefault();
			if (_value === 359) newValue = 0;
			else newValue = (0, _mantine_hooks.normalizeRadialValue)(_value + step, step);
		}
		if (event.key === "Home") newValue = 0;
		if (event.key === "End") newValue = 359;
		if (restrictToMarks && Array.isArray(marks)) {
			const markValues = marks.map((mark) => mark.value);
			const currentIndex = markValues.indexOf(_value);
			if (currentIndex !== -1) if (event.key === "ArrowLeft" || event.key === "ArrowDown") newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];
			else if (event.key === "ArrowRight" || event.key === "ArrowUp") newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];
			else newValue = require_find_closest_number.findClosestNumber(newValue, markValues);
			else newValue = require_find_closest_number.findClosestNumber(newValue, markValues);
		}
		setValue(newValue);
		onChangeEnd?.(newValue);
	};
	const marksItems = marks?.map((mark, index) => /* @__PURE__ */ (0, react.createElement)("div", {
		...getStyles("mark", { style: { "--angle": `${mark.value}deg` } }),
		"data-label": mark.label || void 0,
		key: index
	}));
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
		ref: (0, _mantine_hooks.useMergedRef)(ref, rootRef, radialMoveRef),
		...getStyles("root", { focusable: true }),
		mod: [{ disabled }, mod],
		...others,
		children: [
			marksItems && marksItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				...getStyles("marks"),
				children: marksItems
			}),
			withLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				...getStyles("label"),
				children: typeof formatLabel === "function" ? formatLabel(_value) : _value
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				tabIndex: tabIndex ?? (disabled ? -1 : 0),
				role: "slider",
				"aria-valuemax": 360,
				"aria-valuemin": 0,
				"aria-valuenow": _value,
				onKeyDown: handleKeyDown,
				"aria-label": ariaLabel,
				...getStyles("thumb", { style: { transform: `rotate(${_value}deg)` } })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
				type: "hidden",
				name,
				value: _value,
				...hiddenInputProps
			})
		]
	});
});
AngleSlider.displayName = "@mantine/core/AngleSlider";
AngleSlider.classes = require_AngleSlider_module.default;
AngleSlider.varsResolver = varsResolver;
//#endregion
exports.AngleSlider = AngleSlider;

//# sourceMappingURL=AngleSlider.cjs.map