import React__default, { forwardRef } from 'react';
import { createPortal } from 'react-dom';
import { settings } from '../../../../constants/Settings.js';

var iotPrefix = settings.iotPrefix;

/**
 * During a drag and drop we want a border around the row we're about to drop on. We can't add a CSS
 * border on the row since the cells already have borders on them. And if we alter them and change
 * widths, the table shifts. Instead, we overlay a transparent element over the row and add the
 * border to that. That is this overlay.
 *
 * @param {object} props
 */
var TableDropRowOverlay = /*#__PURE__*/forwardRef(function TableDropRowOverlay(_, ref) {
  return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--table-drop-row-overlay"),
    ref: ref
  }), document.body);
});
TableDropRowOverlay.__docgenInfo = {
  "description": "During a drag and drop we want a border around the row we're about to drop on. We can't add a CSS\nborder on the row since the cells already have borders on them. And if we alter them and change\nwidths, the table shifts. Instead, we overlay a transparent element over the row and add the\nborder to that. That is this overlay.\n\n@param {object} props",
  "methods": [],
  "displayName": "TableDropRowOverlay"
};

export { TableDropRowOverlay };
