@atlaskit/reactions 21.8.1 → 22.0.0

package/dist/es2019/components/ReactionDialog/styles.js

@@ -0,0 +1,169 @@
+/** @jsx jsx */
+import { css } from '@emotion/react';
+import { B400, N500, N800 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { constants } from '../../shared';
+const REACTIONS_CONTAINER_WIDTH = 48;
+const REACTION_RIGHT_MARGIN = 8;
+/* we want to display around 9 reactions and show 10th one as faded so removing 2px from REACTIONS_CONTAINER_WIDTH*/
+
+const CONTAINER_WIDTH = constants.NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
+const REACTION_CONTAINER_HEIGHT = 48;
+/*Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
+border blue below the reaction. Setting Border Width based on number of reactions to make sure it shows up
+in case the container overflows */
+
+export const containerStyle = reactionsBorderWidth => css({
+  overflow: 'hidden',
+  maxWidth: `${CONTAINER_WIDTH}px`,
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'start',
+  position: 'relative',
+  scrollBehavior: 'smooth',
+  '&:after': {
+    content: '""',
+    zIndex: 0,
+    display: 'block',
+    minWidth: `${reactionsBorderWidth}%`,
+    bottom: '0px',
+    position: 'absolute'
+  }
+});
+export const titleStyle = css({
+  '& > h1': {
+    fontSize: '24px!important',
+    color: `${token('color.text', N800)}`
+  }
+});
+const containerEdgeAngle = {
+  rightEdge: 270,
+  leftEdge: 90
+};
+export const counterStyle = isSelected => css({
+  display: 'flex',
+  alignSelf: 'center',
+  lineHeight: '14px',
+  fontSize: '11px',
+  fontWeight: isSelected ? 700 : 400,
+  paddingRight: '0px',
+  marginTop: '5px',
+  '> div': {
+    width: '100%',
+    padding: '0px!important',
+    //Counter component has its own styles overriding them to match designs
+    color: isSelected ? `${token('color.text', B400)}!important` : `2px solid ${token('color.text', N500)}!important`
+  }
+});
+
+const fadedCss = (edge, theme) => css({
+  content: '""',
+  position: 'absolute',
+  left: '0px',
+  top: '0px',
+  width: `${REACTIONS_CONTAINER_WIDTH}px`,
+  height: `${REACTION_CONTAINER_HEIGHT}px`,
+  zIndex: 0,
+  background: theme === 'dark' || theme === 'legacy-dark' ? `linear-gradient(${containerEdgeAngle[edge]}deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)` : `linear-gradient(${containerEdgeAngle[edge]}deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)`
+});
+
+export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
+  flexShrink: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: `${REACTIONS_CONTAINER_WIDTH}px`,
+  minHeight: `${REACTION_CONTAINER_HEIGHT}px`,
+  marginRight: `${REACTION_RIGHT_MARGIN}px`,
+  boxSizing: 'border-box',
+  position: 'relative',
+  '> div': {
+    minWidth: `${REACTIONS_CONTAINER_WIDTH}px`,
+    minHeight: `${REACTION_CONTAINER_HEIGHT}px`,
+    padding: '0px !important',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  '& > span': {
+    minHeight: '16px',
+    minWidth: '16px'
+  },
+  '&.disabled:after': fadedCss('rightEdge', theme),
+  '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
+  '&:after': isSelected ? {
+    content: '""',
+    borderBottom: `2px solid ${token('color.text', B400)}`,
+    width: `${REACTIONS_CONTAINER_WIDTH}px`,
+    bottom: '0px',
+    display: 'block',
+    position: 'absolute',
+    zIndex: 2
+  } : {
+    content: '""',
+    borderBottom: `2px solid transparent`,
+    width: `${REACTIONS_CONTAINER_WIDTH}px`,
+    bottom: '0px',
+    display: 'block',
+    position: 'absolute',
+    zIndex: 1
+  }
+});
+export const navigationContainerStyle = css({
+  '> button': {
+    cursor: 'pointer'
+  },
+  'button:last-child': {
+    marginLeft: '16px'
+  }
+});
+export const reactionViewStyle = css({
+  marginTop: '24px',
+  display: 'flex',
+  flexDirection: 'column',
+  p: {
+    margin: 0,
+    color: `${token('color.text', N800)}`,
+    textTransform: 'capitalize',
+    fontWeight: 600,
+    fontSize: 16,
+    lineHeight: '20px',
+    '> span': {
+      marginRight: 8
+    }
+  }
+});
+export const userListStyle = css({
+  listStyle: 'none',
+  marginTop: 16,
+  padding: 0,
+  textAlign: 'left',
+  li: {
+    color: `${token('color.text', N500)}`,
+    fontSize: 14
+  }
+});
+export const userStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '8px 0px 8px 0px',
+  '> span': {
+    marginLeft: 16
+  }
+});
+export const customTabListStyles = css({
+  overflow: 'auto',
+  scrollBehavior: 'smooth',
+  display: 'flex',
+  paddingBottom: 4,
+  'div[role=tablist]': {
+    flexGrow: 1
+  }
+});
+export const centerSpinner = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%'
+});

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -61,10 +61,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     allowAllEmojis,
     disabled,
     pickerQuickReactionEmojiIds,
-    onShowMore,
-    onOpen,
-    onCancel,
-    tooltipContent = jsx(FormattedMessage, i18n.messages.addReaction)
+    onShowMore = () => {},
+    onOpen = () => {},
+    onCancel = () => {},
+    tooltipContent = jsx(FormattedMessage, i18n.messages.addReaction),
+    emojiPickerSize
   } = props;
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
@@ -92,10 +93,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
    */
 
   useClickAway(wrapperRef, () => {
-    if (onCancel) {
-      onCancel();
-    }
-
+    onCancel();
     close();
   }, 'click', true);
   /**
@@ -128,10 +126,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       isOpen: true,
       showFullPicker: true
     });
-
-    if (onShowMore) {
-      onShowMore();
-    }
+    onShowMore();
   }, [onShowMore]);
   /**
    * Event callback when an emoji icon is selected
@@ -158,11 +153,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     });
-
-    if (onOpen) {
-      onOpen();
-    } // ufo reactions picker opened success
-
+    onOpen(); // ufo reactions picker opened success
 
     UFO.PickerRender.success();
   };
@@ -182,7 +173,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   return jsx("div", {
     className: wrapperClassName,
     css: styles.pickerStyle,
-    ref: wrapperRef,
     "data-testid": RENDER_REACTIONPICKER_TESTID
   }, jsx(Manager, null, jsx(Reference, null, ({
     ref: popperRef
@@ -214,10 +204,12 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       },
       ref: ref
     }, jsx("div", {
-      css: styles.popupStyle
+      css: styles.popupStyle,
+      ref: wrapperRef
     }, settings.showFullPicker ? jsx(EmojiPicker, {
       emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected
+      onSelection: onEmojiSelected,
+      size: emojiPickerSize
     }) : jsx("div", {
       css: styles.contentStyle
     }, jsx(Selector, {

package/dist/es2019/components/ReactionTooltip/ReactionTooltip.js

@@ -13,31 +13,41 @@ import * as styles from './styles';
 
 export const RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
 export const ReactionTooltip = ({
-  emojiName,
   children,
-  maxReactions = constants.TOOLTIP_USERS_LIMIT,
+  emojiName,
   reaction: {
-    users = []
-  }
+    users = [],
+    emojiId = ''
+  },
+  maxReactions = constants.TOOLTIP_USERS_LIMIT,
+  handleUserListClick,
+  allowUserDialog = false,
+  isEnabled = true
 }) => {
   /**
    * Render list of users in the tooltip box
    */
-  const content = !users || users.length === 0 ? null : jsx("div", {
-    css: styles.tooltipStyle
+  const content = !users || users.length === 0 || !isEnabled ? null : jsx("div", {
+    css: styles.tooltipStyle,
+    tabIndex: 0
   }, jsx("ul", null, emojiName ? jsx("li", {
     css: styles.emojiNameStyle
-  }, emojiName) : null, users.slice(0, maxReactions).map((user, index) => {
+  }, emojiName) : null, users.slice(0, maxReactions).map(user => {
     return jsx("li", {
-      key: index
+      key: user.id
     }, user.displayName);
-  }), users.length > maxReactions ? jsx("li", {
-    css: styles.footerStyle
-  }, jsx(FormattedMessage, _extends({}, i18n.messages.otherUsers, {
+  }), jsx("li", {
+    css: allowUserDialog ? [styles.footerStyle, styles.underlineStyle] : styles.footerStyle,
+    onClick: () => {
+      if (allowUserDialog && handleUserListClick) {
+        handleUserListClick(emojiId);
+      }
+    }
+  }, users.length > maxReactions ? jsx(FormattedMessage, _extends({}, i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
-  }))) : null));
+  })) : allowUserDialog && jsx(FormattedMessage, i18n.messages.moreInfo))));
   return jsx(Tooltip, {
     content: content,
     position: "bottom",

package/dist/es2019/components/ReactionTooltip/styles.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
-import { N90 } from '@atlaskit/theme/colors';
+import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export const verticalMargin = 5;
 export const tooltipStyle = css({
   maxWidth: '150px',
@@ -29,4 +29,12 @@ export const emojiNameStyle = css({
 export const footerStyle = css({
   color: token('color.text.inverse', N90),
   fontWeight: 300
+});
+export const underlineStyle = css({
+  cursor: 'pointer',
+  textDecoration: 'underline',
+  ':hover': {
+    backgroundColor: token('color.background.neutral.bold', N800),
+    color: token('color.text.inverse', N0)
+  }
 });

package/dist/es2019/components/Reactions/Reactions.js

@@ -1,19 +1,48 @@
 /** @jsx jsx */
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { FormattedMessage } from 'react-intl-next';
-import { Analytics } from '../../analytics';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ModalTransition } from '@atlaskit/modal-dialog';
+import Button from '@atlaskit/button';
+import Tooltip from '@atlaskit/tooltip';
+import { Analytics, UFO } from '../../analytics';
 import { ReactionStatus } from '../../types';
 import { i18n } from '../../shared';
 import { Reaction } from '../Reaction';
+import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import * as styles from './styles';
+/**
+ * Set of all available UFO experiences relating to reactions dialog
+ */
+
+export const ufoExperiences = {
+  /**
+   * Expeirence when a reaction dialog is opened
+   */
+  openDialog: UFO.ReactionDialogOpened,
+
+  /**
+   * Experience when a reaction dialog is closed
+   */
+  closeDialog: UFO.ReactionDialogClosed,
+
+  /**
+   * Experience when a reaction changed/fetched from inside the modal dialog
+   */
+  selectedReactionChangeInsideDialog: UFO.ReactionDialogSelectedReactionChanged
+};
 /**
  * Test id for wrapper Reactions div
  */
 
 export const RENDER_REACTIONS_TESTID = 'render-reactions';
+/**
+ * Test id for the view all reacted user to trigger the dialog
+ */
+
+export const RENDER_VIEWALL_REACTED_USERS_DIALOG = 'viewall-reacted-users-dialog';
 
 /**
  * Get content of the tooltip
@@ -46,41 +75,48 @@ export const Reactions = /*#__PURE__*/React.memo(({
   loadReaction,
   quickReactionEmojis,
   pickerQuickReactionEmojiIds,
-  onReactionHover,
+  getReactionDetails = () => {},
+  onReactionHover = () => {},
   onSelection,
   reactions = [],
   emojiProvider,
   allowAllEmojis,
-  onReactionClick
+  onReactionClick,
+  allowUserDialog,
+  onDialogOpenCallback = () => {},
+  onDialogCloseCallback = () => {},
+  onDialogSelectReactionCallback = () => {},
+  emojiPickerSize = 'medium'
 }) => {
+  const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
   let openTime = useRef();
   let renderTime = useRef();
-
-  if (status !== ReactionStatus.ready) {
-    renderTime.current = Date.now();
-  }
-
   useEffect(() => {
     if (status === ReactionStatus.notLoaded) {
       loadReaction();
     }
   }, [status, loadReaction]);
   useEffect(() => {
-    if (status === ReactionStatus.ready && renderTime.current) {
-      Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionsRenderedEvent, renderTime.current);
+    if (status !== ReactionStatus.ready) {
+      renderTime.current = Date.now();
+    } else {
+      var _renderTime$current;
+
+      Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
+      );
       renderTime.current = undefined;
     }
   }, [createAnalyticsEvent, status]);
-
-  const handleReactionMouseEnter = summary => {
-    if (onReactionHover) {
-      onReactionHover(summary.emojiId);
-    }
-  };
-
+  const handleReactionMouseEnter = useCallback(emojiId => {
+    getReactionDetails(emojiId);
+    onReactionHover(emojiId);
+  }, [getReactionDetails, onReactionHover]);
+  const handleReactionFocused = useCallback(emojiId => {
+    getReactionDetails(emojiId);
+  }, [getReactionDetails]);
   const handlePickerOpen = useCallback(() => {
     openTime.current = Date.now();
     Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerButtonClickedEvent, reactions.length);
@@ -97,10 +133,80 @@ export const Reactions = /*#__PURE__*/React.memo(({
     openTime.current = undefined;
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
+  /**
+   * event handler to open selected reaction from tooltip
+   * @param emojiId selected emoji id
+   */
+
+  const handleOpenReactionsDialog = emojiId => {
+    // ufo start opening reaction dialog
+    ufoExperiences.openDialog.start();
+    setSelectedEmojiId(emojiId);
+    onDialogOpenCallback(emojiId, 'tooltip'); // ufo opening reaction dialog success
+
+    ufoExperiences.openDialog.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions',
+        reason: 'Opening dialog from emoji tooltip link successfully'
+      }
+    });
+  };
+  /**
+   * Event handler to oepn all reactions link button
+   */
+
+
+  const handleOpenAllReactionsDialog = () => {
+    // ufo start opening reaction dialog
+    ufoExperiences.openDialog.start();
+    const emojiId = reactions[0].emojiId;
+    getReactionDetails(emojiId);
+    setSelectedEmojiId(emojiId);
+    onDialogOpenCallback(emojiId, 'button'); // ufo opening reaction dialog success
+
+    ufoExperiences.openDialog.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions',
+        reason: 'Opening all reactions dialog link successfully'
+      }
+    });
+  };
+
+  const handleCloseReactionsDialog = (e, analyticsEvent) => {
+    // ufo closing opening reaction dialog
+    ufoExperiences.closeDialog.start();
+    setSelectedEmojiId('');
+    onDialogCloseCallback(e, analyticsEvent); // ufo closing reaction dialog success
+
+    ufoExperiences.closeDialog.success({
+      metadata: {
+        source: 'Reactions',
+        reason: 'Closing reactions dialog successfully'
+      }
+    });
+  };
+
+  const handleSelectReactionInDialog = (emojiId, analyticsEvent) => {
+    // ufo selected reaction inside the modal dialog
+    ufoExperiences.selectedReactionChangeInsideDialog.start();
+    handleReactionMouseEnter(emojiId);
+    onDialogSelectReactionCallback(emojiId, analyticsEvent); // ufo selected reaction inside the modal dialog success
+
+    ufoExperiences.selectedReactionChangeInsideDialog.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions',
+        reason: 'Selected Emoji changed'
+      }
+    });
+  };
   /**
    * Get the reactions that we want to render are any reactions with a count greater than zero as well as any default emoji not already shown
    */
 
+
   const memorizedReactions = useMemo(() => {
     //
 
@@ -138,7 +244,10 @@ export const Reactions = /*#__PURE__*/React.memo(({
     emojiProvider: emojiProvider,
     onClick: onReactionClick,
     onMouseEnter: handleReactionMouseEnter,
-    flash: flash[reaction.emojiId]
+    onFocused: handleReactionFocused,
+    flash: flash[reaction.emojiId],
+    handleUserListClick: handleOpenReactionsDialog,
+    allowUserDialog: allowUserDialog
   })), jsx(ReactionPicker, {
     css: styles.reactionStyle,
     emojiProvider: emojiProvider,
@@ -150,6 +259,21 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage)
-  }));
+    tooltipContent: getTooltip(status, errorMessage),
+    emojiPickerSize: emojiPickerSize
+  }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
+    content: jsx(FormattedMessage, i18n.messages.seeWhoReactedTooltip),
+    hideTooltipOnClick: true
+  }, jsx(Button, {
+    appearance: "subtle-link",
+    onClick: handleOpenAllReactionsDialog,
+    css: styles.seeWhoReacted,
+    testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
+  }, jsx(FormattedMessage, i18n.messages.seeWhoReacted))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
+    selectedEmojiId: selectedEmojiId,
+    reactions: memorizedReactions,
+    emojiProvider: emojiProvider,
+    handleCloseReactionsDialog: handleCloseReactionsDialog,
+    handleSelectReaction: handleSelectReactionInDialog
+  })));
 });

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

@@ -2,8 +2,14 @@
 import { css } from '@emotion/react';
 export const reactionStyle = css({
   display: 'inline-block',
-  // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
-  margin: '2px 4px 0 4px'
+  margin: '4px'
+});
+export const seeWhoReacted = css({
+  height: '24px',
+  lineHeight: '24px',
+  paddingLeft: '4px',
+  paddingRight: '4px',
+  margin: '4px'
 });
 export const wrapperStyle = css({
   display: 'flex',
@@ -11,9 +17,7 @@ export const wrapperStyle = css({
   position: 'relative',
   alignItems: 'center',
   borderRadius: '15px',
-  // To allow to row spacing of 2px on wrap, and 0px on first row
-  marginTop: '-2px',
-  '> :first-of-type > :first-child': {
+  '> :first-of-type > :first-of-type': {
     marginLeft: 0
   }
 });

package/dist/es2019/components/Trigger/Trigger.js

@@ -33,8 +33,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   return jsx(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: tooltipContent,
-    position: "top"
+    content: tooltipContent
   }, jsx(Button, _extends({
     css: styles.triggerStyle({
       miniMode,

package/dist/es2019/components/index.js

@@ -1,4 +1,5 @@
 export { Reaction } from './Reaction';
 export { ReactionPicker } from './ReactionPicker';
 export { Reactions } from './Reactions';
-export { UfoErrorBoundary } from './UfoErrorBoundary';
+export { UfoErrorBoundary } from './UfoErrorBoundary';
+export { ReactionsDialog } from './ReactionDialog/ReactionsDialog';

package/dist/es2019/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -7,15 +7,21 @@ import { UFO } from '../../analytics';
  * Reaction Picker component
  */
 export const ConnectedReactionPicker = props => {
+  const {
+    store,
+    containerAri,
+    ari
+  } = props;
   /**
    * callback event when an emoji item is selected
    * @param emojiId unique id for the reaction emoji
    */
+
   const onSelection = emojiId => {
     (async () => {
-      const _store = await Promise.resolve(props.store);
+      const _store = await Promise.resolve(store);
 
-      _store.addReaction(props.containerAri, props.ari, emojiId);
+      _store.addReaction(containerAri, ari, emojiId);
     })();
   };
 

package/dist/es2019/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -52,7 +52,7 @@ export const mapDispatchToPropsHelper = (actions, containerAri, ari) => {
     onReactionClick: emojiId => {
       actions.toggleReaction(containerAri, ari, emojiId);
     },
-    onReactionHover: emojiId => {
+    getReactionDetails: emojiId => {
       actions.getDetailedReaction(containerAri, ari, emojiId);
     },
     onSelection: emojiId => {
@@ -64,7 +64,8 @@ export const ConnectedReactionsView = props => {
   const {
     ari,
     containerAri,
-    store
+    store,
+    ...rest
   } = props;
   /**
    * Reference to the <Reactions /> component instance mandatory props
@@ -159,6 +160,6 @@ export const ConnectedReactionsView = props => {
   }, /*#__PURE__*/React.createElement(UfoErrorBoundary, {
     experiences: experienceInstance.current ? [experienceInstance.current] : []
   }, stateData && dispatchData ? /*#__PURE__*/React.createElement(Reactions, _extends({
-    key: `${props.containerAri}|${props.ari}`
-  }, props, dispatchData, stateData)) : null));
+    key: `${containerAri}|${ari}`
+  }, rest, dispatchData, stateData)) : null));
 };