react-lightning-design-system/lib/scripts/Popover.js

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PopoverInner = exports.PopoverHeader = exports.PopoverBody = exports.Popover = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _AutoAlign = require("./AutoAlign");
var _util = require("./util");
var _excluded = ["children", "alignment", "hidden", "theme", "tooltip", "style", "bodyStyle"],
  _excluded2 = ["position", "offsetX", "offsetY"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 *
 */
function useInitComponentStyle() {
  (0, _react.useEffect)(function () {
    (0, _util.registerStyle)('popover', [['.react-slds-popover.slds-popover_tooltip a', '{ color: white; }']]);
  }, []);
}

/**
 *
 */
var PopoverHeader = exports.PopoverHeader = function PopoverHeader(props) {
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "slds-popover__header"
  }, props.children);
};

/**
 *
 */

var PopoverBody = exports.PopoverBody = function PopoverBody(props) {
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: "slds-popover__body"
  }, props), props.children);
};

/**
 *
 */

/**
 *
 */
var PopoverInner = exports.PopoverInner = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var children = props.children,
    alignment = props.alignment,
    hidden = props.hidden,
    theme = props.theme,
    tooltip = props.tooltip,
    style = props.style,
    bodyStyle = props.bodyStyle,
    rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var nubbinPosition = alignment.join('-');
  var _alignment = (0, _slicedToArray2["default"])(alignment, 2),
    firstAlign = _alignment[0],
    secondAlign = _alignment[1];
  var popoverClassNames = (0, _classnames["default"])('react-slds-popover', 'slds-popover', {
    'slds-hide': hidden,
    'slds-popover_tooltip': tooltip
  }, "slds-nubbin_".concat(nubbinPosition), "slds-m-".concat(firstAlign, "_small"), theme ? "slds-theme_".concat(theme) : undefined);
  var rootStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), {}, (0, _defineProperty2["default"])({
    position: 'absolute'
  }, firstAlign, 0), secondAlign ? (0, _defineProperty2["default"])({}, secondAlign, 0) : {}), tooltip ? {
    width: 'max-content'
  } : {}), {}, {
    transform: secondAlign === undefined ? firstAlign === 'top' || firstAlign === 'bottom' ? 'translateX(-50%)' : firstAlign === 'left' || firstAlign === 'right' ? 'translateY(-50%)' : undefined : undefined
  });
  var bodyId = (0, _react.useId)();
  return /*#__PURE__*/_react["default"].createElement("section", (0, _extends2["default"])({
    ref: ref,
    className: popoverClassNames,
    role: tooltip ? 'tooltip' : 'dialog',
    style: rootStyle,
    "aria-describedby": bodyId
  }, rprops), /*#__PURE__*/_react["default"].createElement(PopoverBody, {
    id: bodyId,
    style: bodyStyle
  }, children));
});

/**
 *
 */
var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
  var position = _ref2.position,
    _ref2$offsetX = _ref2.offsetX,
    offsetX = _ref2$offsetX === void 0 ? 0 : _ref2$offsetX,
    _ref2$offsetY = _ref2.offsetY,
    offsetY = _ref2$offsetY === void 0 ? 0 : _ref2$offsetY,
    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
  useInitComponentStyle();
  var alignment = position === null || position === void 0 ? void 0 : position.split('-');
  return /*#__PURE__*/_react["default"].createElement(_AutoAlign.AutoAlign, {
    triggerSelector: ".slds-dropdown-trigger",
    alignmentStyle: "popover",
    alignment: alignment,
    offsetX: offsetX,
    offsetY: offsetY
  }, function (injectedProps) {
    return /*#__PURE__*/_react["default"].createElement(PopoverInner, (0, _extends2["default"])({}, props, injectedProps, {
      ref: ref
    }));
  });
});
//# sourceMappingURL=Popover.js.map