Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,22 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "PopoverTrigger", {
enumerable: true,
get: function() {
return PopoverTrigger;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _usePopoverTrigger = require("./usePopoverTrigger");
const _renderPopoverTrigger = require("./renderPopoverTrigger");
const PopoverTrigger = (props)=>{
const state = (0, _usePopoverTrigger.usePopoverTrigger_unstable)(props);
return (0, _renderPopoverTrigger.renderPopoverTrigger_unstable)(state);
};
PopoverTrigger.displayName = 'PopoverTrigger';
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
PopoverTrigger.isFluentTriggerComponent = true;

View File

@@ -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;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;AAOhE,MAAMG,iBAAgDC,CAAAA;IAC3D,MAAMC,YAAQJ,6CAAAA,EAA2BG;IAEzC,WAAOF,mDAAAA,EAA8BG;AACvC,EAAE;AAEFF,eAAeG,WAAW,GAAG;AAC7B,6FAA6F;AAC5FH,eAA0CI,wBAAwB,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -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":";;;;;iEAEuB,QAAQ"}

View File

@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
PopoverTrigger: function() {
return _PopoverTrigger.PopoverTrigger;
},
renderPopoverTrigger_unstable: function() {
return _renderPopoverTrigger.renderPopoverTrigger_unstable;
},
usePopoverTrigger_unstable: function() {
return _usePopoverTrigger.usePopoverTrigger_unstable;
}
});
const _PopoverTrigger = require("./PopoverTrigger");
const _renderPopoverTrigger = require("./renderPopoverTrigger");
const _usePopoverTrigger = require("./usePopoverTrigger");

View File

@@ -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":";;;;;;;;;;;;eAASA,8BAAc;;;eAEdC,mDAA6B;;;eAC7BC,6CAA0B;;;gCAHJ,mBAAmB;sCAEJ,yBAAyB;mCAC5B,sBAAsB"}

View File

@@ -0,0 +1,15 @@
/**
* Render the final JSX of PopoverTrigger
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderPopoverTrigger_unstable", {
enumerable: true,
get: function() {
return renderPopoverTrigger_unstable;
}
});
const renderPopoverTrigger_unstable = (state)=>{
return state.children;
};

View File

@@ -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;;;;;;;;;;AAAO,MAAMA,gCAAgC,CAACC;IAC5C,OAAOA,MAAMC,QAAQ;AACvB,EAAE"}

View File

@@ -0,0 +1,76 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "usePopoverTrigger_unstable", {
enumerable: true,
get: function() {
return usePopoverTrigger_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const _popoverContext = require("../../popoverContext");
const _reactaria = require("@fluentui/react-aria");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const usePopoverTrigger_unstable = (props)=>{
const { children, disableButtonEnhancement = false } = props;
const child = (0, _reactutilities.getTriggerChild)(children);
const open = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.open);
const setOpen = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.setOpen);
const toggleOpen = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.toggleOpen);
const triggerRef = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.triggerRef);
const openOnHover = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.openOnHover);
const openOnContext = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.openOnContext);
const { triggerAttributes } = (0, _reacttabster.useModalAttributes)();
const onContextMenu = (e)=>{
if (openOnContext) {
e.preventDefault();
setOpen(e, true);
}
};
const onClick = (e)=>{
if (!openOnContext) {
toggleOpen(e);
}
};
const onKeyDown = (e)=>{
if (e.key === _keyboardkeys.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: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
onMouseLeave: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
onContextMenu: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
ref: (0, _reactutilities.useMergedRefs)(triggerRef, (0, _reactutilities.getReactElementRef)(child))
};
const triggerChildProps = {
...contextMenuProps,
onClick: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)),
onKeyDown: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
};
const ariaButtonTriggerChildProps = (0, _reactaria.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: (0, _reactutilities.applyTriggerPropsToChildren)(props.children, (0, _reactaria.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))
};
};

File diff suppressed because one or more lines are too long