@yamada-ui/react/dist/cjs/hooks/use-clickable/index.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_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_event_listener_index = require('../use-event-listener/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/hooks/use-clickable/index.ts
const isValidElement = (ev) => {
	const { isContentEditable, tagName } = ev.target;
	return tagName !== "INPUT" && tagName !== "TEXTAREA" && !isContentEditable;
};
const useClickable = ({ ref, clickOnEnter = true, clickOnSpace = true, disabled, disableTouchBehavior = true, focusable, focusOnClick = true, tabIndex: tabIndexProp, onClick: onClickProp, onKeyDown: onKeyDownProp, onKeyUp: onKeyUpProp, onMouseDown: onMouseDownProp, onMouseLeave: onMouseLeaveProp, onMouseOver: onMouseOverProp, onMouseUp: onMouseUpProp,...props } = {}) => {
	const [button, setButton] = (0, react.useState)(true);
	const [pressed, setPressed] = (0, react.useState)(false);
	const listeners = require_hooks_use_event_listener_index.useEventListeners();
	const tabIndex = button ? tabIndexProp : tabIndexProp || 0;
	const trulyDisabled = disabled && !focusable;
	const refCb = (node) => {
		if (!node) return;
		if (node.tagName !== "BUTTON") setButton(false);
	};
	const onClick = (0, react.useCallback)((ev) => {
		if (disabled) {
			ev.stopPropagation();
			ev.preventDefault();
			return;
		}
		if (focusOnClick) ev.currentTarget.focus();
		onClickProp?.(ev);
	}, [
		disabled,
		focusOnClick,
		onClickProp
	]);
	const onDocumentKeyUp = (0, react.useCallback)((ev) => {
		if (pressed && isValidElement(ev)) {
			ev.preventDefault();
			ev.stopPropagation();
			setPressed(false);
			listeners.remove(document, "keyup", onDocumentKeyUp, false);
		}
	}, [pressed, listeners]);
	const onKeyDown = (0, react.useCallback)((ev) => {
		onKeyDownProp?.(ev);
		if (disabled || ev.defaultPrevented || ev.metaKey) return;
		if (!isValidElement(ev.nativeEvent) || button) return;
		if (clickOnSpace && ev.key === " ") {
			ev.preventDefault();
			setPressed(true);
		}
		if (clickOnEnter && ev.key === "Enter") {
			ev.preventDefault();
			ev.currentTarget.click();
		}
		listeners.add(document, "keyup", onDocumentKeyUp, false);
	}, [
		disabled,
		button,
		onKeyDownProp,
		clickOnEnter,
		clickOnSpace,
		listeners,
		onDocumentKeyUp
	]);
	const onKeyUp = (0, react.useCallback)((ev) => {
		onKeyUpProp?.(ev);
		if (disabled || ev.defaultPrevented || ev.metaKey) return;
		if (!isValidElement(ev.nativeEvent) || button) return;
		if (clickOnSpace && ev.key === " ") {
			ev.preventDefault();
			setPressed(false);
			ev.currentTarget.click();
		}
	}, [
		clickOnSpace,
		button,
		disabled,
		onKeyUpProp
	]);
	const onDocumentMouseUp = (0, react.useCallback)((ev) => {
		if (ev.button !== 0) return;
		setPressed(false);
		listeners.remove(document, "mouseup", onDocumentMouseUp, false);
	}, [listeners]);
	const onMouseDown = (0, react.useCallback)((ev) => {
		if (ev.button !== 0) return;
		if (disabled) {
			ev.stopPropagation();
			ev.preventDefault();
			return;
		}
		if (!button) setPressed(true);
		if (focusOnClick) ev.currentTarget.focus({ preventScroll: true });
		listeners.add(document, "mouseup", onDocumentMouseUp, false);
		onMouseDownProp?.(ev);
	}, [
		disabled,
		button,
		onMouseDownProp,
		listeners,
		onDocumentMouseUp,
		focusOnClick
	]);
	const onMouseUp = (0, react.useCallback)((ev) => {
		if (ev.button !== 0) return;
		if (!button) setPressed(false);
		onMouseUpProp?.(ev);
	}, [onMouseUpProp, button]);
	const onMouseOver = (0, react.useCallback)((ev) => {
		if (disabled) {
			ev.preventDefault();
			return;
		}
		if (disableTouchBehavior && (0, require_utils_index.utils_exports.isTouchDevice)()) return;
		onMouseOverProp?.(ev);
	}, [
		disabled,
		onMouseOverProp,
		disableTouchBehavior
	]);
	const onMouseLeave = (0, react.useCallback)((ev) => {
		if (pressed) {
			ev.preventDefault();
			setPressed(false);
		}
		if (disableTouchBehavior && (0, require_utils_index.utils_exports.isTouchDevice)()) return;
		onMouseLeaveProp?.(ev);
	}, [
		pressed,
		onMouseLeaveProp,
		disableTouchBehavior
	]);
	if (button) return {
		...props,
		ref: require_ref.mergeRefs(ref, refCb),
		type: "button",
		"aria-disabled": trulyDisabled ? void 0 : disabled,
		disabled: trulyDisabled,
		onClick,
		onKeyDown: onKeyDownProp,
		onKeyUp: onKeyUpProp,
		onMouseDown: onMouseDownProp,
		onMouseLeave: onMouseLeaveProp,
		onMouseOver: onMouseOverProp,
		onMouseUp: onMouseUpProp
	};
	else return {
		...props,
		ref: require_ref.mergeRefs(ref, refCb),
		"aria-disabled": disabled ? "true" : void 0,
		"data-active": (0, require_utils_index.utils_exports.dataAttr)(pressed),
		role: "button",
		tabIndex: trulyDisabled ? void 0 : tabIndex,
		onClick,
		onKeyDown,
		onKeyUp,
		onMouseDown,
		onMouseLeave,
		onMouseOver,
		onMouseUp
	};
};

//#endregion
exports.useClickable = useClickable;
//# sourceMappingURL=index.cjs.map