@atlaskit/reactions 33.2.19 → 33.2.21

package/dist/es2019/components/ReactionPickerNew.js

@@ -1,374 +0,0 @@
-/* ReactionPickerNew.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ReactionPickerNew.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl-next';
-import { EmojiPicker } from '@atlaskit/emoji/picker';
-import { Manager, Popper, Reference } from '@atlaskit/popper';
-import { layers } from '@atlaskit/theme/constants';
-import { Box } from '@atlaskit/primitives/compiled';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { useCloseManagerV2 } from '../hooks/useCloseManager';
-import { useDelayedState } from '../hooks/useDelayedState';
-import { useFocusTrap } from '../hooks/useFocusTrap';
-import { messages } from '../shared/i18n';
-import { PickerRender } from '../ufo';
-import { Selector } from './Selector';
-import { Trigger } from './Trigger';
-import { RepositionOnUpdate } from './RepositionOnUpdate';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import Portal from '@atlaskit/portal';
-const pickerStyle = null;
-const popupWrapperStyle = null;
-const popupStyle = null;
-const popupStyleWithMarginTop = null;
-const additionalStyles = {
-  selectorContainer: "_1e0c1txw"
-};
-
-/**
- * Test id for wrapper ReactionPicker div
- */
-export const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
-
-/**
- * Test id for ReactionPicker panel div
- */
-export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
-
-/**
- * Emoji Picker Controller Id for Accessibility Labels
- */
-const PICKER_CONTROL_ID = 'emoji-picker';
-/**
- * Picker component for adding reactions
- */
-export const ReactionPicker = /*#__PURE__*/React.memo(props => {
-  const {
-    miniMode,
-    className,
-    emojiProvider,
-    onSelection,
-    allowAllEmojis,
-    disabled,
-    pickerQuickReactionEmojiIds,
-    onShowMore = () => {},
-    onOpen = () => {},
-    onCancel = () => {},
-    tooltipContent = /*#__PURE__*/React.createElement(FormattedMessage, messages.addReaction),
-    emojiPickerSize,
-    showOpaqueBackground = false,
-    subtleReactionsSummaryAndPicker = false,
-    showAddReactionText = false,
-    reactionPickerTriggerIcon,
-    reactionPickerTriggerText,
-    reactionPickerPlacement,
-    isListItem = false,
-    hoverableReactionPicker = false,
-    hoverableReactionPickerDelay = 0
-  } = props;
-  const [triggerRef, setTriggerRef] = useState(null);
-  const [isHoverableReactionPickerEmojiPickerOpen, setIsHoverableReactionPickerEmojiPickerOpen] = useState(false);
-  const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
-  const [isHoveringPopup, setIsHoveringPopup] = useState(false);
-  const [isTriggerClicked, setIsTriggerClicked] = useState(false);
-  const [isPopupTrayOpen, setIsPopupTrayOpen] = useDelayedState(false, hoverableReactionPickerDelay);
-
-  /**
-   * Container <div /> reference (used by custom hook to detect click outside)
-   */
-  const wrapperRef = useRef(null);
-  const updatePopper = useRef();
-  const popperPlacement = reactionPickerPlacement || 'bottom-start';
-  const popperModifiers = [
-  /**
-    Removing this applyStyle modifier as it throws client errors ref:
-   https://popper.js.org/docs/v1/#modifiers
-   https://popper.js.org/docs/v1/#modifiers..applyStyle
-   { name: 'applyStyle', enabled: false },
-    */
-  {
-    name: 'hide',
-    enabled: false
-  }, {
-    name: 'offset',
-    enabled: true,
-    options: {
-      offset: [0, fg('platform-reactions-offset-based-popper') ? 4 : 0]
-    }
-  }, {
-    name: 'flip',
-    enabled: true,
-    options: {
-      flipVariations: true,
-      boundariesElement: 'scrollParent'
-    }
-  }];
-  const [settings, setSettings] = useState({
-    /**
-     * Show the full custom emoji list picker or the default list of emojis
-     */
-    showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
-    /**
-     * Use placement for popper based on reactionPickerPlacement prop
-     */
-    popperPlacement
-  });
-
-  /**
-   * Event callback when the picker is closed
-   * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
-   */
-  const close = useCallback(_id => {
-    setIsPopupTrayOpen(false, true);
-    // ufo abort reaction experience
-    PickerRender.abort({
-      metadata: {
-        emojiId: _id,
-        source: 'ReactionPicker',
-        reason: 'close dialog'
-      }
-    });
-    if (hoverableReactionPicker) {
-      setIsHoverableReactionPickerEmojiPickerOpen(false);
-      setIsTriggerClicked(false);
-      setIsHoveringTrigger(false);
-      setIsHoveringPopup(false);
-    }
-  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker, setIsTriggerClicked, setIsHoveringTrigger, setIsHoveringPopup]);
-
-  /**
-   * Event handle rwhen selecting to show the custom emoji icons picker
-   * @param e event param
-   */
-  const onSelectMoreClick = useCallback(e => {
-    e.preventDefault();
-    setSettings({
-      showFullPicker: hoverableReactionPicker ? settings.showFullPicker : true,
-      popperPlacement
-    });
-    setIsPopupTrayOpen(true);
-    if (hoverableReactionPicker) {
-      setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
-      setIsTriggerClicked(false);
-    }
-    onShowMore();
-  }, [settings.showFullPicker, setIsPopupTrayOpen, onShowMore, popperPlacement, hoverableReactionPicker, setIsHoverableReactionPickerEmojiPickerOpen, isHoverableReactionPickerEmojiPickerOpen]);
-
-  /**
-   * Event callback when an emoji icon is selected
-   * @param item selected item
-   */
-  const onEmojiSelected = useCallback(item => {
-    // no emoji was selected
-    if (!item.id) {
-      return;
-    }
-    onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
-    close(item.id);
-  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
-
-  /**
-   * Event handler when the emoji icon to open the custom picker is selected
-   */
-  const onTriggerClick = useCallback(() => {
-    // ufo start reactions picker open experience
-    PickerRender.start();
-    setSettings({
-      ...settings,
-      popperPlacement
-    });
-    if (hoverableReactionPicker) {
-      if (isHoverableReactionPickerEmojiPickerOpen || isTriggerClicked) {
-        // if either the emoji picker is open or the trigger was clicked, close the popup and reset the state
-        setIsTriggerClicked(false);
-        setIsPopupTrayOpen(false, true);
-      } else {
-        // if neither condition is true, open the popup and set the state
-        setIsTriggerClicked(true);
-        setIsPopupTrayOpen(true, true);
-      }
-      // close the emoji picker
-      setIsHoverableReactionPickerEmojiPickerOpen(false);
-    } else {
-      setIsPopupTrayOpen(!isPopupTrayOpen);
-    }
-    onOpen();
-    // ufo reactions picker opened success
-    PickerRender.success();
-  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isTriggerClicked, setIsTriggerClicked, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
-  const handleTriggerMouseEnter = useCallback(() => {
-    if (hoverableReactionPicker) {
-      setIsHoveringTrigger(true);
-      if (!isHoverableReactionPickerEmojiPickerOpen) {
-        setIsPopupTrayOpen(true);
-      }
-    }
-  }, [hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
-  const handleTriggerMouseLeave = useCallback(() => {
-    if (hoverableReactionPicker) {
-      setIsHoveringTrigger(false);
-      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
-        setIsPopupTrayOpen(false);
-      }
-    }
-  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
-  const handlePopupMouseEnter = useCallback(() => {
-    if (hoverableReactionPicker) {
-      setIsHoveringPopup(true);
-      if (!isHoverableReactionPickerEmojiPickerOpen) {
-        setIsPopupTrayOpen(true);
-      }
-    }
-  }, [hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
-  const handlePopupMouseLeave = useCallback(() => {
-    if (hoverableReactionPicker) {
-      setIsHoveringPopup(false);
-      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
-        setIsPopupTrayOpen(false);
-      }
-    }
-  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
-  const wrapperClassName = ` ${isPopupTrayOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
-  useLayoutEffect(() => {
-    var _updatePopper$current;
-    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
-  }, [settings]);
-  const onClose = () => {
-    close();
-    onCancel();
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_s7n4nkob _1pra1o8l", wrapperClassName]),
-    "data-testid": RENDER_REACTIONPICKER_TESTID,
-    ref: wrapperRef
-  }, /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
-    ref
-  }) =>
-  /*#__PURE__*/
-  // Render a button to open the <Selector /> panel
-  React.createElement(Box, {
-    onMouseEnter: handleTriggerMouseEnter,
-    onMouseLeave: handleTriggerMouseLeave
-  }, /*#__PURE__*/React.createElement(Trigger, {
-    ariaAttributes: {
-      'aria-expanded': isPopupTrayOpen,
-      'aria-controls': PICKER_CONTROL_ID
-    },
-    ref: node => {
-      if (node && isPopupTrayOpen) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-        setTriggerRef(node);
-      }
-    },
-    isSelected: isPopupTrayOpen,
-    onClick: onTriggerClick,
-    miniMode: miniMode,
-    disabled: disabled,
-    tooltipContent: isPopupTrayOpen ? null : tooltipContent,
-    showOpaqueBackground: showOpaqueBackground,
-    showAddReactionText: showAddReactionText,
-    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-    reactionPickerTriggerText: reactionPickerTriggerText,
-    isListItem: isListItem
-  }))), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
-    zIndex: layers.flag()
-  }, /*#__PURE__*/React.createElement(PopperWrapper, {
-    settings: settings,
-    popperModifiers: popperModifiers,
-    isOpen: isPopupTrayOpen,
-    onClose: onClose,
-    triggerRef: triggerRef
-  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    size: emojiPickerSize
-  }) : /*#__PURE__*/React.createElement(Box, {
-    xcss: additionalStyles.selectorContainer,
-    onMouseEnter: handlePopupMouseEnter,
-    onMouseLeave: handlePopupMouseLeave
-  }, /*#__PURE__*/React.createElement(Selector, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    showMore: allowAllEmojis,
-    onMoreClick: onSelectMoreClick,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-    hoverableReactionPickerSelector: hoverableReactionPicker
-  }))))));
-});
-export const PopperWrapper = props => {
-  const {
-    triggerRef,
-    settings,
-    isOpen,
-    onClose,
-    children,
-    popperModifiers
-  } = props;
-  const [popupRef, setPopupRef] = useState(null);
-  const {
-    formatMessage
-  } = useIntl();
-  /**
-   * add focus lock to popup
-   */
-  useFocusTrap({
-    initialFocusRef: null,
-    targetRef: popupRef
-  });
-
-  /**
-   * Custom hook triggers when user clicks outside the reactions picker
-   */
-  useCloseManagerV2(popupRef, triggerRef, callbackType => {
-    onClose();
-    if (popupRef && callbackType === 'ESCAPE') {
-      requestAnimationFrame(() => triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus());
-    }
-  }, true, isOpen);
-  return /*#__PURE__*/React.createElement(Popper, {
-    placement: settings.popperPlacement,
-    modifiers: popperModifiers
-  }, ({
-    ref,
-    style,
-    update
-  }) => {
-    return /*#__PURE__*/React.createElement("div", {
-      role: "group",
-      "aria-label": formatMessage(messages.popperWrapperLabel),
-      id: PICKER_CONTROL_ID,
-      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: {
-        zIndex: layers.layer(),
-        ...style
-      },
-      ref: node => {
-        if (node) {
-          if (typeof ref === 'function') {
-            ref(node);
-          } else {
-            ref.current = node;
-          }
-          setPopupRef(node);
-        }
-      },
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex: 0,
-      className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
-    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
-      update: update,
-      settings: settings
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ax(["_2rkofajl _bfhk1bhr _16qs1kf5 _79pa1b66", !fg('platform-reactions-offset-based-popper') && "_1bch1b66"])
-    }, children)));
-  });
-};

package/dist/esm/components/ReactionPickerNew.compiled.css

@@ -1,11 +0,0 @@
-
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs1a23{box-shadow:var(--_3t1odq)}
-._1bch1b66>div{margin-top:var(--ds-space-050,4px)}
-._1e0c1txw{display:flex}
-._1pra1o8l.miniMode{display:inline-block}
-._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
-._bfhk13b4{background-color:var(--_1f6rtr1)}
-._s7n4nkob{vertical-align:middle}
-._1hvw1o36:focus{outline-width:medium}
-._49pcglyw:focus{outline-style:none}
-._nt751r31:focus{outline-color:currentColor}