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

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

"use client";


import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { useValue } from "../../hooks/use-value/index.js";
import { resizableStyle } from "./resizable.style.js";
import { ResizableContext, useResizable, useResizableItem, useResizableTrigger } from "./use-resizable.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";

//#region src/components/resizable/resizable.tsx
const { PropsContext: ResizablePropsContext, usePropsContext: useResizablePropsContext, withContext, withProvider } = createSlotComponent("resizable", resizableStyle);
const ResizableRoot = withProvider(({ children, orientation: orientationProp, rootRef,...rest }) => {
	const { controlRef, disabled, orientation, getGroupProps, getRootProps } = useResizable({
		orientation: useValue(orientationProp),
		...rest
	});
	return /* @__PURE__ */ jsx(ResizableContext, {
		value: useMemo(() => ({
			controlRef,
			disabled,
			orientation
		}), [
			disabled,
			orientation,
			controlRef
		]),
		children: /* @__PURE__ */ jsx(styled.div, {
			...getRootProps({ ref: rootRef }),
			children: /* @__PURE__ */ jsx(PanelGroup, {
				...getGroupProps(),
				children
			})
		})
	});
}, "root", { transferProps: ["orientation"] })();
const StyledPanel = styled(Panel, { forwardProps: ["order"] });
const ResizableItem = withContext((props) => {
	const { getItemProps } = useResizableItem(props);
	return /* @__PURE__ */ jsx(StyledPanel, { ...getItemProps() });
}, "item")();
const ResizableTrigger = withContext(({ children, icon, iconProps,...rest }) => {
	const { getIconProps, getTriggerProps } = useResizableTrigger(rest);
	return /* @__PURE__ */ jsxs(styled.div, {
		as: PanelResizeHandle,
		...getTriggerProps(),
		children: [icon ? /* @__PURE__ */ jsx(ResizableIcon, {
			...getIconProps(iconProps),
			children: icon
		}) : null, children]
	});
}, "trigger")();
const ResizableIcon = withContext("div", "icon")();

//#endregion
export { ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, useResizablePropsContext };
//# sourceMappingURL=resizable.js.map