@dialpad/dialtone/dist/vue2/components/popover/tippy_utils.js

Dialpad's Dialtone design system monorepo

import tippy, { sticky } from "tippy.js";
const BASE_TIPPY_DIRECTIONS = [
  "bottom",
  "bottom-start",
  "bottom-end",
  "right",
  "right-start",
  "right-end",
  "left",
  "left-start",
  "left-end",
  "top",
  "top-start",
  "top-end"
];
const TIPPY_STICKY_VALUES = [true, false, "reference", "popper"];
const createTippyPopover = (anchorElement, options) => {
  const { contentElement } = { ...options };
  delete options.contentElement;
  return tippy(anchorElement, {
    ...options,
    plugins: [sticky],
    render: () => getContentWrapper(contentElement)
  });
};
const createTippy = (anchorElement, options) => {
  return tippy(anchorElement, {
    ...options,
    plugins: [sticky]
  });
};
const getPopperOptions = ({
  boundary = "clippingParents",
  fallbackPlacements = [],
  onChangePlacement = () => {
  },
  hasHideModifierEnabled = false,
  // If set to false the dialog will display over top of the anchor when there is insufficient space.
  // if set to true it will never move from its position relative to the anchor and will clip instead.
  tether = true
} = {}) => {
  return {
    modifiers: [
      {
        name: "flip",
        options: {
          fallbackPlacements,
          boundary
        }
      },
      {
        name: "hide",
        enabled: hasHideModifierEnabled
      },
      {
        name: "preventOverflow",
        options: {
          altAxis: !tether,
          tether
        }
      }
    ]
  };
};
const createAnchor = (anchorWrapper) => {
  const span = document.createElement("span");
  span.innerText = anchorWrapper.innerText || "";
  anchorWrapper.innerText = "";
  anchorWrapper.appendChild(span);
  return span;
};
const getAnchor = (anchorWrapper) => {
  const anchor = anchorWrapper == null ? void 0 : anchorWrapper.children[0];
  if (!anchor) return createAnchor(anchorWrapper);
  return anchor;
};
const getContentWrapper = (content) => {
  const popper = document.createElement("div");
  popper.className = "tippy-box d-ps-absolute";
  popper.appendChild(content);
  return {
    popper
  };
};
export {
  BASE_TIPPY_DIRECTIONS,
  TIPPY_STICKY_VALUES,
  createTippy,
  createTippyPopover,
  getAnchor,
  getContentWrapper,
  getPopperOptions
};
//# sourceMappingURL=tippy_utils.js.map