@fluentui/react-list 9.2.7 → 9.3.0

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-list
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.3.0)
+
+Thu, 17 Jul 2025 13:45:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.7..@fluentui/react-list_v9.3.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.5.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.6..@fluentui/react-list_v9.2.7)
 
 ### Patches

package/lib/components/List/useListStyles.styles.raw.js

@@ -0,0 +1,18 @@
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+export const listClassNames = {
+    root: 'fui-List'
+};
+const useRootBaseStyles = makeResetStyles({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none'
+});
+/**
+ * Apply styling to the List slots based on the state
+ */ export const useListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootBaseStyles();
+    state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);
+    return state;
+};

package/lib/components/List/useListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n  root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  textIndent: 0,\n  listStyleType: 'none',\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n  'use no memo';\n\n  const rootStyles = useRootBaseStyles();\n\n  state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useListStyles_unstable","state","rootStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}

package/lib/components/ListItem/useListItemStyles.styles.raw.js

@@ -0,0 +1,48 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const listItemClassNames = {
+    root: 'fui-ListItem',
+    checkmark: 'fui-ListItem__checkmark'
+};
+const useRootBaseStyles = makeResetStyles({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none',
+    ...createCustomFocusIndicatorStyle({
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+        borderRadius: tokens.borderRadiusMedium
+    }, {
+        selector: 'focus'
+    })
+});
+const useCheckmarkBaseStyles = makeStyles({
+    root: {
+        alignSelf: 'center',
+        '& .fui-Checkbox__indicator': {
+            margin: '4px'
+        }
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    rootClickableOrSelectable: {
+        display: 'flex',
+        cursor: 'pointer'
+    }
+});
+/**
+ * Apply styling to the ListItem slots based on the state
+ */ export const useListItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const checkmarkBaseStyles = useCheckmarkBaseStyles();
+    const styles = useStyles();
+    state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.root.className);
+    if (state.checkmark) {
+        state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
+    }
+    return state;
+};

package/lib/components/ListItem/useListItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n  root: 'fui-ListItem',\n  checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  textIndent: 0,\n  listStyleType: 'none',\n  ...createCustomFocusIndicatorStyle(\n    {\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n    },\n    { selector: 'focus' },\n  ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n  root: {\n    alignSelf: 'center',\n\n    '& .fui-Checkbox__indicator': { margin: '4px' },\n  },\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rootClickableOrSelectable: {\n    display: 'flex',\n    cursor: 'pointer',\n  },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  const checkmarkBaseStyles = useCheckmarkBaseStyles();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    listItemClassNames.root,\n    rootBaseStyles,\n    (state.selectable || state.navigable) && styles.rootClickableOrSelectable,\n    state.root.className,\n  );\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(\n      listItemClassNames.checkmark,\n      checkmarkBaseStyles.root,\n      state.checkmark.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,oBAAoBP,gBAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGT,gCACD;QACEU,SAAS,CAAC,EAAET,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,CAAC,CAAC;QACvEC,cAAcZ,OAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,yBAAyBnB,WAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,YAAYrB,WAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBnB;IACvB,MAAMoB,sBAAsBT;IAC5B,MAAMU,SAASR;IAEfK,MAAMpB,IAAI,CAACwB,SAAS,GAAG5B,aACrBG,mBAAmBC,IAAI,EACvBqB,gBACA,AAACD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAS,AAAD,KAAMH,OAAOP,yBAAyB,EACzEI,MAAMpB,IAAI,CAACwB,SAAS;IAGtB,IAAIJ,MAAMnB,SAAS,EAAE;QACnBmB,MAAMnB,SAAS,CAACuB,SAAS,GAAG5B,aAC1BG,mBAAmBE,SAAS,EAC5BqB,oBAAoBtB,IAAI,EACxBoB,MAAMnB,SAAS,CAACuB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}

package/lib-commonjs/components/List/useListStyles.styles.raw.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    listClassNames: function() {
+        return listClassNames;
+    },
+    useListStyles_unstable: function() {
+        return useListStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const listClassNames = {
+    root: 'fui-List'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none'
+});
+const useListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(listClassNames.root, rootStyles, state.root.className);
+    return state;
+};

package/lib-commonjs/components/List/useListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n  root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  textIndent: 0,\n  listStyleType: 'none',\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n  'use no memo';\n\n  const rootStyles = useRootBaseStyles();\n\n  state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n  return state;\n};\n"],"names":["listClassNames","useListStyles_unstable","root","useRootBaseStyles","makeResetStyles","padding","margin","textIndent","listStyleType","state","rootStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,cAAAA;eAAAA;;IAcAC,sBAAAA;eAAAA;;;uBAjBiC;AAGvC,MAAMD,iBAA4C;IACvDE,MAAM;AACR;AAEA,MAAMC,oBAAoBC,IAAAA,sBAAAA,EAAgB;IACxCC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAKO,MAAMP,yBAAyB,CAACQ;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAAA,EAAaZ,eAAeE,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT"}

package/lib-commonjs/components/ListItem/useListItemStyles.styles.raw.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    listItemClassNames: function() {
+        return listItemClassNames;
+    },
+    useListItemStyles_unstable: function() {
+        return useListItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const listItemClassNames = {
+    root: 'fui-ListItem',
+    checkmark: 'fui-ListItem__checkmark'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none',
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    }, {
+        selector: 'focus'
+    })
+});
+const useCheckmarkBaseStyles = (0, _react.makeStyles)({
+    root: {
+        alignSelf: 'center',
+        '& .fui-Checkbox__indicator': {
+            margin: '4px'
+        }
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    rootClickableOrSelectable: {
+        display: 'flex',
+        cursor: 'pointer'
+    }
+});
+const useListItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const checkmarkBaseStyles = useCheckmarkBaseStyles();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.root.className);
+    if (state.checkmark) {
+        state.checkmark.className = (0, _react.mergeClasses)(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
+    }
+    return state;
+};

package/lib-commonjs/components/ListItem/useListItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n  root: 'fui-ListItem',\n  checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  textIndent: 0,\n  listStyleType: 'none',\n  ...createCustomFocusIndicatorStyle(\n    {\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n    },\n    { selector: 'focus' },\n  ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n  root: {\n    alignSelf: 'center',\n\n    '& .fui-Checkbox__indicator': { margin: '4px' },\n  },\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rootClickableOrSelectable: {\n    display: 'flex',\n    cursor: 'pointer',\n  },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  const checkmarkBaseStyles = useCheckmarkBaseStyles();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    listItemClassNames.root,\n    rootBaseStyles,\n    (state.selectable || state.navigable) && styles.rootClickableOrSelectable,\n    state.root.className,\n  );\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(\n      listItemClassNames.checkmark,\n      checkmarkBaseStyles.root,\n      state.checkmark.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["listItemClassNames","useListItemStyles_unstable","root","checkmark","useRootBaseStyles","makeResetStyles","padding","margin","textIndent","listStyleType","createCustomFocusIndicatorStyle","outline","tokens","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","makeStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","state","rootBaseStyles","checkmarkBaseStyles","styles","className","mergeClasses","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,kBAAAA;eAAAA;;IAuCAC,0BAAAA;eAAAA;;;uBA5C6C;8BACV;4BAEzB;AAEhB,MAAMD,qBAAoD;IAC/DE,MAAM;IACNC,WAAW;AACb;AAEA,MAAMC,oBAAoBC,IAAAA,sBAAAA,EAAgB;IACxCC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGC,IAAAA,6CAAAA,EACD;QACEC,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,gBAAgB,CAAC,OAAO,EAAED,kBAAAA,CAAOE,iBAAiB,CAAC,CAAC;QACvEC,cAAcH,kBAAAA,CAAOI,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,yBAAyBC,IAAAA,iBAAAA,EAAW;IACxCjB,MAAM;QACJkB,WAAW;QAEX,8BAA8B;YAAEb,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMc,YAAYF,IAAAA,iBAAAA,EAAW;IAC3BG,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;AACF;AAKO,MAAMvB,6BAA6B,CAACwB;IACzC;IAEA,MAAMC,iBAAiBtB;IACvB,MAAMuB,sBAAsBT;IAC5B,MAAMU,SAASP;IAEfI,MAAMvB,IAAI,CAAC2B,SAAS,GAAGC,IAAAA,mBAAAA,EACrB9B,mBAAmBE,IAAI,EACvBwB,gBACA,AAACD,CAAAA,MAAMM,UAAU,IAAIN,MAAMO,SAAS,AAATA,KAAcJ,OAAON,yBAAyB,EACzEG,MAAMvB,IAAI,CAAC2B,SAAS;IAGtB,IAAIJ,MAAMtB,SAAS,EAAE;QACnBsB,MAAMtB,SAAS,CAAC0B,SAAS,GAAGC,IAAAA,mBAAAA,EAC1B9B,mBAAmBG,SAAS,EAC5BwB,oBAAoBzB,IAAI,EACxBuB,MAAMtB,SAAS,CAAC0B,SAAS;IAE7B;IAEA,OAAOJ;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-list",
-  "version": "9.2.7",
+  "version": "9.3.0",
   "description": "React List v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,11 +26,11 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-checkbox": "^9.4.7",
+    "@fluentui/react-checkbox": "^9.5.0",
     "@fluentui/react-context-selector": "^9.2.2",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@fluentui/react-shared-contexts": "^9.24.0",