@atlaskit/emoji 67.1.0 → 67.2.0

package/dist/types/components/picker/VirtualList.d.ts

@@ -14,6 +14,8 @@ declare type Props = {
 };
 export declare type ListRef = {
     scrollToRow: (index?: number) => void;
+    scrollToRowAndFocusLastEmoji: (index?: number) => void;
+    updateFocusIndex: (index: number) => void;
 };
 export declare const virtualListScrollContainerTestId = "virtual-list-scroll-container";
 export declare const VirtualList: React.ForwardRefExoticComponent<Props & React.RefAttributes<ListRef>>;

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

@@ -1,7 +1,7 @@
 import { PickerSize } from '../../types';
 export declare const emojiPicker: (hasPreview?: boolean | undefined, size?: PickerSize) => import("@emotion/react").SerializedStyles;
-export declare const addButton = "emoji-picker-add-button";
 export declare const categorySelector: import("@emotion/react").SerializedStyles;
+export declare const categorySelectorTablist: import("@emotion/react").SerializedStyles;
 export declare const active: import("@emotion/react").SerializedStyles;
 export declare const disable: import("@emotion/react").SerializedStyles;
 export declare const categoryStyles: import("@emotion/react").SerializedStyles;

package/dist/types/context/EmojiPickerListContext.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { EmojiPickerListContextType } from '../components/common/internal-types';
+export declare const EmojiPickerListContext: React.Context<EmojiPickerListContextType>;
+export interface EmojiPickerListContextProviderProps {
+    initialEmojisFocus: {
+        rowIndex: number;
+        columnIndex: number;
+    };
+}
+export declare const EmojiPickerListContextProvider: FC<EmojiPickerListContextProviderProps>;

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

@@ -0,0 +1 @@
+export declare const useEmojiPickerListContext: () => import("../components/common/internal-types").EmojiPickerListContextType;

package/dist/types/util/constants.d.ts

@@ -2,6 +2,8 @@ import { CategoryId } from '../components/picker/categories';
 export declare const customCategory = "CUSTOM";
 export declare const frequentCategory = "FREQUENT";
 export declare const customType = "SITE";
+export declare const searchCategory = "SEARCH";
+export declare const yourUploadsCategory = "USER_CUSTOM";
 export declare const customTitle = "allUploadsCustomCategory";
 export declare const userCustomTitle = "userUploadsCustomCategory";
 export declare const dataURLPrefix = "data:";
@@ -23,9 +25,34 @@ export declare const emojiPickerHeightWithPreview: number;
 export declare const localStoragePrefix = "fabric.emoji";
 export declare const selectedToneStorageKey: string;
 export declare const defaultCategories: CategoryId[];
+export declare enum KeyboardKeys {
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown",
+    PageUp = "PageUp",
+    PageDown = "PageDown",
+    Home = "Home",
+    End = "End",
+    Enter = "Enter",
+    Tab = "Tab",
+    Space = " "
+}
+export declare enum KeyboardNavigationDirection {
+    Down = "Down",
+    Up = "Up",
+    Left = "Left",
+    Right = "Right"
+}
+export declare const CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED: string[];
+export declare const TONESELECTOR_KEYBOARD_KEYS_SUPPORTED: string[];
+export declare const EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED: string[];
+export declare const DEFAULT_TONE = 0;
 export declare const defaultListLimit = 50;
 export declare const migrationUserId = "hipchat_migration_emoticons";
 export declare const analyticsEmojiPrefix = "atlassian.fabric.emoji.picker";
+export declare const EMOJI_LIST_COLUMNS = 8;
+export declare const EMOJI_LIST_PAGE_COUNT = 5;
 export declare const EMOJI_SEARCH_DEBOUNCE = 150;
 export declare const SAMPLING_RATE_EMOJI_RENDERED_EXP = 20;
 export declare const SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = 100;

package/dist/types/util/shared-styles.d.ts

@@ -3,7 +3,7 @@ export declare const emojiPickerListHeight = 205;
 export declare const emojiPickerBorderColor: "var(--ds-border)";
 export declare const emojiPickerBoxShadow: "var(--ds-shadow-overlay)";
 export declare const noDialogContainerBorderColor: "var(--ds-border)";
-export declare const noDialogContainerBorderRadius: string;
+export declare const noDialogContainerBorderRadius: "var(--ds-radius-100)";
 export declare const noDialogContainerBoxShadow: "var(--ds-shadow-overlay)";
 export declare const akEmojiSelectedBackgroundColor: "var(--ds-background-neutral-subtle-hovered)";
 export declare const emojiPreviewSelectedColor: "var(--ds-background-neutral)";

package/dist/types/util/type-helpers.d.ts

@@ -11,7 +11,7 @@ export declare const hasDataURLImage: (rep: EmojiRepresentation) => boolean;
 export declare const isLoadedMediaEmoji: (emoji: EmojiDescription) => boolean;
 export declare const isEmojiDescriptionWithVariations: (emoji: OptionalEmojiDescription) => emoji is EmojiDescriptionWithVariations;
 export declare const isEmojiVariationDescription: (object: any) => object is EmojiVariationDescription;
-export declare const isMessagesKey: (key: string) => key is "deleteEmojiTitle" | "deleteEmojiDescription" | "deleteEmojiLabel" | "addCustomEmojiLabel" | "emojiPlaceholder" | "emojiNameAriaLabel" | "emojiChooseFileTitle" | "emojiChooseFileScreenReaderDescription" | "emojiSelectSkinToneButtonAriaLabelText" | "emojiImageRequirements" | "emojiPreviewTitle" | "emojiPreview" | "addEmojiLabel" | "retryLabel" | "cancelLabel" | "searchPlaceholder" | "searchLabel" | "categoriesSearchResults" | "frequentCategory" | "peopleCategory" | "natureCategory" | "foodsCategory" | "activityCategory" | "placesCategory" | "objectsCategory" | "symbolsCategory" | "flagsCategory" | "productivityCategory" | "userUploadsCustomCategory" | "allUploadsCustomCategory" | "deleteEmojiFailed" | "emojiInvalidImage" | "emojiUploadFailed" | "emojiImageTooBig";
+export declare const isMessagesKey: (key: string) => key is "deleteEmojiTitle" | "deleteEmojiDescription" | "deleteEmojiLabel" | "addCustomEmojiLabel" | "emojiPlaceholder" | "emojiNameAriaLabel" | "emojiChooseFileTitle" | "emojiChooseFileScreenReaderDescription" | "emojiSelectSkinToneButtonAriaLabelText" | "emojiSelectSkinToneListAriaLabelText" | "emojiImageRequirements" | "emojiPreviewTitle" | "emojiPreview" | "addEmojiLabel" | "retryLabel" | "cancelLabel" | "searchPlaceholder" | "searchLabel" | "searchResultsStatus" | "searchResultsStatusSeeAll" | "categoriesSelectorLabel" | "categoriesSearchResults" | "frequentCategory" | "peopleCategory" | "natureCategory" | "foodsCategory" | "activityCategory" | "placesCategory" | "objectsCategory" | "symbolsCategory" | "flagsCategory" | "productivityCategory" | "userUploadsCustomCategory" | "allUploadsCustomCategory" | "deleteEmojiFailed" | "emojiInvalidImage" | "emojiUploadFailed" | "emojiImageTooBig" | "emojiPickerTitle" | "emojiPickerListPanel" | "emojiPickerGrid" | "emojiButtonRoleDescription";
 export declare const toEmojiId: (emoji: EmojiDescription) => EmojiId;
 export declare const toOptionalEmojiId: (emoji: OptionalEmojiDescription) => EmojiId | undefined;
 export declare const isEmojiIdEqual: (l?: EmojiId | undefined, r?: EmojiId | undefined) => boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.1.0",
+  "version": "67.2.0",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,21 +27,23 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^20.1.0",
+    "@atlaskit/media-client": "^20.2.0",
     "@atlaskit/spinner": "^15.4.0",
     "@atlaskit/textfield": "^5.3.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/util-service-support": "^6.1.0",
+    "@atlaskit/visually-hidden": "^1.1.2",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@tanstack/react-virtual": "3.0.0-beta.22",
     "js-search": "^2.0.0",
     "lru_map": "^0.4.1",
+    "react-focus-lock": "^2.5.2",
     "react-intersection-observer": "^8.26.2",
     "react-loadable": "^5.1.0",
     "use-debounce": "^3.4.0",
@@ -54,13 +56,13 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-test-helpers": "^18.0.0",
+    "@atlaskit/editor-test-helpers": "^18.1.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/media-core": "^34.0.0",
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/util-data-test": "^17.6.0",
+    "@atlaskit/util-data-test": "^17.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.10",
@@ -76,6 +78,7 @@
     "enzyme-adapter-react-16": "^1.15.1",
     "es6-promise": "^4.0.5",
     "fetch-mock": "^8.0.0",
+    "jest-axe": "^4.0.0",
     "p-wait-for": "^3.2.0",
     "react": "^16.8.0",
     "react-addons-perf": "^15.3.2",

package/report.api.md

@@ -416,6 +416,8 @@ class EmojiResource_2
   // (undocumented)
   protected initEmojiRepository(emojiResponses: EmojiResponse[]): void;
   // (undocumented)
+  protected initialLoaders: number;
+  // (undocumented)
   protected initSiteEmojiResource(
     emojiResponse: EmojiResponse,
     provider: ServiceConfig,
@@ -423,6 +425,10 @@ class EmojiResource_2
   // (undocumented)
   protected isInitialised: boolean;
   // (undocumented)
+  protected isRepositoryAvailable: <T>(
+    repository?: T | undefined,
+  ) => repository is T;
+  // (undocumented)
   protected lastQuery?: LastQuery;
   // (undocumented)
   loadMediaEmoji(
@@ -739,6 +745,11 @@ const messages: {
     defaultMessage: string;
     description: string;
   };
+  emojiSelectSkinToneListAriaLabelText: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
   emojiImageRequirements: {
     id: string;
     defaultMessage: string;
@@ -779,6 +790,21 @@ const messages: {
     defaultMessage: string;
     description: string;
   };
+  searchResultsStatus: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  searchResultsStatusSeeAll: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  categoriesSelectorLabel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
   categoriesSearchResults: {
     id: string;
     defaultMessage: string;
@@ -864,6 +890,26 @@ const messages: {
     defaultMessage: string;
     description: string;
   };
+  emojiPickerTitle: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiPickerListPanel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiPickerGrid: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiButtonRoleDescription: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
 };
 
 // @public (undocumented)
@@ -927,13 +973,18 @@ interface PickerRefHandler {
 export type PickerSize = 'large' | 'medium' | 'small';
 
 // @public (undocumented)
-interface Props {
+interface Props
+  extends Omit<
+    React_2.HTMLAttributes<HTMLSpanElement>,
+    'onFocus' | 'onMouseMove'
+  > {
   autoWidth?: boolean;
   className?: string;
   disableLazyLoad?: boolean;
   emoji: EmojiDescription;
   fitToHeight?: number;
   onDelete?: OnEmojiEvent;
+  onFocus?: OnEmojiEvent;
   onLoadError?: OnEmojiEvent<HTMLImageElement>;
   onLoadSuccess?: (emoji: EmojiDescription) => void;
   onMouseMove?: OnEmojiEvent;

package/README.md

@@ -1,3 +0,0 @@
-# Emoji
-
-Documentation can be found on: https://product-fabric.atlassian.net/wiki/spaces/TWPCP/pages/3178201667/Emoji+README

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

@@ -1,49 +0,0 @@
-/** @jsx jsx */
-import React, { forwardRef, memo } from 'react';
-import { jsx } from '@emotion/react';
-import { leftClick } from '../../util/mouse';
-import { emojiButton, hiddenToneButton } from './styles';
-import Emoji from './Emoji';
-const handleMouseDown = (props, event) => {
-  const {
-    onSelected
-  } = props;
-  event.preventDefault();
-  if (onSelected && leftClick(event)) {
-    onSelected();
-  }
-};
-const handleKeyPress = (props, event) => {
-  const {
-    onSelected
-  } = props;
-  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
-    event.preventDefault();
-    onSelected();
-  }
-};
-export const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    emoji,
-    selectOnHover,
-    ariaLabelText,
-    ariaExpanded,
-    shouldHideButton
-  } = props;
-  return jsx("button", {
-    ref: ref,
-    "aria-expanded": ariaExpanded,
-    css: shouldHideButton ? hiddenToneButton : emojiButton,
-    onMouseDown: event => {
-      handleMouseDown(props, event);
-    },
-    onKeyDown: event => {
-      handleKeyPress(props, event);
-    },
-    "aria-label": ariaLabelText
-  }, jsx(Emoji, {
-    emoji: emoji,
-    selectOnHover: selectOnHover
-  }));
-});
-export default /*#__PURE__*/memo(EmojiButton);

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

@@ -1,43 +0,0 @@
-/** @jsx jsx */
-import React, { forwardRef, memo } from 'react';
-import { jsx } from '@emotion/react';
-import { leftClick } from '../../util/mouse';
-import { emojiButton, hiddenToneButton } from './styles';
-import Emoji from './Emoji';
-var handleMouseDown = function handleMouseDown(props, event) {
-  var onSelected = props.onSelected;
-  event.preventDefault();
-  if (onSelected && leftClick(event)) {
-    onSelected();
-  }
-};
-var handleKeyPress = function handleKeyPress(props, event) {
-  var onSelected = props.onSelected;
-  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
-    event.preventDefault();
-    onSelected();
-  }
-};
-export var EmojiButton = /*#__PURE__*/forwardRef(function (props, ref) {
-  var emoji = props.emoji,
-    selectOnHover = props.selectOnHover,
-    ariaLabelText = props.ariaLabelText,
-    ariaExpanded = props.ariaExpanded,
-    shouldHideButton = props.shouldHideButton;
-  return jsx("button", {
-    ref: ref,
-    "aria-expanded": ariaExpanded,
-    css: shouldHideButton ? hiddenToneButton : emojiButton,
-    onMouseDown: function onMouseDown(event) {
-      handleMouseDown(props, event);
-    },
-    onKeyDown: function onKeyDown(event) {
-      handleKeyPress(props, event);
-    },
-    "aria-label": ariaLabelText
-  }, jsx(Emoji, {
-    emoji: emoji,
-    selectOnHover: selectOnHover
-  }));
-});
-export default /*#__PURE__*/memo(EmojiButton);