@fluentui/react-migration-v0-v9 9.6.30 → 9.6.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui/react-migration-v0-v9
2
2
 
3
- This log was last generated on Wed, 27 May 2026 11:18:30 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 29 Jun 2026 15:14:11 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.6.32](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.32)
8
+
9
+ Mon, 29 Jun 2026 15:14:11 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.31..@fluentui/react-migration-v0-v9_v9.6.32)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-components to v9.74.3 ([commit](https://github.com/microsoft/fluentui/commit/aedc345f58bc16bb8540615b5afdf3d2d3569db4) by beachball)
15
+
16
+ ## [9.6.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.31)
17
+
18
+ Wed, 24 Jun 2026 11:09:48 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.30..@fluentui/react-migration-v0-v9_v9.6.31)
20
+
21
+ ### Patches
22
+
23
+ - fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
24
+ - Bump @fluentui/react-aria to v9.17.13 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
25
+ - Bump @fluentui/react-components to v9.74.2 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
26
+ - Bump @fluentui/react-context-selector to v9.2.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
27
+ - Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
28
+ - Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
29
+ - Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
30
+
7
31
  ## [9.6.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.30)
8
32
 
9
- Wed, 27 May 2026 11:18:30 GMT
33
+ Wed, 27 May 2026 11:18:57 GMT
10
34
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.29..@fluentui/react-migration-v0-v9_v9.6.30)
11
35
 
12
36
  ### Patches
@@ -22,8 +22,6 @@ const useStyles = /*#__PURE__*/__styles({
22
22
  * Apply styling to the List slots based on the state
23
23
  */
24
24
  export const useListStyles_unstable = state => {
25
- 'use no memo';
26
-
27
25
  const rootStyles = useRootBaseStyles();
28
26
  const styles = useStyles();
29
27
  const layoutToStyles = {
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex'\n },\n rootGrid: {\n display: 'grid'\n }\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,MAAMK,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;EACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,cAAc,GAAG;IACnB,CAAC,YAAY,GAAGD,MAAM,CAACP,cAAc;IACrC,CAAC,MAAM,GAAGO,MAAM,CAACL,QAAQ;IACzB,CAAC,UAAU,GAAGO;EAClB,CAAC;EACD;EACAJ,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGf,YAAY,CAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex'\n },\n rootGrid: {\n display: 'grid'\n }\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,MAAMK,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;EACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,cAAc,GAAG;IACnB,CAAC,YAAY,GAAGD,MAAM,CAACP,cAAc;IACrC,CAAC,MAAM,GAAGO,MAAM,CAACL,QAAQ;IACzB,CAAC,UAAU,GAAGO;EAClB,CAAC;EACD;EACAJ,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGf,YAAY,CAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -22,7 +22,6 @@ const useRootBaseStyles = makeResetStyles({
22
22
  /**
23
23
  * Apply styling to the List slots based on the state
24
24
  */ export const useListStyles_unstable = (state)=>{
25
- 'use no memo';
26
25
  const rootStyles = useRootBaseStyles();
27
26
  const styles = useStyles();
28
27
  const layoutToStyles = {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/List/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, 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 * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex',\n },\n\n rootGrid: {\n display: 'grid',\n },\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 const styles = useStyles();\n\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined, // no extra styles needed, keep it in for completeness and type safety\n };\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n listClassNames.root,\n rootStyles,\n layoutToStyles[state.layout],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useStyles","rootHorizontal","display","rootGrid","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BW,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaX;IACnB,MAAMY,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IAEA,oDAAoD;IACpDJ,MAAMX,IAAI,CAACgB,SAAS,GAAGlB,aACrBC,eAAeC,IAAI,EACnBY,YACAE,cAAc,CAACH,MAAMM,MAAM,CAAC,EAC5BN,MAAMX,IAAI,CAACgB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/List/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, 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 * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex',\n },\n\n rootGrid: {\n display: 'grid',\n },\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined, // no extra styles needed, keep it in for completeness and type safety\n };\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n listClassNames.root,\n rootStyles,\n layoutToStyles[state.layout],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useStyles","rootHorizontal","display","rootGrid","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BW,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,yBAAyB,CAACC;IACrC,MAAMC,aAAaX;IACnB,MAAMY,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IAEA,oDAAoD;IACpDJ,MAAMX,IAAI,CAACgB,SAAS,GAAGlB,aACrBC,eAAeC,IAAI,EACnBY,YACAE,cAAc,CAACH,MAAMM,MAAM,CAAC,EAC5BN,MAAMX,IAAI,CAACgB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
@@ -47,8 +47,6 @@ const useStyles = /*#__PURE__*/__styles({
47
47
  * Apply styling to the ListItem slots based on the state
48
48
  */
49
49
  export const useListItemStyles_unstable = state => {
50
- 'use no memo';
51
-
52
50
  const rootBaseStyles = useRootBaseStyles();
53
51
  const styles = useStyles();
54
52
  // eslint-disable-next-line react-hooks/immutability
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200\n },\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis'\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected\n },\n rootClickable: {\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover\n }\n }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n if (state.header) {\n var _state_header;\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);\n }\n if (state.contentWrapper) {\n var _state_contentWrapper;\n // eslint-disable-next-line react-hooks/immutability\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,MAAM,EAAE,sBAAsB;EAC9BC,cAAc,EAAE,8BAA8B;EAC9CC,WAAW,EAAE,2BAA2B;EACxCC,YAAY,EAAE,4BAA4B;EAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,gBAAGZ,aAAA,wOAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMa,SAAS,gBAAGd,QAAA;EAAAS,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1B;EACAmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;IACd,IAAIgC,aAAa;IACjB;IACAP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,GAAGlC,YAAY,CAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;IACtB,IAAIiC,qBAAqB;IACzB;IACAT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,GAAGlC,YAAY,CAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200\n },\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis'\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected\n },\n rootClickable: {\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover\n }\n }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n if (state.header) {\n var _state_header;\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);\n }\n if (state.contentWrapper) {\n var _state_contentWrapper;\n // eslint-disable-next-line react-hooks/immutability\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,MAAM,EAAE,sBAAsB;EAC9BC,cAAc,EAAE,8BAA8B;EAC9CC,WAAW,EAAE,2BAA2B;EACxCC,YAAY,EAAE,4BAA4B;EAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,gBAAGZ,aAAA,wOAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMa,SAAS,gBAAGd,QAAA;EAAAS,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1B;EACAmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;IACd,IAAIgC,aAAa;IACjB;IACAP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,GAAGlC,YAAY,CAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;IACtB,IAAIiC,qBAAqB;IACzB;IACAT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,GAAGlC,YAAY,CAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -51,7 +51,6 @@ const useRootBaseStyles = makeResetStyles({
51
51
  /**
52
52
  * Apply styling to the ListItem slots based on the state
53
53
  */ export const useListItemStyles_unstable = (state)=>{
54
- 'use no memo';
55
54
  const rootBaseStyles = useRootBaseStyles();
56
55
  const styles = useStyles();
57
56
  // eslint-disable-next-line react-hooks/immutability
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200,\n },\n\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4,\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis',\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n rootClickable: {\n cursor: 'pointer',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\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 styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable || state.navigable) && styles.rootClickable,\n state.selected && styles.rootSelected,\n state.root.className,\n );\n\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n }\n\n if (state.contentWrapper) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentWrapper.className = mergeClasses(\n styles.contentWrapper,\n state.truncateContent && styles.truncate,\n !state.contentMedia && styles.contentWrapperWithoutMedia,\n state.contentWrapper?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"AAAA;AAGA,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,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,oBAAoBZ,gBAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGd,gCACD;QACEe,SAAS,GAAGd,OAAOe,gBAAgB,CAAC,OAAO,EAAEf,OAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,OAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,OAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,OAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,OAAOkC,4BAA4B;QACtD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEf,oDAAoD;IACpDgB,MAAMlC,IAAI,CAACqC,SAAS,GAAGzC,aACrBG,mBAAmBC,IAAI,EACvBmC,gBACA,AAACD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAS,AAAD,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAE+DgC;QAD/E,oDAAoD;QACpDA,MAAMhC,MAAM,CAACmC,SAAS,GAAGzC,aAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,GAAEW,gBAAAA,MAAMhC,MAAM,cAAZgC,oCAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAMtB+B;QALF,oDAAoD;QACpDA,MAAM/B,cAAc,CAACkC,SAAS,GAAGzC,aAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,GACxDa,wBAAAA,MAAM/B,cAAc,cAApB+B,4CAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200,\n },\n\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4,\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis',\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n rootClickable: {\n cursor: 'pointer',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable || state.navigable) && styles.rootClickable,\n state.selected && styles.rootSelected,\n state.root.className,\n );\n\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n }\n\n if (state.contentWrapper) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentWrapper.className = mergeClasses(\n styles.contentWrapper,\n state.truncateContent && styles.truncate,\n !state.contentMedia && styles.contentWrapperWithoutMedia,\n state.contentWrapper?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"AAAA;AAGA,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,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,oBAAoBZ,gBAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGd,gCACD;QACEe,SAAS,GAAGd,OAAOe,gBAAgB,CAAC,OAAO,EAAEf,OAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,OAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,OAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,OAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,OAAOkC,4BAA4B;QACtD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEf,oDAAoD;IACpDgB,MAAMlC,IAAI,CAACqC,SAAS,GAAGzC,aACrBG,mBAAmBC,IAAI,EACvBmC,gBACA,AAACD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAS,AAAD,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAE+DgC;QAD/E,oDAAoD;QACpDA,MAAMhC,MAAM,CAACmC,SAAS,GAAGzC,aAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,GAAEW,gBAAAA,MAAMhC,MAAM,cAAZgC,oCAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAMtB+B;QALF,oDAAoD;QACpDA,MAAM/B,cAAc,CAACkC,SAAS,GAAGzC,aAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,GACxDa,wBAAAA,MAAM/B,cAAc,cAApB+B,4CAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}
@@ -4,7 +4,6 @@ import * as React from 'react';
4
4
  import { useVideoStyles } from './Video.styles';
5
5
  export const videoClassName = 'fui-Video';
6
6
  export const Video = /*#__PURE__*/ React.forwardRef((props, ref)=>{
7
- 'use no memo';
8
7
  const { className, muted, ...rest } = props;
9
8
  const videoRef = React.useRef(null);
10
9
  const classes = useVideoStyles();
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /**\n * The source URL of the video\n */\n src: string;\n\n /**\n * Whether the video should start playing automatically\n * @default false\n */\n autoPlay?: boolean;\n\n /**\n * Whether the video should display controls\n * @default true\n */\n controls?: boolean;\n\n /**\n * Whether the video should loop\n */\n loop?: boolean;\n\n /**\n * Whether the video should be muted\n */\n muted?: boolean;\n\n /**\n * The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n 'use no memo';\n\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>(null);\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,aAAa,QAAQ,6BAA6B;AACzE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,iBAAiB;AAEhD,OAAO,MAAMC,iBAAiB,YAAY;AAuC1C,OAAO,MAAMC,sBAAQH,MAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,MAAMW,MAAM,CAAmB;IAEhD,MAAMC,UAAUX;IAChBD,MAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,qBAAAA,+BAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,MAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,qBACE,oBAACQ;QACCV,KAAKP,cAAcO,KAAKI;QACxBO,MAAK;QACLV,WAAWT,aAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /**\n * The source URL of the video\n */\n src: string;\n\n /**\n * Whether the video should start playing automatically\n * @default false\n */\n autoPlay?: boolean;\n\n /**\n * Whether the video should display controls\n * @default true\n */\n controls?: boolean;\n\n /**\n * Whether the video should loop\n */\n loop?: boolean;\n\n /**\n * Whether the video should be muted\n */\n muted?: boolean;\n\n /**\n * The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>(null);\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,aAAa,QAAQ,6BAA6B;AACzE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,iBAAiB;AAEhD,OAAO,MAAMC,iBAAiB,YAAY;AAuC1C,OAAO,MAAMC,sBAAQH,MAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,MAAMW,MAAM,CAAmB;IAEhD,MAAMC,UAAUX;IAChBD,MAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,qBAAAA,+BAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,MAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,qBACE,oBAACQ;QACCV,KAAKP,cAAcO,KAAKI;QACxBO,MAAK;QACLV,WAAWT,aAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,WAAW,GAAG"}
@@ -40,7 +40,6 @@ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1m6yby2", nu
40
40
  ]
41
41
  });
42
42
  const useListStyles_unstable = (state)=>{
43
- 'use no memo';
44
43
  const rootStyles = useRootBaseStyles();
45
44
  const styles = useStyles();
46
45
  const layoutToStyles = {
@@ -1 +1 @@
1
- {"version":3,"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex'\n },\n rootGrid: {\n display: 'grid'\n }\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECG,cAAc;;;0BAqBY;eAAtBQ;;;uBAtByC,gBAAgB;AACnE,uBAAuB;IAC1BP,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,YAAA,MAAA;IAAA;CAKzB,CAAC;AACF;;CAEA,GAAI,MAAMK,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,cAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOrB,CAAC;AAGS,gCAAgCE,KAAK,IAAG;IAC/C,aAAa;IACb,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;IACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,MAAMS,cAAc,GAAG;QACnB,CAAC,YAAY,CAAA,EAAGD,MAAM,CAACP,cAAc;QACrC,CAAC,MAAM,CAAA,EAAGO,MAAM,CAACL,QAAQ;QACzB,CAAC,UAAU,CAAA,EAAGO;IAClB,CAAC;IACD,oDAAA;IACAJ,KAAK,CAACR,IAAI,CAACa,SAAS,OAAGf,mBAAY,EAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;IACxH,OAAOL,KAAK;AAChB,CAAC"}
1
+ {"version":3,"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex'\n },\n rootGrid: {\n display: 'grid'\n }\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECG,cAAc;;;0BAqBY;eAAtBQ;;;uBAtByC,gBAAgB;AACnE,uBAAuB;IAC1BP,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,YAAA,MAAA;IAAA;CAKzB,CAAC;AACF;;CAEA,GAAI,MAAMK,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,cAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOrB,CAAC;AAGS,gCAAgCE,KAAK,IAAG;IAC/C,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;IACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,MAAMS,cAAc,GAAG;QACnB,CAAC,YAAY,CAAA,EAAGD,MAAM,CAACP,cAAc;QACrC,CAAC,MAAM,CAAA,EAAGO,MAAM,CAACL,QAAQ;QACzB,CAAC,UAAU,CAAA,EAAGO;IAClB,CAAC;IACD,oDAAA;IACAJ,KAAK,CAACR,IAAI,CAACa,SAAS,OAAGf,mBAAY,EAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;IACxH,OAAOL,KAAK;AAChB,CAAC"}
@@ -38,7 +38,6 @@ const useRootBaseStyles = (0, _react.makeResetStyles)({
38
38
  }
39
39
  });
40
40
  const useListStyles_unstable = (state)=>{
41
- 'use no memo';
42
41
  const rootStyles = useRootBaseStyles();
43
42
  const styles = useStyles();
44
43
  const layoutToStyles = {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/List/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, 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 * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex',\n },\n\n rootGrid: {\n display: 'grid',\n },\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 const styles = useStyles();\n\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined, // no extra styles needed, keep it in for completeness and type safety\n };\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n listClassNames.root,\n rootStyles,\n layoutToStyles[state.layout],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useStyles","rootHorizontal","display","rootGrid","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,cAAAA;;;0BA2BAW;eAAAA;;;uBA9B6C,iBAAiB;AAGpE,uBAAkD;IACvDV,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAoBJ,sBAAAA,EAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BW,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAKO,+BAA+B,CAACG;IACrC;IAEA,MAAMC,aAAaX;IACnB,MAAMY,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IAEA,oDAAoD;IACpDJ,MAAMX,IAAI,CAACgB,SAAS,OAAGlB,mBAAAA,EACrBC,eAAeC,IAAI,EACnBY,YACAE,cAAc,CAACH,MAAMM,MAAM,CAAC,EAC5BN,MAAMX,IAAI,CAACgB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/List/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, 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 * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex',\n },\n\n rootGrid: {\n display: 'grid',\n },\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined, // no extra styles needed, keep it in for completeness and type safety\n };\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n listClassNames.root,\n rootStyles,\n layoutToStyles[state.layout],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useStyles","rootHorizontal","display","rootGrid","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,cAAAA;;;0BA2BAW;eAAAA;;;uBA9B6C,iBAAiB;AAGpE,uBAAkD;IACvDV,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAoBJ,sBAAAA,EAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BW,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAKO,+BAA+B,CAACG;IACrC,MAAMC,aAAaX;IACnB,MAAMY,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IAEA,oDAAoD;IACpDJ,MAAMX,IAAI,CAACgB,SAAS,OAAGlB,mBAAAA,EACrBC,eAAeC,IAAI,EACnBY,YACAE,cAAc,CAACH,MAAMM,MAAM,CAAC,EAC5BN,MAAMX,IAAI,CAACgB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
@@ -74,7 +74,6 @@ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rn7e01x", nul
74
74
  ]
75
75
  });
76
76
  const useListItemStyles_unstable = (state)=>{
77
- 'use no memo';
78
77
  const rootBaseStyles = useRootBaseStyles();
79
78
  const styles = useStyles();
80
79
  // eslint-disable-next-line react-hooks/immutability
@@ -1 +1 @@
1
- {"version":3,"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200\n },\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis'\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected\n },\n rootClickable: {\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover\n }\n }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n if (state.header) {\n var _state_header;\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);\n }\n if (state.contentWrapper) {\n var _state_contentWrapper;\n // eslint-disable-next-line react-hooks/immutability\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n }\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,kBAAkB;;;8BAgDY;eAA1B2B;;;uBAnDyC,gBAAgB;AAGnE,2BAA2B;IAC9B1B,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,qBAAqB;IAC5BC,MAAM,EAAE,sBAAsB;IAC9BC,cAAc,EAAE,8BAA8B;IAC9CC,WAAW,EAAE,2BAA2B;IACxCC,YAAY,EAAE,4BAA4B;IAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGZ,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB,CAAC;AACF;;CAEA,GAAI,MAAMa,SAAS,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAS,cAAA,EAAA;QAAAM,OAAA,EAAA;IAAA;IAAAC,0BAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;IAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,OAAGlC,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAAA,AAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;IACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;QACd,IAAIgC,aAAa;QACjB,oDAAA;QACAP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,OAAGlC,mBAAY,EAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAAA,AAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;IAC1L;IACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;QACtB,IAAIiC,qBAAqB;QACzB,oDAAA;QACAT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,OAAGlC,mBAAY,EAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAAA,AAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;IACpT;IACA,OAAOH,KAAK;AAChB,CAAC"}
1
+ {"version":3,"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200\n },\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis'\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected\n },\n rootClickable: {\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover\n }\n }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n if (state.header) {\n var _state_header;\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);\n }\n if (state.contentWrapper) {\n var _state_contentWrapper;\n // eslint-disable-next-line react-hooks/immutability\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n }\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,kBAAkB;;;8BAgDY;eAA1B2B;;;uBAnDyC,gBAAgB;AAGnE,2BAA2B;IAC9B1B,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,qBAAqB;IAC5BC,MAAM,EAAE,sBAAsB;IAC9BC,cAAc,EAAE,8BAA8B;IAC9CC,WAAW,EAAE,2BAA2B;IACxCC,YAAY,EAAE,4BAA4B;IAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGZ,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB,CAAC;AACF;;CAEA,GAAI,MAAMa,SAAS,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAS,cAAA,EAAA;QAAAM,OAAA,EAAA;IAAA;IAAAC,0BAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;IAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,OAAGlC,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAAA,AAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;IACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;QACd,IAAIgC,aAAa;QACjB,oDAAA;QACAP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,OAAGlC,mBAAY,EAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAAA,AAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;IAC1L;IACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;QACtB,IAAIiC,qBAAqB;QACzB,oDAAA;QACAT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,OAAGlC,mBAAY,EAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAAA,AAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;IACpT;IACA,OAAOH,KAAK;AAChB,CAAC"}
@@ -67,7 +67,6 @@ const useRootBaseStyles = (0, _react.makeResetStyles)({
67
67
  }
68
68
  });
69
69
  const useListItemStyles_unstable = (state)=>{
70
- 'use no memo';
71
70
  const rootBaseStyles = useRootBaseStyles();
72
71
  const styles = useStyles();
73
72
  // eslint-disable-next-line react-hooks/immutability
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200,\n },\n\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4,\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis',\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n rootClickable: {\n cursor: 'pointer',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\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 styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable || state.navigable) && styles.rootClickable,\n state.selected && styles.rootSelected,\n state.root.className,\n );\n\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n }\n\n if (state.contentWrapper) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentWrapper.className = mergeClasses(\n styles.contentWrapper,\n state.truncateContent && styles.truncate,\n !state.contentMedia && styles.contentWrapperWithoutMedia,\n state.contentWrapper?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,kBAAAA;;;IAwDAkC,0BAAAA;;;;uBA7D6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DjC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,wBAAoBZ,sBAAAA,EAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,OAAGd,6CAAAA,EACD;QACEe,SAAS,GAAGd,kBAAAA,CAAOe,gBAAgB,CAAC,OAAO,EAAEf,kBAAAA,CAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,gBAAYxB,iBAAAA,EAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,kBAAAA,CAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,kBAAAA,CAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,kBAAAA,CAAOkC,4BAA4B;QACtD;IACF;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEf,oDAAoD;IACpDgB,MAAMlC,IAAI,CAACqC,SAAS,OAAGzC,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBmC,gBACCD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAAA,AAAQ,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAE+DgC;QAD/E,oDAAoD;QACpDA,MAAMhC,MAAM,CAACmC,SAAS,OAAGzC,mBAAAA,EAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,EAAA,CAAEW,gBAAAA,MAAMhC,MAAAA,AAAM,MAAA,QAAZgC,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAMtB+B;QALF,oDAAoD;QACpDA,MAAM/B,cAAc,CAACkC,SAAS,OAAGzC,mBAAAA,EAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,EAAA,CACxDa,wBAAAA,MAAM/B,cAAAA,AAAc,MAAA,QAApB+B,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200,\n },\n\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4,\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis',\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n rootClickable: {\n cursor: 'pointer',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable || state.navigable) && styles.rootClickable,\n state.selected && styles.rootSelected,\n state.root.className,\n );\n\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n }\n\n if (state.contentWrapper) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentWrapper.className = mergeClasses(\n styles.contentWrapper,\n state.truncateContent && styles.truncate,\n !state.contentMedia && styles.contentWrapperWithoutMedia,\n state.contentWrapper?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,kBAAAA;;;IAwDAkC,0BAAAA;;;;uBA7D6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DjC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,wBAAoBZ,sBAAAA,EAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,OAAGd,6CAAAA,EACD;QACEe,SAAS,GAAGd,kBAAAA,CAAOe,gBAAgB,CAAC,OAAO,EAAEf,kBAAAA,CAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,gBAAYxB,iBAAAA,EAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,kBAAAA,CAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,kBAAAA,CAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,kBAAAA,CAAOkC,4BAA4B;QACtD;IACF;AACF;AAKO,mCAAmC,CAACE;IACzC,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEf,oDAAoD;IACpDgB,MAAMlC,IAAI,CAACqC,SAAS,OAAGzC,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBmC,gBACCD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAAA,AAAQ,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAE+DgC;QAD/E,oDAAoD;QACpDA,MAAMhC,MAAM,CAACmC,SAAS,OAAGzC,mBAAAA,EAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,EAAA,CAAEW,gBAAAA,MAAMhC,MAAAA,AAAM,MAAA,QAAZgC,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAMtB+B;QALF,oDAAoD;QACpDA,MAAM/B,cAAc,CAACkC,SAAS,OAAGzC,mBAAAA,EAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,EAAA,CACxDa,wBAAAA,MAAM/B,cAAAA,AAAc,MAAA,QAApB+B,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}
@@ -23,7 +23,6 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
23
23
  const _Videostyles = require("./Video.styles");
24
24
  const videoClassName = 'fui-Video';
25
25
  const Video = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
26
- 'use no memo';
27
26
  const { className, muted, ...rest } = props;
28
27
  const videoRef = _react.useRef(null);
29
28
  const classes = (0, _Videostyles.useVideoStyles)();
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /**\n * The source URL of the video\n */\n src: string;\n\n /**\n * Whether the video should start playing automatically\n * @default false\n */\n autoPlay?: boolean;\n\n /**\n * Whether the video should display controls\n * @default true\n */\n controls?: boolean;\n\n /**\n * Whether the video should loop\n */\n loop?: boolean;\n\n /**\n * Whether the video should be muted\n */\n muted?: boolean;\n\n /**\n * The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n 'use no memo';\n\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>(null);\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;;;;;;;;;;;;IA6CaK,KAAAA;;;kBAvCAD;;;;;iCAJ+B,6BAA6B;iEAClD,QAAQ;6BACA,iBAAiB;AAEzC,MAAMA,iBAAiB,YAAY;AAuCnC,cAAMC,WAAAA,GAAQH,OAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,OAAMW,MAAM,CAAmB;IAEhD,MAAMC,cAAUX,2BAAAA;IAChBD,OAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,OAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,OAAA,WAAA,GACE,OAAA,aAAA,CAACQ,SAAAA;QACCV,SAAKP,8BAAAA,EAAcO,KAAKI;QACxBO,MAAK;QACLV,eAAWT,6BAAAA,EAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /**\n * The source URL of the video\n */\n src: string;\n\n /**\n * Whether the video should start playing automatically\n * @default false\n */\n autoPlay?: boolean;\n\n /**\n * Whether the video should display controls\n * @default true\n */\n controls?: boolean;\n\n /**\n * Whether the video should loop\n */\n loop?: boolean;\n\n /**\n * Whether the video should be muted\n */\n muted?: boolean;\n\n /**\n * The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>(null);\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;;;;;;;;;;;;IA6CaK,KAAAA;;;kBAvCAD;;;;;iCAJ+B,6BAA6B;iEAClD,QAAQ;6BACA,iBAAiB;AAEzC,MAAMA,iBAAiB,YAAY;AAuCnC,cAAMC,WAAAA,GAAQH,OAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,OAAMW,MAAM,CAAmB;IAEhD,MAAMC,cAAUX,2BAAAA;IAChBD,OAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,OAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,OAAA,WAAA,GACE,OAAA,aAAA,CAACQ,SAAAA;QACCV,SAAKP,8BAAAA,EAAcO,KAAKI;QACxBO,MAAK;QACLV,eAAWT,6BAAAA,EAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,WAAW,GAAG"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-migration-v0-v9",
3
- "version": "9.6.30",
3
+ "version": "9.6.32",
4
4
  "description": "Migration shim components and methods for hybrid v0/v9 applications building on Fluent UI React.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,15 +12,15 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui/react-aria": "^9.17.12",
16
- "@fluentui/react-components": "^9.74.1",
17
- "@fluentui/react-context-selector": "^9.2.17",
15
+ "@fluentui/react-aria": "^9.17.13",
16
+ "@fluentui/react-components": "^9.74.3",
17
+ "@fluentui/react-context-selector": "^9.2.18",
18
18
  "@fluentui/react-icons": "^2.0.245",
19
- "@fluentui/react-jsx-runtime": "^9.4.3",
19
+ "@fluentui/react-jsx-runtime": "^9.4.4",
20
20
  "@fluentui/react-shared-contexts": "^9.26.2",
21
- "@fluentui/react-tabster": "^9.26.15",
21
+ "@fluentui/react-tabster": "^9.26.16",
22
22
  "@fluentui/react-theme": "^9.2.1",
23
- "@fluentui/react-utilities": "^9.26.4",
23
+ "@fluentui/react-utilities": "^9.26.5",
24
24
  "@griffel/react": "^1.5.32",
25
25
  "@swc/helpers": "^0.5.1"
26
26
  },