@atlaskit/emoji 69.10.47 → 69.10.49

package/dist/esm/components/picker/EmojiPickerComponent.js

@@ -8,7 +8,6 @@ import { ax, ix } from "@compiled/react/runtime";
 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; }
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
-import { N40 } from '@atlaskit/theme/colors';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -26,7 +25,7 @@ import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPicker
 import { useEmoji } from '../../hooks/useEmoji';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { messages } from '../i18n';
-var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 var emojiPickerWidth = 350;
@@ -493,9 +492,8 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax(["_19itc0ux _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
     style: {
-      "--_6l0v0b": ix("".concat("var(--ds-border, ".concat(N40, ")"), " ", "var(--ds-border-width, 1px)", " solid")),
       "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
     }

package/dist/esm/components/picker/EmojiPickerFooter.compiled.css

@@ -1,5 +1,5 @@
 
-._x3do1syp{border-top:var(--_10k8kuu)}._16jlidpf{flex-grow:0}
-._16qs2hsd{box-shadow:0 -1px 1px 0 var(--ds-border,rgba(0,0,0,.1))}
+._x3do1uh4{border-top:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
+._16qsvjqj{box-shadow:0 -1px 1px 0 var(--ds-border,#0b120e24)}
 ._1o9zidpf{flex-shrink:0}
 ._i0dl1wug{flex-basis:auto}

package/dist/esm/components/picker/EmojiPickerFooter.js

@@ -3,7 +3,6 @@ import "./EmojiPickerFooter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-import { N30A } from '@atlaskit/theme/colors';
 import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 var emojiPickerFooter = null;
 var emojiPickerFooterWithTopShadow = null;
@@ -12,10 +11,7 @@ var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
   var selectedEmoji = _ref.selectedEmoji;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiPickerFooterTestId,
-    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1syp _16qs2hsd"]),
-    style: {
-      "--_10k8kuu": ix("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, ".concat(N30A, ")")))
-    }
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1uh4 _16qsvjqj"])
   }, selectedEmoji && /*#__PURE__*/React.createElement(EmojiPreviewComponent, {
     emoji: selectedEmoji
   }));

package/dist/esm/components/typeahead/EmojiTypeAheadItem.compiled.css

@@ -7,5 +7,5 @@
 ._2lx2vrvc{flex-direction:row}
 ._2mzuglyw{list-style-type:none}
 ._80omtlke{cursor:pointer}
-._bfhkptpz{background-color:var(--_19g1tth)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._s7n4nkob{vertical-align:middle}

package/dist/esm/components/typeahead/EmojiTypeAheadItem.js

@@ -4,7 +4,6 @@ import "./EmojiTypeAheadItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N30 } from '@atlaskit/theme/colors';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { leftClick } from '../../util/mouse';
 import { toEmojiId } from '../../util/type-helpers';
@@ -36,15 +35,14 @@ export function EmojiTypeAheadItemInternal(props) {
     emojiProvider: emojiProvider
   }, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_1reo15vq _18m915vq _80omtlke _1e0c1ule _2mzuglyw _1bsb1qjl", selected && "_bfhkptpz", "ak-emoji-typeahead-item ".concat(selected ? typeaheadSelected : '')]),
+    className: ax(["_1reo15vq _18m915vq _80omtlke _1e0c1ule _2mzuglyw _1bsb1qjl", selected && "_bfhki8nm", "ak-emoji-typeahead-item ".concat(selected ? typeaheadSelected : '')]),
     onMouseDown: onEmojiSelected,
     onMouseMove: onEmojiMenuItemMouseMove,
     "data-emoji-id": emoji.shortName,
     ref: forwardedRef,
     role: fg('platform_suppression_removal_fix_reactions') ? 'button' : undefined,
     style: {
-      "--_n55fzx": ix("".concat(typeAheadWidth, "px")),
-      "--_19g1tth": ix("var(--ds-background-neutral, ".concat(N30, ")"))
+      "--_n55fzx": ix("".concat(typeAheadWidth, "px"))
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw _2lx2vrvc _1n261g80 _s7n4nkob"])

package/dist/esm/components/typeahead/EmojiTypeAheadListContainer.compiled.css

@@ -1,7 +1,7 @@
 
-._19it155r{border:var(--_gf55z1)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qsp2xt{box-shadow:var(--ds-shadow-overlay,0 3px 6px rgba(0,0,0,.2))}
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bsb1qjl{width:var(--_n55fzx)}
 ._1e0cglyw{display:none}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
-._syazc7r3{color:var(--ds-text-subtle,#333)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}

package/dist/esm/components/typeahead/EmojiTypeAheadListContainer.js

@@ -2,7 +2,6 @@
 import "./EmojiTypeAheadListContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { N40 } from '@atlaskit/theme/colors';
 import { typeAheadListContainer } from './styles';
 var typeAheadEmpty = null;
 var typeAheadWidth = 350;
@@ -12,9 +11,8 @@ export function EmojiTypeAheadListContainer(props) {
     loading = props.loading;
   return /*#__PURE__*/React.createElement("div", {
     /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */
-    className: ax(["_19it155r _2rkofajl _bfhk1bhr _16qsp2xt _syazc7r3 _1bsb1qjl", !hasEmoji && !loading && "_1e0cglyw", 'ak-emoji-typeahead-list']),
+    className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _syazazsu _1bsb1qjl", !hasEmoji && !loading && "_1e0cglyw", 'ak-emoji-typeahead-list']),
     style: {
-      "--_gf55z1": ix("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")"))),
       "--_n55fzx": ix("".concat(typeAheadWidth, "px"))
     }
   }, /*#__PURE__*/React.createElement("div", {

package/dist/esm/util/analytics/analytics.js

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "69.10.46"
+      packageVersion: "69.10.49"
     }, attributes)
   };
 };

package/dist/esm/util/shared-styles.js

@@ -1,13 +1,12 @@
-import { N40, N30 } from '@atlaskit/theme/colors';
 import { emojiPickerWidth } from './constants';
 export var emojiPickerListWidth = emojiPickerWidth;
 export var emojiPickerListHeight = 205;
-export var emojiPickerBorderColor = "var(--ds-border, ".concat(N40, ")");
-export var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
-export var noDialogContainerBorderColor = "var(--ds-border, ".concat(N40, ")");
+export var emojiPickerBorderColor = "var(--ds-border, #0B120E24)";
+export var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
+export var noDialogContainerBorderColor = "var(--ds-border, #0B120E24)";
 export var noDialogContainerBorderRadius = "var(--ds-radius-small, 3px)";
-export var noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
-export var akEmojiSelectedBackgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")");
-export var emojiPreviewSelectedColor = "var(--ds-background-neutral, ".concat(N30, ")");
+export var noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
+export var akEmojiSelectedBackgroundColor = "var(--ds-background-neutral-subtle-hovered, #0515240F)";
+export var emojiPreviewSelectedColor = "var(--ds-background-neutral, #0515240F)";
 export var emojiTypeAheadMaxHeight = 350;
 export var emojiTypeAheadWidth = 350;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "69.10.47",
+	"version": "69.10.49",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,9 +49,8 @@
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/textfield": "^8.2.0",
-		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^48.0.0",
-		"@atlaskit/tokens": "^11.3.0",
+		"@atlaskit/tmp-editor-statsig": "^49.0.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
@@ -78,6 +77,7 @@
 		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/theme": "^22.0.0",
 		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@emotion/jest": "^11.8.0",