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

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

"use client";


import { createContext as createContext$1 } from "../../utils/context.js";
import { assignRef, mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";
import { getPanelElement, getPanelGroupElement, getResizeHandleElement } from "react-resizable-panels";

//#region src/components/resizable/use-resizable.ts
const [ResizableContext, useResizableContext] = createContext$1({ name: "ResizableContext" });
const useResizable = ({ id, ref, controlRef: controlRefProp, disabled, keyboardStep, orientation = "horizontal", storage, storageKey, groupProps = {}, onLayout,...rest } = {}) => {
	const controlRef = useRef(null);
	const uuid = useId();
	id ??= uuid;
	const getRootProps = useCallback((props = {}) => ({
		...rest,
		...props
	}), [rest]);
	const getGroupProps = useCallback(({ ref: ref$1,...props } = {}) => ({
		id,
		autoSaveId: storageKey,
		direction: orientation,
		keyboardResizeBy: keyboardStep,
		storage,
		...groupProps,
		...props,
		ref: mergeRefs(ref$1, controlRefProp, controlRef),
		tagName: props.as ?? groupProps.as,
		onLayout: (0, utils_exports.fnAll)(props.onLayout, groupProps.onLayout, onLayout)
	}), [
		id,
		orientation,
		groupProps,
		controlRefProp,
		storageKey,
		keyboardStep,
		onLayout,
		storage
	]);
	useLayoutEffect(() => {
		assignRef(ref, getPanelGroupElement(id));
	}, [ref, id]);
	return {
		controlRef,
		disabled,
		orientation,
		getGroupProps,
		getRootProps
	};
};
const useResizableItem = ({ id, ref, as, controlRef, onCollapse, onExpand, onResize,...rest }) => {
	const uuid = useId();
	id ??= uuid;
	const getItemProps = useCallback(({ ref: ref$1,...props } = {}) => ({
		id,
		ref: mergeRefs(ref$1, controlRef),
		tagName: props.as ?? as,
		...props,
		...rest,
		onCollapse: (0, utils_exports.fnAll)(props.onCollapse, onCollapse),
		onExpand: (0, utils_exports.fnAll)(props.onExpand, onExpand),
		onResize: (0, utils_exports.fnAll)(props.onResize, onResize)
	}), [
		as,
		controlRef,
		id,
		onCollapse,
		onExpand,
		onResize,
		rest
	]);
	useLayoutEffect(() => {
		assignRef(ref, getPanelElement(id));
	}, [ref, id]);
	return { getItemProps };
};
const useResizableTrigger = ({ id, ref, as, disabled, onDragging,...rest }) => {
	const uuid = useId();
	const { controlRef, disabled: groupDisabled, orientation } = useResizableContext();
	const [active, setActive] = useState(false);
	const trulyDisabled = disabled || groupDisabled;
	id ??= uuid;
	const onDoubleClick = 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 = useCallback((props = {}) => ({
		id,
		"aria-orientation": orientation,
		"data-active": (0, utils_exports.dataAttr)(active),
		"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
		disabled: trulyDisabled,
		tabIndex: trulyDisabled ? -1 : 0,
		tagName: props.as ?? as,
		...rest,
		...props,
		onDoubleClick: (0, utils_exports.handlerAll)(props.onDoubleClick, rest.onDoubleClick, onDoubleClick),
		onDragging: (0, utils_exports.fnAll)(props.onDragging, onDragging, setActive)
	}), [
		id,
		as,
		orientation,
		trulyDisabled,
		rest,
		onDoubleClick,
		onDragging,
		active
	]);
	const getIconProps = useCallback((props = {}) => ({
		"data-active": (0, utils_exports.dataAttr)(active),
		"data-icon": "",
		...props
	}), [active]);
	useLayoutEffect(() => {
		assignRef(ref, getResizeHandleElement(id));
	}, [ref, id]);
	return {
		getIconProps,
		getTriggerProps
	};
};

//#endregion
export { ResizableContext, useResizable, useResizableContext, useResizableItem, useResizableTrigger };
//# sourceMappingURL=use-resizable.js.map