@atlaskit/reactions 22.7.1 → 22.7.3

package/dist/esm/components/Reactions/Reactions.js

@@ -1,11 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/standard-button';
 import Tooltip from '@atlaskit/tooltip';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
@@ -247,48 +248,59 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  return jsx("div", {
-    css: wrapperStyle,
-    "data-testid": RENDER_REACTIONS_TESTID
-  }, memorizedReactions.map(function (reaction) {
-    return jsx(Reaction, {
-      key: reaction.emojiId,
-      reaction: reaction,
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: wrapperStyle,
+      "data-testid": RENDER_REACTIONS_TESTID
+    }, memorizedReactions.map(function (reaction) {
+      return jsx(Reaction, {
+        key: reaction.emojiId,
+        reaction: reaction,
+        emojiProvider: emojiProvider,
+        onClick: onReactionClick,
+        onMouseEnter: handleReactionMouseEnter,
+        onFocused: handleReactionFocused,
+        flash: flash[reaction.emojiId],
+        handleUserListClick: handleOpenReactionsDialog,
+        allowUserDialog: allowUserDialog,
+        showParticleEffect: particleEffectByEmoji[reaction.emojiId]
+      });
+    }), jsx(ReactionPicker
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    , {
+      css: reactionPickerStyle,
       emojiProvider: emojiProvider,
-      onClick: onReactionClick,
-      onMouseEnter: handleReactionMouseEnter,
-      onFocused: handleReactionFocused,
-      flash: flash[reaction.emojiId],
-      handleUserListClick: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog,
-      showParticleEffect: particleEffectByEmoji[reaction.emojiId]
-    });
-  }), jsx(ReactionPicker, {
-    css: reactionPickerStyle,
-    emojiProvider: emojiProvider,
-    allowAllEmojis: allowAllEmojis,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-    disabled: status !== ReactionStatus.ready,
-    onSelection: handleOnSelection,
-    onOpen: handlePickerOpen,
-    onCancel: handleOnCancel,
-    onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage),
-    emojiPickerSize: emojiPickerSize,
-    miniMode: miniMode
-  }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
-    content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
-    hideTooltipOnClick: true
-  }, jsx(Button, {
-    appearance: "subtle-link",
-    onClick: handleOpenAllReactionsDialog,
-    css: seeWhoReactedStyle,
-    testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-  }, jsx(FormattedMessage, messages.seeWhoReacted))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
-    selectedEmojiId: selectedEmojiId,
-    reactions: memorizedReactions,
-    emojiProvider: emojiProvider,
-    handleCloseReactionsDialog: handleCloseReactionsDialog,
-    handleSelectReaction: handleSelectReactionInDialog
-  })));
+      allowAllEmojis: allowAllEmojis,
+      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+      disabled: status !== ReactionStatus.ready,
+      onSelection: handleOnSelection,
+      onOpen: handlePickerOpen,
+      onCancel: handleOnCancel,
+      onShowMore: handleOnMore,
+      tooltipContent: getTooltip(status, errorMessage),
+      emojiPickerSize: emojiPickerSize,
+      miniMode: miniMode
+    }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
+      content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
+      hideTooltipOnClick: true
+    }, jsx(Button
+    // TODO: (from codemod) "link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
+    // https://product-fabric.atlassian.net/browse/DSP-18982
+    , {
+      appearance: "subtle-link",
+      onClick: handleOpenAllReactionsDialog
+      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: seeWhoReactedStyle,
+      testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
+    }, jsx(FormattedMessage, messages.seeWhoReacted))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
+      selectedEmojiId: selectedEmojiId,
+      reactions: memorizedReactions,
+      emojiProvider: emojiProvider,
+      handleCloseReactionsDialog: handleCloseReactionsDialog,
+      handleSelectReaction: handleSelectReactionInDialog
+    })))
+  );
 });

package/dist/esm/components/Reactions/styles.js

@@ -1,9 +1,13 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var reactionPickerStyle = css({
   display: 'inline-block',
   marginTop: "var(--ds-space-050, 4px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var seeWhoReactedStyle = css({
   height: '24px',
   lineHeight: '24px',
@@ -12,6 +16,8 @@ export var seeWhoReactedStyle = css({
   marginTop: "var(--ds-space-050, 4px)",
   marginLeft: "var(--ds-space-050, 4px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var wrapperStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
@@ -19,6 +25,7 @@ export var wrapperStyle = css({
   alignItems: 'center',
   borderRadius: '15px',
   marginTop: "var(--ds-space-negative-050, -4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '> :first-of-type > :first-of-type': {
     marginLeft: 0
   }

package/dist/esm/components/Selector/Selector.js

@@ -1,27 +1,60 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { DefaultReactions } from '../../shared/constants';
 import { EmojiButton } from '../EmojiButton';
 import { ShowMore } from '../ShowMore';
-import { emojiStyle, revealStyle, selectorStyle } from './styles';
+import { emojiStyle, revealStyle } from './styles';
 
 /**
  * Test id for wrapper Selector div
  */
 export var RENDER_SELECTOR_TESTID = 'render-selector';
+
+/**
+ * Delay for each emoji reveal animation, in ms
+ */
+var REVEAL_DELAY = 50;
+var containerStyles = xcss({
+  padding: 'space.050'
+});
+var separatorStyles = xcss({
+  borderLeftColor: 'color.border',
+  borderLeftStyle: 'solid',
+  borderLeftWidth: 'border.width',
+  marginInlineStart: 'space.050',
+  marginInlineEnd: 'space.100',
+  height: '24px',
+  display: 'inline-block'
+});
+var Reveal = function Reveal(_ref) {
+  var children = _ref.children,
+    delay = _ref.delay;
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    css: revealStyle
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: delay ? {
+      animationDelay: "".concat(delay, "ms")
+    } : undefined
+  }, children);
+};
+
 /**
  * Reactions picker panel part of the <ReactionPicker /> component
  */
-export var Selector = function Selector(_ref) {
-  var emojiProvider = _ref.emojiProvider,
-    onMoreClick = _ref.onMoreClick,
-    onSelection = _ref.onSelection,
-    showMore = _ref.showMore,
-    _ref$pickerQuickReact = _ref.pickerQuickReactionEmojiIds,
-    pickerQuickReactionEmojiIds = _ref$pickerQuickReact === void 0 ? DefaultReactions : _ref$pickerQuickReact;
+export var Selector = function Selector(_ref2) {
+  var emojiProvider = _ref2.emojiProvider,
+    onMoreClick = _ref2.onMoreClick,
+    onSelection = _ref2.onSelection,
+    showMore = _ref2.showMore,
+    _ref2$pickerQuickReac = _ref2.pickerQuickReactionEmojiIds,
+    pickerQuickReactionEmojiIds = _ref2$pickerQuickReac === void 0 ? DefaultReactions : _ref2$pickerQuickReac;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
@@ -54,16 +87,6 @@ export var Selector = function Selector(_ref) {
     setSelection(item);
   };
 
-  /**
-   * custom css styling for the emoji icon
-   * @param index location of the emoji in the rendered list of items
-   */
-  var emojiStyleAnimation = function emojiStyleAnimation(index) {
-    return {
-      animationDelay: "".concat(index * 50, "ms")
-    };
-  };
-
   /**
    * Render the default emoji icon
    * @param emoji emoji item
@@ -71,11 +94,15 @@ export var Selector = function Selector(_ref) {
    */
   var renderEmoji = function renderEmoji(emoji, index) {
     var _emoji$id;
-    return jsx("div", {
-      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
-      className: emoji === selection ? 'selected' : undefined,
-      css: [emojiStyle, revealStyle],
-      style: emojiStyleAnimation(index),
+    return jsx(Reveal, {
+      delay: index * REVEAL_DELAY,
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName
+    }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: emoji === selection ? 'selected' : undefined
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: emojiStyle,
       "data-testid": RENDER_SELECTOR_TESTID
     }, jsx(Tooltip, {
       content: emoji.shortName
@@ -83,16 +110,17 @@ export var Selector = function Selector(_ref) {
       emojiId: emoji,
       emojiProvider: emojiProvider,
       onClick: onSelected
-    })));
+    }))));
   };
-  return jsx("div", {
-    css: selectorStyle
-  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(ShowMore, {
+  return jsx(Inline, {
+    alignBlock: "center",
+    xcss: containerStyles
+  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(Fragment, null, jsx(Box, {
+    xcss: separatorStyles
+  }), jsx(Reveal, {
+    delay: DefaultReactions.length * REVEAL_DELAY
+  }, jsx(ShowMore, {
     key: "more",
-    buttonStyle: revealStyle,
-    style: {
-      button: emojiStyleAnimation(DefaultReactions.length)
-    },
     onClick: onMoreClick
-  }) : null);
+  }))) : null);
 };

package/dist/esm/components/Selector/styles.js

@@ -1,18 +1,18 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
-export var selectorStyle = css({
-  boxSizing: 'border-box',
-  display: 'flex',
-  padding: 0
-});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var emojiStyle = css({
   display: 'inline-block',
-  opacity: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.selected': {
-    transition: 'transform 200ms ease-in-out  ',
+    transition: 'transform 200ms ease-in-out',
     transform: 'translateY(-48px) scale(2.667)'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
 export var revealAnimation = keyframes({
   '0%': {
     opacity: 1,
@@ -26,16 +26,10 @@ export var revealAnimation = keyframes({
     transform: 'scale(1)'
   }
 });
-export var revealStyle = css({
-  animation: "".concat(revealAnimation, " 150ms ease-in-out forwards")
-});
 
-/**
- * custom css styling for the emoji icon
- * @param index location of the emoji in the rendered list of items
- */
-export var emojiStyleAnimation = function emojiStyleAnimation(index) {
-  return {
-    animationDelay: "".concat(index * 50, "ms")
-  };
-};
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+export var revealStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  animation: "".concat(revealAnimation, " 150ms ease-in-out forwards"),
+  opacity: 0
+});

package/dist/esm/components/ShowMore/ShowMore.js

@@ -1,47 +1,30 @@
 /** @jsx jsx */
-import React from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { IconButton } from '@atlaskit/button/new';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../../shared/i18n';
-import { moreButtonStyle, moreEmojiContainerStyle, separatorStyle } from './styles';
 
 /**
  * Test id for wrapper button
  */
 export var RENDER_SHOWMORE_TESTID = 'show-more-button';
-export var RENDER_WRAPPER_TESTID = 'show-more-wrapper';
 /**
  * Show more custom emojis button
  */
 export var ShowMore = function ShowMore(_ref) {
-  var onClick = _ref.onClick,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? {} : _ref$className,
-    buttonStyle = _ref.buttonStyle;
-  return jsx("div", {
-    className: className.container,
-    css: moreEmojiContainerStyle,
-    style: style.container,
-    "data-testid": RENDER_WRAPPER_TESTID
-  }, jsx("div", {
-    css: separatorStyle
-  }), jsx(FormattedMessage, messages.moreEmoji, function (message) {
+  var onClick = _ref.onClick;
+  return jsx(FormattedMessage, messages.moreEmoji, function (message) {
     return jsx(Tooltip, {
       content: message
-    }, jsx("button", {
-      className: className.button,
-      css: [moreButtonStyle, buttonStyle],
-      "aria-label": messages.moreEmoji.defaultMessage,
-      type: "button",
-      style: style.button,
+    }, jsx(IconButton, {
+      label: messages.moreEmoji.defaultMessage,
       onClick: onClick,
-      "data-testid": RENDER_SHOWMORE_TESTID
-    }, jsx(EditorMoreIcon, {
-      label: "More"
-    })));
-  }));
+      testId: RENDER_SHOWMORE_TESTID,
+      icon: EditorMoreIcon,
+      appearance: "subtle"
+    }));
+  });
 };

package/dist/esm/components/ShowMore/index.js

@@ -1 +1 @@
-export { ShowMore, RENDER_SHOWMORE_TESTID, RENDER_WRAPPER_TESTID } from './ShowMore';
+export { ShowMore, RENDER_SHOWMORE_TESTID } from './ShowMore';

package/dist/esm/components/Trigger/Trigger.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import Tooltip from '@atlaskit/tooltip';
@@ -32,7 +33,10 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent
   }, jsx(Button, _extends({
-    testId: RENDER_TRIGGER_BUTTON_TESTID,
+    testId: RENDER_TRIGGER_BUTTON_TESTID
+    // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: triggerStyle({
       miniMode: miniMode,
       disabled: disabled

package/dist/esm/components/Trigger/styles.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N70, N20, N40, B100 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -16,6 +17,7 @@ export var triggerStyle = function triggerStyle(_ref) {
     height: '24px',
     padding: 0,
     border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     borderRadius: '20px',
     display: 'flex',
     justifyContent: 'center',
@@ -25,6 +27,7 @@ export var triggerStyle = function triggerStyle(_ref) {
     minWidth: '24px',
     padding: "var(--ds-space-050, 4px)",
     border: 'none',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     borderRadius: "".concat(borderRadius(), "px")
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,

package/dist/types/components/EmojiButton/EmojiButton.d.ts

@@ -18,4 +18,4 @@ export interface EmojiButtonProps {
 /**
  * custom button to render the custom emoji selector inside the reaction picker
  */
-export declare const EmojiButton: ({ emojiId, onClick, emojiProvider, }: EmojiButtonProps) => jsx.JSX.Element;
+export declare const EmojiButton: ({ emojiId, onClick, emojiProvider }: EmojiButtonProps) => jsx.JSX.Element;

package/dist/types/components/Reaction/Reaction.d.ts

@@ -20,10 +20,6 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * event handler when the emoji button is clicked
      */
     onClick: ReactionClick;
-    /**
-     * Optional wrapper reaction <button /> class name
-     */
-    className?: string;
     /**
      * Optional event when the mouse cursor hovers over the reaction
      */
@@ -48,4 +44,4 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, className, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;

package/dist/types/components/ReactionDialog/ReactionView.d.ts

@@ -15,4 +15,4 @@ export interface ReactionViewProps {
      */
     emojiProvider: Promise<EmojiProvider>;
 }
-export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, }: ReactionViewProps) => jsx.JSX.Element;
+export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction }: ReactionViewProps) => jsx.JSX.Element;

package/dist/types/components/ReactionTooltip/index.d.ts

@@ -1,2 +1,2 @@
-export { ReactionTooltip, RENDER_REACTIONTOOLTIP_TESTID, } from './ReactionTooltip';
+export { ReactionTooltip, RENDER_REACTIONTOOLTIP_TESTID } from './ReactionTooltip';
 export type { ReactionTooltipProps } from './ReactionTooltip';

package/dist/types/components/Selector/styles.d.ts

@@ -1,12 +1,5 @@
-/// <reference types="react" />
 /** @jsx jsx */
 import { keyframes } from '@emotion/react';
-export declare const selectorStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const revealAnimation: typeof keyframes;
 export declare const revealStyle: import("@emotion/react").SerializedStyles;
-/**
- * custom css styling for the emoji icon
- * @param index location of the emoji in the rendered list of items
- */
-export declare const emojiStyleAnimation: (index: number) => React.CSSProperties;

package/dist/types/components/ShowMore/ShowMore.d.ts

@@ -1,35 +1,17 @@
+/// <reference types="react" />
 /** @jsx jsx */
-import React from 'react';
-import { jsx, type SerializedStyles } from '@emotion/react';
+import { jsx } from '@emotion/react';
 /**
  * Test id for wrapper button
  */
 export declare const RENDER_SHOWMORE_TESTID = "show-more-button";
-export declare const RENDER_WRAPPER_TESTID = "show-more-wrapper";
-interface CommonProps<T> {
-    container?: T;
-    button?: T;
-}
 export interface ShowMoreProps {
     /**
      * Optional mouse click DOM event on showing more emoji icon
      */
     onClick?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Optional button css
-     */
-    buttonStyle?: SerializedStyles;
-    /**
-     * Optional custom styling for wrapper show more emoji button
-     */
-    style?: CommonProps<React.CSSProperties>;
-    /**
-     * Optional custom styling for wrapper show more emoji button
-     */
-    className?: CommonProps<string>;
 }
 /**
  * Show more custom emojis button
  */
-export declare const ShowMore: ({ onClick, style, className, buttonStyle, }: ShowMoreProps) => jsx.JSX.Element;
-export {};
+export declare const ShowMore: ({ onClick }: ShowMoreProps) => jsx.JSX.Element;

package/dist/types/components/ShowMore/index.d.ts

@@ -1,2 +1,2 @@
-export { ShowMore, RENDER_SHOWMORE_TESTID, RENDER_WRAPPER_TESTID, } from './ShowMore';
+export { ShowMore, RENDER_SHOWMORE_TESTID } from './ShowMore';
 export type { ShowMoreProps } from './ShowMore';

package/dist/types/containers/index.d.ts

@@ -1,2 +1,2 @@
 export { ConnectedReactionPicker, type ConnectedReactionPickerProps, } from './ConnectedReactionPicker';
-export { ConnectedReactionsView, type ConnectedReactionsViewProps, } from './ConnectedReactionsView';
+export { ConnectedReactionsView, type ConnectedReactionsViewProps } from './ConnectedReactionsView';

package/dist/types/hooks/useFocusTrap.d.ts

@@ -2,4 +2,4 @@ export type FocusManagerHook = {
     targetRef: HTMLDivElement | null;
     initialFocusRef: HTMLElement | null;
 };
-export declare const useFocusTrap: ({ targetRef, initialFocusRef, }: FocusManagerHook) => void;
+export declare const useFocusTrap: ({ targetRef, initialFocusRef }: FocusManagerHook) => void;

package/dist/types-ts4.5/components/EmojiButton/EmojiButton.d.ts

@@ -18,4 +18,4 @@ export interface EmojiButtonProps {
 /**
  * custom button to render the custom emoji selector inside the reaction picker
  */
-export declare const EmojiButton: ({ emojiId, onClick, emojiProvider, }: EmojiButtonProps) => jsx.JSX.Element;
+export declare const EmojiButton: ({ emojiId, onClick, emojiProvider }: EmojiButtonProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/Reaction/Reaction.d.ts

@@ -20,10 +20,6 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * event handler when the emoji button is clicked
      */
     onClick: ReactionClick;
-    /**
-     * Optional wrapper reaction <button /> class name
-     */
-    className?: string;
     /**
      * Optional event when the mouse cursor hovers over the reaction
      */
@@ -48,4 +44,4 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, className, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/ReactionDialog/ReactionView.d.ts

@@ -15,4 +15,4 @@ export interface ReactionViewProps {
      */
     emojiProvider: Promise<EmojiProvider>;
 }
-export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, }: ReactionViewProps) => jsx.JSX.Element;
+export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction }: ReactionViewProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/ReactionTooltip/index.d.ts

@@ -1,2 +1,2 @@
-export { ReactionTooltip, RENDER_REACTIONTOOLTIP_TESTID, } from './ReactionTooltip';
+export { ReactionTooltip, RENDER_REACTIONTOOLTIP_TESTID } from './ReactionTooltip';
 export type { ReactionTooltipProps } from './ReactionTooltip';

package/dist/types-ts4.5/components/Selector/styles.d.ts

@@ -1,12 +1,5 @@
-/// <reference types="react" />
 /** @jsx jsx */
 import { keyframes } from '@emotion/react';
-export declare const selectorStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const revealAnimation: typeof keyframes;
 export declare const revealStyle: import("@emotion/react").SerializedStyles;
-/**
- * custom css styling for the emoji icon
- * @param index location of the emoji in the rendered list of items
- */
-export declare const emojiStyleAnimation: (index: number) => React.CSSProperties;

package/dist/types-ts4.5/components/ShowMore/ShowMore.d.ts

@@ -1,35 +1,17 @@
+/// <reference types="react" />
 /** @jsx jsx */
-import React from 'react';
-import { jsx, type SerializedStyles } from '@emotion/react';
+import { jsx } from '@emotion/react';
 /**
  * Test id for wrapper button
  */
 export declare const RENDER_SHOWMORE_TESTID = "show-more-button";
-export declare const RENDER_WRAPPER_TESTID = "show-more-wrapper";
-interface CommonProps<T> {
-    container?: T;
-    button?: T;
-}
 export interface ShowMoreProps {
     /**
      * Optional mouse click DOM event on showing more emoji icon
      */
     onClick?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Optional button css
-     */
-    buttonStyle?: SerializedStyles;
-    /**
-     * Optional custom styling for wrapper show more emoji button
-     */
-    style?: CommonProps<React.CSSProperties>;
-    /**
-     * Optional custom styling for wrapper show more emoji button
-     */
-    className?: CommonProps<string>;
 }
 /**
  * Show more custom emojis button
  */
-export declare const ShowMore: ({ onClick, style, className, buttonStyle, }: ShowMoreProps) => jsx.JSX.Element;
-export {};
+export declare const ShowMore: ({ onClick }: ShowMoreProps) => jsx.JSX.Element;