@xwadex/fesd-next 0.3.20 → 0.3.22

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

@@ -5,9 +5,9 @@ type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
     defaultActive?: boolean;
     active?: boolean;
     time?: number;
-    timingFunction?: 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,31 +1,29 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useMemo, memo } from "react";
+import { useMemo, memo } from "react";
 import { AccordionsContext } from "./accordionsContext";
+import { useCollapse } from "../../hooks/index.js";
 const AccordionsBase = (props) => {
-    const { as, children, defaultActive = false, active, duration = 0.3, ease = [0.05, 0.8, 0.1, 0.95], 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 contextValue = useMemo(() => ({
-        duration,
-        ease,
+    const { contentRef, setExpand, isExpand } = useCollapse({
+        defaultActive,
         active,
-        isClickExtend,
-        expand,
-        setExpand,
-        onChanged,
+        time,
+        timingFunction,
+        onChange,
         onExpanded,
         onClosed
+    });
+    const contextValue = useMemo(() => ({
+        contentRef,
+        time,
+        timingFunction,
+        setExpand
     }), [
-        duration,
-        ease,
-        active,
-        isClickExtend,
-        expand,
-        setExpand,
-        onChanged,
-        onExpanded,
-        onClosed
+        time,
+        timingFunction,
+        setExpand
     ]);
     return (_jsx(AccordionsContext, { value: contextValue, children: _jsx(RootComponent, { ...othersProps, children: children }) }));
 };

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;
-    clickActive?: "open" | "close";
+    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

@@ -6,13 +6,7 @@ const AccordionsButtonBase = (props) => {
     const { as, clickActive, children, ...othersProps } = props;
     const RootComponent = as || "div";
     const { setExpand } = useAccordionsContext();
-    return (_jsx(RootComponent, { ...othersProps, onClick: () => setExpand(prev => {
-            if (clickActive == "open")
-                return true;
-            if (clickActive == "close")
-                return false;
-            return !prev;
-        }), children: children }));
+    return (_jsx(RootComponent, { ...othersProps, onClick: () => setExpand(clickActive), children: children }));
 };
 const AccordionsButton = memo(AccordionsButtonBase);
 AccordionsButton.displayName = "AccordionsButton";

package/dist/components/accordions/accordionsContent.js

@@ -1,29 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "motion/react";
-import { memo, useEffect } from "react";
+import { memo } from "react";
 import { useAccordionsContext } from "./accordionsContext";
+import styles from "./accordions.module.scss";
 const AccordionsContentBase = (props) => {
     const { as, children, className, style, ...othersProps } = props;
-    const RootComponent = motion.create(as || "div");
-    const { duration, ease, expand, setExpand, onChanged, onExpanded, onClosed, active } = useAccordionsContext();
-    useEffect(() => {
-        if (typeof active !== "boolean")
-            return;
-        setExpand(active);
-    }, [active]);
-    return (_jsx(AnimatePresence, { initial: false, children: (expand) && _jsx(RootComponent, { ...othersProps, initial: "collapsed", animate: "open", exit: "collapsed", custom: expand, variants: {
-                open: { height: 'auto', opacity: 1 },
-                collapsed: { height: 0, opacity: 0 },
-            }, transition: { duration, ease }, onAnimationStart: (variants) => {
-                onChanged?.(variants == "open" ? true : false);
-            }, onAnimationComplete: (variants) => {
-                const isExpand = variants == "open" ? true : false;
-                if (!isExpand)
-                    onClosed?.(false);
-                if (isExpand)
-                    onExpanded?.(true);
-            }, children: children }) }));
+    const RootComponent = as || "div";
+    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
+        }, children: children }));
 };
 const AccordionsContent = memo(AccordionsContentBase);
 AccordionsContent.displayName = "AccordionsContent";

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

@@ -1,15 +1,15 @@
 export interface AccordionsContextType {
-    duration?: number;
-    ease?: number[];
-    active?: boolean;
-    isClickExtend?: boolean;
-    expand: boolean;
-    setExpand: React.Dispatch<React.SetStateAction<boolean>>;
-    onChanged?: (state: boolean) => void;
-    onExpanded?: (state: boolean) => void;
-    onClosed?: (state: boolean) => void;
+    time?: number;
+    timingFunction?: string;
+    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

@@ -6,7 +6,7 @@ const AccordionsHeaderBase = (props) => {
     const { as, children, ...othersProps } = props;
     const RootComponent = as || "div";
     const { setExpand } = useAccordionsContext();
-    return (_jsx(RootComponent, { ...othersProps, onClick: () => setExpand(prev => !prev), children: children }));
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwadex/fesd-next",
-  "version": "0.3.20",
+  "version": "0.3.22",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",