data-checked

docs/data/components/menu/CheckboxItems.js

@@ -150,7 +150,7 @@ const Indicator = styled(Menu.CheckboxItemIndicator)(
   border-radius: 2px;
 
 
-  &[data-checkbox-item-checked] {
+  &[data-checked] {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
     box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
   }

docs/data/components/menu/CheckboxItems.tsx

@@ -150,7 +150,7 @@ const Indicator = styled(Menu.CheckboxItemIndicator)(
   border-radius: 2px;
 
 
-  &[data-checkbox-item-checked] {
+  &[data-checked] {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
     box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
   }

docs/data/components/menu/RadioItems.js

@@ -143,7 +143,7 @@ const Indicator = styled(Menu.RadioItemIndicator)(
   box-sizing: border-box;
   border-radius: 50%;
 
-  &[data-radio-item-checked] {
+  &[data-checked] {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
     box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
   }

docs/data/components/menu/RadioItems.tsx

@@ -143,7 +143,7 @@ const Indicator = styled(Menu.RadioItemIndicator)(
   box-sizing: border-box;
   border-radius: 50%;
 
-  &[data-radio-item-checked] {
+  &[data-checked] {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
     box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
   }

packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx

@@ -147,7 +147,7 @@ describe('<Menu.CheckboxItem />', () => {
 
         const item = getByRole('menuitemcheckbox');
         expect(item).to.have.attribute('aria-checked', ariaChecked);
-        expect(item).to.have.attribute(`data-checkbox-item-${dataState}`, '');
+        expect(item).to.have.attribute(`data-${dataState}`, '');
       }),
     );
 
@@ -170,12 +170,12 @@ describe('<Menu.CheckboxItem />', () => {
       await user.click(item);
 
       expect(item).to.have.attribute('aria-checked', 'true');
-      expect(item).to.have.attribute('data-checkbox-item-checked', '');
+      expect(item).to.have.attribute('data-checked', '');
 
       await user.click(item);
 
       expect(item).to.have.attribute('aria-checked', 'false');
-      expect(item).to.have.attribute('data-checkbox-item-unchecked', '');
+      expect(item).to.have.attribute('data-unchecked', '');
     });
 
     it(`toggles the checked state when Space is pressed`, async () => {
@@ -202,10 +202,10 @@ describe('<Menu.CheckboxItem />', () => {
       });
 
       await user.keyboard(`[Space]`);
-      expect(item).to.have.attribute('data-checkbox-item-checked', '');
+      expect(item).to.have.attribute('data-checked', '');
 
       await user.keyboard(`[Space]`);
-      expect(item).to.have.attribute('data-checkbox-item-unchecked', '');
+      expect(item).to.have.attribute('data-unchecked', '');
     });
 
     it(`toggles the checked state and closes the menu when Enter is pressed`, async () => {
@@ -236,7 +236,7 @@ describe('<Menu.CheckboxItem />', () => {
 
       expect(queryByRole('menu', { hidden: false })).to.equal(null);
       await user.click(trigger);
-      expect(item).to.have.attribute('data-checkbox-item-checked', '');
+      expect(item).to.have.attribute('data-checked', '');
     });
 
     it('calls `onCheckedChange` when the item is clicked', async () => {
@@ -291,7 +291,7 @@ describe('<Menu.CheckboxItem />', () => {
 
       const itemAfterReopen = getByRole('menuitemcheckbox');
       expect(itemAfterReopen).to.have.attribute('aria-checked', 'true');
-      expect(itemAfterReopen).to.have.attribute('data-checkbox-item-checked');
+      expect(itemAfterReopen).to.have.attribute('data-checked');
     });
   });
 

packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx

@@ -173,7 +173,7 @@ describe('<Menu.RadioItem />', () => {
       await user.click(item);
 
       expect(item).to.have.attribute('aria-checked', 'true');
-      expect(item).to.have.attribute('data-radio-item-checked', '');
+      expect(item).to.have.attribute('data-checked', '');
     });
 
     ['Space', 'Enter'].forEach((key) => {
@@ -201,7 +201,7 @@ describe('<Menu.RadioItem />', () => {
         });
 
         await user.keyboard(`[${key}]`);
-        expect(item).to.have.attribute('data-radio-item-checked', '');
+        expect(item).to.have.attribute('data-checked', '');
       });
     });
 
@@ -256,7 +256,7 @@ describe('<Menu.RadioItem />', () => {
 
       const itemAfterReopen = getByRole('menuitemradio');
       expect(itemAfterReopen).to.have.attribute('aria-checked', 'true');
-      expect(itemAfterReopen).to.have.attribute('data-radio-item-checked', '');
+      expect(itemAfterReopen).to.have.attribute('data-checked', '');
     });
   });
 

packages/mui-base/src/Menu/utils/styleHookMapping.ts

@@ -1,27 +1,14 @@
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 
-export const radioItemMapping: CustomStyleHookMapping<{ checked: boolean }> = {
+export const itemMapping: CustomStyleHookMapping<{ checked: boolean }> = {
   checked(value): Record<string, string> {
     if (value) {
       return {
-        'data-radio-item-checked': '',
+        'data-checked': '',
       };
     }
     return {
-      'data-radio-item-unchecked': '',
-    };
-  },
-};
-
-export const checkboxItemMapping: CustomStyleHookMapping<{ checked: boolean }> = {
-  checked(value): Record<string, string> {
-    if (value) {
-      return {
-        'data-checkbox-item-checked': '',
-      };
-    }
-    return {
-      'data-checkbox-item-unchecked': '',
+      'data-unchecked': '',
     };
   },
 };