@xwadex/fesd-next 0.3.19 → 0.3.21

package/dist/components/accordions/accordions.d.ts

@@ -7,7 +7,7 @@ type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
     time?: number;
     timingFunction?: string;
     isClickExtend?: boolean;
-    onChanged?: (state: boolean) => void;
+    onChange?: (state: boolean) => void;
     onExpanded?: (state: boolean) => void;
     onClosed?: (state: boolean) => void;
 }>;

package/dist/components/accordions/accordions.js

@@ -1,45 +1,31 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState, useMemo, memo } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, memo } from "react";
 import { AccordionsContext } from "./accordionsContext";
+import { useCollapse } from "../../hooks/index.js";
 const AccordionsBase = (props) => {
-    const { as, children, defaultActive = false, active, time = 300, timingFunction = "var(--global-animation-timing)", isClickExtend = true, onChanged, onExpanded, onClosed, ...othersProps } = props;
+    const { as, children, defaultActive = false, active, time = 300, timingFunction = "var(--global-animation-timing)", onChange, onExpanded, onClosed, ...othersProps } = props;
     const RootComponent = as || "div";
-    const [expand, setExpand] = useState(defaultActive);
-    const [isWorking, setWorking] = useState(false);
-    const setExtandHandler = useCallback((state) => {
-        if (isWorking || !isClickExtend)
-            return;
-        if (typeof state !== "boolean")
-            setExpand(prev => !prev);
-        else
-            setExpand(state);
-    }, [isWorking, isClickExtend]);
-    const contextValue = useMemo(() => ({
+    const { contentRef, setExpand, isExpand } = useCollapse({
+        defaultActive,
+        active,
         time,
         timingFunction,
-        active,
-        isClickExtend,
-        expand,
-        setExtandHandler,
-        isWorking,
-        setWorking,
-        onChanged,
+        onChange,
         onExpanded,
         onClosed
+    });
+    const contextValue = useMemo(() => ({
+        contentRef,
+        time,
+        timingFunction,
+        setExpand
     }), [
         time,
         timingFunction,
-        active,
-        isClickExtend,
-        expand,
-        isWorking,
-        setExtandHandler,
-        onChanged,
-        onExpanded,
-        onClosed
+        setExpand
     ]);
-    return (_jsx(AccordionsContext, { value: contextValue, children: _jsx(RootComponent, { ...othersProps, children: children }) }));
+    return (_jsxs(AccordionsContext, { value: contextValue, children: [JSON.stringify(isExpand), _jsx(RootComponent, { ...othersProps, children: children })] }));
 };
 const Accordions = memo(AccordionsBase);
 Accordions.displayName = "Accordions";

package/dist/components/accordions/accordionsButton.d.ts

@@ -1,7 +1,7 @@
 import type { AsPropsTypes } from "../../types/index.js";
 type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
     as?: React.ElementType;
-    active?: boolean;
+    clickActive?: boolean;
     children?: React.ReactNode;
 }>;
 declare const AccordionsButtonBase: <T extends React.ElementType = "div">(props: PropsTypes<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordions/accordionsButton.js

@@ -3,10 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { useAccordionsContext } from "./accordionsContext";
 const AccordionsButtonBase = (props) => {
-    const { as, active, children, ...othersProps } = props;
+    const { as, clickActive, children, ...othersProps } = props;
     const RootComponent = as || "div";
-    const { setExtandHandler } = useAccordionsContext();
-    return (_jsx(RootComponent, { ...othersProps, onClick: () => setExtandHandler(active), children: children }));
+    const { setExpand } = useAccordionsContext();
+    return (_jsx(RootComponent, { ...othersProps, onClick: () => setExpand(clickActive), children: children }));
 };
 const AccordionsButton = memo(AccordionsButtonBase);
 AccordionsButton.displayName = "AccordionsButton";

package/dist/components/accordions/accordionsContent.js

@@ -1,43 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo } from "react";
 import { useAccordionsContext } from "./accordionsContext";
-import { getDomTransTime, sleep } from "../../utils/index.js";
 import styles from "./accordions.module.scss";
 const AccordionsContentBase = (props) => {
-    const { as, children, ...othersProps } = props;
+    const { as, children, className, style, ...othersProps } = props;
     const RootComponent = as || "div";
-    const { time, timingFunction, expand, active, isWorking, setWorking, onChanged, onExpanded, onClosed, } = useAccordionsContext();
-    const menuRef = useRef(null);
-    const [open, setOpen] = useState(expand);
-    const callbackHandler = useCallback((state) => state
-        ? onExpanded?.(state)
-        : onClosed?.(state), [onExpanded, onClosed]);
-    const setOpenHandler = useCallback(async (state) => {
-        if (expand == open || isWorking || !menuRef?.current)
-            return;
-        setWorking(true);
-        const target = menuRef.current;
-        target.style.height = target.scrollHeight + "px";
-        await sleep(!state ? 0 : getDomTransTime(target));
-        target.style.height = "";
-        setOpen(state);
-        setWorking(false);
-        onChanged?.(state);
-        callbackHandler(state);
-    }, [expand, isWorking, onChanged]);
-    useEffect(() => {
-        setOpenHandler(expand);
-    }, [expand]);
-    useEffect(() => {
-        if (typeof active !== "boolean")
-            return;
-        setOpenHandler(active);
-    }, [active]);
-    return (_jsx(RootComponent, { ...othersProps, ref: menuRef, className: styles.contents, style: {
+    const { contentRef, time, timingFunction, } = useAccordionsContext();
+    return (_jsx(RootComponent, { ...othersProps, ref: contentRef, className: className ? styles.contents + " " + className : styles.contents, style: {
+            ...style,
             transition: time ? time / 1000 + "s" : undefined,
             transitionTimingFunction: timingFunction
-        }, "data-active": open, children: children }));
+        }, children: children }));
 };
 const AccordionsContent = memo(AccordionsContentBase);
 AccordionsContent.displayName = "AccordionsContent";

package/dist/components/accordions/accordionsContext.d.ts

@@ -1,17 +1,15 @@
 export interface AccordionsContextType {
     time?: number;
     timingFunction?: string;
-    active?: boolean;
-    isClickExtend?: boolean;
-    expand: boolean;
-    setExtandHandler: (state?: boolean) => void;
-    isWorking: boolean;
-    setWorking: React.Dispatch<React.SetStateAction<boolean>>;
-    onChanged?: (state: boolean) => void;
-    onExpanded?: (state: boolean) => void;
-    onClosed?: (state: boolean) => void;
+    contentRef: React.RefObject<null>;
+    defaultActive?: boolean;
+    isActive?: boolean;
+    setExpand: (state?: boolean) => void;
 }
 export declare const AccordionsContext: import("react").Context<AccordionsContextType | undefined> & {
     displayName: string;
 };
 export declare const useAccordionsContext: () => AccordionsContextType;
+export declare const useAccordionsExpand: () => {
+    setAccordionsExpand: (state?: boolean) => void;
+};

package/dist/components/accordions/accordionsContext.js

@@ -7,3 +7,7 @@ export const useAccordionsContext = () => {
         return context;
     throw new Error("AccordionsContext is not defined!!");
 };
+export const useAccordionsExpand = () => {
+    const { setExpand } = useAccordionsContext();
+    return { setAccordionsExpand: setExpand };
+};

package/dist/components/accordions/accordionsHeader.js

@@ -5,8 +5,8 @@ import { useAccordionsContext } from "./accordionsContext";
 const AccordionsHeaderBase = (props) => {
     const { as, children, ...othersProps } = props;
     const RootComponent = as || "div";
-    const { setExtandHandler } = useAccordionsContext();
-    return (_jsx(RootComponent, { ...othersProps, onClick: setExtandHandler, children: children }));
+    const { setExpand } = useAccordionsContext();
+    return (_jsx(RootComponent, { ...othersProps, onClick: setExpand, children: children }));
 };
 const AccordionsHeader = memo(AccordionsHeaderBase);
 AccordionsHeader.displayName = "AccordionsHeader";

package/dist/components/accordions/index.d.ts

@@ -2,3 +2,4 @@ export { default as Accordions } from "./accordions";
 export { default as AccordionsContent } from "./accordionsContent";
 export { default as AccordionsHeader } from "./accordionsHeader";
 export { default as AccordionsButton } from "./accordionsButton";
+export * from "./accordionsContext";

package/dist/components/accordions/index.js

@@ -2,4 +2,5 @@ export { default as Accordions } from "./accordions";
 export { default as AccordionsContent } from "./accordionsContent";
 export { default as AccordionsHeader } from "./accordionsHeader";
 export { default as AccordionsButton } from "./accordionsButton";
+export * from "./accordionsContext";
 // export { default as Accordions } from "./accordions";

package/dist/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from "./useDebounceValue";
 export * from "./useCookies";
 export * from "./useDragResize";
 export * from "./useAsyncFetcher";
+export * from "./useCollapse";

package/dist/hooks/index.js

@@ -3,3 +3,4 @@ export * from "./useDebounceValue";
 export * from "./useCookies";
 export * from "./useDragResize";
 export * from "./useAsyncFetcher";
+export * from "./useCollapse";

package/dist/hooks/useCollapse.d.ts

@@ -0,0 +1,13 @@
+export declare function useCollapse({ defaultActive, active, time, timingFunction, onChange, onExpanded, onClosed, }: {
+    defaultActive?: boolean;
+    active?: boolean;
+    time?: number;
+    timingFunction?: string;
+    onChange?: (state: boolean) => void;
+    onExpanded?: (state: boolean) => void;
+    onClosed?: (state: boolean) => void;
+}): {
+    contentRef: import("react").RefObject<null>;
+    setExpand: (state?: boolean) => void;
+    isExpand: boolean;
+};

package/dist/hooks/useCollapse.js

@@ -0,0 +1,61 @@
+"use client";
+import { useCallback, useState, useMemo, useRef, useEffect } from "react";
+import { getDomTransTime, sleep } from "../utils/index.js";
+export function useCollapse({ defaultActive, active, time = 300, timingFunction = "var(--global-animation-timing)", onChange, onExpanded, onClosed, }) {
+    const contentRef = useRef(null);
+    const isMounted = useRef(false);
+    const isActive = typeof active == "boolean";
+    const [open, setOpen] = useState(defaultActive);
+    const [isAnimating, setAnimating] = useState(false);
+    const isExpand = isActive ? active : open;
+    const callbackHandler = useCallback((state) => state
+        ? onExpanded?.(state)
+        : onClosed?.(state), [onExpanded, onClosed]);
+    const animate = useCallback(async (state) => {
+        if (isAnimating || !contentRef?.current)
+            return;
+        setAnimating(true);
+        onChange?.(state);
+        const target = contentRef.current;
+        target.style.height = target.scrollHeight + "px";
+        target.offsetHeight;
+        await sleep(!state ? 0 : getDomTransTime(target));
+        target.style.height = state ? "auto" : "0";
+        callbackHandler(state);
+        setAnimating(false);
+    }, [contentRef, isAnimating]);
+    const setExpand = useCallback((state) => {
+        const nextState = typeof state === "boolean" ? state : !isExpand;
+        if (nextState === isExpand)
+            return;
+        if (!isActive)
+            setOpen(nextState);
+        animate(nextState);
+    }, [isExpand, isActive, animate]);
+    useEffect(() => {
+        if ((isActive && active) || defaultActive)
+            animate(true);
+    }, []);
+    useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+            return;
+        }
+        animate(isExpand);
+    }, [isExpand]);
+    const contextValue = useMemo(() => ({
+        contentRef,
+        time,
+        timingFunction,
+        setExpand
+    }), [
+        time,
+        timingFunction,
+        setExpand
+    ]);
+    return {
+        contentRef,
+        setExpand,
+        isExpand
+    };
+}

package/dist/utils/index.js

@@ -35,18 +35,33 @@ export const getSearchParams = (searchParams) => {
     searchParams.forEach((value, key) => { params[key] = value; });
     return params;
 };
+// export const getDomTransTime = (target: HTMLElement): number => {
+//     const computedStyle = window.getComputedStyle(target)
+//     const transNumber = (time: string) => {
+//         if (time.endsWith("ms")) return parseFloat(time)
+//         if (time.endsWith("s")) return parseFloat(time) * 1000
+//         return 0
+//     }
+//     const durations = computedStyle.transitionDuration.split(',').map(transNumber)
+//     const delays = computedStyle.transitionDelay.split(',').map(transNumber)
+//     return Math.max(...durations.map((d, i) => d + (delays[i] || 0)))
+// }
 export const getDomTransTime = (target) => {
+    if (!target)
+        return 0;
     const computedStyle = window.getComputedStyle(target);
-    const transNumber = (time) => {
-        if (time.endsWith("ms"))
-            return parseFloat(time);
-        if (time.endsWith("s"))
-            return parseFloat(time) * 1000;
+    const parseTime = (timeStr) => {
+        timeStr = timeStr.trim();
+        if (timeStr.endsWith("ms"))
+            return parseFloat(timeStr);
+        if (timeStr.endsWith("s"))
+            return parseFloat(timeStr) * 1000;
         return 0;
     };
-    const durations = computedStyle.transitionDuration.split(',').map(transNumber);
-    const delays = computedStyle.transitionDelay.split(',').map(transNumber);
-    return Math.max(...durations.map((d, i) => d + (delays[i] || 0)));
+    const durations = computedStyle.transitionDuration.split(",").map(parseTime);
+    const delays = computedStyle.transitionDelay.split(",").map(parseTime);
+    const maxLength = Math.max(durations.length, delays.length);
+    return Math.max(...Array.from({ length: maxLength }, (_, i) => (durations[i] || 0) + (delays[i] || 0)));
 };
 export const getURLSearchParams = (searchParams) => {
     const params = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwadex/fesd-next",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,6 +39,7 @@
     "react-dom": ">=18",
     "next": ">=15.3.3",
     "tua-body-scroll-lock": ">=1.5.3",
-    "react-sortablejs": ">=6.1.4"
+    "react-sortablejs": ">=6.1.4",
+    "motion": ">12.18.1"
   }
 }