emoji-picker-react 4.16.0 → 4.17.0

package/dist/typeRefinements/typeRefinements.d.ts

@@ -1,5 +1,6 @@
-import { CategoryConfig, CustomCategoryConfig } from '../config/categoryConfig';
+import { CustomCategoryConfig } from '../config/categoryConfig';
 import { CustomEmoji } from '../config/customEmojiConfig';
+import { CategoryConfig } from '../types/exposedTypes';
 import { DataEmoji } from '../dataUtils/DataTypes';
 export declare function isCustomCategory(category: CategoryConfig | CustomCategoryConfig): category is CustomCategoryConfig;
 export declare function isCustomEmoji(emoji: Partial<DataEmoji>): emoji is CustomEmoji;

package/dist/types/exposedTypes.d.ts

@@ -1,50 +1,64 @@
-export declare type EmojiClickData = {
-    activeSkinTone: SkinTones;
-    unified: string;
-    unifiedWithoutSkinTone: string;
-    emoji: string;
-    names: string[];
-    imageUrl: string;
-    getImageUrl: (emojiStyle?: EmojiStyle) => string;
-    isCustom: boolean;
-};
-export declare enum SuggestionMode {
-    RECENT = "recent",
-    FREQUENT = "frequent"
-}
-export declare enum EmojiStyle {
-    NATIVE = "native",
-    APPLE = "apple",
-    TWITTER = "twitter",
-    GOOGLE = "google",
-    FACEBOOK = "facebook"
-}
-export declare enum Theme {
-    DARK = "dark",
-    LIGHT = "light",
-    AUTO = "auto"
-}
-export declare enum SkinTones {
-    NEUTRAL = "neutral",
-    LIGHT = "1f3fb",
-    MEDIUM_LIGHT = "1f3fc",
-    MEDIUM = "1f3fd",
-    MEDIUM_DARK = "1f3fe",
-    DARK = "1f3ff"
-}
-export declare enum Categories {
-    SUGGESTED = "suggested",
-    CUSTOM = "custom",
-    SMILEYS_PEOPLE = "smileys_people",
-    ANIMALS_NATURE = "animals_nature",
-    FOOD_DRINK = "food_drink",
-    TRAVEL_PLACES = "travel_places",
-    ACTIVITIES = "activities",
-    OBJECTS = "objects",
-    SYMBOLS = "symbols",
-    FLAGS = "flags"
-}
-export declare enum SkinTonePickerLocation {
-    SEARCH = "SEARCH",
-    PREVIEW = "PREVIEW"
-}
+export declare type EmojiClickData = {
+    activeSkinTone: SkinTones;
+    unified: string;
+    unifiedWithoutSkinTone: string;
+    emoji: string;
+    names: string[];
+    imageUrl: string;
+    getImageUrl: (emojiStyle?: EmojiStyle) => string;
+    isCustom: boolean;
+};
+export declare type CategoryConfig = {
+    category: Categories;
+    name: string;
+};
+export declare type EmojiData = {
+    categories: Partial<Record<Categories, CategoryConfig>>;
+    emojis: Record<string, DataEmoji[]>;
+};
+export interface DataEmoji {
+    n: string[];
+    u: string;
+    v?: string[];
+    a: string;
+}
+export declare enum SuggestionMode {
+    RECENT = "recent",
+    FREQUENT = "frequent"
+}
+export declare enum EmojiStyle {
+    NATIVE = "native",
+    APPLE = "apple",
+    TWITTER = "twitter",
+    GOOGLE = "google",
+    FACEBOOK = "facebook"
+}
+export declare enum Theme {
+    DARK = "dark",
+    LIGHT = "light",
+    AUTO = "auto"
+}
+export declare enum SkinTones {
+    NEUTRAL = "neutral",
+    LIGHT = "1f3fb",
+    MEDIUM_LIGHT = "1f3fc",
+    MEDIUM = "1f3fd",
+    MEDIUM_DARK = "1f3fe",
+    DARK = "1f3ff"
+}
+export declare enum Categories {
+    SUGGESTED = "suggested",
+    CUSTOM = "custom",
+    SMILEYS_PEOPLE = "smileys_people",
+    ANIMALS_NATURE = "animals_nature",
+    FOOD_DRINK = "food_drink",
+    TRAVEL_PLACES = "travel_places",
+    ACTIVITIES = "activities",
+    OBJECTS = "objects",
+    SYMBOLS = "symbols",
+    FLAGS = "flags"
+}
+export declare enum SkinTonePickerLocation {
+    SEARCH = "SEARCH",
+    PREVIEW = "PREVIEW"
+}

package/dist/types/exposedTypes.js

@@ -0,0 +1,46 @@
+export var SuggestionMode;
+(function (SuggestionMode) {
+    SuggestionMode["RECENT"] = "recent";
+    SuggestionMode["FREQUENT"] = "frequent";
+})(SuggestionMode || (SuggestionMode = {}));
+export var EmojiStyle;
+(function (EmojiStyle) {
+    EmojiStyle["NATIVE"] = "native";
+    EmojiStyle["APPLE"] = "apple";
+    EmojiStyle["TWITTER"] = "twitter";
+    EmojiStyle["GOOGLE"] = "google";
+    EmojiStyle["FACEBOOK"] = "facebook";
+})(EmojiStyle || (EmojiStyle = {}));
+export var Theme;
+(function (Theme) {
+    Theme["DARK"] = "dark";
+    Theme["LIGHT"] = "light";
+    Theme["AUTO"] = "auto";
+})(Theme || (Theme = {}));
+export var SkinTones;
+(function (SkinTones) {
+    SkinTones["NEUTRAL"] = "neutral";
+    SkinTones["LIGHT"] = "1f3fb";
+    SkinTones["MEDIUM_LIGHT"] = "1f3fc";
+    SkinTones["MEDIUM"] = "1f3fd";
+    SkinTones["MEDIUM_DARK"] = "1f3fe";
+    SkinTones["DARK"] = "1f3ff";
+})(SkinTones || (SkinTones = {}));
+export var Categories;
+(function (Categories) {
+    Categories["SUGGESTED"] = "suggested";
+    Categories["CUSTOM"] = "custom";
+    Categories["SMILEYS_PEOPLE"] = "smileys_people";
+    Categories["ANIMALS_NATURE"] = "animals_nature";
+    Categories["FOOD_DRINK"] = "food_drink";
+    Categories["TRAVEL_PLACES"] = "travel_places";
+    Categories["ACTIVITIES"] = "activities";
+    Categories["OBJECTS"] = "objects";
+    Categories["SYMBOLS"] = "symbols";
+    Categories["FLAGS"] = "flags";
+})(Categories || (Categories = {}));
+export var SkinTonePickerLocation;
+(function (SkinTonePickerLocation) {
+    SkinTonePickerLocation["SEARCH"] = "SEARCH";
+    SkinTonePickerLocation["PREVIEW"] = "PREVIEW";
+})(SkinTonePickerLocation || (SkinTonePickerLocation = {}));

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.16.0",
+  "version": "4.17.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -27,14 +27,17 @@
   },
   "scripts": {
     "start": "tsdx watch",
-    "build": "node ./scripts/prepare.js && yarn type-check && tsdx build --transpileOnly && node ./scripts/copyData.js",
+    "build": "yarn build:data:src && yarn type-check && tsdx build --transpileOnly && yarn build:data:dist",
     "type-check": "tsc --noEmit --incremental --pretty --project tsconfig.json",
     "test": "tsdx test --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx",
-    "prepare": "yarn type-check && tsdx build --transpileOnly",
+    "prepare": "yarn build",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "storybook": "storybook dev -p 6006",
+    "build:data:src": "tsc --project ./scripts/tsconfig.build.json && node ./scripts/dist/prepare.js",
+    "build:data:dist": "tsc --project tsconfig.data.json && node ./scripts/copyData.js",
+    "build:data": "yarn build:data:src && yarn build:data:dist",
+    "storybook": "yarn build:data && storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
@@ -82,7 +85,8 @@
     "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
     "cssnano": "^5.1.13",
-    "emoji-datasource": "^15.1.2",
+    "emoji-datasource": "^16.0.0",
+    "emojibase-data": "^15.3.0",
     "eslint-import-resolver-typescript": "^3.3.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",

package/src/EmojiPickerReact.tsx

@@ -6,6 +6,7 @@ import { Body } from './components/body/Body';
 import { ElementRefContextProvider } from './components/context/ElementRefContext';
 import { PickerConfigProvider } from './components/context/PickerConfigContext';
 import { useReactionsModeState } from './components/context/PickerContext';
+import { PickerDataProvider } from './components/context/PickerDataContext';
 import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
@@ -19,7 +20,9 @@ function EmojiPicker(props: PickerProps) {
     <ElementRefContextProvider>
       <PickerStyleTag />
       <PickerConfigProvider {...props}>
-        <ContentControl />
+        <PickerDataProvider>
+          <ContentControl />
+        </PickerDataProvider>
       </PickerConfigProvider>
     </ElementRefContextProvider>
   );

package/src/components/Reactions/Reactions.tsx

@@ -7,7 +7,7 @@ import {
   useEmojiStyleConfig,
   useReactionsConfig,
   useAllowExpandReactions,
-  useGetEmojiUrlConfig
+  useGetEmojiUrlConfig,
 } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
@@ -36,19 +36,27 @@ export function Reactions() {
       className={cx(styles.list, !reactionsOpen && commonStyles.hidden)}
       ref={ReactionsRef}
     >
-      {reactions.map(reaction => (
-        <li key={reaction}>
-          <ClickableEmoji
-            emoji={emojiByUnified(reaction) as DataEmoji}
-            emojiStyle={emojiStyle}
-            unified={reaction}
-            showVariations={false}
-            className={cx(styles.emojiButton)}
-            noBackground
-            getEmojiUrl={getEmojiUrl}
-          />
-        </li>
-      ))}
+      {reactions.map((reaction) => {
+        const emoji = emojiByUnified(reaction);
+
+        if (!emoji) {
+          return null;
+        }
+
+        return (
+          <li key={reaction}>
+            <ClickableEmoji
+              emoji={emoji as DataEmoji}
+              emojiStyle={emojiStyle}
+              unified={reaction}
+              showVariations={false}
+              className={cx(styles.emojiButton)}
+              noBackground
+              getEmojiUrl={getEmojiUrl}
+            />
+          </li>
+        );
+      })}
       {allowExpandReactions ? (
         <li>
           <BtnPlus />
@@ -66,18 +74,18 @@ const styles = stylesheet.create({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    height: '100%'
+    height: '100%',
   },
   emojiButton: {
     ':hover': {
-      transform: 'scale(1.2)'
+      transform: 'scale(1.2)',
     },
     ':focus': {
-      transform: 'scale(1.2)'
+      transform: 'scale(1.2)',
     },
     ':active': {
-      transform: 'scale(1.1)'
+      transform: 'scale(1.1)',
     },
-    transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)'
-  }
+    transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)',
+  },
 });

package/src/components/body/EmojiCategory.tsx

@@ -8,10 +8,10 @@ import {
   stylesheet
 } from '../../Stylesheet/stylesheet';
 import {
-  CategoryConfig,
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig
 } from '../../config/categoryConfig';
+import { CategoryConfig } from '../../types/exposedTypes';
 
 type Props = Readonly<{
   categoryConfig: CategoryConfig;

package/src/components/body/EmojiList.tsx

@@ -4,16 +4,14 @@ import * as React from 'react';
 import { ClassNames } from '../../DomUtils/classNames';
 import { getLabelHeight } from '../../DomUtils/elementPositionInRow';
 import { stylesheet } from '../../Stylesheet/stylesheet';
-import {
-  CategoryConfig,
-  categoryFromCategoryConfig
-} from '../../config/categoryConfig';
+import { categoryFromCategoryConfig } from '../../config/categoryConfig';
+import { CategoryConfig } from '../../types/exposedTypes';
 import { useCategoriesConfig } from '../../config/useConfig';
 import { DataEmojis } from '../../dataUtils/DataTypes';
-import { useGetEmojisByCategory } from '../../dataUtils/emojiSelectors';
 import { useEmojiVirtualization } from '../../hooks/useEmojiVirtualization';
 import { useEmojiListRef } from '../context/ElementRefContext';
 import { useVisibleCategoriesState } from '../context/PickerContext';
+import { useGetEmojisByCategory } from '../context/PickerDataContext';
 
 import { EmojiCategory } from './EmojiCategory';
 import { MeasureEmoji } from './MeasureEmoji';

package/src/components/context/PickerConfigContext.tsx

@@ -46,6 +46,7 @@ export function useSetConfig(config: PickerConfig) {
     config.reactionsDefaultOpen,
     config.searchPlaceHolder,
     config.searchPlaceholder,
+    config.searchClearButtonLabel,
     config.defaultSkinTone,
     config.skinTonesDisabled,
     config.autoFocusSearch,
@@ -58,7 +59,8 @@ export function useSetConfig(config: PickerConfig) {
     config.width,
     config.searchDisabled,
     config.skinTonePickerLocation,
-    config.allowExpandReactions
+    config.allowExpandReactions,
+    config.emojiData
   ]);
 
   return mergedConfig;

package/src/components/context/PickerContext.tsx

@@ -6,20 +6,25 @@ import {
   useReactionsOpenConfig
 } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import { alphaNumericEmojiIndex } from '../../dataUtils/alphaNumericEmojiIndex';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
 import { useDisallowedEmojis } from '../../hooks/useDisallowedEmojis';
 import { FilterDict } from '../../hooks/useFilter';
 import { useMarkInitialLoad } from '../../hooks/useInitialLoad';
 import { SkinTones } from '../../types/exposedTypes';
+import { usePickerDataContext } from './PickerDataContext';
 
 export function PickerContextProvider({ children }: Props) {
   const disallowedEmojis = useDisallowedEmojis();
   const defaultSkinTone = useDefaultSkinToneConfig();
   const reactionsDefaultOpen = useReactionsOpenConfig();
+  const { searchIndex } = usePickerDataContext();
 
   // Initialize the filter with the inititial dictionary
-  const filterRef = React.useRef<FilterState>(alphaNumericEmojiIndex);
+  const filterRef = React.useRef<FilterState>(searchIndex);
+
+  React.useEffect(() => {
+    filterRef.current = searchIndex;
+  }, [searchIndex]);
   const disallowClickRef = React.useRef<boolean>(false);
   const disallowMouseRef = React.useRef<boolean>(false);
   const disallowedEmojisRef = React.useRef<Record<string, boolean>>(

package/src/components/context/PickerDataContext.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+
+import { CustomEmoji } from '../../config/customEmojiConfig';
+import { useSuggestedEmojisModeConfig } from '../../config/useConfig';
+import defaultEmojiData from '../../data/emojis';
+
+import {
+  DataEmoji,
+  DataEmojis,
+  EmojiProperties,
+  EmojiProperties as Keys,
+} from '../../dataUtils/DataTypes';
+import {
+  activeVariationFromUnified,
+  unifiedWithoutSkinTone,
+} from '../../dataUtils/emojiUtils';
+import { getSuggested } from '../../dataUtils/suggested';
+import { Categories, EmojiData, SkinTones } from '../../types/exposedTypes';
+
+import { usePickerConfig } from './PickerConfigContext';
+import { useUpdateSuggested } from './PickerContext';
+
+export interface PickerDataContextValue {
+  emojiData: EmojiData;
+  allEmojis: DataEmojis;
+  allEmojisByUnified: Record<string, DataEmoji>;
+  searchIndex: Record<string, Record<string, DataEmoji>>;
+  emojiByUnified: (unified?: string) => DataEmoji | undefined;
+  activeVariationFromUnified: (unified: string) => SkinTones | null;
+}
+
+const PickerDataContext = React.createContext<PickerDataContextValue>({
+  emojiData: {} as EmojiData,
+  allEmojis: [],
+  allEmojisByUnified: {},
+  searchIndex: {},
+  emojiByUnified: () => undefined,
+  activeVariationFromUnified: () => null,
+});
+
+export function PickerDataProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { customEmojis, emojiData: genericEmojiData } = usePickerConfig();
+
+  const data = React.useMemo(() => {
+    const emojiData = genericEmojiData || (defaultEmojiData as EmojiData);
+
+    // Clone to avoid mutation of shared source
+    const newData: EmojiData = JSON.parse(JSON.stringify(emojiData));
+
+    if (customEmojis && customEmojis.length > 0) {
+      newData.emojis[Categories.CUSTOM] =
+        customEmojis.map(customToRegularEmoji);
+    }
+
+    const emojis = newData.emojis || {};
+
+    const allEmojis: DataEmojis = Object.values(emojis).flat();
+    const allEmojisByUnified: Record<string, DataEmoji> = {};
+    const searchIndex: Record<string, Record<string, DataEmoji>> = {};
+
+    allEmojis.forEach((emoji) => {
+      const unified = emoji[Keys.unified];
+      allEmojisByUnified[unified] = emoji;
+
+      if (emoji[Keys.variations]) {
+        emoji[Keys.variations]?.forEach((variation) => {
+          allEmojisByUnified[variation] = emoji;
+        });
+      }
+
+      // Index for search
+      // Re-implement indexEmoji logic here to be local
+      const joinedNameString = (emoji[Keys.name] || [])
+        .join('')
+        .toLowerCase()
+        .split('');
+
+      joinedNameString.forEach((char: string) => {
+        searchIndex[char] = searchIndex[char] ?? {};
+        searchIndex[char][unified] = emoji;
+      });
+    });
+
+    return {
+      emojiData: newData,
+      allEmojis,
+      allEmojisByUnified,
+      searchIndex,
+    };
+  }, [genericEmojiData, customEmojis]);
+
+  const emojiByUnified = React.useCallback(
+    (unified?: string): DataEmoji | undefined => {
+      if (!unified) return undefined;
+
+      const result =
+        data.allEmojisByUnified[unified] ??
+        data.allEmojisByUnified[unifiedWithoutSkinTone(unified)];
+      return result;
+    },
+    [data.allEmojisByUnified],
+  );
+
+  return (
+    <PickerDataContext.Provider
+      value={{
+        ...data,
+        emojiByUnified,
+        activeVariationFromUnified,
+      }}
+    >
+      {children}
+    </PickerDataContext.Provider>
+  );
+}
+
+export function usePickerDataContext() {
+  return React.useContext(PickerDataContext);
+}
+
+export function useGetEmojisByCategory() {
+  const { emojiData, emojiByUnified } = usePickerDataContext();
+  const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  const [suggestedUpdated] = useUpdateSuggested();
+
+  const suggested = React.useMemo(() => {
+    const suggested = getSuggested(suggestedEmojisModeConfig) ?? [];
+
+    return suggested
+      .map((s) => emojiByUnified(s.unified))
+      .filter(Boolean) as DataEmojis;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
+
+  return function getEmojisByCategory(category: Categories): DataEmojis {
+    if (category === Categories.SUGGESTED) {
+      return suggested;
+    }
+
+    return emojiData.emojis?.[category] ?? [];
+  };
+}
+
+function customToRegularEmoji(emoji: CustomEmoji): DataEmoji {
+  return {
+    [EmojiProperties.name]: emoji.names.map((name: string) =>
+      name.toLowerCase(),
+    ),
+    [EmojiProperties.unified]: emoji.id.toLowerCase(),
+    [EmojiProperties.added_in]: '0',
+    [EmojiProperties.imgUrl]: emoji.imgUrl,
+  };
+}

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -58,9 +58,7 @@ export function ClickableEmojiButton({
 }
 
 function getAriaLabel(emojiNames: string[]) {
-  return emojiNames[0].match('flag-')
-    ? emojiNames[1] ?? emojiNames[0]
-    : emojiNames[0];
+  return emojiNames[emojiNames.length - 1];
 }
 
 const styles = stylesheet.create({

package/src/components/emoji/ViewOnlyEmoji.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 
-import {
-  emojiByUnified,
-  emojiName,
-  emojiUrlByUnified
-} from '../../dataUtils/emojiSelectors';
+import { emojiName, emojiUrlByUnified } from '../../dataUtils/emojiUtils';
 import { isCustomEmoji } from '../../typeRefinements/typeRefinements';
 import { EmojiStyle } from '../../types/exposedTypes';
 import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
 
+import { usePickerDataContext } from '../context/PickerDataContext';
+
 import { BaseEmojiProps } from './BaseEmojiProps';
 import { EmojiImg } from './EmojiImg';
 import { NativeEmoji } from './NativeEmoji';
@@ -23,6 +21,7 @@ export function ViewOnlyEmoji({
   className
 }: BaseEmojiProps) {
   const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
+  const { emojiByUnified } = usePickerDataContext();
 
   const style = {} as React.CSSProperties;
   if (size) {

package/src/components/footer/Preview.tsx

@@ -11,11 +11,7 @@ import {
   useGetEmojiUrlConfig,
   usePreviewConfig
 } from '../../config/useConfig';
-import {
-  emojiByUnified,
-  emojiName,
-  emojiUnified
-} from '../../dataUtils/emojiSelectors';
+import { emojiName, emojiUnified } from '../../dataUtils/emojiSelectors';
 import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
 import { useIsSkinToneInPreview } from '../../hooks/useShouldShowSkinTonePicker';
 import Flex from '../Layout/Flex';
@@ -24,6 +20,7 @@ import {
   useEmojiVariationPickerState,
   useReactionsModeState
 } from '../context/PickerContext';
+import { usePickerDataContext } from '../context/PickerDataContext';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
 import { SkinTonePickerMenu } from '../header/SkinTonePicker/SkinTonePicker';
 
@@ -57,11 +54,14 @@ export function PreviewBody() {
   const emojiStyle = useEmojiStyleConfig();
   const [variationPickerEmoji] = useEmojiVariationPickerState();
   const getEmojiUrl = useGetEmojiUrlConfig();
+  const { emojiByUnified } = usePickerDataContext();
 
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
   const emoji = emojiByUnified(
-    previewEmoji?.unified ?? previewEmoji?.originalUnified
+    (previewEmoji?.unified ?? previewEmoji?.originalUnified) as
+      | string
+      | undefined
   );
 
   const show = emoji != null && previewEmoji != null;

package/src/components/header/Search/BtnClearSearch.tsx

@@ -6,6 +6,7 @@ import {
   darkMode,
   stylesheet
 } from '../../../Stylesheet/stylesheet';
+import { useSearchClearButtonLabelConfig } from '../../../config/useConfig';
 import { useClearSearch } from '../../../hooks/useFilter';
 import { Button } from '../../atoms/Button';
 
@@ -13,6 +14,7 @@ import SVGTimes from './svg/times.svg';
 
 export function BtnClearSearch() {
   const clearSearch = useClearSearch();
+  const searchClearButtonLabel = useSearchClearButtonLabelConfig();
 
   return (
     <Button
@@ -21,8 +23,8 @@ export function BtnClearSearch() {
         commonInteractionStyles.visibleOnSearchOnly
       )}
       onClick={clearSearch}
-      aria-label="Clear"
-      title="Clear"
+      aria-label={searchClearButtonLabel}
+      title={searchClearButtonLabel}
     >
       <div className={cx(styles.icnClearnSearch)} />
     </Button>

package/src/components/navigation/CategoryButton.tsx

@@ -7,10 +7,8 @@ import {
   darkMode,
   stylesheet
 } from '../../Stylesheet/stylesheet';
-import {
-  CategoryConfig,
-  categoryNameFromCategoryConfig
-} from '../../config/categoryConfig';
+import { categoryNameFromCategoryConfig } from '../../config/categoryConfig';
+import { CategoryConfig } from '../../types/exposedTypes';
 import { Button } from '../atoms/Button';
 
 import SVGNavigation from './svg/CategoryNav.svg';