@yamada-ui/react/dist/cjs/components/color-picker/use-color-picker.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_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
const require_use_field_props = require('../field/use-field-props.cjs');
const require_hooks_use_combobox_index = require('../../hooks/use-combobox/index.cjs');
const require_hooks_use_eye_dropper_index = require('../../hooks/use-eye-dropper/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/color-picker/use-color-picker.ts
const useColorPicker = (props) => {
	const { t } = require_i18n_provider.useI18n("colorPicker");
	const { props: { id, ref, name, allowInput = true, closeOnChange = false, defaultValue, disabled, fallbackValue = "#FFFFFF", format: formatProp, formatInput, openOnChange = true, openOnClick = true, openOnFocus = true, pattern, placeholder, readOnly, required, value: valueProp, onChange: onChangeProp, onInputChange: onInputChangeProp,...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
	const { interactive, open, getContentProps: getComboboxContentProps, getTriggerProps, popoverProps, onClose, onOpen } = require_hooks_use_combobox_index.useCombobox({
		disabled,
		openOnClick: false,
		openOnEnter: !allowInput,
		openOnSpace: !allowInput,
		placement: "end-start",
		readOnly,
		transferFocus: false,
		...ariaProps,
		...dataProps,
		...eventProps,
		...rest
	});
	const format = formatProp ?? (0, require_utils_index.utils_exports.calcFormat)(valueProp ?? defaultValue ?? fallbackValue);
	const alpha = format.endsWith("a");
	const fieldRef = (0, react.useRef)(null);
	const contentRef = (0, react.useRef)(null);
	const inputRef = (0, react.useRef)(null);
	const focusByClickRef = (0, react.useRef)(false);
	const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue,
		value: valueProp,
		onChange: onChangeProp
	});
	const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } = require_hooks_use_eye_dropper_index.useEyeDropper();
	const onClick = (0, react.useCallback)(() => {
		if (!interactive) return;
		focusByClickRef.current = true;
		if (allowInput) inputRef.current?.focus();
		if (openOnClick) onOpen();
	}, [
		allowInput,
		interactive,
		onOpen,
		openOnClick
	]);
	const onMouseDown = (0, react.useCallback)((ev) => {
		if (!openOnFocus) return;
		ev.preventDefault();
		ev.stopPropagation();
	}, [openOnFocus]);
	const onFieldFocus = (0, react.useCallback)(() => {
		if (allowInput) return;
		if (openOnFocus) onOpen();
		focusByClickRef.current = false;
	}, [
		allowInput,
		onOpen,
		openOnFocus
	]);
	const onInputFocus = (0, react.useCallback)((ev) => {
		ev.preventDefault();
		ev.stopPropagation();
		if (openOnFocus && !focusByClickRef.current) onOpen();
		focusByClickRef.current = false;
	}, [onOpen, openOnFocus]);
	const onBlur = (0, react.useCallback)((ev) => {
		if ((0, require_utils_index.utils_exports.contains)(fieldRef.current, ev.relatedTarget) || (0, require_utils_index.utils_exports.contains)(contentRef.current, ev.relatedTarget)) ev.preventDefault();
		else setValue((prev) => {
			if (!prev) return prev;
			let value$1 = (0, require_utils_index.utils_exports.convertColor)(prev)(format);
			if (!value$1) return prev;
			if (formatInput) value$1 = formatInput(value$1);
			if (pattern) value$1 = value$1.replace(pattern, "");
			return value$1;
		});
	}, [
		format,
		formatInput,
		pattern,
		setValue
	]);
	const onInputChange = (0, react.useCallback)((ev) => {
		if (!allowInput) return;
		onInputChangeProp?.(ev);
		if ((0, require_utils_index.utils_exports.runIfFn)(closeOnChange, ev)) onClose();
		else if ((0, require_utils_index.utils_exports.runIfFn)(openOnChange, ev)) onOpen();
		let inputValue = ev.target.value;
		if (formatInput) inputValue = formatInput(inputValue);
		if (pattern) inputValue = inputValue.replace(pattern, "");
		setValue(inputValue);
	}, [
		allowInput,
		closeOnChange,
		formatInput,
		onClose,
		onInputChangeProp,
		onOpen,
		openOnChange,
		pattern,
		setValue
	]);
	const onEyeDropperClick = (0, react.useCallback)(async () => {
		if (!interactive) return;
		const result = await onOpenEyeDropper();
		if (result?.sRGBHex) setValue(result.sRGBHex);
	}, [
		interactive,
		onOpenEyeDropper,
		setValue
	]);
	(0, react.useEffect)(() => {
		if (!open) return;
		return (0, require_utils_index.utils_exports.focusTransfer)(contentRef.current, allowInput ? inputRef.current : fieldRef.current);
	}, [allowInput, open]);
	const getRootProps = (0, react.useCallback)((props$1) => ({
		...dataProps,
		...props$1
	}), [dataProps]);
	const getFieldProps = (0, react.useCallback)(({ ref: ref$1,...props$1 } = {}) => getTriggerProps({
		ref: require_ref.mergeRefs(ref$1, fieldRef),
		"aria-haspopup": "dialog",
		tabIndex: !allowInput ? 0 : -1,
		...props$1,
		onClick: (0, require_utils_index.utils_exports.handlerAll)(props$1.onClick, onClick),
		onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, onFieldFocus),
		onMouseDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onMouseDown, onMouseDown)
	}), [
		allowInput,
		getTriggerProps,
		onClick,
		onFieldFocus,
		onMouseDown
	]);
	const getInputProps = (0, react.useCallback)((props$1 = {}) => ({
		id,
		ref: require_ref.mergeRefs(props$1.ref, ref, inputRef),
		name,
		style: {
			...!allowInput ? { pointerEvents: "none" } : {},
			...props$1.style
		},
		autoComplete: "off",
		disabled,
		placeholder,
		readOnly,
		required,
		tabIndex: allowInput ? 0 : -1,
		value,
		...dataProps,
		...props$1,
		onBlur: (0, require_utils_index.utils_exports.handlerAll)(props$1.onBlur, onBlur),
		onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onInputChange),
		onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, onInputFocus),
		onMouseDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onMouseDown, onMouseDown)
	}), [
		allowInput,
		dataProps,
		disabled,
		id,
		name,
		onBlur,
		onInputChange,
		onInputFocus,
		onMouseDown,
		placeholder,
		readOnly,
		ref,
		required,
		value
	]);
	const getEyeDropperProps = (0, react.useCallback)((props$1 = {}) => ({
		...dataProps,
		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
		"aria-label": t("Pick a color"),
		hidden: !supportedEyeDropper,
		role: "button",
		tabIndex: interactive ? 0 : -1,
		...props$1,
		onClick: (0, require_utils_index.utils_exports.handlerAll)(props$1.onClick, onEyeDropperClick),
		onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onKeyDown, (ev) => require_dom.runKeyAction(ev, {
			Enter: onEyeDropperClick,
			Space: onEyeDropperClick
		}))
	}), [
		dataProps,
		interactive,
		onEyeDropperClick,
		supportedEyeDropper,
		t
	]);
	return {
		alpha,
		format,
		interactive,
		open,
		setValue,
		value,
		getContentProps: (0, react.useCallback)(({ ref: ref$1,...props$1 } = {}) => getComboboxContentProps({
			ref: require_ref.mergeRefs(ref$1, contentRef),
			role: "dialog",
			...props$1
		}), [getComboboxContentProps]),
		getEyeDropperProps,
		getFieldProps,
		getInputProps,
		getRootProps,
		getSelectorProps: (0, react.useCallback)((props$1 = {}) => ({
			disabled,
			fallbackValue,
			format,
			readOnly,
			value,
			...props$1,
			onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, setValue)
		}), [
			disabled,
			fallbackValue,
			format,
			readOnly,
			value,
			setValue
		]),
		popoverProps,
		onClose,
		onOpen
	};
};

//#endregion
exports.useColorPicker = useColorPicker;
//# sourceMappingURL=use-color-picker.cjs.map