List: default cursor for items with disabled selection (#35153)

Author: george-cz

change/@fluentui-react-list-ac029cf6-2a1e-4edb-a427-de93bbfad634.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Use default cursor when selection is disabled",
+  "packageName": "@fluentui/react-list",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-list/library/etc/react-list.api.md

@@ -46,6 +46,7 @@ export type ListItemSlots = {
 export type ListItemState = ComponentState<ListItemSlots> & {
     selectable: boolean;
     navigable: boolean;
+    disabled?: boolean;
 };
 
 // @public

packages/react-components/react-list/library/src/components/ListItem/ListItem.types.ts

@@ -24,4 +24,8 @@ export type ListItemProps = ComponentProps<ListItemSlots> & {
 /**
  * State used in rendering ListItem
  */
-export type ListItemState = ComponentState<ListItemSlots> & { selectable: boolean; navigable: boolean };
+export type ListItemState = ComponentState<ListItemSlots> & {
+  selectable: boolean;
+  navigable: boolean;
+  disabled?: boolean;
+};

packages/react-components/react-list/library/src/components/ListItem/useListItem.tsx

@@ -227,6 +227,7 @@ export const useListItem_unstable = (
     },
     root,
     checkmark,
+    disabled: disabledSelection && !onAction,
     selectable: isSelectionModeEnabled,
     navigable: focusableItems,
   };

packages/react-components/react-list/library/src/components/ListItem/useListItemStyles.styles.ts

@@ -38,6 +38,10 @@ const useStyles = makeStyles({
     display: 'flex',
     cursor: 'pointer',
   },
+
+  disabled: {
+    cursor: 'default',
+  },
 });
 
 /**
@@ -54,6 +58,7 @@ export const useListItemStyles_unstable = (state: ListItemState): ListItemState
     listItemClassNames.root,
     rootBaseStyles,
     (state.selectable || state.navigable) && styles.rootClickableOrSelectable,
+    state.disabled && styles.disabled,
     state.root.className,
   );
 

packages/react-components/react-list/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx

@@ -45,8 +45,15 @@ export const SingleActionSelectionDifferentPrimary = (): JSXElement => {
       selectedItems={selectedItems}
       onSelectionChange={(_, data) => setSelectedItems(data.selectedItems)}
     >
-      {items.map(({ name, avatar }) => (
-        <ListItem key={name} value={name} aria-label={name} onAction={onAction} checkmark={{ 'aria-label': name }}>
+      {items.map(({ name, avatar }, index) => (
+        <ListItem
+          key={name}
+          value={name}
+          aria-label={name}
+          onAction={onAction}
+          checkmark={{ 'aria-label': name }}
+          disabledSelection={index === 2}
+        >
           <Persona
             name={name}
             secondaryText="Available"