('above');
+
+ return (
+ <>
+
+ setOpen(data.checked as boolean)} />{' '}
+
+ setMenuPosition(data.value as PositioningProps['position'])}
+ >
+
+
+
+
+
+ value && setMenuItemCount(value)} />
+
+
+ {
+ positioningRef.current?.updatePosition();
+ }}
+ >
+
+
+
+ );
+};
+
+CoverTargetForSmallViewport.parameters = {
+ docs: {
+ description: {
+ story:
+ "`shiftToCoverTarget` is a positioning option that allows the positioned element to shift and cover the target element when there isn't enough space available to fit it.",
+ },
+ },
+};
diff --git a/apps/public-docsite-v9/src/Concepts/Positioning/index.stories.tsx b/apps/public-docsite-v9/src/Concepts/Positioning/index.stories.tsx
index eff55288fb5162..e4958cfe29e31e 100644
--- a/apps/public-docsite-v9/src/Concepts/Positioning/index.stories.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Positioning/index.stories.tsx
@@ -11,12 +11,14 @@ export { AnchorToTarget } from './PositioningAnchorToTarget.stories';
export { ImperativeAnchorTarget } from './PositioningImperativeAnchorTarget.stories';
export { ImperativePositionUpdate } from './PositioningImperativePositionUpdate.stories';
export { OverflowBoundary } from './PositioningOverflowBoundary.stories';
-export { OverflowBoundaryPadding } from './OverflowBoundaryPadding.stories';
+export { OverflowBoundaryRect } from './PositioningOverflowBoundaryRect.stories';
+export { OverflowBoundaryPadding } from './PositioningOverflowBoundaryPadding.stories';
export { FlipBoundary } from './PositioningFlipBoundary.stories';
-export { MatchTargetSize } from './MatchTargetSize.stories';
+export { MatchTargetSize } from './PositioningMatchTargetSize.stories';
export { DisableTransform } from './PositioningDisableTransform.stories';
export { ListenToUpdates } from './PositioningListenToUpdates.stories';
export { AutoSizeForSmallViewport } from './PositioningAutoSize.stories';
+export { CoverTargetForSmallViewport } from './PositioningShiftToCoverTarget.stories';
export { FallbackPositions } from './PositioningFallbackPositions.stories';
export default {
diff --git a/apps/public-docsite-v9/src/Concepts/SSR/Remix.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/Remix.stories.mdx
new file mode 100644
index 00000000000000..04d25ad1d97be9
--- /dev/null
+++ b/apps/public-docsite-v9/src/Concepts/SSR/Remix.stories.mdx
@@ -0,0 +1,227 @@
+import { Meta } from '@storybook/addon-docs';
+
+
+
+# React Router 7/Remix setup
+
+## Installation
+
+1. Create a new React Router 7/Remix project or skip this step if you already have one:
+
+```bash
+npx create-remix@latest fluentui-remix
+
+# or
+npx create-react-router@latest fluentui-react-router
+```
+
+2. Install dependencies:
+
+```bash
+# Install Fluent UI core packages
+npm i @fluentui/react-components @fluentui/react-icons
+
+# Install required Vite plugins
+npm i vite-plugin-cjs-interop @griffel/vite-plugin -D
+```
+
+## Configuration
+
+1. Update `vite.config.ts`:
+
+```ts
+// Import Vite plugins
+import { cjsInterop } from 'vite-plugin-cjs-interop';
+import griffel from '@griffel/vite-plugin';
+
+export default defineConfig(({ command }) => ({
+ plugins: [
+ reactRouter(), // or remix(),
+ tsconfigPaths(),
+
+ // Add CJS interop plugin for Fluent UI packages until they are ESM compatible
+ cjsInterop({
+ dependencies: ['@fluentui/react-components'],
+ }),
+ // Add Griffel plugin for production optimization
+ command === 'build' && griffel(),
+ ],
+ // Required for Fluent UI icons in SSR
+ ssr: {
+ noExternal: ['@fluentui/react-icons'],
+ },
+}));
+```
+
+2. Modify `app/root.tsx` to add Fluent UI providers:
+
+```tsx
+// 1. Import Fluent UI dependencies
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+ {/* 2. Add insertion point for Fluent UI styles before the . */}
+
+
+
+ {/* 3. Wrap app content with FluentProvider */}
+ {children}
+
+
+
+