chore(react-table): adopt custom JSX pragma

change/@fluentui-react-table-d5632f83-3b3d-4361-80f7-a4af77760493.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adopt custom JSX pragma",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/package.json

@@ -43,6 +43,7 @@
     "@fluentui/react-tabster": "^9.6.4",
     "@fluentui/react-theme": "^9.1.7",
     "@fluentui/react-utilities": "^9.7.4",
+    "@fluentui/react-jsx-runtime": "^9.0.0-alpha.0",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx

@@ -1,13 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';
 import { TableRowIdContextProvider } from '../../contexts/rowIdContext';
 
 /**
  * Render the final JSX of DataGridBody
  */
 export const renderDataGridBody_unstable = (state: DataGridBodyState) => {
-  const { slots, slotProps } = getSlots<DataGridBodySlots>(state);
+  const { slots, slotProps } = getSlotsNext<DataGridBodySlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx

@@ -1,13 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';
 import { ColumnIdContextProvider } from '../../contexts/columnIdContext';
 
 /**
  * Render the final JSX of DataGridRow
  */
 export const renderDataGridRow_unstable = (state: DataGridRowState) => {
-  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);
+  const { slots, slotProps } = getSlotsNext<DataGridRowSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

packages/react-components/react-table/src/components/Table/renderTable.tsx

@@ -1,13 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TableState, TableSlots, TableContextValues } from './Table.types';
 import { TableContextProvider } from '../../contexts/tableContext';
 
 /**
  * Render the final JSX of Table
  */
 export const renderTable_unstable = (state: TableState, contextValues: TableContextValues) => {
-  const { slots, slotProps } = getSlots<TableSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableSlots>(state);
 
   return (
     <TableContextProvider value={contextValues.table}>

packages/react-components/react-table/src/components/TableBody/renderTableBody.tsx

@@ -1,12 +1,15 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TableBodyState, TableBodySlots } from './TableBody.types';
 
 /**
  * Render the final JSX of TableBody
  */
 export const renderTableBody_unstable = (state: TableBodyState) => {
-  const { slots, slotProps } = getSlots<TableBodySlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableBodySlots>(state);
 
   return <slots.root {...slotProps.root} />;
 };

packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx

@@ -1,12 +1,15 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TableCellState, TableCellSlots } from './TableCell.types';
 
 /**
  * Render the final JSX of TableCell
  */
 export const renderTableCell_unstable = (state: TableCellState) => {
-  const { slots, slotProps } = getSlots<TableCellSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableCellSlots>(state);
 
   return <slots.root {...slotProps.root} />;
 };

packages/react-components/react-table/src/components/TableCellActions/renderTableCellActions.tsx

@@ -1,12 +1,15 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TableCellActionsState, TableCellActionsSlots } from './TableCellActions.types';
 
 /**
  * Render the final JSX of TableCellActions
  */
 export const renderTableCellActions_unstable = (state: TableCellActionsState) => {
-  const { slots, slotProps } = getSlots<TableCellActionsSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableCellActionsSlots>(state);
 
   return <slots.root {...slotProps.root} />;
 };

packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx

@@ -1,5 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { AvatarContextProvider } from '@fluentui/react-avatar';
 import type { TableCellLayoutState, TableCellLayoutSlots, TableCellLayoutContextValues } from './TableCellLayout.types';
 
@@ -10,7 +13,7 @@ export const renderTableCellLayout_unstable = (
   state: TableCellLayoutState,
   contextValues: TableCellLayoutContextValues,
 ) => {
-  const { slots, slotProps } = getSlots<TableCellLayoutSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableCellLayoutSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

packages/react-components/react-table/src/components/TableHeader/renderTableHeader.tsx

@@ -1,13 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';
 import type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';
 
 /**
  * Render the final JSX of TableHeader
  */
 export const renderTableHeader_unstable = (state: TableHeaderState) => {
-  const { slots, slotProps } = getSlots<TableHeaderSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableHeaderSlots>(state);
 
   return (
     <TableHeaderContextProvider value="">

packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx

@@ -1,12 +1,15 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';
 
 /**
  * Render the final JSX of TableHeaderCell
  */
 export const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {
-  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableHeaderCellSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

packages/react-components/react-table/src/components/TableResizeHandle/renderTableResizeHandle.tsx

@@ -1,11 +1,14 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TableResizeHandleState, TableResizeHandleSlots } from './TableResizeHandle.types';
 
 /**
  * Render the final JSX of TableResizeHandle
  */
 export const renderTableResizeHandle_unstable = (state: TableResizeHandleState) => {
-  const { slots, slotProps } = getSlots<TableResizeHandleSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableResizeHandleSlots>(state);
   return <slots.root {...slotProps.root} />;
 };

packages/react-components/react-table/src/components/TableRow/renderTableRow.tsx

@@ -1,12 +1,15 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TableRowState, TableRowSlots } from './TableRow.types';
 
 /**
  * Render the final JSX of TableRow
  */
 export const renderTableRow_unstable = (state: TableRowState) => {
-  const { slots, slotProps } = getSlots<TableRowSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableRowSlots>(state);
 
   return <slots.root {...slotProps.root} />;
 };

packages/react-components/react-table/src/components/TableSelectionCell/renderTableSelectionCell.tsx

@@ -1,12 +1,15 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';
 
 /**
  * Render the final JSX of TableSelectionCell
  */
 export const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {
-  const { slots, slotProps } = getSlots<TableSelectionCellSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TableSelectionCellSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>