@yamada-ui/reorder 2.0.13 → 2.0.14-dev-20241026234458
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-OWVWVNXS.mjs → chunk-F2THE4WO.mjs} +5 -1
- package/dist/chunk-F2THE4WO.mjs.map +1 -0
- package/dist/{chunk-KJQQDHFK.mjs → chunk-UUWQUHDE.mjs} +2 -1
- package/dist/{chunk-KJQQDHFK.mjs.map → chunk-UUWQUHDE.mjs.map} +1 -1
- package/dist/{chunk-KOC2E47U.mjs → chunk-VR26UAYN.mjs} +3 -2
- package/dist/{chunk-KOC2E47U.mjs.map → chunk-VR26UAYN.mjs.map} +1 -1
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/reorder-item.js +1 -0
- package/dist/reorder-item.js.map +1 -1
- package/dist/reorder-item.mjs +1 -1
- package/dist/reorder-trigger.js +4 -0
- package/dist/reorder-trigger.js.map +1 -1
- package/dist/reorder-trigger.mjs +1 -1
- package/dist/reorder.js +2 -0
- package/dist/reorder.js.map +1 -1
- package/dist/reorder.mjs +2 -2
- package/package.json +1 -1
- package/dist/chunk-OWVWVNXS.mjs.map +0 -1
|
@@ -40,6 +40,8 @@ var ReorderTrigger = forwardRef(
|
|
|
40
40
|
);
|
|
41
41
|
}
|
|
42
42
|
);
|
|
43
|
+
ReorderTrigger.displayName = "ReorderTrigger";
|
|
44
|
+
ReorderTrigger.__ui__ = "ReorderTrigger";
|
|
43
45
|
var ReorderTriggerIcon = (rest) => {
|
|
44
46
|
return /* @__PURE__ */ jsxs(Icon, { viewBox: "0 0 39 39", ...rest, children: [
|
|
45
47
|
/* @__PURE__ */ jsx(
|
|
@@ -107,8 +109,10 @@ var ReorderTriggerIcon = (rest) => {
|
|
|
107
109
|
)
|
|
108
110
|
] });
|
|
109
111
|
};
|
|
112
|
+
ReorderTriggerIcon.displayName = "ReorderTriggerIcon";
|
|
113
|
+
ReorderTriggerIcon.__ui__ = "ReorderTriggerIcon";
|
|
110
114
|
|
|
111
115
|
export {
|
|
112
116
|
ReorderTrigger
|
|
113
117
|
};
|
|
114
|
-
//# sourceMappingURL=chunk-
|
|
118
|
+
//# sourceMappingURL=chunk-F2THE4WO.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/reorder-trigger.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nReorderTrigger.displayName = \"ReorderTrigger\"\nReorderTrigger.__ui__ = \"ReorderTrigger\"\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nReorderTriggerIcon.displayName = \"ReorderTriggerIcon\"\nReorderTriggerIcon.__ui__ = \"ReorderTriggerIcon\"\n"],"mappings":";;;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,YAAY;AACrB,SAAS,IAAI,UAAU,YAAY,iBAAiB;AAMzB,cAqCvB,YArCuB;AADpB,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,oBAAC,sBAAmB,GAAI,GAAG,KAAK,GAAG,QAAQ;AAClE,UAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,UAAM,EAAE,cAAc,QAAQ,SAAS,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,UAAU,GAAG;AAAA,QAC5B,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,iBAAe,SAAS,MAAM;AAAA,QAC9B,eAAe;AAAA,UAAW,KAAK;AAAA,UAAe,CAAC,OAC7C,aAAa,MAAM,EAAE;AAAA,QACvB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAExB,IAAM,qBAAoC,CAAC,SAAS;AAClD,SACE,qBAAC,QAAK,SAAQ,aAAa,GAAG,MAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/reorder-item.tsx"],"sourcesContent":["import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ dragControls, isDrag, register }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n"],"mappings":";;;;;;;AAUA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,IAAI,gBAAgB;AAC7B,SAAS,YAAY,aAAa,WAAW,gBAAgB;AA2ErD;AArDD,IAAM,cAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,eAAe,gBAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AAEnD,UAAM,IAAI,eAAe,CAAC;AAC1B,UAAM,IAAI,eAAe,CAAC;AAE1B,UAAM,WAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,cAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACA,OAAM;AACzC,YAAI,gBAAgB,aAAc,WAAUA,OAAM,CAAC;AAAA,MACrD,CAAC;AACD,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,WAAY,WAAUA,OAAM,CAAC;AAAA,MACnD,CAAC;AAED,aAAO,MAAM;AACX,qBAAa;AACb,qBAAa;AAAA,MACf;AAAA,IACF,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;AAEtB,UAAM,MAAmB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAI,CAAC,aAAa,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,OAAO;AAAA,MAC5D,GAAG,OAAO;AAAA,MACV,GAAI,CAAC,aACD;AAAA,QACE,WAAW;AAAA,UACT,IAAG,YAAO,SAAP,mBAAa;AAAA,UAChB,QAAQ;AAAA,QACV;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,WACE,oBAAC,uBAAoB,OAAO,EAAE,cAAc,QAAQ,SAAS,GAC3D;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,cAAc;AAAA,QAClB,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,iBAAe,SAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;","names":["x","y"]}
|
|
1
|
+
{"version":3,"sources":["../src/reorder-item.tsx"],"sourcesContent":["import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ dragControls, isDrag, register }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\nReorderItem.__ui__ = \"ReorderItem\"\n"],"mappings":";;;;;;;AAUA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,IAAI,gBAAgB;AAC7B,SAAS,YAAY,aAAa,WAAW,gBAAgB;AA2ErD;AArDD,IAAM,cAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,eAAe,gBAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AAEnD,UAAM,IAAI,eAAe,CAAC;AAC1B,UAAM,IAAI,eAAe,CAAC;AAE1B,UAAM,WAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,cAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACA,OAAM;AACzC,YAAI,gBAAgB,aAAc,WAAUA,OAAM,CAAC;AAAA,MACrD,CAAC;AACD,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,WAAY,WAAUA,OAAM,CAAC;AAAA,MACnD,CAAC;AAED,aAAO,MAAM;AACX,qBAAa;AACb,qBAAa;AAAA,MACf;AAAA,IACF,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;AAEtB,UAAM,MAAmB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAI,CAAC,aAAa,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,OAAO;AAAA,MAC5D,GAAG,OAAO;AAAA,MACV,GAAI,CAAC,aACD;AAAA,QACE,WAAW;AAAA,UACT,IAAG,YAAO,SAAP,mBAAa;AAAA,UAChB,QAAQ;AAAA,QACV;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,WACE,oBAAC,uBAAoB,OAAO,EAAE,cAAc,QAAQ,SAAS,GAC3D;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,cAAc;AAAA,QAClB,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,iBAAe,SAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":["x","y"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ReorderItem
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-UUWQUHDE.mjs";
|
|
5
5
|
import {
|
|
6
6
|
ReorderProvider
|
|
7
7
|
} from "./chunk-M54CO3K4.mjs";
|
|
@@ -108,8 +108,9 @@ var Reorder = forwardRef(
|
|
|
108
108
|
}
|
|
109
109
|
);
|
|
110
110
|
Reorder.displayName = "Reorder";
|
|
111
|
+
Reorder.__ui__ = "Reorder";
|
|
111
112
|
|
|
112
113
|
export {
|
|
113
114
|
Reorder
|
|
114
115
|
};
|
|
115
|
-
//# sourceMappingURL=chunk-
|
|
116
|
+
//# sourceMappingURL=chunk-VR26UAYN.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/reorder.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/data-display/reorder\n */\nexport const Reorder = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\n"],"mappings":";;;;;;;;;AAeA,SAAS,gBAAgB,IAAI,8BAA8B;AAC3D,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,aAAa,SAAS,QAAQ,gBAAgB;AAyIxC;AAjI3B,IAAM,iBAAiC,CAAC,WAAW,MAAM,KAAK,IAAI,IAAI,MAAM,CAAC;AAE7E,IAAM,iBAAiC,CAAC,WACtC,OAAO;AAAA,EACL,CAAC,OAAO,OAAO,SACb,KAAK,QAAQ,KAAK,MAAM,SAAS,UAAU,KAAK,YAAY,KAAK;AACrE;AAsCK,IAAM,UAAU;AAAA;AAAA,EAErB,CACE,OACA,QACG;AACH,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,WAAW,KAAK;AACrE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,QAAQ,CAAC;AAAA,MACT,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAE9B,UAAM,OAAO,gBAAgB,aAAa,MAAM;AAEhD,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,UAAM,gBAAgB,QAAQ,MAAM;AAClC,YAAMA,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,oBAAoB,OAAY,aAAa;AAEnD,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAc,aAAa;AACvD,UAAM,aAAa,OAAY,aAAa;AAE5C,UAAM,YAAY;AAAA,MAChB,CAAC,cAAmB;AAClB,kBAAU,SAAS;AAEnB,6CAAW;AAAA,MACb;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,oBAAoB,YAAY,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,oBAAgB,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,gBAAgB;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,oBAAC,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,oBAAC,mBAAgB,OAAO,EAAE,aAAa,OAAO,GAC5C;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,cAAc;AAAA,QAClB,WAAW,GAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,WAAW,WAAW,KAAK,WAAW,iBAAiB;AAAA,QACvD,YAAY,WAAW,KAAK,YAAY,iBAAiB;AAAA,QAExD;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAMA,QAAQ,cAAc;","names":["values","props"]}
|
|
1
|
+
{"version":3,"sources":["../src/reorder.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/data-display/reorder\n */\nexport const Reorder = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\nReorder.__ui__ = \"Reorder\"\n"],"mappings":"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","names":["values","props"]}
|
package/dist/index.js
CHANGED
|
@@ -108,6 +108,7 @@ var ReorderItem = (0, import_react.forwardRef)(
|
|
|
108
108
|
}
|
|
109
109
|
);
|
|
110
110
|
ReorderItem.displayName = "ReorderItem";
|
|
111
|
+
ReorderItem.__ui__ = "ReorderItem";
|
|
111
112
|
|
|
112
113
|
// src/reorder.tsx
|
|
113
114
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -202,6 +203,7 @@ var Reorder = (0, import_react2.forwardRef)(
|
|
|
202
203
|
}
|
|
203
204
|
);
|
|
204
205
|
Reorder.displayName = "Reorder";
|
|
206
|
+
Reorder.__ui__ = "Reorder";
|
|
205
207
|
|
|
206
208
|
// src/reorder-trigger.tsx
|
|
207
209
|
var import_core3 = require("@yamada-ui/core");
|
|
@@ -239,6 +241,8 @@ var ReorderTrigger = (0, import_core3.forwardRef)(
|
|
|
239
241
|
);
|
|
240
242
|
}
|
|
241
243
|
);
|
|
244
|
+
ReorderTrigger.displayName = "ReorderTrigger";
|
|
245
|
+
ReorderTrigger.__ui__ = "ReorderTrigger";
|
|
242
246
|
var ReorderTriggerIcon = (rest) => {
|
|
243
247
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_icon.Icon, { viewBox: "0 0 39 39", ...rest, children: [
|
|
244
248
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
@@ -306,6 +310,8 @@ var ReorderTriggerIcon = (rest) => {
|
|
|
306
310
|
)
|
|
307
311
|
] });
|
|
308
312
|
};
|
|
313
|
+
ReorderTriggerIcon.displayName = "ReorderTriggerIcon";
|
|
314
|
+
ReorderTriggerIcon.__ui__ = "ReorderTriggerIcon";
|
|
309
315
|
// Annotate the CommonJS export names for ESM import in node:
|
|
310
316
|
0 && (module.exports = {
|
|
311
317
|
Reorder,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/reorder.tsx","../src/reorder-context.ts","../src/reorder-item.tsx","../src/reorder-trigger.tsx"],"sourcesContent":["export { Reorder } from \"./reorder\"\nexport type { ReorderGenerateItem, ReorderProps } from \"./reorder\"\nexport { ReorderItem } from \"./reorder-item\"\nexport type { ReorderItemProps } from \"./reorder-item\"\nexport { ReorderTrigger } from \"./reorder-trigger\"\nexport type { ReorderTriggerProps } from \"./reorder-trigger\"\n","import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/data-display/reorder\n */\nexport const Reorder = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n orientation: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n","import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ dragControls, isDrag, register }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { FC } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n"],"mappings":"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","names":["import_core","import_motion","import_utils","import_react","import_utils","x","y","import_jsx_runtime","values","props","import_core","import_utils","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/reorder.tsx","../src/reorder-context.ts","../src/reorder-item.tsx","../src/reorder-trigger.tsx"],"sourcesContent":["export { Reorder } from \"./reorder\"\nexport type { ReorderGenerateItem, ReorderProps } from \"./reorder\"\nexport { ReorderItem } from \"./reorder-item\"\nexport type { ReorderItemProps } from \"./reorder-item\"\nexport { ReorderTrigger } from \"./reorder-trigger\"\nexport type { ReorderTriggerProps } from \"./reorder-trigger\"\n","import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/data-display/reorder\n */\nexport const Reorder = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\nReorder.__ui__ = \"Reorder\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n orientation: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n","import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ dragControls, isDrag, register }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\nReorderItem.__ui__ = \"ReorderItem\"\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nReorderTrigger.displayName = \"ReorderTrigger\"\nReorderTrigger.__ui__ = \"ReorderTrigger\"\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nReorderTriggerIcon.displayName = \"ReorderTriggerIcon\"\nReorderTriggerIcon.__ui__ = \"ReorderTriggerIcon\"\n"],"mappings":"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","names":["import_core","import_motion","import_utils","import_react","import_utils","x","y","import_jsx_runtime","values","props","import_core","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ReorderTrigger
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-F2THE4WO.mjs";
|
|
5
5
|
import {
|
|
6
6
|
Reorder
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-VR26UAYN.mjs";
|
|
8
8
|
import {
|
|
9
9
|
ReorderItem
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-UUWQUHDE.mjs";
|
|
11
11
|
import "./chunk-M54CO3K4.mjs";
|
|
12
12
|
export {
|
|
13
13
|
Reorder,
|
package/dist/reorder-item.js
CHANGED
|
@@ -100,6 +100,7 @@ var ReorderItem = (0, import_react.forwardRef)(
|
|
|
100
100
|
}
|
|
101
101
|
);
|
|
102
102
|
ReorderItem.displayName = "ReorderItem";
|
|
103
|
+
ReorderItem.__ui__ = "ReorderItem";
|
|
103
104
|
// Annotate the CommonJS export names for ESM import in node:
|
|
104
105
|
0 && (module.exports = {
|
|
105
106
|
ReorderItem
|
package/dist/reorder-item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/reorder-item.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ dragControls, isDrag, register }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n orientation: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,kBAAmB;AACnB,oBAIO;AACP,IAAAA,gBAA6B;AAC7B,mBAA6D;;;ACf7D,mBAA8B;AAOvB,IAAM,CAAC,iBAAiB,iBAAiB,QAC9C,4BAA8B;AAAA,EAC5B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQI,IAAM,CAAC,qBAAqB,qBAAqB,QACtD,4BAAkC;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;;;ADmEK;AArDD,IAAM,kBAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,mBAAe,+BAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AAEnD,UAAM,QAAI,8BAAe,CAAC;AAC1B,UAAM,QAAI,8BAAe,CAAC;AAE1B,UAAM,eAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,gCAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,aAAc,WAAUA,OAAM,CAAC;AAAA,MACrD,CAAC;AACD,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,WAAY,WAAUA,OAAM,CAAC;AAAA,MACnD,CAAC;AAED,aAAO,MAAM;AACX,qBAAa;AACb,qBAAa;AAAA,MACf;AAAA,IACF,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;AAEtB,UAAM,MAAmB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAI,CAAC,aAAa,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,OAAO;AAAA,MAC5D,GAAG,OAAO;AAAA,MACV,GAAI,CAAC,aACD;AAAA,QACE,WAAW;AAAA,UACT,IAAG,YAAO,SAAP,mBAAa;AAAA,UAChB,QAAQ;AAAA,QACV;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,WACE,4CAAC,uBAAoB,OAAO,EAAE,cAAc,QAAQ,SAAS,GAC3D;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,4BAAc;AAAA,QAClB,eAAW,kBAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,qBAAe,wBAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;","names":["import_utils","x","y"]}
|
|
1
|
+
{"version":3,"sources":["../src/reorder-item.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ dragControls, isDrag, register }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\nReorderItem.__ui__ = \"ReorderItem\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n orientation: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,kBAAmB;AACnB,oBAIO;AACP,IAAAA,gBAA6B;AAC7B,mBAA6D;;;ACf7D,mBAA8B;AAOvB,IAAM,CAAC,iBAAiB,iBAAiB,QAC9C,4BAA8B;AAAA,EAC5B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQI,IAAM,CAAC,qBAAqB,qBAAqB,QACtD,4BAAkC;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;;;ADmEK;AArDD,IAAM,kBAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,mBAAe,+BAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AAEnD,UAAM,QAAI,8BAAe,CAAC;AAC1B,UAAM,QAAI,8BAAe,CAAC;AAE1B,UAAM,eAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,gCAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,aAAc,WAAUA,OAAM,CAAC;AAAA,MACrD,CAAC;AACD,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,WAAY,WAAUA,OAAM,CAAC;AAAA,MACnD,CAAC;AAED,aAAO,MAAM;AACX,qBAAa;AACb,qBAAa;AAAA,MACf;AAAA,IACF,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;AAEtB,UAAM,MAAmB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAI,CAAC,aAAa,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,OAAO;AAAA,MAC5D,GAAG,OAAO;AAAA,MACV,GAAI,CAAC,aACD;AAAA,QACE,WAAW;AAAA,UACT,IAAG,YAAO,SAAP,mBAAa;AAAA,UAChB,QAAQ;AAAA,QACV;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,WACE,4CAAC,uBAAoB,OAAO,EAAE,cAAc,QAAQ,SAAS,GAC3D;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,4BAAc;AAAA,QAClB,eAAW,kBAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,qBAAe,wBAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":["import_utils","x","y"]}
|
package/dist/reorder-item.mjs
CHANGED
package/dist/reorder-trigger.js
CHANGED
|
@@ -72,6 +72,8 @@ var ReorderTrigger = (0, import_core.forwardRef)(
|
|
|
72
72
|
);
|
|
73
73
|
}
|
|
74
74
|
);
|
|
75
|
+
ReorderTrigger.displayName = "ReorderTrigger";
|
|
76
|
+
ReorderTrigger.__ui__ = "ReorderTrigger";
|
|
75
77
|
var ReorderTriggerIcon = (rest) => {
|
|
76
78
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_icon.Icon, { viewBox: "0 0 39 39", ...rest, children: [
|
|
77
79
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -139,6 +141,8 @@ var ReorderTriggerIcon = (rest) => {
|
|
|
139
141
|
)
|
|
140
142
|
] });
|
|
141
143
|
};
|
|
144
|
+
ReorderTriggerIcon.displayName = "ReorderTriggerIcon";
|
|
145
|
+
ReorderTriggerIcon.__ui__ = "ReorderTriggerIcon";
|
|
142
146
|
// Annotate the CommonJS export names for ESM import in node:
|
|
143
147
|
0 && (module.exports = {
|
|
144
148
|
ReorderTrigger
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/reorder-trigger.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport
|
|
1
|
+
{"version":3,"sources":["../src/reorder-trigger.tsx","../src/reorder-context.ts"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nReorderTrigger.displayName = \"ReorderTrigger\"\nReorderTrigger.__ui__ = \"ReorderTrigger\"\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nReorderTriggerIcon.displayName = \"ReorderTriggerIcon\"\nReorderTriggerIcon.__ui__ = \"ReorderTriggerIcon\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n orientation: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kBAA+B;AAC/B,kBAAqB;AACrB,IAAAA,gBAAoD;;;ACFpD,mBAA8B;AAOvB,IAAM,CAAC,iBAAiB,iBAAiB,QAC9C,4BAA8B;AAAA,EAC5B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQI,IAAM,CAAC,qBAAqB,qBAAqB,QACtD,4BAAkC;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;;;ADfwB;AADpB,IAAM,qBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,4CAAC,sBAAmB,GAAI,GAAG,KAAK,GAAG,QAAQ;AAClE,UAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,UAAM,EAAE,cAAc,QAAQ,SAAS,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,SAAK,yBAAU,UAAU,GAAG;AAAA,QAC5B,eAAW,kBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAe,wBAAS,MAAM;AAAA,QAC9B,mBAAe;AAAA,UAAW,KAAK;AAAA,UAAe,CAAC,OAC7C,aAAa,MAAM,EAAE;AAAA,QACvB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAExB,IAAM,qBAAoC,CAAC,SAAS;AAClD,SACE,6CAAC,oBAAK,SAAQ,aAAa,GAAG,MAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":["import_utils"]}
|
package/dist/reorder-trigger.mjs
CHANGED
package/dist/reorder.js
CHANGED
|
@@ -104,6 +104,7 @@ var ReorderItem = (0, import_react.forwardRef)(
|
|
|
104
104
|
}
|
|
105
105
|
);
|
|
106
106
|
ReorderItem.displayName = "ReorderItem";
|
|
107
|
+
ReorderItem.__ui__ = "ReorderItem";
|
|
107
108
|
|
|
108
109
|
// src/reorder.tsx
|
|
109
110
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -198,6 +199,7 @@ var Reorder = (0, import_react2.forwardRef)(
|
|
|
198
199
|
}
|
|
199
200
|
);
|
|
200
201
|
Reorder.displayName = "Reorder";
|
|
202
|
+
Reorder.__ui__ = "Reorder";
|
|
201
203
|
// Annotate the CommonJS export names for ESM import in node:
|
|
202
204
|
0 && (module.exports = {
|
|
203
205
|
Reorder
|
package/dist/reorder.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/reorder.tsx","../src/reorder-context.ts","../src/reorder-item.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/data-display/reorder\n */\nexport const Reorder = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n orientation: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n","import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ dragControls, isDrag, register }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA,IAAAA,eAA2D;AAC3D,IAAAC,iBAA8B;AAC9B,IAAAC,gBAKO;AACP,IAAAC,gBAAmE;;;ACrBnE,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;;;ACfH,kBAAmB;AACnB,oBAIO;AACP,IAAAC,gBAA6B;AAC7B,mBAA6D;AA2ErD;AArDD,IAAM,kBAAc;AAAA;AAAA,EAEzB,CACE,EAAE,WAAW,UAAU,OAAO,OAAO,GAAG,KAAK,GAC7C,QACG;AA5CP;AA6CI,UAAM,EAAE,aAAa,OAAO,IAAI,kBAAkB;AAElD,UAAM,mBAAe,+BAAgB;AAErC,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB,KAAK;AAC3D,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AAEnD,UAAM,QAAI,8BAAe,CAAC;AAC1B,UAAM,QAAI,8BAAe,CAAC;AAE1B,UAAM,eAAW;AAAA,MACf,CAAC,SAA6B,cAAc,CAAC,CAAC,IAAI;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,gCAAU,MAAM;AACd,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,aAAc,WAAUA,OAAM,CAAC;AAAA,MACrD,CAAC;AACD,YAAM,eAAe,EAAE,GAAG,UAAU,CAACC,OAAM;AACzC,YAAI,gBAAgB,WAAY,WAAUA,OAAM,CAAC;AAAA,MACnD,CAAC;AAED,aAAO,MAAM;AACX,qBAAa;AACb,qBAAa;AAAA,MACf;AAAA,IACF,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;AAEtB,UAAM,MAAmB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAI,CAAC,aAAa,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,OAAO;AAAA,MAC5D,GAAG,OAAO;AAAA,MACV,GAAI,CAAC,aACD;AAAA,QACE,WAAW;AAAA,UACT,IAAG,YAAO,SAAP,mBAAa;AAAA,UAChB,QAAQ;AAAA,QACV;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,WACE,4CAAC,uBAAoB,OAAO,EAAE,cAAc,QAAQ,SAAS,GAC3D;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,4BAAc;AAAA,QAClB,eAAW,kBAAG,oBAAoB,SAAS;AAAA,QAC3C;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,KAAK,OAAO,GAAG,EAAE;AAAA,QAC7B,qBAAe,wBAAS,MAAM;AAAA,QAC9B;AAAA,QACA,cAAc,CAAC;AAAA,QAEd,wCAAY;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;;;AF6CC,IAAAC,sBAAA;AAjI3B,IAAM,iBAAiC,CAAC,WAAW,MAAM,KAAK,IAAI,IAAI,MAAM,CAAC;AAE7E,IAAM,iBAAiC,CAAC,WACtC,OAAO;AAAA,EACL,CAAC,OAAO,OAAO,SACb,KAAK,QAAQ,KAAK,MAAM,SAAS,UAAU,KAAK,YAAY,KAAK;AACrE;AAsCK,IAAM,cAAU;AAAA;AAAA,EAErB,CACE,OACA,QACG;AACH,UAAM,CAAC,QAAQ,WAAW,QAAI,qCAAuB,WAAW,KAAK;AACrE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,QAAQ,CAAC;AAAA,MACT,cAAc;AAAA,MACd;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;","names":["import_core","import_motion","import_utils","import_react","import_utils","x","y","import_jsx_runtime","values","props"]}
|
|
1
|
+
{"version":3,"sources":["../src/reorder.tsx","../src/reorder-context.ts","../src/reorder-item.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { ReorderItemProps } from \"./reorder-item\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { MotionReorder } from \"@yamada-ui/motion\"\nimport {\n cx,\n getValidChildren,\n handlerAll,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\"\nimport { ReorderProvider } from \"./reorder-context\"\nimport { ReorderItem } from \"./reorder-item\"\n\nexport type ReorderGenerateItem<Y = string> = ReorderItemProps<Y>\n\ntype DuplicatedFunc = <Y = string>(values: Y[]) => Y[]\n\nconst omitDuplicated: DuplicatedFunc = (values) => Array.from(new Set(values))\n\nconst pickDuplicated: DuplicatedFunc = (values) =>\n values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\ninterface ReorderOptions<Y = string> {\n /**\n * If provided, generate reorder items based on items.\n *\n */\n items?: ReorderGenerateItem[]\n /**\n * The orientation of the reorder.\n *\n * @default 'vertical'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * The callback invoked when reorder items are moved.\n */\n onChange?: (values: Y[]) => void\n /**\n * The callback invoked when the movement of reorder items is completed.\n */\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport interface ReorderProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"ul\">, HTMLMotionProps<\"ul\">>,\n \"children\" | \"onChange\" | \"transition\"\n >,\n PropsWithChildren,\n ThemeProps<\"Reorder\">,\n ReorderOptions<Y> {}\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/data-display/reorder\n */\nexport const Reorder = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n props: ReorderProps<Y>,\n ref: ForwardedRef<HTMLUListElement>,\n ) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Reorder\", props)\n const {\n className,\n children,\n gap = \"fallback(4, 1rem)\",\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(({ props }) => props.value)\n : items.map(({ value }) => value)\n\n const duplicatedValues = pickDuplicated(values)\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return omitDuplicated(values)\n }, [hasChildren, validChildren, items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const isEqual =\n JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (isEqual) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const isEqual =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (isEqual) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return validChildren.find(({ props }) => props.value === value)\n } else {\n const props = items.find((item) => item.value === value)\n\n return props ? <ReorderItem key={props.value} {...props} /> : null\n }\n }),\n [values, hasChildren, validChildren, items],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n gap,\n ...styles.container,\n }\n\n return (\n <ReorderProvider value={{ orientation, styles }}>\n <ui.ul\n ref={ref}\n as={MotionReorder.Group<Y>}\n className={cx(\"ui-reorder\", className)}\n axis={axis}\n values={values}\n onReorder={onReorder}\n __css={css}\n {...rest}\n onMouseUp={handlerAll(rest.onMouseUp, onCompleteReorder)}\n onTouchEnd={handlerAll(rest.onTouchEnd, onCompleteReorder)}\n >\n {cloneChildren}\n </ui.ul>\n </ReorderProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLUListElement> & ReorderProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorder.displayName = \"Reorder\"\nReorder.__ui__ = \"Reorder\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { DragControls } from \"@yamada-ui/motion\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ReorderContext {\n orientation: \"horizontal\" | \"vertical\"\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ReorderProvider, useReorderContext] =\n createContext<ReorderContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Reorder />\"`,\n })\n\ninterface ReorderItemContext {\n dragControls: DragControls\n isDrag: boolean\n register: (node: HTMLElement | null) => void\n}\n\nexport const [ReorderItemProvider, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderContext\",\n errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ReorderItem />\"`,\n })\n","import type { ComponentArgs, CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLMotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n MotionReorder,\n useDragControls,\n useMotionValue,\n} from \"@yamada-ui/motion\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useState } from \"react\"\nimport { ReorderItemProvider, useReorderContext } from \"./reorder-context\"\n\ninterface ReorderItemOptions<Y = string> {\n /**\n * The value of the reorder item.\n */\n value: Y\n /**\n * The label of the reorder item.\n */\n label?: ReactNode\n}\n\nexport interface ReorderItemProps<Y = string>\n extends Omit<\n Merge<HTMLUIProps<\"li\">, HTMLMotionProps<\"li\">>,\n \"children\" | \"transition\" | \"value\"\n >,\n PropsWithChildren,\n ReorderItemOptions<Y> {}\n\nexport const ReorderItem = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n <Y extends any = string>(\n { className, children, label, value, ...rest }: ReorderItemProps<Y>,\n ref: ForwardedRef<HTMLLIElement>,\n ) => {\n const { orientation, styles } = useReorderContext()\n\n const dragControls = useDragControls()\n\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [isDrag, setIsDrag] = useState<boolean>(false)\n\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement | null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setIsDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setIsDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const css: CSSUIObject = {\n _selected: {\n cursor: \"grabbing\",\n },\n ...(!hasTrigger ? { cursor: \"grab\" } : { userSelect: \"none\" }),\n ...styles.item,\n ...(!hasTrigger\n ? {\n _selected: {\n ...styles.item?._selected,\n cursor: \"grabbing\",\n },\n }\n : {}),\n }\n\n return (\n <ReorderItemProvider value={{ dragControls, isDrag, register }}>\n <ui.li\n ref={ref}\n as={MotionReorder.Item}\n className={cx(\"ui-reorder__item\", className)}\n value={value}\n __css={css}\n {...rest}\n style={{ ...rest.style, x, y }}\n data-selected={dataAttr(isDrag)}\n dragControls={dragControls}\n dragListener={!hasTrigger}\n >\n {children ?? label}\n </ui.li>\n </ReorderItemProvider>\n )\n },\n) as {\n <Y = string>(\n props: RefAttributes<HTMLLIElement> & ReorderItemProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nReorderItem.displayName = \"ReorderItem\"\nReorderItem.__ui__ = \"ReorderItem\"\n"],"mappings":"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","names":["import_core","import_motion","import_utils","import_react","import_utils","x","y","import_jsx_runtime","values","props"]}
|
package/dist/reorder.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/reorder-trigger.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { FC } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, dataAttr, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useReorderContext, useReorderItemContext } from \"./reorder-context\"\n\nexport interface ReorderTriggerProps extends HTMLUIProps {}\n\nexport const ReorderTrigger = forwardRef<ReorderTriggerProps, \"div\">(\n ({ className, children = <ReorderTriggerIcon />, ...rest }, ref) => {\n const { styles } = useReorderContext()\n const { dragControls, isDrag, register } = useReorderItemContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"grab\",\n display: \"flex\",\n justifyContent: \"center\",\n _selected: {\n cursor: \"grabbing\",\n },\n ...styles.trigger,\n }\n\n return (\n <ui.div\n ref={mergeRefs(register, ref)}\n className={cx(\"ui-reorder__trigger\", className)}\n __css={css}\n {...rest}\n data-selected={dataAttr(isDrag)}\n onPointerDown={handlerAll(rest.onPointerDown, (ev) =>\n dragControls.start(ev),\n )}\n >\n {children}\n </ui.div>\n )\n },\n)\n\nconst ReorderTriggerIcon: FC<IconProps> = (rest) => {\n return (\n <Icon viewBox=\"0 0 39 39\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n"],"mappings":";;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,YAAY;AACrB,SAAS,IAAI,UAAU,YAAY,iBAAiB;AAMzB,cAkCvB,YAlCuB;AADpB,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,oBAAC,sBAAmB,GAAI,GAAG,KAAK,GAAG,QAAQ;AAClE,UAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,UAAM,EAAE,cAAc,QAAQ,SAAS,IAAI,sBAAsB;AAEjE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,UAAU,GAAG;AAAA,QAC5B,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,iBAAe,SAAS,MAAM;AAAA,QAC9B,eAAe;AAAA,UAAW,KAAK;AAAA,UAAe,CAAC,OAC7C,aAAa,MAAM,EAAE;AAAA,QACvB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAM,qBAAoC,CAAC,SAAS;AAClD,SACE,qBAAC,QAAK,SAAQ,aAAa,GAAG,MAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;","names":[]}
|