@atlaskit/emoji 73.3.2 → 73.3.4

package/dist/es2019/components/common/EmojiUploadPicker.compiled.css

@@ -1,33 +1,20 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._scffidpf input{border:0}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
-._16jlkb7n{flex-grow:1}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1b1v{justify-content:space-around}
 ._1bah1yb4{justify-content:space-between}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._1o9zkb7n{flex-shrink:1}
-._1rwq1j28 input{background-color:transparent}
 ._1tker0r7{min-height:250px}
 ._1w90azsu._1w90azsu{color:var(--ds-text-subtle,#505258)}
 ._2lx21bp4{flex-direction:column}
-._34ir1o36 input{outline-width:medium}
 ._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
-._9bj2glyw input::-ms-clear{display:none}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._coc6glyw input:invalid{box-shadow:none}
-._gxxuglyw input{outline-style:none}
-._gy1p12x7{column-gap:var(--ds-space-075,6px)}
-._i0dl1wug{flex-basis:auto}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
-._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
-._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
-._xmji1r31 input{outline-color:currentColor}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/es2019/components/common/EmojiUploadPicker.js

@@ -3,36 +3,25 @@ import "./EmojiUploadPicker.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
-import FocusLock from 'react-focus-lock';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { getDocument } from '@atlaskit/browser-apis';
 import Button from '@atlaskit/button/default/button';
-import AkButton from '@atlaskit/button/standard-button';
-import CrossIcon from '@atlaskit/icon/core/cross';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { Box } from '@atlaskit/primitives/compiled/box';
-import { Text } from '@atlaskit/primitives/compiled/text';
 import TextField from '@atlaskit/textfield/text-field';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
 import CreateEmojiWithRovo from './CreateEmojiWithRovo';
 import EmojiErrorMessage from './EmojiErrorMessage';
-import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
-import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
-const closeEmojiUploadButton = null;
 const uploadAddRowNew = null;
-const emojiUpload = null;
 const emojiUploadNew = null;
-const emojiUploadTop = null;
 const emojiUploadTopNew = null;
 const labelStyles = null;
 const labelStylesNew = null;
-const uploadChooseFileEmojiName = null;
 const uploadChooseFileMessage = null;
-const uploadChooseFileRow = null;
 const uploadChooseFileRowNew = null;
 const supportedEmojiUploadMimeTypes = new Set(['image/png', 'image/jpeg', 'image/gif']);
 const supportedEmojiUploadExtensions = ['.png', '.jpg', '.jpeg', '.gif'];
@@ -57,9 +46,6 @@ const toDefaultUploadName = fileName => {
   return sanitizeName(nameWithoutExtension).slice(0, maxNameLength);
 };
 const isSupportedEmojiUploadFileType = file => {
-  if (!isRefreshEmojiPickerEnabled()) {
-    return true;
-  }
   if (supportedEmojiUploadMimeTypes.has(file.type)) {
     return true;
   }
@@ -84,7 +70,6 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   const {
     formatMessage
   } = intl;
-  const disableChooser = !name;
   const fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
   const inputRef = useRef(null);
   const onKeyDownHandler = useCallback(event => {
@@ -98,14 +83,12 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     });
   }, []);
-  const cancelLabel = formatMessage(messages.cancelLabel);
   const emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
   const emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
-  const emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
   const emojiChooseFileTitleNew = formatMessage(messages.emojiChooseFileDndTitle);
   const isUploading = uploadStatus === UploadStatus.Uploading;
   const addEmojiDisabled = !previewImage || !name || isUploading;
-  return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiComponentTestId,
     className: ax(["_ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
@@ -116,7 +99,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   }, previewImage ? /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle) : /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel))), /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulp12x7 _1e0c1txw _2lx21bp4 _1tker0r7"])
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, () => /*#__PURE__*/React.createElement(FileChooser, {
-    label: isRefreshEmojiPickerEnabled() ? emojiChooseFileTitleNew : emojiChooseFileTitle,
+    label: emojiChooseFileTitleNew,
     onChange: onChooseFile,
     onClick: onClick,
     accept: "image/png,image/jpeg,image/gif",
@@ -160,60 +143,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     appearance: "primary",
     isDisabled: addEmojiDisabled,
     isLoading: isUploading
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addEmojiLabel)))) : /*#__PURE__*/React.createElement("div", {
-    "data-testid": uploadEmojiComponentTestId,
-    className: ax(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c8wadc _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: "new-emoji-name-input",
-    className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1txw"])
-  }, /*#__PURE__*/React.createElement(AkButton, {
-    onClick: onUploadCancelled,
-    "aria-label": cancelLabel,
-    appearance: "subtle",
-    spacing: "none",
-    shouldFitContainer: true,
-    testId: cancelEmojiUploadPickerTestId,
-    name: messages.addCustomEmojiLabel.defaultMessage
-  }, /*#__PURE__*/React.createElement(CrossIcon, {
-    color: "currentColor",
-    label: cancelLabel
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1txw _1bah1yb4 _n3tdu2gc _gy1p12x7"])
-  }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
-  }, /*#__PURE__*/React.createElement(TextField, {
-    placeholder: emojiPlaceholder,
-    "aria-label": emojiNameAriaLabel,
-    maxLength: maxNameLength,
-    onChange: onNameChange,
-    onKeyDown: onKeyDownHandler,
-    value: name,
-    isCompact: true,
-    autoFocus: true,
-    testId: uploadEmojiNameInputTestId,
-    ref: inputRef,
-    id: "new-emoji-name-input",
-    "aria-required": true
-  })), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, () => /*#__PURE__*/React.createElement(FileChooser, {
-    label: isRefreshEmojiPickerEnabled() ? emojiChooseFileTitleNew : emojiChooseFileTitle,
-    onChange: onChooseFile,
-    onClick: onClick,
-    accept: "image/png,image/jpeg,image/gif",
-    ariaDescribedBy: fileChooserButtonDescriptionId,
-    isDisabled: disableChooser
-  })))), /*#__PURE__*/React.createElement("div", {
-    id: fileChooserButtonDescriptionId
-  }, !errorMessage ? /*#__PURE__*/React.createElement(Text, {
-    as: "p",
-    size: "small"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageRequirements)) : /*#__PURE__*/React.createElement(EmojiErrorMessage, {
-    errorStyle: "chooseFile",
-    message: errorMessage
-  })));
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addEmojiLabel))));
 });
 const EmojiUploadPicker = props => {
   var _document$activeEleme;
@@ -223,7 +153,6 @@ const EmojiUploadPicker = props => {
     onUploadEmoji,
     onFileChooserClicked,
     onUploadCancelled,
-    disableFocusLock = false,
     contentId,
     fireAnalytics,
     onUploadPreviewErrorChange,
@@ -319,7 +248,7 @@ const EmojiUploadPicker = props => {
   const onFileLoad = useCallback(file => async f => {
     try {
       setFilename(file.name);
-      if (!name && isRefreshEmojiPickerEnabled()) {
+      if (!name) {
         setName(toDefaultUploadName(file.name));
       }
       await ImageUtil.parseImage(f.target.result);
@@ -376,7 +305,7 @@ const EmojiUploadPicker = props => {
   const onChooseFileClicked = () => {
     onFileChooserClicked && onFileChooserClicked();
   };
-  const isDuplicateNameError = errorMessage !== null && errorMessage !== undefined && isRefreshEmojiPickerEnabled();
+  const isDuplicateNameError = errorMessage !== null && errorMessage !== undefined;
 
   // "Create an emoji with Rovo" AI generation section. Only rendered when the
   // experiment is on AND a page content id is available (the image generation
@@ -388,14 +317,7 @@ const EmojiUploadPicker = props => {
     fireAnalytics: fireAnalytics,
     onEmojiGenerated: onEmojiGenerated
   }) : null;
-  const content = name && previewImage && !isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
-    errorMessage: errorMessage,
-    name: name,
-    onAddEmoji: onAddEmoji,
-    onUploadCancelled: cancelUpload,
-    previewImage: previewImage,
-    uploadStatus: uploadStatus
-  }) : /*#__PURE__*/React.createElement(ChooseEmojiFile, {
+  const content = /*#__PURE__*/React.createElement(ChooseEmojiFile, {
     name: name,
     onChooseFile: onChooseFile,
     onClick: onChooseFileClicked,
@@ -409,9 +331,7 @@ const EmojiUploadPicker = props => {
     aiSection: aiSection,
     intl: intl
   });
-  return disableFocusLock || isRefreshEmojiPickerEnabled() ? content : /*#__PURE__*/React.createElement(FocusLock, {
-    noFocusGuards: true
-  }, content);
+  return content;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-types

package/dist/es2019/components/common/FileChooser.js

@@ -7,7 +7,6 @@ import UploadIcon from '@atlaskit/icon/core/upload';
 import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/adapter/drop-target-for-external';
 import { containsFiles } from '@atlaskit/pragmatic-drag-and-drop/utils/contains-files';
 import { getFiles } from '@atlaskit/pragmatic-drag-and-drop/utils/get-files';
-import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
 export const chooseFileButtonTestId = 'choose-file-button';
 export const fileUploadInputTestId = 'file-upload';
 export const dropzoneTestId = 'file-dropzone';
@@ -61,7 +60,7 @@ const FileChooser = props => {
   }, [onChange]);
   useEffect(() => {
     const element = dropzoneRef.current;
-    if (!element || !isRefreshEmojiPickerEnabled()) {
+    if (!element) {
       return;
     }
     const suppressNativeFileDrop = event => {
@@ -162,31 +161,22 @@ const FileChooser = props => {
     },
     "data-testid": fileUploadInputTestId
   });
-  if (isRefreshEmojiPickerEnabled()) {
-    return /*#__PURE__*/React.createElement("div", {
-      ref: dropzoneRef,
-      "data-testid": dropzoneTestId,
-      "data-dragging": isDragging ? 'true' : undefined,
-      role: "region",
-      "aria-label": label,
-      className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])
-    }, previewImage ? /*#__PURE__*/React.createElement("img", {
-      src: previewImage,
-      alt: previewAlt,
-      className: ax(["_c71l1j4a _p12f1osq _5ral1f51"])
-    }) : /*#__PURE__*/React.createElement(Button, {
-      onClick: handleOnChooseFile,
-      isDisabled: isDisabled,
-      appearance: "subtle",
-      iconBefore: UploadIcon,
-      "aria-describedby": ariaDescribedBy,
-      testId: chooseFileButtonTestId,
-      ref: fileButtonRef
-    }, label), hiddenInput);
-  }
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropzoneRef,
+    "data-testid": dropzoneTestId,
+    "data-dragging": isDragging ? 'true' : undefined,
+    role: "region",
+    "aria-label": label,
+    className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])
+  }, previewImage ? /*#__PURE__*/React.createElement("img", {
+    src: previewImage,
+    alt: previewAlt,
+    className: ax(["_c71l1j4a _p12f1osq _5ral1f51"])
+  }) : /*#__PURE__*/React.createElement(Button, {
     onClick: handleOnChooseFile,
     isDisabled: isDisabled,
+    appearance: "subtle",
+    iconBefore: UploadIcon,
     "aria-describedby": ariaDescribedBy,
     testId: chooseFileButtonTestId,
     ref: fileButtonRef

package/dist/es2019/components/common/TonePreviewButton.compiled.css

@@ -1,7 +1,6 @@
 ._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._19itidpf{border:0}
-._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._11bcidpf::-moz-focus-inner{border-width:0}
 ._dqozglyw::-moz-focus-inner{border-style:none}
 ._19bvidpf{padding-left:0}
 ._1at812x7>span{padding-top:var(--ds-space-075,6px)}

package/dist/es2019/components/common/TonePreviewButton.js

@@ -3,7 +3,6 @@ import "./TonePreviewButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo } from 'react';
-import { isTeamoji26RefreshEmojiPickerEnabledNoExposure } from '../../util/teamoji26RefreshEmojiPicker';
 import Emoji from './Emoji';
 export const tonePreviewTestId = 'tone-preview';
 const emojiButton = null;
@@ -21,7 +20,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     onSelected,
     isVisible = true
   } = props;
-  return isTeamoji26RefreshEmojiPickerEnabledNoExposure() ? /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
     onKeyDown: onKeyDown,
@@ -35,27 +34,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     },
     "data-testid": tonePreviewTestId,
     type: "button",
-    className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51", "_2rko1qi0"])
-  }, /*#__PURE__*/React.createElement(Emoji, {
-    emoji: emoji,
-    selectOnHover: selectOnHover,
-    shouldBeInteractive: false,
-    "aria-hidden": true
-  })) : /*#__PURE__*/React.createElement("button", {
-    ref: ref,
-    onClick: onSelected,
-    onKeyDown: onKeyDown,
-    "aria-label": ariaLabelText,
-    "aria-expanded": ariaExpanded,
-    "aria-controls": ariaControls
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      overflow: 'hidden'
-    },
-    "data-testid": tonePreviewTestId,
-    type: "button",
-    className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+    className: ax(["_19itidpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51", "_2rko1qi0"])
   }, /*#__PURE__*/React.createElement(Emoji, {
     emoji: emoji,
     selectOnHover: selectOnHover,

package/dist/es2019/components/common/ToneSelectorInternal.js

@@ -9,7 +9,6 @@ import { toneSelectedEvent } from '../../util/analytics/toneSelectedEvent';
 import { toneSelectorOpenedEvent } from '../../util/analytics/toneSelectorOpenedEvent';
 import { messages } from '../i18n';
 import EmojiRadioButton from './EmojiRadioButton';
-import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { toneSelectorTestId } from './ToneSelector';
 const hidden = null;
@@ -102,7 +101,7 @@ export const ToneSelectorInternal = props => {
     onMouseDown: onMouseDownHandler,
     className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
   }, emojiToneCollection.map((tone, renderIndex) => {
-    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiRadioButton, {
+    return /*#__PURE__*/React.createElement(EmojiRadioButton, {
       ref: el => {
         radioRefs.current[renderIndex] = el;
         if (tone.isSelected && selectedToneRadioRef) {
@@ -116,14 +115,6 @@ export const ToneSelectorInternal = props => {
       onArrowKey: direction => onArrowKey(renderIndex, direction),
       onSelected: onToneSelectedHandler(tone.toneIndex),
       selectOnHover: true
-    }) : /*#__PURE__*/React.createElement(EmojiRadioButton, {
-      ref: tone.isSelected ? selectedToneRadioRef : null,
-      defaultChecked: tone.isSelected,
-      ariaLabelText: tone.label,
-      key: `${tone.id}`,
-      emoji: tone,
-      onSelected: onToneSelectedHandler(tone.toneIndex),
-      selectOnHover: true
     });
   }));
 };

package/dist/es2019/components/picker/CategorySelector.compiled.css

@@ -1,10 +1,8 @@
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._v564h5h4{transition:color .2s ease}
 ._189eidpf{border-width:0}._13li1mok{border-top-left-radius:var(--ds-radius-large,8px)}
 ._16jlidpf{flex-grow:0}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
-._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bah1b1v{justify-content:space-around}
 ._1bah1h6o{justify-content:center}
 ._1doc1dm9{border-bottom-width:var(--ds-border-width-selected,2px)}
@@ -18,15 +16,12 @@
 ._2lx2vrvc{flex-direction:row}
 ._4cvr1fhb{align-items:stretch}
 ._4cvr1h6o{align-items:center}
-._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
-._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._dpd31txw button{display:flex}
 ._i0dl1wug{flex-basis:auto}
-._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._qrwq1mok{border-top-right-radius:var(--ds-radius-large,8px)}
@@ -34,7 +29,6 @@
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
-._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._1jc41ihb:hover{border-bottom-color:var(--ds-border-bold,#7d818a)}
 ._1jc4a755:hover{border-bottom-color:var(--ds-border-brand,#1868db)}
 ._30l31rpy:hover{color:var(--ds-text-subtlest,#6b6e76)}

package/dist/es2019/components/picker/CategorySelector.js

@@ -9,31 +9,24 @@ import { Pressable } from '@atlaskit/primitives/compiled/pressable';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { usePrevious } from '../../hooks/usePrevious';
 import { CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED, defaultCategories, KeyboardKeys } from '../../util/constants';
-import { isRefreshEmojiPickerEnabled } from '../common/isRefreshEmojiPickerEnabled';
 import { messages } from '../i18n';
-import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
+import { CategoryDescriptionMapNew } from './categories';
 import { categorySelectorCategoryTestId } from './categorySelectorCategoryTestId';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
-import { sortCategories } from './sortCategories';
 import { sortCategoriesNew } from './sortCategoriesNew';
 const styles = {
-  commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
   commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
-  defaultCategory: "_syaz1rpy _30l36x5g",
   defaultCategoryNew: "_syaz1rpy _1doc1dm9 _1il9nqa1 _1o3i1j28 _30l31rpy _1jc41ihb",
-  activeCategory: "_syaz6x5g _30l36x5g",
   activeCategoryNew: "_syaz6x5g _1doc1dm9 _1il9nqa1 _1o3ia755 _30l36x5g _1jc4a755",
   disabledCategory: "_syaz1rpy"
 };
-const categorySelector = null;
 const categorySelectorNew = null;
-const categorySelectorTablist = null;
 const categorySelectorTablistNew = null;
 const addNewCategories = (oldCategories, newCategories) => {
   if (!newCategories) {
     return oldCategories;
   }
-  return oldCategories.concat(newCategories.filter(category => !!(isRefreshEmojiPickerEnabled() ? CategoryDescriptionMapNew : CategoryDescriptionMap)[category])).sort(isRefreshEmojiPickerEnabled() ? sortCategoriesNew : sortCategories);
+  return oldCategories.concat(newCategories.filter(category => !!CategoryDescriptionMapNew[category])).sort(sortCategoriesNew);
 };
 export const categorySelectorComponentTestId = 'category-selector-component';
 const CategorySelector = props => {
@@ -122,14 +115,14 @@ const CategorySelector = props => {
   };
   let categoriesSection;
   if (categories) {
-    categoriesSection = isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
+    categoriesSection = /*#__PURE__*/React.createElement("div", {
       role: "tablist",
       "aria-label": formatMessage(messages.categoriesSelectorLabel),
       "data-testid": categorySelectorComponentTestId,
       ref: categoryRef,
       className: ax(["_ca0qze3t _n3tdze3t _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1fhb"])
     }, categories.map((categoryId, index) => {
-      const category = isRefreshEmojiPickerEnabled() ? CategoryDescriptionMapNew[categoryId] : CategoryDescriptionMap[categoryId];
+      const category = CategoryDescriptionMapNew[categoryId];
       const Icon = category.icon;
       const categoryName = formatMessage(messages[category.name]);
       return /*#__PURE__*/React.createElement(Tooltip, {
@@ -152,42 +145,10 @@ const CategorySelector = props => {
       }, /*#__PURE__*/React.createElement(Icon, {
         label: categoryName
       })));
-    })) : /*#__PURE__*/React.createElement("div", {
-      role: "tablist",
-      "aria-label": formatMessage(messages.categoriesSelectorLabel),
-      "data-testid": categorySelectorComponentTestId,
-      ref: categoryRef,
-      className: ax(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
-    }, categories.map((categoryId, index) => {
-      const category = isRefreshEmojiPickerEnabled() ? CategoryDescriptionMapNew[categoryId] : CategoryDescriptionMap[categoryId];
-      const Icon = category.icon;
-      const categoryName = formatMessage(messages[category.name]);
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: categoryName,
-        position: "bottom",
-        key: category.id
-      }, /*#__PURE__*/React.createElement(Pressable, {
-        id: `category-selector-${category.id}`,
-        "data-focus-index": index,
-        "aria-label": categoryName,
-        "aria-controls": currentFocus === index ? RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
-        "aria-selected": categoryId === activeCategoryId,
-        xcss: cx(styles.commonCategory, styles.defaultCategory, categoryId === activeCategoryId && styles.activeCategory, disableCategories && styles.disabledCategory),
-        isDisabled: disableCategories,
-        onClick: handleClick(categoryId, index),
-        testId: categorySelectorCategoryTestId(categoryId),
-        tabIndex: currentFocus === index ? 0 : -1,
-        onKeyDown: handleKeyDown,
-        role: "tab"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        label: categoryName
-      })));
     }));
   }
-  return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkvuon _13li1mok _qrwq1mok _ca0qze3t _n3tdze3t _1doce4h9 _1il9nqa1 _1o3i1l7x _dpd31txw"])
-  }, categoriesSection) : /*#__PURE__*/React.createElement("div", {
-    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkhfxm _dpd31txw"])
   }, categoriesSection);
 };
 export default CategorySelector;

package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css

@@ -1,6 +1,5 @@
 ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
-._2rko1mok{border-radius:var(--ds-radius-large,8px)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16jlkb7n{flex-grow:1}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}