Fix iOS and Safari menu styles (#5295)

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/menu/skin.css

@@ -20,6 +20,10 @@ governing permissions and limitations under the License.
   border-color: var(--spectrum-popover-border-color);
   background-color: var(--spectrum-popover-background-color);
   filter: drop-shadow(0 var(--spectrum-popover-shadow-offset-y) var(--spectrum-popover-shadow-blur) var(--spectrum-popover-shadow-color));
+  /* explicitly adding this webkit prefix may fix the bug where the drop-shadow remains dirty */
+  /* https://stackoverflow.com/questions/56478925/safari-drop-shadow-filter-remains-visible-even-with-hidden-element */
+  -webkit-filter: drop-shadow(0 var(--spectrum-popover-shadow-offset-y) var(--spectrum-popover-shadow-blur) var(--spectrum-popover-shadow-color));
+  will-change: filter;
 }
 
 .spectrum-Menu {

packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx

@@ -46,19 +46,18 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
       }
     }
   }});
+  let isMobile = useIsMobileDevice();
   let slots = {};
   if (isUnavailable) {
     slots = {
-      dialog: {UNSAFE_className: classNames(helpStyles, 'react-spectrum-ContextualHelp-dialog', classNames(styles, 'spectrum-Menu-subdialog'))},
+      dialog: {UNSAFE_className: classNames(helpStyles, 'react-spectrum-ContextualHelp-dialog', classNames(styles, !isMobile ? 'spectrum-Menu-subdialog' : ''))},
       content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},
       footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}
     };
   }
   let [trigger] = React.Children.toArray(props.children);
   let [, content] = props.children as [ReactElement, ReactElement];
 
-  let isMobile = useIsMobileDevice();
-
   let onExit = () => {
     // if focus was already moved back to a menu item, don't need to do anything
     if (!menu.current.contains(document.activeElement)) {

packages/@react-spectrum/menu/src/Menu.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';
 import {DOMRef} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
 import {MenuContext, MenuStateContext} from './context';
@@ -35,11 +35,12 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
   let {menuProps} = useMenu(completeProps, state, domRef);
   let {styleProps} = useStyleProps(completeProps);
   useSyncRef(contextProps, domRef);
+  let isMobile = useIsMobileDevice();
 
   return (
     <MenuStateContext.Provider value={{state, container: scopedRef, menu: domRef}}>
       <FocusScope contain={state.expandedKeys.size > 0}>
-        <div className={classNames(styles, 'spectrum-Menu-wrapper')}>
+        <div className={classNames(styles, !isMobile ? 'spectrum-Menu-wrapper' : '')}>
           <div
             {...menuProps}
             {...styleProps}