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

4307
node_modules/@fluentui/react-menu/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,15 @@
@fluentui/react-menu
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

3
node_modules/@fluentui/react-menu/README.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
# @fluentui/react-menu
**React Menu components for [Fluent UI React](https://react.fluentui.dev)**

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

@@ -0,0 +1,924 @@
import { ARIAButtonElement } from '@fluentui/react-aria';
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 type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import { PositioningVirtualElement } from '@fluentui/react-positioning';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import * as React_2 from 'react';
import { SetVirtualMouseTarget } from '@fluentui/react-positioning';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import type { TriggerProps } from '@fluentui/react-utilities';
import type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';
/**
* Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`
* @param el - element for the event target
* @param nativeEvent - the native mouse event this is mapped to
*/
export declare const dispatchMenuEnterEvent: (el: HTMLElement, nativeEvent: MouseEvent) => void;
declare type InternalMenuSlots = {
surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;
};
/**
* Wrapper component that manages state for a popup MenuList and a MenuTrigger
*/
export declare const Menu: React_2.FC<MenuProps>;
/**
* Name of the custom event
*/
export declare const MENU_ENTER_EVENT = "fuimenuenter";
export declare type MenuCheckedValueChangeData = {
/** The items for this value that are checked */
checkedItems: string[];
/** The name of the value */
name: string;
};
export declare type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
/**
* Context shared between Menu and its children components
*
* Extends and drills down MenuList props to simplify API
*/
export declare type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'mountNode' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'safeZone'> & {
open: boolean;
triggerId: string;
/**
* Default values to be checked on mount
* @deprecated this property is not used internally anymore,
* the signature remains just to avoid breaking changes
*/
defaultCheckedValues?: Record<string, string[]>;
};
export declare type MenuContextValues = {
menu: MenuContextValue;
};
/**
* Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.
*/
export declare const MenuDivider: ForwardRefComponent<MenuDividerProps>;
export declare const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;
export declare type MenuDividerProps = ComponentProps<MenuDividerSlots>;
export declare type MenuDividerSlots = {
root: Slot<'div'>;
};
export declare type MenuDividerState = ComponentState<MenuDividerSlots>;
/**
* Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
*/
export declare const MenuGroup: ForwardRefComponent<MenuGroupProps>;
export declare const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;
export declare const MenuGroupContextProvider: React_2.Provider<MenuGroupContextValue>;
/**
* Context used to guarantee correct aria-relationship between header
* and group information
*/
export declare type MenuGroupContextValue = {
/**
* Element id applied to the `MenuGroupHeader` component
*/
headerId: string;
};
export declare type MenuGroupContextValues = {
menuGroup: MenuGroupContextValue;
};
/**
* Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.
*/
export declare const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
export declare const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;
export declare type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;
export declare type MenuGroupHeaderSlots = {
root: Slot<'div'>;
};
export declare type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;
export declare type MenuGroupProps = ComponentProps<MenuGroupSlots>;
export declare type MenuGroupSlots = {
root: Slot<'div'>;
};
export declare type MenuGroupState = ComponentState<MenuGroupSlots> & {
/**
* id applied to the DOM element of `MenuGroupHeader`
*/
headerId: string;
};
/**
* Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.
*/
export declare const MenuItem: ForwardRefComponent<MenuItemProps>;
/**
* Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
*/
export declare const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
export declare const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
export declare type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;
export declare type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;
export declare const menuItemClassNames: SlotClassNames<MenuItemSlots>;
/**
* MenuItemLink component
*/
export declare const MenuItemLink: ForwardRefComponent<MenuItemLinkProps>;
export declare const menuItemLinkClassNames: SlotClassNames<MenuItemLinkSlots>;
/**
* MenuItemLink Props
*/
export declare type MenuItemLinkProps = ComponentProps<MenuItemLinkSlots> & Pick<MenuItemProps, 'disabled'> & {
href: string;
};
export declare type MenuItemLinkSlots = {
root: Slot<'a'>;
} & Pick<MenuItemSlots, 'icon' | 'content' | 'secondaryContent' | 'checkmark'>;
/**
* State used in rendering MenuItemLink
*/
export declare type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;
export declare type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> & Pick<Partial<MenuItemSlots>, 'content'> & {
/**
* If the menu item is a trigger for a submenu
*
* @default false
*/
hasSubmenu?: boolean;
/**
* Clicking on the menu item will not dismiss an open menu
*
* @default false
*/
persistOnClick?: boolean;
disabled?: boolean;
/**
* @deprecated this property does nothing.
* disabled focusable is by default by simply using `disabled` property
*/
disabledFocusable?: boolean;
};
/**
* Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
*/
export declare const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
export declare const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
export declare type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;
export declare type MenuItemRadioState = MenuItemState & MenuItemSelectableState;
/**
* Props for selecatble menu items
*/
export declare type MenuItemSelectableProps = {
/**
* Follows input convention
* https://www.w3schools.com/jsref/prop_checkbox_name.asp
*/
name: string;
/**
* Follows input convention
* https://www.w3schools.com/jsref/prop_checkbox_value.asp
*/
value: string;
};
/**
* State for selectable menu items
*/
export declare type MenuItemSelectableState = MenuItemSelectableProps & {
/**
* Selectable is checked
*/
checked: boolean;
};
export declare type MenuItemSlots = {
root: Slot<'div'>;
/**
* Icon slot rendered before children content
*/
icon?: Slot<'span'>;
/**
* A helper slot for alignment when a menu item is used with selectable menuitems
* Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
*/
checkmark?: Slot<'span'>;
/**
* Icon slot that shows the indicator for a submenu
*/
submenuIndicator?: Slot<'span'>;
/**
* Component children are placed in this slot
* Avoid using the `children` property in this slot in favour of Component children whenever possible
*/
content?: Slot<'span'>;
/**
* Secondary content rendered opposite the primary content (e.g Shortcut text)
*/
secondaryContent?: Slot<'span'>;
/**
* Additional descriptor to main content that creates a multiline layout
*/
subText?: Slot<'span'>;
};
export declare type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
export declare const MenuItemSwitch: ForwardRefComponent<MenuItemSwitchProps>;
export declare const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots>;
/**
* MenuItemSwitch Props
*/
export declare type MenuItemSwitchProps = ComponentProps<MenuItemSwitchSlots> & Pick<MenuItemCheckboxProps, 'disabled' | 'persistOnClick' | 'name' | 'value'>;
export declare type MenuItemSwitchSlots = Pick<MenuItemSlots, 'root' | 'content' | 'secondaryContent' | 'icon' | 'subText'> & {
switchIndicator?: Slot<'span'>;
};
/**
* State used in rendering MenuItemSwitch
*/
export declare type MenuItemSwitchState = ComponentState<MenuItemSwitchSlots> & MenuItemSelectableState & Required<Pick<MenuItemSwitchProps, 'disabled'>>;
/**
* Define a styled MenuList, using the `useMenuList_unstable` hook.
*/
export declare const MenuList: ForwardRefComponent<MenuListProps>;
export declare const menuListClassNames: SlotClassNames<MenuListSlots>;
/**
* Context shared between MenuList and its children components
*/
export declare type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIcons' | 'hasCheckmarks'> & {
setFocusByFirstCharacter?: (e: React_2.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
toggleCheckbox?: SelectableHandler;
selectRadio?: SelectableHandler;
/**
* Callback when checked items change for value with a name
*
* @param event - React's original SyntheticEvent
* @param data - A data object with relevant information
*
* @deprecated this property is not used internally anymore,
* the signature remains just to avoid breaking changes
*/
onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
/**
* Whether child menus (submenus) should open when the user presses the ArrowRight key on their trigger.
* Set to `false` when the list context is provided by a grid-like container (e.g. MenuGrid) where
* ArrowRight is reserved for column navigation.
*
* @default true
*/
shouldOpenOnArrowRight?: boolean;
/**
* Whether child menus (submenus) should close when the user presses the ArrowLeft key.
* Set to `false` when the list context is provided by a grid-like container (e.g. MenuGrid) where
* ArrowLeft is reserved for column navigation.
*
* @default true
*/
shouldCloseOnArrowLeft?: boolean;
};
export declare type MenuListContextValues = {
menuList: MenuListContextValue;
};
export declare type MenuListProps = ComponentProps<MenuListSlots> & {
/**
* Map of all checked values
*/
checkedValues?: Record<string, string[]>;
/**
* Default values to be checked on mount
*/
defaultCheckedValues?: Record<string, string[]>;
/**
* States that menu items can contain selectable items and reserve slots for item alignment
*/
hasCheckmarks?: boolean;
/**
* States that menu items can contain icons and reserve slots for item alignment
*/
hasIcons?: boolean;
/**
* Callback when checked items change for value with a name
*
* @param event - React's original SyntheticEvent
* @param data - A data object with relevant information
*/
onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
};
export declare const MenuListProvider: React_2.Provider<MenuListContextValue> & React_2.FC<React_2.ProviderProps<MenuListContextValue>>;
export declare type MenuListSlots = {
root: Slot<'div'>;
};
export declare type MenuListState = ComponentState<MenuListSlots> & Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> & Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
/**
* Selects a radio item, will de-select the currently selected ratio item
*/
selectRadio: SelectableHandler;
/**
* Callback to set focus on the next menu item by first character
*/
setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
toggleCheckbox: SelectableHandler;
/**
* States if the MenuList is inside MenuContext
*/
hasMenuContext?: boolean;
};
/**
* Data attached to open/close events
*/
export declare type MenuOpenChangeData = {
/**
* indicates whether the request for the open state was bubbled from a nested menu
*/
bubble?: boolean;
/**
* Indicates whether the change of state was a keyboard interaction
* @deprecated
* This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click
*/
keyboard?: boolean;
open: boolean;
} & ({
type: 'menuTriggerContextMenu';
event: React_2.MouseEvent<HTMLElement>;
} | {
type: 'menuTriggerClick';
event: React_2.MouseEvent<HTMLElement>;
} | {
type: 'menuTriggerMouseEnter';
event: React_2.MouseEvent<HTMLElement>;
} | {
type: 'menuSafeZoneMouseEnter';
event: React_2.MouseEvent;
} | {
type: 'menuSafeZoneTimeout';
event: Event;
} | {
type: 'menuTriggerMouseLeave';
event: React_2.MouseEvent<HTMLElement>;
} | {
type: 'menuTriggerMouseMove';
event: React_2.MouseEvent<HTMLElement>;
} | {
type: 'menuTriggerKeyDown';
event: React_2.KeyboardEvent<HTMLElement>;
} | {
type: 'menuItemClick';
event: React_2.MouseEvent<HTMLElement>;
} | {
type: 'menuPopoverMouseEnter';
event: React_2.MouseEvent<HTMLElement>;
} | {
type: 'menuPopoverKeyDown';
event: React_2.KeyboardEvent<HTMLElement>;
} | {
type: 'clickOutside';
event: MouseEvent | TouchEvent;
} | {
type: 'scrollOutside';
event: MouseEvent | TouchEvent;
} | {
type: 'menuMouseEnter';
event: MouseEvent | TouchEvent;
});
/**
* The supported events that will trigger open/close of the menu
*/
export declare type MenuOpenEvent = MenuOpenChangeData['event'];
/**
* @deprecated use MenuOpenEvent instead
*/
export declare type MenuOpenEvents = MenuOpenEvent;
/**
* Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
*/
export declare const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
export declare const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;
/**
* MenuPopover Props
*/
export declare type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
export declare type MenuPopoverSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering MenuPopover
*/
export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & Pick<PortalProps, 'mountNode'> & {
/**
* Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
* This option is disregarded for submenus
*/
inline: boolean;
safeZone?: React_2.ReactElement | null;
};
/**
* Extends and drills down Menulist props to simplify API
*/
export declare type MenuProps = ComponentProps<Partial<MenuSlots>> & Pick<PortalProps, 'mountNode'> & Pick<MenuListProps, 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'> & {
/**
* Can contain two children including `MenuTrigger` and `MenuPopover`.
* Alternatively can only contain `MenuPopover` if using a custom `target`.
*/
children: [JSXElement, JSXElement] | JSXElement;
/**
* Sets the delay for mouse open/close for the popover one mouse enter/leave
*/
hoverDelay?: number;
/**
* Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
* This option is disregarded for submenus
*
* @default false
*/
inline?: 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: MenuOpenEvent, data: MenuOpenChangeData) => void;
/**
* Whether the popup is open
*
* @default false
*/
open?: boolean;
/**
* Whether the popup is open by default
*
* @default false
*/
defaultOpen?: boolean;
/**
* Opens the menu on right click (context menu), removes all other menu open interactions
*
* @default false
*/
openOnContext?: boolean;
/**
* Opens the menu on hover
*
* @default false
*/
openOnHover?: boolean;
/**
* Do not dismiss the menu when a menu item is clicked
*
* @default false
*/
persistOnItemClick?: boolean;
/**
* Configures the positioned menu
*/
positioning?: PositioningShorthand;
/**
* Close when scroll outside of it
*
* @default false
*/
closeOnScroll?: boolean;
};
export declare const MenuProvider: React_2.Provider<MenuContextValue> & React_2.FC<React_2.ProviderProps<MenuContextValue>>;
export declare type MenuSlots = {
/**
* 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>;
};
/**
* Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
*/
export declare const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
export declare const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
declare type MenuSplitGroupContextValue = {
setMultiline: (multiline: boolean) => void;
};
declare type MenuSplitGroupContextValues = {
menuSplitGroup: MenuSplitGroupContextValue;
};
/**
* MenuSplitGroup Props
*/
export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;
export declare type MenuSplitGroupSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering MenuSplitGroup
*/
export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & Pick<MenuSplitGroupContextValue, 'setMultiline'>;
export declare type MenuState = ComponentState<InternalMenuSlots> & Required<Pick<MenuProps, 'hasCheckmarks' | 'hasIcons' | 'mountNode' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll' | 'hoverDelay' | 'openOnContext' | 'persistOnItemClick'>> & {
/**
* Anchors the popper to the mouse click for context events
*/
contextTarget?: PositioningVirtualElement;
/**
* Whether this menu is a submenu
*/
isSubmenu: boolean;
/**
* Internal react node that just simplifies handling children
*/
menuPopover: React_2.ReactNode;
/**
* The ref for the popup
*/
menuPopoverRef: React_2.MutableRefObject<HTMLElement | null>;
/**
* Internal react node that just simplifies handling children
*/
menuTrigger: React_2.ReactNode;
/**
* A callback to set the target of the popper to the mouse click for context events
*/
setContextTarget: SetVirtualMouseTarget;
/**
* Callback to open/close the popup
*/
setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData & {
ignoreHoverDelay?: boolean;
}) => void;
/**
* Id for the MenuTrigger element for aria relationship
*/
triggerId: string;
/**
* The ref for the MenuTrigger, used for popup positioning
*/
triggerRef: React_2.MutableRefObject<HTMLElement | null>;
/**
* Call back when the component requests to change value
* The `open` value is used as a hint when directly controlling the component
* @deprecated this property is not used internally anymore,
* the signature remains just to avoid breaking changes
*/
onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;
/**
* Default values to be checked on mount
@deprecated this property is not used internally anymore,
* the signature remains just to avoid breaking changes
*/
defaultCheckedValues?: Record<string, string[]>;
/**
* An optional safe zone area to be rendered around the menu
*/
safeZone?: React_2.ReactElement | null;
};
/**
* Wraps a trigger element as an only child
* and adds the necessary event handling to open a popup menu
*/
export declare const MenuTrigger: React_2.FC<MenuTriggerProps>;
/**
* Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu
*/
export declare type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
'aria-haspopup'?: 'menu';
'aria-expanded'?: boolean;
id: string;
ref: React_2.Ref<never>;
onMouseEnter: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
onMouseLeave: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
onMouseMove: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
onMouseOver?: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
onContextMenu: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
}>;
export declare const MenuTriggerContextProvider: React_2.Provider<boolean>;
export declare type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {
/**
* Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.
* @default false
*/
disableButtonEnhancement?: boolean;
};
export declare type MenuTriggerState = {
children: React_2.ReactElement | null;
isSubmenu: boolean;
};
/**
* Render the final JSX of Menu
*/
export declare const renderMenu_unstable: (state: MenuState, contextValues: MenuContextValues) => JSXElement;
/**
* Redefine the render function to add slots. Reuse the menudivider structure but add
* slots to children.
*/
export declare const renderMenuDivider_unstable: (state: MenuDividerState) => JSXElement;
/**
* Redefine the render function to add slots. Reuse the menugroup structure but add
* slots to children.
*/
export declare const renderMenuGroup_unstable: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSXElement;
/**
* Redefine the render function to add slots. Reuse the menugroupheader structure but add
* slots to children.
*/
export declare const renderMenuGroupHeader_unstable: (state: MenuGroupHeaderState) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderMenuItem_unstable: (state: MenuItemState) => JSXElement;
/** Function that renders the final JSX of the component */
export declare const renderMenuItemCheckbox_unstable: (state: MenuItemCheckboxState) => JSXElement;
/**
* Render the final JSX of MenuItemLink
*/
export declare const renderMenuItemLink_unstable: (state: MenuItemLinkState) => JSXElement;
/**
* Redefine the render function to add slots. Reuse the menuitemradio structure but add
* slots to children.
*/
export declare const renderMenuItemRadio_unstable: (state: MenuItemRadioState) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderMenuItemSwitch_unstable: (state: MenuItemSwitchState) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderMenuList_unstable: (state: MenuListState, contextValues: MenuListContextValues) => JSXElement;
/**
* Render the final JSX of MenuPopover
*/
export declare const renderMenuPopover_unstable: (state: MenuPopoverState) => JSXElement;
/**
* Render the final JSX of MenuSplitGroup
*/
export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState, contexts?: MenuSplitGroupContextValues) => JSXElement;
/**
* Render the final JSX of MenuTrigger
*
* Only renders children
*/
export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JSXElement;
export declare type SelectableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked: boolean) => void;
/**
* @deprecated this type is not being used internally anymore
*/
export declare type UninitializedMenuListState = Omit<MenuListState, 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'> & Partial<Pick<MenuListState, 'checkedValues'>>;
/**
* Applies styles to a checkmark slot for selectable menu items
*
* @param state - should contain a `checkmark` slot
*/
export declare const useCheckmarkStyles_unstable: (state: MenuItemSelectableState & Pick<MenuItemState, "checkmark">) => void;
/**
* Create the state required to render Menu.
*
* The returned state can be modified with hooks such as useMenuStyles,
* before being passed to renderMenu_unstable.
*
* @param props - props from this instance of Menu
*/
export declare const useMenu_unstable: (props: MenuProps & {
safeZone?: boolean | {
timeout?: number;
};
}) => MenuState;
export declare const useMenuContext_unstable: <T>(selector: ContextSelector<MenuContextValue, T>) => T;
export declare function useMenuContextValues_unstable(state: MenuState): MenuContextValues;
/**
* Given user props, returns state and render function for a MenuDivider.
*/
export declare const useMenuDivider_unstable: (props: MenuDividerProps, ref: React_2.Ref<HTMLElement>) => MenuDividerState;
export declare const useMenuDividerStyles_unstable: (state: MenuDividerState) => MenuDividerState;
/**
* Given user props, returns state and render function for a MenuGroup.
*/
export declare function useMenuGroup_unstable(props: MenuGroupProps, ref: React_2.Ref<HTMLElement>): MenuGroupState;
export declare const useMenuGroupContext_unstable: () => MenuGroupContextValue;
export declare function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues;
/**
* Given user props, returns state and render function for a MenuGroupHeader.
*/
export declare function useMenuGroupHeader_unstable(props: MenuGroupHeaderProps, ref: React_2.Ref<HTMLElement>): MenuGroupHeaderState;
export declare const useMenuGroupHeaderStyles_unstable: (state: MenuGroupHeaderState) => MenuGroupHeaderState;
export declare const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupState;
/**
* Returns the props and state required to render the component
*/
export declare const useMenuItem_unstable: (props: MenuItemProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemState;
/** Returns the props and state required to render the component */
export declare const useMenuItemCheckbox_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemCheckboxState;
export declare const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => MenuItemCheckboxState;
/**
* Create the state required to render MenuItemLink.
*
* The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,
* before being passed to renderMenuItemLink_unstable.
*
* @param props - props from this instance of MenuItemLink
* @param ref - reference to root HTMLElement of MenuItemLink
*/
export declare const useMenuItemLink_unstable: (props: MenuItemLinkProps, ref: React_2.Ref<HTMLAnchorElement>) => MenuItemLinkState;
/**
* Apply styling to the MenuItemLink slots based on the state
*/
export declare const useMenuItemLinkStyles_unstable: (state: MenuItemLinkState) => MenuItemLinkState;
/**
* Given user props, returns state and render function for a MenuItemRadio.
*/
export declare const useMenuItemRadio_unstable: (props: MenuItemRadioProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemRadioState;
export declare const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void;
/** Applies style classnames to slots */
export declare const useMenuItemStyles_unstable: (state: MenuItemState) => MenuItemState;
/**
* Create the state required to render MenuItemSwitch.
*
* The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,
* before being passed to renderMenuItemSwitch_unstable.
*
* @param props - props from this instance of MenuItemSwitch
* @param ref - reference to root HTMLDivElement of MenuItemSwitch
*/
export declare const useMenuItemSwitch_unstable: (props: MenuItemSwitchProps, ref: React_2.Ref<HTMLDivElement>) => MenuItemSwitchState;
/**
* Apply styling to the MenuItemSwitch slots based on the state
*/
export declare const useMenuItemSwitchStyles_unstable: (state: MenuItemSwitchState) => MenuItemSwitchState;
/**
* Returns the props and state required to render the component
*/
export declare const useMenuList_unstable: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
export declare const useMenuListContext_unstable: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;
export declare function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues;
/**
* Apply styling to the Menu slots based on the state
*/
export declare const useMenuListStyles_unstable: (state: MenuListState) => MenuListState;
/**
* Create the state required to render MenuPopover.
*
* The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
* before being passed to renderMenuPopover_unstable.
*
* @param props - props from this instance of MenuPopover
* @param ref - reference to root HTMLElement of MenuPopover
*/
export declare const useMenuPopover_unstable: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
/**
* Apply styling to the Menu slots based on the state
*/
export declare const useMenuPopoverStyles_unstable: (state: MenuPopoverState) => MenuPopoverState;
/**
* Create the state required to render MenuSplitGroup.
*
* The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,
* before being passed to renderMenuSplitGroup_unstable.
*
* @param props - props from this instance of MenuSplitGroup
* @param ref - reference to root HTMLElement of MenuSplitGroup
*/
export declare const useMenuSplitGroup_unstable: (props: MenuSplitGroupProps, ref: React_2.Ref<HTMLElement>) => MenuSplitGroupState;
/**
* Apply styling to the MenuSplitGroup slots based on the state
*/
export declare const useMenuSplitGroupStyles_unstable: (state: MenuSplitGroupState) => MenuSplitGroupState;
/**
* Create the state required to render MenuTrigger.
* Clones the only child component and adds necessary event handling behaviours to open a popup menu
*
* @param props - props from this instance of MenuTrigger
*/
export declare const useMenuTrigger_unstable: (props: MenuTriggerProps) => MenuTriggerState;
export declare const useMenuTriggerContext_unstable: () => boolean;
/**
* This hook works similarly to @see useOnClickOutside
*
* Problem: Trying to behave the same as system menus:
* When the mouse leaves a stack of nested menus the stack should not dismiss.
* However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.
*
* We don't use the native mouseenter event because it would trigger too many times in the document
* Instead, dispatch custom DOM event from the menu so that it can bubble
* Each nested menu can use the listener to check if the event is from a child or parent menu
*/
export declare const useOnMenuMouseEnter: (options: UseOnClickOrScrollOutsideOptions) => void;
export { }

25
node_modules/@fluentui/react-menu/lib-commonjs/Menu.js generated vendored Normal file
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, {
Menu: function() {
return _index.Menu;
},
renderMenu_unstable: function() {
return _index.renderMenu_unstable;
},
useMenuContextValues_unstable: function() {
return _index.useMenuContextValues_unstable;
},
useMenu_unstable: function() {
return _index.useMenu_unstable;
}
});
const _index = require("./components/Menu/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Menu.ts"],"sourcesContent":["export type {\n MenuContextValues,\n MenuOpenChangeData,\n MenuOpenEvent,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n MenuOpenEvents,\n MenuProps,\n MenuSlots,\n MenuState,\n} from './components/Menu/index';\nexport { Menu, renderMenu_unstable, useMenuContextValues_unstable, useMenu_unstable } from './components/Menu/index';\n"],"names":["Menu","renderMenu_unstable","useMenuContextValues_unstable","useMenu_unstable"],"mappings":";;;;;;;;;;;;eAUSA,WAAI;;;eAAEC,0BAAmB;;;eAAEC,oCAA6B;;;eAAEC,uBAAgB;;;uBAAQ,0BAA0B"}

View File

@@ -0,0 +1,28 @@
"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, {
MenuDivider: function() {
return _index.MenuDivider;
},
menuDividerClassNames: function() {
return _index.menuDividerClassNames;
},
renderMenuDivider_unstable: function() {
return _index.renderMenuDivider_unstable;
},
useMenuDividerStyles_unstable: function() {
return _index.useMenuDividerStyles_unstable;
},
useMenuDivider_unstable: function() {
return _index.useMenuDivider_unstable;
}
});
const _index = require("./components/MenuDivider/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuDivider.ts"],"sourcesContent":["export type { MenuDividerProps, MenuDividerSlots, MenuDividerState } from './components/MenuDivider/index';\nexport {\n MenuDivider,\n menuDividerClassNames,\n renderMenuDivider_unstable,\n useMenuDividerStyles_unstable,\n useMenuDivider_unstable,\n} from './components/MenuDivider/index';\n"],"names":["MenuDivider","menuDividerClassNames","renderMenuDivider_unstable","useMenuDividerStyles_unstable","useMenuDivider_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,31 @@
"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, {
MenuGroup: function() {
return _index.MenuGroup;
},
menuGroupClassNames: function() {
return _index.menuGroupClassNames;
},
renderMenuGroup_unstable: function() {
return _index.renderMenuGroup_unstable;
},
useMenuGroupContextValues_unstable: function() {
return _index.useMenuGroupContextValues_unstable;
},
useMenuGroupStyles_unstable: function() {
return _index.useMenuGroupStyles_unstable;
},
useMenuGroup_unstable: function() {
return _index.useMenuGroup_unstable;
}
});
const _index = require("./components/MenuGroup/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuGroup.ts"],"sourcesContent":["export type {\n MenuGroupContextValues,\n MenuGroupProps,\n MenuGroupSlots,\n MenuGroupState,\n} from './components/MenuGroup/index';\nexport {\n MenuGroup,\n menuGroupClassNames,\n renderMenuGroup_unstable,\n useMenuGroupContextValues_unstable,\n useMenuGroupStyles_unstable,\n useMenuGroup_unstable,\n} from './components/MenuGroup/index';\n"],"names":["MenuGroup","menuGroupClassNames","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useMenuGroup_unstable"],"mappings":";;;;;;;;;;;;eAOEA,gBAAS;;;eACTC,0BAAmB;;;eACnBC,+BAAwB;;;eACxBC,yCAAkC;;;eAClCC,kCAA2B;;;eAC3BC,4BAAqB;;;uBAChB,+BAA+B"}

View File

@@ -0,0 +1,28 @@
"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, {
MenuGroupHeader: function() {
return _index.MenuGroupHeader;
},
menuGroupHeaderClassNames: function() {
return _index.menuGroupHeaderClassNames;
},
renderMenuGroupHeader_unstable: function() {
return _index.renderMenuGroupHeader_unstable;
},
useMenuGroupHeaderStyles_unstable: function() {
return _index.useMenuGroupHeaderStyles_unstable;
},
useMenuGroupHeader_unstable: function() {
return _index.useMenuGroupHeader_unstable;
}
});
const _index = require("./components/MenuGroupHeader/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuGroupHeader.ts"],"sourcesContent":["export type {\n MenuGroupHeaderProps,\n MenuGroupHeaderSlots,\n MenuGroupHeaderState,\n} from './components/MenuGroupHeader/index';\nexport {\n MenuGroupHeader,\n menuGroupHeaderClassNames,\n renderMenuGroupHeader_unstable,\n useMenuGroupHeaderStyles_unstable,\n useMenuGroupHeader_unstable,\n} from './components/MenuGroupHeader/index';\n"],"names":["MenuGroupHeader","menuGroupHeaderClassNames","renderMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","useMenuGroupHeader_unstable"],"mappings":";;;;;;;;;;;;eAMEA,sBAAe;;;eACfC,gCAAyB;;;eACzBC,qCAA8B;;;eAC9BC,wCAAiC;;;eACjCC,kCAA2B;;;uBACtB,qCAAqC"}

View File

@@ -0,0 +1,31 @@
"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, {
MenuItem: function() {
return _index.MenuItem;
},
menuItemClassNames: function() {
return _index.menuItemClassNames;
},
renderMenuItem_unstable: function() {
return _index.renderMenuItem_unstable;
},
useMenuItemBase_unstable: function() {
return _index.useMenuItemBase_unstable;
},
useMenuItemStyles_unstable: function() {
return _index.useMenuItemStyles_unstable;
},
useMenuItem_unstable: function() {
return _index.useMenuItem_unstable;
}
});
const _index = require("./components/MenuItem/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuItem.ts"],"sourcesContent":["export type { MenuItemProps, MenuItemSlots, MenuItemState } from './components/MenuItem/index';\nexport {\n MenuItem,\n menuItemClassNames,\n renderMenuItem_unstable,\n useMenuItemStyles_unstable,\n useMenuItem_unstable,\n useMenuItemBase_unstable,\n} from './components/MenuItem/index';\n"],"names":["MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemStyles_unstable","useMenuItem_unstable","useMenuItemBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAGvBG,+BAAwB;;;eAFxBF,iCAA0B;;;eAC1BC,2BAAoB;;;uBAEf,8BAA8B"}

View File

@@ -0,0 +1,31 @@
"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, {
MenuItemCheckbox: function() {
return _index.MenuItemCheckbox;
},
menuItemCheckboxClassNames: function() {
return _index.menuItemCheckboxClassNames;
},
renderMenuItemCheckbox_unstable: function() {
return _index.renderMenuItemCheckbox_unstable;
},
useMenuItemCheckboxBase_unstable: function() {
return _index.useMenuItemCheckboxBase_unstable;
},
useMenuItemCheckboxStyles_unstable: function() {
return _index.useMenuItemCheckboxStyles_unstable;
},
useMenuItemCheckbox_unstable: function() {
return _index.useMenuItemCheckbox_unstable;
}
});
const _index = require("./components/MenuItemCheckbox/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuItemCheckbox.ts"],"sourcesContent":["export type { MenuItemCheckboxProps, MenuItemCheckboxState } from './components/MenuItemCheckbox/index';\nexport {\n MenuItemCheckbox,\n menuItemCheckboxClassNames,\n renderMenuItemCheckbox_unstable,\n useMenuItemCheckboxStyles_unstable,\n useMenuItemCheckbox_unstable,\n useMenuItemCheckboxBase_unstable,\n} from './components/MenuItemCheckbox/index';\n"],"names":["MenuItemCheckbox","menuItemCheckboxClassNames","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useMenuItemCheckbox_unstable","useMenuItemCheckboxBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,uBAAgB;;;eAChBC,iCAA0B;;;eAC1BC,sCAA+B;;;eAG/BG,uCAAgC;;;eAFhCF,yCAAkC;;;eAClCC,mCAA4B;;;uBAEvB,sCAAsC"}

View File

@@ -0,0 +1,28 @@
"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, {
MenuItemLink: function() {
return _index.MenuItemLink;
},
menuItemLinkClassNames: function() {
return _index.menuItemLinkClassNames;
},
renderMenuItemLink_unstable: function() {
return _index.renderMenuItemLink_unstable;
},
useMenuItemLinkStyles_unstable: function() {
return _index.useMenuItemLinkStyles_unstable;
},
useMenuItemLink_unstable: function() {
return _index.useMenuItemLink_unstable;
}
});
const _index = require("./components/MenuItemLink/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuItemLink.ts"],"sourcesContent":["export type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './components/MenuItemLink/index';\nexport {\n MenuItemLink,\n menuItemLinkClassNames,\n renderMenuItemLink_unstable,\n useMenuItemLinkStyles_unstable,\n useMenuItemLink_unstable,\n} from './components/MenuItemLink/index';\n"],"names":["MenuItemLink","menuItemLinkClassNames","renderMenuItemLink_unstable","useMenuItemLinkStyles_unstable","useMenuItemLink_unstable"],"mappings":";;;;;;;;;;;;eAEEA,mBAAY;;;eACZC,6BAAsB;;;eACtBC,kCAA2B;;;eAC3BC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,kCAAkC"}

View File

@@ -0,0 +1,31 @@
"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, {
MenuItemRadio: function() {
return _index.MenuItemRadio;
},
menuItemRadioClassNames: function() {
return _index.menuItemRadioClassNames;
},
renderMenuItemRadio_unstable: function() {
return _index.renderMenuItemRadio_unstable;
},
useMenuItemRadioBase_unstable: function() {
return _index.useMenuItemRadioBase_unstable;
},
useMenuItemRadioStyles_unstable: function() {
return _index.useMenuItemRadioStyles_unstable;
},
useMenuItemRadio_unstable: function() {
return _index.useMenuItemRadio_unstable;
}
});
const _index = require("./components/MenuItemRadio/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuItemRadio.ts"],"sourcesContent":["export type { MenuItemRadioProps, MenuItemRadioState } from './components/MenuItemRadio/index';\nexport {\n MenuItemRadio,\n menuItemRadioClassNames,\n renderMenuItemRadio_unstable,\n useMenuItemRadioStyles_unstable,\n useMenuItemRadio_unstable,\n useMenuItemRadioBase_unstable,\n} from './components/MenuItemRadio/index';\n"],"names":["MenuItemRadio","menuItemRadioClassNames","renderMenuItemRadio_unstable","useMenuItemRadioStyles_unstable","useMenuItemRadio_unstable","useMenuItemRadioBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,oBAAa;;;eACbC,8BAAuB;;;eACvBC,mCAA4B;;;eAG5BG,oCAA6B;;;eAF7BF,sCAA+B;;;eAC/BC,gCAAyB;;;uBAEpB,mCAAmC"}

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, {
MenuItemSwitch: function() {
return _index.MenuItemSwitch;
},
circleFilledClassName: function() {
return _index.circleFilledClassName;
},
menuItemSwitchClassNames: function() {
return _index.menuItemSwitchClassNames;
},
renderMenuItemSwitch_unstable: function() {
return _index.renderMenuItemSwitch_unstable;
},
useMenuItemSwitchBase_unstable: function() {
return _index.useMenuItemSwitchBase_unstable;
},
useMenuItemSwitchStyles_unstable: function() {
return _index.useMenuItemSwitchStyles_unstable;
},
useMenuItemSwitch_unstable: function() {
return _index.useMenuItemSwitch_unstable;
}
});
const _index = require("./components/MenuItemSwitch/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuItemSwitch.ts"],"sourcesContent":["export type { MenuItemSwitchProps, MenuItemSwitchSlots, MenuItemSwitchState } from './components/MenuItemSwitch/index';\nexport {\n MenuItemSwitch,\n circleFilledClassName,\n menuItemSwitchClassNames,\n renderMenuItemSwitch_unstable,\n useMenuItemSwitchStyles_unstable,\n useMenuItemSwitch_unstable,\n useMenuItemSwitchBase_unstable,\n} from './components/MenuItemSwitch/index';\n"],"names":["MenuItemSwitch","circleFilledClassName","menuItemSwitchClassNames","renderMenuItemSwitch_unstable","useMenuItemSwitchStyles_unstable","useMenuItemSwitch_unstable","useMenuItemSwitchBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,qBAAc;;;eACdC,4BAAqB;;;eACrBC,+BAAwB;;;eACxBC,oCAA6B;;;eAG7BG,qCAA8B;;;eAF9BF,uCAAgC;;;eAChCC,iCAA0B;;;uBAErB,oCAAoC"}

View File

@@ -0,0 +1,31 @@
"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, {
MenuList: function() {
return _index.MenuList;
},
menuListClassNames: function() {
return _index.menuListClassNames;
},
renderMenuList_unstable: function() {
return _index.renderMenuList_unstable;
},
useMenuListContextValues_unstable: function() {
return _index.useMenuListContextValues_unstable;
},
useMenuListStyles_unstable: function() {
return _index.useMenuListStyles_unstable;
},
useMenuList_unstable: function() {
return _index.useMenuList_unstable;
}
});
const _index = require("./components/MenuList/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuList.ts"],"sourcesContent":["export type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './components/MenuList/index';\nexport {\n MenuList,\n menuListClassNames,\n renderMenuList_unstable,\n useMenuListContextValues_unstable,\n useMenuListStyles_unstable,\n useMenuList_unstable,\n} from './components/MenuList/index';\n"],"names":["MenuList","menuListClassNames","renderMenuList_unstable","useMenuListContextValues_unstable","useMenuListStyles_unstable","useMenuList_unstable"],"mappings":";;;;;;;;;;;;eAWEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,wCAAiC;;;eACjCC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}

View File

@@ -0,0 +1,28 @@
"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, {
MenuPopover: function() {
return _index.MenuPopover;
},
menuPopoverClassNames: function() {
return _index.menuPopoverClassNames;
},
renderMenuPopover_unstable: function() {
return _index.renderMenuPopover_unstable;
},
useMenuPopoverStyles_unstable: function() {
return _index.useMenuPopoverStyles_unstable;
},
useMenuPopover_unstable: function() {
return _index.useMenuPopover_unstable;
}
});
const _index = require("./components/MenuPopover/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuPopover.ts"],"sourcesContent":["export type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './components/MenuPopover/index';\nexport {\n MenuPopover,\n menuPopoverClassNames,\n renderMenuPopover_unstable,\n useMenuPopoverStyles_unstable,\n useMenuPopover_unstable,\n} from './components/MenuPopover/index';\n"],"names":["MenuPopover","menuPopoverClassNames","renderMenuPopover_unstable","useMenuPopoverStyles_unstable","useMenuPopover_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"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, {
MenuSplitGroup: function() {
return _index.MenuSplitGroup;
},
menuSplitGroupClassNames: function() {
return _index.menuSplitGroupClassNames;
},
renderMenuSplitGroup_unstable: function() {
return _index.renderMenuSplitGroup_unstable;
},
useMenuSplitGroupStyles_unstable: function() {
return _index.useMenuSplitGroupStyles_unstable;
},
useMenuSplitGroup_unstable: function() {
return _index.useMenuSplitGroup_unstable;
}
});
const _index = require("./components/MenuSplitGroup/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuSplitGroup.ts"],"sourcesContent":["export type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './components/MenuSplitGroup/index';\nexport {\n MenuSplitGroup,\n menuSplitGroupClassNames,\n renderMenuSplitGroup_unstable,\n useMenuSplitGroupStyles_unstable,\n useMenuSplitGroup_unstable,\n} from './components/MenuSplitGroup/index';\n"],"names":["MenuSplitGroup","menuSplitGroupClassNames","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useMenuSplitGroup_unstable"],"mappings":";;;;;;;;;;;;eAEEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,uCAAgC;;;eAChCC,iCAA0B;;;uBACrB,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, {
MenuTrigger: function() {
return _index.MenuTrigger;
},
renderMenuTrigger_unstable: function() {
return _index.renderMenuTrigger_unstable;
},
useMenuTrigger_unstable: function() {
return _index.useMenuTrigger_unstable;
}
});
const _index = require("./components/MenuTrigger/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuTrigger.ts"],"sourcesContent":["export type { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './components/MenuTrigger/index';\nexport { MenuTrigger, renderMenuTrigger_unstable, useMenuTrigger_unstable } from './components/MenuTrigger/index';\n"],"names":["MenuTrigger","renderMenuTrigger_unstable","useMenuTrigger_unstable"],"mappings":";;;;;;;;;;;;eACSA,kBAAW;;;eAAEC,iCAA0B;;;eAAEC,8BAAuB;;;uBAAQ,iCAAiC"}

View File

@@ -0,0 +1,22 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Menu", {
enumerable: true,
get: function() {
return Menu;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenu = require("./useMenu");
const _useMenuContextValues = require("./useMenuContextValues");
const _renderMenu = require("./renderMenu");
const Menu = (props)=>{
const state = (0, _useMenu.useMenu_unstable)(props);
const contextValues = (0, _useMenuContextValues.useMenuContextValues_unstable)(state);
return (0, _renderMenu.renderMenu_unstable)(state, contextValues);
};
Menu.displayName = 'Menu';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n const state = useMenu_unstable(props);\n const contextValues = useMenuContextValues_unstable(state);\n\n return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"names":["React","useMenu_unstable","useMenuContextValues_unstable","renderMenu_unstable","Menu","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;yBACE,YAAY;sCACC,yBAAyB;4BACnC,eAAe;AAM5C,MAAMI,OAA4BC,CAAAA;IACvC,MAAMC,YAAQL,yBAAAA,EAAiBI;IAC/B,MAAME,oBAAgBL,mDAAAA,EAA8BI;IAEpD,WAAOH,+BAAAA,EAAoBG,OAAOC;AACpC,EAAE;AAEFH,KAAKI,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, "MenuSurfaceMotion", {
enumerable: true,
get: function() {
return MenuSurfaceMotion;
}
});
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 MenuSurfaceMotion = (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/Menu/MenuSurfaceMotion.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 `<Menu>`.\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 MenuSurfaceMotion = 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","MenuSurfaceMotion","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,8BAA0BX,oCAAAA,EAAwB,CAAC,EAAEa,WAAW,EAAE,EAAyB,GAAM,CAAA;QACtGC,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,28 @@
"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, {
Menu: function() {
return _Menu.Menu;
},
renderMenu_unstable: function() {
return _renderMenu.renderMenu_unstable;
},
useMenuContextValues_unstable: function() {
return _useMenuContextValues.useMenuContextValues_unstable;
},
useMenu_unstable: function() {
return _useMenu.useMenu_unstable;
}
});
const _Menu = require("./Menu");
const _renderMenu = require("./renderMenu");
const _useMenu = require("./useMenu");
const _useMenuContextValues = require("./useMenuContextValues");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Menu/index.ts"],"sourcesContent":["export { Menu } from './Menu';\nexport type {\n MenuContextValues,\n MenuOpenChangeData,\n MenuOpenEvent,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n MenuOpenEvents,\n MenuProps,\n MenuSlots,\n MenuState,\n} from './Menu.types';\nexport { renderMenu_unstable } from './renderMenu';\nexport { useMenu_unstable } from './useMenu';\nexport { useMenuContextValues_unstable } from './useMenuContextValues';\n"],"names":["Menu","renderMenu_unstable","useMenu_unstable","useMenuContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,UAAI;;;eAWJC,+BAAmB;;;eAEnBE,mDAA6B;;;eAD7BD,yBAAgB;;;sBAZJ,SAAS;4BAWM,eAAe;yBAClB,YAAY;sCACC,yBAAyB"}

View File

@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenu_unstable", {
enumerable: true,
get: function() {
return renderMenu_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 _reactmotion = require("@fluentui/react-motion");
const _reactutilities = require("@fluentui/react-utilities");
const _menuContext = require("../../contexts/menuContext");
const renderMenu_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_menuContext.MenuProvider, {
value: contextValues.menu,
children: [
state.menuTrigger,
state.menuPopover && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarder, {
children: state.menuPopover
})
})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Menu/renderMenu.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { InternalMenuSlots, MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues): JSXElement => {\n assertSlots<InternalMenuSlots>(state);\n\n return (\n <MenuProvider value={contextValues.menu}>\n {state.menuTrigger}\n {state.menuPopover && (\n <state.surfaceMotion>\n <MotionRefForwarder>\n {/* Casting here as content should be equivalent to <MenuPopover /> */}\n {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n {state.menuPopover as React.ReactElement}\n </MotionRefForwarder>\n </state.surfaceMotion>\n )}\n </MenuProvider>\n );\n};\n"],"names":["React","MotionRefForwarder","assertSlots","MenuProvider","renderMenu_unstable","state","contextValues","value","menu","menuTrigger","menuPopover","surfaceMotion"],"mappings":";;;;+BAaaI;;;;;;;4BAZb,iCAAiD;iEAE1B,QAAQ;6BACI,yBAAyB;gCAChC,4BAA4B;6BAE3B,6BAA6B;AAMnD,4BAA4B,CAACC,OAAkBC;QACpDJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,gBAAA,EAACF,yBAAAA,EAAAA;QAAaI,OAAOD,cAAcE,IAAI;;YACpCH,MAAMI,WAAW;YACjBJ,MAAMK,WAAW,IAAA,WAAA,OAChB,eAAA,EAACL,MAAMM,aAAa,EAAA;0BAClB,WAAA,OAAA,eAAA,EAACV,+BAAAA,EAAAA;8BAGEI,MAAMK,WAAW;;;;;AAM9B,EAAE"}

View File

@@ -0,0 +1,345 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenu_unstable", {
enumerable: true,
get: function() {
return useMenu_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactpositioning = require("@fluentui/react-positioning");
const _reactmotion = require("@fluentui/react-motion");
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reacttabster = require("@fluentui/react-tabster");
const _menuContext = require("../../contexts/menuContext");
const _utils = require("../../utils");
const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
const _MenuSurfaceMotion = require("./MenuSurfaceMotion");
// If it's not possible to position the submenu in smaller viewports, try
// and fallback to this order of positions
const submenuFallbackPositions = [
'after',
'after-bottom',
'before-top',
'before',
'before-bottom',
'above'
];
const useMenu_unstable = (props)=>{
const isSubmenu = (0, _utils.useIsSubmenu)();
const { hoverDelay = 500, inline = false, hasCheckmarks = false, hasIcons = false, closeOnScroll = false, openOnContext = false, persistOnItemClick = false, openOnHover = isSubmenu, defaultCheckedValues, mountNode = null, safeZone } = props;
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const triggerId = (0, _reactutilities.useId)('menu');
const [contextTarget, setContextTarget] = (0, _reactpositioning.usePositioningMouseTarget)();
const resolvedPositioning = (0, _reactpositioning.resolvePositioningShorthand)(props.positioning);
const handlePositionEnd = (0, _reactpositioning.usePositioningSlideDirection)({
targetDocument,
onPositioningEnd: resolvedPositioning.onPositioningEnd
});
const positioningOptions = {
position: isSubmenu ? 'after' : 'below',
align: isSubmenu ? 'top' : 'start',
target: props.openOnContext ? contextTarget : undefined,
fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,
...resolvedPositioning,
onPositioningEnd: handlePositionEnd
};
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('Menu must contain at least one child');
}
if (children.length > 2) {
// eslint-disable-next-line no-console
console.warn('Menu must contain at most two children');
}
}
let menuTrigger = undefined;
let menuPopover = undefined;
if (children.length === 2) {
menuTrigger = children[0];
menuPopover = children[1];
} else if (children.length === 1) {
menuPopover = children[0];
}
const { targetRef, containerRef } = (0, _reactpositioning.usePositioning)(positioningOptions);
const enableSafeZone = safeZone && openOnHover;
const safeZoneDescriptorRef = _react.useRef({
isInside: false,
mouseCoordinates: {
x: 0,
y: 0
}
});
const safeZoneHandle = (0, _reactpositioning.useSafeZoneArea)({
disabled: !enableSafeZone,
timeout: typeof safeZone === 'object' ? safeZone.timeout : 300,
onSafeZoneEnter: (e)=>{
setOpen(e, {
open: true,
keyboard: false,
type: 'menuSafeZoneMouseEnter',
event: e
});
safeZoneDescriptorRef.current.isInside = true;
},
onSafeZoneLeave: ()=>{
safeZoneDescriptorRef.current.isInside = false;
},
onSafeZoneMove: (e)=>{
safeZoneDescriptorRef.current.mouseCoordinates = {
x: e.clientX,
y: e.clientY
};
},
onSafeZoneTimeout: ()=>{
const event = new CustomEvent(_utils.MENU_SAFEZONE_TIMEOUT_EVENT);
setOpen(event, {
open: false,
keyboard: false,
type: 'menuSafeZoneTimeout',
event
});
if (safeZoneDescriptorRef.current.isInside && targetDocument) {
const elementsInPoint = targetDocument.elementsFromPoint(safeZoneDescriptorRef.current.mouseCoordinates.x, safeZoneDescriptorRef.current.mouseCoordinates.y);
const menuItemEl = elementsInPoint.find((el)=>{
return el.classList.contains(_useMenuItemStylesstyles.menuItemClassNames.root);
});
menuItemEl === null || menuItemEl === void 0 ? void 0 : menuItemEl.dispatchEvent(event);
}
}
});
const triggerRef = (0, _reactutilities.useMergedRefs)(targetRef, safeZoneHandle.targetRef);
const menuPopoverRef = (0, _reactutilities.useMergedRefs)(containerRef, safeZoneHandle.containerRef);
// TODO Better way to narrow types ?
const [open, setOpen] = useMenuOpenState({
hoverDelay,
isSubmenu,
setContextTarget,
closeOnScroll,
menuPopoverRef,
triggerRef,
open: props.open,
defaultOpen: props.defaultOpen,
onOpenChange: props.onOpenChange,
openOnContext
});
const [checkedValues, onCheckedValueChange] = useMenuSelectableState({
checkedValues: props.checkedValues,
defaultCheckedValues,
onCheckedValueChange: props.onCheckedValueChange
});
return {
inline,
hoverDelay,
triggerId,
isSubmenu,
openOnHover,
contextTarget,
setContextTarget,
hasCheckmarks,
hasIcons,
closeOnScroll,
menuTrigger,
menuPopover,
mountNode,
triggerRef,
menuPopoverRef,
components: {
surfaceMotion: _MenuSurfaceMotion.MenuSurfaceMotion
},
openOnContext,
open,
setOpen,
checkedValues,
onCheckedValueChange,
persistOnItemClick,
safeZone: safeZoneHandle.elementToRender,
surfaceMotion: (0, _reactmotion.presenceMotionSlot)(props.surfaceMotion, {
elementType: _MenuSurfaceMotion.MenuSurfaceMotion,
defaultProps: {
visible: open,
appear: true,
unmountOnExit: true
}
})
};
};
/**
* Adds appropriate state values and handlers for selectable items
* i.e checkboxes and radios
*/ const useMenuSelectableState = (props)=>{
const [checkedValues, setCheckedValues] = (0, _reactutilities.useControllableState)({
state: props.checkedValues,
defaultState: props.defaultCheckedValues,
initialState: {}
});
const onCheckedValueChange = (0, _reactutilities.useEventCallback)((e, { name, checkedItems })=>{
var _props_onCheckedValueChange;
(_props_onCheckedValueChange = props.onCheckedValueChange) === null || _props_onCheckedValueChange === void 0 ? void 0 : _props_onCheckedValueChange.call(props, e, {
name,
checkedItems
});
setCheckedValues((currentValue)=>({
...currentValue,
[name]: checkedItems
}));
});
return [
checkedValues,
onCheckedValueChange
];
};
const useMenuOpenState = (state)=>{
'use no memo';
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const parentSetOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
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 enteringTriggerRef = _react.useRef(false);
const [open, setOpenState] = (0, _reactutilities.useControllableState)({
state: state.open,
defaultState: state.defaultOpen,
initialState: false
});
const trySetOpen = (0, _reactutilities.useEventCallback)((e, data)=>{
const event = e instanceof CustomEvent && e.type === _utils.MENU_ENTER_EVENT ? e.detail.nativeEvent : e;
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
...data
});
if (data.open && e.type === 'contextmenu') {
state.setContextTarget(e);
}
if (!data.open) {
state.setContextTarget(undefined);
}
if (data.bubble) {
parentSetOpen(e, {
...data
});
}
setOpenState(data.open);
});
const [setOpenTimeout, clearOpenTimeout] = (0, _reactutilities.useTimeout)();
const setOpen = (0, _reactutilities.useEventCallback)((e, data)=>{
clearOpenTimeout();
if (!(e instanceof Event) && e.persist) {
// < React 17 still uses pooled synthetic events
e.persist();
}
const shouldUseDelay = !data.ignoreHoverDelay && (e.type === 'mouseleave' || e.type === 'mouseover' || e.type === 'mousemove' || e.type === _utils.MENU_ENTER_EVENT);
if (shouldUseDelay) {
var _state_triggerRef_current;
if ((_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.contains(e.target)) {
enteringTriggerRef.current = e.type === 'mouseover' || e.type === 'mousemove';
}
setOpenTimeout(()=>trySetOpen(e, data), state.hoverDelay);
} else {
trySetOpen(e, data);
}
});
(0, _reactutilities.useOnClickOutside)({
contains: _reactutilities.elementContains,
disabled: !open,
element: targetDocument,
refs: [
state.menuPopoverRef,
!state.openOnContext && state.triggerRef
].filter(Boolean),
callback: (event)=>setOpen(event, {
open: false,
type: 'clickOutside',
event
})
});
// only close on scroll for context, or when closeOnScroll is specified
const closeOnScroll = state.openOnContext || state.closeOnScroll;
(0, _reactutilities.useOnScrollOutside)({
contains: _reactutilities.elementContains,
element: targetDocument,
callback: (event)=>setOpen(event, {
open: false,
type: 'scrollOutside',
event
}),
refs: [
state.menuPopoverRef,
!state.openOnContext && state.triggerRef
].filter(Boolean),
disabled: !open || !closeOnScroll
});
(0, _utils.useOnMenuMouseEnter)({
element: targetDocument,
callback: (event)=>{
// When moving from a menu directly back to its trigger, this handler can close the menu
// Explicitly check a flag to see if this situation happens
if (!enteringTriggerRef.current) {
setOpen(event, {
open: false,
type: 'menuMouseEnter',
event
});
}
},
disabled: !open,
refs: [
state.menuPopoverRef
]
});
// Manage focus for open state
const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
const focusFirst = _react.useCallback(()=>{
const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
}, [
findFirstFocusable,
state.menuPopoverRef
]);
const firstMount = (0, _reactutilities.useFirstMount)();
_react.useEffect(()=>{
if (open) {
focusFirst();
} else {
// Skip the initial render — focus should only be restored when the menu
// transitions from open → closed, not on mount.
if (!firstMount) {
var // (e.g. during an exit animation), so focus may still be inside the
// popover even though `open` is already false. Proactively move it
// to the trigger before the DOM element is eventually removed.
_state_menuPopoverRef_current;
var _targetDocument_activeElement;
if (// meaning the user's focus has nowhere meaningful to go.
(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body) || ((_state_menuPopoverRef_current = state.menuPopoverRef.current) === null || _state_menuPopoverRef_current === void 0 ? void 0 : _state_menuPopoverRef_current.contains((_targetDocument_activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) !== null && _targetDocument_activeElement !== void 0 ? _targetDocument_activeElement : null))) {
var // after any event handler (event handlers will update state and re-render).
// Since the browser only performs the default behaviour for the Tab key once
// keyboard events have fully bubbled up the window, the browser will move
// focus to the next tabbable element before/after the trigger if needed.
// If the Tab key was not pressed, focus will remain on the trigger as expected.
_state_triggerRef_current;
(_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.focus();
}
}
}
// firstMount change should not re-run this effect
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
state.triggerRef,
state.isSubmenu,
open,
focusFirst,
targetDocument,
state.menuPopoverRef
]);
return [
open,
setOpen
];
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuContextValues_unstable", {
enumerable: true,
get: function() {
return useMenuContextValues_unstable;
}
});
function useMenuContextValues_unstable(state) {
const { checkedValues, hasCheckmarks, hasIcons, inline, isSubmenu, menuPopoverRef, mountNode, onCheckedValueChange, open, openOnContext, openOnHover, persistOnItemClick, safeZone, setOpen, triggerId, triggerRef } = state;
// This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
const menu = {
checkedValues,
hasCheckmarks,
hasIcons,
inline,
isSubmenu,
menuPopoverRef,
mountNode,
onCheckedValueChange,
open,
openOnContext,
openOnHover,
persistOnItemClick,
safeZone,
setOpen,
triggerId,
triggerRef
};
return {
menu
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n const {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n inline,\n isSubmenu,\n menuPopoverRef,\n mountNode,\n onCheckedValueChange,\n open,\n openOnContext,\n openOnHover,\n persistOnItemClick,\n safeZone,\n setOpen,\n triggerId,\n triggerRef,\n } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const menu = {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n inline,\n isSubmenu,\n menuPopoverRef,\n mountNode,\n onCheckedValueChange,\n open,\n openOnContext,\n openOnHover,\n persistOnItemClick,\n safeZone,\n setOpen,\n triggerId,\n triggerRef,\n };\n\n return { menu };\n}\n"],"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","mountNode","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","safeZone","setOpen","triggerId","triggerRef","menu"],"mappings":";;;;+BAEgBA;;;;;;AAAT,uCAAuCC,KAAgB;IAC5D,MAAM,EACJC,aAAa,EACbC,aAAa,EACbC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,kBAAkB,EAClBC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,UAAU,EACX,GAAGhB;IAEJ,mGAAmG;IACnG,MAAMiB,OAAO;QACXhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuDivider", {
enumerable: true,
get: function() {
return MenuDivider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenuDivider = require("./useMenuDivider");
const _useMenuDividerStylesstyles = require("./useMenuDividerStyles.styles");
const _renderMenuDivider = require("./renderMenuDivider");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuDivider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuDivider.useMenuDivider_unstable)(props, ref);
(0, _useMenuDividerStylesstyles.useMenuDividerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuDividerStyles_unstable')(state);
return (0, _renderMenuDivider.renderMenuDivider_unstable)(state);
});
MenuDivider.displayName = 'MenuDivider';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuDivider/MenuDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuDivider_unstable } from './useMenuDivider';\nimport { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';\nimport { renderMenuDivider_unstable } from './renderMenuDivider';\nimport type { MenuDividerProps } from './MenuDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.\n */\nexport const MenuDivider: ForwardRefComponent<MenuDividerProps> = React.forwardRef((props, ref) => {\n const state = useMenuDivider_unstable(props, ref);\n\n useMenuDividerStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuDividerStyles_unstable')(state);\n\n return renderMenuDivider_unstable(state);\n});\n\nMenuDivider.displayName = 'MenuDivider';\n"],"names":["React","useMenuDivider_unstable","useMenuDividerStyles_unstable","renderMenuDivider_unstable","useCustomStyleHook_unstable","MenuDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;4CACb,gCAAgC;mCACnC,sBAAsB;qCAGrB,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CN,yDAAAA,EAA8BO;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAON,6CAAAA,EAA2BM;AACpC,GAAG;AAEHJ,YAAYK,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/MenuDivider/MenuDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuDividerSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuDividerProps = ComponentProps<MenuDividerSlots>;\n\nexport type MenuDividerState = ComponentState<MenuDividerSlots>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,31 @@
"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, {
MenuDivider: function() {
return _MenuDivider.MenuDivider;
},
menuDividerClassNames: function() {
return _useMenuDividerStylesstyles.menuDividerClassNames;
},
renderMenuDivider_unstable: function() {
return _renderMenuDivider.renderMenuDivider_unstable;
},
useMenuDividerStyles_unstable: function() {
return _useMenuDividerStylesstyles.useMenuDividerStyles_unstable;
},
useMenuDivider_unstable: function() {
return _useMenuDivider.useMenuDivider_unstable;
}
});
const _MenuDivider = require("./MenuDivider");
const _renderMenuDivider = require("./renderMenuDivider");
const _useMenuDivider = require("./useMenuDivider");
const _useMenuDividerStylesstyles = require("./useMenuDividerStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuDivider/index.ts"],"sourcesContent":["export type { MenuDividerProps, MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nexport { MenuDivider } from './MenuDivider';\nexport { renderMenuDivider_unstable } from './renderMenuDivider';\nexport { useMenuDivider_unstable } from './useMenuDivider';\nexport { menuDividerClassNames, useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';\n"],"names":["MenuDivider","renderMenuDivider_unstable","useMenuDivider_unstable","menuDividerClassNames","useMenuDividerStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,wBAAW;;;eAGXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAFJ,gBAAgB;mCACD,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuDivider_unstable", {
enumerable: true,
get: function() {
return renderMenuDivider_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderMenuDivider_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuDivider/renderMenuDivider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menudivider structure but add\n * slots to children.\n */\nexport const renderMenuDivider_unstable = (state: MenuDividerState): JSXElement => {\n assertSlots<MenuDividerSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderMenuDivider_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAQjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuDivider_unstable", {
enumerable: true,
get: function() {
return useMenuDivider_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const useMenuDivider_unstable = (props, ref)=>{
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
role: 'presentation',
'aria-hidden': true,
...props,
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuDivider/useMenuDivider.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Given user props, returns state and render function for a MenuDivider.\n */\nexport const useMenuDivider_unstable = (props: MenuDividerProps, ref: React.Ref<HTMLElement>): MenuDividerState => {\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n role: 'presentation',\n 'aria-hidden': true,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useMenuDivider_unstable","props","ref","components","root","always","role","elementType"],"mappings":";;;;+BAOaG;;;;;;;gCAPkC,4BAA4B;iEACpD,QAAQ;AAMxB,gCAAgC,CAACC,OAAyBC;IAC/D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,oBAAAA,CAAKO,MAAM,KACfR,wCAAAA,EAAyB,OAAO;YAC9BS,MAAM;YACN,eAAe;YACf,GAAGL,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,59 @@
'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, {
menuDividerClassNames: function() {
return menuDividerClassNames;
},
useMenuDividerStyles_unstable: function() {
return useMenuDividerStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuDividerClassNames = {
root: 'fui-MenuDivider'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f8dz51a",
a9b677: "f14z66ap",
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
Bgfg5da: "f1facbz3"
}
}, {
d: [
[
".f8dz51a{margin:4px -5px 4px -5px;}",
{
p: -1
}
],
".f14z66ap{width:auto;}",
[
".f1facbz3{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}",
{
p: -1
}
]
]
});
const useMenuDividerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuDividerClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useMenuDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuDividerClassNames = {\n root: 'fui-MenuDivider'\n};\nconst useStyles = makeStyles({\n root: {\n margin: '4px -5px 4px -5px',\n width: 'auto',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n }\n});\nexport const useMenuDividerStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","__styles","tokens","menuDividerClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","a9b677","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","d","p","useMenuDividerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;iCAUQ;;;;uBAZD,gBAAgB;AAElD,8BAA8B;IACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMjB,CAAC;AACK,MAAMC,iCAAiCC,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;IAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,OAAGrB,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,37 @@
'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, {
menuDividerClassNames: function() {
return menuDividerClassNames;
},
useMenuDividerStyles_unstable: function() {
return useMenuDividerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const menuDividerClassNames = {
root: 'fui-MenuDivider'
};
const useStyles = (0, _react.makeStyles)({
root: {
margin: '4px -5px 4px -5px',
width: 'auto',
borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`
}
});
const useMenuDividerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuDividerClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuDivider/useMenuDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n root: {\n margin: '4px -5px 4px -5px',\n width: 'auto',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState): MenuDividerState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuDividerClassNames","root","useStyles","margin","width","borderBottom","strokeWidthThin","colorNeutralStroke2","useMenuDividerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;iCAYAQ;;;;uBAjB4B,iBAAiB;4BACnC,wBAAwB;AAIxC,8BAAgE;IACrEP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,QAAQ;QACRC,OAAO;QACPC,cAAc,GAAGN,kBAAAA,CAAOO,eAAe,CAAC,OAAO,EAAEP,kBAAAA,CAAOQ,mBAAmB,EAAE;IAC/E;AACF;AAEO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,OAAGd,mBAAAA,EAAaG,sBAAsBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEjG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuGroup", {
enumerable: true,
get: function() {
return MenuGroup;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenuGroup = require("./useMenuGroup");
const _renderMenuGroup = require("./renderMenuGroup");
const _useMenuGroupContextValues = require("./useMenuGroupContextValues");
const _useMenuGroupStylesstyles = require("./useMenuGroupStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuGroup.useMenuGroup_unstable)(props, ref);
const contextValues = (0, _useMenuGroupContextValues.useMenuGroupContextValues_unstable)(state);
(0, _useMenuGroupStylesstyles.useMenuGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuGroupStyles_unstable')(state);
return (0, _renderMenuGroup.renderMenuGroup_unstable)(state, contextValues);
});
MenuGroup.displayName = 'MenuGroup';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/MenuGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroup_unstable } from './useMenuGroup';\nimport { renderMenuGroup_unstable } from './renderMenuGroup';\nimport { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';\nimport type { MenuGroupProps } from './MenuGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.\n */\nexport const MenuGroup: ForwardRefComponent<MenuGroupProps> = React.forwardRef((props, ref) => {\n const state = useMenuGroup_unstable(props, ref);\n const contextValues = useMenuGroupContextValues_unstable(state);\n\n useMenuGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuGroupStyles_unstable')(state);\n\n return renderMenuGroup_unstable(state, contextValues);\n});\n\nMenuGroup.displayName = 'MenuGroup';\n"],"names":["React","useMenuGroup_unstable","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useCustomStyleHook_unstable","MenuGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BACO,iBAAiB;iCACd,oBAAoB;2CACV,8BAA8B;0CAGrC,8BAA8B;qCAC9B,kCAAkC;AAKvE,MAAMM,YAAAA,WAAAA,GAAiDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQT,mCAAAA,EAAsBO,OAAOC;IAC3C,MAAME,oBAAgBR,6DAAAA,EAAmCO;QAEzDN,qDAAAA,EAA4BM;QAE5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOR,yCAAAA,EAAyBQ,OAAOC;AACzC,GAAG;AAEHL,UAAUM,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/MenuGroup/MenuGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuGroupContextValue } from '../../contexts/menuGroupContext';\n\nexport type MenuGroupSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuGroupProps = ComponentProps<MenuGroupSlots>;\n\nexport type MenuGroupState = ComponentState<MenuGroupSlots> & {\n /**\n * id applied to the DOM element of `MenuGroupHeader`\n */\n headerId: string;\n};\n\nexport type MenuGroupContextValues = {\n menuGroup: MenuGroupContextValue;\n};\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,35 @@
"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, {
MenuGroup: function() {
return _MenuGroup.MenuGroup;
},
menuGroupClassNames: function() {
return _useMenuGroupStylesstyles.menuGroupClassNames;
},
renderMenuGroup_unstable: function() {
return _renderMenuGroup.renderMenuGroup_unstable;
},
useMenuGroupContextValues_unstable: function() {
return _useMenuGroupContextValues.useMenuGroupContextValues_unstable;
},
useMenuGroupStyles_unstable: function() {
return _useMenuGroupStylesstyles.useMenuGroupStyles_unstable;
},
useMenuGroup_unstable: function() {
return _useMenuGroup.useMenuGroup_unstable;
}
});
const _MenuGroup = require("./MenuGroup");
const _renderMenuGroup = require("./renderMenuGroup");
const _useMenuGroup = require("./useMenuGroup");
const _useMenuGroupContextValues = require("./useMenuGroupContextValues");
const _useMenuGroupStylesstyles = require("./useMenuGroupStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/index.ts"],"sourcesContent":["export type { MenuGroupContextValues, MenuGroupProps, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nexport { MenuGroup } from './MenuGroup';\nexport { renderMenuGroup_unstable } from './renderMenuGroup';\nexport { useMenuGroup_unstable } from './useMenuGroup';\nexport { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';\nexport { menuGroupClassNames, useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles';\n"],"names":["MenuGroup","renderMenuGroup_unstable","useMenuGroup_unstable","useMenuGroupContextValues_unstable","menuGroupClassNames","useMenuGroupStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,oBAAS;;;eAITI,6CAAmB;;;eAHnBH,yCAAwB;;;eAExBE,6DAAkC;;;eACbE,qDAA2B;;;eAFhDH,mCAAqB;;;2BAFJ,cAAc;iCACC,oBAAoB;8BACvB,iBAAiB;2CACJ,8BAA8B;0CAChB,8BAA8B"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuGroup_unstable", {
enumerable: true,
get: function() {
return renderMenuGroup_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _menuGroupContext = require("../../contexts/menuGroupContext");
const renderMenuGroup_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_menuGroupContext.MenuGroupContextProvider, {
value: contextValues.menuGroup,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/renderMenuGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuGroupContextValues, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nimport { MenuGroupContextProvider } from '../../contexts/menuGroupContext';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroup structure but add\n * slots to children.\n */\nexport const renderMenuGroup_unstable = (state: MenuGroupState, contextValues: MenuGroupContextValues): JSXElement => {\n assertSlots<MenuGroupSlots>(state);\n\n return (\n <MenuGroupContextProvider value={contextValues.menuGroup}>\n <state.root />\n </MenuGroupContextProvider>\n );\n};\n"],"names":["assertSlots","MenuGroupContextProvider","renderMenuGroup_unstable","state","contextValues","value","menuGroup","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCACrB,4BAA4B;kCAGf,kCAAkC;AAMpE,iCAAiC,CAACC,OAAuBC;QAC9DJ,2BAAAA,EAA4BG;IAE5B,OAAA,WAAA,OACE,eAAA,EAACF,0CAAAA,EAAAA;QAAyBI,OAAOD,cAAcE,SAAS;kBACtD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuGroup_unstable", {
enumerable: true,
get: function() {
return useMenuGroup_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");
function useMenuGroup_unstable(props, ref) {
const headerId = (0, _reactutilities.useId)('menu-group');
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
'aria-labelledby': headerId,
role: 'group',
...props
}), {
elementType: 'div'
}),
headerId
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/useMenuGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { MenuGroupProps, MenuGroupState } from './MenuGroup.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroup.\n */\nexport function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState {\n const headerId = useId('menu-group');\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n 'aria-labelledby': headerId,\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n headerId,\n };\n}\n"],"names":["React","getIntrinsicElementProps","useId","slot","useMenuGroup_unstable","props","ref","headerId","components","root","always","role","elementType"],"mappings":";;;;+BAOgBI;;;;;;;iEAPO,QAAQ;gCACuB,4BAA4B;AAM3E,+BAA+BC,KAAqB,EAAEC,GAA2B;IACtF,MAAMC,eAAWL,qBAAAA,EAAM;IAEvB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,oBAAAA,CAAKO,MAAM,KACfT,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,mBAAmBC;YACnBI,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL;IACF;AACF"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuGroupContextValues_unstable", {
enumerable: true,
get: function() {
return useMenuGroupContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useMenuGroupContextValues_unstable(state) {
const { headerId } = state;
const menuGroup = _react.useMemo(()=>({
headerId
}), [
headerId
]);
return {
menuGroup
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';\n\nexport function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues {\n const { headerId } = state;\n const menuGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n return { menuGroup };\n}\n"],"names":["React","useMenuGroupContextValues_unstable","state","headerId","menuGroup","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,YAAYJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAS,CAAA,EAAI;QAACA;KAAS;IAEhE,OAAO;QAAEC;IAAU;AACrB"}

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, {
menuGroupClassNames: function() {
return menuGroupClassNames;
},
useMenuGroupStyles_unstable: function() {
return useMenuGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuGroupClassNames = {
root: 'fui-MenuGroup'
};
const useMenuGroupStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(menuGroupClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useMenuGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const menuGroupClassNames = {\n root: 'fui-MenuGroup'\n};\nexport const useMenuGroupStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,mBAAmB;;;+BAGQ;;;;uBAJX,gBAAgB;AACtC,4BAA4B;IAC/BC,IAAI,EAAE;AACV,CAAC;AACM,MAAMC,8BAA+BC,KAAK,IAAG;IAChD,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,mBAAmB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACnF,OAAOD,KAAK;AAChB,CAAC"}

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, {
menuGroupClassNames: function() {
return menuGroupClassNames;
},
useMenuGroupStyles_unstable: function() {
return useMenuGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuGroupClassNames = {
root: 'fui-MenuGroup'
};
const useMenuGroupStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(menuGroupClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,mBAAAA;;;+BAIAE;;;;uBAPgB,iBAAiB;AAGvC,4BAA4D;IACjED,MAAM;AACR,EAAE;AAEK,MAAMC,8BAA8B,CAACC;IAC1C;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAElF,OAAOD;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuGroupHeader", {
enumerable: true,
get: function() {
return MenuGroupHeader;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenuGroupHeader = require("./useMenuGroupHeader");
const _useMenuGroupHeaderStylesstyles = require("./useMenuGroupHeaderStyles.styles");
const _renderMenuGroupHeader = require("./renderMenuGroupHeader");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuGroupHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuGroupHeader.useMenuGroupHeader_unstable)(props, ref);
(0, _useMenuGroupHeaderStylesstyles.useMenuGroupHeaderStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuGroupHeaderStyles_unstable')(state);
return (0, _renderMenuGroupHeader.renderMenuGroupHeader_unstable)(state);
});
MenuGroupHeader.displayName = 'MenuGroupHeader';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.\n */\nexport const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps> = React.forwardRef((props, ref) => {\n const state = useMenuGroupHeader_unstable(props, ref);\n\n useMenuGroupHeaderStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuGroupHeaderStyles_unstable')(state);\n\n return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"names":["React","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","renderMenuGroupHeader_unstable","useCustomStyleHook_unstable","MenuGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCACa,uBAAuB;gDACjB,oCAAoC;uCACvC,0BAA0B;qCAG7B,kCAAkC;AAKvE,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQR,+CAAAA,EAA4BM,OAAOC;QAEjDN,iEAAAA,EAAkCO;QAElCL,gDAAAA,EAA4B,qCAAqCK;IAEjE,WAAON,qDAAAA,EAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,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/MenuGroupHeader/MenuGroupHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuGroupHeaderSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;\n\nexport type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,31 @@
"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, {
MenuGroupHeader: function() {
return _MenuGroupHeader.MenuGroupHeader;
},
menuGroupHeaderClassNames: function() {
return _useMenuGroupHeaderStylesstyles.menuGroupHeaderClassNames;
},
renderMenuGroupHeader_unstable: function() {
return _renderMenuGroupHeader.renderMenuGroupHeader_unstable;
},
useMenuGroupHeaderStyles_unstable: function() {
return _useMenuGroupHeaderStylesstyles.useMenuGroupHeaderStyles_unstable;
},
useMenuGroupHeader_unstable: function() {
return _useMenuGroupHeader.useMenuGroupHeader_unstable;
}
});
const _MenuGroupHeader = require("./MenuGroupHeader");
const _renderMenuGroupHeader = require("./renderMenuGroupHeader");
const _useMenuGroupHeader = require("./useMenuGroupHeader");
const _useMenuGroupHeaderStylesstyles = require("./useMenuGroupHeaderStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroupHeader/index.ts"],"sourcesContent":["export type { MenuGroupHeaderProps, MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nexport { MenuGroupHeader } from './MenuGroupHeader';\nexport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nexport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nexport { menuGroupHeaderClassNames, useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';\n"],"names":["MenuGroupHeader","renderMenuGroupHeader_unstable","useMenuGroupHeader_unstable","menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,gCAAe;;;eAGfG,yDAAyB;;;eAFzBF,qDAA8B;;;eAEHG,iEAAiC;;;eAD5DF,+CAA2B;;;iCAFJ,oBAAoB;uCACL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuGroupHeader_unstable", {
enumerable: true,
get: function() {
return renderMenuGroupHeader_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderMenuGroupHeader_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroupHeader/renderMenuGroupHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroupheader structure but add\n * slots to children.\n */\nexport const renderMenuGroupHeader_unstable = (state: MenuGroupHeaderState): JSXElement => {\n assertSlots<MenuGroupHeaderSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderMenuGroupHeader_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAQjD,MAAMC,iCAAiC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAElC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,33 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuGroupHeader_unstable", {
enumerable: true,
get: function() {
return useMenuGroupHeader_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _menuGroupContext = require("../../contexts/menuGroupContext");
const _reactutilities = require("@fluentui/react-utilities");
function useMenuGroupHeader_unstable(props, ref) {
const { headerId: id } = (0, _menuGroupContext.useMenuGroupContext_unstable)();
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
id,
...props
}), {
elementType: 'div'
})
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */\nexport function useMenuGroupHeader_unstable(\n props: MenuGroupHeaderProps,\n ref: React.Ref<HTMLElement>,\n): MenuGroupHeaderState {\n const { headerId: id } = useMenuGroupContext_unstable();\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n id,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n}\n"],"names":["React","useMenuGroupContext_unstable","getIntrinsicElementProps","slot","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACc,kCAAkC;gCAChC,4BAA4B;AAMpE,SAASI,4BACdC,KAA2B,EAC3BC,GAA2B;IAE3B,MAAM,EAAEC,UAAUC,EAAE,EAAE,OAAGP,8CAAAA;IAEzB,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLE;YACA,GAAGH,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}

View File

@@ -0,0 +1,58 @@
'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, {
menuGroupHeaderClassNames: function() {
return menuGroupHeaderClassNames;
},
useMenuGroupHeaderStyles_unstable: function() {
return useMenuGroupHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuGroupHeaderClassNames = {
root: 'fui-MenuGroupHeader'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Be2twd7: "fy9rknc",
sj55zd: "f11d4kpn",
uwmqm3: [
"f177v4lu",
"f19lj068"
],
z189sj: [
"f19lj068",
"f177v4lu"
],
Bhrd7zp: "fl43uef",
Bqenvij: "f1d2rq10",
mc9l5x: "f22iagw",
Bt984gj: "f122n59"
}
}, {
d: [
".fy9rknc{font-size:var(--fontSizeBase200);}",
".f11d4kpn{color:var(--colorNeutralForeground3);}",
".f177v4lu{padding-left:8px;}",
".f19lj068{padding-right:8px;}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".f1d2rq10{height:32px;}",
".f22iagw{display:flex;}",
".f122n59{align-items:center;}"
]
});
const useMenuGroupHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuGroupHeaderClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center'\n }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,yBAAyB;;;IAezBY,iCAAiC;;;;uBAjBL,gBAAgB;AAElD,kCAAkC;IACrCX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAWjB,CAAC;AACK,2CAA2CE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGlB,mBAAY,EAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,42 @@
'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, {
menuGroupHeaderClassNames: function() {
return menuGroupHeaderClassNames;
},
useMenuGroupHeaderStyles_unstable: function() {
return useMenuGroupHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const menuGroupHeaderClassNames = {
root: 'fui-MenuGroupHeader'
};
const useStyles = (0, _react.makeStyles)({
root: {
fontSize: _reacttheme.tokens.fontSizeBase200,
color: _reacttheme.tokens.colorNeutralForeground3,
paddingLeft: '8px',
paddingRight: '8px',
fontWeight: _reacttheme.tokens.fontWeightSemibold,
height: '32px',
display: 'flex',
alignItems: 'center'
}
});
const useMenuGroupHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuGroupHeaderClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,yBAAAA;;;qCAiBAc;eAAAA;;;uBAtB4B,iBAAiB;4BACnC,wBAAwB;AAIxC,kCAAwE;IAC7Eb,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,UAAUJ,kBAAAA,CAAOK,eAAe;QAChCC,OAAON,kBAAAA,CAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,kBAAAA,CAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEO,0CAA0C,CAACE;IAChD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,OAAGpB,mBAAAA,EAAaG,0BAA0BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAErG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuItem", {
enumerable: true,
get: function() {
return MenuItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenuItem = require("./useMenuItem");
const _renderMenuItem = require("./renderMenuItem");
const _useMenuItemStylesstyles = require("./useMenuItemStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuItem.useMenuItem_unstable)(props, ref);
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuItemStyles_unstable')(state);
return (0, _renderMenuItem.renderMenuItem_unstable)(state);
});
MenuItem.displayName = 'MenuItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.\n */\nexport const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {\n const state = useMenuItem_unstable(props, ref);\n\n useMenuItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuItemStyles_unstable')(state);\n\n return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"names":["React","useMenuItem_unstable","renderMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHook_unstable","MenuItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;qCAG5B,kCAAkC;AAKvE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQR,iCAAAA,EAAqBM,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOP,uCAAAA,EAAwBO;AACjC,GAAG;AAEHJ,SAASK,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/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<'div'>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n Pick<Partial<MenuItemSlots>, 'content'> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"mappings":""}

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, {
MenuItem: function() {
return _MenuItem.MenuItem;
},
menuItemClassNames: function() {
return _useMenuItemStylesstyles.menuItemClassNames;
},
renderMenuItem_unstable: function() {
return _renderMenuItem.renderMenuItem_unstable;
},
useMenuItemBase_unstable: function() {
return _useMenuItem.useMenuItemBase_unstable;
},
useMenuItemStyles_unstable: function() {
return _useMenuItemStylesstyles.useMenuItemStyles_unstable;
},
useMenuItem_unstable: function() {
return _useMenuItem.useMenuItem_unstable;
}
});
const _MenuItem = require("./MenuItem");
const _renderMenuItem = require("./renderMenuItem");
const _useMenuItem = require("./useMenuItem");
const _useMenuItemStylesstyles = require("./useMenuItemStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItem/index.ts"],"sourcesContent":["export { MenuItem } from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';\nexport { renderMenuItem_unstable } from './renderMenuItem';\nexport { useMenuItem_unstable, useMenuItemBase_unstable } from './useMenuItem';\nexport { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","renderMenuItem_unstable","useMenuItem_unstable","useMenuItemBase_unstable","menuItemClassNames","useMenuItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAIRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACDE,qCAAwB;;;eAC1BE,mDAA0B;;;eAD9CH,iCAAoB;;;0BAHJ,aAAa;gCAEE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

View File

@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuItem_unstable", {
enumerable: true,
get: function() {
return renderMenuItem_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderMenuItem_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.checkmark && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.checkmark, {}),
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.content && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.content, {
children: [
state.content.children,
state.subText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.subText, {})
]
}),
state.secondaryContent && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.secondaryContent, {}),
state.submenuIndicator && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.submenuIndicator, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItem/renderMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState): JSXElement => {\n assertSlots<MenuItemSlots>(state);\n\n return (\n <state.root>\n {state.checkmark && <state.checkmark />}\n {state.icon && <state.icon />}\n {state.content && (\n <state.content>\n {state.content.children}\n {state.subText && <state.subText />}\n </state.content>\n )}\n {state.secondaryContent && <state.secondaryContent />}\n {state.submenuIndicator && <state.submenuIndicator />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderMenuItem_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent","submenuIndicator"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,OAAO,IAAA,WAAA,OACZ,gBAAA,EAACJ,MAAMI,OAAO,EAAA;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,OAAO,EAAA,CAAA;;;YAGnCN,MAAMO,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,gBAAgB,EAAA,CAAA;YACjDP,MAAMQ,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,gBAAgB,EAAA,CAAA;;;AAGxD,EAAE"}

View File

@@ -0,0 +1,30 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCharacterSearch", {
enumerable: true,
get: function() {
return useCharacterSearch;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _menuListContext = require("../../contexts/menuListContext");
const useCharacterSearch = (state, ref)=>{
'use no memo';
const setFocusByFirstCharacter = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.setFocusByFirstCharacter);
const { onKeyDown: originalOnKeyDown } = state.root;
state.root.onKeyDown = (e)=>{
var _e_key;
originalOnKeyDown === null || originalOnKeyDown === void 0 ? void 0 : originalOnKeyDown(e);
if (((_e_key = e.key) === null || _e_key === void 0 ? void 0 : _e_key.length) > 1) {
return;
}
if (ref.current) {
setFocusByFirstCharacter === null || setFocusByFirstCharacter === void 0 ? void 0 : setFocusByFirstCharacter(e, ref.current);
}
};
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement | null>): MenuItemState => {\n 'use no memo';\n\n const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n const { onKeyDown: originalOnKeyDown } = state.root;\n\n state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n originalOnKeyDown?.(e);\n\n if (e.key?.length > 1) {\n return;\n }\n\n if (ref.current) {\n setFocusByFirstCharacter?.(e, ref.current);\n }\n };\n\n return state;\n};\n"],"names":["React","useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"mappings":"AAAA;;;;;+BAOaE;;;;;;;iEALU,QAAQ;iCACa,iCAAiC;AAItE,2BAA2B,CAACC,OAAsBC;IACvD;IAEA,MAAMC,+BAA2BJ,4CAAAA,EAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBE;QAEpB,IAAIA,CAAAA,CAAAA,SAAAA,EAAEC,GAAAA,AAAG,MAAA,QAALD,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAOE,MAAAA,AAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BK,GAAGN,IAAIS,OAAO;QAC3C;IACF;IAEA,OAAOV;AACT,EAAE"}

View File

@@ -0,0 +1,176 @@
'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, {
useMenuItemBase_unstable: function() {
return useMenuItemBase_unstable;
},
useMenuItem_unstable: function() {
return useMenuItem_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 _useCharacterSearch = require("./useCharacterSearch");
const _menuTriggerContext = require("../../contexts/menuTriggerContext");
const _reacticons = require("@fluentui/react-icons");
const _menuListContext = require("../../contexts/menuListContext");
const _menuContext = require("../../contexts/menuContext");
const _reactaria = require("@fluentui/react-aria");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _menuSplitGroupContext = require("../../contexts/menuSplitGroupContext");
const _useValidateNesting = require("../../utils/useValidateNesting");
const ChevronRightIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronRightFilled, _reacticons.ChevronRightRegular);
const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFilled, _reacticons.ChevronLeftRegular);
const useMenuItem_unstable = (props, ref)=>{
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const state = useMenuItemBase_unstable(props, ref);
// Set default chevron icon
if (state.submenuIndicator) {
var _state_submenuIndicator;
var _children;
(_children = (_state_submenuIndicator = state.submenuIndicator).children) !== null && _children !== void 0 ? _children : _state_submenuIndicator.children = dir === 'rtl' ? /*#__PURE__*/ _react.createElement(ChevronLeftIcon, null) : /*#__PURE__*/ _react.createElement(ChevronRightIcon, null);
}
return state;
};
const useMenuItemBase_unstable = (props, ref)=>{
const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _content, ...rest } = props;
const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
hasSubmenu
});
const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
useNotifySplitItemMultiline({
multiline: !!props.subText,
hasSubmenu
});
const innerRef = _react.useRef(null);
const dismissedWithKeyboardRef = _react.useRef(false);
const validateNestingRef = (0, _useValidateNesting.useValidateNesting)(getValidateNestingComponentName(props.role));
const state = {
hasSubmenu,
disabled,
persistOnClick,
components: {
root: 'div',
icon: 'span',
checkmark: 'span',
submenuIndicator: 'span',
content: 'span',
secondaryContent: 'span',
subText: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
role: 'menuitem',
...rest,
disabled: false,
disabledFocusable: disabled,
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef, validateNestingRef),
onKeyDown: (0, _reactutilities.useEventCallback)((event)=>{
var _props_onKeyDown;
(_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
if (!event.isDefaultPrevented() && (event.key === _keyboardkeys.Space || event.key === _keyboardkeys.Enter)) {
dismissedWithKeyboardRef.current = true;
}
}),
onMouseMove: (0, _reactutilities.useEventCallback)((event)=>{
var _props_onMouseMove;
if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
var _innerRef_current;
(_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
}
(_props_onMouseMove = props.onMouseMove) === null || _props_onMouseMove === void 0 ? void 0 : _props_onMouseMove.call(props, event);
}),
onClick: (0, _reactutilities.useEventCallback)((event)=>{
var _props_onClick;
if (!hasSubmenu && !persistOnClick) {
setOpen(event, {
open: false,
keyboard: dismissedWithKeyboardRef.current,
bubble: true,
type: 'menuItemClick',
event
});
dismissedWithKeyboardRef.current = false;
}
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
})
})), {
elementType: 'div'
}),
icon: _reactutilities.slot.optional(props.icon, {
renderByDefault: hasIcons,
elementType: 'span'
}),
checkmark: _reactutilities.slot.optional(props.checkmark, {
renderByDefault: hasCheckmarks,
elementType: 'span'
}),
submenuIndicator: _reactutilities.slot.optional(props.submenuIndicator, {
renderByDefault: hasSubmenu,
elementType: 'span'
}),
content: _reactutilities.slot.optional(props.content, {
renderByDefault: !!props.children,
defaultProps: {
children: props.children
},
elementType: 'span'
}),
secondaryContent: _reactutilities.slot.optional(props.secondaryContent, {
elementType: 'span'
}),
subText: _reactutilities.slot.optional(props.subText, {
elementType: 'span'
})
};
(0, _useCharacterSearch.useCharacterSearch)(state, innerRef);
return state;
};
/**
* MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode
* Notify the parent MenuSplitGroup so that it can handle this case
*/ const useNotifySplitItemMultiline = (options)=>{
const { hasSubmenu, multiline } = options;
const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
const { setMultiline } = (0, _menuSplitGroupContext.useMenuSplitGroupContext_unstable)();
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (!isSplitItemTrigger) {
setMultiline(multiline);
}
}, [
setMultiline,
multiline,
isSplitItemTrigger
]);
};
const useIconAndCheckmarkAlignment = (options)=>{
const { hasSubmenu } = options;
const hasIcons = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasIcons);
const hasCheckmarks = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasCheckmarks);
const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
return {
hasIcons: hasIcons && !isSplitItemTrigger,
hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
};
};
const getValidateNestingComponentName = (role)=>{
switch(role){
case 'menuitemcheckbox':
return 'MenuItemCheckbox';
case 'menuitemradio':
return 'MenuItemRadio';
}
return 'MenuItem';
};

File diff suppressed because one or more lines are too long

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