@atlaskit/emoji 69.3.14 → 69.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/emoji
 
+## 69.5.0
+
+### Minor Changes
+
+- [`c79d08af8e6ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c79d08af8e6ab) -
+  Added optional parameter to disable FocusLock for emoji uploader.
+
+## 69.4.0
+
+### Minor Changes
+
+- [`36d69a7efe212`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36d69a7efe212) -
+  [ux] add escape key support to close emoji picker component for reactions (A11y)
+
 ## 69.3.14
 
 ### Patch Changes

package/admin/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/admin.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/admin.d.ts"
       ]

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,84 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/tsDist/@atlaskit__emoji/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/heading/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-client/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-client-react/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/spinner/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/textfield/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/theme/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../data/ufo-external/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../util-service-support/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/visually-hidden/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/afm-volt/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

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

@@ -147,6 +147,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onUploadEmoji = props.onUploadEmoji,
     onFileChooserClicked = props.onFileChooserClicked,
     onUploadCancelled = props.onUploadCancelled,
+    _props$disableFocusLo = props.disableFocusLock,
+    disableFocusLock = _props$disableFocusLo === void 0 ? false : _props$disableFocusLo,
     intl = props.intl;
   var _useState = (0, _react.useState)(errorMessage ? _internalTypes.UploadStatus.Error : _internalTypes.UploadStatus.Waiting),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -298,9 +300,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var onChooseFileClicked = function onChooseFileClicked() {
     onFileChooserClicked && onFileChooserClicked();
   };
-  return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
-    noFocusGuards: true
-  }, name && previewImage ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
+  var content = name && previewImage ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -315,7 +315,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onUploadCancelled: cancelUpload,
     errorMessage: chooseEmojiErrorMessage,
     intl: intl
-  }));
+  });
+  return disableFocusLock ? content : /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+    noFocusGuards: true
+  }, content);
 };
 var EmojiUploadPickerComponent = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/(0, _react.memo)(EmojiUploadPicker));
 var _default = exports.default = EmojiUploadPickerComponent;

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

@@ -17,6 +17,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _colors = require("@atlaskit/theme/colors");
 var _reactDom = require("react-dom");
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _EmojiRepository = require("../../api/EmojiRepository");
 var _EmojiResource = require("../../api/EmojiResource");
 var _constants = require("../../util/constants");
@@ -432,6 +433,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
 
   // stop all key propagation to other event listeners
   var suppressKeyPress = function suppressKeyPress(e) {
+    // Allow escape key to propagate so parent components can handle it (behind feature gate)
+    if ((e.key === 'Escape' || e.key === 'Esc') && (0, _platformFeatureFlags.fg)('platform_emoji_picker_escape_propagation')) {
+      return;
+    }
     e.stopPropagation();
     // We prevent default for enter keypresses
     // since products like Bitbucket might have parent forms

package/dist/cjs/components/uploader/EmojiUploadComponent.js

@@ -28,7 +28,8 @@ var emojiUploadFooter = null;
 var EmojiUploadComponent = function EmojiUploadComponent(props) {
   var emojiProvider = props.emojiProvider,
     createAnalyticsEvent = props.createAnalyticsEvent,
-    onUploaderRef = props.onUploaderRef;
+    onUploaderRef = props.onUploaderRef,
+    disableFocusLock = props.disableFocusLock;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     uploadErrorMessage = _useState2[0],
@@ -129,7 +130,8 @@ var EmojiUploadComponent = function EmojiUploadComponent(props) {
     onFileChooserClicked: onFileChooserClicked,
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
-    errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null
+    errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null,
+    disableFocusLock: disableFocusLock
   })));
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiUploadComponent);

package/dist/cjs/util/analytics/analytics.js

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

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

@@ -134,6 +134,7 @@ const EmojiUploadPicker = props => {
     onUploadEmoji,
     onFileChooserClicked,
     onUploadCancelled,
+    disableFocusLock = false,
     intl
   } = props;
   const [uploadStatus, setUploadStatus] = useState(errorMessage ? UploadStatus.Error : UploadStatus.Waiting);
@@ -253,9 +254,7 @@ const EmojiUploadPicker = props => {
   const onChooseFileClicked = () => {
     onFileChooserClicked && onFileChooserClicked();
   };
-  return /*#__PURE__*/React.createElement(FocusLock, {
-    noFocusGuards: true
-  }, name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+  const content = name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -270,7 +269,10 @@ const EmojiUploadPicker = props => {
     onUploadCancelled: cancelUpload,
     errorMessage: chooseEmojiErrorMessage,
     intl: intl
-  }));
+  });
+  return disableFocusLock ? content : /*#__PURE__*/React.createElement(FocusLock, {
+    noFocusGuards: true
+  }, content);
 };
 const EmojiUploadPickerComponent = injectIntl( /*#__PURE__*/memo(EmojiUploadPicker));
 export default EmojiUploadPickerComponent;

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

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } fr
 import { N40 } from '@atlaskit/theme/colors';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getEmojiVariation } from '../../api/EmojiRepository';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import { KeyboardKeys, customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
@@ -370,6 +371,10 @@ const EmojiPickerComponent = ({
 
   // stop all key propagation to other event listeners
   const suppressKeyPress = e => {
+    // Allow escape key to propagate so parent components can handle it (behind feature gate)
+    if ((e.key === 'Escape' || e.key === 'Esc') && fg('platform_emoji_picker_escape_propagation')) {
+      return;
+    }
     e.stopPropagation();
     // We prevent default for enter keypresses
     // since products like Bitbucket might have parent forms

package/dist/es2019/components/uploader/EmojiUploadComponent.js

@@ -17,7 +17,8 @@ const EmojiUploadComponent = props => {
   const {
     emojiProvider,
     createAnalyticsEvent,
-    onUploaderRef
+    onUploaderRef,
+    disableFocusLock
   } = props;
   const [uploadErrorMessage, setUploadErrorMessage] = useState();
   useEffect(() => {
@@ -89,7 +90,8 @@ const EmojiUploadComponent = props => {
     onFileChooserClicked: onFileChooserClicked,
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
-    errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null
+    errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null,
+    disableFocusLock: disableFocusLock
   })));
 };
 export default /*#__PURE__*/memo(EmojiUploadComponent);

package/dist/es2019/util/analytics/analytics.js

@@ -8,7 +8,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "69.3.13",
+    packageVersion: "69.4.0",
     ...attributes
   }
 });

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

@@ -138,6 +138,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onUploadEmoji = props.onUploadEmoji,
     onFileChooserClicked = props.onFileChooserClicked,
     onUploadCancelled = props.onUploadCancelled,
+    _props$disableFocusLo = props.disableFocusLock,
+    disableFocusLock = _props$disableFocusLo === void 0 ? false : _props$disableFocusLo,
     intl = props.intl;
   var _useState = useState(errorMessage ? UploadStatus.Error : UploadStatus.Waiting),
     _useState2 = _slicedToArray(_useState, 2),
@@ -289,9 +291,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var onChooseFileClicked = function onChooseFileClicked() {
     onFileChooserClicked && onFileChooserClicked();
   };
-  return /*#__PURE__*/React.createElement(FocusLock, {
-    noFocusGuards: true
-  }, name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+  var content = name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -306,7 +306,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onUploadCancelled: cancelUpload,
     errorMessage: chooseEmojiErrorMessage,
     intl: intl
-  }));
+  });
+  return disableFocusLock ? content : /*#__PURE__*/React.createElement(FocusLock, {
+    noFocusGuards: true
+  }, content);
 };
 var EmojiUploadPickerComponent = injectIntl( /*#__PURE__*/memo(EmojiUploadPicker));
 export default EmojiUploadPickerComponent;

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

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } fr
 import { N40 } from '@atlaskit/theme/colors';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getEmojiVariation } from '../../api/EmojiRepository';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import { KeyboardKeys, customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
@@ -423,6 +424,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
 
   // stop all key propagation to other event listeners
   var suppressKeyPress = function suppressKeyPress(e) {
+    // Allow escape key to propagate so parent components can handle it (behind feature gate)
+    if ((e.key === 'Escape' || e.key === 'Esc') && fg('platform_emoji_picker_escape_propagation')) {
+      return;
+    }
     e.stopPropagation();
     // We prevent default for enter keypresses
     // since products like Bitbucket might have parent forms

package/dist/esm/components/uploader/EmojiUploadComponent.js

@@ -19,7 +19,8 @@ var emojiUploadFooter = null;
 var EmojiUploadComponent = function EmojiUploadComponent(props) {
   var emojiProvider = props.emojiProvider,
     createAnalyticsEvent = props.createAnalyticsEvent,
-    onUploaderRef = props.onUploaderRef;
+    onUploaderRef = props.onUploaderRef,
+    disableFocusLock = props.disableFocusLock;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     uploadErrorMessage = _useState2[0],
@@ -120,7 +121,8 @@ var EmojiUploadComponent = function EmojiUploadComponent(props) {
     onFileChooserClicked: onFileChooserClicked,
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
-    errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null
+    errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null,
+    disableFocusLock: disableFocusLock
   })));
 };
 export default /*#__PURE__*/memo(EmojiUploadComponent);

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

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

package/dist/types/components/common/EmojiUploadPicker.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     onFileChooserClicked?: () => void;
     errorMessage?: Message;
     initialUploadName?: string;
+    disableFocusLock?: boolean;
 }
 declare const EmojiUploadPickerComponent: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

package/dist/types/components/uploader/EmojiUploadComponent.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     emojiProvider: EmojiProvider;
     onUploaderRef?: UploadRefHandler;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    disableFocusLock?: boolean;
 }
 declare const _default: import("react").MemoExoticComponent<(props: Props) => JSX.Element>;
 export default _default;

package/dist/types/components/uploader/EmojiUploader.d.ts

@@ -5,6 +5,7 @@ import type { EmojiProvider } from '../../api/EmojiResource';
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface Props extends LoadingProps {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    disableFocusLock?: boolean;
 }
 export declare class EmojiUploaderInternal extends LoadingEmojiComponent<Props, LoadingState> {
     static AsyncLoadedComponent?: React.ComponentType<React.PropsWithChildren<ComponentProps>>;

package/dist/types-ts4.5/components/common/EmojiUploadPicker.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     onFileChooserClicked?: () => void;
     errorMessage?: Message;
     initialUploadName?: string;
+    disableFocusLock?: boolean;
 }
 declare const EmojiUploadPickerComponent: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

package/dist/types-ts4.5/components/uploader/EmojiUploadComponent.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     emojiProvider: EmojiProvider;
     onUploaderRef?: UploadRefHandler;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    disableFocusLock?: boolean;
 }
 declare const _default: import("react").MemoExoticComponent<(props: Props) => JSX.Element>;
 export default _default;

package/dist/types-ts4.5/components/uploader/EmojiUploader.d.ts

@@ -5,6 +5,7 @@ import type { EmojiProvider } from '../../api/EmojiResource';
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface Props extends LoadingProps {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    disableFocusLock?: boolean;
 }
 export declare class EmojiUploaderInternal extends LoadingEmojiComponent<Props, LoadingState> {
     static AsyncLoadedComponent?: React.ComponentType<React.PropsWithChildren<ComponentProps>>;

package/element/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/element.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/element.d.ts"
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "69.3.14",
+	"version": "69.5.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,16 +35,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/button": "^23.3.0",
+		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.11.0",
+		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/media-client": "^35.3.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/react-ufo": "^4.2.0",
+		"@atlaskit/react-ufo": "^4.3.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^19.0.0",
@@ -132,6 +132,9 @@
 		},
 		"platform_reactions_placeholder_custom_background": {
 			"type": "boolean"
+		},
+		"platform_emoji_picker_escape_propagation": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {

package/picker/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/picker.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/picker.d.ts"
       ]

package/resource/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/resource.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/resource.d.ts"
       ]

package/typeahead/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/typeahead.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/typeahead.d.ts"
       ]

package/types/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/types.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/types.d.ts"
       ]

package/utils/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/utils.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/utils.d.ts"
       ]