npm - @fluentui/react-table - Versions diffs - 9.19.15 → 9.19.16 - Mend

@fluentui/react-table 9.19.15 → 9.19.16

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.

Files changed (150) hide show

package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTableRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle({\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ...createCustomFocusIndicatorStyle({\n outline: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n },\n rootInteractive: {\n ...createCustomFocusIndicatorStyle({\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n medium: {\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n },\n small: {\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n },\n 'extra-small': {\n fontSize: tokens.fontSizeBase200\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1\n },\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n }\n },\n neutral: {\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n },\n none: {}\n});\n/\n Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","Bahaeuw","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","medium","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","wmvzou","sc4o1m","wymq9i","u9orzk","puiv5t","Bosien3","b2z72d","Beulxaw","B57pkaw","Jcjdmf","B8qgbzl","Bbmb0sr","B14q8qp","Bcq6wej","Byz1pjr","kr9cjb","Ff9ifp","Bmclvqj","psczho","B0tx59b","sk7i8k","zlwzm7","Bkp2nk","gy0h4g","neutral","none","p","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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~~IACDyE~~,KAAK,CAAC7E,IAAI,CAACkF,SAAS,OAAG1F,mBAAY,EAACO,kBAAkB,CAACC,IAAI,EAAE8E,MAAM,CAAC9E,IAAI,EAAE,CAAC6E,KAAK,CAACM,WAAW,IAAIL,MAAM,CAAC1D,eAAe,EAAE0D,MAAM,CAACD,KAAK,CAACO,IAAI,CAAC,EAAEP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACjF,IAAI,GAAG+E,YAAY,CAACC,KAAK,CAAChF,IAAI,EAAE8E,MAAM,CAACD,KAAK,CAACS,UAAU,CAAC,EAAET,KAAK,CAAC7E,IAAI,CAACkF,SAAS,CAAC;IACtQ,OAAOL,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useTableRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle({\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ...createCustomFocusIndicatorStyle({\n outline: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n },\n rootInteractive: {\n ...createCustomFocusIndicatorStyle({\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n medium: {\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n },\n small: {\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n },\n 'extra-small': {\n fontSize: tokens.fontSizeBase200\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1\n },\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n }\n },\n neutral: {\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n },\n none: {}\n});\n/\n Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","Bahaeuw","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","medium","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","wmvzou","sc4o1m","wymq9i","u9orzk","puiv5t","Bosien3","b2z72d","Beulxaw","B57pkaw","Jcjdmf","B8qgbzl","Bbmb0sr","B14q8qp","Bcq6wej","Byz1pjr","kr9cjb","Ff9ifp","Bmclvqj","psczho","B0tx59b","sk7i8k","zlwzm7","Bkp2nk","gy0h4g","neutral","none","p","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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"}

package/lib-commonjs/components/TableRow/useTableRowStyles.styles.raw.js CHANGED Viewed

@@ -149,6 +149,7 @@ const useTableRowStyles_unstable = (state)=>{
         table: useTableLayoutStyles(),
         flex: useFlexLayoutStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);
     return state;
 };

package/lib-commonjs/components/TableRow/useTableRowStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TableRow/useTableRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n { selector: 'focus' },\n ),\n },\n\n rootInteractive: {\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n medium: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },\n\n small: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },\n\n 'extra-small': {\n fontSize: tokens.fontSizeBase200,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1,\n },\n\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n },\n\n neutral: {\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n },\n\n none: {},\n});\n\n/\n Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableRowClassNames.root,\n styles.root,\n !state.isHeaderRow && styles.rootInteractive,\n styles[state.size],\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n styles[state.appearance],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","display","useFlexLayoutStyles","alignItems","useStyles","color","colorNeutralForeground1","boxSizing","opacity","selector","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","rootInteractive","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground1Pressed","colorSubtleBackgroundHover","colorNeutralForeground1Hover","borderColor","medium","borderBottom","strokeWidthThin","colorNeutralStroke2","small","fontSize","fontSizeBase200","brand","colorBrandBackground2","colorTransparentStrokeInteractive","border","outlineOffset","neutral","colorSubtleBackgroundSelected","colorNeutralStrokeOnBrand","none","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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~~IACAoC~~,MAAMvC,IAAI,CAAC4C,SAAS,OAAGpD,mBAAAA,EACrBO,mBAAmBC,IAAI,EACvBwC,OAAOxC,IAAI,EACX,CAACuC,MAAMM,WAAW,IAAIL,OAAOzB,eAAe,EAC5CyB,MAAM,CAACD,MAAMO,IAAI,CAAC,EAClBP,MAAMQ,gBAAgB,GAAGN,aAAaE,IAAI,CAAC3C,IAAI,GAAGyC,aAAaC,KAAK,CAAC1C,IAAI,EACzEwC,MAAM,CAACD,MAAMS,UAAU,CAAC,EACxBT,MAAMvC,IAAI,CAAC4C,SAAS;IAGtB,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TableRow/useTableRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n { selector: 'focus' },\n ),\n },\n\n rootInteractive: {\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n medium: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },\n\n small: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },\n\n 'extra-small': {\n fontSize: tokens.fontSizeBase200,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1,\n },\n\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n },\n\n neutral: {\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n },\n\n none: {},\n});\n\n/\n Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n tableRowClassNames.root,\n styles.root,\n !state.isHeaderRow && styles.rootInteractive,\n styles[state.size],\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n styles[state.appearance],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","display","useFlexLayoutStyles","alignItems","useStyles","color","colorNeutralForeground1","boxSizing","opacity","selector","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","rootInteractive","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground1Pressed","colorSubtleBackgroundHover","colorNeutralForeground1Hover","borderColor","medium","borderBottom","strokeWidthThin","colorNeutralStroke2","small","fontSize","fontSizeBase200","brand","colorBrandBackground2","colorTransparentStrokeInteractive","border","outlineOffset","neutral","colorSubtleBackgroundSelected","colorNeutralStrokeOnBrand","none","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"mappings":"AAAA;;;;;;;;;;;;IAUaO,iBAAAA;;;IACAC,kBAAAA;;;IAkIAuC,0BAAAA;;;;uBA3IwC,iBAAiB;4BAC/C,wBAAwB;iDAGJ,uDAAuD;mDACrD,2DAA2D;8BACxD,0BAA0B;AAEnE,0BAA0B,eAAe;AACzC,2BAA0D;IAC/DtC,MAAMF;AACR,EAAE;AAEF,MAAMG,uBAAuBV,qBAAAA,EAAW;IACtCS,MAAM;QACJE,SAAS;IACX;AACF;AAEA,MAAMC,0BAAsBZ,iBAAAA,EAAW;IACrCS,MAAM;QACJE,SAAS;QACTE,YAAY;IACd;AACF;AAEA;;CAEC,GACD,MAAMC,YAAYd,qBAAAA,EAAW;IAC3BS,MAAM;QACJM,OAAOZ,kBAAAA,CAAOa,uBAAuB;QACrCC,WAAW;QACX,OAAGX,6CAAAA,EACD;YACE,CAAC,CAAC,GAAG,EAAED,+DAAAA,CAA6BI,IAAI,EAAE,CAAC,EAAE;gBAC3CS,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEd,2DAAAA,CAA2BK,IAAI,EAAE,CAAC,EAAE;gBACzCS,SAAS;YACX;QACF,GACA;YAAEC,UAAU;QAAe,EAC5B;QACD,OAAGb,6CAAAA,EACD;YAAEc,SAAS,CAAC,UAAU,EAAEjB,kBAAAA,CAAOkB,iBAAiB,EAAE;YAAEC,cAAcnB,kBAAAA,CAAOoB,kBAAkB;QAAC,GAC5F;YAAEJ,UAAU;QAAQ,EACrB;IACH;IAEAK,iBAAiB;QACf,OAAGlB,6CAAAA,EACD;YACE,CAAC,CAAC,GAAG,EAAEF,2DAAAA,CAA2BK,IAAI,EAAE,CAAC,EAAE;gBACzCS,SAAS;YACX;QACF,GACA;YAAEC,UAAU;QAAe,EAC5B;QACD,WAAW;YACTM,iBAAiBtB,kBAAAA,CAAOuB,4BAA4B;YACpDX,OAAOZ,kBAAAA,CAAOwB,8BAA8B;YAC5C,CAAC,CAAC,GAAG,EAAEvB,2DAAAA,CAA2BK,IAAI,EAAE,CAAC,EAAE;gBACzCS,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEb,+DAAAA,CAA6BI,IAAI,EAAE,CAAC,EAAE;gBAC3CS,SAAS;YACX;QACF;QACA,UAAU;YACRO,iBAAiBtB,kBAAAA,CAAOyB,0BAA0B;YAClDb,OAAOZ,kBAAAA,CAAO0B,4BAA4B;YAC1C,CAAC,CAAC,GAAG,EAAEzB,2DAAAA,CAA2BK,IAAI,EAAE,CAAC,EAAE;gBACzCS,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEb,+DAAAA,CAA6BI,IAAI,EAAE,CAAC,EAAE;gBAC3CS,SAAS;YACX;QACF;QACA,uBAAuB;QACvB,kCAAkC;YAChC,UAAU;gBACRH,OAAO;gBACP,GAAGb,iBAAAA,CAAW4B,WAAW,CAAC,YAAY;YACxC;QACF;IACF;IAEAC,QAAQ;QAAEC,cAAc,GAAG7B,kBAAAA,CAAO8B,eAAe,CAAC,OAAO,EAAE9B,kBAAAA,CAAO+B,mBAAmB,EAAE;IAAC;IAExFC,OAAO;QAAEH,cAAc,GAAG7B,kBAAAA,CAAO8B,eAAe,CAAC,OAAO,EAAE9B,kBAAAA,CAAO+B,mBAAmB,EAAE;IAAC;IAEvF,eAAe;QACbE,UAAUjC,kBAAAA,CAAOkC,eAAe;IAClC;IAEAC,OAAO;QACLb,iBAAiBtB,kBAAAA,CAAOoC,qBAAqB;QAC7C,GAAGrC,iBAAAA,CAAW4B,WAAW,CAAC3B,kBAAAA,CAAOqC,iCAAiC,CAAC;QACnE,WAAW;YACTf,iBAAiBtB,kBAAAA,CAAOoC,qBAAqB;YAC7CxB,OAAOZ,kBAAAA,CAAOa,uBAAuB;QACvC;QAEA,iCAAiC;YAC/ByB,QAAQ;YACRnB,cAAcnB,kBAAAA,CAAOoB,kBAAkB;YACvCN,WAAW;YACX,kBAAkB;gBAChByB,eAAe;YACjB;QACF;IACF;IAEAC,SAAS;QACP,iCAAiC;YAC/BF,QAAQ;YACRnB,cAAcnB,kBAAAA,CAAOoB,kBAAkB;YACvCN,WAAW;YACX,kBAAkB;gBAChByB,eAAe;YACjB;QACF;QACAjB,iBAAiBtB,kBAAAA,CAAOyC,6BAA6B;QACrD7B,OAAOZ,kBAAAA,CAAO0B,4BAA4B;QAE1C,WAAW;YACTJ,iBAAiBtB,kBAAAA,CAAOyC,6BAA6B;QACvD;QAEA,GAAG1C,iBAAAA,CAAW4B,WAAW,CAAC3B,kBAAAA,CAAO0C,yBAAyB,CAAC;IAC7D;IAEAC,MAAM,CAAC;AACT;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,SAASnC;IACf,MAAMoC,eAAe;QACnBC,OAAOzC;QACP0C,MAAMxC;IACR;IACA,oDAAoD;IACpDoC,MAAMvC,IAAI,CAAC4C,SAAS,OAAGpD,mBAAAA,EACrBO,mBAAmBC,IAAI,EACvBwC,OAAOxC,IAAI,EACX,CAACuC,MAAMM,WAAW,IAAIL,OAAOzB,eAAe,EAC5CyB,MAAM,CAACD,MAAMO,IAAI,CAAC,EAClBP,MAAMQ,gBAAgB,GAAGN,aAAaE,IAAI,CAAC3C,IAAI,GAAGyC,aAAaC,KAAK,CAAC1C,IAAI,EACzEwC,MAAM,CAACD,MAAMS,UAAU,CAAC,EACxBT,MAAMvC,IAAI,CAAC4C,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.js CHANGED Viewed

@@ -134,11 +134,14 @@ const useTableSelectionCellStyles_unstable = (state)=>{
         table: useTableLayoutStyles(),
         flex: useFlexLayoutStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);
     if (state.checkboxIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkboxIndicator.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
     }
     if (state.radioIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.radioIndicator.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);
     }
     return state;

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: `${CELL_WIDTH}px`\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n flex: '1 1 0px',\n minWidth: `${CELL_WIDTH}px`,\n maxWidth: `${CELL_WIDTH}px`,\n justifyContent: 'center'\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n padding: '0',\n ...createCustomFocusIndicatorStyle({\n outline: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n },\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center'\n },\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle({\n opacity: 1\n }, {\n selector: 'focus-within'\n })\n },\n hidden: {\n opacity: 0\n }\n});\n/\n Apply styling to the TableSelectionCell slots based on the state\n */ export const useTableSelectionCellStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);\n if (state.checkboxIndicator) {\n state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n }\n if (state.radioIndicator) {\n state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","mc9l5x","a9b677","d","useFlexLayoutStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","Bf4jedk","B2u0y6b","Brf1p80","p","useStyles","fsow6f","Huce71","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bt984gj","subtle","abs64n","B8a84jv","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","checked"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,UAAU;;;gCACkB;;;wCAsDY;eAApCwC;;;uBA1DwB,gBAAgB;AAGlD,mBAAmB,EAAE;AACrB,MAAMvC,+BAA+B;IACxCC,IAAI,EAAE,wBAAwB;IAC9BC,iBAAiB,EAAE,2CAA2C;IAC9DC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAK5B,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGb,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAI,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAR,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAS,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQ3B,CAAC;AACF;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGtB,mBAAA,EAAA;IAAAM,IAAA,EAAA;QAAAiB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA9B,cAAA,EAAA;QAAAE,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAwB,OAAA,EAAA;QAAAnB,OAAA,EAAA;IAAA;IAAAoB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA7B,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAS,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA6BrB,CAAC;AAGS,8CAA8CwB,KAAK,IAAG;IAC7D,aAAa;IACb,MAAMC,MAAM,GAAGxB,SAAS,CAAC,CAAC;IAC1B,MAAMyB,YAAY,GAAG;QACjBC,KAAK,EAAEvC,oBAAoB,CAAC,CAAC;QAC7BwC,IAAI,EAAEpC,mBAAmB,CAAC;IAC9B,CAAC;~~IACDgC~~,KAAK,CAACvC,IAAI,CAAC4C,SAAS,OAAGjD,mBAAY,EAACI,4BAA4B,CAACC,IAAI,EAAEwC,MAAM,CAACxC,IAAI,EAAEuC,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAAC3C,IAAI,GAAGyC,YAAY,CAACC,KAAK,CAAC1C,IAAI,EAAEuC,KAAK,CAACL,MAAM,IAAIK,KAAK,CAACO,OAAO,KAAK,KAAK,IAAIN,MAAM,CAACN,MAAM,EAAEK,KAAK,CAACF,MAAM,IAAIG,MAAM,CAACH,MAAM,EAAEE,KAAK,CAACvC,IAAI,CAAC4C,SAAS,CAAC;IAC7Q,IAAIL,KAAK,CAACtC,iBAAiB,EAAE;~~QACzBsC~~,KAAK,CAACtC,iBAAiB,CAAC2C,SAAS,OAAGjD,mBAAY,EAACI,4BAA4B,CAACE,iBAAiB,EAAEsC,KAAK,CAACtC,iBAAiB,CAAC2C,SAAS,CAAC;IACvI;IACA,IAAIL,KAAK,CAACrC,cAAc,EAAE;~~QACtBqC~~,KAAK,CAACrC,cAAc,CAAC0C,SAAS,OAAGjD,mBAAY,EAACI,4BAA4B,CAACG,cAAc,EAAEsC,MAAM,CAACtC,cAAc,EAAEqC,KAAK,CAACrC,cAAc,CAAC0C,SAAS,CAAC;IACrJ;IACA,OAAOL,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: `${CELL_WIDTH}px`\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n flex: '1 1 0px',\n minWidth: `${CELL_WIDTH}px`,\n maxWidth: `${CELL_WIDTH}px`,\n justifyContent: 'center'\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n padding: '0',\n ...createCustomFocusIndicatorStyle({\n outline: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n },\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center'\n },\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle({\n opacity: 1\n }, {\n selector: 'focus-within'\n })\n },\n hidden: {\n opacity: 0\n }\n});\n/\n Apply styling to the TableSelectionCell slots based on the state\n */ export const useTableSelectionCellStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);\n if (state.checkboxIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n }\n if (state.radioIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","mc9l5x","a9b677","d","useFlexLayoutStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","Bf4jedk","B2u0y6b","Brf1p80","p","useStyles","fsow6f","Huce71","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bt984gj","subtle","abs64n","B8a84jv","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","checked"],"mappings":"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"}

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.raw.js CHANGED Viewed

@@ -83,11 +83,14 @@ const useTableSelectionCellStyles_unstable = (state)=>{
         table: useTableLayoutStyles(),
         flex: useFlexLayoutStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);
     if (state.checkboxIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkboxIndicator.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
     }
     if (state.radioIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.radioIndicator.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);
     }
     return state;

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const CELL_WIDTH = 44;\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: `${CELL_WIDTH}px`,\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n flex: '1 1 0px',\n minWidth: `${CELL_WIDTH}px`,\n maxWidth: `${CELL_WIDTH}px`,\n justifyContent: 'center',\n },\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n padding: '0',\n ...createCustomFocusIndicatorStyle(\n { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n { selector: 'focus' },\n ),\n },\n\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle(\n {\n opacity: 1,\n },\n { selector: 'focus-within' },\n ),\n },\n\n hidden: {\n opacity: 0,\n },\n});\n\n/\n Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableSelectionCellClassNames.root,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.subtle && state.checked === false && styles.subtle,\n state.hidden && styles.hidden,\n state.root.className,\n );\n if (state.checkboxIndicator) {\n state.checkboxIndicator.className = mergeClasses(\n tableSelectionCellClassNames.checkboxIndicator,\n state.checkboxIndicator.className,\n );\n }\n\n if (state.radioIndicator) {\n state.radioIndicator.className = mergeClasses(\n tableSelectionCellClassNames.radioIndicator,\n styles.radioIndicator,\n state.radioIndicator.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","display","width","useFlexLayoutStyles","flex","minWidth","maxWidth","justifyContent","useStyles","textAlign","whiteSpace","padding","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","flexGrow","alignItems","subtle","opacity","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements","checked"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,UAAAA;;;gCAEAC;;;~~IA8DA0B,oCAAAA;;;;~~uBAtE4B,iBAAiB;8BAGV,0BAA0B;4BACnD,wBAAwB;AAExC,mBAAmB,GAAG;AAEtB,MAAM1B,+BAAwE;IACnFC,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,2BAAuBT,iBAAAA,EAAW;IACtCM,MAAM;QACJI,SAAS;QACTC,OAAO,GAAGP,WAAW,EAAE,CAAC;IAC1B;AACF;AAEA,MAAMQ,0BAAsBZ,iBAAAA,EAAW;IACrCM,MAAM;QACJI,SAAS;QACTG,MAAM;QACNC,UAAU,GAAGV,WAAW,EAAE,CAAC;QAC3BW,UAAU,GAAGX,WAAW,EAAE,CAAC;QAC3BY,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAYjB,iBAAAA,EAAW;IAC3BM,MAAM;QACJY,WAAW;QACXC,YAAY;QACZC,SAAS;QACT,OAAGlB,6CAAAA,EACD;YAAEmB,SAAS,CAAC,UAAU,EAAElB,kBAAAA,CAAOmB,iBAAiB,EAAE;YAAEC,cAAcpB,kBAAAA,CAAOqB,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAQ,EACrB;IACH;IAEAjB,gBAAgB;QACdE,SAAS;QACTgB,UAAU;QACVC,YAAY;QACZX,gBAAgB;IAClB;IAEAY,QAAQ;QACNC,SAAS;QACT,OAAG3B,6CAAAA,EACD;YACE2B,SAAS;QACX,GACA;YAAEJ,UAAU;QAAe,EAC5B;IACH;IAEAK,QAAQ;QACND,SAAS;IACX;AACF;AAKO,6CAA6C,CAACG;IACnD;IAEA,MAAMC,SAAShB;IACf,MAAMiB,eAAe;QACnBC,OAAO1B;QACPI,MAAMD;IACR;~~IACAoB~~,MAAM1B,IAAI,CAAC8B,SAAS,OAAGnC,mBAAAA,EACrBI,6BAA6BC,IAAI,EACjC2B,OAAO3B,IAAI,EACX0B,MAAMK,gBAAgB,GAAGH,aAAarB,IAAI,CAACP,IAAI,GAAG4B,aAAaC,KAAK,CAAC7B,IAAI,EACzE0B,MAAMJ,MAAM,IAAII,MAAMM,OAAO,KAAK,SAASL,OAAOL,MAAM,EACxDI,MAAMF,MAAM,IAAIG,OAAOH,MAAM,EAC7BE,MAAM1B,IAAI,CAAC8B,SAAS;IAEtB,IAAIJ,MAAMzB,iBAAiB,EAAE;~~QAC3ByB~~,MAAMzB,iBAAiB,CAAC6B,SAAS,OAAGnC,mBAAAA,EAClCI,6BAA6BE,iBAAiB,EAC9CyB,MAAMzB,iBAAiB,CAAC6B,SAAS;IAErC;IAEA,IAAIJ,MAAMxB,cAAc,EAAE;~~QACxBwB~~,MAAMxB,cAAc,CAAC4B,SAAS,OAAGnC,mBAAAA,EAC/BI,6BAA6BG,cAAc,EAC3CyB,OAAOzB,cAAc,EACrBwB,MAAMxB,cAAc,CAAC4B,SAAS;IAElC;IAEA,OAAOJ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const CELL_WIDTH = 44;\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: `${CELL_WIDTH}px`,\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n flex: '1 1 0px',\n minWidth: `${CELL_WIDTH}px`,\n maxWidth: `${CELL_WIDTH}px`,\n justifyContent: 'center',\n },\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n padding: '0',\n ...createCustomFocusIndicatorStyle(\n { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n { selector: 'focus' },\n ),\n },\n\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle(\n {\n opacity: 1,\n },\n { selector: 'focus-within' },\n ),\n },\n\n hidden: {\n opacity: 0,\n },\n});\n\n/\n Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n tableSelectionCellClassNames.root,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.subtle && state.checked === false && styles.subtle,\n state.hidden && styles.hidden,\n state.root.className,\n );\n if (state.checkboxIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkboxIndicator.className = mergeClasses(\n tableSelectionCellClassNames.checkboxIndicator,\n state.checkboxIndicator.className,\n );\n }\n\n if (state.radioIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.radioIndicator.className = mergeClasses(\n tableSelectionCellClassNames.radioIndicator,\n styles.radioIndicator,\n state.radioIndicator.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","display","width","useFlexLayoutStyles","flex","minWidth","maxWidth","justifyContent","useStyles","textAlign","whiteSpace","padding","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","flexGrow","alignItems","subtle","opacity","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements","checked"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,UAAAA;;;gCAEAC;;;wCA8DA0B;eAAAA;;;uBAtE4B,iBAAiB;8BAGV,0BAA0B;4BACnD,wBAAwB;AAExC,mBAAmB,GAAG;AAEtB,MAAM1B,+BAAwE;IACnFC,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,2BAAuBT,iBAAAA,EAAW;IACtCM,MAAM;QACJI,SAAS;QACTC,OAAO,GAAGP,WAAW,EAAE,CAAC;IAC1B;AACF;AAEA,MAAMQ,0BAAsBZ,iBAAAA,EAAW;IACrCM,MAAM;QACJI,SAAS;QACTG,MAAM;QACNC,UAAU,GAAGV,WAAW,EAAE,CAAC;QAC3BW,UAAU,GAAGX,WAAW,EAAE,CAAC;QAC3BY,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAYjB,iBAAAA,EAAW;IAC3BM,MAAM;QACJY,WAAW;QACXC,YAAY;QACZC,SAAS;QACT,OAAGlB,6CAAAA,EACD;YAAEmB,SAAS,CAAC,UAAU,EAAElB,kBAAAA,CAAOmB,iBAAiB,EAAE;YAAEC,cAAcpB,kBAAAA,CAAOqB,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAQ,EACrB;IACH;IAEAjB,gBAAgB;QACdE,SAAS;QACTgB,UAAU;QACVC,YAAY;QACZX,gBAAgB;IAClB;IAEAY,QAAQ;QACNC,SAAS;QACT,OAAG3B,6CAAAA,EACD;YACE2B,SAAS;QACX,GACA;YAAEJ,UAAU;QAAe,EAC5B;IACH;IAEAK,QAAQ;QACND,SAAS;IACX;AACF;AAKO,6CAA6C,CAACG;IACnD;IAEA,MAAMC,SAAShB;IACf,MAAMiB,eAAe;QACnBC,OAAO1B;QACPI,MAAMD;IACR;IACA,oDAAoD;IACpDoB,MAAM1B,IAAI,CAAC8B,SAAS,OAAGnC,mBAAAA,EACrBI,6BAA6BC,IAAI,EACjC2B,OAAO3B,IAAI,EACX0B,MAAMK,gBAAgB,GAAGH,aAAarB,IAAI,CAACP,IAAI,GAAG4B,aAAaC,KAAK,CAAC7B,IAAI,EACzE0B,MAAMJ,MAAM,IAAII,MAAMM,OAAO,KAAK,SAASL,OAAOL,MAAM,EACxDI,MAAMF,MAAM,IAAIG,OAAOH,MAAM,EAC7BE,MAAM1B,IAAI,CAAC8B,SAAS;IAEtB,IAAIJ,MAAMzB,iBAAiB,EAAE;QAC3B,oDAAoD;QACpDyB,MAAMzB,iBAAiB,CAAC6B,SAAS,OAAGnC,mBAAAA,EAClCI,6BAA6BE,iBAAiB,EAC9CyB,MAAMzB,iBAAiB,CAAC6B,SAAS;IAErC;IAEA,IAAIJ,MAAMxB,cAAc,EAAE;QACxB,oDAAoD;QACpDwB,MAAMxB,cAAc,CAAC4B,SAAS,OAAGnC,mBAAAA,EAC/BI,6BAA6BG,cAAc,EAC3CyB,OAAOzB,cAAc,EACrBwB,MAAMxB,cAAc,CAAC4B,SAAS;IAElC;IAEA,OAAOJ;AACT,EAAE"}

package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js CHANGED Viewed

@@ -43,6 +43,7 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
     ]);
     const onDragEnd = _react.useCallback((event)=>{
         if ((0, _reactutilities.isMouseEvent)(event)) {
+            // eslint-disable-next-line react-hooks/immutability
             targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);
             targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);
         }

package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent } from '@fluentui/react-utilities';\nimport { getEventClientCoords, isMouseEvent, isTouchEvent, useAnimationFrame } from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState): {\n getOnMouseDown: (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => void;\n dragging: boolean;\n} {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId \| undefined>(undefined);\n const [dragging, setDragging] = React.useState<boolean>(false);\n\n const { targetDocument } = useFluent();\n\n const { getColumnWidth, setColumnWidth } = columnResizeState;\n\n const recalculatePosition = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n const { clientX } = getEventClientCoords(e);\n const dx = clientX - mouseX.current;\n\n // Update the local width for the column and set it\n currentWidth.current += dx;\n colId.current && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n mouseX.current = clientX;\n },\n [setColumnWidth],\n );\n\n const [requestRecalcFrame] = useAnimationFrame();\n\n const onDrag = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n requestRecalcFrame(() => recalculatePosition(e));\n },\n [requestRecalcFrame, recalculatePosition],\n );\n\n const onDragEnd = React.useCallback(\n (event: NativeTouchOrMouseEvent) => {\n if (isMouseEvent(event)) {\n targetDocument?.removeEventListener('mouseup', onDragEnd);\n targetDocument?.removeEventListener('mousemove', onDrag);\n }\n if (isTouchEvent(event)) {\n targetDocument?.removeEventListener('touchend', onDragEnd);\n targetDocument?.removeEventListener('touchmove', onDrag);\n }\n setDragging(false);\n },\n [onDrag, targetDocument],\n );\n\n const getOnMouseDown = React.useCallback(\n (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n // Keep the width locally so that we decouple the calculation of the next with from rendering.\n // This makes the whole experience much faster and more precise\n currentWidth.current = getColumnWidth(columnId);\n mouseX.current = getEventClientCoords(event).clientX;\n colId.current = columnId;\n\n if (isMouseEvent(event)) {\n // ignore other buttons than primary mouse button\n if (event.target !== event.currentTarget \|\| event.button !== 0) {\n return;\n }\n targetDocument?.addEventListener('mouseup', onDragEnd);\n targetDocument?.addEventListener('mousemove', onDrag);\n setDragging(true);\n }\n\n if (isTouchEvent(event)) {\n targetDocument?.addEventListener('touchend', onDragEnd);\n targetDocument?.addEventListener('touchmove', onDrag);\n setDragging(true);\n }\n },\n [getColumnWidth, onDrag, onDragEnd, targetDocument],\n );\n\n return {\n getOnMouseDown,\n dragging,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useAnimationFrame","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","requestRecalcFrame","onDrag","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"AAAA;;;;;+BAQgBO;;;;;;;iEANO,QAAQ;qCAEiB,kCAAkC;gCAEE,4BAA4B;AAEzG,0CAA0CC,iBAAoC;IAInF,MAAMC,SAAST,OAAMU,MAAM,CAAC;IAC5B,MAAMC,eAAeX,OAAMU,MAAM,CAAC;IAClC,MAAME,QAAQZ,OAAMU,MAAM,CAA4BG;IACtD,MAAM,CAACC,UAAUC,YAAY,GAAGf,OAAMgB,QAAQ,CAAU;IAExD,MAAM,EAAEC,cAAc,EAAE,OAAGf,uCAAAA;IAE3B,MAAM,EAAEgB,cAAc,EAAEC,cAAc,EAAE,GAAGX;IAE3C,MAAMY,sBAAsBpB,OAAMqB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,OAAGpB,oCAAAA,EAAqBmB;QACzC,MAAME,KAAKD,UAAUd,OAAOgB,OAAO;QAEnC,mDAAmD;QACnDd,aAAac,OAAO,IAAID;QACxBZ,MAAMa,OAAO,IAAIN,eAAeG,GAAG;YAAEI,UAAUd,MAAMa,OAAO;YAAEE,OAAOhB,aAAac,OAAO;QAAC;QAC1FhB,OAAOgB,OAAO,GAAGF;IACnB,GACA;QAACJ;KAAe;IAGlB,MAAM,CAACS,mBAAmB,OAAGtB,iCAAAA;IAE7B,MAAMuB,SAAS7B,OAAMqB,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3FM,mBAAmB,IAAMR,oBAAoBE;IAC/C,GACA;QAACM;QAAoBR;KAAoB;IAG3C,MAAMU,YAAY9B,OAAMqB,WAAW,CACjC,CAACU;QACC,QAAI3B,4BAAAA,EAAa2B,QAAQ;~~YACvBd~~,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBe,mBAAmB,CAAC,WAAWF;YAC/Cb,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBe,mBAAmB,CAAC,aAAaH;QACnD;QACA,QAAIxB,4BAAAA,EAAa0B,QAAQ;YACvBd,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBe,mBAAmB,CAAC,YAAYF;YAChDb,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBe,mBAAmB,CAAC,aAAaH;QACnD;QACAd,YAAY;IACd,GACA;QAACc;QAAQZ;KAAe;IAG1B,MAAMgB,iBAAiBjC,OAAMqB,WAAW,CACtC,CAACK,WAA4B,CAACK;YAC5B,8FAA8F;YAC9F,+DAA+D;YAC/DpB,aAAac,OAAO,GAAGP,eAAeQ;YACtCjB,OAAOgB,OAAO,OAAGtB,oCAAAA,EAAqB4B,OAAOR,OAAO;YACpDX,MAAMa,OAAO,GAAGC;YAEhB,QAAItB,4BAAAA,EAAa2B,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,IAAIJ,MAAMK,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACAnB,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoB,gBAAgB,CAAC,WAAWP;gBAC5Cb,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoB,gBAAgB,CAAC,aAAaR;gBAC9Cd,YAAY;YACd;YAEA,QAAIV,4BAAAA,EAAa0B,QAAQ;gBACvBd,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoB,gBAAgB,CAAC,YAAYP;gBAC7Cb,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoB,gBAAgB,CAAC,aAAaR;gBAC9Cd,YAAY;YACd;QACF,GACA;QAACG;QAAgBW;QAAQC;QAAWb;KAAe;IAGrD,OAAO;QACLgB;QACAnB;IACF;AACF"}
1	+ {"version":3,"sources":["../src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent } from '@fluentui/react-utilities';\nimport { getEventClientCoords, isMouseEvent, isTouchEvent, useAnimationFrame } from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState): {\n getOnMouseDown: (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => void;\n dragging: boolean;\n} {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId \| undefined>(undefined);\n const [dragging, setDragging] = React.useState<boolean>(false);\n\n const { targetDocument } = useFluent();\n\n const { getColumnWidth, setColumnWidth } = columnResizeState;\n\n const recalculatePosition = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n const { clientX } = getEventClientCoords(e);\n const dx = clientX - mouseX.current;\n\n // Update the local width for the column and set it\n currentWidth.current += dx;\n colId.current && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n mouseX.current = clientX;\n },\n [setColumnWidth],\n );\n\n const [requestRecalcFrame] = useAnimationFrame();\n\n const onDrag = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n requestRecalcFrame(() => recalculatePosition(e));\n },\n [requestRecalcFrame, recalculatePosition],\n );\n\n const onDragEnd = React.useCallback(\n (event: NativeTouchOrMouseEvent) => {\n if (isMouseEvent(event)) {\n // eslint-disable-next-line react-hooks/immutability\n targetDocument?.removeEventListener('mouseup', onDragEnd);\n targetDocument?.removeEventListener('mousemove', onDrag);\n }\n if (isTouchEvent(event)) {\n targetDocument?.removeEventListener('touchend', onDragEnd);\n targetDocument?.removeEventListener('touchmove', onDrag);\n }\n setDragging(false);\n },\n [onDrag, targetDocument],\n );\n\n const getOnMouseDown = React.useCallback(\n (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n // Keep the width locally so that we decouple the calculation of the next with from rendering.\n // This makes the whole experience much faster and more precise\n currentWidth.current = getColumnWidth(columnId);\n mouseX.current = getEventClientCoords(event).clientX;\n colId.current = columnId;\n\n if (isMouseEvent(event)) {\n // ignore other buttons than primary mouse button\n if (event.target !== event.currentTarget \|\| event.button !== 0) {\n return;\n }\n targetDocument?.addEventListener('mouseup', onDragEnd);\n targetDocument?.addEventListener('mousemove', onDrag);\n setDragging(true);\n }\n\n if (isTouchEvent(event)) {\n targetDocument?.addEventListener('touchend', onDragEnd);\n targetDocument?.addEventListener('touchmove', onDrag);\n setDragging(true);\n }\n },\n [getColumnWidth, onDrag, onDragEnd, targetDocument],\n );\n\n return {\n getOnMouseDown,\n dragging,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useAnimationFrame","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","requestRecalcFrame","onDrag","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"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"}

package/lib-commonjs/hooks/useTableFeatures.js CHANGED Viewed

@@ -59,5 +59,6 @@ function useTableFeatures(options, plugins = []) {
         columnSizing_unstable: _useTableColumnSizing.defaultColumnSizingState,
         tableRef: /*#__PURE__*/ _react.createRef()
     };
+    // eslint-disable-next-line react-hooks/refs
     return plugins.reduce((state, plugin)=>plugin(state), initialState);
 }

package/lib-commonjs/hooks/useTableFeatures.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useTableFeatures.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n UseTableFeaturesOptions,\n TableFeaturesState,\n TableRowData,\n RowEnhancer,\n TableFeaturePlugin,\n TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n selection: defaultTableSelectionState,\n sort: defaultTableSortState,\n getRows: () => [],\n getRowId: () => '',\n items: [],\n columns: [],\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: defaultColumnSizingState,\n tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n options: UseTableFeaturesOptions<TItem>,\n plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n const { items, getRowId, columns } = options;\n\n const getRows = React.useCallback(\n <TRowState extends TableRowData<TItem>>(rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>) => {\n return items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n },\n [items, getRowId],\n );\n\n const initialState: TableFeaturesState<TItem> = {\n getRowId,\n items,\n columns,\n getRows,\n selection: defaultTableSelectionState,\n sort: defaultTableSortState as TableSortState<TItem>,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: defaultColumnSizingState,\n tableRef: React.createRef(),\n };\n\n return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","useCallback","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA;;;;;;;;;;;;IAiBaM,iBAAAA;;;IAYGU,gBAAAA;;;;;iEA3BO,QAAQ;mCASY,sBAAsB;8BAC3B,iBAAiB;sCACd,yBAAyB;AAElE,MAAMZ,qBAAkEC,CAAAA,MAAOA;AAExE,0BAAuD;IAC5DE,WAAWN,6CAAAA;IACXO,MAAMN,mCAAAA;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV,8CAAAA;IACvBW,wBAAUd,OAAMe,SAAS;AAC3B,EAAE;AAEK,0BACLE,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;IAErC,MAAMR,UAAUT,OAAMmB,WAAW,CAC/B,CAAwCC,cAAchB,kBAAmD;QACvG,OAAOO,MAAMU,GAAG,CAAC,CAACC,MAAMC;gBAAiCb;mBAA3BU,YAAY;gBAAEE;gBAAME,OAAOd,CAAAA,YAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWY,KAAAA,MAAAA,QAAXZ,cAAAA,KAAAA,IAAAA,YAAoBa;YAAE;;IACjF,GACA;QAACZ;QAAOD;KAAS;IAGnB,MAAMe,eAA0C;QAC9Cf;QACAC;QACAC;QACAH;QACAF,WAAWN,6CAAAA;QACXO,MAAMN,mCAAAA;QACN,gEAAgE;QAChEW,uBAAuBV,8CAAAA;QACvBW,wBAAUd,OAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQQ,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D"}
1	+ {"version":3,"sources":["../src/hooks/useTableFeatures.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n UseTableFeaturesOptions,\n TableFeaturesState,\n TableRowData,\n RowEnhancer,\n TableFeaturePlugin,\n TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n selection: defaultTableSelectionState,\n sort: defaultTableSortState,\n getRows: () => [],\n getRowId: () => '',\n items: [],\n columns: [],\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: defaultColumnSizingState,\n tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n options: UseTableFeaturesOptions<TItem>,\n plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n const { items, getRowId, columns } = options;\n\n const getRows = React.useCallback(\n <TRowState extends TableRowData<TItem>>(rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>) => {\n return items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n },\n [items, getRowId],\n );\n\n const initialState: TableFeaturesState<TItem> = {\n getRowId,\n items,\n columns,\n getRows,\n selection: defaultTableSelectionState,\n sort: defaultTableSortState as TableSortState<TItem>,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: defaultColumnSizingState,\n tableRef: React.createRef(),\n };\n\n // eslint-disable-next-line react-hooks/refs\n return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","useCallback","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA;;;;;;;;;;;;IAiBaM,iBAAAA;;;IAYGU,gBAAAA;;;;;iEA3BO,QAAQ;mCASY,sBAAsB;8BAC3B,iBAAiB;sCACd,yBAAyB;AAElE,MAAMZ,qBAAkEC,CAAAA,MAAOA;AAExE,0BAAuD;IAC5DE,WAAWN,6CAAAA;IACXO,MAAMN,mCAAAA;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV,8CAAAA;IACvBW,wBAAUd,OAAMe,SAAS;AAC3B,EAAE;AAEK,0BACLE,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;IAErC,MAAMR,UAAUT,OAAMmB,WAAW,CAC/B,CAAwCC,cAAchB,kBAAmD;QACvG,OAAOO,MAAMU,GAAG,CAAC,CAACC,MAAMC;gBAAiCb;mBAA3BU,YAAY;gBAAEE;gBAAME,OAAOd,CAAAA,YAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWY,KAAAA,MAAAA,QAAXZ,cAAAA,KAAAA,IAAAA,YAAoBa;YAAE;;IACjF,GACA;QAACZ;QAAOD;KAAS;IAGnB,MAAMe,eAA0C;QAC9Cf;QACAC;QACAC;QACAH;QACAF,WAAWN,6CAAAA;QACXO,MAAMN,mCAAAA;QACN,gEAAgE;QAChEW,uBAAuBV,8CAAAA;QACvBW,wBAAUd,OAAMe,SAAS;IAC3B;IAEA,4CAA4C;IAC5C,OAAOG,QAAQQ,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.19.15",
+  "version": "9.19.16",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,17 +13,17 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.17.11",
-    "@fluentui/react-avatar": "^9.11.1",
-    "@fluentui/react-checkbox": "^9.6.1",
-    "@fluentui/react-context-selector": "^9.2.16",
+    "@fluentui/react-aria": "^9.17.12",
+    "@fluentui/react-avatar": "^9.11.2",
+    "@fluentui/react-checkbox": "^9.6.2",
+    "@fluentui/react-context-selector": "^9.2.17",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-radio": "^9.6.2",
+    "@fluentui/react-radio": "^9.6.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.14",
+    "@fluentui/react-tabster": "^9.26.15",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-utilities": "^9.26.4",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },