@yamada-ui/reorder 1.0.26 → 1.1.0-dev-20240522144008
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-JAYSNS4U.mjs → chunk-IIRSXMNK.mjs} +89 -7
- package/dist/chunk-IIRSXMNK.mjs.map +1 -0
- package/dist/{chunk-BWKC63ZO.mjs → chunk-OIE2K4ZX.mjs} +3 -5
- package/dist/{chunk-BWKC63ZO.mjs.map → chunk-OIE2K4ZX.mjs.map} +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +100 -91
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -5
- package/dist/reorder-item.d.mts +1 -1
- package/dist/reorder-item.d.ts +1 -1
- package/dist/reorder-item.js +13 -6
- package/dist/reorder-item.js.map +1 -1
- package/dist/reorder-item.mjs +1 -2
- package/dist/reorder-trigger.js +100 -91
- package/dist/reorder-trigger.js.map +1 -1
- package/dist/reorder-trigger.mjs +2 -3
- package/dist/reorder.d.mts +8 -1
- package/dist/reorder.d.ts +8 -1
- package/dist/reorder.js +100 -25
- package/dist/reorder.js.map +1 -1
- package/dist/reorder.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-JAYSNS4U.mjs.map +0 -1
- package/dist/chunk-TTUCMKAS.mjs +0 -81
- package/dist/chunk-TTUCMKAS.mjs.map +0 -1
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
+
// src/reorder-item.tsx
|
|
4
|
+
import { ui as ui2 } from "@yamada-ui/core";
|
|
5
|
+
import {
|
|
6
|
+
MotionReorder as MotionReorder2,
|
|
7
|
+
useMotionValue,
|
|
8
|
+
useDragControls
|
|
9
|
+
} from "@yamada-ui/motion";
|
|
10
|
+
import { createContext as createContext2, cx as cx2, dataAttr } from "@yamada-ui/utils";
|
|
11
|
+
import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect, useState as useState2 } from "react";
|
|
12
|
+
|
|
3
13
|
// src/reorder.tsx
|
|
4
14
|
import { ui, useMultiComponentStyle, omitThemeProps } from "@yamada-ui/core";
|
|
5
15
|
import { MotionReorder } from "@yamada-ui/motion";
|
|
@@ -27,6 +37,7 @@ var Reorder = forwardRef(
|
|
|
27
37
|
className,
|
|
28
38
|
orientation = "vertical",
|
|
29
39
|
gap = "fallback(4, 1rem)",
|
|
40
|
+
items = [],
|
|
30
41
|
onChange,
|
|
31
42
|
onCompleteChange,
|
|
32
43
|
children,
|
|
@@ -34,8 +45,9 @@ var Reorder = forwardRef(
|
|
|
34
45
|
} = omitThemeProps(mergedProps);
|
|
35
46
|
const axis = orientation === "vertical" ? "y" : "x";
|
|
36
47
|
const validChildren = getValidChildren(children);
|
|
48
|
+
const hasChildren = !!validChildren.length;
|
|
37
49
|
const defaultValues = useMemo(() => {
|
|
38
|
-
const values2 = validChildren.map(({ props: props2 }) => props2.label);
|
|
50
|
+
const values2 = hasChildren ? validChildren.map(({ props: props2 }) => props2.label) : items.map(({ label }) => label);
|
|
39
51
|
const duplicatedValues = pickDuplicated(values2);
|
|
40
52
|
if (duplicatedValues.length)
|
|
41
53
|
console.warn(
|
|
@@ -44,7 +56,7 @@ var Reorder = forwardRef(
|
|
|
44
56
|
)}' `
|
|
45
57
|
);
|
|
46
58
|
return omitDuplicated(values2);
|
|
47
|
-
}, [validChildren]);
|
|
59
|
+
}, [hasChildren, validChildren, items]);
|
|
48
60
|
const prevDefaultValues = useRef(defaultValues);
|
|
49
61
|
const [values, setValues] = useState(defaultValues);
|
|
50
62
|
const prevValues = useRef(defaultValues);
|
|
@@ -71,10 +83,15 @@ var Reorder = forwardRef(
|
|
|
71
83
|
setValues(defaultValues);
|
|
72
84
|
}, [defaultValues]);
|
|
73
85
|
const cloneChildren = useMemo(
|
|
74
|
-
() => values.map(
|
|
75
|
-
(
|
|
76
|
-
|
|
77
|
-
|
|
86
|
+
() => values.map((value) => {
|
|
87
|
+
if (hasChildren) {
|
|
88
|
+
return validChildren.find(({ props: props2 }) => props2.label === value);
|
|
89
|
+
} else {
|
|
90
|
+
const props2 = items.find(({ label }) => label === value);
|
|
91
|
+
return props2 ? /* @__PURE__ */ jsx(ReorderItem, { ...props2 }, props2.label) : null;
|
|
92
|
+
}
|
|
93
|
+
}),
|
|
94
|
+
[values, hasChildren, validChildren, items]
|
|
78
95
|
);
|
|
79
96
|
const css = {
|
|
80
97
|
display: "flex",
|
|
@@ -102,9 +119,74 @@ var Reorder = forwardRef(
|
|
|
102
119
|
);
|
|
103
120
|
Reorder.displayName = "Reorder";
|
|
104
121
|
|
|
122
|
+
// src/reorder-item.tsx
|
|
123
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
124
|
+
var [ReorderItemProvider, useReorderItemContext] = createContext2({
|
|
125
|
+
name: "ReorderContext",
|
|
126
|
+
errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
|
|
127
|
+
});
|
|
128
|
+
var ReorderItem = forwardRef2(
|
|
129
|
+
({ className, label, ...rest }, ref) => {
|
|
130
|
+
var _a;
|
|
131
|
+
const { orientation, styles } = useReorderContext();
|
|
132
|
+
const dragControls = useDragControls();
|
|
133
|
+
const [hasTrigger, setHasTrigger] = useState2(false);
|
|
134
|
+
const [isDrag, setIsDrag] = useState2(false);
|
|
135
|
+
const x = useMotionValue(0);
|
|
136
|
+
const y = useMotionValue(0);
|
|
137
|
+
const register = useCallback2(
|
|
138
|
+
(node) => setHasTrigger(!!node),
|
|
139
|
+
[]
|
|
140
|
+
);
|
|
141
|
+
useEffect(() => {
|
|
142
|
+
const unsubscribeX = x.on("change", (x2) => {
|
|
143
|
+
if (orientation === "horizontal")
|
|
144
|
+
setIsDrag(x2 !== 0);
|
|
145
|
+
});
|
|
146
|
+
const unsubscribeY = y.on("change", (y2) => {
|
|
147
|
+
if (orientation === "vertical")
|
|
148
|
+
setIsDrag(y2 !== 0);
|
|
149
|
+
});
|
|
150
|
+
return () => {
|
|
151
|
+
unsubscribeX();
|
|
152
|
+
unsubscribeY();
|
|
153
|
+
};
|
|
154
|
+
}, [orientation, x, y]);
|
|
155
|
+
const css = {
|
|
156
|
+
...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
|
|
157
|
+
...styles.item,
|
|
158
|
+
...!hasTrigger ? {
|
|
159
|
+
_selected: {
|
|
160
|
+
...(_a = styles.item) == null ? void 0 : _a._selected,
|
|
161
|
+
cursor: "grabbing"
|
|
162
|
+
}
|
|
163
|
+
} : {}
|
|
164
|
+
};
|
|
165
|
+
return /* @__PURE__ */ jsx2(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ jsx2(
|
|
166
|
+
ui2.li,
|
|
167
|
+
{
|
|
168
|
+
ref,
|
|
169
|
+
as: MotionReorder2.Item,
|
|
170
|
+
className: cx2("ui-reorder__item", className),
|
|
171
|
+
value: label,
|
|
172
|
+
__css: css,
|
|
173
|
+
...rest,
|
|
174
|
+
dragListener: !hasTrigger,
|
|
175
|
+
dragControls,
|
|
176
|
+
"data-selected": dataAttr(isDrag),
|
|
177
|
+
style: { ...rest.style, x, y }
|
|
178
|
+
}
|
|
179
|
+
) });
|
|
180
|
+
}
|
|
181
|
+
);
|
|
182
|
+
ReorderItem.displayName = "ReorderItem";
|
|
183
|
+
|
|
105
184
|
export {
|
|
185
|
+
ReorderItemProvider,
|
|
186
|
+
useReorderItemContext,
|
|
187
|
+
ReorderItem,
|
|
106
188
|
ReorderProvider,
|
|
107
189
|
useReorderContext,
|
|
108
190
|
Reorder
|
|
109
191
|
};
|
|
110
|
-
//# sourceMappingURL=chunk-
|
|
192
|
+
//# sourceMappingURL=chunk-IIRSXMNK.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/reorder-item.tsx","../src/reorder.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } 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 { 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 = {\n /**\n * The label of the reorder item.\n */\n label: string | number\n}\n\nexport type ReorderItemProps = Omit<HTMLUIProps<\"li\">, \"as\"> &\n Omit<HTMLMotionProps<\"li\">, \"as\" | \"layout\"> &\n ReorderItemOptions\n\nexport const ReorderItem = forwardRef<HTMLLIElement, ReorderItemProps>(\n ({ className, label, ...rest }, ref) => {\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 ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...(styles.item as any)?._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={label}\n __css={css}\n {...rest}\n // @ts-ignore\n dragListener={!hasTrigger}\n dragControls={dragControls}\n data-selected={dataAttr(isDrag)}\n style={{ ...rest.style, x, y }}\n />\n </ReorderItemProvider>\n )\n },\n)\n\nReorderItem.displayName = \"ReorderItem\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } 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 {\n createContext,\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\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 = ReorderItemProps\n\ntype ReorderOptions = {\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?: (labels: (string | number)[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (labels: (string | number)[]) => void\n}\n\nexport type ReorderProps = Omit<HTMLUIProps<\"ul\">, \"as\" | \"onChange\"> &\n Omit<HTMLMotionProps<\"ul\">, \"as\" | \"onChange\"> &\n ThemeProps<\"Reorder\"> &\n ReorderOptions\n\nconst omitDuplicated = (values: (string | number)[]): (string | number)[] =>\n Array.from(new Set(values))\n\nconst pickDuplicated = (values: (string | number)[]): (string | number)[] =>\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<HTMLUListElement, ReorderProps>(\n (props, ref) => {\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.label)\n : items.map(({ label }) => label)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<(string | number)[]>(defaultValues)\n\n const [values, setValues] = useState<(string | number)[]>(defaultValues)\n const prevValues = useRef<(string | number)[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: (string | number)[]) => {\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.label === value)\n } else {\n const props = items.find(({ label }) => label === value)\n\n return props ? <ReorderItem key={props.label} {...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}\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)\n\nReorder.displayName = \"Reorder\"\n"],"mappings":"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","names":["ui","MotionReorder","createContext","cx","forwardRef","useCallback","useState","values","props","jsx","createContext","forwardRef","useState","useCallback","x","y","ui","MotionReorder","cx"]}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
|
+
useReorderContext,
|
|
3
4
|
useReorderItemContext
|
|
4
|
-
} from "./chunk-
|
|
5
|
-
import {
|
|
6
|
-
useReorderContext
|
|
7
|
-
} from "./chunk-JAYSNS4U.mjs";
|
|
5
|
+
} from "./chunk-IIRSXMNK.mjs";
|
|
8
6
|
|
|
9
7
|
// src/reorder-trigger.tsx
|
|
10
8
|
import { ui, forwardRef } from "@yamada-ui/core";
|
|
@@ -113,4 +111,4 @@ var ReorderTriggerIcon = (rest) => {
|
|
|
113
111
|
export {
|
|
114
112
|
ReorderTrigger
|
|
115
113
|
};
|
|
116
|
-
//# sourceMappingURL=chunk-
|
|
114
|
+
//# sourceMappingURL=chunk-OIE2K4ZX.mjs.map
|
|
@@ -1 +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 } 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":"
|
|
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 } 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":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAE/B,SAAS,YAAY;AACrB,SAAS,IAAI,YAAY,WAAW,gBAAgB;AAQzB,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":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Reorder, ReorderProps } from './reorder.mjs';
|
|
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
4
|
import 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Reorder, ReorderProps } from './reorder.js';
|
|
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
4
|
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -28,12 +28,80 @@ __export(src_exports, {
|
|
|
28
28
|
module.exports = __toCommonJS(src_exports);
|
|
29
29
|
|
|
30
30
|
// src/reorder.tsx
|
|
31
|
+
var import_core2 = require("@yamada-ui/core");
|
|
32
|
+
var import_motion2 = require("@yamada-ui/motion");
|
|
33
|
+
var import_utils2 = require("@yamada-ui/utils");
|
|
34
|
+
var import_react2 = require("react");
|
|
35
|
+
|
|
36
|
+
// src/reorder-item.tsx
|
|
31
37
|
var import_core = require("@yamada-ui/core");
|
|
32
38
|
var import_motion = require("@yamada-ui/motion");
|
|
33
39
|
var import_utils = require("@yamada-ui/utils");
|
|
34
40
|
var import_react = require("react");
|
|
35
41
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var [
|
|
42
|
+
var [ReorderItemProvider, useReorderItemContext] = (0, import_utils.createContext)({
|
|
43
|
+
name: "ReorderContext",
|
|
44
|
+
errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
|
|
45
|
+
});
|
|
46
|
+
var ReorderItem = (0, import_react.forwardRef)(
|
|
47
|
+
({ className, label, ...rest }, ref) => {
|
|
48
|
+
var _a;
|
|
49
|
+
const { orientation, styles } = useReorderContext();
|
|
50
|
+
const dragControls = (0, import_motion.useDragControls)();
|
|
51
|
+
const [hasTrigger, setHasTrigger] = (0, import_react.useState)(false);
|
|
52
|
+
const [isDrag, setIsDrag] = (0, import_react.useState)(false);
|
|
53
|
+
const x = (0, import_motion.useMotionValue)(0);
|
|
54
|
+
const y = (0, import_motion.useMotionValue)(0);
|
|
55
|
+
const register = (0, import_react.useCallback)(
|
|
56
|
+
(node) => setHasTrigger(!!node),
|
|
57
|
+
[]
|
|
58
|
+
);
|
|
59
|
+
(0, import_react.useEffect)(() => {
|
|
60
|
+
const unsubscribeX = x.on("change", (x2) => {
|
|
61
|
+
if (orientation === "horizontal")
|
|
62
|
+
setIsDrag(x2 !== 0);
|
|
63
|
+
});
|
|
64
|
+
const unsubscribeY = y.on("change", (y2) => {
|
|
65
|
+
if (orientation === "vertical")
|
|
66
|
+
setIsDrag(y2 !== 0);
|
|
67
|
+
});
|
|
68
|
+
return () => {
|
|
69
|
+
unsubscribeX();
|
|
70
|
+
unsubscribeY();
|
|
71
|
+
};
|
|
72
|
+
}, [orientation, x, y]);
|
|
73
|
+
const css = {
|
|
74
|
+
...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
|
|
75
|
+
...styles.item,
|
|
76
|
+
...!hasTrigger ? {
|
|
77
|
+
_selected: {
|
|
78
|
+
...(_a = styles.item) == null ? void 0 : _a._selected,
|
|
79
|
+
cursor: "grabbing"
|
|
80
|
+
}
|
|
81
|
+
} : {}
|
|
82
|
+
};
|
|
83
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
84
|
+
import_core.ui.li,
|
|
85
|
+
{
|
|
86
|
+
ref,
|
|
87
|
+
as: import_motion.MotionReorder.Item,
|
|
88
|
+
className: (0, import_utils.cx)("ui-reorder__item", className),
|
|
89
|
+
value: label,
|
|
90
|
+
__css: css,
|
|
91
|
+
...rest,
|
|
92
|
+
dragListener: !hasTrigger,
|
|
93
|
+
dragControls,
|
|
94
|
+
"data-selected": (0, import_utils.dataAttr)(isDrag),
|
|
95
|
+
style: { ...rest.style, x, y }
|
|
96
|
+
}
|
|
97
|
+
) });
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
ReorderItem.displayName = "ReorderItem";
|
|
101
|
+
|
|
102
|
+
// src/reorder.tsx
|
|
103
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
104
|
+
var [ReorderProvider, useReorderContext] = (0, import_utils2.createContext)({
|
|
37
105
|
name: "ReorderContext",
|
|
38
106
|
errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
|
|
39
107
|
});
|
|
@@ -41,22 +109,24 @@ var omitDuplicated = (values) => Array.from(new Set(values));
|
|
|
41
109
|
var pickDuplicated = (values) => values.filter(
|
|
42
110
|
(value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
|
|
43
111
|
);
|
|
44
|
-
var Reorder = (0,
|
|
112
|
+
var Reorder = (0, import_react2.forwardRef)(
|
|
45
113
|
(props, ref) => {
|
|
46
|
-
const [styles, mergedProps] = (0,
|
|
114
|
+
const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Reorder", props);
|
|
47
115
|
const {
|
|
48
116
|
className,
|
|
49
117
|
orientation = "vertical",
|
|
50
118
|
gap = "fallback(4, 1rem)",
|
|
119
|
+
items = [],
|
|
51
120
|
onChange,
|
|
52
121
|
onCompleteChange,
|
|
53
122
|
children,
|
|
54
123
|
...rest
|
|
55
|
-
} = (0,
|
|
124
|
+
} = (0, import_core2.omitThemeProps)(mergedProps);
|
|
56
125
|
const axis = orientation === "vertical" ? "y" : "x";
|
|
57
|
-
const validChildren = (0,
|
|
58
|
-
const
|
|
59
|
-
|
|
126
|
+
const validChildren = (0, import_utils2.getValidChildren)(children);
|
|
127
|
+
const hasChildren = !!validChildren.length;
|
|
128
|
+
const defaultValues = (0, import_react2.useMemo)(() => {
|
|
129
|
+
const values2 = hasChildren ? validChildren.map(({ props: props2 }) => props2.label) : items.map(({ label }) => label);
|
|
60
130
|
const duplicatedValues = pickDuplicated(values2);
|
|
61
131
|
if (duplicatedValues.length)
|
|
62
132
|
console.warn(
|
|
@@ -65,25 +135,25 @@ var Reorder = (0, import_react.forwardRef)(
|
|
|
65
135
|
)}' `
|
|
66
136
|
);
|
|
67
137
|
return omitDuplicated(values2);
|
|
68
|
-
}, [validChildren]);
|
|
69
|
-
const prevDefaultValues = (0,
|
|
70
|
-
const [values, setValues] = (0,
|
|
71
|
-
const prevValues = (0,
|
|
72
|
-
const onReorder = (0,
|
|
138
|
+
}, [hasChildren, validChildren, items]);
|
|
139
|
+
const prevDefaultValues = (0, import_react2.useRef)(defaultValues);
|
|
140
|
+
const [values, setValues] = (0, import_react2.useState)(defaultValues);
|
|
141
|
+
const prevValues = (0, import_react2.useRef)(defaultValues);
|
|
142
|
+
const onReorder = (0, import_react2.useCallback)(
|
|
73
143
|
(newValues) => {
|
|
74
144
|
setValues(newValues);
|
|
75
145
|
onChange == null ? void 0 : onChange(newValues);
|
|
76
146
|
},
|
|
77
147
|
[onChange]
|
|
78
148
|
);
|
|
79
|
-
const onCompleteReorder = (0,
|
|
149
|
+
const onCompleteReorder = (0, import_react2.useCallback)(() => {
|
|
80
150
|
const isEqual = JSON.stringify(prevValues.current) === JSON.stringify(values);
|
|
81
151
|
if (isEqual)
|
|
82
152
|
return;
|
|
83
153
|
prevValues.current = values;
|
|
84
154
|
onCompleteChange == null ? void 0 : onCompleteChange(values);
|
|
85
155
|
}, [onCompleteChange, values]);
|
|
86
|
-
(0,
|
|
156
|
+
(0, import_utils2.useUpdateEffect)(() => {
|
|
87
157
|
const isEqual = JSON.stringify(defaultValues) === JSON.stringify(prevDefaultValues.current);
|
|
88
158
|
if (isEqual)
|
|
89
159
|
return;
|
|
@@ -91,11 +161,16 @@ var Reorder = (0, import_react.forwardRef)(
|
|
|
91
161
|
prevDefaultValues.current = defaultValues;
|
|
92
162
|
setValues(defaultValues);
|
|
93
163
|
}, [defaultValues]);
|
|
94
|
-
const cloneChildren = (0,
|
|
95
|
-
() => values.map(
|
|
96
|
-
(
|
|
97
|
-
|
|
98
|
-
|
|
164
|
+
const cloneChildren = (0, import_react2.useMemo)(
|
|
165
|
+
() => values.map((value) => {
|
|
166
|
+
if (hasChildren) {
|
|
167
|
+
return validChildren.find(({ props: props2 }) => props2.label === value);
|
|
168
|
+
} else {
|
|
169
|
+
const props2 = items.find(({ label }) => label === value);
|
|
170
|
+
return props2 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItem, { ...props2 }, props2.label) : null;
|
|
171
|
+
}
|
|
172
|
+
}),
|
|
173
|
+
[values, hasChildren, validChildren, items]
|
|
99
174
|
);
|
|
100
175
|
const css = {
|
|
101
176
|
display: "flex",
|
|
@@ -103,19 +178,19 @@ var Reorder = (0, import_react.forwardRef)(
|
|
|
103
178
|
gap,
|
|
104
179
|
...styles.container
|
|
105
180
|
};
|
|
106
|
-
return /* @__PURE__ */ (0,
|
|
107
|
-
|
|
181
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
182
|
+
import_core2.ui.ul,
|
|
108
183
|
{
|
|
109
184
|
ref,
|
|
110
|
-
as:
|
|
111
|
-
className: (0,
|
|
185
|
+
as: import_motion2.MotionReorder.Group,
|
|
186
|
+
className: (0, import_utils2.cx)("ui-reorder", className),
|
|
112
187
|
axis,
|
|
113
188
|
values,
|
|
114
189
|
onReorder,
|
|
115
190
|
__css: css,
|
|
116
191
|
...rest,
|
|
117
|
-
onMouseUp: (0,
|
|
118
|
-
onTouchEnd: (0,
|
|
192
|
+
onMouseUp: (0, import_utils2.handlerAll)(rest.onMouseUp, onCompleteReorder),
|
|
193
|
+
onTouchEnd: (0, import_utils2.handlerAll)(rest.onTouchEnd, onCompleteReorder),
|
|
119
194
|
children: cloneChildren
|
|
120
195
|
}
|
|
121
196
|
) });
|
|
@@ -123,72 +198,6 @@ var Reorder = (0, import_react.forwardRef)(
|
|
|
123
198
|
);
|
|
124
199
|
Reorder.displayName = "Reorder";
|
|
125
200
|
|
|
126
|
-
// src/reorder-item.tsx
|
|
127
|
-
var import_core2 = require("@yamada-ui/core");
|
|
128
|
-
var import_motion2 = require("@yamada-ui/motion");
|
|
129
|
-
var import_utils2 = require("@yamada-ui/utils");
|
|
130
|
-
var import_react2 = require("react");
|
|
131
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
132
|
-
var [ReorderItemProvider, useReorderItemContext] = (0, import_utils2.createContext)({
|
|
133
|
-
name: "ReorderContext",
|
|
134
|
-
errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
|
|
135
|
-
});
|
|
136
|
-
var ReorderItem = (0, import_react2.forwardRef)(
|
|
137
|
-
({ className, label, ...rest }, ref) => {
|
|
138
|
-
var _a;
|
|
139
|
-
const { orientation, styles } = useReorderContext();
|
|
140
|
-
const dragControls = (0, import_motion2.useDragControls)();
|
|
141
|
-
const [hasTrigger, setHasTrigger] = (0, import_react2.useState)(false);
|
|
142
|
-
const [isDrag, setIsDrag] = (0, import_react2.useState)(false);
|
|
143
|
-
const x = (0, import_motion2.useMotionValue)(0);
|
|
144
|
-
const y = (0, import_motion2.useMotionValue)(0);
|
|
145
|
-
const register = (0, import_react2.useCallback)(
|
|
146
|
-
(node) => setHasTrigger(!!node),
|
|
147
|
-
[]
|
|
148
|
-
);
|
|
149
|
-
(0, import_react2.useEffect)(() => {
|
|
150
|
-
const unsubscribeX = x.on("change", (x2) => {
|
|
151
|
-
if (orientation === "horizontal")
|
|
152
|
-
setIsDrag(x2 !== 0);
|
|
153
|
-
});
|
|
154
|
-
const unsubscribeY = y.on("change", (y2) => {
|
|
155
|
-
if (orientation === "vertical")
|
|
156
|
-
setIsDrag(y2 !== 0);
|
|
157
|
-
});
|
|
158
|
-
return () => {
|
|
159
|
-
unsubscribeX();
|
|
160
|
-
unsubscribeY();
|
|
161
|
-
};
|
|
162
|
-
}, [orientation, x, y]);
|
|
163
|
-
const css = {
|
|
164
|
-
...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
|
|
165
|
-
...styles.item,
|
|
166
|
-
...!hasTrigger ? {
|
|
167
|
-
_selected: {
|
|
168
|
-
...(_a = styles.item) == null ? void 0 : _a._selected,
|
|
169
|
-
cursor: "grabbing"
|
|
170
|
-
}
|
|
171
|
-
} : {}
|
|
172
|
-
};
|
|
173
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
174
|
-
import_core2.ui.li,
|
|
175
|
-
{
|
|
176
|
-
ref,
|
|
177
|
-
as: import_motion2.MotionReorder.Item,
|
|
178
|
-
className: (0, import_utils2.cx)("ui-reorder__item", className),
|
|
179
|
-
value: label,
|
|
180
|
-
__css: css,
|
|
181
|
-
...rest,
|
|
182
|
-
dragListener: !hasTrigger,
|
|
183
|
-
dragControls,
|
|
184
|
-
"data-selected": (0, import_utils2.dataAttr)(isDrag),
|
|
185
|
-
style: { ...rest.style, x, y }
|
|
186
|
-
}
|
|
187
|
-
) });
|
|
188
|
-
}
|
|
189
|
-
);
|
|
190
|
-
ReorderItem.displayName = "ReorderItem";
|
|
191
|
-
|
|
192
201
|
// src/reorder-trigger.tsx
|
|
193
202
|
var import_core3 = require("@yamada-ui/core");
|
|
194
203
|
var import_icon = require("@yamada-ui/icon");
|
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 } 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 { CSSUIObject, HTMLUIProps, ThemeProps } 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 {\n createContext,\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\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\ntype ReorderOptions = {\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (labels: (string | number)[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (labels: (string | number)[]) => void\n}\n\nexport type ReorderProps = Omit<HTMLUIProps<\"ul\">, \"as\" | \"onChange\"> &\n Omit<HTMLMotionProps<\"ul\">, \"as\" | \"onChange\"> &\n ThemeProps<\"Reorder\"> &\n ReorderOptions\n\nconst omitDuplicated = (values: (string | number)[]): (string | number)[] =>\n Array.from(new Set(values))\n\nconst pickDuplicated = (values: (string | number)[]): (string | number)[] =>\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<HTMLUListElement, ReorderProps>(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Reorder\", props)\n const {\n className,\n orientation = \"vertical\",\n gap = \"fallback(4, 1rem)\",\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\n const defaultValues = useMemo(() => {\n const values = validChildren.map(({ props }) => props.label)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [validChildren])\n const prevDefaultValues = useRef<(string | number)[]>(defaultValues)\n\n const [values, setValues] = useState<(string | number)[]>(defaultValues)\n const prevValues = useRef<(string | number)[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: (string | number)[]) => {\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 validChildren.find(({ props }) => props.label === value),\n ),\n [values, validChildren],\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}\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)\n\nReorder.displayName = \"Reorder\"\n","import type { HTMLUIProps, CSSUIObject } 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 { 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 = {\n /**\n * The label of the reorder item.\n */\n label: string | number\n}\n\nexport type ReorderItemProps = Omit<HTMLUIProps<\"li\">, \"as\"> &\n Omit<HTMLMotionProps<\"li\">, \"as\" | \"layout\"> &\n ReorderItemOptions\n\nexport const ReorderItem = forwardRef<HTMLLIElement, ReorderItemProps>(\n ({ className, label, ...rest }, ref) => {\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 ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...(styles.item as any)?._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={label}\n __css={css}\n {...rest}\n // @ts-ignore\n dragListener={!hasTrigger}\n dragControls={dragControls}\n data-selected={dataAttr(isDrag)}\n style={{ ...rest.style, x, y }}\n />\n </ReorderItemProvider>\n )\n },\n)\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":["values","props","import_core","import_motion","import_utils","import_react","import_jsx_runtime","x","y","import_core","import_utils","import_jsx_runtime"]}
|
|
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 { CSSUIObject, HTMLUIProps, ThemeProps } 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 {\n createContext,\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\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 = ReorderItemProps\n\ntype ReorderOptions = {\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?: (labels: (string | number)[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (labels: (string | number)[]) => void\n}\n\nexport type ReorderProps = Omit<HTMLUIProps<\"ul\">, \"as\" | \"onChange\"> &\n Omit<HTMLMotionProps<\"ul\">, \"as\" | \"onChange\"> &\n ThemeProps<\"Reorder\"> &\n ReorderOptions\n\nconst omitDuplicated = (values: (string | number)[]): (string | number)[] =>\n Array.from(new Set(values))\n\nconst pickDuplicated = (values: (string | number)[]): (string | number)[] =>\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<HTMLUListElement, ReorderProps>(\n (props, ref) => {\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.label)\n : items.map(({ label }) => label)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<(string | number)[]>(defaultValues)\n\n const [values, setValues] = useState<(string | number)[]>(defaultValues)\n const prevValues = useRef<(string | number)[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: (string | number)[]) => {\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.label === value)\n } else {\n const props = items.find(({ label }) => label === value)\n\n return props ? <ReorderItem key={props.label} {...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}\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)\n\nReorder.displayName = \"Reorder\"\n","import type { HTMLUIProps, CSSUIObject } 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 { 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 = {\n /**\n * The label of the reorder item.\n */\n label: string | number\n}\n\nexport type ReorderItemProps = Omit<HTMLUIProps<\"li\">, \"as\"> &\n Omit<HTMLMotionProps<\"li\">, \"as\" | \"layout\"> &\n ReorderItemOptions\n\nexport const ReorderItem = forwardRef<HTMLLIElement, ReorderItemProps>(\n ({ className, label, ...rest }, ref) => {\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 ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...(styles.item as any)?._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={label}\n __css={css}\n {...rest}\n // @ts-ignore\n dragListener={!hasTrigger}\n dragControls={dragControls}\n data-selected={dataAttr(isDrag)}\n style={{ ...rest.style, x, y }}\n />\n </ReorderItemProvider>\n )\n },\n)\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,eAA2D;AAE3D,IAAAC,iBAA8B;AAC9B,IAAAC,gBAMO;AACP,IAAAC,gBAAmE;;;ACVnE,kBAAmB;AAEnB,oBAIO;AACP,mBAA4C;AAC5C,mBAA6D;AAwErD;AA/DD,IAAM,CAAC,qBAAqB,qBAAqB,QACtD,4BAAkC;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAaI,IAAM,kBAAc;AAAA,EACzB,CAAC,EAAE,WAAW,OAAO,GAAG,KAAK,GAAG,QAAQ;AApC1C;AAqCI,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,oBAAUA,OAAM,CAAC;AAAA,MACrD,CAAC;AACD,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB;AAAY,oBAAUA,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,GAAI,CAAC,aAAa,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,OAAO;AAAA,MAC5D,GAAG,OAAO;AAAA,MACV,GAAI,CAAC,aACD;AAAA,QACE,WAAW;AAAA,UACT,IAAI,YAAO,SAAP,mBAAqB;AAAA,UACzB,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,iBAAG,oBAAoB,SAAS;AAAA,QAC3C,OAAO;AAAA,QACP,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ,cAAc,CAAC;AAAA,QACf;AAAA,QACA,qBAAe,uBAAS,MAAM;AAAA,QAC9B,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA;AAAA,IAC/B,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;;ADkDC,IAAAC,sBAAA;AAlIpB,IAAM,CAAC,iBAAiB,iBAAiB,QAC9C,6BAA8B;AAAA,EAC5B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA+BH,IAAM,iBAAiB,CAAC,WACtB,MAAM,KAAK,IAAI,IAAI,MAAM,CAAC;AAE5B,IAAM,iBAAiB,CAAC,WACtB,OAAO;AAAA,EACL,CAAC,OAAO,OAAO,SACb,KAAK,QAAQ,KAAK,MAAM,SAAS,UAAU,KAAK,YAAY,KAAK;AACrE;AAOK,IAAM,cAAU;AAAA,EACrB,CAAC,OAAO,QAAQ;AACd,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,sBAA4B,aAAa;AAEnE,UAAM,CAAC,QAAQ,SAAS,QAAI,wBAA8B,aAAa;AACvE,UAAM,iBAAa,sBAA4B,aAAa;AAE5D,UAAM,gBAAY;AAAA,MAChB,CAAC,cAAmC;AAClC,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;AAAS;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;AAAS;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,EAAE,MAAM,MAAM,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;AAEA,QAAQ,cAAc;;;AEtLtB,IAAAC,eAA+B;AAE/B,kBAAqB;AACrB,IAAAC,gBAAoD;AAQzB,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","x","y","import_jsx_runtime","values","props","import_core","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ReorderTrigger
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-OIE2K4ZX.mjs";
|
|
5
5
|
import {
|
|
6
|
+
Reorder,
|
|
6
7
|
ReorderItem
|
|
7
|
-
} from "./chunk-
|
|
8
|
-
import {
|
|
9
|
-
Reorder
|
|
10
|
-
} from "./chunk-JAYSNS4U.mjs";
|
|
8
|
+
} from "./chunk-IIRSXMNK.mjs";
|
|
11
9
|
export {
|
|
12
10
|
Reorder,
|
|
13
11
|
ReorderItem,
|
package/dist/reorder-item.d.mts
CHANGED
|
@@ -16,6 +16,6 @@ type ReorderItemOptions = {
|
|
|
16
16
|
label: string | number;
|
|
17
17
|
};
|
|
18
18
|
type ReorderItemProps = Omit<HTMLUIProps<"li">, "as"> & Omit<HTMLMotionProps<"li">, "as" | "layout"> & ReorderItemOptions;
|
|
19
|
-
declare const ReorderItem: react.ForwardRefExoticComponent<Omit<HTMLUIProps<"li">, "as"> & Omit<HTMLMotionProps<"li">, "
|
|
19
|
+
declare const ReorderItem: react.ForwardRefExoticComponent<Omit<HTMLUIProps<"li">, "as"> & Omit<HTMLMotionProps<"li">, "as" | "layout"> & ReorderItemOptions & react.RefAttributes<HTMLLIElement>>;
|
|
20
20
|
|
|
21
21
|
export { ReorderItem, type ReorderItemProps, ReorderItemProvider, useReorderItemContext };
|
package/dist/reorder-item.d.ts
CHANGED
|
@@ -16,6 +16,6 @@ type ReorderItemOptions = {
|
|
|
16
16
|
label: string | number;
|
|
17
17
|
};
|
|
18
18
|
type ReorderItemProps = Omit<HTMLUIProps<"li">, "as"> & Omit<HTMLMotionProps<"li">, "as" | "layout"> & ReorderItemOptions;
|
|
19
|
-
declare const ReorderItem: react.ForwardRefExoticComponent<Omit<HTMLUIProps<"li">, "as"> & Omit<HTMLMotionProps<"li">, "
|
|
19
|
+
declare const ReorderItem: react.ForwardRefExoticComponent<Omit<HTMLUIProps<"li">, "as"> & Omit<HTMLMotionProps<"li">, "as" | "layout"> & ReorderItemOptions & react.RefAttributes<HTMLLIElement>>;
|
|
20
20
|
|
|
21
21
|
export { ReorderItem, type ReorderItemProps, ReorderItemProvider, useReorderItemContext };
|