@wordpress/nux/build/components/dot-tip/index.js

NUX (New User eXperience) module for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DotTip = DotTip;
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function onClick(event) {
  // Tips are often nested within buttons. We stop propagation so that clicking
  // on a tip doesn't result in the button being clicked.
  event.stopPropagation();
}
function DotTip({
  position = 'middle right',
  children,
  isVisible,
  hasNextTip,
  onDismiss,
  onDisable
}) {
  const anchorParent = (0, _element.useRef)(null);
  const onFocusOutsideCallback = (0, _element.useCallback)(event => {
    if (!anchorParent.current) {
      return;
    }
    if (anchorParent.current.contains(event.relatedTarget)) {
      return;
    }
    onDisable();
  }, [onDisable, anchorParent]);
  if (!isVisible) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Popover, {
    className: "nux-dot-tip",
    position: position,
    focusOnMount: true,
    role: "dialog",
    "aria-label": (0, _i18n.__)('Editor tips'),
    onClick: onClick,
    onFocusOutside: onFocusOutsideCallback,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      children: children
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        __next40pxDefaultSize: true,
        variant: "link",
        onClick: onDismiss,
        children: hasNextTip ? (0, _i18n.__)('See next tip') : (0, _i18n.__)('Got it')
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
      size: "small",
      className: "nux-dot-tip__disable",
      icon: _icons.close,
      label: (0, _i18n.__)('Disable tips'),
      onClick: onDisable
    })]
  });
}
var _default = exports.default = (0, _compose.compose)((0, _data.withSelect)((select, {
  tipId
}) => {
  const {
    isTipVisible,
    getAssociatedGuide
  } = select(_store.store);
  const associatedGuide = getAssociatedGuide(tipId);
  return {
    isVisible: isTipVisible(tipId),
    hasNextTip: !!(associatedGuide && associatedGuide.nextTipId)
  };
}), (0, _data.withDispatch)((dispatch, {
  tipId
}) => {
  const {
    dismissTip,
    disableTips
  } = dispatch(_store.store);
  return {
    onDismiss() {
      dismissTip(tipId);
    },
    onDisable() {
      disableTips();
    }
  };
}))(DotTip);
//# sourceMappingURL=index.js.map