chore(react-tree): scaffold TreeItemLayout

+ export composition methods

packages/react-components/react-tree/etc/react-tree.api.md

@@ -17,6 +17,15 @@ import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+// @public (undocumented)
+export const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
+
+// @public
+export const renderTreeItem_unstable: (state: TreeItemState) => JSX.Element;
+
+// @public
+export const renderTreeItemLayout_unstable: (state: TreeItemLayoutState) => JSX.Element;
+
 // @public
 export const Tree: ForwardRefComponent<TreeProps>;
 
@@ -38,6 +47,23 @@ export const TreeItem: ForwardRefComponent<TreeItemProps>;
 // @public (undocumented)
 export const treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
+// @public
+export const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
+
+// @public (undocumented)
+export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
+
+// @public
+export type TreeItemLayoutProps = ComponentProps<TreeItemLayoutSlots>;
+
+// @public (undocumented)
+export type TreeItemLayoutSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots>;
+
 // @public
 export type TreeItemProps = ComponentProps<TreeItemSlots>;
 
@@ -69,9 +95,27 @@ export type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
     open: boolean;
 };
 
+// @public
+export const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
+
 // @public (undocumented)
 export const useTreeContext_unstable: <T>(selector: ContextSelector<TreeContextValue, T>) => T;
 
+// @public
+export const useTreeItem_unstable: (props: TreeItemProps, ref: React_2.Ref<TreeItemElement>) => TreeItemState;
+
+// @public
+export const useTreeItemLayout_unstable: (props: TreeItemLayoutProps, ref: React_2.Ref<HTMLElement>) => TreeItemLayoutState;
+
+// @public
+export const useTreeItemLayoutStyles_unstable: (state: TreeItemLayoutState) => TreeItemLayoutState;
+
+// @public
+export const useTreeItemStyles_unstable: (state: TreeItemState) => TreeItemState;
+
+// @public (undocumented)
+export const useTreeStyles_unstable: (state: TreeState) => TreeState;
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-tree/src/TreeItemLayout.ts

@@ -0,0 +1 @@
+export * from './components/TreeItemLayout/index';

packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { TreeItemLayout } from './TreeItemLayout';
+import { isConformant } from '../../testing/isConformant';
+
+describe('TreeItemLayout', () => {
+  isConformant({
+    Component: TreeItemLayout,
+    displayName: 'TreeItemLayout',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<TreeItemLayout>Default TreeItemLayout</TreeItemLayout>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useTreeItemLayout_unstable } from './useTreeItemLayout';
+import { renderTreeItemLayout_unstable } from './renderTreeItemLayout';
+import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';
+import type { TreeItemLayoutProps } from './TreeItemLayout.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * TreeItemLayout component - TODO: add more docs
+ */
+export const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {
+  const state = useTreeItemLayout_unstable(props, ref);
+
+  useTreeItemLayoutStyles_unstable(state);
+  return renderTreeItemLayout_unstable(state);
+});
+
+TreeItemLayout.displayName = 'TreeItemLayout';

packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type TreeItemLayoutSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * TreeItemLayout Props
+ */
+export type TreeItemLayoutProps = ComponentProps<TreeItemLayoutSlots>;
+
+/**
+ * State used in rendering TreeItemLayout
+ */
+export type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots>;

packages/react-components/react-tree/src/components/TreeItemLayout/__snapshots__/TreeItemLayout.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeItemLayout renders a default state 1`] = `
+<div>
+  <div
+    class="fui-TreeItemLayout"
+  >
+    Default TreeItemLayout
+  </div>
+</div>
+`;

packages/react-components/react-tree/src/components/TreeItemLayout/index.ts

@@ -0,0 +1,5 @@
+export * from './TreeItemLayout';
+export * from './TreeItemLayout.types';
+export * from './renderTreeItemLayout';
+export * from './useTreeItemLayout';
+export * from './useTreeItemLayoutStyles';

packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';
+
+/**
+ * Render the final JSX of TreeItemLayout
+ */
+export const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {
+  const { slots, slotProps } = getSlots<TreeItemLayoutSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <slots.root {...slotProps.root} />;
+};

packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';
+
+/**
+ * Create the state required to render TreeItemLayout.
+ *
+ * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,
+ * before being passed to renderTreeItemLayout_unstable.
+ *
+ * @param props - props from this instance of TreeItemLayout
+ * @param ref - reference to root HTMLElement of TreeItemLayout
+ */
+export const useTreeItemLayout_unstable = (
+  props: TreeItemLayoutProps,
+  ref: React.Ref<HTMLElement>,
+): TreeItemLayoutState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+  };
+};

packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.ts

@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {
+  root: 'fui-TreeItemLayout',
+  // TODO: add class names for all slots on TreeItemLayoutSlots.
+  // Should be of the form `<slotName>: 'fui-TreeItemLayout__<slotName>`
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    // TODO Add default styles for the root element
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the TreeItemLayout slots based on the state
+ */
+export const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(treeItemLayoutClassNames.root, styles.root, state.root.className);
+
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};

packages/react-components/react-tree/src/index.ts

@@ -1,7 +1,22 @@
-export { Tree, treeClassNames } from './Tree';
+export { Tree, treeClassNames, renderTree_unstable, useTreeStyles_unstable, useTree_unstable } from './Tree';
 export type { TreeProps, TreeState, TreeSlots } from './Tree';
 
-export { TreeItem, treeItemClassNames } from './TreeItem';
+export {
+  TreeItem,
+  treeItemClassNames,
+  renderTreeItem_unstable,
+  useTreeItemStyles_unstable,
+  useTreeItem_unstable,
+} from './TreeItem';
 export type { TreeItemProps, TreeItemState, TreeItemSlots } from './TreeItem';
 
 export type { TreeContextValue, useTreeContext_unstable, TreeProvider } from './contexts';
+
+export {
+  TreeItemLayout,
+  treeItemLayoutClassNames,
+  renderTreeItemLayout_unstable,
+  useTreeItemLayoutStyles_unstable,
+  useTreeItemLayout_unstable,
+} from './TreeItemLayout';
+export type { TreeItemLayoutProps, TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout';