Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

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

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n const state = useMenu_unstable(props);\n const contextValues = useMenuContextValues_unstable(state);\n\n return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"names":["React","useMenu_unstable","useMenuContextValues_unstable","renderMenu_unstable","Menu","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;yBACE,YAAY;sCACC,yBAAyB;4BACnC,eAAe;AAM5C,MAAMI,OAA4BC,CAAAA;IACvC,MAAMC,YAAQL,yBAAAA,EAAiBI;IAC/B,MAAME,oBAAgBL,mDAAAA,EAA8BI;IAEpD,WAAOH,+BAAAA,EAAoBG,OAAOC;AACpC,EAAE;AAEFH,KAAKI,WAAW,GAAG"}

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Menu: function() {
return _Menu.Menu;
},
renderMenu_unstable: function() {
return _renderMenu.renderMenu_unstable;
},
useMenuContextValues_unstable: function() {
return _useMenuContextValues.useMenuContextValues_unstable;
},
useMenu_unstable: function() {
return _useMenu.useMenu_unstable;
}
});
const _Menu = require("./Menu");
const _renderMenu = require("./renderMenu");
const _useMenu = require("./useMenu");
const _useMenuContextValues = require("./useMenuContextValues");

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuDivider/MenuDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuDividerSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuDividerProps = ComponentProps<MenuDividerSlots>;\n\nexport type MenuDividerState = ComponentState<MenuDividerSlots>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MenuDivider: function() {
return _MenuDivider.MenuDivider;
},
menuDividerClassNames: function() {
return _useMenuDividerStylesstyles.menuDividerClassNames;
},
renderMenuDivider_unstable: function() {
return _renderMenuDivider.renderMenuDivider_unstable;
},
useMenuDividerStyles_unstable: function() {
return _useMenuDividerStylesstyles.useMenuDividerStyles_unstable;
},
useMenuDivider_unstable: function() {
return _useMenuDivider.useMenuDivider_unstable;
}
});
const _MenuDivider = require("./MenuDivider");
const _renderMenuDivider = require("./renderMenuDivider");
const _useMenuDivider = require("./useMenuDivider");
const _useMenuDividerStylesstyles = require("./useMenuDividerStyles.styles");

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,59 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuDividerClassNames: function() {
return menuDividerClassNames;
},
useMenuDividerStyles_unstable: function() {
return useMenuDividerStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuDividerClassNames = {
root: 'fui-MenuDivider'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f8dz51a",
a9b677: "f14z66ap",
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
Bgfg5da: "f1facbz3"
}
}, {
d: [
[
".f8dz51a{margin:4px -5px 4px -5px;}",
{
p: -1
}
],
".f14z66ap{width:auto;}",
[
".f1facbz3{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}",
{
p: -1
}
]
]
});
const useMenuDividerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuDividerClassNames.root, styles.root, state.root.className);
return state;
};

View File

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

View File

@@ -0,0 +1,37 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuDividerClassNames: function() {
return menuDividerClassNames;
},
useMenuDividerStyles_unstable: function() {
return useMenuDividerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const menuDividerClassNames = {
root: 'fui-MenuDivider'
};
const useStyles = (0, _react.makeStyles)({
root: {
margin: '4px -5px 4px -5px',
width: 'auto',
borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`
}
});
const useMenuDividerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuDividerClassNames.root, styles.root, state.root.className);
return state;
};

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/MenuGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuGroupContextValue } from '../../contexts/menuGroupContext';\n\nexport type MenuGroupSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuGroupProps = ComponentProps<MenuGroupSlots>;\n\nexport type MenuGroupState = ComponentState<MenuGroupSlots> & {\n /**\n * id applied to the DOM element of `MenuGroupHeader`\n */\n headerId: string;\n};\n\nexport type MenuGroupContextValues = {\n menuGroup: MenuGroupContextValue;\n};\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MenuGroup: function() {
return _MenuGroup.MenuGroup;
},
menuGroupClassNames: function() {
return _useMenuGroupStylesstyles.menuGroupClassNames;
},
renderMenuGroup_unstable: function() {
return _renderMenuGroup.renderMenuGroup_unstable;
},
useMenuGroupContextValues_unstable: function() {
return _useMenuGroupContextValues.useMenuGroupContextValues_unstable;
},
useMenuGroupStyles_unstable: function() {
return _useMenuGroupStylesstyles.useMenuGroupStyles_unstable;
},
useMenuGroup_unstable: function() {
return _useMenuGroup.useMenuGroup_unstable;
}
});
const _MenuGroup = require("./MenuGroup");
const _renderMenuGroup = require("./renderMenuGroup");
const _useMenuGroup = require("./useMenuGroup");
const _useMenuGroupContextValues = require("./useMenuGroupContextValues");
const _useMenuGroupStylesstyles = require("./useMenuGroupStyles.styles");

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuGroupClassNames: function() {
return menuGroupClassNames;
},
useMenuGroupStyles_unstable: function() {
return useMenuGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuGroupClassNames = {
root: 'fui-MenuGroup'
};
const useMenuGroupStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(menuGroupClassNames.root, state.root.className);
return state;
};

View File

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

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuGroupClassNames: function() {
return menuGroupClassNames;
},
useMenuGroupStyles_unstable: function() {
return useMenuGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuGroupClassNames = {
root: 'fui-MenuGroup'
};
const useMenuGroupStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(menuGroupClassNames.root, state.root.className);
return state;
};

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroupHeader/MenuGroupHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuGroupHeaderSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;\n\nexport type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MenuGroupHeader: function() {
return _MenuGroupHeader.MenuGroupHeader;
},
menuGroupHeaderClassNames: function() {
return _useMenuGroupHeaderStylesstyles.menuGroupHeaderClassNames;
},
renderMenuGroupHeader_unstable: function() {
return _renderMenuGroupHeader.renderMenuGroupHeader_unstable;
},
useMenuGroupHeaderStyles_unstable: function() {
return _useMenuGroupHeaderStylesstyles.useMenuGroupHeaderStyles_unstable;
},
useMenuGroupHeader_unstable: function() {
return _useMenuGroupHeader.useMenuGroupHeader_unstable;
}
});
const _MenuGroupHeader = require("./MenuGroupHeader");
const _renderMenuGroupHeader = require("./renderMenuGroupHeader");
const _useMenuGroupHeader = require("./useMenuGroupHeader");
const _useMenuGroupHeaderStylesstyles = require("./useMenuGroupHeaderStyles.styles");

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,58 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuGroupHeaderClassNames: function() {
return menuGroupHeaderClassNames;
},
useMenuGroupHeaderStyles_unstable: function() {
return useMenuGroupHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuGroupHeaderClassNames = {
root: 'fui-MenuGroupHeader'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Be2twd7: "fy9rknc",
sj55zd: "f11d4kpn",
uwmqm3: [
"f177v4lu",
"f19lj068"
],
z189sj: [
"f19lj068",
"f177v4lu"
],
Bhrd7zp: "fl43uef",
Bqenvij: "f1d2rq10",
mc9l5x: "f22iagw",
Bt984gj: "f122n59"
}
}, {
d: [
".fy9rknc{font-size:var(--fontSizeBase200);}",
".f11d4kpn{color:var(--colorNeutralForeground3);}",
".f177v4lu{padding-left:8px;}",
".f19lj068{padding-right:8px;}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".f1d2rq10{height:32px;}",
".f22iagw{display:flex;}",
".f122n59{align-items:center;}"
]
});
const useMenuGroupHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuGroupHeaderClassNames.root, styles.root, state.root.className);
return state;
};

View File

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

View File

@@ -0,0 +1,42 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuGroupHeaderClassNames: function() {
return menuGroupHeaderClassNames;
},
useMenuGroupHeaderStyles_unstable: function() {
return useMenuGroupHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const menuGroupHeaderClassNames = {
root: 'fui-MenuGroupHeader'
};
const useStyles = (0, _react.makeStyles)({
root: {
fontSize: _reacttheme.tokens.fontSizeBase200,
color: _reacttheme.tokens.colorNeutralForeground3,
paddingLeft: '8px',
paddingRight: '8px',
fontWeight: _reacttheme.tokens.fontWeightSemibold,
height: '32px',
display: 'flex',
alignItems: 'center'
}
});
const useMenuGroupHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuGroupHeaderClassNames.root, styles.root, state.root.className);
return state;
};

View File

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

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.\n */\nexport const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {\n const state = useMenuItem_unstable(props, ref);\n\n useMenuItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuItemStyles_unstable')(state);\n\n return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"names":["React","useMenuItem_unstable","renderMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHook_unstable","MenuItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;qCAG5B,kCAAkC;AAKvE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQR,iCAAAA,EAAqBM,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOP,uCAAAA,EAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<'div'>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n Pick<Partial<MenuItemSlots>, 'content'> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MenuItem: function() {
return _MenuItem.MenuItem;
},
menuItemClassNames: function() {
return _useMenuItemStylesstyles.menuItemClassNames;
},
renderMenuItem_unstable: function() {
return _renderMenuItem.renderMenuItem_unstable;
},
useMenuItemBase_unstable: function() {
return _useMenuItem.useMenuItemBase_unstable;
},
useMenuItemStyles_unstable: function() {
return _useMenuItemStylesstyles.useMenuItemStyles_unstable;
},
useMenuItem_unstable: function() {
return _useMenuItem.useMenuItem_unstable;
}
});
const _MenuItem = require("./MenuItem");
const _renderMenuItem = require("./renderMenuItem");
const _useMenuItem = require("./useMenuItem");
const _useMenuItemStylesstyles = require("./useMenuItemStyles.styles");

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,305 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
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",
c7f7en: "ff3wrqt",
B2d53fq: "fcvwxyo",
iro3zm: "f1to34ca",
Bumww26: "fszh5vc",
t0hwav: "ft33916",
B7iucu3: "f1cyfu5x",
Bahaeuw: "fa9u7a5",
Bbkh6qg: "f1wzezsb",
B3ejlan: "f1egomlm",
B41git9: "f1wf2001",
Boq1n10: "fied5gk",
Dcq74g: "f1efp33f",
rxnm8d: "f1m2zpi7",
wxluhh: "fei14nx",
idgcvv: "f12hmwa5",
j9xr24: "f1hzwxd0"
}
}, {
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);}",
".ff3wrqt:hover .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}",
".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}",
".fszh5vc:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}"
],
f: [
".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
],
m: [
[
"@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fa9u7a5:hover{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1wzezsb:hover{background-color:Canvas;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1egomlm:hover .fui-MenuItem__icon{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1wf2001:hover .fui-MenuItem__icon{background-color:Canvas;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fied5gk:hover .fui-MenuItem__subText{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1efp33f:hover:active{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1m2zpi7:hover:active{background-color:Canvas;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fei14nx:hover:active .fui-MenuItem__subText{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f12hmwa5:focus{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1hzwxd0:focus{background-color:Canvas;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useSubTextStyles = /*#__PURE__*/ (0, _react.__styles)({
disabled: {
sj55zd: "f1s2aq7o",
B7iucu3: "f1cyfu5x"
}
}, {
d: [
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
],
m: [
[
"@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
{
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 subTextStyles = useSubTextStyles();
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, secondaryContentBaseStyles, state.disabled && styles.disabled, 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.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
}
(0, _index.useCheckmarkStyles_unstable)(state);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,260 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuItemClassNames: function() {
return menuItemClassNames;
},
useMenuItemStyles_unstable: function() {
return useMenuItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacticons = require("@fluentui/react-icons");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
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 = (0, _react.makeResetStyles)({
borderRadius: _reacttheme.tokens.borderRadiusMedium,
position: 'relative',
color: _reacttheme.tokens.colorNeutralForeground2,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
paddingRight: _reacttheme.tokens.spacingVerticalSNudge,
paddingLeft: _reacttheme.tokens.spacingVerticalSNudge,
paddingTop: _reacttheme.tokens.spacingVerticalSNudge,
paddingBottom: _reacttheme.tokens.spacingVerticalSNudge,
boxSizing: 'border-box',
maxWidth: '290px',
minHeight: '32px',
flexShrink: 0,
display: 'flex',
alignItems: 'start',
fontSize: _reacttheme.tokens.fontSizeBase300,
cursor: 'pointer',
gap: '4px',
':hover': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
color: _reacttheme.tokens.colorNeutralForeground2Hover,
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'inline'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'none'
},
[`& .${menuItemClassNames.icon}`]: {
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
},
[`& .${menuItemClassNames.subText}`]: {
color: _reacttheme.tokens.colorNeutralForeground3Hover
}
},
':hover:active': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
color: _reacttheme.tokens.colorNeutralForeground2Pressed,
[`& .${menuItemClassNames.subText}`]: {
color: _reacttheme.tokens.colorNeutralForeground3Pressed
}
},
// High contrast styles
'@media (forced-colors: active)': {
':hover': {
backgroundColor: 'Canvas',
borderColor: 'Highlight',
color: 'Highlight'
},
...(0, _reacttabster.createFocusOutlineStyle)({
style: {
outlineColor: 'Highlight'
}
})
},
userSelect: 'none',
...(0, _reacttabster.createFocusOutlineStyle)()
});
const useContentBaseStyles = (0, _react.makeResetStyles)({
paddingLeft: '2px',
paddingRight: '2px',
backgroundColor: 'transparent',
flexGrow: 1
});
const useSecondaryContentBaseStyles = (0, _react.makeResetStyles)({
paddingLeft: '2px',
paddingRight: '2px',
..._reacttheme.typographyStyles.caption1,
lineHeight: _reacttheme.tokens.lineHeightBase300,
color: _reacttheme.tokens.colorNeutralForeground3,
':hover': {
color: _reacttheme.tokens.colorNeutralForeground3Hover
},
':focus': {
color: _reacttheme.tokens.colorNeutralForeground3Hover
}
});
const useIconBaseStyles = (0, _react.makeResetStyles)({
width: '20px',
height: '20px',
fontSize: '20px',
lineHeight: 0,
alignItems: 'center',
display: 'inline-flex',
justifyContent: 'center',
flexShrink: 0
});
const useSubmenuIndicatorBaseStyles = (0, _react.makeResetStyles)({
width: '20px',
height: '20px',
fontSize: '20px',
lineHeight: 0,
alignItems: 'center',
display: 'inline-flex',
justifyContent: 'center'
});
const useSubtextBaseStyles = (0, _react.makeResetStyles)({
..._reacttheme.typographyStyles.caption2,
color: _reacttheme.tokens.colorNeutralForeground3
});
const useStyles = (0, _react.makeStyles)({
checkmark: {
marginTop: '2px'
},
splitItemMain: {
flexGrow: 1
},
splitItemTrigger: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
paddingLeft: 0,
'::before': {
content: '""',
width: _reacttheme.tokens.strokeWidthThin,
height: '24px',
backgroundColor: _reacttheme.tokens.colorNeutralStroke1
}
},
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
':hover': {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
cursor: 'not-allowed',
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'none'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'inline'
},
[`& .${menuItemClassNames.icon}`]: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
},
[`& .${menuItemClassNames.subText}`]: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
},
':hover:active': {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
[`& .${menuItemClassNames.subText}`]: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
},
':focus': {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
},
'@media (forced-colors: active)': {
color: 'GrayText',
':hover': {
color: 'GrayText',
backgroundColor: 'Canvas',
[`& .${menuItemClassNames.icon}`]: {
color: 'GrayText',
backgroundColor: 'Canvas'
},
[`& .${menuItemClassNames.subText}`]: {
color: 'GrayText'
}
},
':hover:active': {
color: 'GrayText',
backgroundColor: 'Canvas',
[`& .${menuItemClassNames.subText}`]: {
color: 'GrayText'
}
},
':focus': {
color: 'GrayText',
backgroundColor: 'Canvas'
}
}
}
});
const useSubTextStyles = (0, _react.makeStyles)({
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
'@media (forced-colors: active)': {
color: 'GrayText'
}
}
});
const useMultilineStyles = (0, _react.makeStyles)({
content: {
display: 'flex',
flexDirection: 'column'
},
secondaryContent: {
alignSelf: 'center'
},
submenuIndicator: {
alignSelf: '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 subTextStyles = useSubTextStyles();
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, secondaryContentBaseStyles, state.disabled && styles.disabled, 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.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
}
(0, _index.useCheckmarkStyles_unstable)(state);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "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';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * 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":["React","useMenuItemCheckbox_unstable","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useCustomStyleHook_unstable","MenuItemCheckbox","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCACc,wBAAwB;wCACrB,2BAA2B;iDACxB,qCAAqC;qCAG5C,kCAAkC;AAKvE,MAAMK,mBAAAA,WAAAA,GAA+DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,YAAQR,iDAAAA,EAA6BM,OAAOC;QAElDL,mEAAAA,EAAmCM;QAEnCL,gDAAAA,EAA4B,sCAAsCK;IAElE,WAAOP,uDAAAA,EAAgCO;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/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":[],"mappings":""}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MenuItemCheckbox: function() {
return _MenuItemCheckbox.MenuItemCheckbox;
},
menuItemCheckboxClassNames: function() {
return _useMenuItemCheckboxStylesstyles.menuItemCheckboxClassNames;
},
renderMenuItemCheckbox_unstable: function() {
return _renderMenuItemCheckbox.renderMenuItemCheckbox_unstable;
},
useMenuItemCheckboxBase_unstable: function() {
return _useMenuItemCheckbox.useMenuItemCheckboxBase_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");

View File

@@ -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, useMenuItemCheckboxBase_unstable } from './useMenuItemCheckbox';\nexport { menuItemCheckboxClassNames, useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';\n"],"names":["MenuItemCheckbox","renderMenuItemCheckbox_unstable","useMenuItemCheckbox_unstable","useMenuItemCheckboxBase_unstable","menuItemCheckboxClassNames","useMenuItemCheckboxStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,kCAAgB;;;eAGhBI,2DAA0B;;;eAF1BH,uDAA+B;;;eACDE,qDAAgC;;;eAClCE,mEAAkC;;;eAD9DH,iDAA4B;;;kCAFJ,qBAAqB;wCACN,2BAA2B;qCACI,wBAAwB;iDACxB,qCAAqC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuItemCheckbox_unstable", {
enumerable: true,
get: function() {
return renderMenuItemCheckbox_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderMenuItemCheckbox_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, {})
]
});
};

View File

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

View File

@@ -0,0 +1,65 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useMenuItemCheckboxBase_unstable: function() {
return useMenuItemCheckboxBase_unstable;
},
useMenuItemCheckbox_unstable: function() {
return useMenuItemCheckbox_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 _reacticons = require("@fluentui/react-icons");
const _menuListContext = require("../../contexts/menuListContext");
const _useMenuItem = require("../MenuItem/useMenuItem");
const useMenuItemCheckbox_unstable = (props, ref)=>{
const state = useMenuItemCheckboxBase_unstable(props, ref);
// Set default checkmark icon
if (state.checkmark) {
var _state_checkmark;
var _children;
(_children = (_state_checkmark = state.checkmark).children) !== null && _children !== void 0 ? _children : _state_checkmark.children = /*#__PURE__*/ _react.createElement(_reacticons.Checkmark16Filled, null);
}
return state;
};
const useMenuItemCheckboxBase_unstable = (props, ref)=>{
const toggleCheckbox = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.toggleCheckbox);
const { name, value } = props;
const checked = (0, _menuListContext.useMenuListContext_unstable)((context)=>{
var _context_checkedValues;
const checkedItems = ((_context_checkedValues = context.checkedValues) === null || _context_checkedValues === void 0 ? void 0 : _context_checkedValues[name]) || [];
return checkedItems.indexOf(value) !== -1;
});
const state = {
...(0, _useMenuItem.useMenuItemBase_unstable)({
role: 'menuitemcheckbox',
persistOnClick: true,
...props,
'aria-checked': checked,
checkmark: _reactutilities.slot.optional(props.checkmark, {
renderByDefault: true,
elementType: 'span'
}),
onClick: (e)=>{
var _props_onClick;
toggleCheckbox === null || toggleCheckbox === void 0 ? void 0 : toggleCheckbox(e, name, value, checked);
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);
}
}, ref),
name,
value,
checked
};
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItemBase_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n props: MenuItemCheckboxProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n const state = useMenuItemCheckboxBase_unstable(props, ref);\n\n // Set default checkmark icon\n if (state.checkmark) {\n state.checkmark.children ??= <Checkmark16Filled />;\n }\n\n return state;\n};\n\n/**\n * Base hook for MenuItemCheckbox component, produces state required to render the component\n *\n * @internal\n */\nexport const useMenuItemCheckboxBase_unstable = (\n props: MenuItemCheckboxProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n const { name, value } = props;\n\n const checked = useMenuListContext_unstable(context => {\n const checkedItems = context.checkedValues?.[name] || [];\n return checkedItems.indexOf(value) !== -1;\n });\n\n const state: MenuItemCheckboxState = {\n ...useMenuItemBase_unstable(\n {\n role: 'menuitemcheckbox',\n persistOnClick: true,\n ...props,\n 'aria-checked': checked,\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: true,\n elementType: 'span',\n }),\n onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n toggleCheckbox?.(e, name, value, checked);\n props.onClick?.(e);\n },\n },\n ref,\n ),\n name,\n value,\n checked,\n };\n\n return state;\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItemBase_unstable","useMenuItemCheckbox_unstable","props","ref","state","useMenuItemCheckboxBase_unstable","checkmark","children","toggleCheckbox","context","name","value","checked","checkedItems","checkedValues","indexOf","role","persistOnClick","optional","renderByDefault","elementType","onClick","e"],"mappings":"AAAA;;;;;;;;;;;;oCA8BaS;eAAAA;;gCAnBAJ;;;;;iEATU,QAAQ;gCACV,4BAA4B;4BACf,wBAAwB;iCACd,iCAAiC;6BACpC,0BAA0B;AAK5D,MAAMA,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,QAAQC,iCAAiCH,OAAOC;IAEtD,6BAA6B;IAC7B,IAAIC,MAAME,SAAS,EAAE;YACnBF;;QAAAA,CAAAA,YAAAA,CAAAA,mBAAAA,MAAME,SAAAA,AAAS,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAhBH,iBAAgBG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACT,6BAAAA,EAAAA;IAChC;IAEA,OAAOM;AACT,EAAE;AAOK,yCAAyC,CAC9CF,OACAC;IAEA,MAAMK,qBAAiBT,4CAAAA,EAA4BU,CAAAA,UAAWA,QAAQD,cAAc;IACpF,MAAM,EAAEE,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAExB,MAAMU,cAAUb,4CAAAA,EAA4BU,CAAAA;YACrBA;QAArB,MAAMI,eAAeJ,CAAAA,CAAAA,yBAAAA,QAAQK,aAAAA,AAAa,MAAA,QAArBL,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAuB,CAACC,KAAAA,AAAK,KAAI,EAAE;QACxD,OAAOG,aAAaE,OAAO,CAACJ,WAAW,CAAC;IAC1C;IAEA,MAAMP,QAA+B;QACnC,OAAGJ,qCAAAA,EACD;YACEgB,MAAM;YACNC,gBAAgB;YAChB,GAAGf,KAAK;YACR,gBAAgBU;YAChBN,WAAWT,oBAAAA,CAAKqB,QAAQ,CAAChB,MAAMI,SAAS,EAAE;gBACxCa,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERpB;gBADAM,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBc,GAAGZ,MAAMC,OAAOC;iBACjCV,iBAAAA,MAAMmB,OAAAA,AAAO,MAAA,QAAbnB,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,IAAAA,CAAAA,OAAgBoB;YAClB;QACF,GACAnB,IACD;QACDO;QACAC;QACAC;IACF;IAEA,OAAOR;AACT,EAAE"}

View File

@@ -0,0 +1,52 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuItemCheckboxClassNames: function() {
return menuItemCheckboxClassNames;
},
useMenuItemCheckboxStyles_unstable: function() {
return useMenuItemCheckboxStyles_unstable;
}
});
const _react = require("@griffel/react");
const _index = require("../../selectable/index");
const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
const menuItemCheckboxClassNames = {
root: 'fui-MenuItemCheckbox',
icon: 'fui-MenuItemCheckbox__icon',
checkmark: 'fui-MenuItemCheckbox__checkmark',
content: 'fui-MenuItemCheckbox__content',
secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
subText: 'fui-MenuItemCheckbox__subText'
};
const useMenuItemCheckboxStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.root, state.root.className);
if (state.content) {
state.content.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.content, state.content.className);
}
if (state.secondaryContent) {
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
}
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.icon, state.icon.className);
}
if (state.checkmark) {
state.checkmark.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
}
if (state.subText) {
state.subText.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.subText, state.subText.className);
}
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
(0, _index.useCheckmarkStyles_unstable)(state);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useMenuItemCheckboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemCheckboxClassNames = {\n root: 'fui-MenuItemCheckbox',\n icon: 'fui-MenuItemCheckbox__icon',\n checkmark: 'fui-MenuItemCheckbox__checkmark',\n content: 'fui-MenuItemCheckbox__content',\n secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n subText: 'fui-MenuItemCheckbox__subText'\n};\nexport const useMenuItemCheckboxStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n }\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICG,0BAA0B;;;IAQ1BO,kCAAkC;;;;uBAXlB,gBAAgB;uBACD,wBAAwB;yCACzB,sCAAsC;AAC1E,mCAAmC;IACtCN,IAAI,EAAE,sBAAsB;IAC5BC,IAAI,EAAE,4BAA4B;IAClCC,SAAS,EAAE,iCAAiC;IAC5CC,OAAO,EAAE,+BAA+B;IACxCC,gBAAgB,EAAE,wCAAwC;IAC1DC,OAAO,EAAE;AACb,CAAC;AACM,4CAA4CE,KAAK,IAAG;IACvD,aAAa;IACbA,KAAK,CAACP,IAAI,CAACQ,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;IAC1F,IAAID,KAAK,CAACJ,OAAO,EAAE;QACfI,KAAK,CAACJ,OAAO,CAACK,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACI,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACK,SAAS,CAAC;IACvG;IACA,IAAID,KAAK,CAACH,gBAAgB,EAAE;QACxBG,KAAK,CAACH,gBAAgB,CAACI,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACK,gBAAgB,EAAEG,KAAK,CAACH,gBAAgB,CAACI,SAAS,CAAC;IAClI;IACA,IAAID,KAAK,CAACN,IAAI,EAAE;QACZM,KAAK,CAACN,IAAI,CAACO,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;IAC9F;IACA,IAAID,KAAK,CAACL,SAAS,EAAE;QACjBK,KAAK,CAACL,SAAS,CAACM,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACG,SAAS,EAAEK,KAAK,CAACL,SAAS,CAACM,SAAS,CAAC;IAC7G;IACA,IAAID,KAAK,CAACF,OAAO,EAAE;QACfE,KAAK,CAACF,OAAO,CAACG,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACM,OAAO,EAAEE,KAAK,CAACF,OAAO,CAACG,SAAS,CAAC;IACvG;QACAV,mDAA0B,EAACS,KAAK,CAAC;QACjCV,kCAA2B,EAACU,KAAK,CAAC;IAClC,OAAOA,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,52 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuItemCheckboxClassNames: function() {
return menuItemCheckboxClassNames;
},
useMenuItemCheckboxStyles_unstable: function() {
return useMenuItemCheckboxStyles_unstable;
}
});
const _react = require("@griffel/react");
const _index = require("../../selectable/index");
const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
const menuItemCheckboxClassNames = {
root: 'fui-MenuItemCheckbox',
icon: 'fui-MenuItemCheckbox__icon',
checkmark: 'fui-MenuItemCheckbox__checkmark',
content: 'fui-MenuItemCheckbox__content',
secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
subText: 'fui-MenuItemCheckbox__subText'
};
const useMenuItemCheckboxStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.root, state.root.className);
if (state.content) {
state.content.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.content, state.content.className);
}
if (state.secondaryContent) {
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
}
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.icon, state.icon.className);
}
if (state.checkmark) {
state.checkmark.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
}
if (state.subText) {
state.subText.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.subText, state.subText.className);
}
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
(0, _index.useCheckmarkStyles_unstable)(state);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemCheckbox',\n icon: 'fui-MenuItemCheckbox__icon',\n checkmark: 'fui-MenuItemCheckbox__checkmark',\n content: 'fui-MenuItemCheckbox__content',\n secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n subText: 'fui-MenuItemCheckbox__subText',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState): MenuItemCheckboxState => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemCheckboxClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n\n return state;\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"mappings":"AAAA;;;;;;;;;;;;IASaG,0BAAAA;;;IASAO,kCAAAA;;;;uBAhBgB,iBAAiB;uBACF,yBAAyB;yCAC1B,uCAAuC;AAK3E,mCAA4F;IACjGN,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEK,2CAA2C,CAACE;IACjD;IAEAA,MAAMP,IAAI,CAACQ,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEzF,IAAID,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACK,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACpG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1BG,MAAMH,gBAAgB,CAACI,SAAS,OAAGZ,mBAAAA,EACjCG,2BAA2BK,gBAAgB,EAC3CG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACdM,MAAMN,IAAI,CAACO,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAC3F;IAEA,IAAID,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACM,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IAC1G;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;QAEAV,mDAAAA,EAA2BS;QAC3BV,kCAAAA,EAA4BU;IAE5B,OAAOA;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuItemLink", {
enumerable: true,
get: function() {
return MenuItemLink;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenuItemLink = require("./useMenuItemLink");
const _renderMenuItemLink = require("./renderMenuItemLink");
const _useMenuItemLinkStylesstyles = require("./useMenuItemLinkStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuItemLink = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuItemLink.useMenuItemLink_unstable)(props, ref);
(0, _useMenuItemLinkStylesstyles.useMenuItemLinkStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuItemLinkStyles_unstable')(state);
return (0, _renderMenuItemLink.renderMenuItemLink_unstable)(state);
});
MenuItemLink.displayName = 'MenuItemLink';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemLink/MenuItemLink.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuItemLink_unstable } from './useMenuItemLink';\nimport { renderMenuItemLink_unstable } from './renderMenuItemLink';\nimport { useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';\nimport type { MenuItemLinkProps } from './MenuItemLink.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuItemLink component\n */\nexport const MenuItemLink: ForwardRefComponent<MenuItemLinkProps> = React.forwardRef((props, ref) => {\n const state = useMenuItemLink_unstable(props, ref);\n\n useMenuItemLinkStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuItemLinkStyles_unstable')(state);\n\n return renderMenuItemLink_unstable(state);\n});\n\nMenuItemLink.displayName = 'MenuItemLink';\n"],"names":["React","useMenuItemLink_unstable","renderMenuItemLink_unstable","useMenuItemLinkStyles_unstable","useCustomStyleHook_unstable","MenuItemLink","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCACU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;qCAGpC,kCAAkC;AAKvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CL,2DAAAA,EAA+BM;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOP,+CAAAA,EAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering MenuItemLink
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemLink/MenuItemLink.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuItemProps, MenuItemSlots } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemLinkSlots = {\n root: Slot<'a'>;\n} & Pick<MenuItemSlots, 'icon' | 'content' | 'secondaryContent' | 'checkmark'>;\n\n/**\n * MenuItemLink Props\n */\nexport type MenuItemLinkProps = ComponentProps<MenuItemLinkSlots> & Pick<MenuItemProps, 'disabled'> & { href: string };\n\n/**\n * State used in rendering MenuItemLink\n */\nexport type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAAkE"}

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, {
MenuItemLink: function() {
return _MenuItemLink.MenuItemLink;
},
menuItemLinkClassNames: function() {
return _useMenuItemLinkStylesstyles.menuItemLinkClassNames;
},
renderMenuItemLink_unstable: function() {
return _renderMenuItemLink.renderMenuItemLink_unstable;
},
useMenuItemLinkStyles_unstable: function() {
return _useMenuItemLinkStylesstyles.useMenuItemLinkStyles_unstable;
},
useMenuItemLink_unstable: function() {
return _useMenuItemLink.useMenuItemLink_unstable;
}
});
const _MenuItemLink = require("./MenuItemLink");
const _renderMenuItemLink = require("./renderMenuItemLink");
const _useMenuItemLink = require("./useMenuItemLink");
const _useMenuItemLinkStylesstyles = require("./useMenuItemLinkStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemLink/index.ts"],"sourcesContent":["export { MenuItemLink } from './MenuItemLink';\nexport type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nexport { renderMenuItemLink_unstable } from './renderMenuItemLink';\nexport { useMenuItemLink_unstable } from './useMenuItemLink';\nexport { menuItemLinkClassNames, useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';\n"],"names":["MenuItemLink","renderMenuItemLink_unstable","useMenuItemLink_unstable","menuItemLinkClassNames","useMenuItemLinkStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAIZG,mDAAsB;;;eAFtBF,+CAA2B;;;eAEHG,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,iBAAiB;oCAEF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}

View File

@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuItemLink_unstable", {
enumerable: true,
get: function() {
return renderMenuItemLink_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderMenuItemLink_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
// TODO Add additional slots in the appropriate place
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.jsx)(state.content, {}),
state.secondaryContent && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.secondaryContent, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemLink/renderMenuItemLink.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MenuItemLinkState, MenuItemLinkSlots } from './MenuItemLink.types';\n\n/**\n * Render the final JSX of MenuItemLink\n */\nexport const renderMenuItemLink_unstable = (state: MenuItemLinkState): JSXElement => {\n assertSlots<MenuItemLinkSlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return (\n <state.root>\n {state.checkmark && <state.checkmark />}\n {state.icon && <state.icon />}\n {state.content && <state.content />}\n {state.secondaryContent && <state.secondaryContent />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderMenuItemLink_unstable","state","root","checkmark","icon","content","secondaryContent"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,oCAAoC,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,qDAAqD;IACrD,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,OAAO,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,OAAO,EAAA,CAAA;YAC/BJ,MAAMK,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,gBAAgB,EAAA,CAAA;;;AAGxD,EAAE"}

View File

@@ -0,0 +1,42 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuItemLink_unstable", {
enumerable: true,
get: function() {
return useMenuItemLink_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 _useMenuItem = require("../MenuItem/useMenuItem");
const useMenuItemLink_unstable = (props, ref)=>{
// casting because the root slot changes from div to a
const baseState = (0, _useMenuItem.useMenuItem_unstable)(props, null);
// FIXME: casting because the root slot changes from div to a,
// ideal solution would be to extract common logic from useMenuItem_unstable root
// and use it in both without assuming element type
const _props = {
...props,
...baseState.root,
ref,
tabIndex: props.tabIndex
};
return {
...baseState,
components: {
// eslint-disable-next-line @typescript-eslint/no-deprecated
...baseState.components,
root: 'a'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('a', {
role: 'menuitem',
..._props
}), {
elementType: 'a'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n props: MenuItemLinkProps,\n ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n // casting because the root slot changes from div to a\n const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n // FIXME: casting because the root slot changes from div to a,\n // ideal solution would be to extract common logic from useMenuItem_unstable root\n // and use it in both without assuming element type\n const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n return {\n ...baseState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n role: 'menuitem',\n ..._props,\n }),\n { elementType: 'a' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"mappings":"AAAA;;;;;+BAiBaI;;;;;;;iEAfU,QAAQ;gCACwC,4BAA4B;6BAE9D,0BAA0B;AAYxD,iCAAiC,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,gBAAYJ,iCAAAA,EAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}

View File

@@ -0,0 +1,64 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuItemLinkClassNames: function() {
return menuItemLinkClassNames;
},
useMenuItemLinkStyles_unstable: function() {
return useMenuItemLinkStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
const menuItemLinkClassNames = {
root: 'fui-MenuItemLink',
icon: 'fui-MenuItemLink__icon',
checkmark: 'fui-MenuItemLink__checkmark',
content: 'fui-MenuItemLink__content',
secondaryContent: 'fui-MenuItemLink__secondaryContent'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
resetLink: {
w71qe1: "f1iuv45f",
Bkioxbp: "f9pkogg",
I8pafv: "foe20s3",
dvvfom: "f1kn6jj"
}
}, {
d: [
".f1iuv45f{text-decoration-line:none;}",
".f9pkogg{text-decoration-thickness:initial;}",
".foe20s3{text-decoration-style:initial;}",
".f1kn6jj{text-decoration-color:initial;}"
]
});
const useMenuItemLinkStyles_unstable = (state)=>{
'use no memo';
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(menuItemLinkClassNames.icon, state.icon.className);
}
if (state.content) {
state.content.className = (0, _react.mergeClasses)(menuItemLinkClassNames.content, state.content.className);
}
if (state.secondaryContent) {
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
}
if (state.checkmark) {
state.checkmark.className = (0, _react.mergeClasses)(menuItemLinkClassNames.checkmark, state.checkmark.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useMenuItemLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemLinkClassNames = {\n root: 'fui-MenuItemLink',\n icon: 'fui-MenuItemLink__icon',\n checkmark: 'fui-MenuItemLink__checkmark',\n content: 'fui-MenuItemLink__content',\n secondaryContent: 'fui-MenuItemLink__secondaryContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n resetLink: {\n textDecorationLine: 'none',\n textDecorationThickness: 'initial',\n textDecorationStyle: 'initial',\n textDecorationColor: 'initial'\n }\n});\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */ export const useMenuItemLinkStyles_unstable = (state)=>{\n 'use no memo';\n useMenuItemStyles_unstable(state);\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n }\n if (state.content) {\n state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","w71qe1","Bkioxbp","I8pafv","dvvfom","d","useMenuItemLinkStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;kCAmBY;eAA9Ba;;;uBArBwB,gBAAgB;yCACd,sCAAsC;AAC1E,+BAA+B;IAClCZ,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE,wBAAwB;IAC9BC,SAAS,EAAE,6BAA6B;IACxCC,OAAO,EAAE,2BAA2B;IACpCC,gBAAgB,EAAE;AACtB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,SAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOrB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;QACbf,mDAA0B,EAACe,KAAK,CAAC;IACjC,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BQ,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,uBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEc,MAAM,CAACR,SAAS,EAAEO,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IACxG,IAAIF,KAAK,CAACZ,IAAI,EAAE;QACZY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,uBAAY,EAACE,sBAAsB,CAACE,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC1F;IACA,IAAIF,KAAK,CAACV,OAAO,EAAE;QACfU,KAAK,CAACV,OAAO,CAACY,SAAS,OAAGlB,mBAAY,EAACE,sBAAsB,CAACI,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;IACnG;IACA,IAAIF,KAAK,CAACT,gBAAgB,EAAE;QACxBS,KAAK,CAACT,gBAAgB,CAACW,SAAS,GAAGlB,uBAAY,EAACE,sBAAsB,CAACK,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACW,SAAS,CAAC;IAC9H;IACA,IAAIF,KAAK,CAACX,SAAS,EAAE;QACjBW,KAAK,CAACX,SAAS,CAACa,SAAS,OAAGlB,mBAAY,EAACE,sBAAsB,CAACG,SAAS,EAAEW,KAAK,CAACX,SAAS,CAACa,SAAS,CAAC;IACzG;IACA,OAAOF,KAAK;AAChB,CAAC"}

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