ultra-design/lib/trigger/layer.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var clsx = require('clsx');
var triggerStyles = require('./trigger-styles.js');
var reactTransitionGroup = require('react-transition-group');
var mergeProps = require('../utils/mergeProps.js');
var winhooks = require('winhooks');
var jsxRuntime = require('@emotion/react/jsx-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);

var Layer = function Layer(p, ref) {
  var props = mergeProps.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 = winhooks.usePortal({
    id: (getLayerContainer === null || getLayerContainer === void 0 ? void 0 : getLayerContainer(childRef === null || childRef === void 0 ? void 0 : childRef.current)) || name
  }),
      Portal = _usePortal.Portal;

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

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

exports["default"] = Layer$1;