@xwadex/fesd-next 0.3.21 → 0.3.23

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

@@ -1,16 +1,11 @@
-import { AsPropsTypes } from "../../types/index.js";
+import { CollapseTypes } from "../../hooks/index.js";
+import type { AsPropsTypes } from "../../types/index.js";
 type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
     as?: React.ElementType;
     children?: React.ReactNode;
     defaultActive?: boolean;
     active?: boolean;
-    time?: number;
-    timingFunction?: string;
-    isClickExtend?: boolean;
-    onChange?: (state: boolean) => void;
-    onExpanded?: (state: boolean) => void;
-    onClosed?: (state: boolean) => void;
-}>;
+} & CollapseTypes>;
 declare const AccordionsBase: <T extends React.ElementType = "div">(props: PropsTypes<T>) => import("react/jsx-runtime").JSX.Element;
 declare const Accordions: React.MemoExoticComponent<typeof AccordionsBase>;
 export default Accordions;

package/dist/components/accordions/accordions.js

@@ -1,31 +1,49 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, memo } from "react";
+import { useCallback, useMemo, memo, useEffect } 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)", onChange, onExpanded, onClosed, ...othersProps } = props;
+    const { as, children, defaultActive = false, active, time, ease, onInit, onChange, onExpand, onClose, ...othersProps } = props;
     const RootComponent = as || "div";
-    const { contentRef, setExpand, isExpand } = useCollapse({
-        defaultActive,
-        active,
+    const isActive = typeof active == "boolean";
+    const defaultOpen = isActive ? active : defaultActive;
+    const { contentRef, setOpen, open, } = useCollapse({
+        defaultOpen,
         time,
-        timingFunction,
+        ease,
+        onInit,
         onChange,
-        onExpanded,
-        onClosed
+        onExpand,
+        onClose
     });
+    const isExpand = isActive ? active : open;
+    const setExpand = useCallback((state) => {
+        const nextState = typeof state === "boolean" ? state : !isExpand;
+        if (nextState === isExpand)
+            return;
+        if (!isActive)
+            setOpen(nextState);
+        setOpen(nextState);
+    }, [isExpand, isActive, setOpen]);
+    useEffect(() => {
+        if ((isActive && active) || defaultActive)
+            setOpen(true);
+    }, []);
+    useEffect(() => {
+        setOpen(isExpand);
+    }, [isExpand]);
     const contextValue = useMemo(() => ({
         contentRef,
         time,
-        timingFunction,
+        ease,
         setExpand
     }), [
         time,
-        timingFunction,
+        ease,
         setExpand
     ]);
-    return (_jsxs(AccordionsContext, { value: contextValue, children: [JSON.stringify(isExpand), _jsx(RootComponent, { ...othersProps, children: children })] }));
+    return (_jsxs(AccordionsContext, { value: contextValue, children: [JSON.stringify(open), _jsx(RootComponent, { ...othersProps, children: children })] }));
 };
 const Accordions = memo(AccordionsBase);
 Accordions.displayName = "Accordions";

package/dist/components/accordions/accordionsContent.js

@@ -2,15 +2,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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 = as || "div";
-    const { contentRef, time, timingFunction, } = useAccordionsContext();
-    return (_jsx(RootComponent, { ...othersProps, ref: contentRef, className: className ? styles.contents + " " + className : styles.contents, style: {
+    const { contentRef } = useAccordionsContext();
+    return (_jsx(RootComponent, { ...othersProps, ref: contentRef, style: {
             ...style,
-            transition: time ? time / 1000 + "s" : undefined,
-            transitionTimingFunction: timingFunction
+            overflow: "hidden",
+            maxWith: "100%",
+            maxHeight: "0"
         }, children: children }));
 };
 const AccordionsContent = memo(AccordionsContentBase);

package/dist/hooks/useAsyncFetcher.d.ts

@@ -1,11 +1,10 @@
-type ReturnDatasTypes = {
+export interface ReturnDatasTypes {
     fetcher: (payload: PayloadTypes) => Promise<any>;
     cancel: () => void;
     pending: boolean;
-};
-interface PayloadTypes {
+}
+export interface PayloadTypes {
     url: string | URL | globalThis.Request;
     options?: RequestInit;
 }
 export declare function useAsyncFetcher(): ReturnDatasTypes;
-export {};

package/dist/hooks/useCollapse.d.ts

@@ -1,13 +1,14 @@
-export declare function useCollapse({ defaultActive, active, time, timingFunction, onChange, onExpanded, onClosed, }: {
-    defaultActive?: boolean;
-    active?: boolean;
+export interface CollapseTypes {
+    defaultOpen?: boolean;
     time?: number;
-    timingFunction?: string;
-    onChange?: (state: boolean) => void;
-    onExpanded?: (state: boolean) => void;
-    onClosed?: (state: boolean) => void;
-}): {
+    ease?: string;
+    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>;
-    setExpand: (state?: boolean) => void;
-    isExpand: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    open: boolean;
 };

package/dist/hooks/useCollapse.js

@@ -1,61 +1,55 @@
 "use client";
-import { useCallback, useState, useMemo, useRef, useEffect } from "react";
+import { useCallback, useState, 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, }) {
+export function useCollapse({ defaultOpen = false, time = 0.3, ease = "Cubic-Bezier(0.05, 0.8, 0.1, 0.95)", onInit, onChange, onExpand, onClose, }) {
     const contentRef = useRef(null);
     const isMounted = useRef(false);
-    const isActive = typeof active == "boolean";
-    const [open, setOpen] = useState(defaultActive);
+    const [open, setOpen] = useState(defaultOpen);
     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) => {
+    const setExpandHeight = useCallback((height) => {
+        if (!contentRef.current)
+            return;
+        const target = contentRef.current;
+        const nextHeight = height == "none" ? height : height + "px";
+        target.style.maxHeight = nextHeight;
+        target.offsetHeight; // hack to force reflow
+    }, []);
+    const eventCallbacks = useCallback((state) => state
+        ? onExpand?.(state)
+        : onClose?.(state), [onExpand, onClose]);
+    const expandAnimate = useCallback(async (state) => {
         if (isAnimating || !contentRef?.current)
             return;
         setAnimating(true);
         onChange?.(state);
         const target = contentRef.current;
-        target.style.height = target.scrollHeight + "px";
-        target.offsetHeight;
+        setExpandHeight(target.scrollHeight);
         await sleep(!state ? 0 : getDomTransTime(target));
-        target.style.height = state ? "auto" : "0";
-        callbackHandler(state);
+        setExpandHeight(state ? "none" : "0");
+        eventCallbacks(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]);
+    }, [isAnimating, onChange, eventCallbacks]);
     useEffect(() => {
-        if ((isActive && active) || defaultActive)
-            animate(true);
+        if (!contentRef.current)
+            return;
+        const target = contentRef.current;
+        target.style.transition = time + "s";
+        target.style.transitionTimingFunction = ease;
+        if (!defaultOpen)
+            return;
+        setExpandHeight(target.scrollHeight);
     }, []);
     useEffect(() => {
         if (!isMounted.current) {
             isMounted.current = true;
+            onInit?.(true);
             return;
         }
-        animate(isExpand);
-    }, [isExpand]);
-    const contextValue = useMemo(() => ({
-        contentRef,
-        time,
-        timingFunction,
-        setExpand
-    }), [
-        time,
-        timingFunction,
-        setExpand
-    ]);
+        expandAnimate(open);
+    }, [open]);
     return {
         contentRef,
-        setExpand,
-        isExpand
+        setOpen,
+        open,
     };
 }

package/package.json

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

package/dist/components/accordions/accordions.module.scss

@@ -1,18 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-}
-
-.headers {
-  font-size: 1.2rem;
-  font-weight: 600;
-}
-
-.contents {
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  &[data-active="true"] {
-    height: auto;
-  }
-}