Merge branch 'master' of github.com:mantinedev/mantine

docs/src/docs/hooks/use-local-storage.mdx

@@ -73,9 +73,9 @@ const [value, setValue, removeValue] = useLocalStorage({
 ## Browser tabs synchronization
 
 use-local-storage subscribes to [storage event](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event).
-When state changes in one tab it automatically updates value in all other opened browser tabs.
+When state changes in one tab, it automatically updates value in all other opened browser tabs.
 You can test this feature by opening 2 tabs with Mantine docs side by side and changing color scheme
-(button on the top right or `⌘ + J` on mac and `Ctrl + J` on Windows and Linux).
+(button on the top right or `⌘ + J` on MacOS and `Ctrl + J` on Windows and Linux).
 
 ## Serialize/deserialize json
 
@@ -132,10 +132,10 @@ interface UseLocalStorage<T> {
   /** Default value that will be set if value is not found in local storage */
   defaultValue?: T;
 
-  /** If set to true, value will be update is useEffect after mount */
+  /** If set to true, value will be update in useEffect after mount */
   getInitialValueInEffect: boolean;
 
-  /** Function to serialize value into string to be save in local storage */
+  /** Function to serialize value into string to be saved in local storage */
   serialize?(value: T): string;
 
   /** Function to deserialize string value from local storage to value */

src/mantine-core/src/Menu/Menu.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { IconTable, IconSearch } from '@tabler/icons';
 import { WithinOverlays } from '@mantine/storybook';
 import { Menu } from './Menu';
@@ -87,3 +87,42 @@ export function MenuTargetWithTooltip() {
     </div>
   );
 }
+
+export function WithinStickyHeaderPortal() {
+  const [isSticky, setIsSticky] = useState(false);
+
+  useEffect(() => {
+    const makeSticky = () => {
+      setIsSticky(window.scrollY > 0);
+    };
+
+    document.addEventListener('scroll', makeSticky);
+
+    return () => {
+      document.removeEventListener('scroll', makeSticky);
+    };
+  });
+
+  return (
+    <div style={{ padding: 40, height: 2000 }}>
+      <div
+        className="header"
+        style={{ display: 'flex', position: 'sticky', top: 0, backgroundColor: 'lightgray' }}
+      >
+        <div>Header</div>
+        <div style={{ visibility: isSticky ? 'hidden' : 'visible' }}>
+          <Menu withinPortal>
+            <Menu.Target>
+              <Button>Open Menu</Button>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Item>Item 1</Menu.Item>
+              <Menu.Item>Item 2</Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        </div>
+      </div>
+    </div>
+  );
+}

src/mantine-core/src/Menu/MenuTarget/MenuTarget.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef } from 'react';
+import React, { cloneElement, forwardRef, useEffect } from 'react';
 import { isElement, createEventHandler } from '@mantine/utils';
 import { useMenuContext } from '../Menu.context';
 import { Popover } from '../../Popover';
@@ -35,6 +35,8 @@ export const MenuTarget = forwardRef<HTMLElement, MenuTargetProps>(
       () => ctx.trigger === 'hover' && ctx.closeDropdown()
     );
 
+    useEffect(() => ctx.closeDropdown, [children]);
+
     return (
       <Popover.Target refProp={refProp} popupType="menu" ref={ref} {...others}>
         {cloneElement(children, {