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

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

"use client";


import { runKeyAction } from "../../utils/dom.js";
import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
import { useFieldProps } from "../field/use-field-props.js";
import { useCombobox } from "../../hooks/use-combobox/index.js";
import { useEyeDropper } from "../../hooks/use-eye-dropper/index.js";
import { useCallback, useEffect, useRef } from "react";

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

//#endregion
export { useColorPicker };
//# sourceMappingURL=use-color-picker.js.map