@yamada-ui/reorder 2.0.9 → 2.0.10-dev-20240917033401

package/dist/reorder-context.js

@@ -0,0 +1,46 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/reorder-context.ts
+var reorder_context_exports = {};
+__export(reorder_context_exports, {
+  ReorderItemProvider: () => ReorderItemProvider,
+  ReorderProvider: () => ReorderProvider,
+  useReorderContext: () => useReorderContext,
+  useReorderItemContext: () => useReorderItemContext
+});
+module.exports = __toCommonJS(reorder_context_exports);
+var import_utils = require("@yamada-ui/utils");
+var [ReorderProvider, useReorderContext] = (0, import_utils.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
+});
+var [ReorderItemProvider, useReorderItemContext] = (0, import_utils.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReorderItemProvider,
+  ReorderProvider,
+  useReorderContext,
+  useReorderItemContext
+});
+//# sourceMappingURL=reorder-context.js.map

package/dist/reorder-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/reorder-context.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n  orientation: \"vertical\" | \"horizontal\"\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n  createContext<ReorderContext>({\n    name: \"ReorderContext\",\n    errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n  })\n\ninterface ReorderItemContext {\n  register: (node: HTMLElement | null) => void\n  isDrag: boolean\n  dragControls: DragControls\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderContext\",\n    errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n  })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA8B;AAOvB,IAAM,CAAC,iBAAiB,iBAAiB,QAC9C,4BAA8B;AAAA,EAC5B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQI,IAAM,CAAC,qBAAqB,qBAAqB,QACtD,4BAAkC;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;","names":[]}

package/dist/reorder-context.mjs

@@ -0,0 +1,14 @@
+"use client"
+import {
+  ReorderItemProvider,
+  ReorderProvider,
+  useReorderContext,
+  useReorderItemContext
+} from "./chunk-BBGHU5EB.mjs";
+export {
+  ReorderItemProvider,
+  ReorderProvider,
+  useReorderContext,
+  useReorderItemContext
+};
+//# sourceMappingURL=reorder-context.mjs.map

package/dist/reorder-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/reorder-item.d.mts

@@ -1,17 +1,9 @@
-import * as react from 'react';
-import { PropsWithChildren, ForwardedRef, ReactNode } from 'react';
 import { HTMLUIProps, ComponentArgs } from '@yamada-ui/core';
-import { HTMLMotionProps, DragControls } from '@yamada-ui/motion';
+import { HTMLMotionProps } from '@yamada-ui/motion';
 import { Merge } from '@yamada-ui/utils';
+import { PropsWithChildren, RefAttributes, ReactNode } from 'react';
 
-type ReorderItemContext = {
-    register: (node: HTMLElement | null) => void;
-    isDrag: boolean;
-    dragControls: DragControls;
-};
-declare const ReorderItemProvider: react.Provider<ReorderItemContext>;
-declare const useReorderItemContext: () => ReorderItemContext;
-type ReorderItemOptions<Y extends any = string> = {
+interface ReorderItemOptions<Y extends any = string> {
     /**
      * The label of the reorder item.
      */
@@ -20,12 +12,11 @@ type ReorderItemOptions<Y extends any = string> = {
      * The value of the reorder item.
      */
     value: Y;
-};
-type ReorderItemProps<Y extends any = string> = Omit<Merge<HTMLUIProps<"li">, HTMLMotionProps<"li">>, "value" | "transition" | "children"> & PropsWithChildren & ReorderItemOptions<Y>;
+}
+interface ReorderItemProps<Y extends any = string> extends Omit<Merge<HTMLUIProps<"li">, HTMLMotionProps<"li">>, "value" | "transition" | "children">, PropsWithChildren, ReorderItemOptions<Y> {
+}
 declare const ReorderItem: {
-    <Y extends any = string>(props: ReorderItemProps<Y> & {
-        ref?: ForwardedRef<HTMLLIElement>;
-    }): JSX.Element;
+    <Y = string>(props: ReorderItemProps<Y> & RefAttributes<HTMLLIElement>): JSX.Element;
 } & ComponentArgs;
 
-export { ReorderItem, type ReorderItemProps, ReorderItemProvider, useReorderItemContext };
+export { ReorderItem, type ReorderItemProps };

package/dist/reorder-item.d.ts

@@ -1,17 +1,9 @@
-import * as react from 'react';
-import { PropsWithChildren, ForwardedRef, ReactNode } from 'react';
 import { HTMLUIProps, ComponentArgs } from '@yamada-ui/core';
-import { HTMLMotionProps, DragControls } from '@yamada-ui/motion';
+import { HTMLMotionProps } from '@yamada-ui/motion';
 import { Merge } from '@yamada-ui/utils';
+import { PropsWithChildren, RefAttributes, ReactNode } from 'react';
 
-type ReorderItemContext = {
-    register: (node: HTMLElement | null) => void;
-    isDrag: boolean;
-    dragControls: DragControls;
-};
-declare const ReorderItemProvider: react.Provider<ReorderItemContext>;
-declare const useReorderItemContext: () => ReorderItemContext;
-type ReorderItemOptions<Y extends any = string> = {
+interface ReorderItemOptions<Y extends any = string> {
     /**
      * The label of the reorder item.
      */
@@ -20,12 +12,11 @@ type ReorderItemOptions<Y extends any = string> = {
      * The value of the reorder item.
      */
     value: Y;
-};
-type ReorderItemProps<Y extends any = string> = Omit<Merge<HTMLUIProps<"li">, HTMLMotionProps<"li">>, "value" | "transition" | "children"> & PropsWithChildren & ReorderItemOptions<Y>;
+}
+interface ReorderItemProps<Y extends any = string> extends Omit<Merge<HTMLUIProps<"li">, HTMLMotionProps<"li">>, "value" | "transition" | "children">, PropsWithChildren, ReorderItemOptions<Y> {
+}
 declare const ReorderItem: {
-    <Y extends any = string>(props: ReorderItemProps<Y> & {
-        ref?: ForwardedRef<HTMLLIElement>;
-    }): JSX.Element;
+    <Y = string>(props: ReorderItemProps<Y> & RefAttributes<HTMLLIElement>): JSX.Element;
 } & ComponentArgs;
 
-export { ReorderItem, type ReorderItemProps, ReorderItemProvider, useReorderItemContext };
+export { ReorderItem, type ReorderItemProps };

package/dist/reorder-item.js

@@ -21,137 +21,41 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/reorder-item.tsx
 var reorder_item_exports = {};
 __export(reorder_item_exports, {
-  ReorderItem: () => ReorderItem,
-  ReorderItemProvider: () => ReorderItemProvider,
-  useReorderItemContext: () => useReorderItemContext
+  ReorderItem: () => ReorderItem
 });
 module.exports = __toCommonJS(reorder_item_exports);
-var import_core2 = require("@yamada-ui/core");
-var import_motion2 = require("@yamada-ui/motion");
-var import_utils2 = require("@yamada-ui/utils");
-var import_react2 = require("react");
-
-// src/reorder.tsx
 var import_core = require("@yamada-ui/core");
 var import_motion = require("@yamada-ui/motion");
-var import_utils = require("@yamada-ui/utils");
+var import_utils2 = require("@yamada-ui/utils");
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/reorder-context.ts
+var import_utils = require("@yamada-ui/utils");
 var [ReorderProvider, useReorderContext] = (0, import_utils.createContext)({
   name: "ReorderContext",
   errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
 });
-var omitDuplicated = (values) => Array.from(new Set(values));
-var pickDuplicated = (values) => values.filter(
-  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
-);
-var Reorder = (0, import_react.forwardRef)(
-  (props, ref) => {
-    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
-    const {
-      className,
-      orientation = "vertical",
-      gap = "fallback(4, 1rem)",
-      items = [],
-      onChange,
-      onCompleteChange,
-      children,
-      ...rest
-    } = (0, import_core.omitThemeProps)(mergedProps);
-    const axis = orientation === "vertical" ? "y" : "x";
-    const validChildren = (0, import_utils.getValidChildren)(children);
-    const hasChildren = !!validChildren.length;
-    const defaultValues = (0, import_react.useMemo)(() => {
-      const values2 = hasChildren ? validChildren.map(({ props: props2 }) => props2.value) : items.map(({ value }) => value);
-      const duplicatedValues = pickDuplicated(values2);
-      if (duplicatedValues.length)
-        console.warn(
-          `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(
-            `', '`
-          )}' `
-        );
-      return omitDuplicated(values2);
-    }, [hasChildren, validChildren, items]);
-    const prevDefaultValues = (0, import_react.useRef)(defaultValues);
-    const [values, setValues] = (0, import_react.useState)(defaultValues);
-    const prevValues = (0, import_react.useRef)(defaultValues);
-    const onReorder = (0, import_react.useCallback)(
-      (newValues) => {
-        setValues(newValues);
-        onChange == null ? void 0 : onChange(newValues);
-      },
-      [onChange]
-    );
-    const onCompleteReorder = (0, import_react.useCallback)(() => {
-      const isEqual = JSON.stringify(prevValues.current) === JSON.stringify(values);
-      if (isEqual) return;
-      prevValues.current = values;
-      onCompleteChange == null ? void 0 : onCompleteChange(values);
-    }, [onCompleteChange, values]);
-    (0, import_utils.useUpdateEffect)(() => {
-      const isEqual = JSON.stringify(defaultValues) === JSON.stringify(prevDefaultValues.current);
-      if (isEqual) return;
-      prevValues.current = defaultValues;
-      prevDefaultValues.current = defaultValues;
-      setValues(defaultValues);
-    }, [defaultValues]);
-    const cloneChildren = (0, import_react.useMemo)(
-      () => values.map((value) => {
-        if (hasChildren) {
-          return validChildren.find(({ props: props2 }) => props2.value === value);
-        } else {
-          const props2 = items.find((item) => item.value === value);
-          return props2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderItem, { ...props2 }, props2.value) : null;
-        }
-      }),
-      [values, hasChildren, validChildren, items]
-    );
-    const css = {
-      display: "flex",
-      flexDirection: orientation === "vertical" ? "column" : "row",
-      gap,
-      ...styles.container
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_core.ui.ul,
-      {
-        ref,
-        as: import_motion.MotionReorder.Group,
-        className: (0, import_utils.cx)("ui-reorder", className),
-        axis,
-        values,
-        onReorder,
-        __css: css,
-        ...rest,
-        onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, onCompleteReorder),
-        onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, onCompleteReorder),
-        children: cloneChildren
-      }
-    ) });
-  }
-);
-Reorder.displayName = "Reorder";
-
-// src/reorder-item.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var [ReorderItemProvider, useReorderItemContext] = (0, import_utils2.createContext)({
+var [ReorderItemProvider, useReorderItemContext] = (0, import_utils.createContext)({
   name: "ReorderContext",
   errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
 });
-var ReorderItem = (0, import_react2.forwardRef)(
+
+// src/reorder-item.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ReorderItem = (0, import_react.forwardRef)(
   ({ className, label, value, children, ...rest }, ref) => {
     var _a;
     const { orientation, styles } = useReorderContext();
-    const dragControls = (0, import_motion2.useDragControls)();
-    const [hasTrigger, setHasTrigger] = (0, import_react2.useState)(false);
-    const [isDrag, setIsDrag] = (0, import_react2.useState)(false);
-    const x = (0, import_motion2.useMotionValue)(0);
-    const y = (0, import_motion2.useMotionValue)(0);
-    const register = (0, import_react2.useCallback)(
+    const dragControls = (0, import_motion.useDragControls)();
+    const [hasTrigger, setHasTrigger] = (0, import_react.useState)(false);
+    const [isDrag, setIsDrag] = (0, import_react.useState)(false);
+    const x = (0, import_motion.useMotionValue)(0);
+    const y = (0, import_motion.useMotionValue)(0);
+    const register = (0, import_react.useCallback)(
       (node) => setHasTrigger(!!node),
       []
     );
-    (0, import_react2.useEffect)(() => {
+    (0, import_react.useEffect)(() => {
       const unsubscribeX = x.on("change", (x2) => {
         if (orientation === "horizontal") setIsDrag(x2 !== 0);
       });
@@ -176,11 +80,11 @@ var ReorderItem = (0, import_react2.forwardRef)(
         }
       } : {}
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_core2.ui.li,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.li,
       {
         ref,
-        as: import_motion2.MotionReorder.Item,
+        as: import_motion.MotionReorder.Item,
         className: (0, import_utils2.cx)("ui-reorder__item", className),
         value,
         __css: css,
@@ -197,8 +101,6 @@ var ReorderItem = (0, import_react2.forwardRef)(
 ReorderItem.displayName = "ReorderItem";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ReorderItem,
-  ReorderItemProvider,
-  useReorderItemContext
+  ReorderItem
 });
 //# sourceMappingURL=reorder-item.js.map

package/dist/reorder-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/reorder-item.tsx","../src/reorder.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject, ComponentArgs } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps, DragControls } from \"@yamada-ui/motion\"\nimport {\n  MotionReorder,\n  useMotionValue,\n  useDragControls,\n} from \"@yamada-ui/motion\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren, ReactNode } from \"react\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { useReorderContext } from \"./reorder\"\n\ntype ReorderItemContext = {\n  register: (node: HTMLElement | null) => void\n  isDrag: boolean\n  dragControls: DragControls\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderContext\",\n    errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n  })\n\ntype ReorderItemOptions<Y extends any = string> = {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value: Y\n}\n\nexport type ReorderItemProps<Y extends any = string> = Omit<\n  Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n  \"value\" | \"transition\" | \"children\"\n> &\n  PropsWithChildren &\n  ReorderItemOptions<Y>\n\nexport const ReorderItem = forwardRef(\n  <Y extends any = string>(\n    { className, label, value, children, ...rest }: ReorderItemProps<Y>,\n    ref: ForwardedRef<HTMLLIElement>,\n  ) => {\n    const { orientation, styles } = useReorderContext()\n\n    const dragControls = useDragControls()\n\n    const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n    const [isDrag, setIsDrag] = useState<boolean>(false)\n\n    const x = useMotionValue(0)\n    const y = useMotionValue(0)\n\n    const register = useCallback(\n      (node: HTMLElement | null) => setHasTrigger(!!node),\n      [],\n    )\n\n    useEffect(() => {\n      const unsubscribeX = x.on(\"change\", (x) => {\n        if (orientation === \"horizontal\") setIsDrag(x !== 0)\n      })\n      const unsubscribeY = y.on(\"change\", (y) => {\n        if (orientation === \"vertical\") setIsDrag(y !== 0)\n      })\n\n      return () => {\n        unsubscribeX()\n        unsubscribeY()\n      }\n    }, [orientation, x, y])\n\n    const css: CSSUIObject = {\n      _selected: {\n        cursor: \"grabbing\",\n      },\n      ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n      ...styles.item,\n      ...(!hasTrigger\n        ? {\n            _selected: {\n              ...styles.item?._selected,\n              cursor: \"grabbing\",\n            },\n          }\n        : {}),\n    }\n\n    return (\n      <ReorderItemProvider value={{ register, isDrag, dragControls }}>\n        <ui.li\n          ref={ref}\n          as={MotionReorder.Item}\n          className={cx(\"ui-reorder__item\", className)}\n          value={value}\n          __css={css}\n          {...rest}\n          dragListener={!hasTrigger}\n          dragControls={dragControls}\n          data-selected={dataAttr(isDrag)}\n          style={{ ...rest.style, x, y }}\n        >\n          {children ?? label}\n        </ui.li>\n      </ReorderItemProvider>\n    )\n  },\n) as {\n  <Y extends any = string>(\n    props: ReorderItemProps<Y> & { ref?: ForwardedRef<HTMLLIElement> },\n  ): JSX.Element\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n","import type {\n  CSSUIObject,\n  ComponentArgs,\n  HTMLUIProps,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  cx,\n  getValidChildren,\n  handlerAll,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren } from \"react\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderItem, type ReorderItemProps } from \"./reorder-item\"\n\ntype ReorderContext = {\n  orientation: \"vertical\" | \"horizontal\"\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [ReorderProvider, useReorderContext] =\n  createContext<ReorderContext>({\n    name: \"ReorderContext\",\n    errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n  })\n\nexport type ReorderGenerateItem<Y extends any = string> = ReorderItemProps<Y>\n\ntype ReorderOptions<Y extends any = string> = {\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: ReorderGenerateItem[]\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport type ReorderProps<Y extends any = string> = Omit<\n  Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n  \"onChange\" | \"transition\" | \"children\"\n> &\n  PropsWithChildren &\n  ThemeProps<\"Reorder\"> &\n  ReorderOptions<Y>\n\nconst omitDuplicated = <Y extends any = string>(values: Y[]): Y[] =>\n  Array.from(new Set(values))\n\nconst pickDuplicated = <Y extends any = string>(values: Y[]): Y[] =>\n  values.filter(\n    (value, index, self) =>\n      self.indexOf(value) === index && index !== self.lastIndexOf(value),\n  )\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/data-display/reorder\n */\nexport const Reorder = forwardRef(\n  <Y extends any = string>(\n    props: ReorderProps<Y>,\n    ref: ForwardedRef<HTMLUListElement>,\n  ) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Reorder\", props)\n    const {\n      className,\n      orientation = \"vertical\",\n      gap = \"fallback(4, 1rem)\",\n      items = [],\n      onChange,\n      onCompleteChange,\n      children,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n    const validChildren = getValidChildren(children)\n    const hasChildren = !!validChildren.length\n\n    const defaultValues = useMemo(() => {\n      const values = hasChildren\n        ? validChildren.map(({ props }) => props.value)\n        : items.map(({ value }) => value)\n\n      const duplicatedValues = pickDuplicated(values)\n\n      if (duplicatedValues.length)\n        console.warn(\n          `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n            `', '`,\n          )}' `,\n        )\n\n      return omitDuplicated(values)\n    }, [hasChildren, validChildren, items])\n    const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n    const [values, setValues] = useState<Y[]>(defaultValues)\n    const prevValues = useRef<Y[]>(defaultValues)\n\n    const onReorder = useCallback(\n      (newValues: Y[]) => {\n        setValues(newValues)\n\n        onChange?.(newValues)\n      },\n      [onChange],\n    )\n\n    const onCompleteReorder = useCallback(() => {\n      const isEqual =\n        JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n      if (isEqual) return\n\n      prevValues.current = values\n\n      onCompleteChange?.(values)\n    }, [onCompleteChange, values])\n\n    useUpdateEffect(() => {\n      const isEqual =\n        JSON.stringify(defaultValues) ===\n        JSON.stringify(prevDefaultValues.current)\n\n      if (isEqual) return\n\n      prevValues.current = defaultValues\n      prevDefaultValues.current = defaultValues\n\n      setValues(defaultValues)\n    }, [defaultValues])\n\n    const cloneChildren = useMemo(\n      () =>\n        values.map((value) => {\n          if (hasChildren) {\n            return validChildren.find(({ props }) => props.value === value)\n          } else {\n            const props = items.find((item) => item.value === value)\n\n            return props ? <ReorderItem key={props.value} {...props} /> : null\n          }\n        }),\n      [values, hasChildren, validChildren, items],\n    )\n\n    const css: CSSUIObject = {\n      display: \"flex\",\n      flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n      gap,\n      ...styles.container,\n    }\n\n    return (\n      <ReorderProvider value={{ orientation, styles }}>\n        <ui.ul\n          ref={ref}\n          as={MotionReorder.Group<Y>}\n          className={cx(\"ui-reorder\", className)}\n          axis={axis}\n          values={values}\n          onReorder={onReorder}\n          __css={css}\n          {...rest}\n          onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n          onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n        >\n          {cloneChildren}\n        </ui.ul>\n      </ReorderProvider>\n    )\n  },\n) as {\n  <Y extends any = string>(\n    props: ReorderProps<Y> & { ref?: ForwardedRef<HTMLUListElement> },\n  ): JSX.Element\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\n"],"mappings":"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","names":["import_core","import_motion","import_utils","import_react","values","props","import_jsx_runtime","x","y"]}
+{"version":3,"sources":["../src/reorder-item.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject, ComponentArgs } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport {\n  MotionReorder,\n  useMotionValue,\n  useDragControls,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n  ForwardedRef,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y extends any = string> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value: Y\n}\n\nexport interface ReorderItemProps<Y extends any = string>\n  extends Omit<\n      Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n      \"value\" | \"transition\" | \"children\"\n    >,\n    PropsWithChildren,\n    ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n  <Y extends any = string>(\n    { className, label, value, children, ...rest }: ReorderItemProps<Y>,\n    ref: ForwardedRef<HTMLLIElement>,\n  ) => {\n    const { orientation, styles } = useReorderContext()\n\n    const dragControls = useDragControls()\n\n    const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n    const [isDrag, setIsDrag] = useState<boolean>(false)\n\n    const x = useMotionValue(0)\n    const y = useMotionValue(0)\n\n    const register = useCallback(\n      (node: HTMLElement | null) => setHasTrigger(!!node),\n      [],\n    )\n\n    useEffect(() => {\n      const unsubscribeX = x.on(\"change\", (x) => {\n        if (orientation === \"horizontal\") setIsDrag(x !== 0)\n      })\n      const unsubscribeY = y.on(\"change\", (y) => {\n        if (orientation === \"vertical\") setIsDrag(y !== 0)\n      })\n\n      return () => {\n        unsubscribeX()\n        unsubscribeY()\n      }\n    }, [orientation, x, y])\n\n    const css: CSSUIObject = {\n      _selected: {\n        cursor: \"grabbing\",\n      },\n      ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n      ...styles.item,\n      ...(!hasTrigger\n        ? {\n            _selected: {\n              ...styles.item?._selected,\n              cursor: \"grabbing\",\n            },\n          }\n        : {}),\n    }\n\n    return (\n      <ReorderItemProvider value={{ register, isDrag, dragControls }}>\n        <ui.li\n          ref={ref}\n          as={MotionReorder.Item}\n          className={cx(\"ui-reorder__item\", className)}\n          value={value}\n          __css={css}\n          {...rest}\n          dragListener={!hasTrigger}\n          dragControls={dragControls}\n          data-selected={dataAttr(isDrag)}\n          style={{ ...rest.style, x, y }}\n        >\n          {children ?? label}\n        </ui.li>\n      </ReorderItemProvider>\n    )\n  },\n) as {\n  <Y = string>(\n    props: ReorderItemProps<Y> & RefAttributes<HTMLLIElement>,\n  ): JSX.Element\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n  orientation: \"vertical\" | \"horizontal\"\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n  createContext<ReorderContext>({\n    name: \"ReorderContext\",\n    errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n  })\n\ninterface ReorderItemContext {\n  register: (node: HTMLElement | null) => void\n  isDrag: boolean\n  dragControls: DragControls\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderContext\",\n    errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n  })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAmB;AAEnB,oBAIO;AACP,IAAAA,gBAA6B;AAQ7B,mBAA6D;;;ACd7D,mBAA8B;AAOvB,IAAM,CAAC,iBAAiB,iBAAiB,QAC9C,4BAA8B;AAAA,EAC5B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQI,IAAM,CAAC,qBAAqB,qBAAqB,QACtD,4BAAkC;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;;;ADiEK;AApDD,IAAM,kBAAc;AAAA,EACzB,CACE,EAAE,WAAW,OAAO,OAAO,UAAU,GAAG,KAAK,GAC7C,QACG;AA1CP;AA2CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,mBAAe,+BAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AAEnD,UAAM,QAAI,8BAAe,CAAC;AAC1B,UAAM,QAAI,8BAAe,CAAC;AAE1B,UAAM,eAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,gCAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,aAAc,WAAUA,OAAM,CAAC;AAAA,MACrD,CAAC;AACD,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,WAAY,WAAUA,OAAM,CAAC;AAAA,MACnD,CAAC;AAED,aAAO,MAAM;AACX,qBAAa;AACb,qBAAa;AAAA,MACf;AAAA,IACF,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;AAEtB,UAAM,MAAmB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAI,CAAC,aAAa,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,OAAO;AAAA,MAC5D,GAAG,OAAO;AAAA,MACV,GAAI,CAAC,aACD;AAAA,QACE,WAAW;AAAA,UACT,IAAG,YAAO,SAAP,mBAAa;AAAA,UAChB,QAAQ;AAAA,QACV;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,WACE,4CAAC,uBAAoB,OAAO,EAAE,UAAU,QAAQ,aAAa,GAC3D;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,4BAAc;AAAA,QAClB,eAAW,kBAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,cAAc,CAAC;AAAA,QACf;AAAA,QACA,qBAAe,wBAAS,MAAM;AAAA,QAC9B,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAE5B,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;","names":["import_utils","x","y"]}

package/dist/reorder-item.mjs

@@ -1,12 +1,9 @@
 "use client"
 import {
-  ReorderItem,
-  ReorderItemProvider,
-  useReorderItemContext
-} from "./chunk-LKWVADXG.mjs";
+  ReorderItem
+} from "./chunk-XQS37PRX.mjs";
+import "./chunk-BBGHU5EB.mjs";
 export {
-  ReorderItem,
-  ReorderItemProvider,
-  useReorderItemContext
+  ReorderItem
 };
 //# sourceMappingURL=reorder-item.mjs.map

package/dist/reorder-trigger.d.mts

@@ -1,7 +1,8 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps } from '@yamada-ui/core';
 
-type ReorderTriggerProps = HTMLUIProps<"div">;
+interface ReorderTriggerProps extends HTMLUIProps {
+}
 declare const ReorderTrigger: _yamada_ui_core.Component<"div", ReorderTriggerProps>;
 
 export { ReorderTrigger, type ReorderTriggerProps };

package/dist/reorder-trigger.d.ts

@@ -1,7 +1,8 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps } from '@yamada-ui/core';
 
-type ReorderTriggerProps = HTMLUIProps<"div">;
+interface ReorderTriggerProps extends HTMLUIProps {
+}
 declare const ReorderTrigger: _yamada_ui_core.Component<"div", ReorderTriggerProps>;
 
 export { ReorderTrigger, type ReorderTriggerProps };