"use client";
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { Children, cloneElement } from "react";
import { useScaleTransition } from "./useScaleTransition.js";
/**
 * **Client Component**
 *
 * A component implementation of the {@link useScaleTransition} hook that just
 * has some reasonable defaults and supports portalling the children. Since this
 * component uses the `React.cloneElement` to inject the `ref` and `className`
 * into the `children`, it is recommended to use the hook instead.
 *
 * @example Dropdown Menu Example
 * ```tsx
 * import { ReactElement, useRef, useState } from "react";
 * import { Button } from "@react-md/core/button/Button";
 * import { useFixedPositioning } from "@react-md/core/positioning/useFixedPositioning";
 * import { useScaleTransition } from "@react-md/core/transition/useScaleTransition";
 *
 * function Example(): ReactElement {
 *   const buttonRef = useRef<HTMLButtonElement>(null);
 *   const [transitionIn, setTransitionIn] = useState(false);
 *   const { style, transitionOptions } = useFixedPositioning({
 *     fixedTo: buttonRef,
 *   });
 *
 *   return (
 *     <>
 *       <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>
 *         Toggle
 *       </Button>
 *       <ScaleTransition
 *         {...transitionOptions}
 *         vertical
 *         transitionIn={transitionIn}
 *       >
 *         <div style={style}>
 *           Some content within a menu
 *         </div>
 *       </ScaleTransition>
 *     </>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/scale-transition | ScaleTransition Demos}
 * @typeParam E - The HTMLElement type used or the ref required for the
 * transition.
 * @since 2.0.0
 * @since 4.0.0 The typeParam was added and the API was updated.
 * @since 6.0.0 Removed the built-in support for portalling.
 */ export function ScaleTransition(props) {
    const { children, className, ...options } = props;
    const child = Children.only(children);
    const { elementProps, rendered } = useScaleTransition({
        ...options,
        className: cnb(child.props.className, className)
    });
    return /*#__PURE__*/ _jsx(_Fragment, {
        children: rendered && /*#__PURE__*/ cloneElement(children, elementProps)
    });
}

//# sourceMappingURL=ScaleTransition.js.map