[code-infra] Migrate lodash to es-toolkit (#46974)

sukvvon · Janpot · web-flow · commit b26d4746a586 · 2025-10-03T08:58:02.000+02:00
Signed-off-by: Wonsuk Choi &lt;sukvvon@gmail.com&gt;
Co-authored-by: Jan Potoms &lt;2109932+Janpot@users.noreply.github.com&gt;
diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import startCase from 'lodash/startCase';
+import { startCase } from 'es-toolkit/string';
 import NextLink from 'next/link';
 import AspectRatio from '@mui/joy/AspectRatio';
 import Box from '@mui/joy/Box';
diff --git a/docs/package.json b/docs/package.json
@@ -65,6 +65,7 @@
     "cross-env": "^10.0.0",
     "css-mediaquery": "^0.1.2",
     "dayjs": "^1.11.18",
+    "es-toolkit": "^1.39.10",
     "feed": "^5.1.0",
     "fg-loadcss": "^3.1.0",
     "final-form": "^5.0.0",
@@ -73,7 +74,6 @@
     "jss": "^10.10.0",
     "jss-plugin-template": "^10.10.0",
     "jss-rtl": "^0.3.0",
-    "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "markdown-to-jsx": "^7.7.13",
     "material-ui-popup-state": "^5.3.6",
diff --git a/docs/pages/versions.js b/docs/pages/versions.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import sortedUniqBy from 'lodash/sortedUniqBy';
+import { uniqBy } from 'es-toolkit/array';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import VersionsContext from 'docs/src/pages/versions/VersionsContext';
 import * as pageProps from 'docs/src/pages/versions/versions.md?muiMarkdown';
@@ -76,5 +76,5 @@ Page.getInitialProps = async () => {
     });
   }
 
-  return { versions: sortedUniqBy(versions, 'version') };
+  return { versions: uniqBy(versions, (item) => item.version) };
 };
diff --git a/docs/src/modules/components/ApiPage/definitions/classes.ts b/docs/src/modules/components/ApiPage/definitions/classes.ts
@@ -1,6 +1,6 @@
 import { PropsTranslations, ComponentApiContent } from '@mui-internal/api-docs-builder';
 import { Translate } from '@mui/docs/i18n';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import type { TableOfContentsParams } from 'docs/src/modules/components/ApiPage';
 
 export interface ClassDefinition {
diff --git a/docs/src/modules/components/ApiPage/definitions/properties.ts b/docs/src/modules/components/ApiPage/definitions/properties.ts
@@ -5,7 +5,7 @@ import {
   HooksTranslations,
 } from '@mui-internal/api-docs-builder';
 import { Translate } from '@mui/docs/i18n';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import type { TableOfContentsParams } from 'docs/src/modules/components/ApiPage';
 
 export interface PropertyDefinition {
diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
@@ -14,7 +14,7 @@ import {
   getClassApiDefinitions,
 } from 'docs/src/modules/components/ApiPage/definitions/classes';
 import { PropsTranslations, ComponentClassDefinition } from '@mui-internal/api-docs-builder';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 
 export type GetCssToCParams = {
   componentName: string;
diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.tsx b/docs/src/modules/components/ApiPage/sections/PropertiesSection.tsx
@@ -19,7 +19,7 @@ import {
   PropsTableItem,
   PropsTranslations,
 } from '@mui-internal/api-docs-builder';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 
 interface GetPropsToCParams extends Pick<ComponentApiContent, 'inheritance' | 'themeDefaultProps'> {
   componentProps: ComponentApiContent['props'];
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import throttle from 'lodash/throttle';
+import { throttle } from 'es-toolkit/function';
 import { styled, alpha } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import NoSsr from '@mui/material/NoSsr';
diff --git a/docs/src/modules/components/ComponentsApiContent.tsx b/docs/src/modules/components/ComponentsApiContent.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import { useRouter } from 'next/router';
 import exactProp from '@mui/utils/exactProp';
 import { Translate, useTranslate, useUserLanguage } from '@mui/docs/i18n';
diff --git a/docs/src/modules/components/HooksApiContent.tsx b/docs/src/modules/components/HooksApiContent.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import exactProp from '@mui/utils/exactProp';
 import { Translate, useTranslate, useUserLanguage } from '@mui/docs/i18n';
 import { SectionTitle, SectionTitleProps } from '@mui/docs/SectionTitle';
diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TypeScriptIcon from '@mui/docs/svgIcons/TypeScript';
-import startCase from 'lodash/startCase';
+import { startCase } from 'es-toolkit/string';
 import { deepmerge } from '@mui/utils';
 import { decomposeColor, ThemeProvider as SystemThemeProvider } from '@mui/system';
 import * as mdColors from '@mui/material/colors';
diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import { exactProp } from '@mui/utils';
 import { Ad, AdGuest } from '@mui/docs/Ad';
 import ComponentsApiContent from 'docs/src/modules/components/ComponentsApiContent';
diff --git a/docs/src/modules/utils/helpers.ts b/docs/src/modules/utils/helpers.ts
@@ -1,5 +1,4 @@
-import upperFirst from 'lodash/upperFirst';
-import camelCase from 'lodash/camelCase';
+import { camelCase, upperFirst } from 'es-toolkit/string';
 import { LANGUAGES } from 'docs/config';
 import { Translate } from '@mui/docs/i18n';
 
diff --git a/package.json b/package.json
@@ -124,8 +124,6 @@
     "@playwright/test": "1.55.1",
     "@types/babel__core": "^7.20.5",
     "@types/babel__register": "^7.17.3",
-    "@types/lodash": "^4.17.20",
-    "@types/lodash.kebabcase": "^4.1.9",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20.19.17",
     "@types/react": "^19.1.13",
@@ -143,6 +141,7 @@
     "cpy-cli": "^6.0.0",
     "cross-env": "^10.0.0",
     "danger": "^13.0.4",
+    "es-toolkit": "^1.39.10",
     "eslint": "^9.36.0",
     "eslint-import-resolver-webpack": "^0.13.10",
     "eslint-plugin-consistent-default-export-name": "^0.0.15",
@@ -160,8 +159,6 @@
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webpack": "^5.0.0",
     "lerna": "^8.2.4",
-    "lodash": "^4.17.21",
-    "lodash.kebabcase": "^4.1.1",
     "markdownlint-cli2": "^0.18.1",
     "mocha": "^11.7.1",
     "nx": "^20.8.2",
diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
@@ -35,7 +35,7 @@
     "@babel/types": "^7.28.4",
     "@mui/internal-docs-utils": "workspace:^",
     "doctrine": "^3.0.0",
-    "lodash": "^4.17.21",
+    "es-toolkit": "^1.39.10",
     "typescript": "^5.9.2",
     "uuid": "^11.1.0"
   },
@@ -44,7 +44,6 @@
     "@types/babel__core": "^7.20.5",
     "@types/chai": "^4.3.20",
     "@types/doctrine": "^0.0.9",
-    "@types/lodash": "^4.17.20",
     "@types/node": "^20.19.17",
     "@types/react": "^19.1.13",
     "@types/uuid": "^10.0.0",
diff --git a/packages-internal/scripts/typescript-to-proptypes/src/createType.ts b/packages-internal/scripts/typescript-to-proptypes/src/createType.ts
@@ -1,5 +1,5 @@
 import ts from 'typescript';
-import _ from 'lodash';
+import { uniqBy } from 'es-toolkit/array';
 import {
   PropType,
   ArrayType,
@@ -142,7 +142,7 @@ export function uniqueUnionTypes(node: UnionType): UnionType {
   return {
     type: node.type,
     jsDoc: node.jsDoc,
-    types: _.uniqBy(node.types, (type) => {
+    types: uniqBy(node.types, (type) => {
       return getTypeHash(type);
     }),
   };
diff --git a/packages-internal/scripts/typescript-to-proptypes/src/generatePropTypes.ts b/packages-internal/scripts/typescript-to-proptypes/src/generatePropTypes.ts
@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import partition from 'es-toolkit/compat/partition';
 import { PropTypeDefinition, PropTypesComponent, PropType, LiteralType } from './models';
 import { createDOMElementType, createBooleanType, uniqueUnionTypes } from './createType';
 
@@ -228,7 +228,7 @@ export function generatePropTypes(
         );
       }
 
-      let [literals, rest] = _.partition(
+      let [literals, rest] = partition(
         isOptional ? nonNullishUniqueTypes : uniqueTypes,
         (type): type is LiteralType => type.type === 'LiteralNode',
       );
diff --git a/packages-internal/test-utils/package.json b/packages-internal/test-utils/package.json
@@ -50,9 +50,9 @@
     "@testing-library/user-event": "^14.6.1",
     "chai-dom": "^1.12.1",
     "dom-accessibility-api": "^0.7.0",
+    "es-toolkit": "^1.39.10",
     "format-util": "^1.0.5",
     "jsdom": "^26.1.0",
-    "lodash": "^4.17.21",
     "mocha": "^11.7.2",
     "prop-types": "^15.8.1",
     "sinon": "^21.0.0"
diff --git a/packages-internal/test-utils/src/chaiPlugin.ts b/packages-internal/test-utils/src/chaiPlugin.ts
@@ -3,8 +3,7 @@ import { prettyDOM } from '@testing-library/react/pure';
 import * as chai from 'chai';
 import { computeAccessibleDescription, computeAccessibleName } from 'dom-accessibility-api';
 import formatUtil from 'format-util';
-// avoid loading whole lodash, it takes ~50ms to initialize
-import kebabCase from 'lodash.kebabcase';
+import { kebabCase } from 'es-toolkit/string';
 import './chai.types';
 
 const isKarma = Boolean(process.env.KARMA);
diff --git a/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts b/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts
@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import { getHeaders, getTitle } from '@mui/internal-markdown';
 import {
   ComponentInfo,
diff --git a/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts b/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts
@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import { getHeaders, getTitle } from '@mui/internal-markdown';
 import {
   ComponentInfo,
diff --git a/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts b/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts
@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import { getHeaders, getTitle } from '@mui/internal-markdown';
 import {
   ComponentInfo,
diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json
@@ -17,7 +17,7 @@
     "@mui-internal/api-docs-builder": "workspace:^",
     "@mui/internal-markdown": "workspace:^",
     "docs": "workspace:^",
-    "lodash": "^4.17.21"
+    "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@types/chai": "^4.3.20",
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -3,14 +3,12 @@ import path from 'path';
 import * as astTypes from 'ast-types';
 import * as babel from '@babel/core';
 import traverse from '@babel/traverse';
-import * as _ from 'lodash';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase, escapeRegExp } from 'es-toolkit/string';
 import { remark } from 'remark';
 import { visit as remarkVisit } from 'unist-util-visit';
 import type { Link } from 'mdast';
 import { defaultHandlers, parse as docgenParse } from 'react-docgen';
 import { parse as parseDoctrine, Annotation } from 'doctrine';
-import escapeRegExp from 'lodash/escapeRegExp';
 import { renderCodeTags, renderMarkdown } from '../buildApi';
 import { ProjectSettings, SortingStrategiesType } from '../ProjectSettings';
 import { toGitHubPath, writePrettifiedFile } from '../buildApiUtils';
@@ -321,7 +319,7 @@ const generateApiPage = async (
    */
   const pageContent: ComponentApiContent = {
     // Sorted by required DESC, name ASC
-    props: _.fromPairs(
+    props: Object.fromEntries(
       Object.entries(reactApi.propsTable).sort(([aName, aData], [bName, bData]) => {
         if ((aData.required && bData.required) || (!aData.required && !bData.required)) {
           return aName.localeCompare(bName);
@@ -522,7 +520,7 @@ const attachPropsTable = (
 ) => {
   const propErrors: Array<[propName: string, error: Error]> = [];
   type Pair = [string, ComponentReactApi['propsTable'][string]];
-  const componentProps: ComponentReactApi['propsTable'] = _.fromPairs(
+  const componentProps: ComponentReactApi['propsTable'] = Object.fromEntries(
     Object.entries(reactApi.props!).map(([propName, propDescriptor]): Pair => {
       let prop: DescribeablePropDescriptor | null;
       try {
diff --git a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
@@ -1,14 +1,11 @@
 import { readFileSync, writeFileSync } from 'fs';
 import path from 'path';
 import * as astTypes from 'ast-types';
-import * as _ from 'lodash';
 import * as babel from '@babel/core';
 import traverse from '@babel/traverse';
 import { defaultHandlers, parse as docgenParse } from 'react-docgen';
-import kebabCase from 'lodash/kebabCase';
-import upperFirst from 'lodash/upperFirst';
+import { kebabCase, upperFirst, escapeRegExp } from 'es-toolkit/string';
 import { parse as parseDoctrine, Annotation } from 'doctrine';
-import escapeRegExp from 'lodash/escapeRegExp';
 import { escapeEntities, renderMarkdown } from '../buildApi';
 import { ProjectSettings } from '../ProjectSettings';
 import { computeApiDescription } from './ComponentApiBuilder';
@@ -334,7 +331,7 @@ const generateApiJson = async (outputDirectory: string, reactApi: HookReactApi)
    */
   const pageContent: HookApiContent = {
     // Sorted by required DESC, name ASC
-    parameters: _.fromPairs(
+    parameters: Object.fromEntries(
       Object.entries(reactApi.parametersTable).sort(([aName, aData], [bName, bData]) => {
         if ((aData.required && bData.required) || (!aData.required && !bData.required)) {
           return aName.localeCompare(bName);
@@ -345,7 +342,7 @@ const generateApiJson = async (outputDirectory: string, reactApi: HookReactApi)
         return 1;
       }),
     ),
-    returnValue: _.fromPairs(
+    returnValue: Object.fromEntries(
       Object.entries(reactApi.returnValueTable).sort(([aName, aData], [bName, bData]) => {
         if ((aData.required && bData.required) || (!aData.required && !bData.required)) {
           return aName.localeCompare(bName);
diff --git a/packages/api-docs-builder/buildApiUtils.ts b/packages/api-docs-builder/buildApiUtils.ts
@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import * as ts from 'typescript';
 import * as prettier from 'prettier';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import { getLineFeed } from '@mui/internal-docs-utils';
 import { replaceComponentLinks } from './utils/replaceUrl';
 import { TypeScriptProject } from './utils/createTypeScriptProject';
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
@@ -20,8 +20,8 @@
     "@mui/internal-markdown": "workspace:^",
     "ast-types": "^0.14.2",
     "doctrine": "^3.0.0",
+    "es-toolkit": "^1.39.10",
     "fast-glob": "^3.3.3",
-    "lodash": "^4.17.21",
     "prettier": "^3.6.2",
     "react-docgen": "^5.4.3",
     "recast": "^0.23.9",
diff --git a/packages/api-docs-builder/types/ApiBuilder.types.ts b/packages/api-docs-builder/types/ApiBuilder.types.ts
@@ -107,7 +107,7 @@ export interface ComponentReactApi extends CommonReactApi {
   slots: Slot[];
   cssVariables: { [key: string]: ApiItemDescription };
   dataAttributes: { [key: string]: ApiItemDescription };
-  propsTable: _.Dictionary<PropsTableItem>;
+  propsTable: { [key: string]: PropsTableItem };
   translations: PropsTranslations;
 }
 
@@ -180,8 +180,8 @@ export interface HookReactApi extends CommonReactApi {
    * @example 'useButton'
    */
   name: string;
-  parametersTable: _.Dictionary<AttributeDefinition>;
-  returnValueTable: _.Dictionary<AttributeDefinition>;
+  parametersTable: { [key: string]: AttributeDefinition };
+  returnValueTable: { [key: string]: AttributeDefinition };
   translations: HooksTranslations;
 }
 
diff --git a/packages/api-docs-builder/utils/generateApiTranslation.ts b/packages/api-docs-builder/utils/generateApiTranslation.ts
@@ -1,6 +1,6 @@
 import { mkdirSync } from 'fs';
 import path from 'path';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'es-toolkit/string';
 import { writePrettifiedFile } from '../buildApiUtils';
 import { HooksTranslations, PropsTranslations } from '../types/ApiBuilder.types';
 
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "lodash": "^4.17.21",
+    "es-toolkit": "^1.39.10",
     "marked": "^16.3.0",
     "prismjs": "^1.30.0"
   },
diff --git a/packages/markdown/prepareMarkdown.mjs b/packages/markdown/prepareMarkdown.mjs
@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import kebabCase from 'lodash/kebabCase.js';
+import { kebabCase } from 'es-toolkit/string';
 import {
   createRender,
   getContents,
diff --git a/packages/mui-icons-material/builder.mjs b/packages/mui-icons-material/builder.mjs
@@ -6,7 +6,7 @@ import Mustache from 'mustache';
 import globAsync from 'fast-glob';
 import * as svgo from 'svgo';
 import { fileURLToPath } from 'url';
-import intersection from 'lodash/intersection.js';
+import { intersection } from 'es-toolkit/array';
 import { Queue } from '@mui/internal-waterfall';
 import { hideBin } from 'yargs/helpers';
 
diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json
diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
diff --git a/packages/mui-joy/scripts/testModuleAugmentation.js b/packages/mui-joy/scripts/testModuleAugmentation.js
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
diff --git a/packages/mui-material/scripts/testModuleAugmentation.js b/packages/mui-material/scripts/testModuleAugmentation.js
diff --git a/packages/mui-material/src/Tooltip/Tooltip.test.js b/packages/mui-material/src/Tooltip/Tooltip.test.js
diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json
diff --git a/packages/mui-system/scripts/testModuleAugmentation.js b/packages/mui-system/scripts/testModuleAugmentation.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/buildLlmsDocs/index.ts b/scripts/buildLlmsDocs/index.ts
diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts
diff --git a/test/e2e-website/demo-docs.spec.ts b/test/e2e-website/demo-docs.spec.ts
diff --git a/test/e2e-website/joy-docs.spec.ts b/test/e2e-website/joy-docs.spec.ts
diff --git a/test/e2e-website/material-docs.spec.ts b/test/e2e-website/material-docs.spec.ts
diff --git a/test/package.json b/test/package.json
