@yamada-ui/react/dist/esm/components/reorder/reorder.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 { GripVerticalIcon } from "../icon/icons/grip-vertical-icon.js";
import { useValue } from "../../hooks/use-value/index.js";
import { reorderStyle } from "./reorder.style.js";
import { ReorderContext, ReorderItemContext, useReorder, useReorderItem, useReorderItemContext } from "./use-reorder.js";
import { jsx } from "react/jsx-runtime";
import { Reorder } from "motion/react";

//#region src/components/reorder/reorder.tsx
const { PropsContext: ReorderPropsContext, usePropsContext: useReorderPropsContext, withContext, withProvider } = createSlotComponent("reorder", reorderStyle);
/**
* `Reorder` is a component that allows you to change the order of items using drag and drop.
*
* @see https://yamada-ui.com/docs/components/reorder
*/
const ReorderRoot = withProvider(({ orientation: orientationProp,...rest }) => {
	const orientation = useValue(orientationProp);
	const { children, getRootProps } = useReorder({
		...rest,
		item: /* @__PURE__ */ jsx(ReorderItem, {}),
		orientation
	});
	return /* @__PURE__ */ jsx(ReorderContext, {
		value: { orientation },
		children: /* @__PURE__ */ jsx(styled.ul, {
			as: Reorder.Group,
			...getRootProps(),
			children
		})
	});
}, "root", { transferProps: ["orientation"] })();
const ReorderItem = withContext((props) => {
	const { getItemProps, getTriggerProps } = useReorderItem(props);
	return /* @__PURE__ */ jsx(ReorderItemContext, {
		value: { getTriggerProps },
		children: /* @__PURE__ */ jsx(styled.li, {
			as: Reorder.Item,
			...getItemProps()
		})
	});
}, "item")();
const ReorderTrigger = withContext("div", "trigger")(void 0, (props) => {
	const { getTriggerProps } = useReorderItemContext();
	return {
		children: /* @__PURE__ */ jsx(GripVerticalIcon, {}),
		...getTriggerProps(props)
	};
});

//#endregion
export { ReorderItem, ReorderPropsContext, ReorderRoot, ReorderTrigger, useReorderPropsContext };
//# sourceMappingURL=reorder.js.map