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

Salesforce Lightning Design System components built with React

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
var _excluded = ["children", "alignment", "hidden", "theme", "tooltip", "style", "bodyStyle"],
  _excluded2 = ["position", "offsetX", "offsetY"];
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) { _defineProperty(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; }
import React, { forwardRef, useId, useEffect } from 'react';
import classnames from 'classnames';
import { AutoAlign } from './AutoAlign';
import { registerStyle } from './util';

/**
 *
 */
function useInitComponentStyle() {
  useEffect(function () {
    registerStyle('popover', [['.react-slds-popover.slds-popover_tooltip a', '{ color: white; }']]);
  }, []);
}

/**
 *
 */
export var PopoverHeader = function PopoverHeader(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "slds-popover__header"
  }, props.children);
};

/**
 *
 */

export var PopoverBody = function PopoverBody(props) {
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "slds-popover__body"
  }, props), props.children);
};

/**
 *
 */

/**
 *
 */
export var PopoverInner = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
  var nubbinPosition = alignment.join('-');
  var _alignment = _slicedToArray(alignment, 2),
    firstAlign = _alignment[0],
    secondAlign = _alignment[1];
  var popoverClassNames = classnames('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), {}, _defineProperty({
    position: 'absolute'
  }, firstAlign, 0), secondAlign ? _defineProperty({}, 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 = useId();
  return /*#__PURE__*/React.createElement("section", _extends({
    ref: ref,
    className: popoverClassNames,
    role: tooltip ? 'tooltip' : 'dialog',
    style: rootStyle,
    "aria-describedby": bodyId
  }, rprops), /*#__PURE__*/React.createElement(PopoverBody, {
    id: bodyId,
    style: bodyStyle
  }, children));
});

/**
 *
 */
export var Popover = /*#__PURE__*/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 = _objectWithoutProperties(_ref2, _excluded2);
  useInitComponentStyle();
  var alignment = position === null || position === void 0 ? void 0 : position.split('-');
  return /*#__PURE__*/React.createElement(AutoAlign, {
    triggerSelector: ".slds-dropdown-trigger",
    alignmentStyle: "popover",
    alignment: alignment,
    offsetX: offsetX,
    offsetY: offsetY
  }, function (injectedProps) {
    return /*#__PURE__*/React.createElement(PopoverInner, _extends({}, props, injectedProps, {
      ref: ref
    }));
  });
});
//# sourceMappingURL=Popover.js.map