feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/MenuTrigger.js

@@ -0,0 +1,14 @@
+'use client';
+import * as React from 'react';
+import { useMenuTrigger_unstable } from './useMenuTrigger';
+import { renderMenuTrigger_unstable } from './renderMenuTrigger';
+/**
+ * Wraps a trigger element as an only child
+ * and adds the necessary event handling to open a popup menu
+ */ export const MenuTrigger = (props)=>{
+    const state = useMenuTrigger_unstable(props);
+    return renderMenuTrigger_unstable(state);
+};
+MenuTrigger.displayName = 'MenuTrigger';
+// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
+MenuTrigger.isFluentTriggerComponent = true;

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/MenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> = props => {\n  const state = useMenuTrigger_unstable(props);\n\n  return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(MenuTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","useMenuTrigger_unstable","renderMenuTrigger_unstable","MenuTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AAIjE;;;CAGC,GACD,OAAO,MAAMC,cAA0CC,CAAAA;IACrD,MAAMC,QAAQJ,wBAAwBG;IAEtC,OAAOF,2BAA2BG;AACpC,EAAE;AAEFF,YAAYG,WAAW,GAAG;AAC1B,6FAA6F;AAC5FH,YAAuCI,wBAAwB,GAAG"}

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/MenuTrigger.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/MenuTrigger.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {\n  /**\n   * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n   * @default false\n   */\n  disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n  Type,\n  Props & {\n    'aria-haspopup'?: 'menu';\n    'aria-expanded'?: boolean;\n    id: string;\n    ref: React.Ref<never>;\n    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n    onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onMouseOver?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    /* eslint-enable @nx/workspace-consistent-callback-type */\n  }\n>;\n\nexport type MenuTriggerState = {\n  children: React.ReactElement | null;\n  isSubmenu: boolean;\n};\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/index.js

@@ -0,0 +1,3 @@
+export { MenuTrigger } from './MenuTrigger';
+export { renderMenuTrigger_unstable } from './renderMenuTrigger';
+export { useMenuTrigger_unstable } from './useMenuTrigger';

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuTrigger/index.ts"],"sourcesContent":["export { MenuTrigger } from './MenuTrigger';\nexport type { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nexport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nexport { useMenuTrigger_unstable } from './useMenuTrigger';\n"],"names":["MenuTrigger","renderMenuTrigger_unstable","useMenuTrigger_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB"}

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/renderMenuTrigger.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';
+/**
+ * Render the final JSX of MenuTrigger
+ *
+ * Only renders children
+ */ export const renderMenuTrigger_unstable = (state)=>{
+    return /*#__PURE__*/ React.createElement(MenuTriggerContextProvider, {
+        value: state.isSubmenu
+    }, state.children);
+};

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/renderMenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuTrigger/renderMenuTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (state: MenuTriggerState): JSXElement => {\n  return <MenuTriggerContextProvider value={state.isSubmenu}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"names":["React","MenuTriggerContextProvider","renderMenuTrigger_unstable","state","value","isSubmenu","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,oCAAoC;AAI/E;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC,qBAAO,oBAACF;QAA2BG,OAAOD,MAAME,SAAS;OAAGF,MAAMG,QAAQ;AAC5E,EAAE"}

node_modules/@fluentui/react-menu/lib/components/MenuTrigger/useMenuTrigger.js

@@ -0,0 +1,194 @@
+'use client';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { applyTriggerPropsToChildren, getTriggerChild, getReactElementRef, isHTMLElement, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
+import { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';
+function noop() {
+// does nothing
+}
+/**
+ * Create the state required to render MenuTrigger.
+ * Clones the only child component and adds necessary event handling behaviours to open a popup menu
+ *
+ * @param props - props from this instance of MenuTrigger
+ */ export const useMenuTrigger_unstable = (props)=>{
+    const { children, disableButtonEnhancement = false } = props;
+    const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
+    const menuPopoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);
+    const setOpen = useMenuContext_unstable((context)=>context.setOpen);
+    const open = useMenuContext_unstable((context)=>context.open);
+    const triggerId = useMenuContext_unstable((context)=>context.triggerId);
+    const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);
+    const openOnContext = useMenuContext_unstable((context)=>context.openOnContext);
+    const isSubmenu = useIsSubmenu();
+    const shouldOpenOnArrowRight = useMenuListContext_unstable((ctx)=>{
+        var _ctx_shouldOpenOnArrowRight;
+        return (_ctx_shouldOpenOnArrowRight = ctx.shouldOpenOnArrowRight) !== null && _ctx_shouldOpenOnArrowRight !== void 0 ? _ctx_shouldOpenOnArrowRight : true;
+    });
+    const { findFirstFocusable } = useFocusFinders();
+    const focusFirst = React.useCallback(()=>{
+        const firstFocusable = findFirstFocusable(menuPopoverRef.current);
+        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    }, [
+        findFirstFocusable,
+        menuPopoverRef
+    ]);
+    const openedWithKeyboardRef = React.useRef(false);
+    const openedViaSafeZoneRef = React.useRef(false);
+    const hasMouseMovedRef = React.useRef(false);
+    const { dir } = useFluent();
+    const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
+    const child = getTriggerChild(children);
+    // Heads up!
+    //
+    // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,
+    // but the cursor is already over the menu trigger.
+    const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(useEventCallback(()=>{
+        if (isSubmenu) {
+            openedViaSafeZoneRef.current = true;
+        }
+    }));
+    const onContextMenu = (event)=>{
+        if (isTargetDisabled(event) || event.isDefaultPrevented()) {
+            return;
+        }
+        if (openOnContext) {
+            event.preventDefault();
+            setOpen(event, {
+                open: true,
+                keyboard: false,
+                type: 'menuTriggerContextMenu',
+                event
+            });
+        }
+    };
+    const onClick = (event)=>{
+        if (isTargetDisabled(event)) {
+            return;
+        }
+        if (!openOnContext) {
+            setOpen(event, {
+                open: !open,
+                keyboard: openedWithKeyboardRef.current,
+                type: 'menuTriggerClick',
+                event
+            });
+            openedWithKeyboardRef.current = false;
+        }
+    };
+    const onKeyDown = (event)=>{
+        if (isTargetDisabled(event) || event.isDefaultPrevented()) {
+            return;
+        }
+        const key = event.key;
+        if (!openOnContext && (isSubmenu && shouldOpenOnArrowRight && key === OpenArrowKey || !isSubmenu && key === ArrowDown)) {
+            setOpen(event, {
+                open: true,
+                keyboard: true,
+                type: 'menuTriggerKeyDown',
+                event
+            });
+        }
+        if (key === Escape && !isSubmenu) {
+            setOpen(event, {
+                open: false,
+                keyboard: true,
+                type: 'menuTriggerKeyDown',
+                event
+            });
+        }
+        // if menu is already open, can't rely on effects to focus
+        if (open && key === OpenArrowKey && isSubmenu && shouldOpenOnArrowRight) {
+            focusFirst();
+        }
+    };
+    const onMouseOver = (event)=>{
+        if (isTargetDisabled(event)) {
+            return;
+        }
+        if (openOnHover) {
+            if (hasMouseMovedRef.current) {
+                setOpen(event, {
+                    open: true,
+                    keyboard: false,
+                    type: 'menuTriggerMouseEnter',
+                    event
+                });
+            } else if (openedViaSafeZoneRef.current) {
+                setOpen(event, {
+                    open: true,
+                    keyboard: false,
+                    ignoreHoverDelay: true,
+                    type: 'menuTriggerMouseEnter',
+                    event
+                });
+                openedViaSafeZoneRef.current = false;
+            }
+        }
+    };
+    // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience
+    // First time open the mouse using mousemove and then continue with mouseenter
+    // Only use once to determine that the user is using the mouse since it is an expensive event to handle
+    const onMouseMove = (event)=>{
+        if (isTargetDisabled(event)) {
+            return;
+        }
+        if (openOnHover && !hasMouseMovedRef.current) {
+            setOpen(event, {
+                open: true,
+                keyboard: false,
+                type: 'menuTriggerMouseMove',
+                event
+            });
+            hasMouseMovedRef.current = true;
+        }
+    };
+    const onMouseLeave = (event)=>{
+        if (isTargetDisabled(event)) {
+            return;
+        }
+        if (openOnHover) {
+            setOpen(event, {
+                open: false,
+                keyboard: false,
+                type: 'menuTriggerMouseLeave',
+                event
+            });
+        }
+    };
+    var _child_props_onMouseEnter;
+    const contextMenuProps = {
+        id: triggerId,
+        ...child === null || child === void 0 ? void 0 : child.props,
+        ref: useMergedRefs(triggerRef, getReactElementRef(child), safeZoneHandlerRef),
+        onMouseEnter: useEventCallback((_child_props_onMouseEnter = child === null || child === void 0 ? void 0 : child.props.onMouseEnter) !== null && _child_props_onMouseEnter !== void 0 ? _child_props_onMouseEnter : noop),
+        onMouseLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
+        onContextMenu: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
+        onMouseMove: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseMove, onMouseMove)),
+        onMouseOver: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseOver, onMouseOver))
+    };
+    const triggerChildProps = {
+        'aria-haspopup': 'menu',
+        'aria-expanded': !open && !isSubmenu ? undefined : open,
+        ...contextMenuProps,
+        onClick: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)),
+        onKeyDown: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
+    };
+    const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', triggerChildProps);
+    return {
+        isSubmenu,
+        children: applyTriggerPropsToChildren(children, openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)
+    };
+};
+const isTargetDisabled = (event)=>{
+    const isDisabled = (el)=>el.hasAttribute('disabled') || el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true';
+    if (isHTMLElement(event.target) && isDisabled(event.target)) {
+        return true;
+    }
+    return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);
+};