Add MenuGrid component and stories

packages/react-components/react-menu/library/src/MenuGrid.ts

@@ -0,0 +1,9 @@
+export type { MenuGridContextValues, MenuGridProps, MenuGridSlots, MenuGridState } from './components/MenuGrid/index';
+export {
+  MenuGrid,
+  menuGridClassNames,
+  renderMenuGrid_unstable,
+  useMenuGridContextValues_unstable,
+  useMenuGridStyles_unstable,
+  useMenuGrid_unstable,
+} from './components/MenuGrid/index';

packages/react-components/react-menu/library/src/MenuGridCell.ts

@@ -0,0 +1,14 @@
+export type {
+  MenuGridCellContextValues,
+  MenuGridCellProps,
+  MenuGridCellSlots,
+  MenuGridCellState,
+} from './components/MenuGridCell/index';
+export {
+  MenuGridCell,
+  menuGridCellClassNames,
+  renderMenuGridCell_unstable,
+  useMenuGridCellContextValues_unstable,
+  useMenuGridCellStyles_unstable,
+  useMenuGridCell_unstable,
+} from './components/MenuGridCell/index';

packages/react-components/react-menu/library/src/MenuGridRow.ts

@@ -0,0 +1,14 @@
+export type {
+  MenuGridRowContextValues,
+  MenuGridRowProps,
+  MenuGridRowSlots,
+  MenuGridRowState,
+} from './components/MenuGridRow/index';
+export {
+  MenuGridRow,
+  menuGridRowClassNames,
+  renderMenuGridRow_unstable,
+  useMenuGridRowContextValues_unstable,
+  useMenuGridRowStyles_unstable,
+  useMenuGridRow_unstable,
+} from './components/MenuGridRow/index';

packages/react-components/react-menu/library/src/MenuGridRowGroup.ts

@@ -0,0 +1,14 @@
+export type {
+  MenuGridRowGroupContextValues,
+  MenuGridRowGroupProps,
+  MenuGridRowGroupSlots,
+  MenuGridRowGroupState,
+} from './components/MenuGridRowGroup/index';
+export {
+  MenuGridRowGroup,
+  menuGridRowGroupClassNames,
+  renderMenuGridRowGroup_unstable,
+  useMenuGridRowGroupContextValues_unstable,
+  useMenuGridRowGroupStyles_unstable,
+  useMenuGridRowGroup_unstable,
+} from './components/MenuGridRowGroup/index';

packages/react-components/react-menu/library/src/MenuGridRowGroupHeader.ts

@@ -0,0 +1,14 @@
+export type {
+  MenuGridRowGroupHeaderContextValues,
+  MenuGridRowGroupHeaderProps,
+  MenuGridRowGroupHeaderSlots,
+  MenuGridRowGroupHeaderState,
+} from './components/MenuGridRowGroupHeader/index';
+export {
+  MenuGridRowGroupHeader,
+  menuGridRowGroupHeaderClassNames,
+  renderMenuGridRowGroupHeader_unstable,
+  useMenuGridRowGroupHeaderContextValues_unstable,
+  useMenuGridRowGroupHeaderStyles_unstable,
+  useMenuGridRowGroupHeader_unstable,
+} from './components/MenuGridRowGroupHeader/index';

packages/react-components/react-menu/library/src/components/MenuGrid/MenuGrid.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useMenuGrid_unstable } from './useMenuGrid';
+import { renderMenuGrid_unstable } from './renderMenuGrid';
+import { useMenuGridContextValues_unstable } from './useMenuGridContextValues';
+import { useMenuGridStyles_unstable } from './useMenuGridStyles.styles';
+import type { MenuGridProps } from './MenuGrid.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * Define a styled MenuGrid, using the `useMenuGrid_unstable` hook.
+ */
+export const MenuGrid: ForwardRefComponent<MenuGridProps> = React.forwardRef((props, ref) => {
+  const state = useMenuGrid_unstable(props, ref);
+  const contextValues = useMenuGridContextValues_unstable(state);
+
+  useMenuGridStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useMenuGridStyles_unstable')(state);
+
+  return renderMenuGrid_unstable(state, contextValues);
+});
+
+MenuGrid.displayName = 'MenuGrid';

packages/react-components/react-menu/library/src/components/MenuGrid/MenuGrid.types.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+
+import type { MenuGridContextValue } from '../../contexts/menuGridContext';
+
+export type MenuGridSlots = {
+  root: Slot<'div'>;
+};
+
+export type MenuGridProps = ComponentProps<MenuGridSlots> & {};
+
+export type MenuGridState = ComponentState<MenuGridSlots> & {
+  /**
+   * Tabster row attributes applied to the `MenuGridRow` components
+   */
+  tableRowTabsterAttribute: TabsterDOMAttribute | null;
+};
+
+export type MenuGridContextValues = {
+  menuGrid: MenuGridContextValue;
+};

packages/react-components/react-menu/library/src/components/MenuGrid/index.ts

@@ -0,0 +1,6 @@
+export { MenuGrid } from './MenuGrid';
+export type { MenuGridContextValues, MenuGridProps, MenuGridSlots, MenuGridState } from './MenuGrid.types';
+export { renderMenuGrid_unstable } from './renderMenuGrid';
+export { useMenuGrid_unstable } from './useMenuGrid';
+export { menuGridClassNames, useMenuGridStyles_unstable } from './useMenuGridStyles.styles';
+export { useMenuGridContextValues_unstable } from './useMenuGridContextValues';

packages/react-components/react-menu/library/src/components/MenuGrid/renderMenuGrid.tsx

@@ -0,0 +1,18 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+import { assertSlots } from '@fluentui/react-utilities';
+import { MenuGridContextValues, MenuGridSlots, MenuGridState } from './MenuGrid.types';
+import { MenuGridContextProvider } from '../../contexts/menuGridContext';
+
+/**
+ * Function that renders the final JSX of the component
+ */
+export const renderMenuGrid_unstable = (state: MenuGridState, contextValues: MenuGridContextValues) => {
+  assertSlots<MenuGridSlots>(state);
+
+  return (
+    <MenuGridContextProvider value={contextValues.menuGrid}>
+      <state.root />
+    </MenuGridContextProvider>
+  );
+};

packages/react-components/react-menu/library/src/components/MenuGrid/useMenuGrid.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useTableCompositeNavigation } from '@fluentui/react-components';
+import type { MenuGridProps, MenuGridState } from './MenuGrid.types';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+
+/**
+ * Returns the props and state required to render the component
+ */
+export const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLElement>): MenuGridState => {
+  const triggerId = useMenuContext_unstable(context => context.triggerId);
+  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();
+
+  return {
+    components: {
+      root: 'div',
+    },
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        ref: ref as React.Ref<HTMLDivElement>,
+        role: 'grid',
+        'aria-labelledby': triggerId,
+        onKeyDown: onTableKeyDown,
+        ...tableTabsterAttribute,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
+    tableRowTabsterAttribute,
+  };
+};

packages/react-components/react-menu/library/src/components/MenuGrid/useMenuGridContextValues.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { MenuGridContextValues, MenuGridState } from './MenuGrid.types';
+
+export function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {
+  const { tableRowTabsterAttribute } = state;
+  const menuGrid = React.useMemo(() => ({ tableRowTabsterAttribute }), [tableRowTabsterAttribute]);
+
+  return { menuGrid };
+}

packages/react-components/react-menu/library/src/components/MenuGrid/useMenuGridStyles.styles.ts

@@ -0,0 +1,29 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { mergeClasses, makeStyles } from '@griffel/react';
+import type { MenuGridSlots, MenuGridState } from './MenuGrid.types';
+
+export const menuGridClassNames: SlotClassNames<MenuGridSlots> = {
+  root: 'fui-MenuGrid',
+};
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px',
+  },
+  hasMenuContext: {
+    height: '100%',
+  },
+});
+
+/**
+ * Apply styling to the Menu slots based on the state
+ */
+export const useMenuGridStyles_unstable = (state: MenuGridState): MenuGridState => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);
+  return state;
+};

packages/react-components/react-menu/library/src/components/MenuGridCell/MenuGridCell.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useMenuGridCell_unstable } from './useMenuGridCell';
+import { renderMenuGridCell_unstable } from './renderMenuGridCell';
+import { useMenuGridCellContextValues_unstable } from './useMenuGridCellContextValues';
+import type { MenuGridCellProps } from './MenuGridCell.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useMenuGridCellStyles_unstable } from './useMenuGridCellStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * Define a MenuGridCell, using the `useMenuGridCell_unstable` hook.
+ */
+export const MenuGridCell: ForwardRefComponent<MenuGridCellProps> = React.forwardRef((props, ref) => {
+  const state = useMenuGridCell_unstable(props, ref);
+  const contextValues = useMenuGridCellContextValues_unstable(state);
+
+  useMenuGridCellStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useMenuGridCellStyles_unstable')(state);
+
+  return renderMenuGridCell_unstable(state, contextValues);
+});
+
+MenuGridCell.displayName = 'MenuGroup';

packages/react-components/react-menu/library/src/components/MenuGridCell/MenuGridCell.types.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { MenuGridCellContextValue } from '../../contexts/menuGridCellContext';
+
+export type MenuGridCellSlots = {
+  root: Slot<'div'>;
+};
+
+export type MenuGridCellProps = ComponentProps<MenuGridCellSlots>;
+
+export type MenuGridCellState = ComponentState<MenuGridCellSlots>;
+
+export type MenuGridCellContextValues = {
+  menuGridCell: MenuGridCellContextValue;
+};

packages/react-components/react-menu/library/src/components/MenuGridCell/index.ts

@@ -0,0 +1,11 @@
+export type {
+  MenuGridCellContextValues,
+  MenuGridCellProps,
+  MenuGridCellSlots,
+  MenuGridCellState,
+} from './MenuGridCell.types';
+export { MenuGridCell } from './MenuGridCell';
+export { renderMenuGridCell_unstable } from './renderMenuGridCell';
+export { useMenuGridCell_unstable } from './useMenuGridCell';
+export { useMenuGridCellContextValues_unstable } from './useMenuGridCellContextValues';
+export { menuGridCellClassNames, useMenuGridCellStyles_unstable } from './useMenuGridCellStyles.styles';

packages/react-components/react-menu/library/src/components/MenuGridCell/renderMenuGridCell.tsx

@@ -0,0 +1,19 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+import { assertSlots } from '@fluentui/react-utilities';
+import { MenuGridCellContextValues, MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';
+import { MenuGridCellContextProvider } from '../../contexts/menuGridCellContext';
+
+/**
+ * Redefine the render function to add slots. Reuse the menugroup structure but add
+ * slots to children.
+ */
+export const renderMenuGridCell_unstable = (state: MenuGridCellState, contextValues: MenuGridCellContextValues) => {
+  assertSlots<MenuGridCellSlots>(state);
+
+  return (
+    <MenuGridCellContextProvider value={contextValues.menuGridCell}>
+      <state.root />
+    </MenuGridCellContextProvider>
+  );
+};

packages/react-components/react-menu/library/src/components/MenuGridCell/useMenuGridCell.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';
+
+/**
+ * Given user props, returns state and render function for a MenuGridCell.
+ */
+export function useMenuGridCell_unstable(props: MenuGridCellProps, ref: React.Ref<HTMLElement>): MenuGridCellState {
+  return {
+    components: {
+      root: 'div',
+    },
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        ref: ref as React.Ref<HTMLDivElement>,
+        role: 'gridcell',
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
+  };
+}

packages/react-components/react-menu/library/src/components/MenuGridCell/useMenuGridCellContextValues.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { MenuGridCellContextValues, MenuGridCellState } from './MenuGridCell.types';
+
+export function useMenuGridCellContextValues_unstable(state: MenuGridCellState): MenuGridCellContextValues {
+  const menuGridCell = React.useMemo(() => ({}), []);
+
+  return { menuGridCell };
+}

packages/react-components/react-menu/library/src/components/MenuGridCell/useMenuGridCellStyles.styles.ts

@@ -0,0 +1,15 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { mergeClasses } from '@griffel/react';
+import type { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';
+
+export const menuGridCellClassNames: SlotClassNames<MenuGridCellSlots> = {
+  root: 'fui-MenuGridCell',
+};
+
+export const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {
+  'use no memo';
+
+  state.root.className = mergeClasses(menuGridCellClassNames.root, state.root.className);
+
+  return state;
+};

packages/react-components/react-menu/library/src/components/MenuGridRow/MenuGridRow.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useMenuGridRow_unstable } from './useMenuGridRow';
+import { renderMenuGridRow_unstable } from './renderMenuGridRow';
+import { useMenuGridRowContextValues_unstable } from './useMenuGridRowContextValues';
+import type { MenuGridRowProps } from './MenuGridRow.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useMenuGridRowStyles_unstable } from './useMenuGridRowStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * Define a MenuGridRow, using the `useMenuGridRow_unstable` hook.
+ */
+export const MenuGridRow: ForwardRefComponent<MenuGridRowProps> = React.forwardRef((props, ref) => {
+  const state = useMenuGridRow_unstable(props, ref);
+  const contextValues = useMenuGridRowContextValues_unstable(state);
+
+  useMenuGridRowStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useMenuGridRowStyles_unstable')(state);
+
+  return renderMenuGridRow_unstable(state, contextValues);
+});
+
+MenuGridRow.displayName = 'MenuGroup';

packages/react-components/react-menu/library/src/components/MenuGridRow/MenuGridRow.types.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { MenuGridRowContextValue } from '../../contexts/menuGridRowContext';
+
+export type MenuGridRowSlots = {
+  root: Slot<'div'>;
+};
+
+export type MenuGridRowProps = ComponentProps<MenuGridRowSlots>;
+
+export type MenuGridRowState = ComponentState<MenuGridRowSlots>;
+
+export type MenuGridRowContextValues = {
+  menuGridRow: MenuGridRowContextValue;
+};

packages/react-components/react-menu/library/src/components/MenuGridRow/index.ts

@@ -0,0 +1,11 @@
+export type {
+  MenuGridRowContextValues,
+  MenuGridRowProps,
+  MenuGridRowSlots,
+  MenuGridRowState,
+} from './MenuGridRow.types';
+export { MenuGridRow } from './MenuGridRow';
+export { renderMenuGridRow_unstable } from './renderMenuGridRow';
+export { useMenuGridRow_unstable } from './useMenuGridRow';
+export { useMenuGridRowContextValues_unstable } from './useMenuGridRowContextValues';
+export { menuGridRowClassNames, useMenuGridRowStyles_unstable } from './useMenuGridRowStyles.styles';