@atlaskit/mention 27.17.0 → 27.18.0

package/dist/es2019/components/Mention/index.js

@@ -1,229 +1,20 @@
-/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import "./index.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
 /* eslint-disable @atlaskit/design-system/no-deprecated-imports, @typescript-eslint/ban-types -- Preserve existing mention implementation while focus-ring usage is reviewed separately. */
-import React from 'react';
-import FocusRing from '@atlaskit/focus-ring';
-import MessagesIntlProvider from '../MessagesIntlProvider';
-import PrimitiveMention from './PrimitiveMention';
-import AsyncNoAccessTooltip from '../NoAccessTooltip';
-import AsyncDisabledMentionTooltip from '../DisabledMentionTooltip';
-import { UNKNOWN_USER_ID } from '../../_constants';
-import { isRestricted, MentionType } from '../../types';
-import { fireAnalyticsMentionEvent } from '../../util/analytics';
+
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { UFOExperienceState } from '@atlaskit/ufo';
-import { UnknownUserError } from '../../util/i18n';
-import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
+import { fireAnalyticsMentionEvent } from '../../util/fire-analytics-mention-event';
+import { MentionInternal } from './MentionInternal';
 export const ANALYTICS_HOVER_DELAY = 1000;
-export { UNKNOWN_USER_ID } from '../../_constants';
-const avatarStyles = null;
-const avatarFallbackStyles = null;
-const avatarImageStyles = null;
-const agentAvatarStyles = null;
-export class MentionInternal extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      hasAvatarError: false
-    });
-    _defineProperty(this, "handleAvatarError", () => {
-      this.setState({
-        hasAvatarError: true
-      });
-    });
-    _defineProperty(this, "handleOnClick", e => {
-      const {
-        id,
-        text,
-        onClick,
-        isDisabled
-      } = this.props;
-      if (isDisabled) {
-        // Disabled chips do not invoke their click handler.
-        return;
-      }
-      if (onClick) {
-        onClick(id, text, e);
-      }
-    });
-    _defineProperty(this, "handleOnMouseEnter", e => {
-      const {
-        id,
-        text,
-        onMouseEnter,
-        onHover
-      } = this.props;
-      if (onMouseEnter) {
-        onMouseEnter(id, text, e);
-      }
-      this.hoverTimeout = window.setTimeout(() => {
-        if (onHover) {
-          onHover();
-        }
-        this.hoverTimeout = undefined;
-      }, ANALYTICS_HOVER_DELAY);
-    });
-    _defineProperty(this, "handleOnMouseLeave", e => {
-      const {
-        id,
-        text,
-        onMouseLeave
-      } = this.props;
-      if (onMouseLeave) {
-        onMouseLeave(id, text, e);
-      }
-      if (this.hoverTimeout) {
-        clearTimeout(this.hoverTimeout);
-      }
-    });
-    _defineProperty(this, "getMentionType", () => {
-      const {
-        accessLevel,
-        isHighlighted,
-        isDisabled
-      } = this.props;
-      if (isDisabled) {
-        return MentionType.DISABLED;
-      }
-      if (isHighlighted) {
-        return MentionType.SELF;
-      }
-      if (isRestricted(accessLevel)) {
-        return MentionType.RESTRICTED;
-      }
-      return MentionType.DEFAULT;
-    });
-    mentionRenderedUfoExperience.getInstance(props.id).start();
-  }
-  componentDidMount() {
-    mentionRenderedUfoExperience.getInstance(this.props.id).success();
-  }
-  static getDerivedStateFromProps(props, state) {
-    if (props.avatarUrl !== state.avatarUrl) {
-      return {
-        avatarUrl: props.avatarUrl,
-        hasAvatarError: false
-      };
-    }
-    return null;
-  }
-  componentWillUnmount() {
-    if (this.hoverTimeout) {
-      clearTimeout(this.hoverTimeout);
-    }
-    const ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
-    if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
-      ufoInstance.abort();
-    }
-  }
-  renderUnknownUserError(id) {
-    return /*#__PURE__*/React.createElement(UnknownUserError, {
-      values: {
-        userId: id.slice(-5)
-      }
-    }, message => /*#__PURE__*/React.createElement(React.Fragment, null, `@${message}`));
-  }
-  render() {
-    const {
-      handleAvatarError,
-      handleOnClick,
-      handleOnMouseEnter,
-      handleOnMouseLeave,
-      props
-    } = this;
-    const {
-      appType,
-      avatarUrl,
-      text,
-      id,
-      accessLevel,
-      localId,
-      disabledTooltip,
-      isAvatarImagePreShaped,
-      renderAvatarSlot
-    } = props;
-    const mentionType = this.getMentionType();
-    const failedMention = text === `@${UNKNOWN_USER_ID}`;
-    const showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
-    const visibleText = showAvatarSlot && text.startsWith('@') ? text.slice(1) : text;
-    const shouldApplyAgentShape = appType === 'agent' && !isAvatarImagePreShaped;
-    const shouldRenderAvatar = avatarUrl && !this.state.hasAvatarError;
-    const showRestrictedTooltip = mentionType === MentionType.RESTRICTED;
-    const showDisabledTooltip = mentionType === MentionType.DISABLED && !!disabledTooltip;
 
-    // A11y: when the chip is in the disabled visual state, expose
-    // `aria-disabled` so assistive tech announces it as such. The
-    // disabled-tooltip text is mirrored into `aria-label` so the
-    // announcement carries the reason even without portal-id wiring for
-    // `aria-describedby`.
-    const isDisabledChip = mentionType === MentionType.DISABLED;
-    const disabledA11yProps = isDisabledChip ? {
-      'aria-disabled': true,
-      tabIndex: 0,
-      ...(disabledTooltip ? {
-        'aria-label': `${text || '@...'} — ${disabledTooltip}`
-      } : {})
-    } : {};
-    const mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, _extends({
-      isAvatarVisible: showAvatarSlot,
-      mentionType: mentionType,
-      onClick: handleOnClick,
-      onMouseEnter: handleOnMouseEnter,
-      onMouseLeave: handleOnMouseLeave,
-      spellCheck: false,
-      "data-testid": `mention-${id}`,
-      "data-mention-type": mentionType,
-      "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
-    }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      "aria-hidden": "true",
-      "data-testid": "mention-avatar-slot",
-      className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb7vkz _4t3i7vkz _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n41q9y"])
-    }, shouldRenderAvatar ? /*#__PURE__*/React.createElement("img", {
-      alt: "",
-      decoding: "async",
-      draggable: false,
-      height: 16,
-      loading: "lazy",
-      onError: handleAvatarError,
-      src: avatarUrl,
-      "data-testid": "mention-avatar",
-      width: 16,
-      className: ax(["_1e0c1ule _1bsb1osq _4t3i1osq _5ral1dfr"])
-    }) : this.state.hasAvatarError ? '@' : null), /*#__PURE__*/React.createElement("span", null, visibleText || '...')) : text || '@...'));
-    const ssrPlaceholderProp = props.ssrPlaceholderId ? {
-      'data-ssr-placeholder': props.ssrPlaceholderId
-    } : {};
-    const wrappedMention = (() => {
-      if (showRestrictedTooltip) {
-        return /*#__PURE__*/React.createElement(React.Suspense, {
-          fallback: mentionComponent
-        }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
-          name: text
-        }, mentionComponent));
-      }
-      if (showDisabledTooltip) {
-        return /*#__PURE__*/React.createElement(React.Suspense, {
-          fallback: mentionComponent
-        }, /*#__PURE__*/React.createElement(AsyncDisabledMentionTooltip, {
-          tooltip: disabledTooltip
-        }, mentionComponent));
-      }
-      return mentionComponent;
-    })();
-    return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
-      id: id
-    }, /*#__PURE__*/React.createElement("span", _extends({
-      id: localId,
-      "data-mention-id": id,
-      "data-local-id": localId,
-      "data-access-level": accessLevel,
-      spellCheck: false
-    }, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null, wrappedMention)));
-  }
-}
+/**
+ * @deprecated Use `import { UNKNOWN_USER_ID } from '@atlaskit/mention/constants'` instead.
+ */
+export { UNKNOWN_USER_ID } from '../../_constants';
 const MentionWithAnalytics = withAnalyticsEvents({
   onClick: (createEvent, props) => {
     const {
@@ -245,4 +36,9 @@ const MentionWithAnalytics = withAnalyticsEvents({
   }
 })(MentionInternal);
 const Mention = MentionWithAnalytics;
-export default Mention;
+export default Mention;
+
+/**
+ * @deprecated Use `import { MentionInternal } from '@atlaskit/mention/mention'` instead.
+ */
+export { MentionInternal } from './MentionInternal';

package/dist/es2019/components/MentionAvatar/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import Avatar, { getAppearanceForAppType } from '@atlaskit/avatar';
-import TeamAvatar from '@atlaskit/teams-avatar/teams-avatar';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { isAppMention, isTeamMention } from '../../types';
+import TeamAvatar from '@atlaskit/teams-avatar/teams-avatar';
+import { isAppMention } from '../../is-app-mention';
+import { isTeamMention } from '../../is-team-mention';
 export const MentionAvatar = ({
   mention,
   selected

package/dist/es2019/components/MentionItem/index.js

@@ -1,26 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+import React from 'react';
+import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
-import React from 'react';
-import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAgentMention, isRestricted } from '../../types';
+import { isAgentMention } from '../../is-agent-mention';
+import { isRestricted } from '../../is-restricted';
 import { NoAccessLabel } from '../../util/i18n';
-import { leftClick } from '../../util/mouse';
-import AsyncNoAccessTooltip from '../NoAccessTooltip';
+import { leftClick } from '../../util/left-click';
 import AsyncLockCircleIcon from '../LockCircleIcon';
-import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle as RowStyleLegacy, RowStyleNext, TimeStyle } from './styles';
-import { renderHighlight } from './MentionHighlightHelpers';
+import { MentionAvatar } from '../MentionAvatar';
 import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
-import { MentionAvatar } from '../MentionAvatar';
+import AsyncNoAccessTooltip from '../NoAccessTooltip';
+import { renderHighlight } from './MentionHighlightHelpers';
+import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle as RowStyleLegacy, RowStyleNext, TimeStyle } from './styles';
 
 // Lazy-loaded so `@atlaskit/skeleton` (only needed for the loading
 // placeholder) doesn't enter the bundle for every `@atlaskit/mention`
 // consumer — only when an `isPlaceholder` mention is actually rendered.
 const MentionItemPlaceholder = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_mention-item-placeholder" */'./MentionItemPlaceholder'));
+
+/**
+ * @deprecated Use `import { MENTION_ITEM_HEIGHT, MENTION_ITEM_HEIGHT_REFRESHED } from '@atlaskit/mention/mention-item/styles'` instead.
+ */
 export { MENTION_ITEM_HEIGHT, MENTION_ITEM_HEIGHT_REFRESHED } from './styles';
 const lozengeAppearanceToTagColor = {
   default: 'standard',

package/dist/es2019/components/MentionList/index.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { actualMouseMove } from '../../util/actual-mouse-move';
 import debug from '../../util/logger';
-import { actualMouseMove, mouseLocation } from '../../util/mouse';
+import { mouseLocation } from '../../util/mouse-location';
 import { MentionItemWithRef } from '../MentionItem';
 import MentionListError from '../MentionListError';
 import MessagesIntlProvider from '../MessagesIntlProvider';

package/dist/es2019/components/MentionPicker/MentionPicker.js

@@ -0,0 +1,198 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { Text } from '@atlaskit/primitives/compiled';
+import { fireAnalyticsMentionTypeaheadEvent } from '../../util/fire-analytics-mention-typeahead-event';
+import uniqueId from '../../util/id';
+import debug from '../../util/logger';
+import Popup from '../Popup';
+import ResourcedMentionList from '../ResourcedMentionList';
+import { MentionPickerInfoStyle, MentionPickerStyle } from './styles';
+
+/**
+ * @class MentionPicker
+ */
+export class MentionPicker extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "selectNext", () => {
+      if (this.mentionListRef) {
+        this.mentionListRef.selectNext();
+      }
+    });
+    _defineProperty(this, "selectPrevious", () => {
+      if (this.mentionListRef) {
+        this.mentionListRef.selectPrevious();
+      }
+    });
+    _defineProperty(this, "selectIndex", (index, callback) => {
+      if (this.mentionListRef) {
+        this.mentionListRef.selectIndex(index, callback);
+      }
+    });
+    _defineProperty(this, "selectId", (id, callback) => {
+      if (this.mentionListRef) {
+        this.mentionListRef.selectId(id, callback);
+      }
+    });
+    _defineProperty(this, "chooseCurrentSelection", () => {
+      if (this.mentionListRef) {
+        this.mentionListRef.chooseCurrentSelection();
+      }
+    });
+    _defineProperty(this, "mentionsCount", () => {
+      if (this.mentionListRef) {
+        return this.mentionListRef.mentionsCount();
+      }
+      return 0;
+    });
+    /**
+     * Called after the 'visible' state is changed to decide whether the onOpen or onClose
+     * handlers should be called.
+     *
+     * It should be noted that the visible state of the component is not considered in
+     * this function. Instead the old state and new state should be passed as parameters.
+     */
+    _defineProperty(this, "onFilterVisibilityChange", (oldVisibility, newVisibility) => {
+      if (oldVisibility !== newVisibility) {
+        if (newVisibility) {
+          if (this.props.onOpen) {
+            this.props.onOpen();
+          }
+        } else {
+          if (this.props.onClose) {
+            this.props.onClose();
+          }
+        }
+      }
+    });
+    // internal, used for callbacks
+    _defineProperty(this, "filterChange", (mentions, query, stats) => {
+      debug('ak-mention-picker.filterChange', mentions.length);
+      const wasVisible = this.state.visible;
+      const visible = mentions.length > 0;
+      this.setState({
+        visible
+      });
+      this.onFilterVisibilityChange(wasVisible, visible);
+      fireAnalyticsMentionTypeaheadEvent(this.props)('rendered', stats && stats.duration, mentions.map(mention => mention.id), query);
+    });
+    _defineProperty(this, "filterError", error => {
+      debug('ak-mention-picker.filterError', error);
+      const wasVisible = this.state.visible;
+      this.setState({
+        visible: true,
+        info: undefined
+      });
+      this.onFilterVisibilityChange(wasVisible, true);
+    });
+    _defineProperty(this, "filterInfo", info => {
+      debug('ak-mention-picker.filterInfo', info);
+      this.setState({
+        info
+      });
+    });
+    _defineProperty(this, "handleMentionListRef", ref => {
+      this.mentionListRef = ref;
+    });
+    this.subscriberKey = uniqueId('ak-mention-picker');
+    this.state = {
+      visible: false
+    };
+    this.applyPropChanges({}, props);
+  }
+  componentDidMount() {
+    this.subscribeResourceProvider(this.props.resourceProvider);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.applyPropChanges(this.props, nextProps);
+  }
+  componentWillUnmount() {
+    this.unsubscribeResourceProvider(this.props.resourceProvider);
+  }
+  // Internal
+  applyPropChanges(prevProps, nextProps) {
+    const oldResourceProvider = prevProps.resourceProvider;
+    const newResourceProvider = nextProps.resourceProvider;
+    const resourceProviderChanged = oldResourceProvider !== newResourceProvider;
+
+    // resource provider
+    if (resourceProviderChanged) {
+      this.unsubscribeResourceProvider(oldResourceProvider);
+      this.subscribeResourceProvider(newResourceProvider);
+    }
+  }
+  subscribeResourceProvider(resourceProvider) {
+    if (resourceProvider) {
+      resourceProvider.subscribe(this.subscriberKey, this.filterChange, this.filterError, this.filterInfo, undefined);
+    }
+  }
+  unsubscribeResourceProvider(resourceProvider) {
+    if (resourceProvider) {
+      resourceProvider.unsubscribe(this.subscriberKey);
+    }
+  }
+  render() {
+    const {
+      resourceProvider,
+      presenceProvider,
+      onSelection,
+      query,
+      target,
+      position,
+      zIndex,
+      offsetX,
+      offsetY,
+      intl
+    } = this.props;
+    const {
+      visible,
+      info
+    } = this.state;
+    const resourceMentionList = /*#__PURE__*/React.createElement(ResourcedMentionList, {
+      resourceProvider: resourceProvider,
+      presenceProvider: presenceProvider,
+      onSelection: onSelection,
+      query: query,
+      ref: this.handleMentionListRef
+    });
+    const infoContent = info && !visible ? /*#__PURE__*/React.createElement(MentionPickerInfoStyle, null, /*#__PURE__*/React.createElement(Text, {
+      as: "p"
+    }, info)) : null;
+    let content;
+    if (position) {
+      debug('target, position', target, position);
+      if (target) {
+        content = /*#__PURE__*/React.createElement(Popup, {
+          target: target,
+          relativePosition: position,
+          zIndex: zIndex,
+          offsetX: offsetX,
+          offsetY: offsetY
+        }, /*#__PURE__*/React.createElement(IntlProvider, {
+          locale: (intl === null || intl === void 0 ? void 0 : intl.locale) || 'en'
+        }, /*#__PURE__*/React.createElement("div", null, resourceMentionList, infoContent)));
+      } else {
+        // don't show if we have a position, but no target yet
+        content = null;
+      }
+    } else {
+      content = /*#__PURE__*/React.createElement("div", null, resourceMentionList, infoContent);
+    }
+    return (
+      /*#__PURE__*/
+      /* old classnames are essential for Confluence tests */
+      React.createElement(MentionPickerStyle
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
+        className: "ak-mention-picker",
+        visible: visible || info
+      }, content)
+    );
+  }
+}
+_defineProperty(MentionPicker, "defaultProps", {
+  onSelection: () => {},
+  onOpen: () => {},
+  onClose: () => {}
+});