Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+3783
View File
File diff suppressed because it is too large Load Diff
+15
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
View File
@@ -0,0 +1,3 @@
# @fluentui/react-menu
**React Menu components for [Fluent UI React](https://react.fluentui.dev)**
+880
View File
@@ -0,0 +1,880 @@
/// <reference types="react" />
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 { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import { PositioningVirtualElement } from '@fluentui/react-positioning';
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;
/**
* 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'> & {
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;
};
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: '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;
};
/**
* Extends and drills down Menulist props to simplify API
*/
export declare type MenuProps = ComponentProps<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: [JSX.Element, JSX.Element] | JSX.Element;
/**
* 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 = {};
/**
* 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<MenuSlots> & 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>;
/**
* 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) => 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>;
/**
* 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[]>;
};
/**
* 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>;
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) => JSX.Element;
/**
* Redefine the render function to add slots. Reuse the menudivider structure but add
* slots to children.
*/
export declare const renderMenuDivider_unstable: (state: MenuDividerState) => JSX.Element;
/**
* 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) => JSX.Element;
/**
* Redefine the render function to add slots. Reuse the menugroupheader structure but add
* slots to children.
*/
export declare const renderMenuGroupHeader_unstable: (state: MenuGroupHeaderState) => JSX.Element;
/**
* Function that renders the final JSX of the component
*/
export declare const renderMenuItem_unstable: (state: MenuItemState) => JSX.Element;
/** Function that renders the final JSX of the component */
export declare const renderMenuItemCheckbox_unstable: (state: MenuItemCheckboxState) => JSX.Element;
/**
* Render the final JSX of MenuItemLink
*/
export declare const renderMenuItemLink_unstable: (state: MenuItemLinkState) => JSX.Element;
/**
* Redefine the render function to add slots. Reuse the menuitemradio structure but add
* slots to children.
*/
export declare const renderMenuItemRadio_unstable: (state: MenuItemRadioState) => JSX.Element;
/**
* Function that renders the final JSX of the component
*/
export declare const renderMenuItemSwitch_unstable: (state: MenuItemSwitchState) => JSX.Element;
/**
* Function that renders the final JSX of the component
*/
export declare const renderMenuList_unstable: (state: MenuListState, contextValues: MenuListContextValues) => JSX.Element;
/**
* Render the final JSX of MenuPopover
*/
export declare const renderMenuPopover_unstable: (state: MenuPopoverState) => JSX.Element;
/**
* Render the final JSX of MenuSplitGroup
*/
export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState, contexts?: MenuSplitGroupContextValues) => JSX.Element;
/**
* Render the final JSX of MenuTrigger
*
* Only renders children
*/
export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JSX.Element;
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) => 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
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");
+1
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUSA,IAAI;eAAJA,WAAI;;IAAEC,mBAAmB;eAAnBA,0BAAmB;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;;uBAAQ"}
+28
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");
+1
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,WAAW;eAAXA,kBAAW;;IACXC,qBAAqB;eAArBA,4BAAqB;;IACrBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}
+31
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");
+1
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOEA,SAAS;eAATA,gBAAS;;IACTC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,kCAAkC;eAAlCA,yCAAkC;;IAClCC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,qBAAqB;eAArBA,4BAAqB;;;uBAChB"}
+28
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");
@@ -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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMEA,eAAe;eAAfA,sBAAe;;IACfC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,8BAA8B;eAA9BA,qCAA8B;;IAC9BC,iCAAiC;eAAjCA,wCAAiC;;IACjCC,2BAA2B;eAA3BA,kCAA2B;;;uBACtB"}
+28
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, {
MenuItem: function() {
return _index.MenuItem;
},
menuItemClassNames: function() {
return _index.menuItemClassNames;
},
renderMenuItem_unstable: function() {
return _index.renderMenuItem_unstable;
},
useMenuItemStyles_unstable: function() {
return _index.useMenuItemStyles_unstable;
},
useMenuItem_unstable: function() {
return _index.useMenuItem_unstable;
}
});
const _index = require("./components/MenuItem/index");
+1
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} from './components/MenuItem/index';\n"],"names":["MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemStyles_unstable","useMenuItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,QAAQ;eAARA,eAAQ;;IACRC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,oBAAoB;eAApBA,2BAAoB;;;uBACf"}
+28
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, {
MenuItemCheckbox: function() {
return _index.MenuItemCheckbox;
},
menuItemCheckboxClassNames: function() {
return _index.menuItemCheckboxClassNames;
},
renderMenuItemCheckbox_unstable: function() {
return _index.renderMenuItemCheckbox_unstable;
},
useMenuItemCheckboxStyles_unstable: function() {
return _index.useMenuItemCheckboxStyles_unstable;
},
useMenuItemCheckbox_unstable: function() {
return _index.useMenuItemCheckbox_unstable;
}
});
const _index = require("./components/MenuItemCheckbox/index");
@@ -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} from './components/MenuItemCheckbox/index';\n"],"names":["MenuItemCheckbox","menuItemCheckboxClassNames","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useMenuItemCheckbox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,gBAAgB;eAAhBA,uBAAgB;;IAChBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,+BAA+B;eAA/BA,sCAA+B;;IAC/BC,kCAAkC;eAAlCA,yCAAkC;;IAClCC,4BAA4B;eAA5BA,mCAA4B;;;uBACvB"}
+28
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");
+1
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,YAAY;eAAZA,mBAAY;;IACZC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,8BAA8B;eAA9BA,qCAA8B;;IAC9BC,wBAAwB;eAAxBA,+BAAwB;;;uBACnB"}
+28
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, {
MenuItemRadio: function() {
return _index.MenuItemRadio;
},
menuItemRadioClassNames: function() {
return _index.menuItemRadioClassNames;
},
renderMenuItemRadio_unstable: function() {
return _index.renderMenuItemRadio_unstable;
},
useMenuItemRadioStyles_unstable: function() {
return _index.useMenuItemRadioStyles_unstable;
},
useMenuItemRadio_unstable: function() {
return _index.useMenuItemRadio_unstable;
}
});
const _index = require("./components/MenuItemRadio/index");
+1
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} from './components/MenuItemRadio/index';\n"],"names":["MenuItemRadio","menuItemRadioClassNames","renderMenuItemRadio_unstable","useMenuItemRadioStyles_unstable","useMenuItemRadio_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,aAAa;eAAbA,oBAAa;;IACbC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,4BAA4B;eAA5BA,mCAA4B;;IAC5BC,+BAA+B;eAA/BA,sCAA+B;;IAC/BC,yBAAyB;eAAzBA,gCAAyB;;;uBACpB"}
+31
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, {
MenuItemSwitch: function() {
return _index.MenuItemSwitch;
},
circleFilledClassName: function() {
return _index.circleFilledClassName;
},
menuItemSwitchClassNames: function() {
return _index.menuItemSwitchClassNames;
},
renderMenuItemSwitch_unstable: function() {
return _index.renderMenuItemSwitch_unstable;
},
useMenuItemSwitchStyles_unstable: function() {
return _index.useMenuItemSwitchStyles_unstable;
},
useMenuItemSwitch_unstable: function() {
return _index.useMenuItemSwitch_unstable;
}
});
const _index = require("./components/MenuItemSwitch/index");
+1
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} from './components/MenuItemSwitch/index';\n"],"names":["MenuItemSwitch","circleFilledClassName","menuItemSwitchClassNames","renderMenuItemSwitch_unstable","useMenuItemSwitchStyles_unstable","useMenuItemSwitch_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,cAAc;eAAdA,qBAAc;;IACdC,qBAAqB;eAArBA,4BAAqB;;IACrBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,gCAAgC;eAAhCA,uCAAgC;;IAChCC,0BAA0B;eAA1BA,iCAA0B;;;uBACrB"}
+31
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");
+1
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWEA,QAAQ;eAARA,eAAQ;;IACRC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,iCAAiC;eAAjCA,wCAAiC;;IACjCC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,oBAAoB;eAApBA,2BAAoB;;;uBACf"}
+28
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");
+1
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,WAAW;eAAXA,kBAAW;;IACXC,qBAAqB;eAArBA,4BAAqB;;IACrBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}
+28
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");
+1
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,cAAc;eAAdA,qBAAc;;IACdC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,gCAAgC;eAAhCA,uCAAgC;;IAChCC,0BAA0B;eAA1BA,iCAA0B;;;uBACrB"}
+22
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");
+1
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,WAAW;eAAXA,kBAAW;;IAAEC,0BAA0B;eAA1BA,iCAA0B;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;;uBAAQ"}
+21
View File
@@ -0,0 +1,21 @@
"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';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["import * 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":["Menu","props","state","useMenu_unstable","contextValues","useMenuContextValues_unstable","renderMenu_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;yBACU;sCACa;4BACV;AAM7B,MAAMA,OAA4BC,CAAAA;IACvC,MAAMC,QAAQC,IAAAA,yBAAAA,EAAiBF;IAC/B,MAAMG,gBAAgBC,IAAAA,mDAAAA,EAA8BH;IAEpD,OAAOI,IAAAA,+BAAAA,EAAoBJ,OAAOE;AACpC;AAEAJ,KAAKO,WAAW,GAAG"}
@@ -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
@@ -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");
@@ -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","useMenuContextValues_unstable","useMenu_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAWJC,mBAAmB;eAAnBA,+BAAmB;;IAEnBC,6BAA6B;eAA7BA,mDAA6B;;IAD7BC,gBAAgB;eAAhBA,yBAAgB;;;sBAZJ;4BAWe;yBACH;sCACa"}
@@ -0,0 +1,18 @@
"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 _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _menuContext = require("../../contexts/menuContext");
const renderMenu_unstable = (state, contextValues)=>{
return /*#__PURE__*/ _react.createElement(_menuContext.MenuProvider, {
value: contextValues.menu
}, state.menuTrigger, state.open && state.menuPopover);
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Menu/renderMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n return (\n <MenuProvider value={contextValues.menu}>\n {state.menuTrigger}\n {state.open && state.menuPopover}\n </MenuProvider>\n );\n};\n"],"names":["renderMenu_unstable","state","contextValues","React","createElement","MenuProvider","value","menu","menuTrigger","open","menuPopover"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;6BACM;AAMtB,MAAMA,sBAAsB,CAACC,OAAkBC;IACpD,OAAA,WAAA,GACEC,OAAAC,aAAA,CAACC,yBAAAA,EAAAA;QAAaC,OAAOJ,cAAcK,IAAI;OACpCN,MAAMO,WAAW,EACjBP,MAAMQ,IAAI,IAAIR,MAAMS,WAAW;AAGtC"}
@@ -0,0 +1,267 @@
"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 _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reacttabster = require("@fluentui/react-tabster");
const _menuContext = require("../../contexts/menuContext");
const _index = require("../../utils/index");
const _useIsSubmenu = require("../../utils/useIsSubmenu");
// 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, _useIsSubmenu.useIsSubmenu)();
const { hoverDelay = 500, inline = false, hasCheckmarks = false, hasIcons = false, closeOnScroll = false, openOnContext = false, persistOnItemClick = false, openOnHover = isSubmenu, defaultCheckedValues, mountNode = null } = props;
const triggerId = (0, _reactutilities.useId)('menu');
const [contextTarget, setContextTarget] = (0, _reactpositioning.usePositioningMouseTarget)();
const positioningState = {
position: isSubmenu ? 'after' : 'below',
align: isSubmenu ? 'top' : 'start',
target: props.openOnContext ? contextTarget : undefined,
fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,
...(0, _reactpositioning.resolvePositioningShorthand)(props.positioning)
};
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: triggerRef, containerRef: menuPopoverRef } = (0, _reactpositioning.usePositioning)(positioningState);
// 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: {},
openOnContext,
open,
setOpen,
checkedValues,
onCheckedValueChange,
persistOnItemClick
};
};
/**
* 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 === _index.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();
}
if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === _index.MENU_ENTER_EVENT) {
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 === 'mouseenter' || 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, _index.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 {
if (!firstMount) {
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
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
@@ -0,0 +1,34 @@
"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, 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,
setOpen,
triggerId,
triggerRef
};
return {
menu
};
}
@@ -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 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 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","setOpen","triggerId","triggerRef","menu"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,8BAA8BC,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,OAAO,EACPC,SAAS,EACTC,UAAU,EACX,GAAGf;IAEJ,mGAAmG;IACnG,MAAMgB,OAAO;QACXf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB"}
@@ -0,0 +1,23 @@
"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';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuDivider/MenuDivider.tsx"],"sourcesContent":["import * 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":["MenuDivider","React","forwardRef","props","ref","state","useMenuDivider_unstable","useMenuDividerStyles_unstable","useCustomStyleHook_unstable","renderMenuDivider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACiB;4CACM;mCACH;qCAGC;AAKrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAE9BG,IAAAA,gDAAAA,EAA4B,iCAAiCH;IAE7D,OAAOI,IAAAA,6CAAAA,EAA2BJ;AACpC;AAEAL,YAAYU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":"","mappings":""}
@@ -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");
@@ -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","menuDividerClassNames","renderMenuDivider_unstable","useMenuDividerStyles_unstable","useMenuDivider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,WAAW;eAAXA,wBAAW;;IAGXC,qBAAqB;eAArBA,iDAAqB;;IAFrBC,0BAA0B;eAA1BA,6CAA0B;;IAEHC,6BAA6B;eAA7BA,yDAA6B;;IADpDC,uBAAuB;eAAvBA,uCAAuB;;;6BAFJ;mCACe;gCACH;4CAC6B"}
@@ -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, {});
};
@@ -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 { 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) => {\n assertSlots<MenuDividerSlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderMenuDivider_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;AAOrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
@@ -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'
})
};
};
@@ -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":["useMenuDivider_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;gCAPkC;iEACxB;AAMhB,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BC,MAAM;YACN,eAAe;YACf,GAAGP,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
@@ -0,0 +1,58 @@
"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;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useMenuDividerStyles.styles.js"],"sourcesContent":["import { 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":["menuDividerClassNames","useMenuDividerStyles_unstable","root","useStyles","__styles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","a9b677","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,qBAAqB;eAArBA;;IAUAC,6BAA6B;eAA7BA;;;uBAZ4B;AAElC,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAOX,MAAMf,gCAAiCgB,CAAAA;IAC1C;IACA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,sBAAsBE,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACjG,OAAOF;AACX"}
@@ -0,0 +1,25 @@
"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';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/MenuGroup.tsx"],"sourcesContent":["import * 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":["MenuGroup","React","forwardRef","props","ref","state","useMenuGroup_unstable","contextValues","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useCustomStyleHook_unstable","renderMenuGroup_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;8BACe;iCACG;2CACU;0CAGP;qCACA;AAKrC,MAAMA,YAAAA,WAAAA,GAAiDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQC,IAAAA,mCAAAA,EAAsBH,OAAOC;IAC3C,MAAMG,gBAAgBC,IAAAA,6DAAAA,EAAmCH;IAEzDI,IAAAA,qDAAAA,EAA4BJ;IAE5BK,IAAAA,gDAAAA,EAA4B,+BAA+BL;IAE3D,OAAOM,IAAAA,yCAAAA,EAAyBN,OAAOE;AACzC;AAEAP,UAAUY,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":"","mappings":""}
@@ -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");
@@ -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","menuGroupClassNames","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useMenuGroup_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,SAAS;eAATA,oBAAS;;IAITC,mBAAmB;eAAnBA,6CAAmB;;IAHnBC,wBAAwB;eAAxBA,yCAAwB;;IAExBC,kCAAkC;eAAlCA,6DAAkC;;IACbC,2BAA2B;eAA3BA,qDAA2B;;IAFhDC,qBAAqB;eAArBA,mCAAqB;;;2BAFJ;iCACe;8BACH;2CACa;0CACc"}
@@ -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, {})
});
};
@@ -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 { 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) => {\n assertSlots<MenuGroupSlots>(state);\n\n return (\n <MenuGroupContextProvider value={contextValues.menuGroup}>\n <state.root />\n </MenuGroupContextProvider>\n );\n};\n"],"names":["renderMenuGroup_unstable","state","contextValues","assertSlots","_jsx","MenuGroupContextProvider","value","menuGroup","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAC4B;kCAEa;AAMlC,MAAMA,2BAA2B,CAACC,OAAuBC;IAC9DC,IAAAA,2BAAAA,EAA4BF;IAE5B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,0CAAAA,EAAAA;QAAyBC,OAAOJ,cAAcK,SAAS;kBACtD,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
@@ -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
};
}
@@ -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":["useMenuGroup_unstable","props","ref","headerId","useId","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;;iEAPO;gCAC+B;AAM/C,SAASA,sBAAsBC,KAAqB,EAAEC,GAA2B;IACtF,MAAMC,WAAWC,IAAAA,qBAAAA,EAAM;IAEvB,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FP,KAAKA;YACL,mBAAmBC;YACnBO,MAAM;YACN,GAAGT,KAAK;QACV,IACA;YAAEU,aAAa;QAAM;QAEvBR;IACF;AACF"}
@@ -0,0 +1,23 @@
"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
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupContextValues.ts"],"sourcesContent":["import * 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":["useMenuGroupContextValues_unstable","state","headerId","menuGroup","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,YAAYC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAAEH;QAAS,CAAA,GAAI;QAACA;KAAS;IAEhE,OAAO;QAAEC;IAAU;AACrB"}
@@ -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;
};
@@ -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":["menuGroupClassNames","useMenuGroupStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,mBAAmB;eAAnBA;;IAGAC,2BAA2B;eAA3BA;;;uBAJgB;AACtB,MAAMD,sBAAsB;IAC/BE,MAAM;AACV;AACO,MAAMD,8BAA+BE,CAAAA;IACxC;IACAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAY,EAACL,oBAAoBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAClF,OAAOD;AACX"}
@@ -0,0 +1,23 @@
"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';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["import * 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":["MenuGroupHeader","React","forwardRef","props","ref","state","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","useCustomStyleHook_unstable","renderMenuGroupHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;oCACqB;gDACM;uCACH;qCAGH;AAKrC,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAElCG,IAAAA,gDAAAA,EAA4B,qCAAqCH;IAEjE,OAAOI,IAAAA,qDAAAA,EAA+BJ;AACxC;AAEAL,gBAAgBU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":"","mappings":""}
@@ -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");
@@ -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","menuGroupHeaderClassNames","renderMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","useMenuGroupHeader_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,eAAe;eAAfA,gCAAe;;IAGfC,yBAAyB;eAAzBA,yDAAyB;;IAFzBC,8BAA8B;eAA9BA,qDAA8B;;IAEHC,iCAAiC;eAAjCA,iEAAiC;;IAD5DC,2BAA2B;eAA3BA,+CAA2B;;;iCAFJ;uCACe;oCACH;gDACiC"}
@@ -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, {});
};
@@ -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 { 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) => {\n assertSlots<MenuGroupHeaderSlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderMenuGroupHeader_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;AAOrB,MAAMA,iCAAiC,CAACC;IAC7CC,IAAAA,2BAAAA,EAAkCD;IAElC,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
@@ -0,0 +1,32 @@
"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'
})
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"sourcesContent":["import * 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":["useMenuGroupHeader_unstable","props","ref","headerId","id","useMenuGroupContext_unstable","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQgBA;;;eAAAA;;;;iEARO;kCACsB;gCACE;AAMxC,SAASA,4BACdC,KAA2B,EAC3BC,GAA2B;IAE3B,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGC,IAAAA,8CAAAA;IAEzB,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FR,KAAKA;YACLE;YACA,GAAGH,KAAK;QACV,IACA;YAAEU,aAAa;QAAM;IAEzB;AACF"}
@@ -0,0 +1,57 @@
"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;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { 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":["menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable","root","useStyles","__styles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAeAC,iCAAiC;eAAjCA;;;uBAjB4B;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAYX,MAAMZ,oCAAqCa,CAAAA;IAC9C;IACA,MAAMC,SAASZ;IACfW,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,0BAA0BE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IACrG,OAAOF;AACX"}
@@ -0,0 +1,23 @@
"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';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import * 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":["MenuItem","React","forwardRef","props","ref","state","useMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHook_unstable","renderMenuItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;6BACc;gCACG;yCACG;qCAGC;AAKrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAE3BG,IAAAA,gDAAAA,EAA4B,8BAA8BH;IAE1D,OAAOI,IAAAA,uCAAAA,EAAwBJ;AACjC;AAEAL,SAASU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":"","mappings":""}
@@ -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 _MenuItem.MenuItem;
},
menuItemClassNames: function() {
return _useMenuItemStylesstyles.menuItemClassNames;
},
renderMenuItem_unstable: function() {
return _renderMenuItem.renderMenuItem_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");
@@ -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 } from './useMenuItem';\nexport { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemStyles_unstable","useMenuItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAIRC,kBAAkB;eAAlBA,2CAAkB;;IAFlBC,uBAAuB;eAAvBA,uCAAuB;;IAEHC,0BAA0B;eAA1BA,mDAA0B;;IAD9CC,oBAAoB;eAApBA,iCAAoB;;;0BAHJ;gCAEe;6BACH;yCAC0B"}
@@ -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, {})
]
});
};
@@ -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 { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState) => {\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":["renderMenuItem_unstable","state","assertSlots","_jsxs","root","checkmark","_jsx","icon","content","children","subText","secondaryContent","submenuIndicator"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;4BAPb;gCAC4B;AAMrB,MAAMA,0BAA0B,CAACC;IACtCC,IAAAA,2BAAAA,EAA2BD;IAE3B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,SAAS,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,SAAS,EAAA,CAAA;YACnCJ,MAAMM,IAAI,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,OAAO,IAAA,WAAA,GACZL,IAAAA,gBAAA,EAACF,MAAMO,OAAO,EAAA;;oBACXP,MAAMO,OAAO,CAACC,QAAQ;oBACtBR,MAAMS,OAAO,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACL,MAAMS,OAAO,EAAA,CAAA;;;YAGnCT,MAAMU,gBAAgB,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACL,MAAMU,gBAAgB,EAAA,CAAA;YACjDV,MAAMW,gBAAgB,IAAA,WAAA,GAAIN,IAAAA,eAAA,EAACL,MAAMW,gBAAgB,EAAA,CAAA;;;AAGxD"}
@@ -0,0 +1,29 @@
"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;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["import * 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>) => {\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":["useCharacterSearch","state","ref","setFocusByFirstCharacter","useMenuListContext_unstable","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;iCACqB;AAIrC,MAAMA,qBAAqB,CAACC,OAAsBC;IACvD;IAEA,MAAMC,2BAA2BC,IAAAA,4CAAAA,EAA4BC,CAAAA,UAAWA,QAAQF,wBAAwB;IAExG,MAAM,EAAEG,WAAWC,iBAAiB,EAAE,GAAGN,MAAMO,IAAI;IAEnDP,MAAMO,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBE;QAEpB,IAAIA,CAAAA,CAAAA,SAAAA,EAAEC,GAAG,AAAHA,MAAG,QAALD,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAOE,MAAM,AAANA,IAAS,GAAG;YACrB;QACF;QAEA,IAAIT,IAAIU,OAAO,EAAE;YACfT,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BM,GAAGP,IAAIU,OAAO;QAC3C;IACF;IAEA,OAAOX;AACT"}
@@ -0,0 +1,149 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuItem_unstable", {
enumerable: true,
get: 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 ChevronRightIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronRightFilled, _reacticons.ChevronRightRegular);
const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFilled, _reacticons.ChevronLeftRegular);
const useMenuItem_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 } = props;
const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
hasSubmenu
});
const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
useNotifySplitItemMultiline({
multiline: !!props.subText,
hasSubmenu
});
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const innerRef = _react.useRef(null);
const dismissedWithKeyboardRef = _react.useRef(false);
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',
...props,
disabled: false,
disabledFocusable: disabled,
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
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,
defaultProps: {
children: dir === 'ltr' ? /*#__PURE__*/ _react.createElement(ChevronRightIcon, null) : /*#__PURE__*/ _react.createElement(ChevronLeftIcon, null)
},
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
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,253 @@
"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, {
menuItemClassNames: function() {
return menuItemClassNames;
},
useMenuItemStyles_unstable: function() {
return useMenuItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _index = require("../../selectable/index");
const menuItemClassNames = {
root: 'fui-MenuItem',
icon: 'fui-MenuItem__icon',
checkmark: 'fui-MenuItem__checkmark',
submenuIndicator: 'fui-MenuItem__submenuIndicator',
content: 'fui-MenuItem__content',
secondaryContent: 'fui-MenuItem__secondaryContent',
subText: 'fui-MenuItem__subText'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rfoezjv", "r8lt3v0", {
r: [
".rfoezjv{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
".rfoezjv:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
".rfoezjv:hover .fui-Icon-filled{display:inline;}",
".rfoezjv:hover .fui-Icon-regular{display:none;}",
".rfoezjv:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
".rfoezjv:hover .fui-MenuItem__subText{color:var(--colorNeutralForeground3Hover);}",
".rfoezjv:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
".rfoezjv:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForeground3Pressed);}",
".rfoezjv:focus{outline-style:none;}",
".rfoezjv:focus-visible{outline-style:none;}",
".rfoezjv[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
".rfoezjv[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
".r8lt3v0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
".r8lt3v0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
".r8lt3v0:hover .fui-Icon-filled{display:inline;}",
".r8lt3v0:hover .fui-Icon-regular{display:none;}",
".r8lt3v0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
".r8lt3v0:hover .fui-MenuItem__subText{color:var(--colorNeutralForeground3Hover);}",
".r8lt3v0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
".r8lt3v0:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForeground3Pressed);}",
".r8lt3v0:focus{outline-style:none;}",
".r8lt3v0:focus-visible{outline-style:none;}",
".r8lt3v0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
".r8lt3v0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
],
s: [
"@media (forced-colors: active){.rfoezjv:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.rfoezjv:focus{outline-style:none;}.rfoezjv:focus-visible{outline-style:none;}.rfoezjv[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.rfoezjv[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.rfoezjv[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}",
"@media (forced-colors: active){.rfoezjv[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
"@media (forced-colors: active){.r8lt3v0:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r8lt3v0:focus{outline-style:none;}.r8lt3v0:focus-visible{outline-style:none;}.r8lt3v0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r8lt3v0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r8lt3v0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}",
"@media (forced-colors: active){.r8lt3v0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
]
});
const useContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1ls86vo", "rpbc5dr", [
".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}",
".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}"
]);
const useSecondaryContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r12mwwux", "r1ewgu5j", [
".r12mwwux{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}",
".r12mwwux:hover{color:var(--colorNeutralForeground3Hover);}",
".r12mwwux:focus{color:var(--colorNeutralForeground3Hover);}",
".r1ewgu5j{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}",
".r1ewgu5j:hover{color:var(--colorNeutralForeground3Hover);}",
".r1ewgu5j:focus{color:var(--colorNeutralForeground3Hover);}"
]);
const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ro9koqv", null, [
".ro9koqv{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;flex-shrink:0;}"
]);
const useSubmenuIndicatorBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r9c34qo", null, [
".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"
]);
const useSubtextBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rk2ppru", null, [
".rk2ppru{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);color:var(--colorNeutralForeground3);}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
checkmark: {
B6of3ja: "fmnzpld"
},
splitItemMain: {
Bh6795r: "fqerorx"
},
splitItemTrigger: {
Btl43ni: [
"f1ozlkrg",
"f10ostut"
],
Beyfa6y: [
"f1deotkl",
"f1krrbdw"
],
uwmqm3: [
"f1cnd47f",
"fhxju0i"
],
Ftih45: "f1wl9k8s",
Ccq8qp: "f1yn80uh",
Baz25je: "f68mna0",
cmx5o7: "f1p5zmk"
},
disabled: {
sj55zd: "f1s2aq7o",
Bi91k9c: "fvgxktp",
Jwef8y: "f1ijtazh",
eoavqd: "fphbwmw",
Bk3fhr4: "f19vpps7",
Bmfj8id: "fv5swzo",
Bg7n49j: "f1q1x1ba",
B2d53fq: "fcvwxyo",
iro3zm: "f1to34ca",
t0hwav: "ft33916",
Bbusuzp: "f1dcs8yz",
ze5xyy: "f1kc2mi9",
Bqrx1nm: "fkavljg",
Bctn1xl: "fk56vqo",
h5esng: "ff3wi9b",
Bh6z0a4: "f1ikwg0d",
Bh953qp: "f10l1t5h"
}
}, {
d: [
".fmnzpld{margin-top:2px;}",
".fqerorx{flex-grow:1;}",
".f1ozlkrg{border-top-left-radius:0;}",
".f10ostut{border-top-right-radius:0;}",
".f1deotkl{border-bottom-left-radius:0;}",
".f1krrbdw{border-bottom-right-radius:0;}",
".f1cnd47f{padding-left:0;}",
".fhxju0i{padding-right:0;}",
".f1wl9k8s::before{content:\"\";}",
".f1yn80uh::before{width:var(--strokeWidthThin);}",
".f68mna0::before{height:24px;}",
".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
],
h: [
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}",
".fphbwmw:hover{cursor:not-allowed;}",
".f19vpps7:hover .fui-Icon-filled{display:none;}",
".fv5swzo:hover .fui-Icon-regular{display:inline;}",
".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}",
".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}"
],
f: [
".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
],
m: [
[
"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fkavljg:hover{background-color:Canvas;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.ff3wi9b:hover .fui-MenuItem__icon{background-color:Canvas;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f10l1t5h:focus{background-color:Canvas;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
content: {
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62"
},
secondaryContent: {
qb2dma: "f7nlbp4"
},
submenuIndicator: {
qb2dma: "f7nlbp4"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
".f7nlbp4{align-self:center;}"
]
});
const useMenuItemStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const rootBaseStyles = useRootBaseStyles();
const contentBaseStyles = useContentBaseStyles();
const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
const iconBaseStyles = useIconBaseStyles();
const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
const multilineStyles = useMultilineStyles();
const subtextBaseStyles = useSubtextBaseStyles();
const multiline = !!state.subText;
state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
if (state.content) {
state.content.className = (0, _react.mergeClasses)(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
}
if (state.checkmark) {
state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
}
if (state.secondaryContent) {
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
}
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
}
if (state.submenuIndicator) {
state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
}
if (state.subText) {
state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);
}
(0, _index.useCheckmarkStyles_unstable)(state);
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuItemCheckbox", {
enumerable: true,
get: function() {
return MenuItemCheckbox;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenuItemCheckbox = require("./useMenuItemCheckbox");
const _renderMenuItemCheckbox = require("./renderMenuItemCheckbox");
const _useMenuItemCheckboxStylesstyles = require("./useMenuItemCheckboxStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuItemCheckbox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuItemCheckbox.useMenuItemCheckbox_unstable)(props, ref);
(0, _useMenuItemCheckboxStylesstyles.useMenuItemCheckboxStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuItemCheckboxStyles_unstable')(state);
return (0, _renderMenuItemCheckbox.renderMenuItemCheckbox_unstable)(state);
});
MenuItemCheckbox.displayName = 'MenuItemCheckbox';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.\n */\nexport const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps> = React.forwardRef((props, ref) => {\n const state = useMenuItemCheckbox_unstable(props, ref);\n\n useMenuItemCheckboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuItemCheckboxStyles_unstable')(state);\n\n return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"names":["MenuItemCheckbox","React","forwardRef","props","ref","state","useMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useCustomStyleHook_unstable","renderMenuItemCheckbox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;qCACsB;wCACG;iDACG;qCAGP;AAKrC,MAAMA,mBAAAA,WAAAA,GAA+DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQC,IAAAA,iDAAAA,EAA6BH,OAAOC;IAElDG,IAAAA,mEAAAA,EAAmCF;IAEnCG,IAAAA,gDAAAA,EAA4B,sCAAsCH;IAElE,OAAOI,IAAAA,uDAAAA,EAAgCJ;AACzC;AAEAL,iBAAiBU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -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 _MenuItemCheckbox.MenuItemCheckbox;
},
menuItemCheckboxClassNames: function() {
return _useMenuItemCheckboxStylesstyles.menuItemCheckboxClassNames;
},
renderMenuItemCheckbox_unstable: function() {
return _renderMenuItemCheckbox.renderMenuItemCheckbox_unstable;
},
useMenuItemCheckboxStyles_unstable: function() {
return _useMenuItemCheckboxStylesstyles.useMenuItemCheckboxStyles_unstable;
},
useMenuItemCheckbox_unstable: function() {
return _useMenuItemCheckbox.useMenuItemCheckbox_unstable;
}
});
const _MenuItemCheckbox = require("./MenuItemCheckbox");
const _renderMenuItemCheckbox = require("./renderMenuItemCheckbox");
const _useMenuItemCheckbox = require("./useMenuItemCheckbox");
const _useMenuItemCheckboxStylesstyles = require("./useMenuItemCheckboxStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemCheckbox/index.ts"],"sourcesContent":["export type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nexport { MenuItemCheckbox } from './MenuItemCheckbox';\nexport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nexport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nexport { menuItemCheckboxClassNames, useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';\n"],"names":["MenuItemCheckbox","menuItemCheckboxClassNames","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useMenuItemCheckbox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,gBAAgB;eAAhBA,kCAAgB;;IAGhBC,0BAA0B;eAA1BA,2DAA0B;;IAF1BC,+BAA+B;eAA/BA,uDAA+B;;IAEHC,kCAAkC;eAAlCA,mEAAkC;;IAD9DC,4BAA4B;eAA5BA,iDAA4B;;;kCAFJ;wCACe;qCACH;iDACkC"}

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