add table to semantic style hooks

packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md

@@ -14,6 +14,13 @@ import { BreadcrumbState } from '@fluentui/react-breadcrumb';
 import { ButtonState } from '@fluentui/react-button';
 import { CheckboxState } from '@fluentui/react-checkbox';
 import { CompoundButtonState } from '@fluentui/react-button';
+import { DataGridBodyState } from '@fluentui/react-table';
+import { DataGridCellState } from '@fluentui/react-table';
+import { DataGridHeaderCellState } from '@fluentui/react-table';
+import { DataGridHeaderState } from '@fluentui/react-table';
+import { DataGridRowState } from '@fluentui/react-table';
+import { DataGridSelectionCellState } from '@fluentui/react-table';
+import { DataGridState } from '@fluentui/react-table';
 import { DialogActionsState } from '@fluentui/react-dialog';
 import { DialogBodyState } from '@fluentui/react-dialog';
 import { DialogContentState } from '@fluentui/react-dialog';
@@ -56,6 +63,16 @@ import { SpinButtonState } from '@fluentui/react-spinbutton';
 import { SpinnerState } from '@fluentui/react-spinner';
 import { SplitButtonState } from '@fluentui/react-button';
 import { SwitchState } from '@fluentui/react-switch';
+import { TableBodyState } from '@fluentui/react-table';
+import { TableCellActionsState } from '@fluentui/react-table';
+import { TableCellLayoutState } from '@fluentui/react-table';
+import { TableCellState } from '@fluentui/react-table';
+import { TableHeaderCellState } from '@fluentui/react-table';
+import { TableHeaderState } from '@fluentui/react-table';
+import { TableResizeHandleState } from '@fluentui/react-table';
+import { TableRowState } from '@fluentui/react-table';
+import { TableSelectionCellState } from '@fluentui/react-table';
+import { TableState } from '@fluentui/react-table';
 import { TabListState } from '@fluentui/react-tabs';
 import { TabState } from '@fluentui/react-tabs';
 import { TextareaState } from '@fluentui/react-textarea';
@@ -108,6 +125,27 @@ export const useSemanticCheckboxStyles: (_state: unknown) => CheckboxState;
 // @public (undocumented)
 export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState;
 
+// @public
+export const useSemanticDataGridBodyStyles: (_state: unknown) => DataGridBodyState;
+
+// @public
+export const useSemanticDataGridCellStyles: (_state: unknown) => DataGridCellState;
+
+// @public
+export const useSemanticDataGridHeaderCellStyles: (_state: unknown) => DataGridHeaderCellState;
+
+// @public
+export const useSemanticDataGridHeaderStyles: (_state: unknown) => DataGridHeaderState;
+
+// @public
+export const useSemanticDataGridRowStyles: (_state: unknown) => DataGridRowState;
+
+// @public
+export const useSemanticDataGridSelectionCellStyles: (_state: unknown) => DataGridSelectionCellState;
+
+// @public
+export const useSemanticDataGridStyles: (_state: unknown) => DataGridState;
+
 // @public
 export const useSemanticDialogActionsStyles: (_state: unknown) => DialogActionsState;
 
@@ -243,6 +281,36 @@ export const useSemanticTabContentStyles_unstable: (state: TabState) => TabState
 // @public
 export const useSemanticTabIndicatorStyles_unstable: (state: TabState) => TabState;
 
+// @public
+export const useSemanticTableBodyStyles: (_state: unknown) => TableBodyState;
+
+// @public
+export const useSemanticTableCellActionsStyles: (_state: unknown) => TableCellActionsState;
+
+// @public
+export const useSemanticTableCellLayoutStyles: (_state: unknown) => TableCellLayoutState;
+
+// @public
+export const useSemanticTableCellStyles: (_state: unknown) => TableCellState;
+
+// @public
+export const useSemanticTableHeaderCellStyles: (_state: unknown) => TableHeaderCellState;
+
+// @public
+export const useSemanticTableHeaderStyles: (_state: unknown) => TableHeaderState;
+
+// @public
+export const useSemanticTableResizeHandleStyles: (_state: unknown) => TableResizeHandleState;
+
+// @public
+export const useSemanticTableRowStyles: (_state: unknown) => TableRowState;
+
+// @public
+export const useSemanticTableSelectionCellStyles: (_state: unknown) => TableSelectionCellState;
+
+// @public
+export const useSemanticTableStyles: (_state: unknown) => TableState;
+
 // @public
 export const useSemanticTabListStyles: (_state: unknown) => TabListState;
 

packages/react-components/semantic-style-hooks-preview/library/package.json

@@ -56,8 +56,9 @@
     "@fluentui/react-spinbutton": "^9.3.6",
     "@fluentui/react-spinner": "^9.5.11",
     "@fluentui/react-switch": "^9.2.6",
-    "@fluentui/react-tabster": "^9.24.6",
+    "@fluentui/react-table": "^9.16.6",
     "@fluentui/react-tabs": "^9.7.6",
+    "@fluentui/react-tabster": "^9.24.6",
     "@fluentui/react-text": "^9.4.36",
     "@fluentui/react-textarea": "^9.4.6",
     "@fluentui/react-theme": "^9.1.24",

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts

@@ -0,0 +1,17 @@
+export { useSemanticDataGridStyles } from './useSemanticDataGridStyles.styles';
+export { useSemanticDataGridBodyStyles } from './useSemanticDataGridBodyStyles.styles';
+export { useSemanticDataGridCellStyles } from './useSemanticDataGridCellStyles.styles';
+export { useSemanticDataGridHeaderStyles } from './useSemanticDataGridHeaderStyles.styles';
+export { useSemanticDataGridHeaderCellStyles } from './useSemanticDataGridHeaderCellStyles.styles';
+export { useSemanticDataGridRowStyles } from './useSemanticDataGridRowStyles.styles';
+export { useSemanticDataGridSelectionCellStyles } from './useSemanticDataGridSelectionCellStyles.styles';
+export { useSemanticTableStyles } from './useSemanticTableStyles.styles';
+export { useSemanticTableBodyStyles } from './useSemanticTableBodyStyles.styles';
+export { useSemanticTableCellStyles } from './useSemanticTableCellStyles.styles';
+export { useSemanticTableCellActionsStyles } from './useSemanticTableCellActionsStyles.styles';
+export { useSemanticTableCellLayoutStyles } from './useSemanticTableCellLayoutStyles.styles';
+export { useSemanticTableHeaderStyles } from './useSemanticTableHeaderStyles.styles';
+export { useSemanticTableHeaderCellStyles } from './useSemanticTableHeaderCellStyles.styles';
+export { useSemanticTableResizeHandleStyles } from './useSemanticTableResizeHandleStyles.styles';
+export { useSemanticTableRowStyles } from './useSemanticTableRowStyles.styles';
+export { useSemanticTableSelectionCellStyles } from './useSemanticTableSelectionCellStyles.styles';

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts

@@ -0,0 +1,22 @@
+import { mergeClasses } from '@griffel/react';
+import { dataGridBodyClassNames, type DataGridBodyState } from '@fluentui/react-table';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { useSemanticTableBodyStyles } from './useSemanticTableBodyStyles.styles';
+
+/**
+ * Apply styling to the DataGridBody slots based on the state
+ */
+export const useSemanticDataGridBodyStyles = (_state: unknown): DataGridBodyState => {
+  'use no memo';
+
+  const state = _state as DataGridBodyState;
+
+  useSemanticTableBodyStyles(state);
+  state.root.className = mergeClasses(
+    state.root.className,
+    dataGridBodyClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts

@@ -0,0 +1,22 @@
+import { mergeClasses } from '@griffel/react';
+import { dataGridCellClassNames, type DataGridCellState } from '@fluentui/react-table';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { useSemanticTableCellStyles } from './useSemanticTableCellStyles.styles';
+
+/**
+ * Apply styling to the DataGridCell slots based on the state
+ */
+export const useSemanticDataGridCellStyles = (_state: unknown): DataGridCellState => {
+  'use no memo';
+
+  const state = _state as DataGridCellState;
+
+  useSemanticTableCellStyles(state);
+  state.root.className = mergeClasses(
+    state.root.className,
+    dataGridCellClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts

@@ -0,0 +1,46 @@
+import { mergeClasses } from '@griffel/react';
+import { dataGridHeaderCellClassNames, type DataGridHeaderCellState } from '@fluentui/react-table';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { useSemanticTableHeaderCellStyles } from './useSemanticTableHeaderCellStyles.styles';
+
+/**
+ * Apply styling to the DataGridHeaderCell slots based on the state
+ */
+export const useSemanticDataGridHeaderCellStyles = (_state: unknown): DataGridHeaderCellState => {
+  'use no memo';
+
+  const state = _state as DataGridHeaderCellState;
+
+  useSemanticTableHeaderCellStyles(state);
+  state.root.className = mergeClasses(
+    state.root.className,
+    dataGridHeaderCellClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  if (state.button) {
+    state.button.className = mergeClasses(
+      state.button.className,
+      dataGridHeaderCellClassNames.button,
+      getSlotClassNameProp_unstable(state.button),
+    );
+  }
+
+  if (state.sortIcon) {
+    state.sortIcon.className = mergeClasses(
+      state.sortIcon.className,
+      dataGridHeaderCellClassNames.sortIcon,
+      getSlotClassNameProp_unstable(state.sortIcon),
+    );
+  }
+
+  if (state.aside) {
+    state.aside.className = mergeClasses(
+      state.aside.className,
+      dataGridHeaderCellClassNames.aside,
+      getSlotClassNameProp_unstable(state.aside),
+    );
+  }
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts

@@ -0,0 +1,22 @@
+import { mergeClasses } from '@griffel/react';
+import { dataGridHeaderClassNames, type DataGridHeaderState } from '@fluentui/react-table';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { useSemanticTableHeaderStyles } from './useSemanticTableHeaderStyles.styles';
+
+/**
+ * Apply styling to the DataGridHeader slots based on the state
+ */
+export const useSemanticDataGridHeaderStyles = (_state: unknown): DataGridHeaderState => {
+  'use no memo';
+
+  const state = _state as DataGridHeaderState;
+
+  useSemanticTableHeaderStyles(state);
+  state.root.className = mergeClasses(
+    state.root.className,
+    dataGridHeaderClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts

@@ -0,0 +1,29 @@
+import { mergeClasses } from '@griffel/react';
+import { dataGridRowClassNames, type DataGridRowState } from '@fluentui/react-table';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { useSemanticTableRowStyles } from './useSemanticTableRowStyles.styles';
+
+/**
+ * Apply styling to the DataGridRow slots based on the state
+ */
+export const useSemanticDataGridRowStyles = (_state: unknown): DataGridRowState => {
+  'use no memo';
+
+  const state = _state as DataGridRowState;
+
+  useSemanticTableRowStyles(state);
+  state.root.className = mergeClasses(
+    state.root.className,
+    dataGridRowClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+  if (state.selectionCell) {
+    state.selectionCell.className = mergeClasses(
+      state.selectionCell.className,
+      dataGridRowClassNames.selectionCell,
+      getSlotClassNameProp_unstable(state.selectionCell),
+    );
+  }
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts

@@ -0,0 +1,38 @@
+import { mergeClasses } from '@griffel/react';
+import { dataGridSelectionCellClassNames, type DataGridSelectionCellState } from '@fluentui/react-table';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { useSemanticTableSelectionCellStyles } from './useSemanticTableSelectionCellStyles.styles';
+
+/**
+ * Apply styling to the DataGridSelectionCell slots based on the state
+ */
+export const useSemanticDataGridSelectionCellStyles = (_state: unknown): DataGridSelectionCellState => {
+  'use no memo';
+
+  const state = _state as DataGridSelectionCellState;
+
+  useSemanticTableSelectionCellStyles(state);
+  state.root.className = mergeClasses(
+    state.root.className,
+    dataGridSelectionCellClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  if (state.checkboxIndicator) {
+    state.checkboxIndicator.className = mergeClasses(
+      state.checkboxIndicator.className,
+      dataGridSelectionCellClassNames.checkboxIndicator,
+      getSlotClassNameProp_unstable(state.checkboxIndicator),
+    );
+  }
+
+  if (state.radioIndicator) {
+    state.radioIndicator.className = mergeClasses(
+      state.radioIndicator.className,
+      dataGridSelectionCellClassNames.radioIndicator,
+      getSlotClassNameProp_unstable(state.radioIndicator),
+    );
+  }
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts

@@ -0,0 +1,22 @@
+import { mergeClasses } from '@griffel/react';
+import { dataGridClassNames, type DataGridState } from '@fluentui/react-table';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { useSemanticTableStyles } from './useSemanticTableStyles.styles';
+
+/**
+ * Apply styling to the DataGrid slots based on the state
+ */
+export const useSemanticDataGridStyles = (_state: unknown): DataGridState => {
+  'use no memo';
+
+  const state = _state as DataGridState;
+
+  useSemanticTableStyles(state);
+  state.root.className = mergeClasses(
+    state.root.className,
+    dataGridClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts

@@ -0,0 +1,37 @@
+import { mergeClasses, makeStyles } from '@griffel/react';
+import { tableBodyClassName, type TableBodyState } from '@fluentui/react-table';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+
+const useTableLayoutStyles = makeStyles({
+  root: {
+    display: 'table-row-group',
+  },
+});
+
+const useFlexLayoutStyles = makeStyles({
+  root: {
+    display: 'block',
+  },
+});
+
+/**
+ * Apply styling to the TableBody slots based on the state
+ */
+export const useSemanticTableBodyStyles = (_state: unknown): TableBodyState => {
+  'use no memo';
+
+  const state = _state as TableBodyState;
+
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles(),
+  };
+  state.root.className = mergeClasses(
+    state.root.className,
+    tableBodyClassName,
+    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};