@react-md/core 1.0.0-next.0

package/dist/transition/useSlideTransition.d.ts

@@ -0,0 +1,75 @@
+import type { CSSTransitionClassNames, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeout } from "./types.js";
+/** @remarks \@since 6.0.0 */
+export declare const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout>;
+/** @remarks \@since 6.0.0 */
+export declare const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+/** @remarks \@since 6.0.0 */
+export type SlideTransitionOptions<E extends HTMLElement> = PreconfiguredCSSTransitionOptions<E>;
+/**
+ * @example
+ * Simple Example
+ * ```tsx
+ * import type { SlideDirection } from "@react-md/core";
+ * import { slideContainer, useSlideTransition } from "@react-md/core";
+ * import type { ReactElement, ReactNode } from "react";
+ * import { useState } from "react";
+ *
+ * interface SlideProps {
+ *   active: boolean;
+ *   children: ReactNode;
+ * }
+ *
+ * function Slide({ active, children }: SlideProps): ReactElement | null {
+ *   const { rendered, elementProps } = useSlideTransition({
+ *     transition: active,
+ *   });
+ *
+ *   if (!rendered) {
+ *     return null;
+ *   }
+ *
+ *   return <div {...elementProps}>{children}</div>;
+ * }
+ *
+ * interface State {
+ *   direction: SlideDirection;
+ *   activeIndex: number;
+ * }
+ *
+ * function Example(): ReactElement {
+ *   const [state, setState] = useState<State>({
+ *     direction: "left",
+ *     activeIndex: 0,
+ *   });
+ *   const { direction, activeIndex } = state
+ *
+ *   // when changing a slide, `direction` should be set to "left" if the
+ *   // previous `activeIndex` is less than the next index
+ *   //
+ *   // i.e.
+ *   // setState((prevState) => ({
+ *   //   direction: prevState.activeIndex < index ? "left" : "right",
+ *   //   activeIndex: index,
+ *   // }))
+ *
+ *   return (
+ *     <div className={slideContainer({ direction )}>
+ *       <Slide active={activeIndex === 0}>
+ *         Slide 1
+ *       </Slide>
+ *       <Slide active={activeIndex === 1}>
+ *         Slide 2
+ *       </Slide>
+ *       <Slide active={activeIndex === 2}>
+ *         Slide 3
+ *       </Slide>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link SlideContainer} and {@link Slide} for convenient default
+ * implementations.
+ * @remarks \@since 6.0.0
+ */
+export declare function useSlideTransition<E extends HTMLElement>(options: SlideTransitionOptions<E>): CSSTransitionHookReturnValue<E>;

package/dist/transition/useSlideTransition.js

@@ -0,0 +1,89 @@
+"use client";
+import { cnb } from "cnbuilder";
+import { useCSSTransition } from "./useCSSTransition.js";
+/** @remarks \@since 6.0.0 */ export const DEFAULT_SLIDE_TRANSITION_TIMEOUT = 150;
+/** @remarks \@since 6.0.0 */ export const DEFAULT_SLIDE_TRANSITION_CLASSNAMES = {
+    enter: "rmd-slide--enter",
+    enterActive: "rmd-slide--enter-active rmd-slide--animate",
+    exit: "rmd-slide--exit",
+    exitActive: "rmd-slide--exit-active rmd-slide--animate"
+};
+/**
+ * @example
+ * Simple Example
+ * ```tsx
+ * import type { SlideDirection } from "@react-md/core";
+ * import { slideContainer, useSlideTransition } from "@react-md/core";
+ * import type { ReactElement, ReactNode } from "react";
+ * import { useState } from "react";
+ *
+ * interface SlideProps {
+ *   active: boolean;
+ *   children: ReactNode;
+ * }
+ *
+ * function Slide({ active, children }: SlideProps): ReactElement | null {
+ *   const { rendered, elementProps } = useSlideTransition({
+ *     transition: active,
+ *   });
+ *
+ *   if (!rendered) {
+ *     return null;
+ *   }
+ *
+ *   return <div {...elementProps}>{children}</div>;
+ * }
+ *
+ * interface State {
+ *   direction: SlideDirection;
+ *   activeIndex: number;
+ * }
+ *
+ * function Example(): ReactElement {
+ *   const [state, setState] = useState<State>({
+ *     direction: "left",
+ *     activeIndex: 0,
+ *   });
+ *   const { direction, activeIndex } = state
+ *
+ *   // when changing a slide, `direction` should be set to "left" if the
+ *   // previous `activeIndex` is less than the next index
+ *   //
+ *   // i.e.
+ *   // setState((prevState) => ({
+ *   //   direction: prevState.activeIndex < index ? "left" : "right",
+ *   //   activeIndex: index,
+ *   // }))
+ *
+ *   return (
+ *     <div className={slideContainer({ direction )}>
+ *       <Slide active={activeIndex === 0}>
+ *         Slide 1
+ *       </Slide>
+ *       <Slide active={activeIndex === 1}>
+ *         Slide 2
+ *       </Slide>
+ *       <Slide active={activeIndex === 2}>
+ *         Slide 3
+ *       </Slide>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link SlideContainer} and {@link Slide} for convenient default
+ * implementations.
+ * @remarks \@since 6.0.0
+ */ export function useSlideTransition(options) {
+    const { timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT, className, temporary = false, exitedHidden = true, ...transitionOptions } = options;
+    return useCSSTransition({
+        ...transitionOptions,
+        timeout,
+        className: cnb("rmd-slide", className),
+        classNames: DEFAULT_SLIDE_TRANSITION_CLASSNAMES,
+        temporary,
+        exitedHidden
+    });
+}
+
+//# sourceMappingURL=useSlideTransition.js.map

package/dist/transition/useSlideTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transition/useSlideTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout> = 150;\n\n/** @remarks \\@since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames> =\n  {\n    enter: \"rmd-slide--enter\",\n    enterActive: \"rmd-slide--enter-active rmd-slide--animate\",\n    exit: \"rmd-slide--exit\",\n    exitActive: \"rmd-slide--exit-active rmd-slide--animate\",\n  };\n\n/** @remarks \\@since 6.0.0 */\nexport type SlideTransitionOptions<E extends HTMLElement> =\n  PreconfiguredCSSTransitionOptions<E>;\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import type { SlideDirection } from \"@react-md/core\";\n * import { slideContainer, useSlideTransition } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface SlideProps {\n *   active: boolean;\n *   children: ReactNode;\n * }\n *\n * function Slide({ active, children }: SlideProps): ReactElement | null {\n *   const { rendered, elementProps } = useSlideTransition({\n *     transition: active,\n *   });\n *\n *   if (!rendered) {\n *     return null;\n *   }\n *\n *   return <div {...elementProps}>{children}</div>;\n * }\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"left\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state\n *\n *   // when changing a slide, `direction` should be set to \"left\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"left\" : \"right\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <div className={slideContainer({ direction )}>\n *       <Slide active={activeIndex === 0}>\n *         Slide 1\n *       </Slide>\n *       <Slide active={activeIndex === 1}>\n *         Slide 2\n *       </Slide>\n *       <Slide active={activeIndex === 2}>\n *         Slide 3\n *       </Slide>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link SlideContainer} and {@link Slide} for convenient default\n * implementations.\n * @remarks \\@since 6.0.0\n */\nexport function useSlideTransition<E extends HTMLElement>(\n  options: SlideTransitionOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n    className,\n    temporary = false,\n    exitedHidden = true,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    className: cnb(\"rmd-slide\", className),\n    classNames: DEFAULT_SLIDE_TRANSITION_CLASSNAMES,\n    temporary,\n    exitedHidden,\n  });\n}\n"],"names":["cnb","useCSSTransition","DEFAULT_SLIDE_TRANSITION_TIMEOUT","DEFAULT_SLIDE_TRANSITION_CLASSNAMES","enter","enterActive","exit","exitActive","useSlideTransition","options","timeout","className","temporary","exitedHidden","transitionOptions","classNames"],"mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAOhC,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,2BAA2B,GAC3B,OAAO,MAAMC,mCAAgE,IAAI;AAEjF,2BAA2B,GAC3B,OAAO,MAAMC,sCACX;IACEC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAMJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,SAASC,mBACdC,OAAkC;IAElC,MAAM,EACJC,UAAUR,gCAAgC,EAC1CS,SAAS,EACTC,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,mBACJ,GAAGL;IAEJ,OAAOR,iBAAiB;QACtB,GAAGa,iBAAiB;QACpBJ;QACAC,WAAWX,IAAI,aAAaW;QAC5BI,YAAYZ;QACZS;QACAC;IACF;AACF"}

package/dist/transition/useTransition.d.ts

@@ -0,0 +1,11 @@
+import type { TransitionHookOptions, TransitionHookReturnValue } from "./types.js";
+/**
+ * You'll most likely want to use the {@link useCSSTransition} hook instead
+ * since this is just a low-level hook that can be used to transition using
+ * timeouts.
+ *
+ * @typeParam E - The HTMLElement type used or the ref required for the
+ * transition.
+ * @remarks \@since 4.0.0
+ */
+export declare function useTransition<E extends HTMLElement>(options: TransitionHookOptions<E>): TransitionHookReturnValue<E>;

package/dist/transition/useTransition.js

@@ -0,0 +1,233 @@
+"use client";
+import { useEffect, useReducer, useRef, useState } from "react";
+import { useSsr } from "../SsrProvider.js";
+import { useEnsuredRef } from "../useEnsuredRef.js";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
+import { getTransitionTimeout } from "./utils.js";
+const INITIAL_STATE = {
+    appearing: false,
+    rendered: true,
+    stage: "exited"
+};
+const noop = ()=>{
+// do nothing
+};
+/**
+ * You'll most likely want to use the {@link useCSSTransition} hook instead
+ * since this is just a low-level hook that can be used to transition using
+ * timeouts.
+ *
+ * @typeParam E - The HTMLElement type used or the ref required for the
+ * transition.
+ * @remarks \@since 4.0.0
+ */ export function useTransition(options) {
+    const { nodeRef, timeout, transitionIn, reflow = false, temporary = false, appear = false, enter = true, exit = true, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop, disablePortal: propDisablePortal } = options;
+    const configurationRef = useRef({
+        timeout: getTransitionTimeout({
+            timeout,
+            appear,
+            enter,
+            exit
+        }),
+        reflow,
+        onEnter,
+        onEntering,
+        onEntered,
+        onExit,
+        onExiting,
+        onExited
+    });
+    useIsomorphicLayoutEffect(()=>{
+        configurationRef.current = {
+            timeout: getTransitionTimeout({
+                timeout,
+                appear,
+                enter,
+                exit
+            }),
+            reflow,
+            onEnter,
+            onEntering,
+            onEntered,
+            onExit,
+            onExiting,
+            onExited
+        };
+    }, [
+        appear,
+        enter,
+        exit,
+        onEnter,
+        onEntered,
+        onEntering,
+        onExit,
+        onExited,
+        onExiting,
+        reflow,
+        timeout
+    ]);
+    const ssr = useSsr();
+    const [ref, refCallback] = useEnsuredRef(nodeRef);
+    const [disablePortal, setDisablePortal] = useState(ssr);
+    const [state, dispatch] = useReducer(function reducer(state, action) {
+        const { appear, enter, exit } = configurationRef.current.timeout;
+        const { appearing } = state;
+        switch(action){
+            case "enter":
+                {
+                    const duration = appearing ? appear : enter;
+                    return {
+                        stage: duration > 0 ? "enter" : "entered",
+                        rendered: true,
+                        appearing
+                    };
+                }
+            case "entering":
+            case "entered":
+                return {
+                    stage: action,
+                    rendered: true,
+                    appearing
+                };
+            case "exit":
+                {
+                    const stage = exit > 0 ? "exit" : "exited";
+                    return {
+                        stage,
+                        rendered: !temporary || stage !== "exited",
+                        appearing: false
+                    };
+                }
+            case "exiting":
+            case "exited":
+                return {
+                    stage: action,
+                    rendered: true,
+                    appearing: false
+                };
+            case "unmount":
+                if (state.stage === "exited" && !state.appearing && !state.rendered) {
+                    return state;
+                }
+                return {
+                    stage: "exited",
+                    rendered: false,
+                    appearing: false
+                };
+        }
+    }, INITIAL_STATE, ()=>{
+        let stage = "exited";
+        if (transitionIn) {
+            stage = appear ? "enter" : "entered";
+        }
+        return {
+            appearing: appear && transitionIn,
+            rendered: !temporary || transitionIn,
+            stage
+        };
+    });
+    const { appearing, rendered, stage } = state;
+    const isFirstRender = useRef(true);
+    const isRehydrateAppear = useRef(ssr && !transitionIn);
+    const defaultTransitionIn = useRef(transitionIn);
+    useEffect(()=>{
+        const { timeout, reflow, onEnter, onEntering, onEntered, onExit, onExiting } = configurationRef.current;
+        let { onExited } = configurationRef.current;
+        if (isFirstRender.current) {
+            // The exited hook should **not** fire on first render since the element
+            // was never in the DOM.
+            isFirstRender.current = false;
+            onExited = noop;
+        }
+        // if the transitionIn did not change between initial render and rehydration,
+        // allow the enter transition to behave like normal.
+        if (isRehydrateAppear.current && !ssr && !transitionIn && !defaultTransitionIn.current) {
+            isRehydrateAppear.current = false;
+        }
+        // Cancel any exiting/exited transitions and instead immediately start the
+        // enter transition
+        if (transitionIn && stage.startsWith("exit")) {
+            const nextStage = isRehydrateAppear.current ? "entered" : "enter";
+            dispatch(nextStage);
+            return;
+        }
+        // Cancel any entering/entered transitions and instead immediately start the
+        // exit transition
+        if (!transitionIn && stage.startsWith("enter")) {
+            dispatch("exit");
+            return;
+        }
+        if (reflow && ref.current && stage !== "exited" && stage !== "entered") {
+            // force reflow by accessing scrollTop
+            ref.current.scrollTop;
+        }
+        let duration = 0;
+        let nextStage = stage;
+        switch(stage){
+            case "enter":
+                onEnter(appearing);
+                nextStage = "entering";
+                break;
+            case "entering":
+                onEntering(appearing);
+                duration = timeout.enter;
+                nextStage = "entered";
+                break;
+            case "entered":
+                onEntered(appearing);
+                break;
+            case "exit":
+                onExit();
+                nextStage = "exiting";
+                break;
+            case "exiting":
+                onExiting();
+                duration = timeout.exit;
+                nextStage = "exited";
+                break;
+            case "exited":
+                onExited();
+                setDisablePortal(false);
+                break;
+        }
+        if (stage === nextStage) {
+            // this is used to help catch changing the temporary prop.
+            // not sure if I should really support that though...
+            if (stage === "exited" && temporary) {
+                dispatch("unmount");
+            }
+            return;
+        }
+        // I used to rely on the `dispatch("unmount")` above, but it seems like
+        // there are some cases where re-rendering takes too long so the temporary
+        // element flashes
+        const dispatchStage = temporary && nextStage === "exited" ? "unmount" : nextStage;
+        if (duration <= 0) {
+            dispatch(dispatchStage);
+            return;
+        }
+        const timer = window.setTimeout(()=>{
+            dispatch(dispatchStage);
+        }, duration);
+        return ()=>{
+            window.clearTimeout(timer);
+        };
+    }, [
+        appearing,
+        ref,
+        ssr,
+        stage,
+        temporary,
+        transitionIn
+    ]);
+    return {
+        ref: refCallback,
+        stage,
+        rendered,
+        appearing,
+        transitionTo: dispatch,
+        disablePortal: propDisablePortal || disablePortal
+    };
+}
+
+//# sourceMappingURL=useTransition.js.map

package/dist/transition/useTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transition/useTransition.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useReducer, useRef, useState } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport type {\n  TransitionHookOptions,\n  TransitionHookReturnValue,\n  TransitionStage,\n  TransitionState,\n} from \"./types.js\";\nimport { getTransitionTimeout } from \"./utils.js\";\n\nconst INITIAL_STATE: TransitionState = {\n  appearing: false,\n  rendered: true,\n  stage: \"exited\",\n};\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * You'll most likely want to use the {@link useCSSTransition} hook instead\n * since this is just a low-level hook that can be used to transition using\n * timeouts.\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport function useTransition<E extends HTMLElement>(\n  options: TransitionHookOptions<E>\n): TransitionHookReturnValue<E> {\n  const {\n    nodeRef,\n    timeout,\n    transitionIn,\n    reflow = false,\n    temporary = false,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n    disablePortal: propDisablePortal,\n  } = options;\n\n  const configurationRef = useRef({\n    timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n    reflow,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    configurationRef.current = {\n      timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n    };\n  }, [\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntered,\n    onEntering,\n    onExit,\n    onExited,\n    onExiting,\n    reflow,\n    timeout,\n  ]);\n\n  const ssr = useSsr();\n  const [ref, refCallback] = useEnsuredRef<E>(nodeRef);\n  const [disablePortal, setDisablePortal] = useState(ssr);\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: TransitionState,\n      action: TransitionStage | \"unmount\"\n    ): TransitionState {\n      const { appear, enter, exit } = configurationRef.current.timeout;\n      const { appearing } = state;\n      switch (action) {\n        case \"enter\": {\n          const duration = appearing ? appear : enter;\n          return {\n            stage: duration > 0 ? \"enter\" : \"entered\",\n            rendered: true,\n            appearing,\n          };\n        }\n        case \"entering\":\n        case \"entered\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing,\n          };\n        case \"exit\": {\n          const stage = exit > 0 ? \"exit\" : \"exited\";\n          return {\n            stage,\n            rendered: !temporary || stage !== \"exited\",\n            appearing: false,\n          };\n        }\n        case \"exiting\":\n        case \"exited\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing: false,\n          };\n        case \"unmount\":\n          if (state.stage === \"exited\" && !state.appearing && !state.rendered) {\n            return state;\n          }\n\n          return {\n            stage: \"exited\",\n            rendered: false,\n            appearing: false,\n          };\n      }\n    },\n    INITIAL_STATE,\n    () => {\n      let stage: TransitionStage = \"exited\";\n      if (transitionIn) {\n        stage = appear ? \"enter\" : \"entered\";\n      }\n\n      return {\n        appearing: appear && transitionIn,\n        rendered: !temporary || transitionIn,\n        stage,\n      };\n    }\n  );\n  const { appearing, rendered, stage } = state;\n\n  const isFirstRender = useRef(true);\n  const isRehydrateAppear = useRef(ssr && !transitionIn);\n  const defaultTransitionIn = useRef(transitionIn);\n  useEffect(() => {\n    const {\n      timeout,\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n    } = configurationRef.current;\n    let { onExited } = configurationRef.current;\n    if (isFirstRender.current) {\n      // The exited hook should **not** fire on first render since the element\n      // was never in the DOM.\n      isFirstRender.current = false;\n      onExited = noop;\n    }\n\n    // if the transitionIn did not change between initial render and rehydration,\n    // allow the enter transition to behave like normal.\n    if (\n      isRehydrateAppear.current &&\n      !ssr &&\n      !transitionIn &&\n      !defaultTransitionIn.current\n    ) {\n      isRehydrateAppear.current = false;\n    }\n\n    // Cancel any exiting/exited transitions and instead immediately start the\n    // enter transition\n    if (transitionIn && stage.startsWith(\"exit\")) {\n      const nextStage = isRehydrateAppear.current ? \"entered\" : \"enter\";\n      dispatch(nextStage);\n      return;\n    }\n\n    // Cancel any entering/entered transitions and instead immediately start the\n    // exit transition\n    if (!transitionIn && stage.startsWith(\"enter\")) {\n      dispatch(\"exit\");\n      return;\n    }\n\n    if (reflow && ref.current && stage !== \"exited\" && stage !== \"entered\") {\n      // force reflow by accessing scrollTop\n      ref.current.scrollTop;\n    }\n\n    let duration = 0;\n    let nextStage: TransitionStage = stage;\n    switch (stage) {\n      case \"enter\":\n        onEnter(appearing);\n        nextStage = \"entering\";\n        break;\n      case \"entering\":\n        onEntering(appearing);\n        duration = timeout.enter;\n        nextStage = \"entered\";\n        break;\n      case \"entered\":\n        onEntered(appearing);\n        break;\n      case \"exit\":\n        onExit();\n        nextStage = \"exiting\";\n        break;\n      case \"exiting\":\n        onExiting();\n        duration = timeout.exit;\n        nextStage = \"exited\";\n        break;\n      case \"exited\":\n        onExited();\n        setDisablePortal(false);\n        break;\n    }\n\n    if (stage === nextStage) {\n      // this is used to help catch changing the temporary prop.\n      // not sure if I should really support that though...\n      if (stage === \"exited\" && temporary) {\n        dispatch(\"unmount\");\n      }\n\n      return;\n    }\n\n    // I used to rely on the `dispatch(\"unmount\")` above, but it seems like\n    // there are some cases where re-rendering takes too long so the temporary\n    // element flashes\n    const dispatchStage =\n      temporary && nextStage === \"exited\" ? \"unmount\" : nextStage;\n    if (duration <= 0) {\n      dispatch(dispatchStage);\n      return;\n    }\n\n    const timer = window.setTimeout(() => {\n      dispatch(dispatchStage);\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [appearing, ref, ssr, stage, temporary, transitionIn]);\n\n  return {\n    ref: refCallback,\n    stage,\n    rendered,\n    appearing,\n    transitionTo: dispatch,\n    disablePortal: propDisablePortal || disablePortal,\n  };\n}\n"],"names":["useEffect","useReducer","useRef","useState","useSsr","useEnsuredRef","useIsomorphicLayoutEffect","getTransitionTimeout","INITIAL_STATE","appearing","rendered","stage","noop","useTransition","options","nodeRef","timeout","transitionIn","reflow","temporary","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","disablePortal","propDisablePortal","configurationRef","current","ssr","ref","refCallback","setDisablePortal","state","dispatch","reducer","action","duration","isFirstRender","isRehydrateAppear","defaultTransitionIn","startsWith","nextStage","scrollTop","dispatchStage","timer","window","setTimeout","clearTimeout","transitionTo"],"mappings":"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"}

package/dist/transition/utils.d.ts

@@ -0,0 +1,44 @@
+import type { CSSTransitionClassNames, CSSTransitionClassNamesObject, TransitionActions, TransitionTimeout, TransitionTimeoutObject } from "./types.js";
+/**
+ * @remarks \@since 4.0.0
+ * @internal
+ */
+export interface TransitionTimeoutOptions extends Required<TransitionActions> {
+    timeout: TransitionTimeout;
+}
+/**
+ * @remarks \@since 4.0.0
+ * @internal
+ */
+export declare function getTransitionTimeout(options: Readonly<TransitionTimeoutOptions>): Readonly<Required<TransitionTimeoutObject>>;
+/**
+ * @remarks \@since 4.0.0
+ * @internal
+ */
+export interface CollapseSizing {
+    maxHeight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+}
+/**
+ * A small util that will find the max-height, padding-top, and padding-bottom
+ * for the provided element. This is really used to be able to transition the
+ * max-height value since `max-height: auto` does not transition. The only way
+ * to get transition is to change max-height values manually.
+ *
+ * @remarks \@since 4.0.0
+ * @internal
+ */
+export declare function getElementSizing(element: HTMLElement | null): CollapseSizing;
+/**
+ * @remarks \@since 4.0.0
+ * @internal
+ */
+export interface TransitionClassNamesOptions extends TransitionTimeoutOptions {
+    classNames: CSSTransitionClassNames;
+}
+/**
+ * @remarks \@since 4.0.0
+ * @internal
+ */
+export declare function getTransitionClassNames(options: TransitionClassNamesOptions): Readonly<Required<CSSTransitionClassNamesObject>>;

package/dist/transition/utils.js

@@ -0,0 +1,94 @@
+/**
+ * @remarks \@since 4.0.0
+ * @internal
+ */ export function getTransitionTimeout(options) {
+    const { timeout, appear, enter, exit } = options;
+    if (typeof timeout === "number") {
+        return {
+            appear: appear ? timeout : 0,
+            enter: enter ? timeout : 0,
+            exit: exit ? timeout : 0
+        };
+    }
+    return {
+        appear: appear && (timeout.appear ?? timeout.enter) || 0,
+        enter: enter && timeout.enter || 0,
+        exit: exit && timeout.exit || 0
+    };
+}
+/**
+ * A small util that will find the max-height, padding-top, and padding-bottom
+ * for the provided element. This is really used to be able to transition the
+ * max-height value since `max-height: auto` does not transition. The only way
+ * to get transition is to change max-height values manually.
+ *
+ * @remarks \@since 4.0.0
+ * @internal
+ */ export function getElementSizing(element) {
+    let maxHeight;
+    let paddingTop;
+    let paddingBottom;
+    if (element) {
+        // clone the element so that the total height and padding can be calculated
+        // without being affected by the collapse transition inline styles
+        const cloned = element.cloneNode(true);
+        cloned.style.maxHeight = "";
+        cloned.style.padding = "";
+        cloned.style.paddingLeft = element.style.paddingLeft;
+        cloned.style.paddingRight = element.style.paddingRight;
+        cloned.style.visibility = "hidden";
+        const container = element.parentElement || document.body;
+        container.appendChild(cloned);
+        maxHeight = cloned.scrollHeight;
+        const style = window.getComputedStyle(cloned);
+        if (style.paddingTop) {
+            paddingTop = parseFloat(style.paddingTop);
+            maxHeight + paddingTop;
+        }
+        if (style.paddingBottom) {
+            paddingBottom = parseFloat(style.paddingBottom);
+            maxHeight + paddingBottom;
+        }
+        container.removeChild(cloned);
+    }
+    return {
+        maxHeight,
+        paddingTop,
+        paddingBottom
+    };
+}
+/**
+ * @remarks \@since 4.0.0
+ * @internal
+ */ export function getTransitionClassNames(options) {
+    const { classNames, ...timeoutOptions } = options;
+    const timeout = getTransitionTimeout(timeoutOptions);
+    if (typeof classNames === "string") {
+        const { appear, enter, exit } = timeout;
+        return {
+            appear: appear ? `${classNames}--appear` : "",
+            appearActive: appear ? `${classNames}--appear-active` : "",
+            appearDone: "",
+            enter: enter ? `${classNames}--enter` : "",
+            enterActive: enter ? `${classNames}--enter-active` : "",
+            enterDone: "",
+            exit: exit ? `${classNames}--exit` : "",
+            exitActive: exit ? `${classNames}--exit-active` : "",
+            exitDone: ""
+        };
+    }
+    const { enter = "", enterActive = "", enterDone = "", exit = "", exitActive = "", exitDone = "", appear = timeout.appear && enter || "", appearActive = timeout.appear && enterActive || "", appearDone = timeout.appear && enterDone || "" } = classNames;
+    return {
+        appear,
+        appearActive,
+        appearDone,
+        enter,
+        enterActive,
+        enterDone,
+        exit,
+        exitActive,
+        exitDone
+    };
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/transition/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transition/utils.ts"],"sourcesContent":["import type {\n  CSSTransitionClassNames,\n  CSSTransitionClassNamesObject,\n  TransitionActions,\n  TransitionTimeout,\n  TransitionTimeoutObject,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface TransitionTimeoutOptions extends Required<TransitionActions> {\n  timeout: TransitionTimeout;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getTransitionTimeout(\n  options: Readonly<TransitionTimeoutOptions>\n): Readonly<Required<TransitionTimeoutObject>> {\n  const { timeout, appear, enter, exit } = options;\n  if (typeof timeout === \"number\") {\n    return {\n      appear: appear ? timeout : 0,\n      enter: enter ? timeout : 0,\n      exit: exit ? timeout : 0,\n    };\n  }\n\n  return {\n    appear: (appear && (timeout.appear ?? timeout.enter)) || 0,\n    enter: (enter && timeout.enter) || 0,\n    exit: (exit && timeout.exit) || 0,\n  };\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface CollapseSizing {\n  maxHeight?: number;\n  paddingTop?: number;\n  paddingBottom?: number;\n}\n\n/**\n * A small util that will find the max-height, padding-top, and padding-bottom\n * for the provided element. This is really used to be able to transition the\n * max-height value since `max-height: auto` does not transition. The only way\n * to get transition is to change max-height values manually.\n *\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getElementSizing(element: HTMLElement | null): CollapseSizing {\n  let maxHeight;\n  let paddingTop;\n  let paddingBottom;\n  if (element) {\n    // clone the element so that the total height and padding can be calculated\n    // without being affected by the collapse transition inline styles\n    const cloned = element.cloneNode(true) as HTMLElement;\n    cloned.style.maxHeight = \"\";\n    cloned.style.padding = \"\";\n    cloned.style.paddingLeft = element.style.paddingLeft;\n    cloned.style.paddingRight = element.style.paddingRight;\n    cloned.style.visibility = \"hidden\";\n\n    const container = element.parentElement || document.body;\n    container.appendChild(cloned);\n    maxHeight = cloned.scrollHeight;\n    const style = window.getComputedStyle(cloned);\n    if (style.paddingTop) {\n      paddingTop = parseFloat(style.paddingTop);\n      maxHeight + paddingTop;\n    }\n\n    if (style.paddingBottom) {\n      paddingBottom = parseFloat(style.paddingBottom);\n      maxHeight + paddingBottom;\n    }\n    container.removeChild(cloned);\n  }\n\n  return { maxHeight, paddingTop, paddingBottom };\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface TransitionClassNamesOptions extends TransitionTimeoutOptions {\n  classNames: CSSTransitionClassNames;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getTransitionClassNames(\n  options: TransitionClassNamesOptions\n): Readonly<Required<CSSTransitionClassNamesObject>> {\n  const { classNames, ...timeoutOptions } = options;\n  const timeout = getTransitionTimeout(timeoutOptions);\n\n  if (typeof classNames === \"string\") {\n    const { appear, enter, exit } = timeout;\n    return {\n      appear: appear ? `${classNames}--appear` : \"\",\n      appearActive: appear ? `${classNames}--appear-active` : \"\",\n      appearDone: \"\",\n      enter: enter ? `${classNames}--enter` : \"\",\n      enterActive: enter ? `${classNames}--enter-active` : \"\",\n      enterDone: \"\",\n      exit: exit ? `${classNames}--exit` : \"\",\n      exitActive: exit ? `${classNames}--exit-active` : \"\",\n      exitDone: \"\",\n    };\n  }\n\n  const {\n    enter = \"\",\n    enterActive = \"\",\n    enterDone = \"\",\n    exit = \"\",\n    exitActive = \"\",\n    exitDone = \"\",\n    appear = (timeout.appear && enter) || \"\",\n    appearActive = (timeout.appear && enterActive) || \"\",\n    appearDone = (timeout.appear && enterDone) || \"\",\n  } = classNames;\n\n  return {\n    appear,\n    appearActive,\n    appearDone,\n    enter,\n    enterActive,\n    enterDone,\n    exit,\n    exitActive,\n    exitDone,\n  };\n}\n"],"names":["getTransitionTimeout","options","timeout","appear","enter","exit","getElementSizing","element","maxHeight","paddingTop","paddingBottom","cloned","cloneNode","style","padding","paddingLeft","paddingRight","visibility","container","parentElement","document","body","appendChild","scrollHeight","window","getComputedStyle","parseFloat","removeChild","getTransitionClassNames","classNames","timeoutOptions","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone"],"mappings":"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"}

package/dist/tree/DefaultTreeItemRenderer.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement } from "react";
+import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.jsx";
+import { type DefaultTreeItemNode, type TreeItemNode } from "./types.js";
+/**
+ * **Client Component**
+ *
+ * A reasonable default for rendering tree items that will extract all the
+ * `ListItemChildrenProps` from the item and attempt to pass them into the
+ * `TreeItem`.
+ *
+ * Look at the `Tree` component for an example of creating a custom
+ * implementation.
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare function DefaultTreeItemRenderer<T extends TreeItemNode = DefaultTreeItemNode>(props: RenderRecursiveItemsProps<T>): ReactElement;

package/dist/tree/DefaultTreeItemRenderer.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TreeItem } from "./TreeItem.js";
+/**
+ * **Client Component**
+ *
+ * A reasonable default for rendering tree items that will extract all the
+ * `ListItemChildrenProps` from the item and attempt to pass them into the
+ * `TreeItem`.
+ *
+ * Look at the `Tree` component for an example of creating a custom
+ * implementation.
+ *
+ * @remarks \@since 6.0.0
+ */ export function DefaultTreeItemRenderer(props) {
+    const { item: _item, parents, children: childItems } = props;
+    const item = props.item;
+    const { itemId, to, href, disabled, className, contentClassName, leftAddon, leftAddonType, leftAddonPosition, leftAddonClassName, leftAddonForceWrap, rightAddon, rightAddonType, rightAddonPosition, rightAddonClassName, rightAddonForceWrap, disableLeftAddonCenteredMedia, disableRightAddonCenteredMedia } = item;
+    const children = item.name ?? item.children;
+    return /*#__PURE__*/ _jsx(TreeItem, {
+        to: to,
+        href: href,
+        depth: parents.length,
+        childItems: childItems,
+        className: className,
+        contentClassName: contentClassName,
+        itemId: itemId,
+        disabled: disabled,
+        leftAddon: leftAddon,
+        leftAddonType: leftAddonType,
+        leftAddonPosition: leftAddonPosition,
+        leftAddonClassName: leftAddonClassName,
+        leftAddonForceWrap: leftAddonForceWrap,
+        rightAddon: rightAddon,
+        rightAddonType: rightAddonType,
+        rightAddonPosition: rightAddonPosition,
+        rightAddonClassName: rightAddonClassName,
+        rightAddonForceWrap: rightAddonForceWrap,
+        disableLeftAddonCenteredMedia: disableLeftAddonCenteredMedia,
+        disableRightAddonCenteredMedia: disableRightAddonCenteredMedia,
+        children: children
+    });
+}
+
+//# sourceMappingURL=DefaultTreeItemRenderer.js.map