[core] Replace indexOf with includes (#42883)

Co-authored-by: Aarón García Hervás <aaron@mui.com>
mui · Aug 19, 2024 · f1a5b88 · f1a5b88
1 parent f62954b
commit f1a5b88
Show file tree

Hide file tree

Showing 38 changed files with 61 additions and 67 deletions.
diff --git a/docs/data/material/customization/color/Color.js b/docs/data/material/customization/color/Color.js
@@ -64,7 +64,7 @@ function getColorBlock(theme, colorName, colorValue, colorTitle) {
     padding: 15,
   };
 
-  if (colorValue.toString().indexOf('A1') === 0) {
+  if (colorValue.toString().startsWith('A1')) {
     rowStyle = {
       ...rowStyle,
       marginTop: 4,

diff --git a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
@@ -236,7 +236,7 @@ export default function MaterialUIComponents() {
               </TableCell>
               <TableCell>
                 {component.materialUI &&
-                component.materialUI.indexOf('/material-ui') === 0 ? (
+                component.materialUI.startsWith('/material-ui') ? (
                   <Link
                     variant="body2"
                     data-no-markdown-link="true"
@@ -245,7 +245,7 @@ export default function MaterialUIComponents() {
                     Native support
                   </Link>
                 ) : null}
-                {component.materialUI && component.materialUI.indexOf('/x') === 0 ? (
+                {component.materialUI && component.materialUI.startsWith('/x') ? (
                   <Link
                     variant="body2"
                     data-no-markdown-link="true"

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -105,7 +105,7 @@ async function registerServiceWorker() {
   if (
     'serviceWorker' in navigator &&
     process.env.NODE_ENV === 'production' &&
-    window.location.host.indexOf('mui.com') !== -1
+    window.location.host.includes('mui.com')
   ) {
     // register() automatically attempts to refresh the sw.js.
     const registration = await navigator.serviceWorker.register('/sw.js');

diff --git a/docs/pages/versions.js b/docs/pages/versions.js
@@ -45,7 +45,7 @@ Page.getInitialProps = async () => {
    */
   const versions = [];
   branches.forEach((branch) => {
-    if (FILTERED_BRANCHES.indexOf(branch.name) === -1) {
+    if (!FILTERED_BRANCHES.includes(branch.name)) {
       const version = branch.name;
       versions.push({
         version,

diff --git a/docs/scripts/updateIconSynonyms.js b/docs/scripts/updateIconSynonyms.js
@@ -7,7 +7,7 @@ import synonyms from 'docs/data/material/components/material-icons/synonyms';
 import myDestRewriter from '../../packages/mui-icons-material/renameFilters/material-design-icons';
 
 function not(a, b) {
-  return a.filter((value) => b.indexOf(value) === -1);
+  return a.filter((value) => !b.includes(value));
 }
 
 function union(a, b) {

diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx
@@ -64,7 +64,7 @@ export default function IconImage(props: IconImageProps) {
   } else if (name.startsWith('pricing/x-plan-')) {
     defaultWidth = 13;
     defaultHeight = 15;
-  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].indexOf(name) !== -1) {
+  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
     defaultWidth = 18;
     defaultHeight = 18;
   }

diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -81,7 +81,7 @@ function orderedPages(pages, current = []) {
 }
 
 async function postFeedback(data) {
-  const env = window.location.host.indexOf('mui.com') !== -1 ? 'prod' : 'dev';
+  const env = window.location.host.includes('mui.com') ? 'prod' : 'dev';
   try {
     const response = await fetch(`${process.env.FEEDBACK_URL}/${env}/feedback`, {
       method: 'POST',

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -261,8 +261,9 @@ function reduceChildRoutes(context) {
 
   const title = pageToTitleI18n(page, t);
   if (page.children && page.children.length >= 1) {
-    const topLevel =
-      activePageParents.map((parentPage) => parentPage.pathname).indexOf(page.pathname) !== -1;
+    const topLevel = activePageParents
+      .map((parentPage) => parentPage.pathname)
+      .includes(page.pathname);
 
     let firstChild = page.children[0];
 

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
@@ -342,8 +342,9 @@ export default function AppSearch(props) {
   const searchButtonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const [initialQuery, setInitialQuery] = React.useState(undefined);
-  const facetFilterLanguage =
-    LANGUAGES_SSR.indexOf(userLanguage) !== -1 ? `language:${userLanguage}` : `language:en`;
+  const facetFilterLanguage = LANGUAGES_SSR.includes(userLanguage)
+    ? `language:${userLanguage}`
+    : `language:en`;
   const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
   const onOpen = React.useCallback(() => {
     setIsOpen(true);

diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts
@@ -14,7 +14,7 @@ const muiNpmOrgs = ['@mui', '@base_ui', '@pigment-css', '@toolpad'];
  */
 function addTypeDeps(deps: Record<string, string>): void {
   const packagesWithDTPackage = Object.keys(deps)
-    .filter((name) => packagesWithBundledTypes.indexOf(name) === -1)
+    .filter((name) => !packagesWithBundledTypes.includes(name))
     // All the MUI packages come with bundled types
     .filter((name) => !muiNpmOrgs.some((org) => name.startsWith(org)));
 

diff --git a/docs/src/modules/utils/find.mjs b/docs/src/modules/utils/find.mjs
@@ -38,15 +38,11 @@ export function findPages(
       .replace(/^\/index$/, '/') // Replace `index` by `/`.
       .replace(/\/index$/, '');
 
-    if (pathname.indexOf('.eslintrc') !== -1) {
+    if (pathname.includes('.eslintrc')) {
       return;
     }
 
-    if (
-      options.front &&
-      pathname.indexOf('/components') === -1 &&
-      pathname.indexOf('/api-docs') === -1
-    ) {
+    if (options.front && !pathname.includes('/components') && !pathname.includes('/api-docs')) {
       return;
     }
 

diff --git a/docs/src/modules/utils/helpers.ts b/docs/src/modules/utils/helpers.ts
@@ -31,12 +31,12 @@ export function pageToTitle(page: Page): string | null {
   const name = path.replace(/.*\//, '').replace('react-', '').replace(/\..*/, '');
 
   // TODO remove post migration
-  if (path.indexOf('/api-docs/') !== -1) {
+  if (path.includes('/api-docs/')) {
     return pascalCase(name);
   }
 
   // TODO support more than React component API (PascalCase)
-  if (path.indexOf('/api/') !== -1) {
+  if (path.includes('/api/')) {
     return name.startsWith('use') ? camelCase(name) : pascalCase(name);
   }
 
@@ -87,8 +87,8 @@ export function pathnameToLanguage(pathname: string): {
   const userLanguageCandidate = pathname.substring(1, 3);
 
   if (
-    [...LANGUAGES, 'zh'].indexOf(userLanguageCandidate) !== -1 &&
-    pathname.indexOf(`/${userLanguageCandidate}/`) === 0
+    [...LANGUAGES, 'zh'].includes(userLanguageCandidate) &&
+    pathname.startsWith(`/${userLanguageCandidate}/`)
   ) {
     userLanguage = userLanguageCandidate;
   } else {

diff --git a/docs/src/pages/versions/ReleasedVersions.js b/docs/src/pages/versions/ReleasedVersions.js
@@ -31,8 +31,7 @@ function ReleasedVersions() {
                 </Link>
               </TableCell>
               <TableCell>
-                {doc.version.length >= 6 &&
-                doc.version.indexOf('pre-release') === -1 ? (
+                {doc.version.length >= 6 && !doc.version.includes('pre-release') ? (
                   <Link
                     variant="body2"
                     rel="nofollow"

diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
@@ -389,7 +389,7 @@ function createRender(context) {
 
       checkUrlHealth(href, linkText, context);
 
-      if (userLanguage !== 'en' && href.indexOf('/') === 0 && !options.ignoreLanguagePages(href)) {
+      if (userLanguage !== 'en' && href.startsWith('/') && !options.ignoreLanguagePages(href)) {
         finalHref = `/${userLanguage}${href}`;
       }
 

diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
@@ -45,7 +45,7 @@ export function createFilterOptions(config = {}) {
           }
 
           return matchFrom === 'start'
-            ? candidate.indexOf(input) === 0
+            ? candidate.startsWith(input)
             : candidate.indexOf(input) > -1;
         });
 

diff --git a/packages/mui-base/src/useList/listReducer.ts b/packages/mui-base/src/useList/listReducer.ts
@@ -352,7 +352,7 @@ function textCriteriaMatches<ItemValue>(
     return false;
   }
 
-  return text.indexOf(searchString) === 0;
+  return text.startsWith(searchString);
 }
 
 function handleTextNavigation<ItemValue, State extends ListState<ItemValue>>(

diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
@@ -413,7 +413,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     const { width, height, bottom, left } = slider!.getBoundingClientRect();
     let percent;
 
-    if (axis.indexOf('vertical') === 0) {
+    if (axis.startsWith('vertical')) {
       percent = (bottom - finger.y) / height;
     } else {
       percent = (finger.x - left) / width;

diff --git a/packages/mui-codemod/src/v0.15.0/import-path.js b/packages/mui-codemod/src/v0.15.0/import-path.js
@@ -60,11 +60,11 @@ const pathBaseSource = ['material-ui/src/', 'material-ui/src/'];
 const pathBasePackage = ['material-ui/lib/', 'material-ui/'];
 
 function getPathsBase(path) {
-  if (path.indexOf(pathBaseSource[0]) === 0) {
+  if (path.startsWith(pathBaseSource[0])) {
     return pathBaseSource;
   }
 
-  if (path.indexOf(pathBasePackage[0]) === 0) {
+  if (path.startsWith(pathBasePackage[0])) {
     return pathBasePackage;
   }
 

diff --git a/packages/mui-docs/src/Link/Link.tsx b/packages/mui-docs/src/Link/Link.tsx
@@ -103,7 +103,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link
   if (
     userLanguage !== 'en' &&
     pathname &&
-    pathname.indexOf('/') === 0 &&
+    pathname.startsWith('/') &&
     !LANGUAGES_IGNORE_PAGES(pathname) &&
     !pathname.startsWith(`/${userLanguage}/`)
   ) {

diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
@@ -285,7 +285,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
 
   if (toggleButtonGroup?.value) {
     if (Array.isArray(toggleButtonGroup.value)) {
-      ariaPressed = toggleButtonGroup.value.indexOf(props.value as string) !== -1;
+      ariaPressed = toggleButtonGroup.value.includes(props.value as string);
     } else {
       ariaPressed = toggleButtonGroup.value === props.value;
     }

diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -233,7 +233,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
 
   if (toggleButtonGroup?.value) {
     if (Array.isArray(toggleButtonGroup.value)) {
-      ariaPressed = toggleButtonGroup.value.indexOf(props.value as string) !== -1;
+      ariaPressed = toggleButtonGroup.value.includes(props.value as string);
     } else {
       ariaPressed = toggleButtonGroup.value === props.value;
     }

diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
@@ -568,7 +568,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
 
           let markActive;
           if (track === false) {
-            markActive = values.indexOf(mark.value) !== -1;
+            markActive = values.includes(mark.value);
           } else {
             markActive =
               (track === 'normal' &&

diff --git a/packages/mui-joy/src/styles/styleUtils.ts b/packages/mui-joy/src/styles/styleUtils.ts
@@ -41,10 +41,7 @@ export const resolveSxValue = <K extends string>(
           } else {
             sxObject[key] = theme.vars?.radius[value as keyof typeof theme.vars.radius] || value;
           }
-        } else if (
-          ['p', 'padding', 'm', 'margin'].indexOf(key) !== -1 &&
-          typeof value === 'number'
-        ) {
+        } else if (['p', 'padding', 'm', 'margin'].includes(key) && typeof value === 'number') {
           sxObject[key] = theme.spacing(value);
         } else {
           sxObject[key] = value;

diff --git a/packages/mui-material/src/CardMedia/CardMedia.js b/packages/mui-material/src/CardMedia/CardMedia.js
@@ -55,15 +55,15 @@ const CardMedia = React.forwardRef(function CardMedia(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiCardMedia' });
   const { children, className, component = 'div', image, src, style, ...other } = props;
 
-  const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
+  const isMediaComponent = MEDIA_COMPONENTS.includes(component);
   const composedStyle =
     !isMediaComponent && image ? { backgroundImage: `url("${image}")`, ...style } : style;
 
   const ownerState = {
     ...props,
     component,
     isMediaComponent,
-    isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1,
+    isImageComponent: IMAGE_COMPONENTS.includes(component),
   };
 
   const classes = useUtilityClasses(ownerState);

diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
@@ -167,7 +167,7 @@ const oppositeDirection = {
 };
 
 export function isHorizontal(anchor) {
-  return ['left', 'right'].indexOf(anchor) !== -1;
+  return ['left', 'right'].includes(anchor);
 }
 
 export function getAnchor({ direction }, anchor) {

diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
@@ -112,7 +112,7 @@ export function generateDirection({ theme, ownerState }) {
       flexDirection: propValue,
     };
 
-    if (propValue.indexOf('column') === 0) {
+    if (propValue.startsWith('column')) {
       output[`& > .${gridClasses.item}`] = {
         maxWidth: 'none',
       };

diff --git a/packages/mui-material/src/MenuList/MenuList.js b/packages/mui-material/src/MenuList/MenuList.js
@@ -44,7 +44,7 @@ function textCriteriaMatches(nextFocus, textCriteria) {
   if (textCriteria.repeating) {
     return text[0] === textCriteria.keys[0];
   }
-  return text.indexOf(textCriteria.keys.join('')) === 0;
+  return text.startsWith(textCriteria.keys.join(''));
 }
 
 function moveFocus(

diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
@@ -1201,7 +1201,7 @@ describe('<Select />', () => {
         function ControlledSelectInput(props) {
           const { onChange } = props;
           const [values, clickedValue] = React.useReducer((currentValues, valueClicked) => {
-            if (currentValues.indexOf(valueClicked) === -1) {
+            if (!currentValues.includes(valueClicked)) {
               return currentValues.concat(valueClicked);
             }
             return currentValues.filter((value) => {

diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
@@ -316,7 +316,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         'Enter',
       ];
 
-      if (validKeys.indexOf(event.key) !== -1) {
+      if (validKeys.includes(event.key)) {
         event.preventDefault();
         update(true, event);
       }

diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
@@ -728,7 +728,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) {
 
           let markActive;
           if (track === false) {
-            markActive = values.indexOf(mark.value) !== -1;
+            markActive = values.includes(mark.value);
           } else {
             markActive =
               (track === 'normal' &&

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -188,7 +188,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
       const { mode = null, changeTransition = true } = options;
 
       const anchorRtl = getAnchor(theme, anchor);
-      const rtlTranslateMultiplier = ['right', 'bottom'].indexOf(anchorRtl) !== -1 ? 1 : -1;
+      const rtlTranslateMultiplier = ['right', 'bottom'].includes(anchorRtl) ? 1 : -1;
       const horizontalSwipe = isHorizontal(anchor);
 
       const transform = horizontalSwipe

diff --git a/packages/mui-material/src/styles/createThemeNoVars.js b/packages/mui-material/src/styles/createThemeNoVars.js
@@ -68,7 +68,7 @@ function createThemeNoVars(options = {}, ...args) {
       // eslint-disable-next-line guard-for-in
       for (key in node) {
         const child = node[key];
-        if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
+        if (stateClasses.includes(key) && Object.keys(child).length > 0) {
           if (process.env.NODE_ENV !== 'production') {
             const stateClass = generateUtilityClass('', key);
             console.error(
@@ -102,7 +102,7 @@ function createThemeNoVars(options = {}, ...args) {
     Object.keys(muiTheme.components).forEach((component) => {
       const styleOverrides = muiTheme.components[component].styleOverrides;
 
-      if (styleOverrides && component.indexOf('Mui') === 0) {
+      if (styleOverrides && component.startsWith('Mui')) {
         traverse(styleOverrides, component);
       }
     });

diff --git a/packages/mui-material/src/usePagination/usePagination.js b/packages/mui-material/src/usePagination/usePagination.js
@@ -135,7 +135,7 @@ export default function usePagination(props = {}) {
           selected: false,
           disabled:
             disabled ||
-            (item.indexOf('ellipsis') === -1 &&
+            (!item.includes('ellipsis') &&
               (item === 'next' || item === 'last' ? page >= count : page <= 1)),
         };
   });

diff --git a/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js b/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js
@@ -50,7 +50,7 @@ export default function createGenerateClassName(options = {}) {
     const name = styleSheet.options.name;
 
     // Is a global static MUI style?
-    if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
+    if (name && name.startsWith('Mui') && !styleSheet.options.link && !disableGlobal) {
       // We can use a shorthand class name, we never use the keys to style the components.
       if (stateClasses.indexOf(rule.key) !== -1) {
         return `Mui-${rule.key}`;

diff --git a/packages/mui-system/src/Grid/traverseBreakpoints.ts b/packages/mui-system/src/Grid/traverseBreakpoints.ts
@@ -36,7 +36,7 @@ export const traverseBreakpoints = <T = unknown>(
         : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
 
     keys.forEach((key) => {
-      if (breakpoints.keys.indexOf(key as Breakpoint) !== -1) {
+      if (breakpoints.keys.includes(key as Breakpoint)) {
         // @ts-ignore already checked that responsive is an object
         const breakpointValue: T = responsive[key];
         if (breakpointValue !== undefined) {

diff --git a/packages/mui-system/src/breakpoints/breakpoints.js b/packages/mui-system/src/breakpoints/breakpoints.js
@@ -58,7 +58,7 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
         }
       }
       // key is breakpoint
-      else if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
         const mediaKey = themeBreakpoints.up(breakpoint);
         acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
       } else {