require('./Tooltip_1ed9tky.css');
'use strict';

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

var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var cls = require('classnames');
var react = require('@floating-ui/react');
var Slot = require('../../_Slot/Slot.js');
var Popover = require('../Popover/Popover.js');
var Tooltip_tokens = require('./Tooltip.tokens.js');
var Tooltip_styles = require('./Tooltip.styles.js');
var getFloatingPortalProps = require('../Popover/utils/getFloatingPortalProps.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var cls__default = /*#__PURE__*/_interopDefault(cls);

var _excluded = ["children", "target", "iconSlot", "trigger", "placement", "hasTail", "offset", "delayOpen", "delayClose", "zIndex", "className", "style", "size", "view", "portal"];
var tooltipRoot = function tooltipRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, outerRootRef) {
    var children = _ref.children,
      target = _ref.target,
      iconSlot = _ref.iconSlot,
      _ref$trigger = _ref.trigger,
      trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
      _ref$hasTail = _ref.hasTail,
      hasTail = _ref$hasTail === void 0 ? true : _ref$hasTail,
      _ref$offset = _ref.offset,
      outerOffset = _ref$offset === void 0 ? 0 : _ref$offset,
      _ref$delayOpen = _ref.delayOpen,
      delayOpen = _ref$delayOpen === void 0 ? 0 : _ref$delayOpen,
      _ref$delayClose = _ref.delayClose,
      delayClose = _ref$delayClose === void 0 ? 0 : _ref$delayClose,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
      className = _ref.className,
      style = _ref.style,
      size = _ref.size,
      view = _ref.view,
      portal = _ref.portal,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var _useState = React.useState(false),
      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
      opened = _useState2[0],
      setOpened = _useState2[1];
    var arrowRef = React.useRef(null);
    var handleToggle = function handleToggle(opened) {
      setOpened(opened);
    };
    var _useFloating = react.useFloating({
        whileElementsMounted: react.autoUpdate,
        placement: placement,
        open: opened,
        onOpenChange: handleToggle,
        middleware: [hasTail && react.arrow({
          element: arrowRef,
          padding: Popover.ARROW_PADDING
        }), react.offset((hasTail ? Popover.ARROW_HEIGHT : 0) + outerOffset)]
      }),
      refs = _useFloating.refs,
      floatingStyles = _useFloating.floatingStyles,
      context = _useFloating.context;
    var click = react.useClick(context, {
      enabled: trigger === 'click' || matchMedia('(hover: none)').matches
    });
    var focus = react.useFocus(context, {
      enabled: trigger === 'focus'
    });
    var dismiss = react.useDismiss(context, {
      enabled: true,
      outsidePress: true
    });
    var role = react.useRole(context);
    var hover = react.useHover(context, {
      mouseOnly: true,
      enabled: trigger === 'hover',
      handleClose: react.safePolygon({
        requireIntent: false
      }),
      delay: {
        open: delayOpen,
        close: delayClose
      }
    });
    var _useInteractions = react.useInteractions([dismiss, role, click, hover, focus]),
      getReferenceProps = _useInteractions.getReferenceProps,
      getFloatingProps = _useInteractions.getFloatingProps;
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(Slot.Slot, _rollupPluginBabelHelpers.extends({
      ref: refs.setReference
    }, getReferenceProps()), target), opened && /*#__PURE__*/React__default.default.createElement(react.FloatingPortal, getFloatingPortalProps.getFloatingPortalProps(portal), /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
      ref: refs.setFloating,
      size: size,
      view: view,
      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, floatingStyles), {}, {
        zIndex: zIndex
      })
    }, getFloatingProps()), /*#__PURE__*/React__default.default.createElement(Tooltip_styles.Wrapper, _rollupPluginBabelHelpers.extends({
      ref: outerRootRef,
      className: cls__default.default(className, Tooltip_tokens.classes.tooltipRoot),
      style: style,
      "data-tooltip-open": opened
    }, rest), iconSlot && /*#__PURE__*/React__default.default.createElement(Tooltip_styles.IconWrapper, null, iconSlot), children, hasTail && /*#__PURE__*/React__default.default.createElement(react.FloatingArrow, {
      ref: arrowRef,
      context: context,
      width: Popover.ARROW_WIDTH,
      height: Popover.ARROW_HEIGHT,
      fill: "var(".concat(Tooltip_tokens.tokens.backgroundColor, ")"),
      d: Popover.ARROW_POLYGON
    })))));
  });
};
var tooltipConfig = {
  name: 'Tooltip',
  tag: 'div',
  layout: tooltipRoot,
  base: Tooltip_styles.base,
  variations: {
    view: {
      css: "cvhemhj"
    },
    size: {
      css: "c16iadrc"
    }
  },
  defaults: {
    view: 'default',
    size: 'm'
  }
};

exports.tooltipConfig = tooltipConfig;
exports.tooltipRoot = tooltipRoot;
