@yamada-ui/reorder 2.0.13 → 2.0.14-dev-20241026234458

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -40,6 +40,8 @@ var ReorderTrigger = forwardRef(
40
40
  );
41
41
  }
42
42
  );
43
+ ReorderTrigger.displayName = "ReorderTrigger";
44
+ ReorderTrigger.__ui__ = "ReorderTrigger";
43
45
  var ReorderTriggerIcon = (rest) => {
44
46
  return /* @__PURE__ */ jsxs(Icon, { viewBox: "0 0 39 39", ...rest, children: [
45
47
  /* @__PURE__ */ jsx(
@@ -107,8 +109,10 @@ var ReorderTriggerIcon = (rest) => {
107
109
  )
108
110
  ] });
109
111
  };
112
+ ReorderTriggerIcon.displayName = "ReorderTriggerIcon";
113
+ ReorderTriggerIcon.__ui__ = "ReorderTriggerIcon";
110
114
 
111
115
  export {
112
116
  ReorderTrigger
113
117
  };
114
- //# sourceMappingURL=chunk-OWVWVNXS.mjs.map
118
+ //# sourceMappingURL=chunk-F2THE4WO.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/reorder-trigger.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nReorderTrigger.displayName = \"ReorderTrigger\"\nReorderTrigger.__ui__ = \"ReorderTrigger\"\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nReorderTriggerIcon.displayName = \"ReorderTriggerIcon\"\nReorderTriggerIcon.__ui__ = \"ReorderTriggerIcon\"\n"],"mappings":";;;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,YAAY;AACrB,SAAS,IAAI,UAAU,YAAY,iBAAiB;AAMzB,cAqCvB,YArCuB;AADpB,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,oBAAC,sBAAmB,GAAI,GAAG,KAAK,GAAG,QAAQ;AAClE,UAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,UAAM,EAAE,cAAc,QAAQ,SAAS,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,UAAU,GAAG;AAAA,QAC5B,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,iBAAe,SAAS,MAAM;AAAA,QAC9B,eAAe;AAAA,UAAW,KAAK;AAAA,UAAe,CAAC,OAC7C,aAAa,MAAM,EAAE;AAAA,QACvB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAExB,IAAM,qBAAoC,CAAC,SAAS;AAClD,SACE,qBAAC,QAAK,SAAQ,aAAa,GAAG,MAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":[]}
@@ -72,8 +72,9 @@ var ReorderItem = forwardRef(
72
72
  }
73
73
  );
74
74
  ReorderItem.displayName = "ReorderItem";
75
+ ReorderItem.__ui__ = "ReorderItem";
75
76
 
76
77
  export {
77
78
  ReorderItem
78
79
  };
79
- //# sourceMappingURL=chunk-KJQQDHFK.mjs.map
80
+ //# sourceMappingURL=chunk-UUWQUHDE.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/reorder-item.tsx"],"sourcesContent":["import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...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={{ dragControls, isDrag, register }}>\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 style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n"],"mappings":";;;;;;;AAUA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,IAAI,gBAAgB;AAC7B,SAAS,YAAY,aAAa,WAAW,gBAAgB;AA2ErD;AArDD,IAAM,cAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,eAAe,gBAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AAEnD,UAAM,IAAI,eAAe,CAAC;AAC1B,UAAM,IAAI,eAAe,CAAC;AAE1B,UAAM,WAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,cAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACA,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,oBAAC,uBAAoB,OAAO,EAAE,cAAc,QAAQ,SAAS,GAC3D;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,cAAc;AAAA,QAClB,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,iBAAe,SAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;","names":["x","y"]}
1
+ {"version":3,"sources":["../src/reorder-item.tsx"],"sourcesContent":["import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...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={{ dragControls, isDrag, register }}>\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 style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\nReorderItem.__ui__ = \"ReorderItem\"\n"],"mappings":";;;;;;;AAUA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,IAAI,gBAAgB;AAC7B,SAAS,YAAY,aAAa,WAAW,gBAAgB;AA2ErD;AArDD,IAAM,cAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,eAAe,gBAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AAEnD,UAAM,IAAI,eAAe,CAAC;AAC1B,UAAM,IAAI,eAAe,CAAC;AAE1B,UAAM,WAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,cAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACA,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,oBAAC,uBAAoB,OAAO,EAAE,cAAc,QAAQ,SAAS,GAC3D;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,cAAc;AAAA,QAClB,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,iBAAe,SAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":["x","y"]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  ReorderItem
4
- } from "./chunk-KJQQDHFK.mjs";
4
+ } from "./chunk-UUWQUHDE.mjs";
5
5
  import {
6
6
  ReorderProvider
7
7
  } from "./chunk-M54CO3K4.mjs";
@@ -108,8 +108,9 @@ var Reorder = forwardRef(
108
108
  }
109
109
  );
110
110
  Reorder.displayName = "Reorder";
111
+ Reorder.__ui__ = "Reorder";
111
112
 
112
113
  export {
113
114
  Reorder
114
115
  };
115
- //# sourceMappingURL=chunk-KOC2E47U.mjs.map
116
+ //# sourceMappingURL=chunk-VR26UAYN.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/reorder.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\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 interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\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 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\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 = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\n"],"mappings":"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","names":["values","props"]}
1
+ {"version":3,"sources":["../src/reorder.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\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 interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\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 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\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 = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\nReorder.__ui__ = \"Reorder\"\n"],"mappings":"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","names":["values","props"]}
package/dist/index.js CHANGED
@@ -108,6 +108,7 @@ var ReorderItem = (0, import_react.forwardRef)(
108
108
  }
109
109
  );
110
110
  ReorderItem.displayName = "ReorderItem";
111
+ ReorderItem.__ui__ = "ReorderItem";
111
112
 
112
113
  // src/reorder.tsx
113
114
  var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -202,6 +203,7 @@ var Reorder = (0, import_react2.forwardRef)(
202
203
  }
203
204
  );
204
205
  Reorder.displayName = "Reorder";
206
+ Reorder.__ui__ = "Reorder";
205
207
 
206
208
  // src/reorder-trigger.tsx
207
209
  var import_core3 = require("@yamada-ui/core");
@@ -239,6 +241,8 @@ var ReorderTrigger = (0, import_core3.forwardRef)(
239
241
  );
240
242
  }
241
243
  );
244
+ ReorderTrigger.displayName = "ReorderTrigger";
245
+ ReorderTrigger.__ui__ = "ReorderTrigger";
242
246
  var ReorderTriggerIcon = (rest) => {
243
247
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_icon.Icon, { viewBox: "0 0 39 39", ...rest, children: [
244
248
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -306,6 +310,8 @@ var ReorderTriggerIcon = (rest) => {
306
310
  )
307
311
  ] });
308
312
  };
313
+ ReorderTriggerIcon.displayName = "ReorderTriggerIcon";
314
+ ReorderTriggerIcon.__ui__ = "ReorderTriggerIcon";
309
315
  // Annotate the CommonJS export names for ESM import in node:
310
316
  0 && (module.exports = {
311
317
  Reorder,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/reorder.tsx","../src/reorder-context.ts","../src/reorder-item.tsx","../src/reorder-trigger.tsx"],"sourcesContent":["export { Reorder } from \"./reorder\"\nexport type { ReorderGenerateItem, ReorderProps } from \"./reorder\"\nexport { ReorderItem } from \"./reorder-item\"\nexport type { ReorderItemProps } from \"./reorder-item\"\nexport { ReorderTrigger } from \"./reorder-trigger\"\nexport type { ReorderTriggerProps } from \"./reorder-trigger\"\n","import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\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 interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\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 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\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 = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\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: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\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 dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\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","import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...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={{ dragControls, isDrag, register }}>\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 style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { FC } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n"],"mappings":"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","names":["import_core","import_motion","import_utils","import_react","import_utils","x","y","import_jsx_runtime","values","props","import_core","import_utils","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/reorder.tsx","../src/reorder-context.ts","../src/reorder-item.tsx","../src/reorder-trigger.tsx"],"sourcesContent":["export { Reorder } from \"./reorder\"\nexport type { ReorderGenerateItem, ReorderProps } from \"./reorder\"\nexport { ReorderItem } from \"./reorder-item\"\nexport type { ReorderItemProps } from \"./reorder-item\"\nexport { ReorderTrigger } from \"./reorder-trigger\"\nexport type { ReorderTriggerProps } from \"./reorder-trigger\"\n","import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\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 interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\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 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\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 = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\nReorder.__ui__ = \"Reorder\"\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: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\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 dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\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","import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...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={{ dragControls, isDrag, register }}>\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 style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\nReorderItem.__ui__ = \"ReorderItem\"\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nReorderTrigger.displayName = \"ReorderTrigger\"\nReorderTrigger.__ui__ = \"ReorderTrigger\"\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nReorderTriggerIcon.displayName = \"ReorderTriggerIcon\"\nReorderTriggerIcon.__ui__ = \"ReorderTriggerIcon\"\n"],"mappings":"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","names":["import_core","import_motion","import_utils","import_react","import_utils","x","y","import_jsx_runtime","values","props","import_core","import_utils","import_jsx_runtime"]}
package/dist/index.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  "use client"
2
2
  import {
3
3
  ReorderTrigger
4
- } from "./chunk-OWVWVNXS.mjs";
4
+ } from "./chunk-F2THE4WO.mjs";
5
5
  import {
6
6
  Reorder
7
- } from "./chunk-KOC2E47U.mjs";
7
+ } from "./chunk-VR26UAYN.mjs";
8
8
  import {
9
9
  ReorderItem
10
- } from "./chunk-KJQQDHFK.mjs";
10
+ } from "./chunk-UUWQUHDE.mjs";
11
11
  import "./chunk-M54CO3K4.mjs";
12
12
  export {
13
13
  Reorder,
@@ -100,6 +100,7 @@ var ReorderItem = (0, import_react.forwardRef)(
100
100
  }
101
101
  );
102
102
  ReorderItem.displayName = "ReorderItem";
103
+ ReorderItem.__ui__ = "ReorderItem";
103
104
  // Annotate the CommonJS export names for ESM import in node:
104
105
  0 && (module.exports = {
105
106
  ReorderItem
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/reorder-item.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...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={{ dragControls, isDrag, register }}>\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 style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\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: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\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 dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\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;AAUA,kBAAmB;AACnB,oBAIO;AACP,IAAAA,gBAA6B;AAC7B,mBAA6D;;;ACf7D,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;;;ADmEK;AArDD,IAAM,kBAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,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,cAAc,QAAQ,SAAS,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,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,qBAAe,wBAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;","names":["import_utils","x","y"]}
1
+ {"version":3,"sources":["../src/reorder-item.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...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={{ dragControls, isDrag, register }}>\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 style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\nReorderItem.__ui__ = \"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: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\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 dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\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;AAUA,kBAAmB;AACnB,oBAIO;AACP,IAAAA,gBAA6B;AAC7B,mBAA6D;;;ACf7D,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;;;ADmEK;AArDD,IAAM,kBAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,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,cAAc,QAAQ,SAAS,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,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,qBAAe,wBAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":["import_utils","x","y"]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  ReorderItem
4
- } from "./chunk-KJQQDHFK.mjs";
4
+ } from "./chunk-UUWQUHDE.mjs";
5
5
  import "./chunk-M54CO3K4.mjs";
6
6
  export {
7
7
  ReorderItem
@@ -72,6 +72,8 @@ var ReorderTrigger = (0, import_core.forwardRef)(
72
72
  );
73
73
  }
74
74
  );
75
+ ReorderTrigger.displayName = "ReorderTrigger";
76
+ ReorderTrigger.__ui__ = "ReorderTrigger";
75
77
  var ReorderTriggerIcon = (rest) => {
76
78
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_icon.Icon, { viewBox: "0 0 39 39", ...rest, children: [
77
79
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -139,6 +141,8 @@ var ReorderTriggerIcon = (rest) => {
139
141
  )
140
142
  ] });
141
143
  };
144
+ ReorderTriggerIcon.displayName = "ReorderTriggerIcon";
145
+ ReorderTriggerIcon.__ui__ = "ReorderTriggerIcon";
142
146
  // Annotate the CommonJS export names for ESM import in node:
143
147
  0 && (module.exports = {
144
148
  ReorderTrigger
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/reorder-trigger.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { FC } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\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: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\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 dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\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;AAGA,kBAA+B;AAC/B,kBAAqB;AACrB,IAAAA,gBAAoD;;;ACHpD,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;;;ADdwB;AADpB,IAAM,qBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,4CAAC,sBAAmB,GAAI,GAAG,KAAK,GAAG,QAAQ;AAClE,UAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,UAAM,EAAE,cAAc,QAAQ,SAAS,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,SAAK,yBAAU,UAAU,GAAG;AAAA,QAC5B,eAAW,kBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAe,wBAAS,MAAM;AAAA,QAC9B,mBAAe;AAAA,UAAW,KAAK;AAAA,UAAe,CAAC,OAC7C,aAAa,MAAM,EAAE;AAAA,QACvB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAM,qBAAoC,CAAC,SAAS;AAClD,SACE,6CAAC,oBAAK,SAAQ,aAAa,GAAG,MAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;","names":["import_utils"]}
1
+ {"version":3,"sources":["../src/reorder-trigger.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nReorderTrigger.displayName = \"ReorderTrigger\"\nReorderTrigger.__ui__ = \"ReorderTrigger\"\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nReorderTriggerIcon.displayName = \"ReorderTriggerIcon\"\nReorderTriggerIcon.__ui__ = \"ReorderTriggerIcon\"\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: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\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 dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\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;AAEA,kBAA+B;AAC/B,kBAAqB;AACrB,IAAAA,gBAAoD;;;ACFpD,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;;;ADfwB;AADpB,IAAM,qBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,4CAAC,sBAAmB,GAAI,GAAG,KAAK,GAAG,QAAQ;AAClE,UAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,UAAM,EAAE,cAAc,QAAQ,SAAS,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,SAAK,yBAAU,UAAU,GAAG;AAAA,QAC5B,eAAW,kBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAe,wBAAS,MAAM;AAAA,QAC9B,mBAAe;AAAA,UAAW,KAAK;AAAA,UAAe,CAAC,OAC7C,aAAa,MAAM,EAAE;AAAA,QACvB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAExB,IAAM,qBAAoC,CAAC,SAAS;AAClD,SACE,6CAAC,oBAAK,SAAQ,aAAa,GAAG,MAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":["import_utils"]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  ReorderTrigger
4
- } from "./chunk-OWVWVNXS.mjs";
4
+ } from "./chunk-F2THE4WO.mjs";
5
5
  import "./chunk-M54CO3K4.mjs";
6
6
  export {
7
7
  ReorderTrigger
package/dist/reorder.js CHANGED
@@ -104,6 +104,7 @@ var ReorderItem = (0, import_react.forwardRef)(
104
104
  }
105
105
  );
106
106
  ReorderItem.displayName = "ReorderItem";
107
+ ReorderItem.__ui__ = "ReorderItem";
107
108
 
108
109
  // src/reorder.tsx
109
110
  var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -198,6 +199,7 @@ var Reorder = (0, import_react2.forwardRef)(
198
199
  }
199
200
  );
200
201
  Reorder.displayName = "Reorder";
202
+ Reorder.__ui__ = "Reorder";
201
203
  // Annotate the CommonJS export names for ESM import in node:
202
204
  0 && (module.exports = {
203
205
  Reorder
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/reorder.tsx","../src/reorder-context.ts","../src/reorder-item.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\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 interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\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 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\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 = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\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: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\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 dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\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","import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...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={{ dragControls, isDrag, register }}>\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 style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n"],"mappings":"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","names":["import_core","import_motion","import_utils","import_react","import_utils","x","y","import_jsx_runtime","values","props"]}
1
+ {"version":3,"sources":["../src/reorder.tsx","../src/reorder-context.ts","../src/reorder-item.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\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 interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\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 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\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 = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\nReorder.__ui__ = \"Reorder\"\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: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\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 dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\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","import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...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={{ dragControls, isDrag, register }}>\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 style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\nReorderItem.__ui__ = \"ReorderItem\"\n"],"mappings":"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","names":["import_core","import_motion","import_utils","import_react","import_utils","x","y","import_jsx_runtime","values","props"]}
package/dist/reorder.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  Reorder
4
- } from "./chunk-KOC2E47U.mjs";
5
- import "./chunk-KJQQDHFK.mjs";
4
+ } from "./chunk-VR26UAYN.mjs";
5
+ import "./chunk-UUWQUHDE.mjs";
6
6
  import "./chunk-M54CO3K4.mjs";
7
7
  export {
8
8
  Reorder
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/reorder",
3
- "version": "2.0.13",
3
+ "version": "2.0.14-dev-20241026234458",
4
4
  "description": "Yamada UI reorder component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/reorder-trigger.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { FC } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n"],"mappings":";;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,YAAY;AACrB,SAAS,IAAI,UAAU,YAAY,iBAAiB;AAMzB,cAkCvB,YAlCuB;AADpB,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,oBAAC,sBAAmB,GAAI,GAAG,KAAK,GAAG,QAAQ;AAClE,UAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,UAAM,EAAE,cAAc,QAAQ,SAAS,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,UAAU,GAAG;AAAA,QAC5B,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,iBAAe,SAAS,MAAM;AAAA,QAC9B,eAAe;AAAA,UAAW,KAAK;AAAA,UAAe,CAAC,OAC7C,aAAa,MAAM,EAAE;AAAA,QACvB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAM,qBAAoC,CAAC,SAAS;AAClD,SACE,qBAAC,QAAK,SAAQ,aAAa,GAAG,MAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;","names":[]}