feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-nav/lib/components/NavDrawerBody/useNavDrawerBody.js

@@ -0,0 +1,25 @@
+'use client';
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useDrawerBody_unstable } from '@fluentui/react-drawer';
+import { useNavContext_unstable } from '../NavContext';
+/**
+ * Create the state required to render NavDrawerBody.
+ *
+ * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,
+ * before being passed to renderNavDrawerBody_unstable.
+ *
+ * @param props - props from this instance of NavDrawerBody
+ * @param ref - reference to root HTMLDivElement of NavDrawerBody
+ */ export const useNavDrawerBody_unstable = (props, ref)=>{
+    const { tabbable } = useNavContext_unstable();
+    const focusAttributes = useArrowNavigationGroup({
+        axis: 'vertical',
+        circular: true,
+        tabbable
+    });
+    return useDrawerBody_unstable({
+        ...focusAttributes,
+        ...props
+    }, ref);
+};