@wix/design-system/dist/cjs/PopoverNext/hooks/useArrow.js

@wix/design-system

"use strict";

exports.__esModule = true;
exports.useArrow = void 0;
var _react = require("react");
var _react2 = require("@floating-ui/react");
var ARROW_HEIGHT_PX = 6;
var ARROW_WIDTH_PX = 12;
var getContentOffset = placement => {
  if (!placement || placement.includes('auto')) return {};
  var contentPlacement = placement.split('-')[0].trim();
  if (contentPlacement === 'auto') return {};
  var cssFieldFor = {
    top: 'top',
    bottom: 'top',
    right: 'left',
    left: 'left'
  };
  var offsetFor = {
    top: -ARROW_HEIGHT_PX,
    bottom: ARROW_HEIGHT_PX,
    left: -ARROW_HEIGHT_PX,
    right: ARROW_HEIGHT_PX
  };
  return {
    [cssFieldFor[contentPlacement]]: "".concat(offsetFor[contentPlacement], "px")
  };
};
var useArrow = showArrow => {
  var arrowRef = (0, _react.useRef)(null);
  var getArrowProps = context => ({
    ref: arrowRef,
    context,
    width: ARROW_WIDTH_PX,
    height: ARROW_HEIGHT_PX
  });
  var getContentWithArrowStyles = floatingPlacement => showArrow ? getContentOffset(floatingPlacement) : {};
  return {
    getArrowProps,
    arrowMiddleware: showArrow ? (0, _react2.arrow)({
      element: arrowRef,
      padding: 6
    }) : undefined,
    getContentWithArrowStyles
  };
};
exports.useArrow = useArrow;
//# sourceMappingURL=useArrow.js.map