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

3466
node_modules/@fluentui/react-popover/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-popover/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-popover
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

23
node_modules/@fluentui/react-popover/README.md generated vendored Normal file
View File

@@ -0,0 +1,23 @@
# @fluentui/react-popover
**React Popover components for [Fluent UI React](https://react.fluentui.dev)**
To import React Popover components:
```js
import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover';
<Popover>
<PopoverTrigger>
<button>Controls popover</button>
</PopoverTrigger>
<PopoverSurface>
<div className={example}>
<h3>Popover content</h3>
<div>This is some popover content</div>
</div>
</PopoverSurface>
</Popover>;
```

332
node_modules/@fluentui/react-popover/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,332 @@
import { ARIAButtonResultProps } from '@fluentui/react-aria';
import { ARIAButtonType } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ContextSelector } from '@fluentui/react-context-selector';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { JSXElement } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import type { PositioningVirtualElement } from '@fluentui/react-positioning';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { SetVirtualMouseTarget } from '@fluentui/react-positioning';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TriggerProps } from '@fluentui/react-utilities';
export declare const arrowHeights: Record<PopoverSize, number>;
declare type InternalPopoverSlots = {
surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;
};
/**
* Data attached to open/close events
*/
export declare type OnOpenChangeData = {
open: boolean;
};
/**
* The supported events that will trigger open/close of the menu
*/
export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
/**
* Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
*/
export declare const Popover: React_2.FC<PopoverProps>;
/**
* Context shared between Popover and its children components
*/
export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'withArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus' | 'inertTrapFocus' | 'inline'>;
/**
* Popover Props
*/
export declare type PopoverProps = ComponentProps<Partial<PopoverSlots>> & Pick<PortalProps, 'mountNode'> & {
/**
* A popover can appear styled with brand or inverted.
* When not specified, the default style is used.
*/
appearance?: 'brand' | 'inverted';
/**
* Can contain two children including `PopoverTrigger` and `PopoverSurface`.
* Alternatively can only contain `PopoverSurface` if using a custom `target`.
*/
children: [JSXElement, JSXElement] | JSXElement;
/**
* Close when scroll outside of it
*
* @default false
*/
closeOnScroll?: boolean;
/**
* Used to set the initial open state of the Popover in uncontrolled mode
*
* @default false
*/
defaultOpen?: boolean;
/**
* Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order
*
* @default false
*/
inline?: boolean;
/**
* Sets the delay for closing popover on mouse leave
*/
mouseLeaveDelay?: number;
/**
* Display an arrow pointing to the target.
*
* @default false
*/
withArrow?: boolean;
/**
* Call back when the component requests to change value
* The `open` value is used as a hint when directly controlling the component
*/
onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;
/**
* Controls the opening of the Popover
*
* @default false
*/
open?: boolean;
/**
* Flag to open the Popover as a context menu. Disables all other interactions
*
* @default false
*/
openOnContext?: boolean;
/**
* Flag to open the Popover by hovering the trigger
*
* @default false
*/
openOnHover?: boolean;
/**
* Flag to close the Popover when an iframe outside a PopoverSurface is focused
*
* @default true
*/
closeOnIframeFocus?: boolean;
/**
* Configures the position of the Popover.
* Explore [Positioning docs](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs) for more options.
*/
positioning?: PositioningShorthand;
/**
* Determines popover padding and arrow size
*
* @default medium
*/
size?: PopoverSize;
/**
* Should trap focus
*
* @default false
*/
trapFocus?: boolean;
/**
* Must be used with the `trapFocus` prop
* Enables older Fluent UI focus trap behavior where the user
* cannot tab into the window outside of the document. This is now
* non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
* where the focus trap involves setting outside elements inert.
*
* @deprecated this behavior is default provided now, to opt-out of it in favor of standard behavior use the `inertTrapFocus` property
*/
legacyTrapFocus?: boolean;
/**
* Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
* where the focus trap involves setting outside elements inert,
* making navigation leak from the trapped area back to the browser toolbar and vice-versa.
*
* @default false
*/
inertTrapFocus?: boolean;
/**
* By default Popover focuses the first focusable element in PopoverSurface on open.
* Specify `disableAutoFocus` to prevent this behavior.
*
* @default false
*/
unstable_disableAutoFocus?: boolean;
};
export declare const PopoverProvider: Provider<PopoverContextValue> & FC<ProviderProps<PopoverContextValue>>;
/**
* Determines popover padding and arrow size
*/
export declare type PopoverSize = 'small' | 'medium' | 'large';
declare type PopoverSlots = {
/**
* Slot for the surface motion animation.
* For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
*/
surfaceMotion: Slot<PresenceMotionSlotProps>;
};
/**
* Popover State
*/
export declare type PopoverState = ComponentState<InternalPopoverSlots> & Pick<PopoverProps, 'appearance' | 'mountNode' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus' | 'withArrow' | 'inertTrapFocus'> & Required<Pick<PopoverProps, 'inline' | 'open'>> & Pick<PopoverProps, 'children'> & {
/**
* Ref of the pointing arrow
*/
arrowRef: React_2.MutableRefObject<HTMLDivElement | null>;
/**
* Ref of the PopoverSurface
*/
contentRef: React_2.MutableRefObject<HTMLElement | null>;
/**
* Anchors the popper to the mouse click for context events
*/
contextTarget: PositioningVirtualElement | undefined;
popoverSurface: React_2.ReactElement | undefined;
popoverTrigger: React_2.ReactElement | undefined;
/**
* A callback to set the target of the popper to the mouse click for context events
*/
setContextTarget: SetVirtualMouseTarget;
/**
* Callback to open/close the Popover
*/
setOpen: (e: OpenPopoverEvents, open: boolean) => void;
size: NonNullable<PopoverProps['size']>;
/**
* Callback to toggle the open state of the Popover
*/
toggleOpen: (e: OpenPopoverEvents) => void;
/**
* Ref of the PopoverTrigger
*/
triggerRef: React_2.MutableRefObject<HTMLElement | null>;
};
/**
* PopoverSurface component renders react children in a positioned box
*/
export declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
/**
* PopoverSurface Props
*/
export declare type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
/**
* Names of the slots in PopoverSurfaceProps
*/
export declare type PopoverSurfaceSlots = {
root: Slot<'div'>;
};
/**
* PopoverSurface State
*/
export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {
/**
* CSS class for the arrow element
*/
arrowClassName?: string;
};
/**
* Wraps a trigger element as an only child and adds the necessary event handling to open a popover.
*/
export declare const PopoverTrigger: React_2.FC<PopoverTriggerProps>;
/**
* Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog
*/
export declare type PopoverTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
'aria-expanded'?: 'true' | 'false';
ref: React_2.Ref<unknown>;
onMouseEnter: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
onMouseLeave: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
onContextMenu: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
}>;
/**
* PopoverTrigger Props
*/
export declare type PopoverTriggerProps = TriggerProps<PopoverTriggerChildProps> & {
/**
* Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.
* @default false
*/
disableButtonEnhancement?: boolean;
};
/**
* PopoverTrigger State
*/
export declare type PopoverTriggerState = {
children: React_2.ReactElement | null;
};
/**
* Render the final JSX of Popover
*/
export declare const renderPopover_unstable: (state: PopoverState) => JSXElement;
/**
* Render the final JSX of PopoverSurface
*/
export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSXElement;
/**
* Render the final JSX of PopoverTrigger
*/
export declare const renderPopoverTrigger_unstable: (state: PopoverTriggerState) => JSXElement | null;
/**
* Create the state required to render Popover.
*
* The returned state can be modified with hooks such as usePopoverStyles,
* before being passed to renderPopover_unstable.
*
* @param props - props from this instance of Popover
*/
export declare const usePopover_unstable: (props: PopoverProps) => PopoverState;
export declare const usePopoverContext_unstable: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;
/**
* Create the state required to render PopoverSurface.
*
* The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,
* before being passed to renderPopoverSurface_unstable.
*
* @param props - props from this instance of PopoverSurface
* @param ref - reference to root HTMLDivElement of PopoverSurface
*/
export declare const usePopoverSurface_unstable: (props: PopoverSurfaceProps, ref: React_2.Ref<HTMLDivElement>) => PopoverSurfaceState;
/**
* Apply styling to the PopoverSurface slots based on the state
*/
export declare const usePopoverSurfaceStyles_unstable: (state: PopoverSurfaceState) => PopoverSurfaceState;
/**
* 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 declare const usePopoverTrigger_unstable: (props: PopoverTriggerProps) => PopoverTriggerState;
export { }

View File

@@ -0,0 +1,25 @@
"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, {
Popover: function() {
return _index.Popover;
},
renderPopover_unstable: function() {
return _index.renderPopover_unstable;
},
usePopoverBase_unstable: function() {
return _index.usePopoverBase_unstable;
},
usePopover_unstable: function() {
return _index.usePopover_unstable;
}
});
const _index = require("./components/Popover/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Popover.ts"],"sourcesContent":["export type {\n OnOpenChangeData,\n OpenPopoverEvents,\n PopoverBaseProps,\n PopoverProps,\n PopoverSize,\n PopoverBaseState,\n PopoverState,\n} from './components/Popover/index';\nexport {\n Popover,\n renderPopover_unstable,\n usePopover_unstable,\n usePopoverBase_unstable,\n} from './components/Popover/index';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverBase_unstable"],"mappings":";;;;;;;;;;;;eAUEA,cAAO;;;eACPC,6BAAsB;;;eAEtBE,8BAAuB;;;eADvBD,0BAAmB;;;uBAEd,6BAA6B"}

View File

@@ -0,0 +1,34 @@
"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, {
PopoverSurface: function() {
return _index.PopoverSurface;
},
arrowHeights: function() {
return _index.arrowHeights;
},
popoverSurfaceClassNames: function() {
return _index.popoverSurfaceClassNames;
},
renderPopoverSurface_unstable: function() {
return _index.renderPopoverSurface_unstable;
},
usePopoverSurfaceBase_unstable: function() {
return _index.usePopoverSurfaceBase_unstable;
},
usePopoverSurfaceStyles_unstable: function() {
return _index.usePopoverSurfaceStyles_unstable;
},
usePopoverSurface_unstable: function() {
return _index.usePopoverSurface_unstable;
}
});
const _index = require("./components/PopoverSurface/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/PopoverSurface.ts"],"sourcesContent":["export type {\n PopoverSurfaceBaseProps,\n PopoverSurfaceProps,\n PopoverSurfaceSlots,\n PopoverSurfaceBaseState,\n PopoverSurfaceState,\n} from './components/PopoverSurface/index';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n usePopoverSurfaceBase_unstable,\n} from './components/PopoverSurface/index';\n"],"names":["PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable","usePopoverSurfaceBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,qBAAc;;;eACdC,mBAAY;;;eACZC,+BAAwB;;;eACxBC,oCAA6B;;;eAG7BG,qCAA8B;;;eAF9BF,uCAAgC;;;eAChCC,iCAA0B;;;uBAErB,oCAAoC"}

View File

@@ -0,0 +1,22 @@
"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 _index.PopoverTrigger;
},
renderPopoverTrigger_unstable: function() {
return _index.renderPopoverTrigger_unstable;
},
usePopoverTrigger_unstable: function() {
return _index.usePopoverTrigger_unstable;
}
});
const _index = require("./components/PopoverTrigger/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/PopoverTrigger.ts"],"sourcesContent":["export type {\n PopoverTriggerChildProps,\n PopoverTriggerProps,\n PopoverTriggerState,\n} from './components/PopoverTrigger/index';\nexport {\n PopoverTrigger,\n renderPopoverTrigger_unstable,\n usePopoverTrigger_unstable,\n} from './components/PopoverTrigger/index';\n"],"names":["PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":";;;;;;;;;;;;eAMEA,qBAAc;;;eACdC,oCAA6B;;;eAC7BC,iCAA0B;;;uBACrB,oCAAoC"}

View File

@@ -0,0 +1,20 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Popover", {
enumerable: true,
get: function() {
return Popover;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _usePopover = require("./usePopover");
const _renderPopover = require("./renderPopover");
const Popover = (props)=>{
const state = (0, _usePopover.usePopover_unstable)(props);
return (0, _renderPopover.renderPopover_unstable)(state);
};
Popover.displayName = 'Popover';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n const state = usePopover_unstable(props);\n\n return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["React","usePopover_unstable","renderPopover_unstable","Popover","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;AAMlD,MAAMG,UAAkCC,CAAAA;IAC7C,MAAMC,YAAQJ,+BAAAA,EAAoBG;IAElC,WAAOF,qCAAAA,EAAuBG;AAChC,EAAE;AAEFF,QAAQG,WAAW,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"));

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,42 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "PopoverSurfaceMotion", {
enumerable: true,
get: function() {
return PopoverSurfaceMotion;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
const _reactpositioning = require("@fluentui/react-positioning");
// Shared timing constants for the enter animation.
const duration = _reactmotion.motionTokens.durationSlower;
const easing = _reactmotion.motionTokens.curveDecelerateMid;
const PopoverSurfaceMotion = (0, _reactmotion.createPresenceComponent)(({ distance = 10 })=>({
enter: [
(0, _reactmotioncomponentspreview.fadeAtom)({
duration,
easing,
direction: 'enter'
}),
{
// slideAtom produces translate keyframes from `outX`/`outY` → `0px`.
// The `outX`/`outY` values read the positioning-provided CSS variables and scale
// them by `distance` so the surface slides in from the correct direction.
...(0, _reactmotioncomponentspreview.slideAtom)({
duration,
easing,
direction: 'enter',
outX: `calc(var(${_reactpositioning.POSITIONING_SLIDE_DIRECTION_VAR_X}, 0px) * ${distance})`,
outY: `calc(var(${_reactpositioning.POSITIONING_SLIDE_DIRECTION_VAR_Y}, 0px) * ${distance})`
}),
// 'accumulate' compositing adds this effect's transform on top of the element's
// existing transform, preserving any transform applied by the positioning engine.
composite: 'accumulate'
}
],
// No exit animation — the surface unmounts immediately on close.
exit: []
}));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/PopoverSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport {\n POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX,\n POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY,\n} from '@fluentui/react-positioning';\n\n// Shared timing constants for the enter animation.\nconst duration = motionTokens.durationSlower;\nconst easing = motionTokens.curveDecelerateMid;\n\n/**\n * Default `surfaceMotion` slot for `<Popover>`.\n *\n * Enter-only animation combining a fade and a direction-aware slide.\n * The slide reads CSS variables set by `usePositioningSlideDirection` and scales\n * them by `distance` pixels. There is no exit animation; the surface unmounts immediately.\n *\n * @param distance - Travel distance (px) for the enter slide. Defaults to `10`.\n */\nexport const PopoverSurfaceMotion = createPresenceComponent(({ distance = 10 }: { distance?: number }) => ({\n enter: [\n fadeAtom({ duration, easing, direction: 'enter' }),\n {\n // slideAtom produces translate keyframes from `outX`/`outY` → `0px`.\n // The `outX`/`outY` values read the positioning-provided CSS variables and scale\n // them by `distance` so the surface slides in from the correct direction.\n ...slideAtom({\n duration,\n easing,\n direction: 'enter',\n outX: `calc(var(${slideDirectionVarX}, 0px) * ${distance})`,\n outY: `calc(var(${slideDirectionVarY}, 0px) * ${distance})`,\n }),\n // 'accumulate' compositing adds this effect's transform on top of the element's\n // existing transform, preserving any transform applied by the positioning engine.\n composite: 'accumulate',\n },\n ],\n // No exit animation — the surface unmounts immediately on close.\n exit: [],\n}));\n"],"names":["createPresenceComponent","motionTokens","fadeAtom","slideAtom","POSITIONING_SLIDE_DIRECTION_VAR_X","slideDirectionVarX","POSITIONING_SLIDE_DIRECTION_VAR_Y","slideDirectionVarY","duration","durationSlower","easing","curveDecelerateMid","PopoverSurfaceMotion","distance","enter","direction","outX","outY","composite","exit"],"mappings":";;;;+BAoBaY;;;;;;6BApByC,yBAAyB;8CAC3C,4CAA4C;kCAIzE,8BAA8B;AAErC,mDAAmD;AACnD,MAAMJ,WAAWP,yBAAAA,CAAaQ,cAAc;AAC5C,MAAMC,SAAST,yBAAAA,CAAaU,kBAAkB;AAWvC,iCAA6BX,oCAAAA,EAAwB,CAAC,EAAEa,WAAW,EAAE,EAAyB,GAAM,CAAA;QACzGC,OAAO;gBACLZ,sCAAAA,EAAS;gBAAEM;gBAAUE;gBAAQK,WAAW;YAAQ;YAChD;gBACE,qEAAqE;gBACrE,iFAAiF;gBACjF,0EAA0E;gBAC1E,GAAGZ,2CAAAA,EAAU;oBACXK;oBACAE;oBACAK,WAAW;oBACXC,MAAM,CAAC,SAAS,EAAEX,mDAAAA,CAAmB,SAAS,EAAEQ,SAAS,CAAC,CAAC;oBAC3DI,MAAM,CAAC,SAAS,EAAEV,mDAAAA,CAAmB,SAAS,EAAEM,SAAS,CAAC,CAAC;gBAC7D,EAAE;gBACF,gFAAgF;gBAChF,kFAAkF;gBAClFK,WAAW;YACb;SACD;QACD,iEAAiE;QACjEC,MAAM,EAAE;KACV,CAAA,GAAI"}

View File

@@ -0,0 +1,19 @@
/**
* The default value of the tooltip's border radius (borderRadiusMedium).
*
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
* While we could use getComputedStyle, that adds a performance penalty for something that
* will likely never change.
*
* @internal
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "popoverSurfaceBorderRadius", {
enumerable: true,
get: function() {
return popoverSurfaceBorderRadius;
}
});
const popoverSurfaceBorderRadius = 4;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/constants.ts"],"sourcesContent":["/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n *\n * @internal\n */\nexport const popoverSurfaceBorderRadius = 4;\n"],"names":["popoverSurfaceBorderRadius"],"mappings":"AAAA;;;;;;;;CAQC,GACD;;;;;;;;;;AAAO,MAAMA,6BAA6B,EAAE"}

View File

@@ -0,0 +1,27 @@
"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, {
Popover: function() {
return _Popover.Popover;
},
renderPopover_unstable: function() {
return _renderPopover.renderPopover_unstable;
},
usePopoverBase_unstable: function() {
return _usePopover.usePopoverBase_unstable;
},
usePopover_unstable: function() {
return _usePopover.usePopover_unstable;
}
});
const _Popover = require("./Popover");
const _renderPopover = require("./renderPopover");
const _usePopover = require("./usePopover");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/index.ts"],"sourcesContent":["export { Popover } from './Popover';\nexport type {\n OnOpenChangeData,\n OpenPopoverEvents,\n PopoverBaseProps,\n PopoverProps,\n PopoverSize,\n PopoverBaseState,\n PopoverState,\n} from './Popover.types';\nexport { renderPopover_unstable } from './renderPopover';\nexport { usePopover_unstable, usePopoverBase_unstable } from './usePopover';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverBase_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAUPC,qCAAsB;;;eACDE,mCAAuB;;;eAA5CD,+BAAmB;;;yBAXJ,YAAY;+BAUG,kBAAkB;4BACI,eAAe"}

View File

@@ -0,0 +1,47 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderPopover_unstable", {
enumerable: true,
get: function() {
return renderPopover_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactmotion = require("@fluentui/react-motion");
const _popoverContext = require("../../popoverContext");
const renderPopover_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { appearance, arrowRef, contentRef, inline, mountNode, open, openOnContext, openOnHover, setOpen, size, toggleOpen, trapFocus, triggerRef, withArrow, inertTrapFocus } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_popoverContext.PopoverContext.Provider, {
value: {
appearance,
arrowRef,
contentRef,
inline,
mountNode,
open,
openOnContext,
openOnHover,
setOpen,
toggleOpen,
triggerRef,
size,
trapFocus,
inertTrapFocus,
withArrow
},
children: [
state.popoverTrigger,
state.popoverSurface && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarder, {
children: state.popoverSurface
})
})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots, type JSXElement } from '@fluentui/react-utilities';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { PopoverContext } from '../../popoverContext';\nimport type { InternalPopoverSlots, PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState): JSXElement => {\n assertSlots<InternalPopoverSlots>(state);\n\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n inertTrapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n inertTrapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.popoverSurface && (\n <state.surfaceMotion>\n <MotionRefForwarder>\n {/* Casting here as content should be equivalent to <PopoverSurface /> */}\n {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n {state.popoverSurface as React.ReactElement}\n </MotionRefForwarder>\n </state.surfaceMotion>\n )}\n </PopoverContext.Provider>\n );\n};\n"],"names":["React","assertSlots","MotionRefForwarder","PopoverContext","renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","Provider","value","popoverTrigger","popoverSurface","surfaceMotion"],"mappings":";;;;+BAYaI;;;;;;;4BAXb,iCAAiD;iEAE1B,QAAQ;gCACc,4BAA4B;6BACtC,yBAAyB;gCAC7B,uBAAuB;AAM/C,+BAA+B,CAACC;QACrCJ,2BAAAA,EAAkCI;IAElC,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,OAAO,EACPC,IAAI,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACf,GAAGf;IAEJ,OAAA,WAAA,OACE,gBAAA,EAACF,8BAAAA,CAAekB,QAAQ,EAAA;QACtBC,OAAO;YACLhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAH;YACAE;YACAG;YACAD;QACF;;YAECd,MAAMkB,cAAc;YACpBlB,MAAMmB,cAAc,IAAA,WAAA,OACnB,eAAA,EAACnB,MAAMoB,aAAa,EAAA;0BAClB,WAAA,OAAA,eAAA,EAACvB,+BAAAA,EAAAA;8BAGEG,MAAMmB,cAAc;;;;;AAMjC,EAAE"}

View File

@@ -0,0 +1,243 @@
'use client';
"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, {
usePopoverBase_unstable: function() {
return usePopoverBase_unstable;
},
usePopover_unstable: function() {
return usePopover_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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactpositioning = require("@fluentui/react-positioning");
const _reacttabster = require("@fluentui/react-tabster");
const _index = require("../PopoverSurface/index");
const _constants = require("./constants");
const _reactmotion = require("@fluentui/react-motion");
const _PopoverSurfaceMotion = require("./PopoverSurfaceMotion");
const usePopover_unstable = (props)=>{
const { appearance, size = 'medium' } = props;
const positioning = (0, _reactpositioning.resolvePositioningShorthand)(props.positioning);
const withArrow = props.withArrow && !positioning.coverTarget;
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const handlePositionEnd = (0, _reactpositioning.usePositioningSlideDirection)({
targetDocument,
onPositioningEnd: positioning.onPositioningEnd
});
const state = usePopoverBase_unstable({
...props,
positioning: {
...positioning,
onPositioningEnd: handlePositionEnd,
// Update the offset with the arrow size only when it's available
...withArrow ? {
offset: (0, _reactpositioning.mergeArrowOffset)(positioning.offset, _index.arrowHeights[size])
} : {}
}
});
return {
components: {
surfaceMotion: _PopoverSurfaceMotion.PopoverSurfaceMotion
},
appearance,
size,
...state,
surfaceMotion: (0, _reactmotion.presenceMotionSlot)(props.surfaceMotion, {
elementType: _PopoverSurfaceMotion.PopoverSurfaceMotion,
defaultProps: {
visible: state.open,
appear: true,
unmountOnExit: true
}
})
};
};
const usePopoverBase_unstable = (props)=>{
const [contextTarget, setContextTarget] = (0, _reactpositioning.usePositioningMouseTarget)();
const initialState = {
contextTarget,
setContextTarget,
...props
};
const children = _react.Children.toArray(props.children);
if (process.env.NODE_ENV !== 'production') {
if (children.length === 0) {
// eslint-disable-next-line no-console
console.warn('Popover must contain at least one child');
}
if (children.length > 2) {
// eslint-disable-next-line no-console
console.warn('Popover must contain at most two children');
}
}
let popoverTrigger = undefined;
let popoverSurface = undefined;
if (children.length === 2) {
popoverTrigger = children[0];
popoverSurface = children[1];
} else if (children.length === 1) {
popoverSurface = children[0];
}
const [open, setOpenState] = useOpenState(initialState);
const [setOpenTimeout, clearOpenTimeout] = (0, _reactutilities.useTimeout)();
const setOpen = (0, _reactutilities.useEventCallback)((e, shouldOpen)=>{
clearOpenTimeout();
if (!(e instanceof Event) && e.persist) {
// < React 17 still uses pooled synthetic events
e.persist();
}
if (e.type === 'mouseleave') {
var _props_mouseLeaveDelay;
// FIXME leaking Node timeout type
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
setOpenTimeout(()=>{
setOpenState(e, shouldOpen);
}, (_props_mouseLeaveDelay = props.mouseLeaveDelay) !== null && _props_mouseLeaveDelay !== void 0 ? _props_mouseLeaveDelay : 500);
} else {
setOpenState(e, shouldOpen);
}
});
const toggleOpen = _react.useCallback((e)=>{
setOpen(e, !open);
}, [
setOpen,
open
]);
const positioningRefs = usePopoverRefs(initialState);
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
var _props_closeOnIframeFocus;
(0, _reactutilities.useOnClickOutside)({
contains: _reactutilities.elementContains,
element: targetDocument,
callback: (ev)=>setOpen(ev, false),
refs: [
positioningRefs.triggerRef,
positioningRefs.contentRef
],
disabled: !open,
disabledFocusOnIframe: !((_props_closeOnIframeFocus = props.closeOnIframeFocus) !== null && _props_closeOnIframeFocus !== void 0 ? _props_closeOnIframeFocus : true)
});
// only close on scroll for context, or when closeOnScroll is specified
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
(0, _reactutilities.useOnScrollOutside)({
contains: _reactutilities.elementContains,
element: targetDocument,
callback: (ev)=>setOpen(ev, false),
refs: [
positioningRefs.triggerRef,
positioningRefs.contentRef
],
disabled: !open || !closeOnScroll
});
const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
const activateModal = (0, _reacttabster.useActivateModal)();
_react.useEffect(()=>{
if (props.unstable_disableAutoFocus) {
return;
}
const contentElement = positioningRefs.contentRef.current;
if (open && contentElement) {
var _contentElement_getAttribute;
const shouldFocusContainer = !isNaN((_contentElement_getAttribute = contentElement.getAttribute('tabIndex')) !== null && _contentElement_getAttribute !== void 0 ? _contentElement_getAttribute : undefined);
const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
if (shouldFocusContainer) {
// Modal activation happens automatically when something inside the modal is focused programmatically.
// When the container is focused, we need to activate the modal manually.
activateModal(contentElement);
}
}
}, [
findFirstFocusable,
activateModal,
open,
positioningRefs.contentRef,
props.unstable_disableAutoFocus
]);
var _props_inertTrapFocus, _props_inline;
return {
...initialState,
...positioningRefs,
// eslint-disable-next-line @typescript-eslint/no-deprecated
inertTrapFocus: (_props_inertTrapFocus = props.inertTrapFocus) !== null && _props_inertTrapFocus !== void 0 ? _props_inertTrapFocus : props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus,
popoverTrigger,
popoverSurface,
open,
setOpen,
toggleOpen,
setContextTarget,
contextTarget,
inline: (_props_inline = props.inline) !== null && _props_inline !== void 0 ? _props_inline : false
};
};
/**
* Creates and manages the Popover open state
*/ function useOpenState(state) {
'use no memo';
const onOpenChange = (0, _reactutilities.useEventCallback)((e, data)=>{
var _state_onOpenChange;
return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
});
const [open, setOpenState] = (0, _reactutilities.useControllableState)({
state: state.open,
defaultState: state.defaultOpen,
initialState: false
});
state.open = open !== undefined ? open : state.open;
const setContextTarget = state.setContextTarget;
const setOpen = _react.useCallback((e, shouldOpen)=>{
if (shouldOpen && e.type === 'contextmenu') {
setContextTarget(e);
}
if (!shouldOpen) {
setContextTarget(undefined);
}
setOpenState(shouldOpen);
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
open: shouldOpen
});
}, [
setOpenState,
onOpenChange,
setContextTarget
]);
return [
open,
setOpen
];
}
/**
* Creates and sets the necessary trigger, target and content refs used by Popover
*/ function usePopoverRefs(state) {
'use no memo';
const positioningOptions = {
position: 'above',
align: 'center',
arrowPadding: 2 * _constants.popoverSurfaceBorderRadius,
target: state.openOnContext ? state.contextTarget : undefined,
...(0, _reactpositioning.resolvePositioningShorthand)(state.positioning)
};
// no reason to render arrow when covering the target
if (positioningOptions.coverTarget) {
state.withArrow = false;
}
const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = (0, _reactpositioning.usePositioning)(positioningOptions);
return {
triggerRef,
contentRef,
arrowRef
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "PopoverSurface", {
enumerable: true,
get: function() {
return PopoverSurface;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _usePopoverSurface = require("./usePopoverSurface");
const _renderPopoverSurface = require("./renderPopoverSurface");
const _usePopoverSurfaceStylesstyles = require("./usePopoverSurfaceStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const PopoverSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _usePopoverSurface.usePopoverSurface_unstable)(props, ref);
(0, _usePopoverSurfaceStylesstyles.usePopoverSurfaceStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('usePopoverSurfaceStyles_unstable')(state);
return (0, _renderPopoverSurface.renderPopoverSurface_unstable)(state);
});
PopoverSurface.displayName = 'PopoverSurface';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n const state = usePopoverSurface_unstable(props, ref);\n\n usePopoverSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;qCAGxC,kCAAkC;AAKvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\nexport type PopoverSurfaceBaseProps = PopoverSurfaceProps;\n\n/**\n * PopoverSurface State\n */\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n\nexport type PopoverSurfaceBaseState = Omit<PopoverSurfaceState, 'appearance' | 'size'>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,37 @@
"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, {
PopoverSurface: function() {
return _PopoverSurface.PopoverSurface;
},
arrowHeights: function() {
return _usePopoverSurfaceStylesstyles.arrowHeights;
},
popoverSurfaceClassNames: function() {
return _usePopoverSurfaceStylesstyles.popoverSurfaceClassNames;
},
renderPopoverSurface_unstable: function() {
return _renderPopoverSurface.renderPopoverSurface_unstable;
},
usePopoverSurfaceBase_unstable: function() {
return _usePopoverSurface.usePopoverSurfaceBase_unstable;
},
usePopoverSurfaceStyles_unstable: function() {
return _usePopoverSurfaceStylesstyles.usePopoverSurfaceStyles_unstable;
},
usePopoverSurface_unstable: function() {
return _usePopoverSurface.usePopoverSurface_unstable;
}
});
const _PopoverSurface = require("./PopoverSurface");
const _renderPopoverSurface = require("./renderPopoverSurface");
const _usePopoverSurface = require("./usePopoverSurface");
const _usePopoverSurfaceStylesstyles = require("./usePopoverSurfaceStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PopoverSurface/index.ts"],"sourcesContent":["export { PopoverSurface } from './PopoverSurface';\nexport type {\n PopoverSurfaceBaseProps,\n PopoverSurfaceProps,\n PopoverSurfaceSlots,\n PopoverSurfaceBaseState,\n PopoverSurfaceState,\n} from './PopoverSurface.types';\nexport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nexport { usePopoverSurface_unstable, usePopoverSurfaceBase_unstable } from './usePopoverSurface';\nexport {\n arrowHeights,\n popoverSurfaceClassNames,\n usePopoverSurfaceStyles_unstable,\n} from './usePopoverSurfaceStyles.styles';\n"],"names":["PopoverSurface","renderPopoverSurface_unstable","usePopoverSurface_unstable","usePopoverSurfaceBase_unstable","arrowHeights","popoverSurfaceClassNames","usePopoverSurfaceStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAWrBI,2CAAY;;;eACZC,uDAAwB;;;eAJjBJ,mDAA6B;;;eACDE,iDAA8B;;;eAIjEG,+DAAgC;;;eAJzBJ,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCACI,sBAAsB;+CAK1F,mCAAmC"}

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderPopoverSurface_unstable", {
enumerable: true,
get: function() {
return renderPopoverSurface_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactportal = require("@fluentui/react-portal");
const renderPopoverSurface_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const surface = /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.withArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
ref: state.arrowRef,
className: state.arrowClassName
}),
state.root.children
]
});
if (state.inline) {
return surface;
}
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
mountNode: state.mountNode,
children: surface
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState): JSXElement => {\n assertSlots<PopoverSurfaceSlots>(state);\n\n const surface = (\n <state.root>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.root.children}\n </state.root>\n );\n\n if (state.inline) {\n return surface;\n }\n\n return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"names":["assertSlots","Portal","renderPopoverSurface_unstable","state","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCACrB,4BAA4B;6BAEjC,yBAAyB;AAMzC,sCAAsC,CAACC;QAC5CH,2BAAAA,EAAiCG;IAEjC,MAAMC,UAAAA,WAAAA,OACJ,gBAAA,EAACD,MAAME,IAAI,EAAA;;YACRF,MAAMG,SAAS,IAAA,WAAA,OAAI,eAAA,EAACC,OAAAA;gBAAIC,KAAKL,MAAMM,QAAQ;gBAAEC,WAAWP,MAAMQ,cAAc;;YAC5ER,MAAME,IAAI,CAACO,QAAQ;;;IAIxB,IAAIT,MAAMU,MAAM,EAAE;QAChB,OAAOT;IACT;IAEA,OAAA,WAAA,OAAO,eAAA,EAACH,mBAAAA,EAAAA;QAAOa,WAAWX,MAAMW,SAAS;kBAAGV;;AAC9C,EAAE"}

View File

@@ -0,0 +1,94 @@
'use client';
"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, {
usePopoverSurfaceBase_unstable: function() {
return usePopoverSurfaceBase_unstable;
},
usePopoverSurface_unstable: function() {
return usePopoverSurface_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 _reactmotion = require("@fluentui/react-motion");
const usePopoverSurface_unstable = (props, ref)=>{
const size = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.size);
const appearance = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.appearance);
const motionForwardedRef = (0, _reactmotion.useMotionForwardedRef)();
const state = usePopoverSurfaceBase_unstable(props, (0, _reactutilities.useMergedRefs)(ref, motionForwardedRef));
return {
appearance,
size,
...state
};
};
const usePopoverSurfaceBase_unstable = (props, ref)=>{
const contentRef = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.contentRef);
const openOnHover = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.openOnHover);
const setOpen = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.setOpen);
const mountNode = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.mountNode);
const arrowRef = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.arrowRef);
const withArrow = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.withArrow);
const trapFocus = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.trapFocus);
const inertTrapFocus = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.inertTrapFocus);
const inline = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.inline);
const { modalAttributes } = (0, _reacttabster.useModalAttributes)({
trapFocus,
legacyTrapFocus: !inertTrapFocus,
alwaysFocusable: !trapFocus
});
const state = {
inline,
withArrow,
arrowRef,
mountNode,
components: {
root: 'div'
},
root: _reactutilities.slot.always({
ref: (0, _reactutilities.useMergedRefs)(ref, contentRef),
role: trapFocus ? 'dialog' : 'group',
'aria-modal': trapFocus ? true : undefined,
...modalAttributes,
...props
}, {
elementType: 'div'
})
};
const { onMouseEnter: onMouseEnterOriginal, onMouseLeave: onMouseLeaveOriginal, onKeyDown: onKeyDownOriginal } = state.root;
state.root.onMouseEnter = (e)=>{
if (openOnHover) {
setOpen(e, true);
}
onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
};
state.root.onMouseLeave = (e)=>{
if (openOnHover) {
setOpen(e, false);
}
onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
};
state.root.onKeyDown = (e)=>{
var _contentRef_current;
// only close if the event happened inside the current popover
// If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {
e.preventDefault();
setOpen(e, false);
}
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,246 @@
'use client';
"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, {
arrowHeights: function() {
return arrowHeights;
},
popoverSurfaceClassNames: function() {
return popoverSurfaceClassNames;
},
usePopoverSurfaceStyles_unstable: function() {
return usePopoverSurfaceStyles_unstable;
}
});
const _react = require("@griffel/react");
const popoverSurfaceClassNames = {
root: 'fui-PopoverSurface'
};
const arrowHeights = {
small: 6,
medium: 8,
large: 8
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
sj55zd: "f19n0e5",
De3pzq: "fxugw4r",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f9ggezi",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi",
Bhu2qc9: "fymb6k8"
},
inline: {
Bj3rh1h: "f19g0ac"
},
inverted: {
De3pzq: "fg3r6xk",
sj55zd: "fonrgv7"
},
brand: {
De3pzq: "ffp7eso",
sj55zd: "f1phragk"
},
smallPadding: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1sy4kr4"
},
mediumPadding: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f4zyqsv"
},
largePadding: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fop8ug2"
},
smallArrow: {
rhnwrx: "f1s3jn22",
Bdy53xb: "fv40uqz"
},
mediumLargeArrow: {
rhnwrx: "f1f72gjr",
Bdy53xb: "f69yoe5"
},
arrow: {
B7ck84d: "f1ewtqcl",
qhf8xq: "f1euv43f",
Bj3rh1h: "f1bsuimh",
De3pzq: "f1u2r49w",
B2eet1l: "fqhgnl",
Beyfa6y: "f17bz04i",
Bz10aip: "f36o3x3",
Bqenvij: "fzofk8q",
a9b677: "f1wbx1ie",
Ftih45: "f1wl9k8s",
Br0sdwz: "f1aocrix",
cmx5o7: "f1ljr5q2",
susq4k: 0,
Biibvgv: 0,
Bicfajf: 0,
qehafq: 0,
Brs5u8j: "f155f1qt",
Ccq8qp: "f9mhzq7",
Baz25je: "fr6rhvx",
Bcgcnre: 0,
Bqjgrrk: 0,
qa3bma: 0,
y0oebl: 0,
Biqmznv: 0,
Bm6vgfq: 0,
Bbv0w2i: 0,
uvfttm: 0,
eqrjj: 0,
Bk5zm6e: 0,
m598lv: 0,
B4f6apu: 0,
ydt019: 0,
Bq4z7u6: 0,
Bdkvgpv: 0,
B0qfbqy: 0,
kj8mxx: "f1kc0wz4",
r59vdv: "fgq90dz",
Bkw5xw4: "fq0y47f",
hl6cv3: "f1pwrbz6",
aea9ga: "f1hxxcvm",
yayu3t: "fw8rgyo",
Bhsv975: "f1wnzycx",
rhl9o9: "f1730wal",
B7gxrvb: "f1fy4ixr",
B6q6orb: "fobkauc",
B0lu1f8: "f16bqv1l"
}
}, {
d: [
".f19n0e5{color:var(--colorNeutralForeground1);}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f9ggezi{border:1px solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
".fymb6k8{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey));}",
".f19g0ac{z-index:1;}",
".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}",
".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
".ffp7eso{background-color:var(--colorBrandBackground);}",
".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
[
".f1sy4kr4{padding:12px;}",
{
p: -1
}
],
[
".f4zyqsv{padding:16px;}",
{
p: -1
}
],
[
".fop8ug2{padding:20px;}",
{
p: -1
}
],
".f1s3jn22{--fui-positioning-arrow-height:8.484px;}",
".fv40uqz{--fui-positioning-arrow-offset:-4.242px;}",
".f1f72gjr{--fui-positioning-arrow-height:11.312px;}",
".f69yoe5{--fui-positioning-arrow-offset:-5.656px;}",
".f1ewtqcl{box-sizing:border-box;}",
".f1euv43f{position:absolute;}",
".f1bsuimh{z-index:-1;}",
".f1u2r49w{background-color:inherit;}",
".fqhgnl{background-clip:content-box;}",
".f17bz04i{border-bottom-left-radius:var(--borderRadiusSmall);}",
".f36o3x3{transform:rotate(var(--fui-positioning-arrow-angle));}",
".fzofk8q{height:var(--fui-positioning-arrow-height);}",
".f1wbx1ie{width:var(--fui-positioning-arrow-height);}",
".f1wl9k8s::before{content:\"\";}",
".f1aocrix::before{display:block;}",
".f1ljr5q2::before{background-color:inherit;}",
[
".f155f1qt::before{margin:-1px;}",
{
p: -1
}
],
".f9mhzq7::before{width:100%;}",
".fr6rhvx::before{height:100%;}",
[
".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".fgq90dz::before{border-bottom-left-radius:var(--borderRadiusSmall);}",
".fq0y47f::before{clip-path:polygon(0% 0%, 100% 100%, 0% 100%);}",
"[data-popper-placement^=\"top\"] .f1pwrbz6{bottom:var(--fui-positioning-arrow-offset);}",
"[data-popper-placement^=\"top\"] .f1hxxcvm{--fui-positioning-arrow-angle:-45deg;}",
"[data-popper-placement^=\"right\"] .fw8rgyo{left:var(--fui-positioning-arrow-offset);}",
"[data-popper-placement^=\"right\"] .f1wnzycx{--fui-positioning-arrow-angle:45deg;}",
"[data-popper-placement^=\"bottom\"] .f1730wal{top:var(--fui-positioning-arrow-offset);}",
"[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}",
"[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}",
"[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"
]
});
const usePopoverSurfaceStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
state.arrowClassName = (0, _react.mergeClasses)(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,80 @@
'use client';
"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, {
arrowHeights: function() {
return arrowHeights;
},
popoverSurfaceClassNames: function() {
return popoverSurfaceClassNames;
},
usePopoverSurfaceStyles_unstable: function() {
return usePopoverSurfaceStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactpositioning = require("@fluentui/react-positioning");
const _reacttheme = require("@fluentui/react-theme");
const popoverSurfaceClassNames = {
root: 'fui-PopoverSurface'
};
const arrowHeights = {
small: 6,
medium: 8,
large: 8
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
color: _reacttheme.tokens.colorNeutralForeground1,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
..._reacttheme.typographyStyles.body1,
// TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter
filter: `drop-shadow(0 0 2px ${_reacttheme.tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${_reacttheme.tokens.colorNeutralShadowKey})`
},
inline: {
// When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.
// This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
zIndex: 1
},
inverted: {
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundStatic,
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
},
brand: {
backgroundColor: _reacttheme.tokens.colorBrandBackground,
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
smallPadding: {
padding: '12px'
},
mediumPadding: {
padding: '16px'
},
largePadding: {
padding: '20px'
},
smallArrow: (0, _reactpositioning.createArrowHeightStyles)(arrowHeights.small),
mediumLargeArrow: (0, _reactpositioning.createArrowHeightStyles)(arrowHeights.medium),
arrow: (0, _reactpositioning.createArrowStyles)({
arrowHeight: undefined
})
});
const usePopoverSurfaceStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
state.arrowClassName = (0, _react.mergeClasses)(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
return state;
};

File diff suppressed because one or more lines are too long

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

View File

@@ -0,0 +1,63 @@
"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, {
Popover: function() {
return _Popover.Popover;
},
PopoverProvider: function() {
return _popoverContext.PopoverProvider;
},
PopoverSurface: function() {
return _PopoverSurface.PopoverSurface;
},
PopoverTrigger: function() {
return _PopoverTrigger.PopoverTrigger;
},
arrowHeights: function() {
return _PopoverSurface.arrowHeights;
},
popoverSurfaceClassNames: function() {
return _PopoverSurface.popoverSurfaceClassNames;
},
renderPopoverSurface_unstable: function() {
return _PopoverSurface.renderPopoverSurface_unstable;
},
renderPopoverTrigger_unstable: function() {
return _PopoverTrigger.renderPopoverTrigger_unstable;
},
renderPopover_unstable: function() {
return _Popover.renderPopover_unstable;
},
usePopoverContext_unstable: function() {
return _popoverContext.usePopoverContext_unstable;
},
usePopoverSurfaceStyles_unstable: function() {
return _PopoverSurface.usePopoverSurfaceStyles_unstable;
},
usePopoverSurface_unstable: function() {
return _PopoverSurface.usePopoverSurface_unstable;
},
usePopoverTrigger_unstable: function() {
return _PopoverTrigger.usePopoverTrigger_unstable;
},
usePopover_unstable: function() {
return _Popover.usePopover_unstable;
}
});
const _Popover = require("./Popover");
const _PopoverSurface = require("./PopoverSurface");
const _popoverContext = require("./popoverContext");
const _PopoverTrigger = require("./PopoverTrigger");
// Experimental APIs
// export type { PopoverBaseProps, PopoverBaseState } from './Popover';
// export { usePopoverBase_unstable } from './Popover';
// export type { PopoverSurfaceBaseProps, PopoverSurfaceBaseState } from './PopoverSurface';
// export { usePopoverSurfaceBase_unstable } from './PopoverSurface';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Popover, renderPopover_unstable, usePopover_unstable } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } from './Popover';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n} from './PopoverSurface';\nexport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface';\nexport { PopoverProvider, usePopoverContext_unstable } from './popoverContext';\nexport type { PopoverContextValue } from './popoverContext';\nexport { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';\nexport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger';\n\n// Experimental APIs\n// export type { PopoverBaseProps, PopoverBaseState } from './Popover';\n// export { usePopoverBase_unstable } from './Popover';\n// export type { PopoverSurfaceBaseProps, PopoverSurfaceBaseState } from './PopoverSurface';\n// export { usePopoverSurfaceBase_unstable } from './PopoverSurface';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable","PopoverProvider","usePopoverContext_unstable","PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":";;;;;;;;;;;IAASA,OAAO;;;mBAWQ;eAAfS;;;eARPN,8BAAc;;;eAUPQ,8BAAc;;;eATrBP,4BAAY;;;eACZC,wCAAwB;;;eACxBC,6CAA6B;;;eAONM,6CAA6B;;;eAbpCX,+BAAsB;;;eAWdS,0CAA0B;;;eAJlDH,gDAAgC;;;eAChCC,0CAA0B;;;eAK4BK,0CAA0B;;;eAbxCX,4BAAmB;;;yBAAQ,YAAY;gCAS1E,mBAAmB;gCAEkC,mBAAmB;gCAEW,mBAAmB;CAG7G,oBAAoB;CACpB,uEAAuE;CACvE,uDAAuD;CACvD,4FAA4F;CAC5F,qEAAqE"}

View File

@@ -0,0 +1,45 @@
'use client';
"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, {
PopoverContext: function() {
return PopoverContext;
},
PopoverProvider: function() {
return PopoverProvider;
},
usePopoverContext_unstable: function() {
return usePopoverContext_unstable;
}
});
const _reactcontextselector = require("@fluentui/react-context-selector");
const PopoverContext = (0, _reactcontextselector.createContext)(undefined);
const popoverContextDefaultValue = {
open: false,
setOpen: ()=>null,
toggleOpen: ()=>null,
triggerRef: {
current: null
},
contentRef: {
current: null
},
arrowRef: {
current: null
},
openOnContext: false,
openOnHover: false,
size: 'medium',
trapFocus: false,
inline: false
};
const PopoverProvider = PopoverContext.Provider;
const usePopoverContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(PopoverContext, (ctx = popoverContextDefaultValue)=>selector(ctx));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/popoverContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue | undefined>(\n undefined,\n) as Context<PopoverContextValue>;\nconst popoverContextDefaultValue: PopoverContextValue = {\n open: false,\n setOpen: () => null,\n toggleOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium' as const,\n trapFocus: false,\n inline: false,\n};\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n | 'open'\n | 'toggleOpen'\n | 'setOpen'\n | 'triggerRef'\n | 'contentRef'\n | 'openOnHover'\n | 'openOnContext'\n | 'mountNode'\n | 'withArrow'\n | 'arrowRef'\n | 'size'\n | 'appearance'\n | 'trapFocus'\n | 'inertTrapFocus'\n | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","PopoverContext","undefined","popoverContextDefaultValue","open","setOpen","toggleOpen","triggerRef","current","contentRef","arrowRef","openOnContext","openOnHover","size","trapFocus","inline","PopoverProvider","Provider","usePopoverContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,cAAAA;;;mBAiBAe;;;8BAwBAE;;;;sCA7CqC,mCAAmC;AAI9E,2BAAqDnB,mCAAAA,EAC1DG,WACgC;AAClC,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,SAAS,IAAM;IACfC,YAAY,IAAM;IAClBC,YAAY;QAAEC,SAAS;IAAK;IAC5BC,YAAY;QAAED,SAAS;IAAK;IAC5BE,UAAU;QAAEF,SAAS;IAAK;IAC1BG,eAAe;IACfC,aAAa;IACbC,MAAM;IACNC,WAAW;IACXC,QAAQ;AACV;AAEO,MAAMC,kBAAkBf,eAAegB,QAAQ,CAAC;AAwBhD,MAAMC,6BAA6B,CAAIC,eAC5CnB,wCAAAA,EAAmBC,gBAAgB,CAACmB,MAAMjB,0BAA0B,GAAKgB,SAASC,MAAM"}

1
node_modules/@fluentui/react-popover/lib/Popover.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Popover, renderPopover_unstable, usePopover_unstable, usePopoverBase_unstable } from './components/Popover/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Popover.ts"],"sourcesContent":["export type {\n OnOpenChangeData,\n OpenPopoverEvents,\n PopoverBaseProps,\n PopoverProps,\n PopoverSize,\n PopoverBaseState,\n PopoverState,\n} from './components/Popover/index';\nexport {\n Popover,\n renderPopover_unstable,\n usePopover_unstable,\n usePopoverBase_unstable,\n} from './components/Popover/index';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverBase_unstable"],"mappings":"AASA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,mBAAmB,EACnBC,uBAAuB,QAClB,6BAA6B"}

View File

@@ -0,0 +1 @@
export { PopoverSurface, arrowHeights, popoverSurfaceClassNames, renderPopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverSurface_unstable, usePopoverSurfaceBase_unstable } from './components/PopoverSurface/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/PopoverSurface.ts"],"sourcesContent":["export type {\n PopoverSurfaceBaseProps,\n PopoverSurfaceProps,\n PopoverSurfaceSlots,\n PopoverSurfaceBaseState,\n PopoverSurfaceState,\n} from './components/PopoverSurface/index';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n usePopoverSurfaceBase_unstable,\n} from './components/PopoverSurface/index';\n"],"names":["PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable","usePopoverSurfaceBase_unstable"],"mappings":"AAOA,SACEA,cAAc,EACdC,YAAY,EACZC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,oCAAoC"}

View File

@@ -0,0 +1 @@
export { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './components/PopoverTrigger/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/PopoverTrigger.ts"],"sourcesContent":["export type {\n PopoverTriggerChildProps,\n PopoverTriggerProps,\n PopoverTriggerState,\n} from './components/PopoverTrigger/index';\nexport {\n PopoverTrigger,\n renderPopoverTrigger_unstable,\n usePopoverTrigger_unstable,\n} from './components/PopoverTrigger/index';\n"],"names":["PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":"AAKA,SACEA,cAAc,EACdC,6BAA6B,EAC7BC,0BAA0B,QACrB,oCAAoC"}

View File

@@ -0,0 +1,11 @@
'use client';
import * as React from 'react';
import { usePopover_unstable } from './usePopover';
import { renderPopover_unstable } from './renderPopover';
/**
* Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
*/ export const Popover = (props)=>{
const state = usePopover_unstable(props);
return renderPopover_unstable(state);
};
Popover.displayName = 'Popover';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n const state = usePopover_unstable(props);\n\n return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["React","usePopover_unstable","renderPopover_unstable","Popover","props","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQJ,oBAAoBG;IAElC,OAAOF,uBAAuBG;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG"}

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,40 @@
import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
import { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';
import { POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX, POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY } from '@fluentui/react-positioning';
// Shared timing constants for the enter animation.
const duration = motionTokens.durationSlower;
const easing = motionTokens.curveDecelerateMid;
/**
* Default `surfaceMotion` slot for `<Popover>`.
*
* Enter-only animation combining a fade and a direction-aware slide.
* The slide reads CSS variables set by `usePositioningSlideDirection` and scales
* them by `distance` pixels. There is no exit animation; the surface unmounts immediately.
*
* @param distance - Travel distance (px) for the enter slide. Defaults to `10`.
*/ export const PopoverSurfaceMotion = createPresenceComponent(({ distance = 10 })=>({
enter: [
fadeAtom({
duration,
easing,
direction: 'enter'
}),
{
// slideAtom produces translate keyframes from `outX`/`outY` → `0px`.
// The `outX`/`outY` values read the positioning-provided CSS variables and scale
// them by `distance` so the surface slides in from the correct direction.
...slideAtom({
duration,
easing,
direction: 'enter',
outX: `calc(var(${slideDirectionVarX}, 0px) * ${distance})`,
outY: `calc(var(${slideDirectionVarY}, 0px) * ${distance})`
}),
// 'accumulate' compositing adds this effect's transform on top of the element's
// existing transform, preserving any transform applied by the positioning engine.
composite: 'accumulate'
}
],
// No exit animation — the surface unmounts immediately on close.
exit: []
}));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/PopoverSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport {\n POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX,\n POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY,\n} from '@fluentui/react-positioning';\n\n// Shared timing constants for the enter animation.\nconst duration = motionTokens.durationSlower;\nconst easing = motionTokens.curveDecelerateMid;\n\n/**\n * Default `surfaceMotion` slot for `<Popover>`.\n *\n * Enter-only animation combining a fade and a direction-aware slide.\n * The slide reads CSS variables set by `usePositioningSlideDirection` and scales\n * them by `distance` pixels. There is no exit animation; the surface unmounts immediately.\n *\n * @param distance - Travel distance (px) for the enter slide. Defaults to `10`.\n */\nexport const PopoverSurfaceMotion = createPresenceComponent(({ distance = 10 }: { distance?: number }) => ({\n enter: [\n fadeAtom({ duration, easing, direction: 'enter' }),\n {\n // slideAtom produces translate keyframes from `outX`/`outY` → `0px`.\n // The `outX`/`outY` values read the positioning-provided CSS variables and scale\n // them by `distance` so the surface slides in from the correct direction.\n ...slideAtom({\n duration,\n easing,\n direction: 'enter',\n outX: `calc(var(${slideDirectionVarX}, 0px) * ${distance})`,\n outY: `calc(var(${slideDirectionVarY}, 0px) * ${distance})`,\n }),\n // 'accumulate' compositing adds this effect's transform on top of the element's\n // existing transform, preserving any transform applied by the positioning engine.\n composite: 'accumulate',\n },\n ],\n // No exit animation — the surface unmounts immediately on close.\n exit: [],\n}));\n"],"names":["createPresenceComponent","motionTokens","fadeAtom","slideAtom","POSITIONING_SLIDE_DIRECTION_VAR_X","slideDirectionVarX","POSITIONING_SLIDE_DIRECTION_VAR_Y","slideDirectionVarY","duration","durationSlower","easing","curveDecelerateMid","PopoverSurfaceMotion","distance","enter","direction","outX","outY","composite","exit"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,QAAQ,EAAEC,SAAS,QAAQ,4CAA4C;AAChF,SACEC,qCAAqCC,kBAAkB,EACvDC,qCAAqCC,kBAAkB,QAClD,8BAA8B;AAErC,mDAAmD;AACnD,MAAMC,WAAWP,aAAaQ,cAAc;AAC5C,MAAMC,SAAST,aAAaU,kBAAkB;AAE9C;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuBZ,wBAAwB,CAAC,EAAEa,WAAW,EAAE,EAAyB,GAAM,CAAA;QACzGC,OAAO;YACLZ,SAAS;gBAAEM;gBAAUE;gBAAQK,WAAW;YAAQ;YAChD;gBACE,qEAAqE;gBACrE,iFAAiF;gBACjF,0EAA0E;gBAC1E,GAAGZ,UAAU;oBACXK;oBACAE;oBACAK,WAAW;oBACXC,MAAM,CAAC,SAAS,EAAEX,mBAAmB,SAAS,EAAEQ,SAAS,CAAC,CAAC;oBAC3DI,MAAM,CAAC,SAAS,EAAEV,mBAAmB,SAAS,EAAEM,SAAS,CAAC,CAAC;gBAC7D,EAAE;gBACF,gFAAgF;gBAChF,kFAAkF;gBAClFK,WAAW;YACb;SACD;QACD,iEAAiE;QACjEC,MAAM,EAAE;IACV,CAAA,GAAI"}

View File

@@ -0,0 +1,9 @@
/**
* The default value of the tooltip's border radius (borderRadiusMedium).
*
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
* While we could use getComputedStyle, that adds a performance penalty for something that
* will likely never change.
*
* @internal
*/ export const popoverSurfaceBorderRadius = 4;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/constants.ts"],"sourcesContent":["/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n *\n * @internal\n */\nexport const popoverSurfaceBorderRadius = 4;\n"],"names":["popoverSurfaceBorderRadius"],"mappings":"AAAA;;;;;;;;CAQC,GACD,OAAO,MAAMA,6BAA6B,EAAE"}

View File

@@ -0,0 +1,3 @@
export { Popover } from './Popover';
export { renderPopover_unstable } from './renderPopover';
export { usePopover_unstable, usePopoverBase_unstable } from './usePopover';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/index.ts"],"sourcesContent":["export { Popover } from './Popover';\nexport type {\n OnOpenChangeData,\n OpenPopoverEvents,\n PopoverBaseProps,\n PopoverProps,\n PopoverSize,\n PopoverBaseState,\n PopoverState,\n} from './Popover.types';\nexport { renderPopover_unstable } from './renderPopover';\nexport { usePopover_unstable, usePopoverBase_unstable } from './usePopover';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverBase_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAUpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,eAAe"}

View File

@@ -0,0 +1,38 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import * as React from 'react';
import { assertSlots } from '@fluentui/react-utilities';
import { MotionRefForwarder } from '@fluentui/react-motion';
import { PopoverContext } from '../../popoverContext';
/**
* Render the final JSX of Popover
*/ export const renderPopover_unstable = (state)=>{
assertSlots(state);
const { appearance, arrowRef, contentRef, inline, mountNode, open, openOnContext, openOnHover, setOpen, size, toggleOpen, trapFocus, triggerRef, withArrow, inertTrapFocus } = state;
return /*#__PURE__*/ _jsxs(PopoverContext.Provider, {
value: {
appearance,
arrowRef,
contentRef,
inline,
mountNode,
open,
openOnContext,
openOnHover,
setOpen,
toggleOpen,
triggerRef,
size,
trapFocus,
inertTrapFocus,
withArrow
},
children: [
state.popoverTrigger,
state.popoverSurface && /*#__PURE__*/ _jsx(state.surfaceMotion, {
children: /*#__PURE__*/ _jsx(MotionRefForwarder, {
children: state.popoverSurface
})
})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots, type JSXElement } from '@fluentui/react-utilities';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { PopoverContext } from '../../popoverContext';\nimport type { InternalPopoverSlots, PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState): JSXElement => {\n assertSlots<InternalPopoverSlots>(state);\n\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n inertTrapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n inertTrapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.popoverSurface && (\n <state.surfaceMotion>\n <MotionRefForwarder>\n {/* Casting here as content should be equivalent to <PopoverSurface /> */}\n {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n {state.popoverSurface as React.ReactElement}\n </MotionRefForwarder>\n </state.surfaceMotion>\n )}\n </PopoverContext.Provider>\n );\n};\n"],"names":["React","assertSlots","MotionRefForwarder","PopoverContext","renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","Provider","value","popoverTrigger","popoverSurface","surfaceMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAyB,4BAA4B;AACzE,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,cAAc,QAAQ,uBAAuB;AAGtD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCJ,YAAkCI;IAElC,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,OAAO,EACPC,IAAI,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACf,GAAGf;IAEJ,qBACE,MAACF,eAAekB,QAAQ;QACtBC,OAAO;YACLhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAH;YACAE;YACAG;YACAD;QACF;;YAECd,MAAMkB,cAAc;YACpBlB,MAAMmB,cAAc,kBACnB,KAACnB,MAAMoB,aAAa;0BAClB,cAAA,KAACvB;8BAGEG,MAAMmB,cAAc;;;;;AAMjC,EAAE"}

View File

@@ -0,0 +1,238 @@
'use client';
import * as React from 'react';
import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside, elementContains, useTimeout } from '@fluentui/react-utilities';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget, usePositioningSlideDirection } from '@fluentui/react-positioning';
import { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';
import { arrowHeights } from '../PopoverSurface/index';
import { popoverSurfaceBorderRadius } from './constants';
import { presenceMotionSlot } from '@fluentui/react-motion';
import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
/**
* Create the state required to render Popover.
*
* The returned state can be modified with hooks such as usePopoverStyles,
* before being passed to renderPopover_unstable.
*
* @param props - props from this instance of Popover
*/ export const usePopover_unstable = (props)=>{
const { appearance, size = 'medium' } = props;
const positioning = resolvePositioningShorthand(props.positioning);
const withArrow = props.withArrow && !positioning.coverTarget;
const { targetDocument } = useFluent();
const handlePositionEnd = usePositioningSlideDirection({
targetDocument,
onPositioningEnd: positioning.onPositioningEnd
});
const state = usePopoverBase_unstable({
...props,
positioning: {
...positioning,
onPositioningEnd: handlePositionEnd,
// Update the offset with the arrow size only when it's available
...withArrow ? {
offset: mergeArrowOffset(positioning.offset, arrowHeights[size])
} : {}
}
});
return {
components: {
surfaceMotion: PopoverSurfaceMotion
},
appearance,
size,
...state,
surfaceMotion: presenceMotionSlot(props.surfaceMotion, {
elementType: PopoverSurfaceMotion,
defaultProps: {
visible: state.open,
appear: true,
unmountOnExit: true
}
})
};
};
/**
* Base hook that builds Popover state for behavior and structure only.
* Does not add design-related defaults such as appearance or size.
* Does not manage focus behavior, it's handled by `usePopoverFocusManagement_unstable`.
*
* @internal
* @param props - props from this instance of Popover
*/ export const usePopoverBase_unstable = (props)=>{
const [contextTarget, setContextTarget] = usePositioningMouseTarget();
const initialState = {
contextTarget,
setContextTarget,
...props
};
const children = React.Children.toArray(props.children);
if (process.env.NODE_ENV !== 'production') {
if (children.length === 0) {
// eslint-disable-next-line no-console
console.warn('Popover must contain at least one child');
}
if (children.length > 2) {
// eslint-disable-next-line no-console
console.warn('Popover must contain at most two children');
}
}
let popoverTrigger = undefined;
let popoverSurface = undefined;
if (children.length === 2) {
popoverTrigger = children[0];
popoverSurface = children[1];
} else if (children.length === 1) {
popoverSurface = children[0];
}
const [open, setOpenState] = useOpenState(initialState);
const [setOpenTimeout, clearOpenTimeout] = useTimeout();
const setOpen = useEventCallback((e, shouldOpen)=>{
clearOpenTimeout();
if (!(e instanceof Event) && e.persist) {
// < React 17 still uses pooled synthetic events
e.persist();
}
if (e.type === 'mouseleave') {
var _props_mouseLeaveDelay;
// FIXME leaking Node timeout type
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
setOpenTimeout(()=>{
setOpenState(e, shouldOpen);
}, (_props_mouseLeaveDelay = props.mouseLeaveDelay) !== null && _props_mouseLeaveDelay !== void 0 ? _props_mouseLeaveDelay : 500);
} else {
setOpenState(e, shouldOpen);
}
});
const toggleOpen = React.useCallback((e)=>{
setOpen(e, !open);
}, [
setOpen,
open
]);
const positioningRefs = usePopoverRefs(initialState);
const { targetDocument } = useFluent();
var _props_closeOnIframeFocus;
useOnClickOutside({
contains: elementContains,
element: targetDocument,
callback: (ev)=>setOpen(ev, false),
refs: [
positioningRefs.triggerRef,
positioningRefs.contentRef
],
disabled: !open,
disabledFocusOnIframe: !((_props_closeOnIframeFocus = props.closeOnIframeFocus) !== null && _props_closeOnIframeFocus !== void 0 ? _props_closeOnIframeFocus : true)
});
// only close on scroll for context, or when closeOnScroll is specified
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
useOnScrollOutside({
contains: elementContains,
element: targetDocument,
callback: (ev)=>setOpen(ev, false),
refs: [
positioningRefs.triggerRef,
positioningRefs.contentRef
],
disabled: !open || !closeOnScroll
});
const { findFirstFocusable } = useFocusFinders();
const activateModal = useActivateModal();
React.useEffect(()=>{
if (props.unstable_disableAutoFocus) {
return;
}
const contentElement = positioningRefs.contentRef.current;
if (open && contentElement) {
var _contentElement_getAttribute;
const shouldFocusContainer = !isNaN((_contentElement_getAttribute = contentElement.getAttribute('tabIndex')) !== null && _contentElement_getAttribute !== void 0 ? _contentElement_getAttribute : undefined);
const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
if (shouldFocusContainer) {
// Modal activation happens automatically when something inside the modal is focused programmatically.
// When the container is focused, we need to activate the modal manually.
activateModal(contentElement);
}
}
}, [
findFirstFocusable,
activateModal,
open,
positioningRefs.contentRef,
props.unstable_disableAutoFocus
]);
var _props_inertTrapFocus, _props_inline;
return {
...initialState,
...positioningRefs,
// eslint-disable-next-line @typescript-eslint/no-deprecated
inertTrapFocus: (_props_inertTrapFocus = props.inertTrapFocus) !== null && _props_inertTrapFocus !== void 0 ? _props_inertTrapFocus : props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus,
popoverTrigger,
popoverSurface,
open,
setOpen,
toggleOpen,
setContextTarget,
contextTarget,
inline: (_props_inline = props.inline) !== null && _props_inline !== void 0 ? _props_inline : false
};
};
/**
* Creates and manages the Popover open state
*/ function useOpenState(state) {
'use no memo';
const onOpenChange = useEventCallback((e, data)=>{
var _state_onOpenChange;
return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
});
const [open, setOpenState] = useControllableState({
state: state.open,
defaultState: state.defaultOpen,
initialState: false
});
state.open = open !== undefined ? open : state.open;
const setContextTarget = state.setContextTarget;
const setOpen = React.useCallback((e, shouldOpen)=>{
if (shouldOpen && e.type === 'contextmenu') {
setContextTarget(e);
}
if (!shouldOpen) {
setContextTarget(undefined);
}
setOpenState(shouldOpen);
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
open: shouldOpen
});
}, [
setOpenState,
onOpenChange,
setContextTarget
]);
return [
open,
setOpen
];
}
/**
* Creates and sets the necessary trigger, target and content refs used by Popover
*/ function usePopoverRefs(state) {
'use no memo';
const positioningOptions = {
position: 'above',
align: 'center',
arrowPadding: 2 * popoverSurfaceBorderRadius,
target: state.openOnContext ? state.contextTarget : undefined,
...resolvePositioningShorthand(state.positioning)
};
// no reason to render arrow when covering the target
if (positioningOptions.coverTarget) {
state.withArrow = false;
}
const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);
return {
triggerRef,
contentRef,
arrowRef
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { usePopoverSurface_unstable } from './usePopoverSurface';
import { renderPopoverSurface_unstable } from './renderPopoverSurface';
import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* PopoverSurface component renders react children in a positioned box
*/ export const PopoverSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = usePopoverSurface_unstable(props, ref);
usePopoverSurfaceStyles_unstable(state);
useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);
return renderPopoverSurface_unstable(state);
});
PopoverSurface.displayName = 'PopoverSurface';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n const state = usePopoverSurface_unstable(props, ref);\n\n usePopoverSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

View File

@@ -0,0 +1 @@
export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\nexport type PopoverSurfaceBaseProps = PopoverSurfaceProps;\n\n/**\n * PopoverSurface State\n */\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n\nexport type PopoverSurfaceBaseState = Omit<PopoverSurfaceState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AA4BA,WAAuF"}

View File

@@ -0,0 +1,4 @@
export { PopoverSurface } from './PopoverSurface';
export { renderPopoverSurface_unstable } from './renderPopoverSurface';
export { usePopoverSurface_unstable, usePopoverSurfaceBase_unstable } from './usePopoverSurface';
export { arrowHeights, popoverSurfaceClassNames, usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PopoverSurface/index.ts"],"sourcesContent":["export { PopoverSurface } from './PopoverSurface';\nexport type {\n PopoverSurfaceBaseProps,\n PopoverSurfaceProps,\n PopoverSurfaceSlots,\n PopoverSurfaceBaseState,\n PopoverSurfaceState,\n} from './PopoverSurface.types';\nexport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nexport { usePopoverSurface_unstable, usePopoverSurfaceBase_unstable } from './usePopoverSurface';\nexport {\n arrowHeights,\n popoverSurfaceClassNames,\n usePopoverSurfaceStyles_unstable,\n} from './usePopoverSurfaceStyles.styles';\n"],"names":["PopoverSurface","renderPopoverSurface_unstable","usePopoverSurface_unstable","usePopoverSurfaceBase_unstable","arrowHeights","popoverSurfaceClassNames","usePopoverSurfaceStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,sBAAsB;AACjG,SACEC,YAAY,EACZC,wBAAwB,EACxBC,gCAAgC,QAC3B,mCAAmC"}

View File

@@ -0,0 +1,24 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { Portal } from '@fluentui/react-portal';
/**
* Render the final JSX of PopoverSurface
*/ export const renderPopoverSurface_unstable = (state)=>{
assertSlots(state);
const surface = /*#__PURE__*/ _jsxs(state.root, {
children: [
state.withArrow && /*#__PURE__*/ _jsx("div", {
ref: state.arrowRef,
className: state.arrowClassName
}),
state.root.children
]
});
if (state.inline) {
return surface;
}
return /*#__PURE__*/ _jsx(Portal, {
mountNode: state.mountNode,
children: surface
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState): JSXElement => {\n assertSlots<PopoverSurfaceSlots>(state);\n\n const surface = (\n <state.root>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.root.children}\n </state.root>\n );\n\n if (state.inline) {\n return surface;\n }\n\n return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"names":["assertSlots","Portal","renderPopoverSurface_unstable","state","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAGhD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,MAAMC,wBACJ,MAACD,MAAME,IAAI;;YACRF,MAAMG,SAAS,kBAAI,KAACC;gBAAIC,KAAKL,MAAMM,QAAQ;gBAAEC,WAAWP,MAAMQ,cAAc;;YAC5ER,MAAME,IAAI,CAACO,QAAQ;;;IAIxB,IAAIT,MAAMU,MAAM,EAAE;QAChB,OAAOT;IACT;IAEA,qBAAO,KAACH;QAAOa,WAAWX,MAAMW,SAAS;kBAAGV;;AAC9C,EAAE"}

View File

@@ -0,0 +1,89 @@
'use client';
import * as React from 'react';
import { useMergedRefs, slot } from '@fluentui/react-utilities';
import { useModalAttributes } from '@fluentui/react-tabster';
import { usePopoverContext_unstable } from '../../popoverContext';
import { useMotionForwardedRef } from '@fluentui/react-motion';
/**
* Create the state required to render PopoverSurface.
*
* The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,
* before being passed to renderPopoverSurface_unstable.
*
* @param props - props from this instance of PopoverSurface
* @param ref - reference to root HTMLDivElement of PopoverSurface
*/ export const usePopoverSurface_unstable = (props, ref)=>{
const size = usePopoverContext_unstable((context)=>context.size);
const appearance = usePopoverContext_unstable((context)=>context.appearance);
const motionForwardedRef = useMotionForwardedRef();
const state = usePopoverSurfaceBase_unstable(props, useMergedRefs(ref, motionForwardedRef));
return {
appearance,
size,
...state
};
};
/**
* Base hook that builds PopoverSurface state for behavior and structure only.
*
* @internal
* @param props - User provided props to the PopoverSurface component.
* @param ref - User provided ref to be passed to the PopoverSurface component.
*/ export const usePopoverSurfaceBase_unstable = (props, ref)=>{
const contentRef = usePopoverContext_unstable((context)=>context.contentRef);
const openOnHover = usePopoverContext_unstable((context)=>context.openOnHover);
const setOpen = usePopoverContext_unstable((context)=>context.setOpen);
const mountNode = usePopoverContext_unstable((context)=>context.mountNode);
const arrowRef = usePopoverContext_unstable((context)=>context.arrowRef);
const withArrow = usePopoverContext_unstable((context)=>context.withArrow);
const trapFocus = usePopoverContext_unstable((context)=>context.trapFocus);
const inertTrapFocus = usePopoverContext_unstable((context)=>context.inertTrapFocus);
const inline = usePopoverContext_unstable((context)=>context.inline);
const { modalAttributes } = useModalAttributes({
trapFocus,
legacyTrapFocus: !inertTrapFocus,
alwaysFocusable: !trapFocus
});
const state = {
inline,
withArrow,
arrowRef,
mountNode,
components: {
root: 'div'
},
root: slot.always({
ref: useMergedRefs(ref, contentRef),
role: trapFocus ? 'dialog' : 'group',
'aria-modal': trapFocus ? true : undefined,
...modalAttributes,
...props
}, {
elementType: 'div'
})
};
const { onMouseEnter: onMouseEnterOriginal, onMouseLeave: onMouseLeaveOriginal, onKeyDown: onKeyDownOriginal } = state.root;
state.root.onMouseEnter = (e)=>{
if (openOnHover) {
setOpen(e, true);
}
onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
};
state.root.onMouseLeave = (e)=>{
if (openOnHover) {
setOpen(e, false);
}
onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
};
state.root.onKeyDown = (e)=>{
var _contentRef_current;
// only close if the event happened inside the current popover
// If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {
e.preventDefault();
setOpen(e, false);
}
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,164 @@
'use client';
import { __styles, mergeClasses } from '@griffel/react';
import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const popoverSurfaceClassNames = {
root: 'fui-PopoverSurface'
};
export const arrowHeights = {
small: 6,
medium: 8,
large: 8
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__styles({
root: {
sj55zd: "f19n0e5",
De3pzq: "fxugw4r",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f9ggezi",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi",
Bhu2qc9: "fymb6k8"
},
inline: {
Bj3rh1h: "f19g0ac"
},
inverted: {
De3pzq: "fg3r6xk",
sj55zd: "fonrgv7"
},
brand: {
De3pzq: "ffp7eso",
sj55zd: "f1phragk"
},
smallPadding: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1sy4kr4"
},
mediumPadding: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f4zyqsv"
},
largePadding: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fop8ug2"
},
smallArrow: {
rhnwrx: "f1s3jn22",
Bdy53xb: "fv40uqz"
},
mediumLargeArrow: {
rhnwrx: "f1f72gjr",
Bdy53xb: "f69yoe5"
},
arrow: {
B7ck84d: "f1ewtqcl",
qhf8xq: "f1euv43f",
Bj3rh1h: "f1bsuimh",
De3pzq: "f1u2r49w",
B2eet1l: "fqhgnl",
Beyfa6y: "f17bz04i",
Bz10aip: "f36o3x3",
Bqenvij: "fzofk8q",
a9b677: "f1wbx1ie",
Ftih45: "f1wl9k8s",
Br0sdwz: "f1aocrix",
cmx5o7: "f1ljr5q2",
susq4k: 0,
Biibvgv: 0,
Bicfajf: 0,
qehafq: 0,
Brs5u8j: "f155f1qt",
Ccq8qp: "f9mhzq7",
Baz25je: "fr6rhvx",
Bcgcnre: 0,
Bqjgrrk: 0,
qa3bma: 0,
y0oebl: 0,
Biqmznv: 0,
Bm6vgfq: 0,
Bbv0w2i: 0,
uvfttm: 0,
eqrjj: 0,
Bk5zm6e: 0,
m598lv: 0,
B4f6apu: 0,
ydt019: 0,
Bq4z7u6: 0,
Bdkvgpv: 0,
B0qfbqy: 0,
kj8mxx: "f1kc0wz4",
r59vdv: "fgq90dz",
Bkw5xw4: "fq0y47f",
hl6cv3: "f1pwrbz6",
aea9ga: "f1hxxcvm",
yayu3t: "fw8rgyo",
Bhsv975: "f1wnzycx",
rhl9o9: "f1730wal",
B7gxrvb: "f1fy4ixr",
B6q6orb: "fobkauc",
B0lu1f8: "f16bqv1l"
}
}, {
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], [".f9ggezi{border:1px solid var(--colorTransparentStroke);}", {
p: -2
}], ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fymb6k8{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey));}", ".f19g0ac{z-index:1;}", ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", [".f1sy4kr4{padding:12px;}", {
p: -1
}], [".f4zyqsv{padding:16px;}", {
p: -1
}], [".fop8ug2{padding:20px;}", {
p: -1
}], ".f1s3jn22{--fui-positioning-arrow-height:8.484px;}", ".fv40uqz{--fui-positioning-arrow-offset:-4.242px;}", ".f1f72gjr{--fui-positioning-arrow-height:11.312px;}", ".f69yoe5{--fui-positioning-arrow-offset:-5.656px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1euv43f{position:absolute;}", ".f1bsuimh{z-index:-1;}", ".f1u2r49w{background-color:inherit;}", ".fqhgnl{background-clip:content-box;}", ".f17bz04i{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f36o3x3{transform:rotate(var(--fui-positioning-arrow-angle));}", ".fzofk8q{height:var(--fui-positioning-arrow-height);}", ".f1wbx1ie{width:var(--fui-positioning-arrow-height);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1ljr5q2::before{background-color:inherit;}", [".f155f1qt::before{margin:-1px;}", {
p: -1
}], ".f9mhzq7::before{width:100%;}", ".fr6rhvx::before{height:100%;}", [".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}", {
p: -2
}], ".fgq90dz::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fq0y47f::before{clip-path:polygon(0% 0%, 100% 100%, 0% 100%);}", "[data-popper-placement^=\"top\"] .f1pwrbz6{bottom:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"top\"] .f1hxxcvm{--fui-positioning-arrow-angle:-45deg;}", "[data-popper-placement^=\"right\"] .fw8rgyo{left:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"right\"] .f1wnzycx{--fui-positioning-arrow-angle:45deg;}", "[data-popper-placement^=\"bottom\"] .f1730wal{top:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}", "[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"]
});
/**
* Apply styling to the PopoverSurface slots based on the state
*/
export const usePopoverSurfaceStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,61 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const popoverSurfaceClassNames = {
root: 'fui-PopoverSurface'
};
export const arrowHeights = {
small: 6,
medium: 8,
large: 8
};
/**
* Styles for the root slot
*/ const useStyles = makeStyles({
root: {
color: tokens.colorNeutralForeground1,
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: tokens.borderRadiusMedium,
border: `1px solid ${tokens.colorTransparentStroke}`,
...typographyStyles.body1,
// TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter
filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`
},
inline: {
// When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.
// This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
zIndex: 1
},
inverted: {
backgroundColor: tokens.colorNeutralBackgroundStatic,
color: tokens.colorNeutralForegroundStaticInverted
},
brand: {
backgroundColor: tokens.colorBrandBackground,
color: tokens.colorNeutralForegroundOnBrand
},
smallPadding: {
padding: '12px'
},
mediumPadding: {
padding: '16px'
},
largePadding: {
padding: '20px'
},
smallArrow: createArrowHeightStyles(arrowHeights.small),
mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),
arrow: createArrowStyles({
arrowHeight: undefined
})
});
/**
* Apply styling to the PopoverSurface slots based on the state
*/ export const usePopoverSurfaceStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -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;

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;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"}

View File

@@ -0,0 +1 @@
import * as React from '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":"AAEA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,3 @@
export { PopoverTrigger } from './PopoverTrigger';
export { renderPopoverTrigger_unstable } from './renderPopoverTrigger';
export { usePopoverTrigger_unstable } from './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":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB"}

View File

@@ -0,0 +1,5 @@
/**
* Render the final JSX of PopoverTrigger
*/ export 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,OAAO,MAAMA,gCAAgC,CAACC;IAC5C,OAAOA,MAAMC,QAAQ;AACvB,EAAE"}

View File

@@ -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))
};
};

File diff suppressed because one or more lines are too long

9
node_modules/@fluentui/react-popover/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1,9 @@
export { Popover, renderPopover_unstable, usePopover_unstable } from './Popover';
export { PopoverSurface, arrowHeights, popoverSurfaceClassNames, renderPopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverSurface_unstable } from './PopoverSurface';
export { PopoverProvider, usePopoverContext_unstable } from './popoverContext';
export { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';
// Experimental APIs
// export type { PopoverBaseProps, PopoverBaseState } from './Popover';
// export { usePopoverBase_unstable } from './Popover';
// export type { PopoverSurfaceBaseProps, PopoverSurfaceBaseState } from './PopoverSurface';
// export { usePopoverSurfaceBase_unstable } from './PopoverSurface';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Popover, renderPopover_unstable, usePopover_unstable } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } from './Popover';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n} from './PopoverSurface';\nexport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface';\nexport { PopoverProvider, usePopoverContext_unstable } from './popoverContext';\nexport type { PopoverContextValue } from './popoverContext';\nexport { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';\nexport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger';\n\n// Experimental APIs\n// export type { PopoverBaseProps, PopoverBaseState } from './Popover';\n// export { usePopoverBase_unstable } from './Popover';\n// export type { PopoverSurfaceBaseProps, PopoverSurfaceBaseState } from './PopoverSurface';\n// export { usePopoverSurfaceBase_unstable } from './PopoverSurface';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable","PopoverProvider","usePopoverContext_unstable","PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":"AAAA,SAASA,OAAO,EAAEC,sBAAsB,EAAEC,mBAAmB,QAAQ,YAAY;AAEjF,SACEC,cAAc,EACdC,YAAY,EACZC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SAASC,eAAe,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE/E,SAASC,cAAc,EAAEC,6BAA6B,EAAEC,0BAA0B,QAAQ,mBAAmB;CAG7G,oBAAoB;CACpB,uEAAuE;CACvE,uDAAuD;CACvD,4FAA4F;CAC5F,qEAAqE"}

View File

@@ -0,0 +1,24 @@
'use client';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
export const PopoverContext = createContext(undefined);
const popoverContextDefaultValue = {
open: false,
setOpen: ()=>null,
toggleOpen: ()=>null,
triggerRef: {
current: null
},
contentRef: {
current: null
},
arrowRef: {
current: null
},
openOnContext: false,
openOnHover: false,
size: 'medium',
trapFocus: false,
inline: false
};
export const PopoverProvider = PopoverContext.Provider;
export const usePopoverContext_unstable = (selector)=>useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue)=>selector(ctx));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/popoverContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue | undefined>(\n undefined,\n) as Context<PopoverContextValue>;\nconst popoverContextDefaultValue: PopoverContextValue = {\n open: false,\n setOpen: () => null,\n toggleOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium' as const,\n trapFocus: false,\n inline: false,\n};\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n | 'open'\n | 'toggleOpen'\n | 'setOpen'\n | 'triggerRef'\n | 'contentRef'\n | 'openOnHover'\n | 'openOnContext'\n | 'mountNode'\n | 'withArrow'\n | 'arrowRef'\n | 'size'\n | 'appearance'\n | 'trapFocus'\n | 'inertTrapFocus'\n | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","PopoverContext","undefined","popoverContextDefaultValue","open","setOpen","toggleOpen","triggerRef","current","contentRef","arrowRef","openOnContext","openOnHover","size","trapFocus","inline","PopoverProvider","Provider","usePopoverContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,iBAA+CF,cAC1DG,WACgC;AAClC,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,SAAS,IAAM;IACfC,YAAY,IAAM;IAClBC,YAAY;QAAEC,SAAS;IAAK;IAC5BC,YAAY;QAAED,SAAS;IAAK;IAC5BE,UAAU;QAAEF,SAAS;IAAK;IAC1BG,eAAe;IACfC,aAAa;IACbC,MAAM;IACNC,WAAW;IACXC,QAAQ;AACV;AAEA,OAAO,MAAMC,kBAAkBf,eAAegB,QAAQ,CAAC;AAwBvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5CnB,mBAAmBC,gBAAgB,CAACmB,MAAMjB,0BAA0B,GAAKgB,SAASC,MAAM"}

Some files were not shown because too many files have changed in this diff Show More