@xwadex/fesd-next 0.3.24 → 0.3.26

package/dist/components/accordions/accordions.js

@@ -1,48 +1,44 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, memo, useEffect } from "react";
+import { useCallback, useMemo, memo, useEffect, startTransition } from "react";
 import { AccordionsContext } from "./accordionsContext";
 import { useCollapse } from "../../hooks/index.js";
 const AccordionsBase = (props) => {
-    const { as, children, defaultActive = false, active, time, ease, onInit, onChange, onExpand, onClose, ...othersProps } = props;
+    const { as, children, defaultActive = false, active, transDuration, transTiming, transMode, transDelay, onInit, onChange, onExpand, onClose, ...othersProps } = props;
     const RootComponent = as || "div";
     const isActive = typeof active == "boolean";
     const defaultOpen = isActive ? active : defaultActive;
-    const { contentRef, setOpen, open, } = useCollapse({
+    const { setOpen, open, contentRef, } = useCollapse({
         defaultOpen,
-        time,
-        ease,
+        transDuration,
+        transTiming,
+        transMode,
+        transDelay,
         onInit,
         onChange,
         onExpand,
         onClose
     });
-    const isExpand = isActive ? active : open;
+    const isOpen = isActive ? active : open;
     const setExpand = useCallback((state) => {
-        const nextState = typeof state === "boolean" ? state : !isExpand;
-        if (nextState === isExpand)
+        const nextOpen = typeof state === "boolean" ? state : !isOpen;
+        if (nextOpen === isOpen)
             return;
         if (!isActive)
-            setOpen(nextState);
-        setOpen(nextState);
-    }, [isExpand, isActive, setOpen]);
+            return setOpen(nextOpen);
+        startTransition(() => setOpen(nextOpen));
+    }, [isOpen, isActive, setOpen]);
     useEffect(() => {
         if ((isActive && active) || defaultActive)
             setOpen(true);
     }, []);
     useEffect(() => {
-        setOpen(isExpand);
-    }, [isExpand]);
+        setOpen(isOpen);
+    }, [isOpen]);
     const contextValue = useMemo(() => ({
         contentRef,
-        time,
-        ease,
         setExpand
-    }), [
-        time,
-        ease,
-        setExpand
-    ]);
+    }), [setExpand]);
     return (_jsx(AccordionsContext, { value: contextValue, children: _jsx(RootComponent, { ...othersProps, children: children }) }));
 };
 const Accordions = memo(AccordionsBase);

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

@@ -1,7 +1,7 @@
 export interface AccordionsContextType {
     time?: number;
     timingFunction?: string;
-    contentRef: React.RefObject<null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
     defaultActive?: boolean;
     isActive?: boolean;
     setExpand: (state?: boolean) => void;

package/dist/components/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./myComponents";
 export * from "./accordions";
 export * from "./dragResize";
 export * from "./dragSortable";

package/dist/components/index.js

@@ -1,4 +1,3 @@
-export * from "./myComponents";
 export * from "./accordions";
 export * from "./dragResize";
 export * from "./dragSortable";

package/dist/hooks/useCollapse.d.ts

@@ -1,14 +1,16 @@
 export interface CollapseTypes {
     defaultOpen?: boolean;
-    time?: number;
-    ease?: string;
+    transDuration?: number;
+    transTiming?: string;
+    transMode?: "fade" | "normal";
+    transDelay?: number;
     onInit?: (isInit: boolean) => void;
     onChange?: (isOpen: boolean) => void;
     onExpand?: (isOpen: boolean) => void;
     onClose?: (isOpen: boolean) => void;
 }
-export declare function useCollapse({ defaultOpen, time, ease, onInit, onChange, onExpand, onClose, }: CollapseTypes): {
-    contentRef: import("react").RefObject<null>;
-    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+export declare function useCollapse({ defaultOpen, transDuration, transTiming, transMode, transDelay, onInit, onChange, onExpand, onClose, }: CollapseTypes): {
+    setOpen: (state: boolean) => void;
+    contentRef: import("react").RefObject<HTMLDivElement | null>;
     open: boolean;
 };

package/dist/hooks/useCollapse.js

@@ -1,55 +1,74 @@
 "use client";
-import { useCallback, useState, useRef, useEffect } from "react";
+import { useCallback, useState, useRef, useEffect, startTransition } from "react";
 import { getDomTransTime, sleep } from "../utils/index.js";
-export function useCollapse({ defaultOpen = false, time = 0.3, ease = "Cubic-Bezier(0.05, 0.8, 0.1, 0.95)", onInit, onChange, onExpand, onClose, }) {
+export function useCollapse({ defaultOpen = false, transDuration = 0.3, transTiming = "cubic-bezier(.24,0,0,.99)", transMode = "normal", transDelay = 0, onInit, onChange, onExpand, onClose, }) {
     const contentRef = useRef(null);
-    const isMounted = useRef(false);
+    const isMountedRef = useRef(false);
+    const isAnimatingRef = useRef(false);
+    const nextOpenRef = useRef(null);
     const [open, setOpen] = useState(defaultOpen);
-    const [isAnimating, setAnimating] = useState(false);
-    const setExpandHeight = useCallback((height) => {
-        if (!contentRef.current)
-            return;
+    const setOpenState = useCallback((state) => {
+        if (!isAnimatingRef.current)
+            return setOpen(state);
+        nextOpenRef.current = state;
+    }, [open]);
+    const setExpandTransition = useCallback((events) => {
         const target = contentRef.current;
-        const nextHeight = height == "none" ? height : height + "px";
-        target.style.maxHeight = nextHeight;
+        if (!target)
+            return;
+        if (events === "start") {
+            target.style.maxHeight = target.scrollHeight + "px";
+            target.style.opacity = transMode == "fade" ? "1" : "";
+        }
+        if (events === "open") {
+            target.style.maxHeight = "none";
+            target.style.opacity = transMode == "fade" ? "1" : "";
+        }
+        if (events === "close") {
+            target.style.maxHeight = "0";
+            target.style.opacity = transMode == "fade" ? "0" : "";
+        }
         target.offsetHeight; // hack to force reflow
-    }, []);
-    const eventCallbacks = useCallback((state) => state
-        ? onExpand?.(state)
-        : onClose?.(state), [onExpand, onClose]);
+    }, [transMode]);
     const expandAnimate = useCallback(async (state) => {
-        if (isAnimating || !contentRef?.current)
+        if (!contentRef?.current)
             return;
-        setAnimating(true);
+        isAnimatingRef.current = true;
         onChange?.(state);
+        setExpandTransition("start");
         const target = contentRef.current;
-        setExpandHeight(target.scrollHeight);
-        await sleep(!state ? 0 : getDomTransTime(target));
-        setExpandHeight(state ? "none" : "0");
-        eventCallbacks(state);
-        setAnimating(false);
-    }, [isAnimating, onChange, eventCallbacks]);
-    useEffect(() => {
-        if (!contentRef.current)
+        await sleep(state ? getDomTransTime(target) : 0);
+        setExpandTransition(state ? "open" : "close");
+        state ? onExpand?.(state) : onClose?.(state);
+        isAnimatingRef.current = false;
+        const nextState = nextOpenRef.current;
+        if (nextState == null || nextState == state)
             return;
+        nextOpenRef.current = null;
+        setOpen(nextState);
+    }, [setExpandTransition, onChange, onExpand, onClose]);
+    useEffect(() => {
         const target = contentRef.current;
-        target.style.transition = time + "s";
-        target.style.transitionTimingFunction = ease;
-        if (!defaultOpen)
+        if (!target)
             return;
-        setExpandHeight(target.scrollHeight);
+        target.style.overflow = "hidden";
+        target.style.transition = transDuration + "s";
+        target.style.transitionDelay = transDelay + "s";
+        target.style.transitionTimingFunction = transTiming;
+        if (defaultOpen)
+            startTransition(() => setExpandTransition("start"));
     }, []);
     useEffect(() => {
-        if (!isMounted.current) {
-            isMounted.current = true;
+        if (!isMountedRef.current) {
+            isMountedRef.current = true;
             onInit?.(true);
             return;
         }
-        expandAnimate(open);
+        startTransition(() => expandAnimate(open));
     }, [open]);
     return {
+        setOpen: setOpenState,
         contentRef,
-        setOpen,
-        open,
+        open
     };
 }

package/package.json

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

package/dist/components/myComponents/MyComponent.d.ts

@@ -1,2 +0,0 @@
-declare const MyComponent: () => import("react/jsx-runtime").JSX.Element;
-export default MyComponent;

package/dist/components/myComponents/MyComponent.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './MyComponent.module.scss';
-const MyComponent = () => (_jsx("div", { className: styles.container, children: "Hello World" }));
-export default MyComponent;

package/dist/components/myComponents/MyComponent.module.scss

@@ -1,3 +0,0 @@
-.container {
-  color: red;
-}

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

@@ -1 +0,0 @@
-export { default as MyComponent } from './MyComponent';

package/dist/components/myComponents/index.js

@@ -1 +0,0 @@
-export { default as MyComponent } from './MyComponent';