@atlaskit/editor-common 74.19.2 → 74.20.0

package/dist/esm/link/LinkPicker/EditorLinkPicker/index.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["view", "onCancel", "invokeMethod", "editorAppearance", "onClose", "onEscapeCallback", "onClickAwayCallback"];
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { LinkPicker } from '@atlaskit/link-picker';
+import { getAnalyticsEditorAppearance } from '../../../utils';
+import { useEscapeClickaway } from './useEscapeClickaway';
+
+/**
+ * Returns a type that matches T but where keys (K) are now optional
+ */
+
+export var EditorLinkPicker = function EditorLinkPicker(_ref) {
+  var view = _ref.view,
+    onCancel = _ref.onCancel,
+    _ref$invokeMethod = _ref.invokeMethod,
+    invokeMethod = _ref$invokeMethod === void 0 ? '_unknown' : _ref$invokeMethod,
+    editorAppearance = _ref.editorAppearance,
+    onClose = _ref.onClose,
+    onEscapeCallback = _ref.onEscapeCallback,
+    onClickAwayCallback = _ref.onClickAwayCallback,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  /**
+   * Track onClose handler in a
+   * ref so that we void needing it in the dependency array
+   * below
+   */
+  var onCloseRef = useRef(onClose);
+  useEffect(function () {
+    onCloseRef.current = onClose;
+  });
+
+  /**
+   * Call onClose on mount, usefull to provide
+   * a handler for performing an action after the component has been
+   * unmounted (e.g. return focus to the editors)
+   */
+  useEffect(function () {
+    return function () {
+      var _onCloseRef$current;
+      return (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef);
+    };
+  }, []);
+  var onEscape = useCallback(function () {
+    var state = view.state,
+      dispatch = view.dispatch;
+    onEscapeCallback === null || onEscapeCallback === void 0 ? void 0 : onEscapeCallback(state, dispatch);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel, onEscapeCallback]);
+  var onClickAway = useCallback(function () {
+    var state = view.state,
+      dispatch = view.dispatch;
+    onClickAwayCallback === null || onClickAwayCallback === void 0 ? void 0 : onClickAwayCallback(state, dispatch);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel, onClickAwayCallback]);
+  var ref = useEscapeClickaway(onEscape, onClickAway);
+  var analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
+  var analyticsData = useMemo(function () {
+    return {
+      attributes: {
+        invokeMethod: invokeMethod,
+        location: analyticsEditorAppearance
+      },
+      // Below is added for the future implementation of Linking Platform namespaced analytic context
+      location: analyticsEditorAppearance
+    };
+  }, [invokeMethod, analyticsEditorAppearance]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: analyticsData
+  }, /*#__PURE__*/React.createElement(LinkPicker, _extends({}, restProps, {
+    onCancel: onEscape
+  }))));
+};

package/dist/esm/link/LinkPicker/EditorLinkPicker/useEscapeClickaway.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+export var useEscapeClickaway = function useEscapeClickaway(onEscape, onClickAway) {
+  var ref = useRef(null);
+  useEffect(function () {
+    var handleClickAway = function handleClickAway(event) {
+      var el = ref.current;
+      if (event.target instanceof Element && el && !el.contains(event.target)) {
+        onClickAway();
+      }
+    };
+    var handleKeydown = function handleKeydown(event) {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onEscape();
+      }
+    };
+    document.addEventListener('mousedown', handleClickAway);
+    document.addEventListener('keydown', handleKeydown);
+    return function () {
+      document.removeEventListener('mousedown', handleClickAway);
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [onClickAway, onEscape]);
+  return ref;
+};