@yamada-ui/react/dist/cjs/components/resizable/use-resizable.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_context = require('../../utils/context.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_resizable_panels = require("react-resizable-panels");
react_resizable_panels = require_rolldown_runtime.__toESM(react_resizable_panels);

//#region src/components/resizable/use-resizable.ts
const [ResizableContext, useResizableContext] = require_context.createContext({ name: "ResizableContext" });
const useResizable = ({ id, ref, controlRef: controlRefProp, disabled, keyboardStep, orientation = "horizontal", storage, storageKey, groupProps = {}, onLayout,...rest } = {}) => {
	const controlRef = (0, react.useRef)(null);
	const uuid = (0, react.useId)();
	id ??= uuid;
	const getRootProps = (0, react.useCallback)((props = {}) => ({
		...rest,
		...props
	}), [rest]);
	const getGroupProps = (0, react.useCallback)(({ ref: ref$1,...props } = {}) => ({
		id,
		autoSaveId: storageKey,
		direction: orientation,
		keyboardResizeBy: keyboardStep,
		storage,
		...groupProps,
		...props,
		ref: require_ref.mergeRefs(ref$1, controlRefProp, controlRef),
		tagName: props.as ?? groupProps.as,
		onLayout: (0, require_utils_index.utils_exports.fnAll)(props.onLayout, groupProps.onLayout, onLayout)
	}), [
		id,
		orientation,
		groupProps,
		controlRefProp,
		storageKey,
		keyboardStep,
		onLayout,
		storage
	]);
	(0, react.useLayoutEffect)(() => {
		require_ref.assignRef(ref, (0, react_resizable_panels.getPanelGroupElement)(id));
	}, [ref, id]);
	return {
		controlRef,
		disabled,
		orientation,
		getGroupProps,
		getRootProps
	};
};
const useResizableItem = ({ id, ref, as, controlRef, onCollapse, onExpand, onResize,...rest }) => {
	const uuid = (0, react.useId)();
	id ??= uuid;
	const getItemProps = (0, react.useCallback)(({ ref: ref$1,...props } = {}) => ({
		id,
		ref: require_ref.mergeRefs(ref$1, controlRef),
		tagName: props.as ?? as,
		...props,
		...rest,
		onCollapse: (0, require_utils_index.utils_exports.fnAll)(props.onCollapse, onCollapse),
		onExpand: (0, require_utils_index.utils_exports.fnAll)(props.onExpand, onExpand),
		onResize: (0, require_utils_index.utils_exports.fnAll)(props.onResize, onResize)
	}), [
		as,
		controlRef,
		id,
		onCollapse,
		onExpand,
		onResize,
		rest
	]);
	(0, react.useLayoutEffect)(() => {
		require_ref.assignRef(ref, (0, react_resizable_panels.getPanelElement)(id));
	}, [ref, id]);
	return { getItemProps };
};
const useResizableTrigger = ({ id, ref, as, disabled, onDragging,...rest }) => {
	const uuid = (0, react.useId)();
	const { controlRef, disabled: groupDisabled, orientation } = useResizableContext();
	const [active, setActive] = (0, react.useState)(false);
	const trulyDisabled = disabled || groupDisabled;
	id ??= uuid;
	const onDoubleClick = (0, react.useCallback)((ev) => {
		ev.preventDefault();
		const layout = controlRef.current?.getLayout();
		if (!layout) return;
		const size = 100 / layout.length;
		const nextLayout = layout.map(() => size);
		controlRef.current?.setLayout(nextLayout);
	}, [controlRef]);
	const getTriggerProps = (0, react.useCallback)((props = {}) => ({
		id,
		"aria-orientation": orientation,
		"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
		disabled: trulyDisabled,
		tabIndex: trulyDisabled ? -1 : 0,
		tagName: props.as ?? as,
		...rest,
		...props,
		onDoubleClick: (0, require_utils_index.utils_exports.handlerAll)(props.onDoubleClick, rest.onDoubleClick, onDoubleClick),
		onDragging: (0, require_utils_index.utils_exports.fnAll)(props.onDragging, onDragging, setActive)
	}), [
		id,
		as,
		orientation,
		trulyDisabled,
		rest,
		onDoubleClick,
		onDragging,
		active
	]);
	const getIconProps = (0, react.useCallback)((props = {}) => ({
		"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
		"data-icon": "",
		...props
	}), [active]);
	(0, react.useLayoutEffect)(() => {
		require_ref.assignRef(ref, (0, react_resizable_panels.getResizeHandleElement)(id));
	}, [ref, id]);
	return {
		getIconProps,
		getTriggerProps
	};
};

//#endregion
exports.ResizableContext = ResizableContext;
exports.useResizable = useResizable;
exports.useResizableContext = useResizableContext;
exports.useResizableItem = useResizableItem;
exports.useResizableTrigger = useResizableTrigger;
//# sourceMappingURL=use-resizable.cjs.map