@yamada-ui/reorder 2.0.9 → 2.0.10-dev-20240917033401
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.
- package/dist/chunk-BBGHU5EB.mjs +20 -0
- package/dist/chunk-BBGHU5EB.mjs.map +1 -0
- package/dist/{chunk-RFRSMH24.mjs → chunk-PMOLBS6N.mjs} +2 -2
- package/dist/chunk-PMOLBS6N.mjs.map +1 -0
- package/dist/{chunk-LKWVADXG.mjs → chunk-XB6JNHWY.mjs} +8 -86
- package/dist/chunk-XB6JNHWY.mjs.map +1 -0
- package/dist/chunk-XQS37PRX.mjs +78 -0
- package/dist/chunk-XQS37PRX.mjs.map +1 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +26 -23
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -3
- package/dist/reorder-context.d.mts +21 -0
- package/dist/reorder-context.d.ts +21 -0
- package/dist/reorder-context.js +46 -0
- package/dist/reorder-context.js.map +1 -0
- package/dist/reorder-context.mjs +14 -0
- package/dist/reorder-context.mjs.map +1 -0
- package/dist/reorder-item.d.mts +8 -17
- package/dist/reorder-item.d.ts +8 -17
- package/dist/reorder-item.js +21 -119
- package/dist/reorder-item.js.map +1 -1
- package/dist/reorder-item.mjs +4 -7
- package/dist/reorder-trigger.d.mts +2 -1
- package/dist/reorder-trigger.d.ts +2 -1
- package/dist/reorder-trigger.js +25 -185
- package/dist/reorder-trigger.js.map +1 -1
- package/dist/reorder-trigger.mjs +2 -2
- package/dist/reorder.d.mts +8 -16
- package/dist/reorder.d.ts +8 -16
- package/dist/reorder.js +23 -24
- package/dist/reorder.js.map +1 -1
- package/dist/reorder.mjs +5 -7
- package/package.json +5 -5
- package/dist/chunk-LKWVADXG.mjs.map +0 -1
- package/dist/chunk-RFRSMH24.mjs.map +0 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
// src/reorder-context.ts
|
|
4
|
+
import { createContext } from "@yamada-ui/utils";
|
|
5
|
+
var [ReorderProvider, useReorderContext] = createContext({
|
|
6
|
+
name: "ReorderContext",
|
|
7
|
+
errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
|
|
8
|
+
});
|
|
9
|
+
var [ReorderItemProvider, useReorderItemContext] = createContext({
|
|
10
|
+
name: "ReorderContext",
|
|
11
|
+
errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export {
|
|
15
|
+
ReorderProvider,
|
|
16
|
+
useReorderContext,
|
|
17
|
+
ReorderItemProvider,
|
|
18
|
+
useReorderItemContext
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=chunk-BBGHU5EB.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/reorder-context.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n orientation: \"vertical\" | \"horizontal\"\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n register: (node: HTMLElement | null) => void\n isDrag: boolean\n dragControls: DragControls\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n"],"mappings":";;;AAEA,SAAS,qBAAqB;AAOvB,IAAM,CAAC,iBAAiB,iBAAiB,IAC9C,cAA8B;AAAA,EAC5B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQI,IAAM,CAAC,qBAAqB,qBAAqB,IACtD,cAAkC;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;","names":[]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import {
|
|
3
3
|
useReorderContext,
|
|
4
4
|
useReorderItemContext
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-BBGHU5EB.mjs";
|
|
6
6
|
|
|
7
7
|
// src/reorder-trigger.tsx
|
|
8
8
|
import { ui, forwardRef } from "@yamada-ui/core";
|
|
@@ -111,4 +111,4 @@ var ReorderTriggerIcon = (rest) => {
|
|
|
111
111
|
export {
|
|
112
112
|
ReorderTrigger
|
|
113
113
|
};
|
|
114
|
-
//# sourceMappingURL=chunk-
|
|
114
|
+
//# sourceMappingURL=chunk-PMOLBS6N.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/reorder-trigger.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, handlerAll, mergeRefs, dataAttr } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\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 { register, isDrag, dragControls } = useReorderItemContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n cursor: \"grab\",\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":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAE/B,SAAS,YAAY;AACrB,SAAS,IAAI,YAAY,WAAW,gBAAgB;AAOzB,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,UAAU,QAAQ,aAAa,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,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":[]}
|
|
@@ -1,20 +1,15 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
|
|
3
|
-
// src/reorder-item.tsx
|
|
4
|
-
import { ui as ui2 } from "@yamada-ui/core";
|
|
5
2
|
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect, useState as useState2 } from "react";
|
|
3
|
+
ReorderItem
|
|
4
|
+
} from "./chunk-XQS37PRX.mjs";
|
|
5
|
+
import {
|
|
6
|
+
ReorderProvider
|
|
7
|
+
} from "./chunk-BBGHU5EB.mjs";
|
|
12
8
|
|
|
13
9
|
// src/reorder.tsx
|
|
14
|
-
import { ui,
|
|
10
|
+
import { ui, useComponentMultiStyle, omitThemeProps } from "@yamada-ui/core";
|
|
15
11
|
import { MotionReorder } from "@yamada-ui/motion";
|
|
16
12
|
import {
|
|
17
|
-
createContext,
|
|
18
13
|
cx,
|
|
19
14
|
getValidChildren,
|
|
20
15
|
handlerAll,
|
|
@@ -22,17 +17,13 @@ import {
|
|
|
22
17
|
} from "@yamada-ui/utils";
|
|
23
18
|
import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
|
|
24
19
|
import { jsx } from "react/jsx-runtime";
|
|
25
|
-
var [ReorderProvider, useReorderContext] = createContext({
|
|
26
|
-
name: "ReorderContext",
|
|
27
|
-
errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
|
|
28
|
-
});
|
|
29
20
|
var omitDuplicated = (values) => Array.from(new Set(values));
|
|
30
21
|
var pickDuplicated = (values) => values.filter(
|
|
31
22
|
(value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
|
|
32
23
|
);
|
|
33
24
|
var Reorder = forwardRef(
|
|
34
25
|
(props, ref) => {
|
|
35
|
-
const [styles, mergedProps] =
|
|
26
|
+
const [styles, mergedProps] = useComponentMultiStyle("Reorder", props);
|
|
36
27
|
const {
|
|
37
28
|
className,
|
|
38
29
|
orientation = "vertical",
|
|
@@ -117,76 +108,7 @@ var Reorder = forwardRef(
|
|
|
117
108
|
);
|
|
118
109
|
Reorder.displayName = "Reorder";
|
|
119
110
|
|
|
120
|
-
// src/reorder-item.tsx
|
|
121
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
122
|
-
var [ReorderItemProvider, useReorderItemContext] = createContext2({
|
|
123
|
-
name: "ReorderContext",
|
|
124
|
-
errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
|
|
125
|
-
});
|
|
126
|
-
var ReorderItem = forwardRef2(
|
|
127
|
-
({ className, label, value, children, ...rest }, ref) => {
|
|
128
|
-
var _a;
|
|
129
|
-
const { orientation, styles } = useReorderContext();
|
|
130
|
-
const dragControls = useDragControls();
|
|
131
|
-
const [hasTrigger, setHasTrigger] = useState2(false);
|
|
132
|
-
const [isDrag, setIsDrag] = useState2(false);
|
|
133
|
-
const x = useMotionValue(0);
|
|
134
|
-
const y = useMotionValue(0);
|
|
135
|
-
const register = useCallback2(
|
|
136
|
-
(node) => setHasTrigger(!!node),
|
|
137
|
-
[]
|
|
138
|
-
);
|
|
139
|
-
useEffect(() => {
|
|
140
|
-
const unsubscribeX = x.on("change", (x2) => {
|
|
141
|
-
if (orientation === "horizontal") setIsDrag(x2 !== 0);
|
|
142
|
-
});
|
|
143
|
-
const unsubscribeY = y.on("change", (y2) => {
|
|
144
|
-
if (orientation === "vertical") setIsDrag(y2 !== 0);
|
|
145
|
-
});
|
|
146
|
-
return () => {
|
|
147
|
-
unsubscribeX();
|
|
148
|
-
unsubscribeY();
|
|
149
|
-
};
|
|
150
|
-
}, [orientation, x, y]);
|
|
151
|
-
const css = {
|
|
152
|
-
_selected: {
|
|
153
|
-
cursor: "grabbing"
|
|
154
|
-
},
|
|
155
|
-
...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
|
|
156
|
-
...styles.item,
|
|
157
|
-
...!hasTrigger ? {
|
|
158
|
-
_selected: {
|
|
159
|
-
...(_a = styles.item) == null ? void 0 : _a._selected,
|
|
160
|
-
cursor: "grabbing"
|
|
161
|
-
}
|
|
162
|
-
} : {}
|
|
163
|
-
};
|
|
164
|
-
return /* @__PURE__ */ jsx2(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ jsx2(
|
|
165
|
-
ui2.li,
|
|
166
|
-
{
|
|
167
|
-
ref,
|
|
168
|
-
as: MotionReorder2.Item,
|
|
169
|
-
className: cx2("ui-reorder__item", className),
|
|
170
|
-
value,
|
|
171
|
-
__css: css,
|
|
172
|
-
...rest,
|
|
173
|
-
dragListener: !hasTrigger,
|
|
174
|
-
dragControls,
|
|
175
|
-
"data-selected": dataAttr(isDrag),
|
|
176
|
-
style: { ...rest.style, x, y },
|
|
177
|
-
children: children != null ? children : label
|
|
178
|
-
}
|
|
179
|
-
) });
|
|
180
|
-
}
|
|
181
|
-
);
|
|
182
|
-
ReorderItem.displayName = "ReorderItem";
|
|
183
|
-
|
|
184
111
|
export {
|
|
185
|
-
ReorderItemProvider,
|
|
186
|
-
useReorderItemContext,
|
|
187
|
-
ReorderItem,
|
|
188
|
-
ReorderProvider,
|
|
189
|
-
useReorderContext,
|
|
190
112
|
Reorder
|
|
191
113
|
};
|
|
192
|
-
//# sourceMappingURL=chunk-
|
|
114
|
+
//# sourceMappingURL=chunk-XB6JNHWY.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/reorder.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n ComponentArgs,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport { ui, useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren, RefAttributes } from \"react\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\nimport type { ReorderItemProps } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y extends any = string> = ReorderItemProps<Y>\n\nconst omitDuplicated = <Y extends any = string>(values: Y[]): Y[] =>\n Array.from(new Set(values))\n\nconst pickDuplicated = <Y extends any = string>(values: Y[]): Y[] =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y extends any = string> {\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport interface ReorderProps<Y extends any = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"onChange\" | \"transition\" | \"children\"\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 <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 orientation = \"vertical\",\n gap = \"fallback(4, 1rem)\",\n items = [],\n onChange,\n onCompleteChange,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y = string>(\n props: ReorderProps<Y> & RefAttributes<HTMLUListElement>,\n ): JSX.Element\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\n"],"mappings":"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","names":["values","props"]}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import {
|
|
3
|
+
ReorderItemProvider,
|
|
4
|
+
useReorderContext
|
|
5
|
+
} from "./chunk-BBGHU5EB.mjs";
|
|
6
|
+
|
|
7
|
+
// src/reorder-item.tsx
|
|
8
|
+
import { ui } from "@yamada-ui/core";
|
|
9
|
+
import {
|
|
10
|
+
MotionReorder,
|
|
11
|
+
useMotionValue,
|
|
12
|
+
useDragControls
|
|
13
|
+
} from "@yamada-ui/motion";
|
|
14
|
+
import { cx, dataAttr } from "@yamada-ui/utils";
|
|
15
|
+
import { forwardRef, useCallback, useEffect, useState } from "react";
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
var ReorderItem = forwardRef(
|
|
18
|
+
({ className, label, value, children, ...rest }, ref) => {
|
|
19
|
+
var _a;
|
|
20
|
+
const { orientation, styles } = useReorderContext();
|
|
21
|
+
const dragControls = useDragControls();
|
|
22
|
+
const [hasTrigger, setHasTrigger] = useState(false);
|
|
23
|
+
const [isDrag, setIsDrag] = useState(false);
|
|
24
|
+
const x = useMotionValue(0);
|
|
25
|
+
const y = useMotionValue(0);
|
|
26
|
+
const register = useCallback(
|
|
27
|
+
(node) => setHasTrigger(!!node),
|
|
28
|
+
[]
|
|
29
|
+
);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
const unsubscribeX = x.on("change", (x2) => {
|
|
32
|
+
if (orientation === "horizontal") setIsDrag(x2 !== 0);
|
|
33
|
+
});
|
|
34
|
+
const unsubscribeY = y.on("change", (y2) => {
|
|
35
|
+
if (orientation === "vertical") setIsDrag(y2 !== 0);
|
|
36
|
+
});
|
|
37
|
+
return () => {
|
|
38
|
+
unsubscribeX();
|
|
39
|
+
unsubscribeY();
|
|
40
|
+
};
|
|
41
|
+
}, [orientation, x, y]);
|
|
42
|
+
const css = {
|
|
43
|
+
_selected: {
|
|
44
|
+
cursor: "grabbing"
|
|
45
|
+
},
|
|
46
|
+
...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
|
|
47
|
+
...styles.item,
|
|
48
|
+
...!hasTrigger ? {
|
|
49
|
+
_selected: {
|
|
50
|
+
...(_a = styles.item) == null ? void 0 : _a._selected,
|
|
51
|
+
cursor: "grabbing"
|
|
52
|
+
}
|
|
53
|
+
} : {}
|
|
54
|
+
};
|
|
55
|
+
return /* @__PURE__ */ jsx(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ jsx(
|
|
56
|
+
ui.li,
|
|
57
|
+
{
|
|
58
|
+
ref,
|
|
59
|
+
as: MotionReorder.Item,
|
|
60
|
+
className: cx("ui-reorder__item", className),
|
|
61
|
+
value,
|
|
62
|
+
__css: css,
|
|
63
|
+
...rest,
|
|
64
|
+
dragListener: !hasTrigger,
|
|
65
|
+
dragControls,
|
|
66
|
+
"data-selected": dataAttr(isDrag),
|
|
67
|
+
style: { ...rest.style, x, y },
|
|
68
|
+
children: children != null ? children : label
|
|
69
|
+
}
|
|
70
|
+
) });
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
ReorderItem.displayName = "ReorderItem";
|
|
74
|
+
|
|
75
|
+
export {
|
|
76
|
+
ReorderItem
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=chunk-XQS37PRX.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/reorder-item.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject, ComponentArgs } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport {\n MotionReorder,\n useMotionValue,\n useDragControls,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y extends any = string> {\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n /**\n * The value of the reorder item.\n */\n value: Y\n}\n\nexport interface ReorderItemProps<Y extends any = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"value\" | \"transition\" | \"children\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n <Y extends any = string>(\n { className, label, value, children, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ register, isDrag, dragControls }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n dragListener={!hasTrigger}\n dragControls={dragControls}\n data-selected={dataAttr(isDrag)}\n style={{ ...rest.style, x, y }}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: ReorderItemProps<Y> & RefAttributes<HTMLLIElement>,\n ): JSX.Element\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n"],"mappings":";;;;;;;AACA,SAAS,UAAU;AAEnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,IAAI,gBAAgB;AAQ7B,SAAS,YAAY,aAAa,WAAW,gBAAgB;AA0ErD;AApDD,IAAM,cAAc;AAAA,EACzB,CACE,EAAE,WAAW,OAAO,OAAO,UAAU,GAAG,KAAK,GAC7C,QACG;AA1CP;AA2CI,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,UAAU,QAAQ,aAAa,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,cAAc,CAAC;AAAA,QACf;AAAA,QACA,iBAAe,SAAS,MAAM;AAAA,QAC9B,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAE5B,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;","names":["x","y"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { Reorder, ReorderGenerateItem, ReorderProps } from './reorder.mjs';
|
|
2
2
|
export { ReorderItem, ReorderItemProps } from './reorder-item.mjs';
|
|
3
3
|
export { ReorderTrigger, ReorderTriggerProps } from './reorder-trigger.mjs';
|
|
4
|
-
import 'react';
|
|
5
4
|
import '@yamada-ui/core';
|
|
6
5
|
import '@yamada-ui/motion';
|
|
7
6
|
import '@yamada-ui/utils';
|
|
7
|
+
import 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { Reorder, ReorderGenerateItem, ReorderProps } from './reorder.js';
|
|
2
2
|
export { ReorderItem, ReorderItemProps } from './reorder-item.js';
|
|
3
3
|
export { ReorderTrigger, ReorderTriggerProps } from './reorder-trigger.js';
|
|
4
|
-
import 'react';
|
|
5
4
|
import '@yamada-ui/core';
|
|
6
5
|
import '@yamada-ui/motion';
|
|
7
6
|
import '@yamada-ui/utils';
|
|
7
|
+
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -30,19 +30,26 @@ module.exports = __toCommonJS(src_exports);
|
|
|
30
30
|
// src/reorder.tsx
|
|
31
31
|
var import_core2 = require("@yamada-ui/core");
|
|
32
32
|
var import_motion2 = require("@yamada-ui/motion");
|
|
33
|
-
var
|
|
33
|
+
var import_utils3 = require("@yamada-ui/utils");
|
|
34
34
|
var import_react2 = require("react");
|
|
35
35
|
|
|
36
|
-
// src/reorder-
|
|
37
|
-
var import_core = require("@yamada-ui/core");
|
|
38
|
-
var import_motion = require("@yamada-ui/motion");
|
|
36
|
+
// src/reorder-context.ts
|
|
39
37
|
var import_utils = require("@yamada-ui/utils");
|
|
40
|
-
var
|
|
41
|
-
|
|
38
|
+
var [ReorderProvider, useReorderContext] = (0, import_utils.createContext)({
|
|
39
|
+
name: "ReorderContext",
|
|
40
|
+
errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
|
|
41
|
+
});
|
|
42
42
|
var [ReorderItemProvider, useReorderItemContext] = (0, import_utils.createContext)({
|
|
43
43
|
name: "ReorderContext",
|
|
44
44
|
errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
|
|
45
45
|
});
|
|
46
|
+
|
|
47
|
+
// src/reorder-item.tsx
|
|
48
|
+
var import_core = require("@yamada-ui/core");
|
|
49
|
+
var import_motion = require("@yamada-ui/motion");
|
|
50
|
+
var import_utils2 = require("@yamada-ui/utils");
|
|
51
|
+
var import_react = require("react");
|
|
52
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
46
53
|
var ReorderItem = (0, import_react.forwardRef)(
|
|
47
54
|
({ className, label, value, children, ...rest }, ref) => {
|
|
48
55
|
var _a;
|
|
@@ -86,13 +93,13 @@ var ReorderItem = (0, import_react.forwardRef)(
|
|
|
86
93
|
{
|
|
87
94
|
ref,
|
|
88
95
|
as: import_motion.MotionReorder.Item,
|
|
89
|
-
className: (0,
|
|
96
|
+
className: (0, import_utils2.cx)("ui-reorder__item", className),
|
|
90
97
|
value,
|
|
91
98
|
__css: css,
|
|
92
99
|
...rest,
|
|
93
100
|
dragListener: !hasTrigger,
|
|
94
101
|
dragControls,
|
|
95
|
-
"data-selected": (0,
|
|
102
|
+
"data-selected": (0, import_utils2.dataAttr)(isDrag),
|
|
96
103
|
style: { ...rest.style, x, y },
|
|
97
104
|
children: children != null ? children : label
|
|
98
105
|
}
|
|
@@ -103,17 +110,13 @@ ReorderItem.displayName = "ReorderItem";
|
|
|
103
110
|
|
|
104
111
|
// src/reorder.tsx
|
|
105
112
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
106
|
-
var [ReorderProvider, useReorderContext] = (0, import_utils2.createContext)({
|
|
107
|
-
name: "ReorderContext",
|
|
108
|
-
errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
|
|
109
|
-
});
|
|
110
113
|
var omitDuplicated = (values) => Array.from(new Set(values));
|
|
111
114
|
var pickDuplicated = (values) => values.filter(
|
|
112
115
|
(value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
|
|
113
116
|
);
|
|
114
117
|
var Reorder = (0, import_react2.forwardRef)(
|
|
115
118
|
(props, ref) => {
|
|
116
|
-
const [styles, mergedProps] = (0, import_core2.
|
|
119
|
+
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Reorder", props);
|
|
117
120
|
const {
|
|
118
121
|
className,
|
|
119
122
|
orientation = "vertical",
|
|
@@ -125,7 +128,7 @@ var Reorder = (0, import_react2.forwardRef)(
|
|
|
125
128
|
...rest
|
|
126
129
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
|
127
130
|
const axis = orientation === "vertical" ? "y" : "x";
|
|
128
|
-
const validChildren = (0,
|
|
131
|
+
const validChildren = (0, import_utils3.getValidChildren)(children);
|
|
129
132
|
const hasChildren = !!validChildren.length;
|
|
130
133
|
const defaultValues = (0, import_react2.useMemo)(() => {
|
|
131
134
|
const values2 = hasChildren ? validChildren.map(({ props: props2 }) => props2.value) : items.map(({ value }) => value);
|
|
@@ -154,7 +157,7 @@ var Reorder = (0, import_react2.forwardRef)(
|
|
|
154
157
|
prevValues.current = values;
|
|
155
158
|
onCompleteChange == null ? void 0 : onCompleteChange(values);
|
|
156
159
|
}, [onCompleteChange, values]);
|
|
157
|
-
(0,
|
|
160
|
+
(0, import_utils3.useUpdateEffect)(() => {
|
|
158
161
|
const isEqual = JSON.stringify(defaultValues) === JSON.stringify(prevDefaultValues.current);
|
|
159
162
|
if (isEqual) return;
|
|
160
163
|
prevValues.current = defaultValues;
|
|
@@ -183,14 +186,14 @@ var Reorder = (0, import_react2.forwardRef)(
|
|
|
183
186
|
{
|
|
184
187
|
ref,
|
|
185
188
|
as: import_motion2.MotionReorder.Group,
|
|
186
|
-
className: (0,
|
|
189
|
+
className: (0, import_utils3.cx)("ui-reorder", className),
|
|
187
190
|
axis,
|
|
188
191
|
values,
|
|
189
192
|
onReorder,
|
|
190
193
|
__css: css,
|
|
191
194
|
...rest,
|
|
192
|
-
onMouseUp: (0,
|
|
193
|
-
onTouchEnd: (0,
|
|
195
|
+
onMouseUp: (0, import_utils3.handlerAll)(rest.onMouseUp, onCompleteReorder),
|
|
196
|
+
onTouchEnd: (0, import_utils3.handlerAll)(rest.onTouchEnd, onCompleteReorder),
|
|
194
197
|
children: cloneChildren
|
|
195
198
|
}
|
|
196
199
|
) });
|
|
@@ -201,7 +204,7 @@ Reorder.displayName = "Reorder";
|
|
|
201
204
|
// src/reorder-trigger.tsx
|
|
202
205
|
var import_core3 = require("@yamada-ui/core");
|
|
203
206
|
var import_icon = require("@yamada-ui/icon");
|
|
204
|
-
var
|
|
207
|
+
var import_utils4 = require("@yamada-ui/utils");
|
|
205
208
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
206
209
|
var ReorderTrigger = (0, import_core3.forwardRef)(
|
|
207
210
|
({ className, children = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReorderTriggerIcon, {}), ...rest }, ref) => {
|
|
@@ -220,12 +223,12 @@ var ReorderTrigger = (0, import_core3.forwardRef)(
|
|
|
220
223
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
221
224
|
import_core3.ui.div,
|
|
222
225
|
{
|
|
223
|
-
ref: (0,
|
|
224
|
-
className: (0,
|
|
226
|
+
ref: (0, import_utils4.mergeRefs)(register, ref),
|
|
227
|
+
className: (0, import_utils4.cx)("ui-reorder__trigger", className),
|
|
225
228
|
__css: css,
|
|
226
229
|
...rest,
|
|
227
|
-
"data-selected": (0,
|
|
228
|
-
onPointerDown: (0,
|
|
230
|
+
"data-selected": (0, import_utils4.dataAttr)(isDrag),
|
|
231
|
+
onPointerDown: (0, import_utils4.handlerAll)(
|
|
229
232
|
rest.onPointerDown,
|
|
230
233
|
(ev) => dragControls.start(ev)
|
|
231
234
|
),
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/reorder.tsx","../src/reorder-item.tsx","../src/reorder-trigger.tsx"],"sourcesContent":["export { Reorder } from \"./reorder\"\nexport type { ReorderProps, ReorderGenerateItem } 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 CSSUIObject,\n ComponentArgs,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren } from \"react\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderItem, type ReorderItemProps } from \"./reorder-item\"\n\ntype ReorderContext = {\n orientation: \"vertical\" | \"horizontal\"\n styles: Record<string, CSSUIObject>\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\nexport type ReorderGenerateItem<Y extends any = string> = ReorderItemProps<Y>\n\ntype ReorderOptions<Y extends any = string> = {\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport type ReorderProps<Y extends any = string> = Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"onChange\" | \"transition\" | \"children\"\n> &\n PropsWithChildren &\n ThemeProps<\"Reorder\"> &\n ReorderOptions<Y>\n\nconst omitDuplicated = <Y extends any = string>(values: Y[]): Y[] =>\n Array.from(new Set(values))\n\nconst pickDuplicated = <Y extends any = string>(values: Y[]): Y[] =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/data-display/reorder\n */\nexport const Reorder = forwardRef(\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Reorder\", props)\n const {\n className,\n orientation = \"vertical\",\n gap = \"fallback(4, 1rem)\",\n items = [],\n onChange,\n onCompleteChange,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y extends any = string>(\n props: ReorderProps<Y> & { ref?: ForwardedRef<HTMLUListElement> },\n ): JSX.Element\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\n","import type { HTMLUIProps, CSSUIObject, ComponentArgs } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps, DragControls } from \"@yamada-ui/motion\"\nimport {\n MotionReorder,\n useMotionValue,\n useDragControls,\n} from \"@yamada-ui/motion\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren, ReactNode } from \"react\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { useReorderContext } from \"./reorder\"\n\ntype ReorderItemContext = {\n register: (node: HTMLElement | null) => void\n isDrag: boolean\n dragControls: DragControls\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n\ntype ReorderItemOptions<Y extends any = string> = {\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n /**\n * The value of the reorder item.\n */\n value: Y\n}\n\nexport type ReorderItemProps<Y extends any = string> = Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"value\" | \"transition\" | \"children\"\n> &\n PropsWithChildren &\n ReorderItemOptions<Y>\n\nexport const ReorderItem = forwardRef(\n <Y extends any = string>(\n { className, label, value, children, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ register, isDrag, dragControls }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n dragListener={!hasTrigger}\n dragControls={dragControls}\n data-selected={dataAttr(isDrag)}\n style={{ ...rest.style, x, y }}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y extends any = string>(\n props: ReorderItemProps<Y> & { ref?: ForwardedRef<HTMLLIElement> },\n ): JSX.Element\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, handlerAll, mergeRefs, dataAttr } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { useReorderContext } from \"./reorder\"\nimport { useReorderItemContext } from \"./reorder-item\"\n\nexport type ReorderTriggerProps = HTMLUIProps<\"div\">\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { register, isDrag, dragControls } = useReorderItemContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n cursor: \"grab\",\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","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 { ReorderProps, ReorderGenerateItem } 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 CSSUIObject,\n ComponentArgs,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport { ui, useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren, RefAttributes } from \"react\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\nimport type { ReorderItemProps } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y extends any = string> = ReorderItemProps<Y>\n\nconst omitDuplicated = <Y extends any = string>(values: Y[]): Y[] =>\n Array.from(new Set(values))\n\nconst pickDuplicated = <Y extends any = string>(values: Y[]): Y[] =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y extends any = string> {\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport interface ReorderProps<Y extends any = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"onChange\" | \"transition\" | \"children\"\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 <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 orientation = \"vertical\",\n gap = \"fallback(4, 1rem)\",\n items = [],\n onChange,\n onCompleteChange,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y = string>(\n props: ReorderProps<Y> & RefAttributes<HTMLUListElement>,\n ): JSX.Element\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: \"vertical\" | \"horizontal\"\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n register: (node: HTMLElement | null) => void\n isDrag: boolean\n dragControls: DragControls\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n","import type { HTMLUIProps, CSSUIObject, ComponentArgs } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport {\n MotionReorder,\n useMotionValue,\n useDragControls,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y extends any = string> {\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n /**\n * The value of the reorder item.\n */\n value: Y\n}\n\nexport interface ReorderItemProps<Y extends any = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"value\" | \"transition\" | \"children\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n <Y extends any = string>(\n { className, label, value, children, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ register, isDrag, dragControls }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n dragListener={!hasTrigger}\n dragControls={dragControls}\n data-selected={dataAttr(isDrag)}\n style={{ ...rest.style, x, y }}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: ReorderItemProps<Y> & RefAttributes<HTMLLIElement>,\n ): JSX.Element\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, handlerAll, mergeRefs, dataAttr } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\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 { register, isDrag, dragControls } = useReorderItemContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n cursor: \"grab\",\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,IAAAA,eAA2D;AAE3D,IAAAC,iBAA8B;AAE9B,IAAAC,gBAKO;AAEP,IAAAC,gBAAmE;;;ACfnE,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;;;ACxBH,kBAAmB;AAEnB,oBAIO;AACP,IAAAC,gBAA6B;AAQ7B,mBAA6D;AA0ErD;AApDD,IAAM,kBAAc;AAAA,EACzB,CACE,EAAE,WAAW,OAAO,OAAO,UAAU,GAAG,KAAK,GAC7C,QACG;AA1CP;AA2CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,mBAAe,+BAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AAEnD,UAAM,QAAI,8BAAe,CAAC;AAC1B,UAAM,QAAI,8BAAe,CAAC;AAE1B,UAAM,eAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,gCAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,aAAc,WAAUA,OAAM,CAAC;AAAA,MACrD,CAAC;AACD,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,WAAY,WAAUA,OAAM,CAAC;AAAA,MACnD,CAAC;AAED,aAAO,MAAM;AACX,qBAAa;AACb,qBAAa;AAAA,MACf;AAAA,IACF,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;AAEtB,UAAM,MAAmB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAI,CAAC,aAAa,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,OAAO;AAAA,MAC5D,GAAG,OAAO;AAAA,MACV,GAAI,CAAC,aACD;AAAA,QACE,WAAW;AAAA,UACT,IAAG,YAAO,SAAP,mBAAa;AAAA,UAChB,QAAQ;AAAA,QACV;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,WACE,4CAAC,uBAAoB,OAAO,EAAE,UAAU,QAAQ,aAAa,GAC3D;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,4BAAc;AAAA,QAClB,eAAW,kBAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,cAAc,CAAC;AAAA,QACf;AAAA,QACA,qBAAe,wBAAS,MAAM;AAAA,QAC9B,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAE5B,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;;;AFwCC,IAAAC,sBAAA;AAjI3B,IAAM,iBAAiB,CAAyB,WAC9C,MAAM,KAAK,IAAI,IAAI,MAAM,CAAC;AAE5B,IAAM,iBAAiB,CAAyB,WAC9C,OAAO;AAAA,EACL,CAAC,OAAO,OAAO,SACb,KAAK,QAAQ,KAAK,MAAM,SAAS,UAAU,KAAK,YAAY,KAAK;AACrE;AAsCK,IAAM,cAAU;AAAA,EACrB,CACE,OACA,QACG;AACH,UAAM,CAAC,QAAQ,WAAW,QAAI,qCAAuB,WAAW,KAAK;AACrE,UAAM;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd,MAAM;AAAA,MACN,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,QAAI,6BAAe,WAAW;AAE9B,UAAM,OAAO,gBAAgB,aAAa,MAAM;AAEhD,UAAM,oBAAgB,gCAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,UAAM,oBAAgB,uBAAQ,MAAM;AAClC,YAAMC,UAAS,cACX,cAAc,IAAI,CAAC,EAAE,OAAAC,OAAM,MAAMA,OAAM,KAAK,IAC5C,MAAM,IAAI,CAAC,EAAE,MAAM,MAAM,KAAK;AAElC,YAAM,mBAAmB,eAAeD,OAAM;AAE9C,UAAI,iBAAiB;AACnB,gBAAQ;AAAA,UACN,mFAAmF,iBAAiB;AAAA,YAClG;AAAA,UACF,CAAC;AAAA,QACH;AAEF,aAAO,eAAeA,OAAM;AAAA,IAC9B,GAAG,CAAC,aAAa,eAAe,KAAK,CAAC;AACtC,UAAM,wBAAoB,sBAAY,aAAa;AAEnD,UAAM,CAAC,QAAQ,SAAS,QAAI,wBAAc,aAAa;AACvD,UAAM,iBAAa,sBAAY,aAAa;AAE5C,UAAM,gBAAY;AAAA,MAChB,CAAC,cAAmB;AAClB,kBAAU,SAAS;AAEnB,6CAAW;AAAA,MACb;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,wBAAoB,2BAAY,MAAM;AAC1C,YAAM,UACJ,KAAK,UAAU,WAAW,OAAO,MAAM,KAAK,UAAU,MAAM;AAE9D,UAAI,QAAS;AAEb,iBAAW,UAAU;AAErB,2DAAmB;AAAA,IACrB,GAAG,CAAC,kBAAkB,MAAM,CAAC;AAE7B,uCAAgB,MAAM;AACpB,YAAM,UACJ,KAAK,UAAU,aAAa,MAC5B,KAAK,UAAU,kBAAkB,OAAO;AAE1C,UAAI,QAAS;AAEb,iBAAW,UAAU;AACrB,wBAAkB,UAAU;AAE5B,gBAAU,aAAa;AAAA,IACzB,GAAG,CAAC,aAAa,CAAC;AAElB,UAAM,oBAAgB;AAAA,MACpB,MACE,OAAO,IAAI,CAAC,UAAU;AACpB,YAAI,aAAa;AACf,iBAAO,cAAc,KAAK,CAAC,EAAE,OAAAC,OAAM,MAAMA,OAAM,UAAU,KAAK;AAAA,QAChE,OAAO;AACL,gBAAMA,SAAQ,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,KAAK;AAEvD,iBAAOA,SAAQ,6CAAC,eAA+B,GAAGA,UAAjBA,OAAM,KAAkB,IAAK;AAAA,QAChE;AAAA,MACF,CAAC;AAAA,MACH,CAAC,QAAQ,aAAa,eAAe,KAAK;AAAA,IAC5C;AAEA,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,eAAe,gBAAgB,aAAa,WAAW;AAAA,MACvD;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,6CAAC,mBAAgB,OAAO,EAAE,aAAa,OAAO,GAC5C;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,6BAAc;AAAA,QAClB,eAAW,kBAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,eAAW,0BAAW,KAAK,WAAW,iBAAiB;AAAA,QACvD,gBAAY,0BAAW,KAAK,YAAY,iBAAiB;AAAA,QAExD;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAMA,QAAQ,cAAc;;;AG9LtB,IAAAC,eAA+B;AAE/B,kBAAqB;AACrB,IAAAC,gBAAoD;AAOzB,IAAAC,sBAAA;AADpB,IAAM,qBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,6CAAC,sBAAmB,GAAI,GAAG,KAAK,GAAG,QAAQ;AAClE,UAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,UAAM,EAAE,UAAU,QAAQ,aAAa,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;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,8CAAC,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_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,11 +1,14 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ReorderTrigger
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-PMOLBS6N.mjs";
|
|
5
|
+
import {
|
|
6
|
+
Reorder
|
|
7
|
+
} from "./chunk-XB6JNHWY.mjs";
|
|
5
8
|
import {
|
|
6
|
-
Reorder,
|
|
7
9
|
ReorderItem
|
|
8
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-XQS37PRX.mjs";
|
|
11
|
+
import "./chunk-BBGHU5EB.mjs";
|
|
9
12
|
export {
|
|
10
13
|
Reorder,
|
|
11
14
|
ReorderItem,
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { CSSUIObject } from '@yamada-ui/core';
|
|
3
|
+
import { DragControls } from '@yamada-ui/motion';
|
|
4
|
+
|
|
5
|
+
interface ReorderContext {
|
|
6
|
+
orientation: "vertical" | "horizontal";
|
|
7
|
+
styles: {
|
|
8
|
+
[key: string]: CSSUIObject;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
declare const ReorderProvider: react.Provider<ReorderContext>;
|
|
12
|
+
declare const useReorderContext: () => ReorderContext;
|
|
13
|
+
interface ReorderItemContext {
|
|
14
|
+
register: (node: HTMLElement | null) => void;
|
|
15
|
+
isDrag: boolean;
|
|
16
|
+
dragControls: DragControls;
|
|
17
|
+
}
|
|
18
|
+
declare const ReorderItemProvider: react.Provider<ReorderItemContext>;
|
|
19
|
+
declare const useReorderItemContext: () => ReorderItemContext;
|
|
20
|
+
|
|
21
|
+
export { ReorderItemProvider, ReorderProvider, useReorderContext, useReorderItemContext };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { CSSUIObject } from '@yamada-ui/core';
|
|
3
|
+
import { DragControls } from '@yamada-ui/motion';
|
|
4
|
+
|
|
5
|
+
interface ReorderContext {
|
|
6
|
+
orientation: "vertical" | "horizontal";
|
|
7
|
+
styles: {
|
|
8
|
+
[key: string]: CSSUIObject;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
declare const ReorderProvider: react.Provider<ReorderContext>;
|
|
12
|
+
declare const useReorderContext: () => ReorderContext;
|
|
13
|
+
interface ReorderItemContext {
|
|
14
|
+
register: (node: HTMLElement | null) => void;
|
|
15
|
+
isDrag: boolean;
|
|
16
|
+
dragControls: DragControls;
|
|
17
|
+
}
|
|
18
|
+
declare const ReorderItemProvider: react.Provider<ReorderItemContext>;
|
|
19
|
+
declare const useReorderItemContext: () => ReorderItemContext;
|
|
20
|
+
|
|
21
|
+
export { ReorderItemProvider, ReorderProvider, useReorderContext, useReorderItemContext };
|