Merge branch 'master' of https://github.com/microsoft/fluentui into u…

…sers/srmukher/legendsMultiSelectVBC

apps/public-docsite-v9/src/Concepts/Positioning/PositioningShiftToCoverTarget.stories.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import {
+  Button,
+  makeStyles,
+  SpinButton,
+  Menu,
+  MenuTrigger,
+  MenuPopover,
+  MenuList,
+  MenuItem,
+  PositioningImperativeRef,
+  useMergedRefs,
+  Checkbox,
+  RadioGroup,
+  Field,
+  Radio,
+  PositioningProps,
+} from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  boundary: {
+    border: '2px dashed red',
+    width: '300px',
+    height: '300px',
+    overflow: 'auto',
+    resize: 'both',
+  },
+  trigger: {
+    display: 'block',
+    width: '150px',
+    margin: '200px auto',
+  },
+});
+
+const ResizableBoundary = React.forwardRef<
+  HTMLDivElement,
+  {
+    onResize: ResizeObserverCallback;
+    children: React.ReactNode;
+  }
+>(({ onResize, children }, ref) => {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      const resizeObserver = new ResizeObserver(onResize);
+      resizeObserver.observe(containerRef.current);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [onResize]);
+
+  const styles = useStyles();
+
+  return (
+    <div ref={useMergedRefs(ref, containerRef)} className={styles.boundary}>
+      {children}
+    </div>
+  );
+});
+
+export const CoverTargetForSmallViewport = () => {
+  const styles = useStyles();
+  const [boundaryRef, setBoundaryRef] = React.useState<HTMLDivElement | null>(null);
+
+  const [menuItemCount, setMenuItemCount] = React.useState(6);
+
+  const positioningRef = React.useRef<PositioningImperativeRef>(null);
+
+  const [open, setOpen] = React.useState(false);
+  const [menuPosition, setMenuPosition] = React.useState<PositioningProps['position']>('above');
+
+  return (
+    <>
+      <div>
+        <Checkbox label="Open" checked={open} onChange={(e, data) => setOpen(data.checked as boolean)} />{' '}
+        <Field label="Menu position">
+          <RadioGroup
+            value={menuPosition}
+            onChange={(_, data) => setMenuPosition(data.value as PositioningProps['position'])}
+          >
+            <Radio value="above" label="above" />
+            <Radio value="after" label="after" />
+          </RadioGroup>
+        </Field>
+        <Field label="Menu Item Count">
+          <SpinButton value={menuItemCount} onChange={(_e, { value }) => value && setMenuItemCount(value)} />
+        </Field>
+      </div>
+      <ResizableBoundary
+        ref={setBoundaryRef}
+        onResize={() => {
+          positioningRef.current?.updatePosition();
+        }}
+      >
+        <Menu
+          open={open}
+          positioning={{
+            positioningRef,
+            overflowBoundary: boundaryRef,
+            flipBoundary: boundaryRef,
+            autoSize: true,
+            shiftToCoverTarget: true,
+            position: menuPosition,
+          }}
+        >
+          <MenuTrigger disableButtonEnhancement>
+            <Button className={styles.trigger}>Open Menu</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              {Array.from({ length: menuItemCount }, (_, i) => (
+                <MenuItem>Item {i}</MenuItem>
+              ))}
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      </ResizableBoundary>
+    </>
+  );
+};
+
+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.",
+    },
+  },
+};

apps/public-docsite-v9/src/Concepts/Positioning/index.stories.tsx

@@ -17,6 +17,7 @@ export { MatchTargetSize } from './MatchTargetSize.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 {

apps/vr-tests-react-components/src/stories/Positioning/Positioning.stories.tsx

@@ -843,6 +843,102 @@ const TargetDisplayNone = () => {
   );
 };
 
+const ShiftToCoverTargetWithAutoSize = () => {
+  const styles = useStyles();
+  const [overflowBoundary, setOverflowBoundary] = React.useState<HTMLDivElement | null>(null);
+  const { containerRef, targetRef } = usePositioning({
+    position: 'below',
+    overflowBoundary,
+    shiftToCoverTarget: true,
+    autoSize: true,
+  });
+
+  return (
+    <div
+      ref={setOverflowBoundary}
+      className={styles.boundary}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: 200,
+        padding: '10px 50px',
+        position: 'relative',
+      }}
+    >
+      <button ref={targetRef}>Target</button>
+      <Box ref={containerRef} style={{ overflow: 'auto', border: '3px solid green' }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi cras fermentum odio eu feugiat
+        pretium nibh ipsum consequat. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Porta
+        nibh venenatis cras sed felis eget. Enim sed faucibus turpis in. Non blandit massa enim nec dui nunc mattis. Ut
+        eu sem integer vitae justo.
+      </Box>
+    </div>
+  );
+};
+
+const ShiftToCoverTargetAsyncContentHorizontal = () => {
+  const styles = useStyles();
+  const [overflowBoundary, setOverflowBoundary] = React.useState<HTMLDivElement | null>(null);
+  const { containerRef, targetRef } = usePositioning({
+    position: 'after',
+    overflowBoundary,
+    shiftToCoverTarget: true,
+    autoSize: true,
+  });
+
+  return (
+    <div
+      ref={setOverflowBoundary}
+      className={styles.boundary}
+      style={{
+        height: 200,
+        width: 300,
+        padding: '50px 50px',
+        boxSizing: 'border-box',
+        position: 'relative',
+      }}
+    >
+      <button ref={targetRef}>Target</button>
+      <Box ref={containerRef} style={{ overflow: 'auto', border: '3px solid green', padding: 0 }}>
+        <Box style={{ maxWidth: 180 }}>
+          <AsyncFloatingContent />
+        </Box>
+      </Box>
+    </div>
+  );
+};
+
+const ShiftToCoverTargetAsyncContent = () => {
+  const styles = useStyles();
+  const [overflowBoundary, setOverflowBoundary] = React.useState<HTMLDivElement | null>(null);
+  const { containerRef, targetRef } = usePositioning({
+    position: 'below',
+    overflowBoundary,
+    shiftToCoverTarget: true,
+    autoSize: true,
+  });
+
+  return (
+    <div
+      ref={setOverflowBoundary}
+      className={styles.boundary}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: 200,
+        padding: '10px 50px',
+        position: 'relative',
+      }}
+    >
+      <button ref={targetRef}>Target</button>
+      <Box ref={containerRef} style={{ overflow: 'auto', border: '3px solid green' }}>
+        <AsyncFloatingContent />
+      </Box>
+    </div>
+  );
+};
+
 export default {
   title: 'Positioning',
 
@@ -1033,3 +1129,32 @@ export const _TargetDisplayNone = () => (
   </StoryWright>
 );
 _TargetDisplayNone.storyName = 'Target display none';
+
+export const _ShiftToCoverTargetWithAutoSize = () => <ShiftToCoverTargetWithAutoSize />;
+_ShiftToCoverTargetWithAutoSize.storyName = 'shiftToCoverTarget with autoSize';
+
+export const _ShiftToCoverTargetAsyncContent = () => (
+  <StoryWright
+    steps={new Steps()
+      .click('#load-content')
+      .wait('#full-content')
+      .snapshot('floating element is within the boundary')
+      .end()}
+  >
+    <ShiftToCoverTargetAsyncContent />
+  </StoryWright>
+);
+_ShiftToCoverTargetAsyncContent.storyName = 'shiftToCoverTarget with autoSize and async content';
+
+export const _ShiftToCoverTargetHorizontal = () => (
+  <StoryWright
+    steps={new Steps()
+      .click('#load-content')
+      .wait('#full-content')
+      .snapshot('floating element is within the boundary')
+      .end()}
+  >
+    <ShiftToCoverTargetAsyncContentHorizontal />
+  </StoryWright>
+);
+_ShiftToCoverTargetHorizontal.storyName = 'shiftToCoverTarget with autoSize and async content - horizontal';

change/@fluentui-react-charting-f56dc096-9891-4d5c-ae30-4d8a6ac5b481.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Ensure type safety of dependent fields",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/azure-themes/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/azure-themes",
   "entries": [
+    {
+      "date": "Fri, 13 Dec 2024 07:23:12 GMT",
+      "tag": "@fluentui/azure-themes_v8.6.114",
+      "version": "8.6.114",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/azure-themes",
+            "comment": "Bump @fluentui/react to v8.122.1",
+            "commit": "6dfe27e984d9633129c79178b40c6a0a189e29c7"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 12 Dec 2024 07:22:33 GMT",
       "tag": "@fluentui/azure-themes_v8.6.113",

packages/azure-themes/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/azure-themes
 
-This log was last generated on Thu, 12 Dec 2024 07:22:33 GMT and should not be manually modified.
+This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.6.114](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.114)
+
+Fri, 13 Dec 2024 07:23:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.113..@fluentui/azure-themes_v8.6.114)
+
+### Patches
+
+- Bump @fluentui/react to v8.122.1 ([PR #33455](https://github.com/microsoft/fluentui/pull/33455) by beachball)
+
 ## [8.6.113](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.113)
 
 Thu, 12 Dec 2024 07:22:33 GMT 

packages/azure-themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/azure-themes",
-  "version": "8.6.113",
+  "version": "8.6.114",
   "description": "Azure themes for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,7 +27,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.122.0",
+    "@fluentui/react": "^8.122.1",
     "@fluentui/set-version": "^8.2.23",
     "tslib": "^2.1.0"
   }