ultra-design/es/trigger/layer.js

import { forwardRef } from 'react';
import clsx from 'clsx';
import { layerStyles } from './trigger-styles.js';
import { CSSTransition } from 'react-transition-group';
import { useMergeProps } from '../utils/mergeProps.js';
import { usePortal } from 'winhooks';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';

var Layer = function Layer(p, ref) {
  var props = useMergeProps({}, p);
  var content = props.content,
      placement = props.placement,
      visible = props.visible,
      showArrow = props.showArrow,
      layerClassName = props.layerClassName,
      getLayerContainer = props.getLayerContainer,
      transitionClassName = props.transitionClassName,
      transitionTimeout = props.transitionTimeout,
      childRef = props.childRef,
      style = props.style,
      onMouseEnter = props.onMouseEnter,
      onMouseLeave = props.onMouseLeave,
      name = props.name,
      className = props.className;

  var _usePortal = usePortal({
    id: (getLayerContainer === null || getLayerContainer === void 0 ? void 0 : getLayerContainer(childRef === null || childRef === void 0 ? void 0 : childRef.current)) || name
  }),
      Portal = _usePortal.Portal;

  return jsx(Portal, {
    children: jsx("div", {
      ref: ref,
      className: clsx("".concat(name, "-layer-wrapper"), layerClassName, className),
      style: style,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave,
      css: layerStyles(props),
      children: jsx(CSSTransition, {
        "in": visible,
        unmountOnExit: true,
        timeout: transitionTimeout,
        classNames: transitionClassName,
        children: jsxs("div", {
          className: "".concat(name),
          children: [jsx("div", {
            className: "".concat(name, "__content"),
            children: content
          }), showArrow && jsx("div", {
            className: clsx("".concat(name, "__arrow"), "".concat(name, "__arrow--placement__").concat(placement))
          })]
        })
      })
    })
  });
};

var Layer$1 = /*#__PURE__*/forwardRef(Layer);

export { Layer$1 as default };