chore(ListBox): provide menuitem and listboxitem mods when applicable

Author: tenphi

.changeset/stupid-tomatoes-live.md

@@ -94,6 +94,7 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
     selected: isSelected,
     disabled: isDisabled,
     submenu: !!submenuContext,
+    menuitem: true,
   };
 
   return (

src/components/actions/Menu/MenuItem.tsx

@@ -253,7 +253,7 @@ const ItemElement = tasty({
     outlineOffset: 1,
     cursor: {
       '': 'default',
-      ':is(button) | :is(a) | listboxitem': 'pointer',
+      ':is(button) | :is(a)': 'pointer',
       disabled: 'not-allowed',
     },
 

src/components/content/Item/Item.tsx

@@ -114,9 +114,6 @@ const ListBoxScrollElement = tasty({
 // Create an extended Item for ListBox options with 'all' modifier support
 const ListBoxItem = tasty(Item, {
   as: 'li',
-  mods: {
-    listboxitem: true,
-  },
   styles: {
     margin: {
       '': '0 0 1bw 0',
@@ -425,6 +422,7 @@ const SelectAllOption = ({
         isDisabled={isDisabled}
         icon={checkboxIcon}
         mods={{
+          listboxitem: true,
           disabled: isDisabled,
           checkable: isCheckable,
           hovered: isHovered,
@@ -1222,6 +1220,7 @@ function Option({
       tooltip={item.props?.tooltip}
       defaultTooltipPlacement="right"
       mods={{
+        listboxitem: true,
         focused: isFocused,
         pressed: isPressed,
         valid: isSelected && validationState === 'valid',

src/components/fields/ListBox/ListBox.tsx

@@ -116,9 +116,6 @@ export const ListBoxElement = tasty({
 const OptionItem = tasty(Item, {
   as: 'li',
   qa: 'Option',
-  mods: {
-    listboxitem: true,
-  },
   styles: {
     '$inline-compensation': '0px',
   },
@@ -719,6 +716,7 @@ function Option({ item, state, styles, shouldUseVirtualFocus, size }) {
       ref={ref}
       qa={qa}
       mods={{
+        listboxitem: true,
         selected: isSelected,
         focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
         disabled: isDisabled,