@yamada-ui/reorder 0.2.6 → 0.2.8

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.
Files changed (13) hide show
  1. package/dist/chunk-AU63E37R.mjs +108 -0
  2. package/dist/{chunk-CT62EC32.mjs → chunk-XFS2BZ5I.mjs} +11 -3
  3. package/dist/{chunk-2ILVWNCS.mjs → chunk-Z4TPMUFM.mjs} +6 -3
  4. package/dist/index.js +90 -67
  5. package/dist/index.mjs +3 -3
  6. package/dist/reorder-item.js +86 -66
  7. package/dist/reorder-item.mjs +2 -2
  8. package/dist/reorder-trigger.js +90 -67
  9. package/dist/reorder-trigger.mjs +3 -3
  10. package/dist/reorder.js +76 -64
  11. package/dist/reorder.mjs +1 -1
  12. package/package.json +5 -5
  13. package/dist/chunk-UF5QTFGJ.mjs +0 -90
package/dist/chunk-AU63E37R.mjs ADDED
@@ -0,0 +1,108 @@
1
+ // src/reorder.tsx
2
+ import {
3
+ ui,
4
+ useMultiComponentStyle,
5
+ omitThemeProps
6
+ } from "@yamada-ui/core";
7
+ import { MotionReorder } from "@yamada-ui/motion";
8
+ import {
9
+ createContext,
10
+ cx,
11
+ getValidChildren,
12
+ handlerAll,
13
+ useUpdateEffect
14
+ } from "@yamada-ui/utils";
15
+ import { forwardRef, useCallback, useMemo, useState } from "react";
16
+ import { jsx } from "react/jsx-runtime";
17
+ var [ReorderProvider, useReorderContext] = createContext({
18
+ name: "ReorderContext",
19
+ errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
20
+ });
21
+ var omitDuplicated = (values) => Array.from(new Set(values));
22
+ var pickDuplicated = (values) => values.filter(
23
+ (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
24
+ );
25
+ var Reorder = forwardRef(
26
+ (props, ref) => {
27
+ const [styles, mergedProps] = useMultiComponentStyle("Reorder", props);
28
+ const {
29
+ className,
30
+ orientation = "vertical",
31
+ gap = "md",
32
+ onChange,
33
+ onCompleteChange,
34
+ children,
35
+ ...rest
36
+ } = omitThemeProps(mergedProps);
37
+ const axis = orientation === "vertical" ? "y" : "x";
38
+ const validChildren = getValidChildren(children);
39
+ const defaultValues = useMemo(() => {
40
+ const values2 = validChildren.map(({ props: props2 }) => props2.label);
41
+ const duplicatedValues = pickDuplicated(values2);
42
+ if (duplicatedValues.length)
43
+ console.warn(
44
+ `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
45
+ `', '`
46
+ )}' `
47
+ );
48
+ return omitDuplicated(values2);
49
+ }, [validChildren]);
50
+ const [values, setValues] = useState(defaultValues);
51
+ const onReorder = useCallback(
52
+ (newValues) => {
53
+ setValues(newValues);
54
+ onChange == null ? void 0 : onChange(newValues);
55
+ },
56
+ [onChange]
57
+ );
58
+ useUpdateEffect(() => {
59
+ const isDone = defaultValues.every(
60
+ (defaultValue) => values.includes(defaultValue)
61
+ );
62
+ if (isDone)
63
+ return;
64
+ setValues(defaultValues);
65
+ }, [defaultValues]);
66
+ const cloneChildren = useMemo(
67
+ () => values.map(
68
+ (value) => validChildren.find(({ props: props2 }) => props2.label === value)
69
+ ),
70
+ [values, validChildren]
71
+ );
72
+ const css = {
73
+ display: "flex",
74
+ flexDirection: orientation === "vertical" ? "column" : "row",
75
+ gap,
76
+ ...styles.container
77
+ };
78
+ return /* @__PURE__ */ jsx(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ jsx(
79
+ ui.ul,
80
+ {
81
+ ref,
82
+ as: MotionReorder.Group,
83
+ className: cx("ui-reorder", className),
84
+ axis,
85
+ values,
86
+ onReorder,
87
+ __css: css,
88
+ ...rest,
89
+ onMouseUp: handlerAll(
90
+ rest.onMouseUp,
91
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
92
+ ),
93
+ onTouchEnd: handlerAll(
94
+ rest.onTouchEnd,
95
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
96
+ ),
97
+ children: cloneChildren
98
+ }
99
+ ) });
100
+ }
101
+ );
102
+ Reorder.displayName = "Reorder";
103
+
104
+ export {
105
+ ReorderProvider,
106
+ useReorderContext,
107
+ Reorder
108
+ };
package/dist/{chunk-CT62EC32.mjs → chunk-XFS2BZ5I.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useReorderContext
3
- } from "./chunk-UF5QTFGJ.mjs";
3
+ } from "./chunk-AU63E37R.mjs";
4
4
 
5
5
  // src/reorder-item.tsx
6
6
  import { ui } from "@yamada-ui/core";
@@ -25,7 +25,10 @@ var ReorderItem = forwardRef(
25
25
  const [isDrag, setIsDrag] = useState(false);
26
26
  const x = useMotionValue(0);
27
27
  const y = useMotionValue(0);
28
- const register = useCallback((node) => setHasTrigger(!!node), []);
28
+ const register = useCallback(
29
+ (node) => setHasTrigger(!!node),
30
+ []
31
+ );
29
32
  useEffect(() => {
30
33
  x.onChange((subscription) => {
31
34
  if (orientation === "horizontal")
@@ -43,7 +46,12 @@ var ReorderItem = forwardRef(
43
46
  const css = {
44
47
  ...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
45
48
  ...styles.item,
46
- ...!hasTrigger ? { _selected: { ...(_a = styles.item) == null ? void 0 : _a._selected, cursor: "grabbing" } } : {}
49
+ ...!hasTrigger ? {
50
+ _selected: {
51
+ ...(_a = styles.item) == null ? void 0 : _a._selected,
52
+ cursor: "grabbing"
53
+ }
54
+ } : {}
47
55
  };
48
56
  return /* @__PURE__ */ jsx(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ jsx(
49
57
  ui.li,
package/dist/{chunk-2ILVWNCS.mjs → chunk-Z4TPMUFM.mjs} RENAMED
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  useReorderItemContext
3
- } from "./chunk-CT62EC32.mjs";
3
+ } from "./chunk-XFS2BZ5I.mjs";
4
4
  import {
5
5
  useReorderContext
6
- } from "./chunk-UF5QTFGJ.mjs";
6
+ } from "./chunk-AU63E37R.mjs";
7
7
 
8
8
  // src/reorder-trigger.tsx
9
9
  import { ui, forwardRef } from "@yamada-ui/core";
@@ -32,7 +32,10 @@ var ReorderTrigger = forwardRef(
32
32
  __css: css,
33
33
  ...rest,
34
34
  "data-selected": dataAttr(isDrag),
35
- onPointerDown: handlerAll(rest.onPointerDown, (ev) => dragControls.start(ev)),
35
+ onPointerDown: handlerAll(
36
+ rest.onPointerDown,
37
+ (ev) => dragControls.start(ev)
38
+ ),
36
39
  children
37
40
  }
38
41
  );
package/dist/index.js CHANGED
@@ -40,71 +40,83 @@ var omitDuplicated = (values) => Array.from(new Set(values));
40
40
  var pickDuplicated = (values) => values.filter(
41
41
  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
42
42
  );
43
- var Reorder = (0, import_react.forwardRef)((props, ref) => {
44
- const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
45
- const {
46
- className,
47
- orientation = "vertical",
48
- gap = "md",
49
- onChange,
50
- onCompleteChange,
51
- children,
52
- ...rest
53
- } = (0, import_core.omitThemeProps)(mergedProps);
54
- const axis = orientation === "vertical" ? "y" : "x";
55
- const validChildren = (0, import_utils.getValidChildren)(children);
56
- const defaultValues = (0, import_react.useMemo)(() => {
57
- const values2 = validChildren.map(({ props: props2 }) => props2.label);
58
- const duplicatedValues = pickDuplicated(values2);
59
- if (duplicatedValues.length)
60
- console.warn(
61
- `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
62
- `', '`
63
- )}' `
43
+ var Reorder = (0, import_react.forwardRef)(
44
+ (props, ref) => {
45
+ const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
46
+ const {
47
+ className,
48
+ orientation = "vertical",
49
+ gap = "md",
50
+ onChange,
51
+ onCompleteChange,
52
+ children,
53
+ ...rest
54
+ } = (0, import_core.omitThemeProps)(mergedProps);
55
+ const axis = orientation === "vertical" ? "y" : "x";
56
+ const validChildren = (0, import_utils.getValidChildren)(children);
57
+ const defaultValues = (0, import_react.useMemo)(() => {
58
+ const values2 = validChildren.map(({ props: props2 }) => props2.label);
59
+ const duplicatedValues = pickDuplicated(values2);
60
+ if (duplicatedValues.length)
61
+ console.warn(
62
+ `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
63
+ `', '`
64
+ )}' `
65
+ );
66
+ return omitDuplicated(values2);
67
+ }, [validChildren]);
68
+ const [values, setValues] = (0, import_react.useState)(defaultValues);
69
+ const onReorder = (0, import_react.useCallback)(
70
+ (newValues) => {
71
+ setValues(newValues);
72
+ onChange == null ? void 0 : onChange(newValues);
73
+ },
74
+ [onChange]
75
+ );
76
+ (0, import_utils.useUpdateEffect)(() => {
77
+ const isDone = defaultValues.every(
78
+ (defaultValue) => values.includes(defaultValue)
64
79
  );
65
- return omitDuplicated(values2);
66
- }, [validChildren]);
67
- const [values, setValues] = (0, import_react.useState)(defaultValues);
68
- const onReorder = (0, import_react.useCallback)(
69
- (newValues) => {
70
- setValues(newValues);
71
- onChange == null ? void 0 : onChange(newValues);
72
- },
73
- [onChange]
74
- );
75
- (0, import_utils.useUpdateEffect)(() => {
76
- const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
77
- if (isDone)
78
- return;
79
- setValues(defaultValues);
80
- }, [defaultValues]);
81
- const cloneChildren = (0, import_react.useMemo)(
82
- () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
83
- [values, validChildren]
84
- );
85
- const css = {
86
- display: "flex",
87
- flexDirection: orientation === "vertical" ? "column" : "row",
88
- gap,
89
- ...styles.container
90
- };
91
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
92
- import_core.ui.ul,
93
- {
94
- ref,
95
- as: import_motion.MotionReorder.Group,
96
- className: (0, import_utils.cx)("ui-reorder", className),
97
- axis,
98
- values,
99
- onReorder,
100
- __css: css,
101
- ...rest,
102
- onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
103
- onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
104
- children: cloneChildren
105
- }
106
- ) });
107
- });
80
+ if (isDone)
81
+ return;
82
+ setValues(defaultValues);
83
+ }, [defaultValues]);
84
+ const cloneChildren = (0, import_react.useMemo)(
85
+ () => values.map(
86
+ (value) => validChildren.find(({ props: props2 }) => props2.label === value)
87
+ ),
88
+ [values, validChildren]
89
+ );
90
+ const css = {
91
+ display: "flex",
92
+ flexDirection: orientation === "vertical" ? "column" : "row",
93
+ gap,
94
+ ...styles.container
95
+ };
96
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
97
+ import_core.ui.ul,
98
+ {
99
+ ref,
100
+ as: import_motion.MotionReorder.Group,
101
+ className: (0, import_utils.cx)("ui-reorder", className),
102
+ axis,
103
+ values,
104
+ onReorder,
105
+ __css: css,
106
+ ...rest,
107
+ onMouseUp: (0, import_utils.handlerAll)(
108
+ rest.onMouseUp,
109
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
110
+ ),
111
+ onTouchEnd: (0, import_utils.handlerAll)(
112
+ rest.onTouchEnd,
113
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
114
+ ),
115
+ children: cloneChildren
116
+ }
117
+ ) });
118
+ }
119
+ );
108
120
  Reorder.displayName = "Reorder";
109
121
 
110
122
  // src/reorder-item.tsx
@@ -126,7 +138,10 @@ var ReorderItem = (0, import_react2.forwardRef)(
126
138
  const [isDrag, setIsDrag] = (0, import_react2.useState)(false);
127
139
  const x = (0, import_motion2.useMotionValue)(0);
128
140
  const y = (0, import_motion2.useMotionValue)(0);
129
- const register = (0, import_react2.useCallback)((node) => setHasTrigger(!!node), []);
141
+ const register = (0, import_react2.useCallback)(
142
+ (node) => setHasTrigger(!!node),
143
+ []
144
+ );
130
145
  (0, import_react2.useEffect)(() => {
131
146
  x.onChange((subscription) => {
132
147
  if (orientation === "horizontal")
@@ -144,7 +159,12 @@ var ReorderItem = (0, import_react2.forwardRef)(
144
159
  const css = {
145
160
  ...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
146
161
  ...styles.item,
147
- ...!hasTrigger ? { _selected: { ...(_a = styles.item) == null ? void 0 : _a._selected, cursor: "grabbing" } } : {}
162
+ ...!hasTrigger ? {
163
+ _selected: {
164
+ ...(_a = styles.item) == null ? void 0 : _a._selected,
165
+ cursor: "grabbing"
166
+ }
167
+ } : {}
148
168
  };
149
169
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
150
170
  import_core2.ui.li,
@@ -192,7 +212,10 @@ var ReorderTrigger = (0, import_core3.forwardRef)(
192
212
  __css: css,
193
213
  ...rest,
194
214
  "data-selected": (0, import_utils3.dataAttr)(isDrag),
195
- onPointerDown: (0, import_utils3.handlerAll)(rest.onPointerDown, (ev) => dragControls.start(ev)),
215
+ onPointerDown: (0, import_utils3.handlerAll)(
216
+ rest.onPointerDown,
217
+ (ev) => dragControls.start(ev)
218
+ ),
196
219
  children
197
220
  }
198
221
  );
package/dist/index.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  import {
2
2
  ReorderTrigger
3
- } from "./chunk-2ILVWNCS.mjs";
3
+ } from "./chunk-Z4TPMUFM.mjs";
4
4
  import {
5
5
  ReorderItem
6
- } from "./chunk-CT62EC32.mjs";
6
+ } from "./chunk-XFS2BZ5I.mjs";
7
7
  import {
8
8
  Reorder
9
- } from "./chunk-UF5QTFGJ.mjs";
9
+ } from "./chunk-AU63E37R.mjs";
10
10
  export {
11
11
  Reorder,
12
12
  ReorderItem,
package/dist/reorder-item.js CHANGED
@@ -44,71 +44,83 @@ var omitDuplicated = (values) => Array.from(new Set(values));
44
44
  var pickDuplicated = (values) => values.filter(
45
45
  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
46
46
  );
47
- var Reorder = (0, import_react.forwardRef)((props, ref) => {
48
- const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
49
- const {
50
- className,
51
- orientation = "vertical",
52
- gap = "md",
53
- onChange,
54
- onCompleteChange,
55
- children,
56
- ...rest
57
- } = (0, import_core.omitThemeProps)(mergedProps);
58
- const axis = orientation === "vertical" ? "y" : "x";
59
- const validChildren = (0, import_utils.getValidChildren)(children);
60
- const defaultValues = (0, import_react.useMemo)(() => {
61
- const values2 = validChildren.map(({ props: props2 }) => props2.label);
62
- const duplicatedValues = pickDuplicated(values2);
63
- if (duplicatedValues.length)
64
- console.warn(
65
- `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
66
- `', '`
67
- )}' `
47
+ var Reorder = (0, import_react.forwardRef)(
48
+ (props, ref) => {
49
+ const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
50
+ const {
51
+ className,
52
+ orientation = "vertical",
53
+ gap = "md",
54
+ onChange,
55
+ onCompleteChange,
56
+ children,
57
+ ...rest
58
+ } = (0, import_core.omitThemeProps)(mergedProps);
59
+ const axis = orientation === "vertical" ? "y" : "x";
60
+ const validChildren = (0, import_utils.getValidChildren)(children);
61
+ const defaultValues = (0, import_react.useMemo)(() => {
62
+ const values2 = validChildren.map(({ props: props2 }) => props2.label);
63
+ const duplicatedValues = pickDuplicated(values2);
64
+ if (duplicatedValues.length)
65
+ console.warn(
66
+ `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
67
+ `', '`
68
+ )}' `
69
+ );
70
+ return omitDuplicated(values2);
71
+ }, [validChildren]);
72
+ const [values, setValues] = (0, import_react.useState)(defaultValues);
73
+ const onReorder = (0, import_react.useCallback)(
74
+ (newValues) => {
75
+ setValues(newValues);
76
+ onChange == null ? void 0 : onChange(newValues);
77
+ },
78
+ [onChange]
79
+ );
80
+ (0, import_utils.useUpdateEffect)(() => {
81
+ const isDone = defaultValues.every(
82
+ (defaultValue) => values.includes(defaultValue)
68
83
  );
69
- return omitDuplicated(values2);
70
- }, [validChildren]);
71
- const [values, setValues] = (0, import_react.useState)(defaultValues);
72
- const onReorder = (0, import_react.useCallback)(
73
- (newValues) => {
74
- setValues(newValues);
75
- onChange == null ? void 0 : onChange(newValues);
76
- },
77
- [onChange]
78
- );
79
- (0, import_utils.useUpdateEffect)(() => {
80
- const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
81
- if (isDone)
82
- return;
83
- setValues(defaultValues);
84
- }, [defaultValues]);
85
- const cloneChildren = (0, import_react.useMemo)(
86
- () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
87
- [values, validChildren]
88
- );
89
- const css = {
90
- display: "flex",
91
- flexDirection: orientation === "vertical" ? "column" : "row",
92
- gap,
93
- ...styles.container
94
- };
95
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
96
- import_core.ui.ul,
97
- {
98
- ref,
99
- as: import_motion.MotionReorder.Group,
100
- className: (0, import_utils.cx)("ui-reorder", className),
101
- axis,
102
- values,
103
- onReorder,
104
- __css: css,
105
- ...rest,
106
- onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
107
- onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
108
- children: cloneChildren
109
- }
110
- ) });
111
- });
84
+ if (isDone)
85
+ return;
86
+ setValues(defaultValues);
87
+ }, [defaultValues]);
88
+ const cloneChildren = (0, import_react.useMemo)(
89
+ () => values.map(
90
+ (value) => validChildren.find(({ props: props2 }) => props2.label === value)
91
+ ),
92
+ [values, validChildren]
93
+ );
94
+ const css = {
95
+ display: "flex",
96
+ flexDirection: orientation === "vertical" ? "column" : "row",
97
+ gap,
98
+ ...styles.container
99
+ };
100
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
101
+ import_core.ui.ul,
102
+ {
103
+ ref,
104
+ as: import_motion.MotionReorder.Group,
105
+ className: (0, import_utils.cx)("ui-reorder", className),
106
+ axis,
107
+ values,
108
+ onReorder,
109
+ __css: css,
110
+ ...rest,
111
+ onMouseUp: (0, import_utils.handlerAll)(
112
+ rest.onMouseUp,
113
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
114
+ ),
115
+ onTouchEnd: (0, import_utils.handlerAll)(
116
+ rest.onTouchEnd,
117
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
118
+ ),
119
+ children: cloneChildren
120
+ }
121
+ ) });
122
+ }
123
+ );
112
124
  Reorder.displayName = "Reorder";
113
125
 
114
126
  // src/reorder-item.tsx
@@ -126,7 +138,10 @@ var ReorderItem = (0, import_react2.forwardRef)(
126
138
  const [isDrag, setIsDrag] = (0, import_react2.useState)(false);
127
139
  const x = (0, import_motion2.useMotionValue)(0);
128
140
  const y = (0, import_motion2.useMotionValue)(0);
129
- const register = (0, import_react2.useCallback)((node) => setHasTrigger(!!node), []);
141
+ const register = (0, import_react2.useCallback)(
142
+ (node) => setHasTrigger(!!node),
143
+ []
144
+ );
130
145
  (0, import_react2.useEffect)(() => {
131
146
  x.onChange((subscription) => {
132
147
  if (orientation === "horizontal")
@@ -144,7 +159,12 @@ var ReorderItem = (0, import_react2.forwardRef)(
144
159
  const css = {
145
160
  ...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
146
161
  ...styles.item,
147
- ...!hasTrigger ? { _selected: { ...(_a = styles.item) == null ? void 0 : _a._selected, cursor: "grabbing" } } : {}
162
+ ...!hasTrigger ? {
163
+ _selected: {
164
+ ...(_a = styles.item) == null ? void 0 : _a._selected,
165
+ cursor: "grabbing"
166
+ }
167
+ } : {}
148
168
  };
149
169
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
150
170
  import_core2.ui.li,
package/dist/reorder-item.mjs CHANGED
@@ -2,8 +2,8 @@ import {
2
2
  ReorderItem,
3
3
  ReorderItemProvider,
4
4
  useReorderItemContext
5
- } from "./chunk-CT62EC32.mjs";
6
- import "./chunk-UF5QTFGJ.mjs";
5
+ } from "./chunk-XFS2BZ5I.mjs";
6
+ import "./chunk-AU63E37R.mjs";
7
7
  export {
8
8
  ReorderItem,
9
9
  ReorderItemProvider,
package/dist/reorder-trigger.js CHANGED
@@ -41,71 +41,83 @@ var omitDuplicated = (values) => Array.from(new Set(values));
41
41
  var pickDuplicated = (values) => values.filter(
42
42
  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
43
43
  );
44
- var Reorder = (0, import_react.forwardRef)((props, ref) => {
45
- const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
46
- const {
47
- className,
48
- orientation = "vertical",
49
- gap = "md",
50
- onChange,
51
- onCompleteChange,
52
- children,
53
- ...rest
54
- } = (0, import_core.omitThemeProps)(mergedProps);
55
- const axis = orientation === "vertical" ? "y" : "x";
56
- const validChildren = (0, import_utils.getValidChildren)(children);
57
- const defaultValues = (0, import_react.useMemo)(() => {
58
- const values2 = validChildren.map(({ props: props2 }) => props2.label);
59
- const duplicatedValues = pickDuplicated(values2);
60
- if (duplicatedValues.length)
61
- console.warn(
62
- `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
63
- `', '`
64
- )}' `
44
+ var Reorder = (0, import_react.forwardRef)(
45
+ (props, ref) => {
46
+ const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
47
+ const {
48
+ className,
49
+ orientation = "vertical",
50
+ gap = "md",
51
+ onChange,
52
+ onCompleteChange,
53
+ children,
54
+ ...rest
55
+ } = (0, import_core.omitThemeProps)(mergedProps);
56
+ const axis = orientation === "vertical" ? "y" : "x";
57
+ const validChildren = (0, import_utils.getValidChildren)(children);
58
+ const defaultValues = (0, import_react.useMemo)(() => {
59
+ const values2 = validChildren.map(({ props: props2 }) => props2.label);
60
+ const duplicatedValues = pickDuplicated(values2);
61
+ if (duplicatedValues.length)
62
+ console.warn(
63
+ `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
64
+ `', '`
65
+ )}' `
66
+ );
67
+ return omitDuplicated(values2);
68
+ }, [validChildren]);
69
+ const [values, setValues] = (0, import_react.useState)(defaultValues);
70
+ const onReorder = (0, import_react.useCallback)(
71
+ (newValues) => {
72
+ setValues(newValues);
73
+ onChange == null ? void 0 : onChange(newValues);
74
+ },
75
+ [onChange]
76
+ );
77
+ (0, import_utils.useUpdateEffect)(() => {
78
+ const isDone = defaultValues.every(
79
+ (defaultValue) => values.includes(defaultValue)
65
80
  );
66
- return omitDuplicated(values2);
67
- }, [validChildren]);
68
- const [values, setValues] = (0, import_react.useState)(defaultValues);
69
- const onReorder = (0, import_react.useCallback)(
70
- (newValues) => {
71
- setValues(newValues);
72
- onChange == null ? void 0 : onChange(newValues);
73
- },
74
- [onChange]
75
- );
76
- (0, import_utils.useUpdateEffect)(() => {
77
- const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
78
- if (isDone)
79
- return;
80
- setValues(defaultValues);
81
- }, [defaultValues]);
82
- const cloneChildren = (0, import_react.useMemo)(
83
- () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
84
- [values, validChildren]
85
- );
86
- const css = {
87
- display: "flex",
88
- flexDirection: orientation === "vertical" ? "column" : "row",
89
- gap,
90
- ...styles.container
91
- };
92
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
93
- import_core.ui.ul,
94
- {
95
- ref,
96
- as: import_motion.MotionReorder.Group,
97
- className: (0, import_utils.cx)("ui-reorder", className),
98
- axis,
99
- values,
100
- onReorder,
101
- __css: css,
102
- ...rest,
103
- onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
104
- onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
105
- children: cloneChildren
106
- }
107
- ) });
108
- });
81
+ if (isDone)
82
+ return;
83
+ setValues(defaultValues);
84
+ }, [defaultValues]);
85
+ const cloneChildren = (0, import_react.useMemo)(
86
+ () => values.map(
87
+ (value) => validChildren.find(({ props: props2 }) => props2.label === value)
88
+ ),
89
+ [values, validChildren]
90
+ );
91
+ const css = {
92
+ display: "flex",
93
+ flexDirection: orientation === "vertical" ? "column" : "row",
94
+ gap,
95
+ ...styles.container
96
+ };
97
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
98
+ import_core.ui.ul,
99
+ {
100
+ ref,
101
+ as: import_motion.MotionReorder.Group,
102
+ className: (0, import_utils.cx)("ui-reorder", className),
103
+ axis,
104
+ values,
105
+ onReorder,
106
+ __css: css,
107
+ ...rest,
108
+ onMouseUp: (0, import_utils.handlerAll)(
109
+ rest.onMouseUp,
110
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
111
+ ),
112
+ onTouchEnd: (0, import_utils.handlerAll)(
113
+ rest.onTouchEnd,
114
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
115
+ ),
116
+ children: cloneChildren
117
+ }
118
+ ) });
119
+ }
120
+ );
109
121
  Reorder.displayName = "Reorder";
110
122
 
111
123
  // src/reorder-item.tsx
@@ -127,7 +139,10 @@ var ReorderItem = (0, import_react2.forwardRef)(
127
139
  const [isDrag, setIsDrag] = (0, import_react2.useState)(false);
128
140
  const x = (0, import_motion2.useMotionValue)(0);
129
141
  const y = (0, import_motion2.useMotionValue)(0);
130
- const register = (0, import_react2.useCallback)((node) => setHasTrigger(!!node), []);
142
+ const register = (0, import_react2.useCallback)(
143
+ (node) => setHasTrigger(!!node),
144
+ []
145
+ );
131
146
  (0, import_react2.useEffect)(() => {
132
147
  x.onChange((subscription) => {
133
148
  if (orientation === "horizontal")
@@ -145,7 +160,12 @@ var ReorderItem = (0, import_react2.forwardRef)(
145
160
  const css = {
146
161
  ...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
147
162
  ...styles.item,
148
- ...!hasTrigger ? { _selected: { ...(_a = styles.item) == null ? void 0 : _a._selected, cursor: "grabbing" } } : {}
163
+ ...!hasTrigger ? {
164
+ _selected: {
165
+ ...(_a = styles.item) == null ? void 0 : _a._selected,
166
+ cursor: "grabbing"
167
+ }
168
+ } : {}
149
169
  };
150
170
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
151
171
  import_core2.ui.li,
@@ -190,7 +210,10 @@ var ReorderTrigger = (0, import_core3.forwardRef)(
190
210
  __css: css,
191
211
  ...rest,
192
212
  "data-selected": (0, import_utils3.dataAttr)(isDrag),
193
- onPointerDown: (0, import_utils3.handlerAll)(rest.onPointerDown, (ev) => dragControls.start(ev)),
213
+ onPointerDown: (0, import_utils3.handlerAll)(
214
+ rest.onPointerDown,
215
+ (ev) => dragControls.start(ev)
216
+ ),
194
217
  children
195
218
  }
196
219
  );
package/dist/reorder-trigger.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  ReorderTrigger
3
- } from "./chunk-2ILVWNCS.mjs";
4
- import "./chunk-CT62EC32.mjs";
5
- import "./chunk-UF5QTFGJ.mjs";
3
+ } from "./chunk-Z4TPMUFM.mjs";
4
+ import "./chunk-XFS2BZ5I.mjs";
5
+ import "./chunk-AU63E37R.mjs";
6
6
  export {
7
7
  ReorderTrigger
8
8
  };
package/dist/reorder.js CHANGED
@@ -38,71 +38,83 @@ var omitDuplicated = (values) => Array.from(new Set(values));
38
38
  var pickDuplicated = (values) => values.filter(
39
39
  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
40
40
  );
41
- var Reorder = (0, import_react.forwardRef)((props, ref) => {
42
- const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
43
- const {
44
- className,
45
- orientation = "vertical",
46
- gap = "md",
47
- onChange,
48
- onCompleteChange,
49
- children,
50
- ...rest
51
- } = (0, import_core.omitThemeProps)(mergedProps);
52
- const axis = orientation === "vertical" ? "y" : "x";
53
- const validChildren = (0, import_utils.getValidChildren)(children);
54
- const defaultValues = (0, import_react.useMemo)(() => {
55
- const values2 = validChildren.map(({ props: props2 }) => props2.label);
56
- const duplicatedValues = pickDuplicated(values2);
57
- if (duplicatedValues.length)
58
- console.warn(
59
- `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
60
- `', '`
61
- )}' `
41
+ var Reorder = (0, import_react.forwardRef)(
42
+ (props, ref) => {
43
+ const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
44
+ const {
45
+ className,
46
+ orientation = "vertical",
47
+ gap = "md",
48
+ onChange,
49
+ onCompleteChange,
50
+ children,
51
+ ...rest
52
+ } = (0, import_core.omitThemeProps)(mergedProps);
53
+ const axis = orientation === "vertical" ? "y" : "x";
54
+ const validChildren = (0, import_utils.getValidChildren)(children);
55
+ const defaultValues = (0, import_react.useMemo)(() => {
56
+ const values2 = validChildren.map(({ props: props2 }) => props2.label);
57
+ const duplicatedValues = pickDuplicated(values2);
58
+ if (duplicatedValues.length)
59
+ console.warn(
60
+ `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
61
+ `', '`
62
+ )}' `
63
+ );
64
+ return omitDuplicated(values2);
65
+ }, [validChildren]);
66
+ const [values, setValues] = (0, import_react.useState)(defaultValues);
67
+ const onReorder = (0, import_react.useCallback)(
68
+ (newValues) => {
69
+ setValues(newValues);
70
+ onChange == null ? void 0 : onChange(newValues);
71
+ },
72
+ [onChange]
73
+ );
74
+ (0, import_utils.useUpdateEffect)(() => {
75
+ const isDone = defaultValues.every(
76
+ (defaultValue) => values.includes(defaultValue)
62
77
  );
63
- return omitDuplicated(values2);
64
- }, [validChildren]);
65
- const [values, setValues] = (0, import_react.useState)(defaultValues);
66
- const onReorder = (0, import_react.useCallback)(
67
- (newValues) => {
68
- setValues(newValues);
69
- onChange == null ? void 0 : onChange(newValues);
70
- },
71
- [onChange]
72
- );
73
- (0, import_utils.useUpdateEffect)(() => {
74
- const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
75
- if (isDone)
76
- return;
77
- setValues(defaultValues);
78
- }, [defaultValues]);
79
- const cloneChildren = (0, import_react.useMemo)(
80
- () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
81
- [values, validChildren]
82
- );
83
- const css = {
84
- display: "flex",
85
- flexDirection: orientation === "vertical" ? "column" : "row",
86
- gap,
87
- ...styles.container
88
- };
89
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
90
- import_core.ui.ul,
91
- {
92
- ref,
93
- as: import_motion.MotionReorder.Group,
94
- className: (0, import_utils.cx)("ui-reorder", className),
95
- axis,
96
- values,
97
- onReorder,
98
- __css: css,
99
- ...rest,
100
- onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
101
- onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
102
- children: cloneChildren
103
- }
104
- ) });
105
- });
78
+ if (isDone)
79
+ return;
80
+ setValues(defaultValues);
81
+ }, [defaultValues]);
82
+ const cloneChildren = (0, import_react.useMemo)(
83
+ () => values.map(
84
+ (value) => validChildren.find(({ props: props2 }) => props2.label === value)
85
+ ),
86
+ [values, validChildren]
87
+ );
88
+ const css = {
89
+ display: "flex",
90
+ flexDirection: orientation === "vertical" ? "column" : "row",
91
+ gap,
92
+ ...styles.container
93
+ };
94
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
95
+ import_core.ui.ul,
96
+ {
97
+ ref,
98
+ as: import_motion.MotionReorder.Group,
99
+ className: (0, import_utils.cx)("ui-reorder", className),
100
+ axis,
101
+ values,
102
+ onReorder,
103
+ __css: css,
104
+ ...rest,
105
+ onMouseUp: (0, import_utils.handlerAll)(
106
+ rest.onMouseUp,
107
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
108
+ ),
109
+ onTouchEnd: (0, import_utils.handlerAll)(
110
+ rest.onTouchEnd,
111
+ () => onCompleteChange == null ? void 0 : onCompleteChange(values)
112
+ ),
113
+ children: cloneChildren
114
+ }
115
+ ) });
116
+ }
117
+ );
106
118
  Reorder.displayName = "Reorder";
107
119
  // Annotate the CommonJS export names for ESM import in node:
108
120
  0 && (module.exports = {
package/dist/reorder.mjs CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  Reorder,
3
3
  ReorderProvider,
4
4
  useReorderContext
5
- } from "./chunk-UF5QTFGJ.mjs";
5
+ } from "./chunk-AU63E37R.mjs";
6
6
  export {
7
7
  Reorder,
8
8
  ReorderProvider,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/reorder",
3
- "version": "0.2.6",
3
+ "version": "0.2.8",
4
4
  "description": "Yamada UI reorder component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -35,10 +35,10 @@
35
35
  "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
36
36
  },
37
37
  "dependencies": {
38
- "@yamada-ui/core": "0.5.0",
39
- "@yamada-ui/utils": "0.1.3",
40
- "@yamada-ui/motion": "0.3.3",
41
- "@yamada-ui/icon": "0.2.5"
38
+ "@yamada-ui/core": "0.5.2",
39
+ "@yamada-ui/utils": "0.1.4",
40
+ "@yamada-ui/motion": "0.3.5",
41
+ "@yamada-ui/icon": "0.2.7"
42
42
  },
43
43
  "devDependencies": {
44
44
  "react": "^18.0.0",
package/dist/chunk-UF5QTFGJ.mjs DELETED
@@ -1,90 +0,0 @@
1
- // src/reorder.tsx
2
- import {
3
- ui,
4
- useMultiComponentStyle,
5
- omitThemeProps
6
- } from "@yamada-ui/core";
7
- import { MotionReorder } from "@yamada-ui/motion";
8
- import { createContext, cx, getValidChildren, handlerAll, useUpdateEffect } from "@yamada-ui/utils";
9
- import { forwardRef, useCallback, useMemo, useState } from "react";
10
- import { jsx } from "react/jsx-runtime";
11
- var [ReorderProvider, useReorderContext] = createContext({
12
- name: "ReorderContext",
13
- errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
14
- });
15
- var omitDuplicated = (values) => Array.from(new Set(values));
16
- var pickDuplicated = (values) => values.filter(
17
- (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
18
- );
19
- var Reorder = forwardRef((props, ref) => {
20
- const [styles, mergedProps] = useMultiComponentStyle("Reorder", props);
21
- const {
22
- className,
23
- orientation = "vertical",
24
- gap = "md",
25
- onChange,
26
- onCompleteChange,
27
- children,
28
- ...rest
29
- } = omitThemeProps(mergedProps);
30
- const axis = orientation === "vertical" ? "y" : "x";
31
- const validChildren = getValidChildren(children);
32
- const defaultValues = useMemo(() => {
33
- const values2 = validChildren.map(({ props: props2 }) => props2.label);
34
- const duplicatedValues = pickDuplicated(values2);
35
- if (duplicatedValues.length)
36
- console.warn(
37
- `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
38
- `', '`
39
- )}' `
40
- );
41
- return omitDuplicated(values2);
42
- }, [validChildren]);
43
- const [values, setValues] = useState(defaultValues);
44
- const onReorder = useCallback(
45
- (newValues) => {
46
- setValues(newValues);
47
- onChange == null ? void 0 : onChange(newValues);
48
- },
49
- [onChange]
50
- );
51
- useUpdateEffect(() => {
52
- const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
53
- if (isDone)
54
- return;
55
- setValues(defaultValues);
56
- }, [defaultValues]);
57
- const cloneChildren = useMemo(
58
- () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
59
- [values, validChildren]
60
- );
61
- const css = {
62
- display: "flex",
63
- flexDirection: orientation === "vertical" ? "column" : "row",
64
- gap,
65
- ...styles.container
66
- };
67
- return /* @__PURE__ */ jsx(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ jsx(
68
- ui.ul,
69
- {
70
- ref,
71
- as: MotionReorder.Group,
72
- className: cx("ui-reorder", className),
73
- axis,
74
- values,
75
- onReorder,
76
- __css: css,
77
- ...rest,
78
- onMouseUp: handlerAll(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
79
- onTouchEnd: handlerAll(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
80
- children: cloneChildren
81
- }
82
- ) });
83
- });
84
- Reorder.displayName = "Reorder";
85
-
86
- export {
87
- ReorderProvider,
88
- useReorderContext,
89
- Reorder
90
- };