fix: replace match-sorter in CTB

packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/useContentTypeBuilderMenu.js

@@ -1,12 +1,11 @@
 import { useState } from 'react';
-import { useNotification, useTracking } from '@strapi/helper-plugin';
-import isEmpty from 'lodash/isEmpty';
-import sortBy from 'lodash/sortBy';
-import toLower from 'lodash/toLower';
+import { useNotification, useTracking, useFilter, useCollator } from '@strapi/helper-plugin';
 import isEqual from 'lodash/isEqual';
-import matchSorter from 'match-sorter';
+import { useIntl } from 'react-intl';
+
 import useDataManager from '../../hooks/useDataManager';
 import useFormModalNavigation from '../../hooks/useFormModalNavigation';
+
 import pluginId from '../../pluginId';
 import getTrad from '../../utils/getTrad';
 
@@ -24,32 +23,18 @@ const useContentTypeBuilderMenu = () => {
   const { trackUsage } = useTracking();
   const [search, setSearch] = useState('');
   const { onOpenModalCreateSchema, onOpenModalEditCategory } = useFormModalNavigation();
+  const { locale } = useIntl();
 
-  const componentsData = sortBy(
-    Object.keys(componentsGroupedByCategory).map((category) => ({
-      name: category,
-      title: category,
-      isEditable: isInDevelopmentMode,
-      onClickEdit(e, data) {
-        e.stopPropagation();
+  const { contains } = useFilter(locale, {
+    sensitivity: 'base',
+  });
 
-        if (canOpenModalCreateCTorComponent) {
-          onOpenModalEditCategory(data.name);
-        } else {
-          toggleNotificationCannotCreateSchema();
-        }
-      },
-      links: sortBy(
-        componentsGroupedByCategory[category].map((compo) => ({
-          name: compo.uid,
-          to: `/plugins/${pluginId}/component-categories/${category}/${compo.uid}`,
-          title: compo.schema.displayName,
-        })),
-        (obj) => obj.title
-      ),
-    })),
-    (obj) => obj.title
-  );
+  /**
+   * @type {Intl.Collator}
+   */
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
 
   const canOpenModalCreateCTorComponent =
     !Object.keys(contentTypes).some((ct) => contentTypes[ct].isTemporary === true) &&
@@ -111,12 +96,36 @@ const useContentTypeBuilderMenu = () => {
     toggleNotification({
       type: 'info',
       message: {
-        id: `${getTrad('notification.info.creating.notSaved')}`,
+        id: getTrad('notification.info.creating.notSaved'),
         defaultMessage: 'Please save your work before creating a new collection type or component',
       },
     });
   };
 
+  const componentsData = Object.entries(componentsGroupedByCategory)
+    .map(([category, components]) => ({
+      name: category,
+      title: category,
+      isEditable: isInDevelopmentMode,
+      onClickEdit(e, data) {
+        e.stopPropagation();
+
+        if (canOpenModalCreateCTorComponent) {
+          onOpenModalEditCategory(data.name);
+        } else {
+          toggleNotificationCannotCreateSchema();
+        }
+      },
+      links: components
+        .map((compo) => ({
+          name: compo.uid,
+          to: `/plugins/${pluginId}/component-categories/${category}/${compo.uid}`,
+          title: compo.schema.displayName,
+        }))
+        .sort((a, b) => formatter.compare(a.title, b.title)),
+    }))
+    .sort((a, b) => formatter.compare(a.title, b.title));
+
   const displayedContentTypes = sortedContentTypesList.filter((obj) => obj.visible);
 
   const data = [
@@ -159,31 +168,34 @@ const useContentTypeBuilderMenu = () => {
       },
       links: componentsData,
     },
-  ];
-
-  const matchByTitle = (links) =>
-    search ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] }) : links;
-
-  const getMenu = () => {
-    // Maybe we can do it simpler with matchsorter wildcards ?
-    return data.map((section) => {
-      const hasChild = section.links.some((l) => !isEmpty(l.links));
-
-      if (hasChild) {
-        return {
-          ...section,
-          links: section.links.map((l) => ({ ...l, links: matchByTitle(l.links) })),
-        };
-      }
+  ].map((section) => {
+    const hasChild = section.links.some((l) => Array.isArray(l.links));
 
+    if (hasChild) {
       return {
         ...section,
-        links: matchByTitle(section.links),
+        links: section.links.map((link) => ({
+          ...link,
+          links: link.links
+            .filter((link) => contains(link.title, search))
+            .sort((a, b) => formatter.compare(a.title, b.title)),
+        })),
       };
-    });
-  };
+    }
 
-  return { menu: getMenu(), searchValue: search, onSearchChange: setSearch };
+    return {
+      ...section,
+      links: section.links
+        .filter((link) => contains(link.title, search))
+        .sort((a, b) => formatter.compare(a.title, b.title)),
+    };
+  });
+
+  return {
+    menu: data,
+    searchValue: search,
+    onSearchChange: setSearch,
+  };
 };
 
 export default useContentTypeBuilderMenu;

packages/core/content-type-builder/package.json

@@ -39,7 +39,6 @@
     "fs-extra": "10.0.0",
     "immer": "9.0.19",
     "lodash": "4.17.21",
-    "match-sorter": "^4.0.2",
     "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
     "qs": "6.11.1",