feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/PopoverTrigger.js

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import { usePopoverTrigger_unstable } from './usePopoverTrigger';
+import { renderPopoverTrigger_unstable } from './renderPopoverTrigger';
+/**
+ * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.
+ */ export const PopoverTrigger = (props)=>{
+    const state = usePopoverTrigger_unstable(props);
+    return renderPopoverTrigger_unstable(state);
+};
+PopoverTrigger.displayName = 'PopoverTrigger';
+// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
+PopoverTrigger.isFluentTriggerComponent = true;

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/PopoverTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverTrigger_unstable } from './usePopoverTrigger';\nimport { renderPopoverTrigger_unstable } from './renderPopoverTrigger';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\nimport type { PopoverTriggerProps } from './PopoverTrigger.types';\n\n/**\n * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.\n */\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = props => {\n  const state = usePopoverTrigger_unstable(props);\n\n  return renderPopoverTrigger_unstable(state);\n};\n\nPopoverTrigger.displayName = 'PopoverTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(PopoverTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","usePopoverTrigger_unstable","renderPopoverTrigger_unstable","PopoverTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AAIvE;;CAEC,GACD,OAAO,MAAMC,iBAAgDC,CAAAA;IAC3D,MAAMC,QAAQJ,2BAA2BG;IAEzC,OAAOF,8BAA8BG;AACvC,EAAE;AAEFF,eAAeG,WAAW,GAAG;AAC7B,6FAA6F;AAC5FH,eAA0CI,wBAAwB,GAAG"}

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/PopoverTrigger.types.js

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

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/PopoverTrigger.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PopoverTrigger/PopoverTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * PopoverTrigger Props\n */\nexport type PopoverTriggerProps = TriggerProps<PopoverTriggerChildProps> & {\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 * PopoverTrigger State\n */\nexport type PopoverTriggerState = {\n  children: React.ReactElement | null;\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type PopoverTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n  Type,\n  Props & {\n    'aria-expanded'?: 'true' | 'false';\n    ref: React.Ref<unknown>;\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    onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    /* eslint-enable @nx/workspace-consistent-callback-type */\n  }\n>;\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/index.js

@@ -0,0 +1,3 @@
+export { PopoverTrigger } from './PopoverTrigger';
+export { renderPopoverTrigger_unstable } from './renderPopoverTrigger';
+export { usePopoverTrigger_unstable } from './usePopoverTrigger';

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PopoverTrigger/index.ts"],"sourcesContent":["export { PopoverTrigger } from './PopoverTrigger';\nexport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\nexport { renderPopoverTrigger_unstable } from './renderPopoverTrigger';\nexport { usePopoverTrigger_unstable } from './usePopoverTrigger';\n"],"names":["PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB"}

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/renderPopoverTrigger.js

@@ -0,0 +1,5 @@
+/**
+ * Render the final JSX of PopoverTrigger
+ */ export const renderPopoverTrigger_unstable = (state)=>{
+    return state.children;
+};

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/renderPopoverTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PopoverTrigger/renderPopoverTrigger.tsx"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\nimport type { PopoverTriggerState } from './PopoverTrigger.types';\n\n/**\n * Render the final JSX of PopoverTrigger\n */\nexport const renderPopoverTrigger_unstable = (state: PopoverTriggerState): JSXElement | null => {\n  return state.children;\n};\n"],"names":["renderPopoverTrigger_unstable","state","children"],"mappings":"AAGA;;CAEC,GACD,OAAO,MAAMA,gCAAgC,CAACC;IAC5C,OAAOA,MAAMC,QAAQ;AACvB,EAAE"}

node_modules/@fluentui/react-popover/lib/components/PopoverTrigger/usePopoverTrigger.js

@@ -0,0 +1,72 @@
+'use client';
+import * as React from 'react';
+import { applyTriggerPropsToChildren, getTriggerChild, getReactElementRef, mergeCallbacks, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';
+import { useModalAttributes } from '@fluentui/react-tabster';
+import { usePopoverContext_unstable } from '../../popoverContext';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { Escape } from '@fluentui/keyboard-keys';
+/**
+ * Create the state required to render PopoverTrigger.
+ *
+ * The returned state can be modified with hooks such as usePopoverTriggerStyles,
+ * before being passed to renderPopoverTrigger_unstable.
+ *
+ * @param props - props from this instance of PopoverTrigger
+ */ export const usePopoverTrigger_unstable = (props)=>{
+    const { children, disableButtonEnhancement = false } = props;
+    const child = getTriggerChild(children);
+    const open = usePopoverContext_unstable((context)=>context.open);
+    const setOpen = usePopoverContext_unstable((context)=>context.setOpen);
+    const toggleOpen = usePopoverContext_unstable((context)=>context.toggleOpen);
+    const triggerRef = usePopoverContext_unstable((context)=>context.triggerRef);
+    const openOnHover = usePopoverContext_unstable((context)=>context.openOnHover);
+    const openOnContext = usePopoverContext_unstable((context)=>context.openOnContext);
+    const { triggerAttributes } = useModalAttributes();
+    const onContextMenu = (e)=>{
+        if (openOnContext) {
+            e.preventDefault();
+            setOpen(e, true);
+        }
+    };
+    const onClick = (e)=>{
+        if (!openOnContext) {
+            toggleOpen(e);
+        }
+    };
+    const onKeyDown = (e)=>{
+        if (e.key === Escape && open && !e.isDefaultPrevented()) {
+            setOpen(e, false);
+            // stop propagation to avoid conflicting with other elements that listen for `Escape`
+            // e,g: Dialog, Popover, Menu and Tooltip
+            e.preventDefault();
+        }
+    };
+    const onMouseEnter = (e)=>{
+        if (openOnHover) {
+            setOpen(e, true);
+        }
+    };
+    const onMouseLeave = (e)=>{
+        if (openOnHover) {
+            setOpen(e, false);
+        }
+    };
+    const contextMenuProps = {
+        ...triggerAttributes,
+        'aria-expanded': `${open}`,
+        ...child === null || child === void 0 ? void 0 : child.props,
+        onMouseEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
+        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)),
+        ref: useMergedRefs(triggerRef, getReactElementRef(child))
+    };
+    const triggerChildProps = {
+        ...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 {
+        children: applyTriggerPropsToChildren(props.children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps))
+    };
+};