@xwadex/fesd-next 0.3.44-beta.35 → 0.3.44-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/components/dragResize/dragResize.d.ts +5 -2
  2. package/dist/components/dragResize/dragResize.js +13 -13
  3. package/dist/components/dragResize/dragResize.module.scss +42 -0
  4. package/dist/components/index.d.ts +0 -2
  5. package/dist/components/index.js +0 -2
  6. package/dist/components/resizables/resizablePanelGroup.js +0 -7
  7. package/dist/components/scrollAreas/index.d.ts +2 -11
  8. package/dist/components/scrollAreas/scrollArea.d.ts +1 -8
  9. package/dist/components/scrollAreas/scrollArea.js +2 -2
  10. package/dist/components/scrollAreas/scrollBar.d.ts +1 -3
  11. package/dist/components/scrollAreas/scrollBar.js +2 -2
  12. package/dist/hooks/index.d.ts +0 -2
  13. package/dist/hooks/index.js +0 -2
  14. package/dist/hooks/useDragResize.d.ts +2 -5
  15. package/dist/hooks/useDragResize.js +8 -20
  16. package/package.json +1 -1
  17. package/dist/components/dragBoxs/dragBoxs.d.ts +0 -9
  18. package/dist/components/dragBoxs/dragBoxs.js +0 -70
  19. package/dist/components/dragBoxs/dragBoxsContext.d.ts +0 -14
  20. package/dist/components/dragBoxs/dragBoxsContext.js +0 -10
  21. package/dist/components/dragBoxs/index.d.ts +0 -2
  22. package/dist/components/dragBoxs/index.js +0 -2
  23. package/dist/components/dropdowns/dropdown-menu.d.ts +0 -25
  24. package/dist/components/dropdowns/dropdown-menu.js +0 -51
  25. package/dist/components/dropdowns/index.d.ts +0 -1
  26. package/dist/components/dropdowns/index.js +0 -1
  27. package/dist/hooks/useEffectLeave.d.ts +0 -1
  28. package/dist/hooks/useEffectLeave.js +0 -9
  29. package/dist/hooks/useEffectOne.d.ts +0 -1
  30. package/dist/hooks/useEffectOne.js +0 -9
@@ -5,8 +5,11 @@ type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
5
5
  children: React.ReactNode;
6
6
  defaultWidth?: number;
7
7
  defaultHeight?: number;
8
- className?: string;
9
- handlerClassName?: string;
8
+ resizeClass?: string;
9
+ dragLineWidth?: number;
10
+ dragLineColor?: string;
11
+ containerClass?: string;
12
+ dragClass?: string;
10
13
  resizeStore?: boolean;
11
14
  resizeStoreKey?: string;
12
15
  resizeStoreValue?: ResizeTypes;
@@ -3,12 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { memo, useCallback, useMemo, useState } from "react";
4
4
  import { useDragResize, useCookies } from "../../hooks/index.js";
5
5
  import { DragResizeContext } from "./dragResizeContext";
6
- import { cn } from "../../utils/index.js";
6
+ import { mergeClassName } from "../../utils/index.js";
7
+ import styles from "./dragResize.module.scss";
7
8
  const DragResizeBase = (props) => {
8
- const { as, children, defaultWidth, defaultHeight, className, handlerClassName, resizeStore = true, resizeStoreKey, resizeStoreValue, active = true, direction = "horizontal", minWidth = 500, maxWidth = 950, onInit, onResizeStart, onResizing, onResizeEnd, ...othersProps } = props;
9
+ const { as, children, defaultWidth, defaultHeight, resizeClass, containerClass, dragClass, resizeStore = true, resizeStoreKey, resizeStoreValue, active = true, direction = "width", minWidth = 500, maxWidth = 950, dragLineWidth = 5, dragLineColor = "rgba(0, 0, 0, 1)", onInit, onResizeStart, onResizing, onResizeEnd, ...othersProps } = props;
9
10
  const RootComponent = as || "div";
10
11
  const [isActive, setActive] = useState(active);
11
12
  const { setCookies, deleteCookies } = useCookies();
13
+ const resizeCSS = useMemo(() => mergeClassName(styles.root, resizeClass ? resizeClass : ""), [resizeClass]);
14
+ const dragCSS = useMemo(() => mergeClassName(styles.drag, dragClass ? dragClass : "", !isActive ? styles.off : ""), [isActive, dragClass]);
15
+ const containerCSS = useMemo(() => mergeClassName(styles.container, containerClass ? containerClass : ""), [containerClass]);
12
16
  const isCookieStore = useMemo(() => resizeStore
13
17
  && resizeStoreKey
14
18
  && resizeStoreKey !== ""
@@ -43,24 +47,17 @@ const DragResizeBase = (props) => {
43
47
  onResizeEnd: onResizeEndHandler,
44
48
  });
45
49
  //Context Functions
46
- const setResizeActive = useCallback((active) => setActive(active), []);
47
- const setResizeClose = useCallback((active) => {
48
- if (!resizeRef.current)
49
- return;
50
- // resizeRef.current.style.width = active0 + "px"
51
- // resizeRef.current.style.height = minHeight + "px"
52
- clearResizeStore();
53
- }, []);
50
+ const setResizeActive = useCallback((active) => setActive(active), [setActive]);
54
51
  const clearResizeStore = useCallback(() => resizeStoreKey
55
52
  ? deleteCookies(resizeStoreKey)
56
- : console.error("resizeStoreKey is not undefined"), []);
53
+ : console.error("resizeStoreKey is not undefined"), [resizeStoreKey]);
57
54
  const defaultResizeSize = useCallback(() => {
58
55
  if (!resizeRef.current)
59
56
  return;
60
57
  resizeRef.current.style.width = minWidth + "px";
61
58
  // resizeRef.current.style.height = minHeight + "px"
62
59
  clearResizeStore();
63
- }, []);
60
+ }, [resizeRef.current, clearResizeStore]);
64
61
  const contextValue = useMemo(() => ({
65
62
  setResizeActive,
66
63
  clearResizeStore,
@@ -70,7 +67,10 @@ const DragResizeBase = (props) => {
70
67
  clearResizeStore,
71
68
  defaultResizeSize
72
69
  ]);
73
- return (_jsx(DragResizeContext, { value: contextValue, children: _jsxs(RootComponent, { ...othersProps, "data-components": "drag-resize-root", ref: resizeRef, className: cn("w-[inherit]", "h-[inherit]", "flex", "flex-row", className), style: resizeDefauleStyles, children: [_jsx("div", { "data-components": "drag-resize-container", className: cn("w-[inherit]", "h-[inherit]"), children: children }), _jsx("div", { "data-components": "drag-resize-handler", ref: dragRef, className: cn("w-0", "h-full", "relative", "z-2", "hover:before:cursor-ew-resize", "hover:before:opacity-100", "before:content-[' ']", "before:w-1", "before:h-full", "before:absolute", "before:z-1", "before:opacity-0", "before:duration-500", "before:transition-opacity", "before:ease-in-out", "before:bg-black", handlerClassName) })] }) }));
70
+ return (_jsx(DragResizeContext, { value: contextValue, children: _jsxs(RootComponent, { ...othersProps, ref: resizeRef, className: resizeCSS, style: resizeDefauleStyles, children: [_jsx("div", { className: containerCSS, children: children }), _jsx("div", { ref: dragRef, className: dragCSS, style: {
71
+ "--drag-line-width": dragLineWidth + "px",
72
+ "--drag-line-color": dragLineColor
73
+ } })] }) }));
74
74
  };
75
75
  const DragResize = memo(DragResizeBase);
76
76
  DragResize.displayName = "DragResize";
@@ -0,0 +1,42 @@
1
+ .root {
2
+ width: inherit;
3
+ height: inherit;
4
+ display: flex;
5
+ flex-direction: row;
6
+ }
7
+
8
+ .container {
9
+ width: inherit;
10
+ height: inherit;
11
+ }
12
+
13
+ .drag {
14
+ --drag-line-width: 2px;
15
+ --drag-line-color: rgbs(0, 0, 0, 1);
16
+
17
+ width: 0;
18
+ height: inherit;
19
+ position: relative;
20
+ z-index: 2;
21
+
22
+ &::before {
23
+ content: "";
24
+ width: 0;
25
+ height: inherit;
26
+ border-left: var(--drag-line-width) solid var(--drag-line-color);
27
+ position: absolute;
28
+ inset: 0 0 0 calc(var(--drag-line-width) / 2 * -1);
29
+ z-index: 1;
30
+ opacity: 0;
31
+ transition: 0.5s ease-in-out;
32
+ }
33
+
34
+ &:not(.off) {
35
+ &:hover {
36
+ cursor: ew-resize;
37
+ &::before {
38
+ opacity: 1;
39
+ }
40
+ }
41
+ }
42
+ }
@@ -1,7 +1,5 @@
1
1
  export * from "./dragResize";
2
2
  export * from "./dragSortable";
3
- export * from "./dragBoxs";
4
3
  export * from "./accordions";
5
4
  export * from "./resizables";
6
5
  export * from "./scrollAreas";
7
- export * from "./dropdowns";
@@ -1,9 +1,7 @@
1
1
  // dev components
2
2
  export * from "./dragResize";
3
3
  export * from "./dragSortable";
4
- export * from "./dragBoxs";
5
4
  // shadcn Components
6
5
  export * from "./accordions";
7
6
  export * from "./resizables";
8
7
  export * from "./scrollAreas";
9
- export * from "./dropdowns";
@@ -4,13 +4,6 @@ import * as ResizablePrimitive from 'react-resizable-panels';
4
4
  import { cn } from "../../utils/index.js";
5
5
  const ResizablePanelGroup = (props) => {
6
6
  const { as = "div", className, ...restProps } = props;
7
- const getItem = (name) => {
8
- console.log(name);
9
- return name;
10
- };
11
- const setItem = (name, value) => {
12
- console.log(name, value);
13
- };
14
7
  return (_jsx(ResizablePrimitive.PanelGroup, { tagName: as, "data-slot": "resizable-panel-group", className: cn(`
15
8
  flex
16
9
  h-full
@@ -1,19 +1,10 @@
1
1
  export declare const ScrollAreas: {
2
2
  Root: {
3
- (props: import("@radix-ui/react-scroll-area").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement> & {
4
- ref?: React.RefObject<HTMLDivElement | null>;
5
- viewportClassName?: string;
6
- barClassName?: string;
7
- thumbClassName?: string;
8
- forceMount?: true;
9
- orientation: "horizontal" | "vertical";
10
- }): import("react/jsx-runtime").JSX.Element;
3
+ (props: import("@radix-ui/react-scroll-area").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
11
4
  displayName: string;
12
5
  };
13
6
  Handle: {
14
- (props: import("@radix-ui/react-scroll-area").ScrollAreaScrollbarProps & import("react").RefAttributes<HTMLDivElement> & {
15
- thumbClassName?: string;
16
- }): import("react/jsx-runtime").JSX.Element;
7
+ (props: import("@radix-ui/react-scroll-area").ScrollAreaScrollbarProps & import("react").RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
17
8
  displayName: string;
18
9
  };
19
10
  };
@@ -1,13 +1,6 @@
1
1
  import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
2
2
  import type { ComponentProps } from "../../types/index.js";
3
- type PropsType = ComponentProps<typeof ScrollAreaPrimitive.Root> & {
4
- ref?: React.RefObject<HTMLDivElement | null>;
5
- viewportClassName?: string;
6
- barClassName?: string;
7
- thumbClassName?: string;
8
- forceMount?: true;
9
- orientation: "horizontal" | "vertical";
10
- };
3
+ type PropsType = ComponentProps<typeof ScrollAreaPrimitive.Root>;
11
4
  declare const ScrollArea: {
12
5
  (props: PropsType): import("react/jsx-runtime").JSX.Element;
13
6
  displayName: string;
@@ -4,8 +4,8 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
4
4
  import ScrollBar from "./scrollBar";
5
5
  import { cn } from "../../utils/index.js";
6
6
  const ScrollArea = (props) => {
7
- const { ref, className, viewportClassName, barClassName, thumbClassName, forceMount, orientation = "vertical", children, ...restProps } = props;
8
- return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...restProps, children: [_jsx(ScrollAreaPrimitive.Viewport, { ref: ref, "data-slot": "scroll-area-viewport", className: cn("scroll-smooth", "focus-visible:ring-ring/50", "size-full", "rounded-[inherit]", "transition-[color,box-shadow]", "outline-none", "focus-visible:ring-[3px]", "focus-visible:outline-1", viewportClassName), children: children }), _jsx(ScrollBar, { forceMount: forceMount, orientation: orientation, thumbClassName: thumbClassName }), _jsx(ScrollAreaPrimitive.Corner, {})] }));
7
+ const { className, children, ...restProps } = props;
8
+ return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...restProps, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
9
9
  };
10
10
  ScrollArea.displayName = "ScrollArea";
11
11
  export default ScrollArea;
@@ -1,8 +1,6 @@
1
1
  import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
2
2
  import type { ComponentProps } from "../../types/index.js";
3
- type PropsType = ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {
4
- thumbClassName?: string;
5
- };
3
+ type PropsType = ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>;
6
4
  declare const ScrollBar: {
7
5
  (props: PropsType): import("react/jsx-runtime").JSX.Element;
8
6
  displayName: string;
@@ -3,8 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
4
4
  import { cn } from "../../utils/index.js";
5
5
  const ScrollBar = (props) => {
6
- const { className, orientation = "vertical", thumbClassName, ...restProps } = props;
7
- return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex", "touch-none", "p-px", "transition-colors", "select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className), ...restProps, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: cn("bg-border", "relative", "flex-1", "rounded-full", thumbClassName) }) }));
6
+ const { className, orientation = "vertical", ...restProps } = props;
7
+ return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className), ...restProps, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-full" }) }));
8
8
  };
9
9
  ScrollBar.displayName = "ScrollBar";
10
10
  export default ScrollBar;
@@ -5,5 +5,3 @@ export * from "./useDragResize";
5
5
  export * from "./useAsyncFetcher";
6
6
  export * from "./useCollapse";
7
7
  export * from "./useMounted";
8
- export * from "./useEffectOne";
9
- export * from "./useEffectLeave";
@@ -5,5 +5,3 @@ export * from "./useDragResize";
5
5
  export * from "./useAsyncFetcher";
6
6
  export * from "./useCollapse";
7
7
  export * from "./useMounted";
8
- export * from "./useEffectOne";
9
- export * from "./useEffectLeave";
@@ -4,11 +4,9 @@ export interface ResizeTypes {
4
4
  }
5
5
  export interface DragResizePropsTypes {
6
6
  active?: boolean;
7
- direction?: "horizontal" | "vertical";
7
+ direction?: "width" | "height";
8
8
  minWidth?: number;
9
9
  maxWidth?: number;
10
- minHeight?: number;
11
- maxHeight?: number;
12
10
  onInit?: (size: ResizeTypes) => void;
13
11
  onResizeStart?: (size: ResizeTypes) => void;
14
12
  onResizing?: (size: ResizeTypes) => void;
@@ -17,6 +15,5 @@ export interface DragResizePropsTypes {
17
15
  export type DragResizeTypes = {
18
16
  dragRef: React.RefObject<HTMLDivElement | null>;
19
17
  resizeRef: React.RefObject<HTMLDivElement | null>;
20
- resize?: ResizeTypes;
21
18
  };
22
- export declare function useDragResize({ active, direction, minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }: DragResizePropsTypes): DragResizeTypes;
19
+ export declare function useDragResize({ active, direction, minWidth, maxWidth, onInit, onResizeStart, onResizing, onResizeEnd }: DragResizePropsTypes): DragResizeTypes;
@@ -1,10 +1,9 @@
1
1
  "use client";
2
2
  //wade 2024.12.06
3
- import { useEffect, useRef, useState } from "react";
4
- export function useDragResize({ active = true, direction = "horizontal", minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }) {
3
+ import { useEffect, useRef } from "react";
4
+ export function useDragResize({ active = true, direction = "width", minWidth = 300, maxWidth = 500, onInit, onResizeStart, onResizing, onResizeEnd }) {
5
5
  const dragRef = useRef(null);
6
6
  const resizeRef = useRef(null);
7
- const [resize, setResize] = useState({ width: 0, height: 0 });
8
7
  const getResizeSizeValue = () => {
9
8
  if (!resizeRef.current)
10
9
  return;
@@ -19,18 +18,10 @@ export function useDragResize({ active = true, direction = "horizontal", minWidt
19
18
  const rect = resizeRef.current.getBoundingClientRect();
20
19
  const resizeWidth = clientX - rect.left;
21
20
  const resizeHeight = clientY - rect.top;
22
- if (direction == "horizontal"
23
- && (minWidth && resizeWidth >= minWidth)
24
- && (maxWidth && resizeWidth <= maxWidth)) {
25
- resizeRef.current.style.width = resizeWidth + "px";
26
- return { width: resizeWidth, height: undefined };
27
- }
28
- if (direction == "vertical"
29
- && (minHeight && resizeWidth >= minHeight)
30
- && (maxHeight && resizeWidth <= maxHeight)) {
31
- resizeRef.current.style.height = resizeHeight + "px";
32
- return { width: undefined, height: resizeHeight };
33
- }
21
+ if (resizeWidth <= minWidth || resizeWidth >= maxWidth)
22
+ return;
23
+ resizeRef.current.style.width = resizeWidth + "px";
24
+ return { width: resizeWidth };
34
25
  };
35
26
  const onInitCallback = () => {
36
27
  const resizeValue = getResizeSizeValue();
@@ -42,10 +33,7 @@ export function useDragResize({ active = true, direction = "horizontal", minWidt
42
33
  };
43
34
  const onMouseMove = (e) => {
44
35
  const resizeValue = setResizeValue(e.clientX, e.clientY);
45
- if (!resizeValue)
46
- return;
47
- setResize(() => ({ ...resizeValue }));
48
- onResizing?.(resizeValue);
36
+ resizeValue && onResizing?.(resizeValue);
49
37
  };
50
38
  const onMouseUp = () => {
51
39
  const resizeValue = getResizeSizeValue();
@@ -71,5 +59,5 @@ export function useDragResize({ active = true, direction = "horizontal", minWidt
71
59
  removeEventListeners();
72
60
  };
73
61
  }, [active]);
74
- return { dragRef, resizeRef, resize };
62
+ return { dragRef, resizeRef };
75
63
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xwadex/fesd-next",
3
- "version": "0.3.44-beta.35",
3
+ "version": "0.3.44-beta.4",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -1,9 +0,0 @@
1
- export interface PropsTypes {
2
- defaultPosX?: number;
3
- defaultPosY?: number;
4
- active: boolean;
5
- children: React.ReactNode;
6
- }
7
- declare const DragBoxsBase: (props: PropsTypes) => import("react/jsx-runtime").JSX.Element;
8
- declare const DragBoxs: React.MemoExoticComponent<typeof DragBoxsBase>;
9
- export default DragBoxs;
@@ -1,70 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { memo, useCallback, useEffect, useId, useState } from "react";
4
- import { createPortal } from "react-dom";
5
- import { DndContext } from "@dnd-kit/core";
6
- import { DragBoxsContext } from "./dragBoxsContext";
7
- const DragBoxsBase = (props) => {
8
- const { defaultPosX = 0, defaultPosY = 0, active = false, children } = props;
9
- const id = useId();
10
- const [isMounded, setMounded] = useState(false);
11
- const [positions, setPositions] = useState({
12
- x: defaultPosX,
13
- y: defaultPosY
14
- });
15
- const dragEndEvent = useCallback((event) => {
16
- const { delta, active } = event;
17
- const id = active.id;
18
- setPositions((prev) => ({
19
- ...prev,
20
- x: prev.x + delta.x,
21
- y: prev.y + delta.y,
22
- }));
23
- }, []);
24
- const dragModifiers = useCallback(({ transform, activeNodeRect }) => {
25
- if (!activeNodeRect)
26
- return transform;
27
- const boxWidth = activeNodeRect.width;
28
- const boxHeight = activeNodeRect.height;
29
- const originalLeft = activeNodeRect.left;
30
- const originalTop = activeNodeRect.top;
31
- const maxX = window.innerWidth - (originalLeft + boxWidth);
32
- const maxY = window.innerHeight - (originalTop + boxHeight);
33
- const minX = -originalLeft;
34
- const minY = -originalTop;
35
- return {
36
- x: Math.min(Math.max(transform.x, minX), maxX),
37
- y: Math.min(Math.max(transform.y, minY), maxY),
38
- };
39
- }, []);
40
- const resizeNextPositions = useCallback((target, prev) => {
41
- if (typeof window !== "undefined" && target) {
42
- const { x: currentX = 0, y: currentY = 0 } = prev || {};
43
- const { innerWidth, innerHeight } = window;
44
- const { clientWidth, clientHeight } = target;
45
- const maxX = innerWidth - clientWidth;
46
- const maxY = innerHeight - clientHeight;
47
- return {
48
- x: Math.min(currentX, maxX < 0 ? 0 : maxX),
49
- y: Math.min(currentY, maxY < 0 ? 0 : maxY),
50
- };
51
- }
52
- return { ...prev };
53
- }, []);
54
- const resizeEvent = useCallback(() => {
55
- const target = document.getElementById(id);
56
- if (target)
57
- setPositions((prev) => resizeNextPositions(target, prev));
58
- }, []);
59
- useEffect(() => {
60
- setMounded(true);
61
- window.addEventListener("resize", resizeEvent);
62
- return () => window.removeEventListener("resize", resizeEvent);
63
- }, []);
64
- return (_jsx(_Fragment, { children: isMounded && active
65
- ? createPortal(_jsx("div", { "data-components": "dragboxs-root", children: _jsx(DragBoxsContext, { value: { id, positions }, children: _jsx(DndContext, { onDragEnd: dragEndEvent, modifiers: [dragModifiers], children: children }) }) }), document.body)
66
- : null }));
67
- };
68
- const DragBoxs = memo(DragBoxsBase);
69
- DragBoxs.displayName = "DragBoxs";
70
- export default DragBoxs;
@@ -1,14 +0,0 @@
1
- import { useDraggable, useDndContext } from "@dnd-kit/core";
2
- export type PositionsType = {
3
- x?: number;
4
- y?: number;
5
- };
6
- export interface DragBoxsContextType {
7
- id: string;
8
- positions: PositionsType;
9
- }
10
- export declare const DragBoxsContext: import("react").Context<DragBoxsContextType | undefined> & {
11
- displayName: string;
12
- };
13
- export declare const useDragBoxsContext: () => DragBoxsContextType;
14
- export { useDraggable, useDndContext };
@@ -1,10 +0,0 @@
1
- import { createContext, use } from 'react';
2
- import { useDraggable, useDndContext } from "@dnd-kit/core";
3
- export const DragBoxsContext = Object.assign(createContext(undefined), { displayName: "DragBoxsContext" });
4
- export const useDragBoxsContext = () => {
5
- const context = use(DragBoxsContext);
6
- if (context)
7
- return context;
8
- throw new Error('useDragPanel must be used inside provider');
9
- };
10
- export { useDraggable, useDndContext };
@@ -1,2 +0,0 @@
1
- export { default as DragBoxs } from "./dragBoxs";
2
- export * from "./dragBoxsContext";
@@ -1,2 +0,0 @@
1
- export { default as DragBoxs } from "./dragBoxs";
2
- export * from "./dragBoxsContext";
@@ -1,25 +0,0 @@
1
- import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
2
- import type { ComponentProps } from "../../types/index.js";
3
- declare function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
4
- declare function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
5
- declare function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
6
- declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
7
- declare function DropdownMenuGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
8
- declare function DropdownMenuItem({ className, inset, variant, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
9
- inset?: boolean;
10
- variant?: 'default' | 'destructive';
11
- }): import("react/jsx-runtime").JSX.Element;
12
- declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
13
- declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
14
- declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
15
- declare function DropdownMenuLabel({ className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
16
- inset?: boolean;
17
- }): import("react/jsx-runtime").JSX.Element;
18
- declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
19
- declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
20
- declare function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
21
- declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
22
- inset?: boolean;
23
- }): import("react/jsx-runtime").JSX.Element;
24
- declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
25
- export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
@@ -1,51 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
4
- import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
5
- import { cn } from "../../utils/index.js";
6
- function DropdownMenu({ ...props }) {
7
- return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
8
- }
9
- function DropdownMenuPortal({ ...props }) {
10
- return _jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
11
- }
12
- function DropdownMenuTrigger({ ...props }) {
13
- return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
14
- }
15
- function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
16
- return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("bg-popover", "text-popover-foreground", "data-[state=open]:animate-in", "data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0", "data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95", "data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "z-50", "max-h-(--radix-dropdown-menu-content-available-height)", "min-w-[8rem]", "origin-(--radix-dropdown-menu-content-transform-origin)", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "border", "p-1", "shadow-md", className), ...props }) }));
17
- }
18
- function DropdownMenuGroup({ ...props }) {
19
- return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
20
- }
21
- function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
22
- return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent", "focus:text-accent-foreground", "data-[variant=destructive]:text-destructive", "data-[variant=destructive]:focus:bg-destructive/50", "dark:data-[variant=destructive]:focus:bg-destructive/20", "data-[variant=destructive]:focus:text-destructive", "data-[variant=destructive]:*:[svg]:!text-destructive", "[&_svg:not([class*='text-'])]:text-muted-foreground", "relative", "flex", "cursor-default", "items-center", "gap-2", "rounded-sm", "px-2", "py-1.5", "text-sm", "outline-hidden", "select-none", "data-[disabled]:pointer-events-none", "data-[disabled]:opacity-50", "data-[inset]:pl-8", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", className), ...props }));
23
- }
24
- function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
25
- return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-accent", "focus:text-accent-foreground", "relative", "flex", "cursor-default", "items-center", "gap-2", "rounded-sm", "py-1.5", "pr-2", "pl-8", "text-sm", "outline-hidden", "select-none", "data-[disabled]:pointer-events-none", "data-[disabled]:opacity-50", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
26
- }
27
- function DropdownMenuRadioGroup({ ...props }) {
28
- return _jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
29
- }
30
- function DropdownMenuRadioItem({ className, children, ...props }) {
31
- return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus:bg-accent", "focus:text-accent-foreground", "relative", "flex", "cursor-default", "items-center", "gap-2", "rounded-sm", "py-1.5", "pr-2", "pl-8", "text-sm", "outline-hidden", "select-none", "data-[disabled]:pointer-events-none", "data-[disabled]:opacity-50", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
32
- }
33
- function DropdownMenuLabel({ className, inset, ...props }) {
34
- return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className), ...props }));
35
- }
36
- function DropdownMenuSeparator({ className, ...props }) {
37
- return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
38
- }
39
- function DropdownMenuShortcut({ className, ...props }) {
40
- return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
41
- }
42
- function DropdownMenuSub({ ...props }) {
43
- return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
44
- }
45
- function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
46
- return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("focus:bg-accent", "focus:text-accent-foreground", "data-[state=open]:bg-accent", "data-[state=open]:text-accent-foreground", "flex", "cursor-default", "items-center", "rounded-sm", "px-2", "py-1.5", "text-sm", "outline-hidden", "select-none", "data-[inset]:pl-8", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
47
- }
48
- function DropdownMenuSubContent({ className, ...props }) {
49
- return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("bg-popover", "text-popover-foreground", "data-[state=open]:animate-in", "data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0", "data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95", "data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "z-50", "min-w-[8rem]", "origin-(--radix-dropdown-menu-content-transform-origin)", "overflow-hidden", "rounded-md", "border", "p-1", "shadow-lg", className), ...props }));
50
- }
51
- export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
@@ -1 +0,0 @@
1
- export * from "./dropdown-menu";
@@ -1 +0,0 @@
1
- export * from "./dropdown-menu";
@@ -1 +0,0 @@
1
- export declare function useEffectLeave(callback: () => void): void;
@@ -1,9 +0,0 @@
1
- "use client";
2
- import { useEffect, useRef } from "react";
3
- export function useEffectLeave(callback) {
4
- const callbackRef = useRef(callback);
5
- callbackRef.current = callback;
6
- useEffect(() => {
7
- callbackRef.current?.();
8
- }, []);
9
- }
@@ -1 +0,0 @@
1
- export declare function useEffectOne(callback: () => void): void;
@@ -1,9 +0,0 @@
1
- "use client";
2
- import { useEffect, useRef } from "react";
3
- export function useEffectOne(callback) {
4
- const callbackRef = useRef(callback);
5
- callbackRef.current = callback;
6
- useEffect(() => {
7
- callbackRef.current?.();
8
- }, []);
9
- }