@fluentui/react-menu-grid-preview 0.1.1 → 0.2.0

package/lib/utils/useValidateNesting.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useValidateNesting.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport type { MenuContextValue } from '@fluentui/react-menu';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\n\ntype NestingComponentName = 'MenuGrid' | 'MenuGridCell' | 'MenuGridItem' | 'MenuGridRow';\ntype MenuItemRoles = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';\n\nconst menuItemRoleToNameMapping = {\n  menuitem: 'MenuItem',\n  menuitemcheckbox: 'MenuItemCheckbox',\n  menuitemradio: 'MenuItemRadio',\n};\n\nexport const useValidateNesting = (componentName: NestingComponentName): React.RefObject<HTMLElement | null> => {\n  'use no memo';\n\n  const { targetDocument } = useFluent();\n  const triggerRef = useMenuContext_unstable((context: MenuContextValue) => context.triggerRef);\n  const inline = useMenuContext_unstable((context: MenuContextValue) => context.inline);\n  const ref = React.useRef<HTMLElement | null>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This check should run only in development mode\n    // It's okay to disable the ESLint rule because we ar checking env variable statically (not at runtime)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      let ancestor = ref.current;\n      let ancestorRole;\n\n      do {\n        ancestor = ancestor?.parentElement ?? null;\n        ancestorRole = ancestor?.getAttribute('role');\n        if (ancestor?.classList.contains('fui-MenuGrid')) {\n          if (componentName === 'MenuGridCell') {\n            throw new Error(\n              'MenuGridCell is incorrectly nested within MenuGrid. You probably want to wrap it in a MenuGridRow.',\n            );\n          }\n          break;\n        }\n        if (ancestor?.classList.contains('fui-MenuGridRow') && componentName === 'MenuGridCell') {\n          break;\n        }\n        if (['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(ancestorRole ?? '')) {\n          throw new Error(\n            `${componentName} is incorrectly nested within ${\n              menuItemRoleToNameMapping[ancestorRole as MenuItemRoles]\n            } or within an element with the \"${ancestorRole}\" role.`,\n          );\n        }\n        if (ancestorRole === 'menu') {\n          let message = '';\n          let breakAncestorTraversal = false;\n          switch (componentName) {\n            case 'MenuGrid':\n              if (inline && getMenuOfTrigger(triggerRef.current, targetDocument) === ancestor) {\n                // Handle the case when MenuGrid is inline next to its menu trigger which is a submenu item of the parent menu\n                breakAncestorTraversal = true;\n                break;\n              }\n              message = 'MenuGrid is incorrectly nested within MenuList or within an element with the \"menu\" role.';\n              break;\n            case 'MenuGridCell':\n              message =\n                'MenuGridCell is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGridRow.';\n              break;\n            case 'MenuGridItem':\n              message =\n                'MenuGridItem is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGrid instead.';\n              break;\n            case 'MenuGridRow':\n              message =\n                'MenuGridRow is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGrid instead.';\n              break;\n          }\n          if (breakAncestorTraversal) {\n            break;\n          }\n          throw new Error(message);\n        }\n      } while (ancestor && ancestor !== targetDocument?.body);\n    }, [componentName, ref, triggerRef, inline, targetDocument]);\n  }\n  return ref;\n};\n\nconst getMenuOfTrigger = (trigger: HTMLElement | null, targetDocument?: Document): HTMLElement | null => {\n  let ancestor = trigger?.parentElement;\n  while (ancestor && ancestor !== targetDocument?.body) {\n    if (ancestor?.getAttribute('role') === 'menu') {\n      return ancestor;\n    }\n    ancestor = ancestor?.parentElement ?? null;\n  }\n  return null;\n};\n"],"names":["React","useFluent_unstable","useFluent","useMenuContext_unstable","menuItemRoleToNameMapping","menuitem","menuitemcheckbox","menuitemradio","useValidateNesting","componentName","targetDocument","triggerRef","context","inline","ref","useRef","process","env","NODE_ENV","useEffect","ancestor","current","ancestorRole","parentElement","getAttribute","classList","contains","Error","includes","message","breakAncestorTraversal","getMenuOfTrigger","body","trigger"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAGlF,SAASC,uBAAuB,QAAQ,uBAAuB;AAK/D,MAAMC,4BAA4B;IAChCC,UAAU;IACVC,kBAAkB;IAClBC,eAAe;AACjB;AAEA,OAAO,MAAMC,qBAAqB,CAACC;IACjC;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,aAAaR,wBAAwB,CAACS,UAA8BA,QAAQD,UAAU;IAC5F,MAAME,SAASV,wBAAwB,CAACS,UAA8BA,QAAQC,MAAM;IACpF,MAAMC,MAAMd,MAAMe,MAAM,CAAqB;IAE7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,iDAAiD;QACjD,uGAAuG;QACvG,sDAAsD;QACtDlB,MAAMmB,SAAS,CAAC;YACd,IAAIC,WAAWN,IAAIO,OAAO;YAC1B,IAAIC;YAEJ,GAAG;oBACUF;gBAAXA,WAAWA,CAAAA,0BAAAA,qBAAAA,+BAAAA,SAAUG,aAAa,cAAvBH,qCAAAA,0BAA2B;gBACtCE,eAAeF,qBAAAA,+BAAAA,SAAUI,YAAY,CAAC;gBACtC,IAAIJ,qBAAAA,+BAAAA,SAAUK,SAAS,CAACC,QAAQ,CAAC,iBAAiB;oBAChD,IAAIjB,kBAAkB,gBAAgB;wBACpC,MAAM,IAAIkB,MACR;oBAEJ;oBACA;gBACF;gBACA,IAAIP,CAAAA,qBAAAA,+BAAAA,SAAUK,SAAS,CAACC,QAAQ,CAAC,uBAAsBjB,kBAAkB,gBAAgB;oBACvF;gBACF;gBACA,IAAI;oBAAC;oBAAY;oBAAoB;iBAAgB,CAACmB,QAAQ,CAACN,yBAAAA,0BAAAA,eAAgB,KAAK;oBAClF,MAAM,IAAIK,MACR,GAAGlB,cAAc,8BAA8B,EAC7CL,yBAAyB,CAACkB,aAA8B,CACzD,gCAAgC,EAAEA,aAAa,OAAO,CAAC;gBAE5D;gBACA,IAAIA,iBAAiB,QAAQ;oBAC3B,IAAIO,UAAU;oBACd,IAAIC,yBAAyB;oBAC7B,OAAQrB;wBACN,KAAK;4BACH,IAAII,UAAUkB,iBAAiBpB,WAAWU,OAAO,EAAEX,oBAAoBU,UAAU;gCAC/E,8GAA8G;gCAC9GU,yBAAyB;gCACzB;4BACF;4BACAD,UAAU;4BACV;wBACF,KAAK;4BACHA,UACE;4BACF;wBACF,KAAK;4BACHA,UACE;4BACF;wBACF,KAAK;4BACHA,UACE;4BACF;oBACJ;oBACA,IAAIC,wBAAwB;wBAC1B;oBACF;oBACA,MAAM,IAAIH,MAAME;gBAClB;YACF,QAAST,YAAYA,cAAaV,2BAAAA,qCAAAA,eAAgBsB,IAAI,EAAE;QAC1D,GAAG;YAACvB;YAAeK;YAAKH;YAAYE;YAAQH;SAAe;IAC7D;IACA,OAAOI;AACT,EAAE;AAEF,MAAMiB,mBAAmB,CAACE,SAA6BvB;IACrD,IAAIU,WAAWa,oBAAAA,8BAAAA,QAASV,aAAa;IACrC,MAAOH,YAAYA,cAAaV,2BAAAA,qCAAAA,eAAgBsB,IAAI,EAAE;QACpD,IAAIZ,CAAAA,qBAAAA,+BAAAA,SAAUI,YAAY,CAAC,aAAY,QAAQ;YAC7C,OAAOJ;QACT;YACWA;QAAXA,WAAWA,CAAAA,0BAAAA,qBAAAA,+BAAAA,SAAUG,aAAa,cAAvBH,qCAAAA,0BAA2B;IACxC;IACA,OAAO;AACT"}

package/lib-commonjs/components/MenuGrid/MenuGrid.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGrid/MenuGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGrid_unstable } from './useMenuGrid';\nimport { renderMenuGrid_unstable } from './renderMenuGrid';\nimport { useMenuGridContextValues_unstable } from './useMenuGridContextValues';\nimport { useMenuGridStyles_unstable } from './useMenuGridStyles.styles';\nimport type { MenuGridProps } from './MenuGrid.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGrid, using the `useMenuGrid_unstable` hook.\n */\nexport const MenuGrid: ForwardRefComponent<MenuGridProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGrid_unstable(props, ref);\n  const contextValues = useMenuGridContextValues_unstable(state);\n\n  useMenuGridStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridStyles_unstable')(state);\n\n  return renderMenuGrid_unstable(state, contextValues);\n});\n\nMenuGrid.displayName = 'MenuGrid';\n"],"names":["React","useMenuGrid_unstable","renderMenuGrid_unstable","useMenuGridContextValues_unstable","useMenuGridStyles_unstable","MenuGrid","forwardRef","props","ref","state","contextValues","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;0CACT,6BAA6B;yCACpC,6BAA6B;AAQjE,iBAAMA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qCAAAA,EAAqBM,OAAOC;IAC1C,MAAME,oBAAgBP,2DAAAA,EAAkCM;QAExDL,mDAAAA,EAA2BK;IAE3B,oEAAoE;IAEpE,WAAOP,uCAAAA,EAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGrid_unstable } from './useMenuGrid';\nimport { renderMenuGrid_unstable } from './renderMenuGrid';\nimport { useMenuGridContextValues_unstable } from './useMenuGridContextValues';\nimport { useMenuGridStyles_unstable } from './useMenuGridStyles.styles';\nimport type { MenuGridProps } from './MenuGrid.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGrid, using the `useMenuGrid_unstable` hook.\n */\nexport const MenuGrid: ForwardRefComponent<MenuGridProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGrid_unstable(props, ref);\n  const contextValues = useMenuGridContextValues_unstable(state);\n\n  useMenuGridStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridStyles_unstable')(state);\n\n  return renderMenuGrid_unstable(state, contextValues);\n});\n\nMenuGrid.displayName = 'MenuGrid';\n"],"names":["React","useMenuGrid_unstable","renderMenuGrid_unstable","useMenuGridContextValues_unstable","useMenuGridStyles_unstable","MenuGrid","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;0CACT,6BAA6B;yCACpC,6BAA6B;AAQjE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQR,iCAAAA,EAAqBM,OAAOC;IAC1C,MAAME,oBAAgBP,2DAAAA,EAAkCM;QAExDL,mDAAAA,EAA2BK;IAE3B,oEAAoE;IAEpE,WAAOP,uCAAAA,EAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib-commonjs/components/MenuGrid/useMenuGrid.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -13,20 +14,23 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttable = require("@fluentui/react-table");
 const _reactmenu = require("@fluentui/react-menu");
+const _useValidateNesting = require("../../utils/useValidateNesting");
 const useMenuGrid_unstable = (props, ref)=>{
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGrid');
     const triggerId = (0, _reactmenu.useMenuContext_unstable)((context)=>context.triggerId);
     const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = (0, _reacttable.useTableCompositeNavigation)();
+    const onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(props.onKeyDown, onTableKeyDown));
     return {
         components: {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
             role: 'grid',
             'aria-labelledby': triggerId,
-            onKeyDown: onTableKeyDown,
             ...tableTabsterAttribute,
-            ...props
+            ...props,
+            onKeyDown
         }), {
             elementType: 'div'
         }),

package/lib-commonjs/components/MenuGrid/useMenuGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useTableCompositeNavigation } from '@fluentui/react-table';\nimport type { MenuGridProps, MenuGridState } from './MenuGrid.types';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDivElement>): MenuGridState => {\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        onKeyDown: onTableKeyDown,\n        ...tableTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMenuContext_unstable","useMenuGrid_unstable","props","ref","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","components","root","always","role","onKeyDown","elementType"],"mappings":";;;;+BASaK;;;;;;;iEATU,QAAQ;gCACgB,4BAA4B;4BAC/B,wBAAwB;2BAE5B,uBAAuB;AAKxD,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,gBAAYJ,kCAAAA,EAAwBK,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,OAAGT,uCAAAA;IAE5E,OAAO;QACLU,YAAY;YACVC,MAAM;QACR;QACAA,MAAMZ,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,OAAO;YAC9BM;YACAS,MAAM;YACN,mBAAmBR;YACnBS,WAAWL;YACX,GAAGD,qBAAqB;YACxB,GAAGL,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;QAEvBR;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGrid.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\n\nimport { useTableCompositeNavigation } from '@fluentui/react-table';\nimport type { MenuGridProps, MenuGridState } from './MenuGrid.types';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDivElement>): MenuGridState => {\n  const validateNestingRef = useValidateNesting('MenuGrid');\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        ...tableTabsterAttribute,\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute,\n  };\n};\n"],"names":["React","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","validateNestingRef","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","onKeyDown","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAmBaS;;;;;;;iEAjBU,QAAQ;gCAOxB,4BAA4B;4BAES,wBAAwB;2BAE5B,uBAAuB;oCAC5B,iCAAiC;AAK7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAMK,gBAAYN,kCAAAA,EAAwBO,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,OAAGX,uCAAAA;IAC5E,MAAMY,gBAAYhB,gCAAAA,MAAiBC,8BAAAA,EAAeO,MAAMQ,SAAS,EAAED;IAEnE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,OAAO;YAC9BO,SAAKV,6BAAAA,EAAcU,KAAKC;YACxBU,MAAM;YACN,mBAAmBT;YACnB,GAAGG,qBAAqB;YACxB,GAAGN,KAAK;YACRQ;QACF,IACA;YAAEK,aAAa;QAAM;QAEvBR;IACF;AACF,EAAE"}

package/lib-commonjs/components/MenuGrid/useMenuGridContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGrid/useMenuGridContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGridContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MenuGridContextValues, MenuGridState } from './MenuGrid.types';\n\nexport function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {\n  const { tableRowTabsterAttribute } = state;\n  const menuGrid = React.useMemo(() => ({ tableRowTabsterAttribute }), [tableRowTabsterAttribute]);\n\n  return { menuGrid };\n}\n"],"names":["React","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","menuGrid","useMemo"],"mappings":";;;;;;;;;;;iEAAuB,QAAQ;AAGxB,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAE,GAAGD;IACrC,MAAME,WAAWJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAyB,CAAA,EAAI;QAACA;KAAyB;IAE/F,OAAO;QAAEC;IAAS;AACpB"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGridContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGridContextValues, MenuGridState } from './MenuGrid.types';\n\nexport function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {\n  const { tableRowTabsterAttribute } = state;\n  const menuGrid = React.useMemo(() => ({ tableRowTabsterAttribute }), [tableRowTabsterAttribute]);\n\n  return { menuGrid };\n}\n"],"names":["React","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","menuGrid","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAE,GAAGD;IACrC,MAAME,WAAWJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAyB,CAAA,EAAI;QAACA;KAAyB;IAE/F,OAAO;QAAEC;IAAS;AACpB"}

package/lib-commonjs/components/MenuGrid/useMenuGridStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGrid/useMenuGridStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGridStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridClassNames = {\n    root: 'fui-MenuGrid'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px'\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuGridStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","menuGridClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuGridStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IACaE,kBAAkB;;;IAedY,0BAA0B;;;;uBAhBF,gBAAgB;AAClD,2BAA2B;IAC9BX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useMenuGridStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridClassNames = {\n    root: 'fui-MenuGrid'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px'\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuGridStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","menuGridClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuGridStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;8BAeY;eAA1BY;;;uBAhBwB,gBAAgB;AAClD,2BAA2B;IAC9BX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/MenuGrid/useMenuGridStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGrid/useMenuGridStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGridStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridSlots, MenuGridState } from './MenuGrid.types';\n\nexport const menuGridClassNames: SlotClassNames<MenuGridSlots> = {\n  root: 'fui-MenuGrid',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuGridStyles_unstable = (state: MenuGridState): MenuGridState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuGridStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAIaE,kBAAAA;;;IAkBAQ,0BAAAA;;;;uBArB4B,iBAAiB;AAGnD,2BAA0D;IAC/DP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYH,iBAAAA,EAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EAAaE,mBAAmBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAC9F,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGridStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridSlots, MenuGridState } from './MenuGrid.types';\n\nexport const menuGridClassNames: SlotClassNames<MenuGridSlots> = {\n  root: 'fui-MenuGrid',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuGridStyles_unstable = (state: MenuGridState): MenuGridState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuGridStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,kBAAAA;;;8BAkBAQ;eAAAA;;;uBArB4B,iBAAiB;AAGnD,2BAA0D;IAC/DP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYH,iBAAAA,EAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EAAaE,mBAAmBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAC9F,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/MenuGridCell/MenuGridCell.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridCell/MenuGridCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/MenuGridCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridCell_unstable } from './useMenuGridCell';\nimport { renderMenuGridCell_unstable } from './renderMenuGridCell';\nimport type { MenuGridCellProps } from './MenuGridCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridCellStyles_unstable } from './useMenuGridCellStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridCell, using the `useMenuGridCell_unstable` hook.\n */\nexport const MenuGridCell: ForwardRefComponent<MenuGridCellProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridCell_unstable(props, ref);\n\n  useMenuGridCellStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridCellStyles_unstable')(state);\n\n  return renderMenuGridCell_unstable(state);\n});\n\nMenuGridCell.displayName = 'MenuGridCell';\n"],"names":["React","useMenuGridCell_unstable","renderMenuGridCell_unstable","useMenuGridCellStyles_unstable","MenuGridCell","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaI;;;;;;;iEAXU,QAAQ;iCACU,oBAAoB;oCACjB,uBAAuB;6CAGpB,iCAAiC;AAMzE,qBAAMA,WAAAA,GAAuDJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQP,yCAAAA,EAAyBK,OAAOC;QAE9CJ,2DAAAA,EAA+BK;IAE/B,wEAAwE;IAExE,WAAON,+CAAAA,EAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridCell/MenuGridCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridCell_unstable } from './useMenuGridCell';\nimport { renderMenuGridCell_unstable } from './renderMenuGridCell';\nimport type { MenuGridCellProps } from './MenuGridCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridCellStyles_unstable } from './useMenuGridCellStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridCell, using the `useMenuGridCell_unstable` hook.\n */\nexport const MenuGridCell: ForwardRefComponent<MenuGridCellProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridCell_unstable(props, ref);\n\n  useMenuGridCellStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridCellStyles_unstable')(state);\n\n  return renderMenuGridCell_unstable(state);\n});\n\nMenuGridCell.displayName = 'MenuGridCell';\n"],"names":["React","useMenuGridCell_unstable","renderMenuGridCell_unstable","useMenuGridCellStyles_unstable","MenuGridCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCACU,oBAAoB;oCACjB,uBAAuB;6CAGpB,iCAAiC;AAMzE,MAAMI,eAAAA,WAAAA,GAAuDJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,6CAAAA,EAAyBK,OAAOC;QAE9CJ,2DAAAA,EAA+BK;IAE/B,wEAAwE;IAExE,WAAON,+CAAAA,EAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib-commonjs/components/MenuGridCell/useMenuGridCell.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -10,18 +11,31 @@ Object.defineProperty(exports, "useMenuGridCell_unstable", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _reactutilities = require("@fluentui/react-utilities");
+const _useValidateNesting = require("../../utils/useValidateNesting");
 function useMenuGridCell_unstable(props, ref) {
     const { visuallyHidden } = props;
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridCell');
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const CloseArrowKey = dir === 'ltr' ? _keyboardkeys.ArrowLeft : _keyboardkeys.ArrowRight;
+    const onKeyDownWithPrevent = (0, _reactutilities.useEventCallback)((event)=>{
+        if (event.key === CloseArrowKey) {
+            event.preventDefault();
+        }
+    });
+    const onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(props.onKeyDown, onKeyDownWithPrevent));
     return {
         visuallyHidden,
         components: {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
             role: 'gridcell',
-            ...props
+            ...props,
+            onKeyDown
         }), {
             elementType: 'div'
         })

package/lib-commonjs/components/MenuGridCell/useMenuGridCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';\n\n/**\n * Given user props, returns state and render function for a MenuGridCell.\n */\nexport function useMenuGridCell_unstable(props: MenuGridCellProps, ref: React.Ref<HTMLDivElement>): MenuGridCellState {\n  const { visuallyHidden } = props;\n\n  return {\n    visuallyHidden,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'gridcell',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getIntrinsicElementProps","slot","useMenuGridCell_unstable","props","ref","visuallyHidden","components","root","always","role","elementType"],"mappings":";;;;+BAOgBG;;;;;;;iEAPO,QAAQ;gCACgB,4BAA4B;AAMpE,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAE3B,OAAO;QACLE;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,oBAAAA,CAAKO,MAAM,KACfR,wCAAAA,EAAyB,OAAO;YAC9BI;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCell.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridCell.\n */\nexport function useMenuGridCell_unstable(props: MenuGridCellProps, ref: React.Ref<HTMLDivElement>): MenuGridCellState {\n  const { visuallyHidden } = props;\n  const validateNestingRef = useValidateNesting('MenuGridCell');\n  const { dir } = useFluent();\n\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n  const onKeyDownWithPrevent = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key === CloseArrowKey) {\n      event.preventDefault();\n    }\n  });\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownWithPrevent));\n\n  return {\n    visuallyHidden,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'gridcell',\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowLeft","ArrowRight","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useValidateNesting","useMenuGridCell_unstable","props","ref","visuallyHidden","validateNestingRef","dir","CloseArrowKey","onKeyDownWithPrevent","event","key","preventDefault","onKeyDown","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAkBgBW;;;;;;;iEAhBO,QAAQ;qCACiB,kCAAkC;8BAC5C,0BAA0B;gCAOzD,4BAA4B;oCAEA,iCAAiC;AAK7D,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,yBAAqBL,sCAAAA,EAAmB;IAC9C,MAAM,EAAEM,GAAG,EAAE,OAAGd,uCAAAA;IAEhB,MAAMe,gBAAgBD,QAAQ,QAAQb,uBAAAA,GAAYC,wBAAAA;IAClD,MAAMc,2BAAuBZ,gCAAAA,EAAiB,CAACa;QAC7C,IAAIA,MAAMC,GAAG,KAAKH,eAAe;YAC/BE,MAAME,cAAc;QACtB;IACF;IACA,MAAMC,gBAAYhB,gCAAAA,MAAiBC,8BAAAA,EAAeK,MAAMU,SAAS,EAAEJ;IAEnE,OAAO;QACLJ;QACAS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,OAAO;YAC9BK,SAAKR,6BAAAA,EAAcQ,KAAKE;YACxBW,MAAM;YACN,GAAGd,KAAK;YACRU;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/MenuGridCell/useMenuGridCellStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridCell/useMenuGridCellStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGridCellStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    visuallyHidden: {\n        position: 'absolute'\n    }\n});\nexport const useMenuGridCellStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(menuGridCellClassNames.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":";;;;;;;;;;;IACaE,sBAAsB;;;IAQtBM,8BAA8B;;;;uBATF,gBAAgB;AAClD,+BAA+B;IAClCL,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,cAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIrB,CAAC;AACK,uCAAwCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;IAClCK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGX,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEM,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IACzI,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useMenuGridCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    visuallyHidden: {\n        position: 'absolute'\n    }\n});\nexport const useMenuGridCellStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(menuGridCellClassNames.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAQQ;eAA9BM;;;uBAT4B,gBAAgB;AAClD,+BAA+B;IAClCL,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,cAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIrB,CAAC;AACK,wCAAwCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;IAClCK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGX,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEM,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IACzI,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/MenuGridCell/useMenuGridCellStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridCell/useMenuGridCellStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCellStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';\n\nexport const menuGridCellClassNames: SlotClassNames<MenuGridCellSlots> = {\n  root: 'fui-MenuGridCell',\n};\n\nconst useRootStyles = makeStyles({\n  visuallyHidden: {\n    position: 'absolute',\n  },\n});\n\nexport const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    menuGridCellClassNames.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":";;;;;;;;;;;IAIaE,sBAAAA;;;kCAUAK;;;;uBAb4B,iBAAiB;AAGnD,+BAAkE;IACvEJ,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBH,iBAAAA,EAAW;IAC/BI,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaL;IACnBI,MAAML,IAAI,CAACO,SAAS,OAAGV,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3BK,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';\n\nexport const menuGridCellClassNames: SlotClassNames<MenuGridCellSlots> = {\n  root: 'fui-MenuGridCell',\n};\n\nconst useRootStyles = makeStyles({\n  visuallyHidden: {\n    position: 'absolute',\n  },\n});\n\nexport const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    menuGridCellClassNames.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;;;;;;;;;;;;0BAMaE;;;kCAUAK;;;;uBAb4B,iBAAiB;AAGnD,MAAML,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBH,iBAAAA,EAAW;IAC/BI,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaL;IACnBI,MAAML,IAAI,CAACO,SAAS,OAAGV,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3BK,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/MenuGridGroup/MenuGridGroup.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridGroup/MenuGridGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroup/MenuGridGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridGroup_unstable } from './useMenuGridGroup';\nimport { renderMenuGridGroup_unstable } from './renderMenuGridGroup';\nimport { useMenuGridGroupContextValues_unstable } from './useMenuGridGroupContextValues';\nimport type { MenuGridGroupProps } from './MenuGridGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridGroupStyles_unstable } from './useMenuGridGroupStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridGroup, using the `useMenuGridGroup_unstable` hook.\n */\nexport const MenuGridGroup: ForwardRefComponent<MenuGridGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridGroup_unstable(props, ref);\n  const contextValues = useMenuGridGroupContextValues_unstable(state);\n\n  useMenuGridGroupStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridGroupStyles_unstable')(state);\n\n  return renderMenuGridGroup_unstable(state, contextValues);\n});\n\nMenuGridGroup.displayName = 'MenuGridGroup';\n"],"names":["React","useMenuGridGroup_unstable","renderMenuGridGroup_unstable","useMenuGridGroupContextValues_unstable","useMenuGridGroupStyles_unstable","MenuGridGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;+CACd,kCAAkC;8CAGzC,kCAAkC;AAM3E,sBAAMA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,+CAAAA,EAA0BM,OAAOC;IAC/C,MAAME,oBAAgBP,qEAAAA,EAAuCM;QAE7DL,6DAAAA,EAAgCK;IAEhC,yEAAyE;IAEzE,WAAOP,iDAAAA,EAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridGroup/MenuGridGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridGroup_unstable } from './useMenuGridGroup';\nimport { renderMenuGridGroup_unstable } from './renderMenuGridGroup';\nimport { useMenuGridGroupContextValues_unstable } from './useMenuGridGroupContextValues';\nimport type { MenuGridGroupProps } from './MenuGridGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridGroupStyles_unstable } from './useMenuGridGroupStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridGroup, using the `useMenuGridGroup_unstable` hook.\n */\nexport const MenuGridGroup: ForwardRefComponent<MenuGridGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridGroup_unstable(props, ref);\n  const contextValues = useMenuGridGroupContextValues_unstable(state);\n\n  useMenuGridGroupStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridGroupStyles_unstable')(state);\n\n  return renderMenuGridGroup_unstable(state, contextValues);\n});\n\nMenuGridGroup.displayName = 'MenuGridGroup';\n"],"names":["React","useMenuGridGroup_unstable","renderMenuGridGroup_unstable","useMenuGridGroupContextValues_unstable","useMenuGridGroupStyles_unstable","MenuGridGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;+CACd,kCAAkC;8CAGzC,kCAAkC;AAM3E,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQR,2CAAAA,EAA0BM,OAAOC;IAC/C,MAAME,oBAAgBP,qEAAAA,EAAuCM;QAE7DL,6DAAAA,EAAgCK;IAEhC,yEAAyE;IAEzE,WAAOP,iDAAAA,EAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

package/lib-commonjs/components/MenuGridGroup/useMenuGridGroupContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridGroup/useMenuGridGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroup/useMenuGridGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MenuGridGroupContextValues, MenuGridGroupState } from './MenuGridGroup.types';\n\nexport function useMenuGridGroupContextValues_unstable(state: MenuGridGroupState): MenuGridGroupContextValues {\n  const { headerId } = state;\n  const MenuGridGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n  return { MenuGridGroup };\n}\n"],"names":["React","useMenuGridGroupContextValues_unstable","state","headerId","MenuGridGroup","useMemo"],"mappings":";;;;;;;;;;;iEAAuB,QAAQ;AAGxB,SAASC,uCAAuCC,KAAyB;IAC9E,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,gBAAgBJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAS,CAAA,EAAI;QAACA;KAAS;IAEpE,OAAO;QAAEC;IAAc;AACzB"}
+{"version":3,"sources":["../src/components/MenuGridGroup/useMenuGridGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGridGroupContextValues, MenuGridGroupState } from './MenuGridGroup.types';\n\nexport function useMenuGridGroupContextValues_unstable(state: MenuGridGroupState): MenuGridGroupContextValues {\n  const { headerId } = state;\n  const MenuGridGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n  return { MenuGridGroup };\n}\n"],"names":["React","useMenuGridGroupContextValues_unstable","state","headerId","MenuGridGroup","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,uCAAuCC,KAAyB;IAC9E,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,gBAAgBJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAS,CAAA,EAAI;QAACA;KAAS;IAEpE,OAAO;QAAEC;IAAc;AACzB"}

package/lib-commonjs/components/MenuGridGroupHeader/MenuGridGroupHeader.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridGroupHeader/MenuGridGroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroupHeader/MenuGridGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridGroupHeader_unstable } from './useMenuGridGroupHeader';\nimport { renderMenuGridGroupHeader_unstable } from './renderMenuGridGroupHeader';\nimport type { MenuGridGroupHeaderProps } from './MenuGridGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridGroupHeaderStyles_unstable } from './useMenuGridGroupHeaderStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridGroupHeader, using the `useMenuGridGroupHeader_unstable` hook.\n */\nexport const MenuGridGroupHeader: ForwardRefComponent<MenuGridGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridGroupHeader_unstable(props, ref);\n\n  useMenuGridGroupHeaderStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridGroupHeaderStyles_unstable')(state);\n\n  return renderMenuGridGroupHeader_unstable(state);\n});\n\nMenuGridGroupHeader.displayName = 'MenuGridGroupHeader';\n"],"names":["React","useMenuGridGroupHeader_unstable","renderMenuGridGroupHeader_unstable","useMenuGridGroupHeaderStyles_unstable","MenuGridGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaI;;;;;;;iEAXU,QAAQ;wCACiB,2BAA2B;2CACxB,8BAA8B;oDAG3B,wCAAwC;AAMvF,4BAAMA,WAAAA,GAAqEJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,YAAQP,uDAAAA,EAAgCK,OAAOC;QAErDJ,yEAAAA,EAAsCK;IAEtC,+EAA+E;IAE/E,WAAON,6DAAAA,EAAmCM;AAC5C,GAAG;AAEHJ,oBAAoBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridGroupHeader/MenuGridGroupHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridGroupHeader_unstable } from './useMenuGridGroupHeader';\nimport { renderMenuGridGroupHeader_unstable } from './renderMenuGridGroupHeader';\nimport type { MenuGridGroupHeaderProps } from './MenuGridGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridGroupHeaderStyles_unstable } from './useMenuGridGroupHeaderStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridGroupHeader, using the `useMenuGridGroupHeader_unstable` hook.\n */\nexport const MenuGridGroupHeader: ForwardRefComponent<MenuGridGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridGroupHeader_unstable(props, ref);\n\n  useMenuGridGroupHeaderStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridGroupHeaderStyles_unstable')(state);\n\n  return renderMenuGridGroupHeader_unstable(state);\n});\n\nMenuGridGroupHeader.displayName = 'MenuGridGroupHeader';\n"],"names":["React","useMenuGridGroupHeader_unstable","renderMenuGridGroupHeader_unstable","useMenuGridGroupHeaderStyles_unstable","MenuGridGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wCACiB,2BAA2B;2CACxB,8BAA8B;oDAG3B,wCAAwC;AAMvF,MAAMI,sBAAAA,WAAAA,GAAqEJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,QAAQP,2DAAAA,EAAgCK,OAAOC;QAErDJ,yEAAAA,EAAsCK;IAEtC,+EAA+E;IAE/E,WAAON,6DAAAA,EAAmCM;AAC5C,GAAG;AAEHJ,oBAAoBK,WAAW,GAAG"}

package/lib-commonjs/components/MenuGridGroupHeader/useMenuGridGroupHeader.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridGroupHeader/useMenuGridGroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroupHeader/useMenuGridGroupHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridGroupContext_unstable } from '../../contexts/menuGridGroupContext';\nimport { MenuGridGroupHeaderProps, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGridGroupHeader.\n */\nexport function useMenuGridGroupHeader_unstable(\n  props: MenuGridGroupHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuGridGroupHeaderState {\n  const { headerId: id } = useMenuGridGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'presentation',\n        id,\n        'aria-hidden': true,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getIntrinsicElementProps","slot","useMenuGridGroupContext_unstable","useMenuGridGroupHeader_unstable","props","ref","headerId","id","components","root","always","role","elementType"],"mappings":";;;;+BASgBI;;;;;;;iEATO,QAAQ;gCACgB,4BAA4B;sCAE1B,sCAAsC;AAMhF,yCACLC,KAA+B,EAC/BC,GAA8B;IAE9B,MAAM,EAAEC,UAAUC,EAAE,EAAE,OAAGL,sDAAAA;IAEzB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,oBAAAA,CAAKS,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9BK;YACAM,MAAM;YACNJ;YACA,eAAe;YACf,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridGroupHeader/useMenuGridGroupHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridGroupContext_unstable } from '../../contexts/menuGridGroupContext';\nimport { MenuGridGroupHeaderProps, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGridGroupHeader.\n */\nexport function useMenuGridGroupHeader_unstable(\n  props: MenuGridGroupHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuGridGroupHeaderState {\n  const { headerId: id } = useMenuGridGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'presentation',\n        id,\n        'aria-hidden': true,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getIntrinsicElementProps","slot","useMenuGridGroupContext_unstable","useMenuGridGroupHeader_unstable","props","ref","headerId","id","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;sCAE1B,sCAAsC;AAMhF,SAASI,gCACdC,KAA+B,EAC/BC,GAA8B;IAE9B,MAAM,EAAEC,UAAUC,EAAE,EAAE,OAAGL,sDAAAA;IAEzB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,oBAAAA,CAAKS,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9BK;YACAM,MAAM;YACNJ;YACA,eAAe;YACf,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/MenuGridItem/MenuGridItem.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridItem/MenuGridItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridItem/MenuGridItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridItem_unstable } from './useMenuGridItem';\nimport { renderMenuGridItem_unstable } from './renderMenuGridItem';\nimport type { MenuGridItemProps } from './MenuGridItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridItemStyles_unstable } from './useMenuGridItemStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridItem, using the `useMenuGridItem_unstable` hook.\n */\nexport const MenuGridItem: ForwardRefComponent<MenuGridItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridItem_unstable(props, ref);\n\n  useMenuGridItemStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridItemStyles_unstable')(state);\n\n  return renderMenuGridItem_unstable(state);\n});\n\nMenuGridItem.displayName = 'MenuGridItem';\n"],"names":["React","useMenuGridItem_unstable","renderMenuGridItem_unstable","useMenuGridItemStyles_unstable","MenuGridItem","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaI;;;;;;;iEAXU,QAAQ;iCACU,oBAAoB;oCACjB,uBAAuB;6CAGpB,iCAAiC;AAMzE,qBAAMA,WAAAA,GAAuDJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQP,yCAAAA,EAAyBK,OAAOC;QAE9CJ,2DAAAA,EAA+BK;IAE/B,wEAAwE;IAExE,WAAON,+CAAAA,EAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridItem/MenuGridItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridItem_unstable } from './useMenuGridItem';\nimport { renderMenuGridItem_unstable } from './renderMenuGridItem';\nimport type { MenuGridItemProps } from './MenuGridItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridItemStyles_unstable } from './useMenuGridItemStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridItem, using the `useMenuGridItem_unstable` hook.\n */\nexport const MenuGridItem: ForwardRefComponent<MenuGridItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridItem_unstable(props, ref);\n\n  useMenuGridItemStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridItemStyles_unstable')(state);\n\n  return renderMenuGridItem_unstable(state);\n});\n\nMenuGridItem.displayName = 'MenuGridItem';\n"],"names":["React","useMenuGridItem_unstable","renderMenuGridItem_unstable","useMenuGridItemStyles_unstable","MenuGridItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCACU,oBAAoB;oCACjB,uBAAuB;6CAGpB,iCAAiC;AAMzE,MAAMI,eAAAA,WAAAA,GAAuDJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,6CAAAA,EAAyBK,OAAOC;QAE9CJ,2DAAAA,EAA+BK;IAE/B,wEAAwE;IAExE,WAAON,+CAAAA,EAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib-commonjs/components/MenuGridItem/useMenuGridItem.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -13,8 +14,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _MenuGridCell = require("./../MenuGridCell/MenuGridCell");
 const _MenuGridRow = require("./../MenuGridRow/MenuGridRow");
+const _useValidateNesting = require("../../utils/useValidateNesting");
 function useMenuGridItem_unstable(props, ref) {
     const { icon, content: _content, subText, firstSubAction, secondSubAction, ...rest } = props;
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridItem');
     return {
         components: {
             root: _MenuGridRow.MenuGridRow,
@@ -25,7 +28,7 @@ function useMenuGridItem_unstable(props, ref) {
             secondSubAction: _MenuGridCell.MenuGridCell
         },
         root: _reactutilities.slot.always({
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
             ...rest
         }, {
             elementType: _MenuGridRow.MenuGridRow

package/lib-commonjs/components/MenuGridItem/useMenuGridItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport { MenuGridItemProps, MenuGridItemState } from './MenuGridItem.types';\nimport { MenuGridCell } from './../MenuGridCell/MenuGridCell';\nimport { MenuGridRow } from './../MenuGridRow/MenuGridRow';\n\n/**\n * Given user props, returns state and render function for a MenuGridItem.\n */\nexport function useMenuGridItem_unstable(props: MenuGridItemProps, ref: React.Ref<HTMLDivElement>): MenuGridItemState {\n  const {\n    icon,\n    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n    subText,\n    firstSubAction,\n    secondSubAction,\n    ...rest\n  } = props;\n\n  return {\n    components: {\n      root: MenuGridRow,\n      icon: MenuGridCell,\n      content: MenuGridCell,\n      subText: 'span',\n      firstSubAction: MenuGridCell,\n      secondSubAction: MenuGridCell,\n    },\n    root: slot.always(\n      {\n        ref,\n        ...rest,\n      },\n      { elementType: MenuGridRow },\n    ),\n    icon: slot.optional(props.icon, { elementType: MenuGridCell }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: MenuGridCell,\n    }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n    firstSubAction: slot.optional(props.firstSubAction, { elementType: MenuGridCell }),\n    secondSubAction: slot.optional(props.secondSubAction, { elementType: MenuGridCell }),\n  };\n}\n"],"names":["React","slot","MenuGridCell","MenuGridRow","useMenuGridItem_unstable","props","ref","icon","content","_content","subText","firstSubAction","secondSubAction","rest","components","root","always","elementType","optional","renderByDefault","children","defaultProps"],"mappings":";;;;+BAUgBI;;;;;;;iEAVO,QAAQ;gCACV,4BAA4B;8BAGpB,iCAAiC;6BAClC,+BAA+B;AAKpD,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EACJC,IAAI,EACJC,SAASC,QAAQ,EACjBC,OAAO,EACPC,cAAc,EACdC,eAAe,EACf,GAAGC,MACJ,GAAGR;IAEJ,OAAO;QACLS,YAAY;YACVC,MAAMZ,wBAAAA;YACNI,MAAML,0BAAAA;YACNM,SAASN,0BAAAA;YACTQ,SAAS;YACTC,gBAAgBT,0BAAAA;YAChBU,iBAAiBV,0BAAAA;QACnB;QACAa,MAAMd,oBAAAA,CAAKe,MAAM,CACf;YACEV;YACA,GAAGO,IAAI;QACT,GACA;YAAEI,aAAad,wBAAAA;QAAY;QAE7BI,MAAMN,oBAAAA,CAAKiB,QAAQ,CAACb,MAAME,IAAI,EAAE;YAAEU,aAAaf,0BAAAA;QAAa;QAC5DM,SAASP,oBAAAA,CAAKiB,QAAQ,CAACb,MAAMG,OAAO,EAAE;YACpCW,iBAAiB,CAAC,CAACd,MAAMe,QAAQ;YACjCC,cAAc;gBAAED,UAAUf,MAAMe,QAAQ;YAAC;YACzCH,aAAaf,0BAAAA;QACf;QACAQ,SAAST,oBAAAA,CAAKiB,QAAQ,CAACb,MAAMK,OAAO,EAAE;YAAEO,aAAa;QAAO;QAC5DN,gBAAgBV,oBAAAA,CAAKiB,QAAQ,CAACb,MAAMM,cAAc,EAAE;YAAEM,aAAaf,0BAAAA;QAAa;QAChFU,iBAAiBX,oBAAAA,CAAKiB,QAAQ,CAACb,MAAMO,eAAe,EAAE;YAAEK,aAAaf,0BAAAA;QAAa;IACpF;AACF"}
+{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, slot } from '@fluentui/react-utilities';\n\nimport { MenuGridItemProps, MenuGridItemState } from './MenuGridItem.types';\nimport { MenuGridCell } from './../MenuGridCell/MenuGridCell';\nimport { MenuGridRow } from './../MenuGridRow/MenuGridRow';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridItem.\n */\nexport function useMenuGridItem_unstable(props: MenuGridItemProps, ref: React.Ref<HTMLDivElement>): MenuGridItemState {\n  const {\n    icon,\n    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n    subText,\n    firstSubAction,\n    secondSubAction,\n    ...rest\n  } = props;\n  const validateNestingRef = useValidateNesting('MenuGridItem');\n\n  return {\n    components: {\n      root: MenuGridRow,\n      icon: MenuGridCell,\n      content: MenuGridCell,\n      subText: 'span',\n      firstSubAction: MenuGridCell,\n      secondSubAction: MenuGridCell,\n    },\n    root: slot.always(\n      {\n        ref: useMergedRefs(ref, validateNestingRef),\n        ...rest,\n      },\n      { elementType: MenuGridRow },\n    ),\n    icon: slot.optional(props.icon, { elementType: MenuGridCell }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: MenuGridCell,\n    }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n    firstSubAction: slot.optional(props.firstSubAction, { elementType: MenuGridCell }),\n    secondSubAction: slot.optional(props.secondSubAction, { elementType: MenuGridCell }),\n  };\n}\n"],"names":["React","useMergedRefs","slot","MenuGridCell","MenuGridRow","useValidateNesting","useMenuGridItem_unstable","props","ref","icon","content","_content","subText","firstSubAction","secondSubAction","rest","validateNestingRef","components","root","always","elementType","optional","renderByDefault","children","defaultProps"],"mappings":"AAAA;;;;;+BAagBM;;;;;;;iEAXO,QAAQ;gCACK,4BAA4B;8BAGnC,iCAAiC;6BAClC,+BAA+B;oCACxB,iCAAiC;AAK7D,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EACJC,IAAI,EACJC,SAASC,QAAQ,EACjBC,OAAO,EACPC,cAAc,EACdC,eAAe,EACf,GAAGC,MACJ,GAAGR;IACJ,MAAMS,yBAAqBX,sCAAAA,EAAmB;IAE9C,OAAO;QACLY,YAAY;YACVC,MAAMd,wBAAAA;YACNK,MAAMN,0BAAAA;YACNO,SAASP,0BAAAA;YACTS,SAAS;YACTC,gBAAgBV,0BAAAA;YAChBW,iBAAiBX,0BAAAA;QACnB;QACAe,MAAMhB,oBAAAA,CAAKiB,MAAM,CACf;YACEX,SAAKP,6BAAAA,EAAcO,KAAKQ;YACxB,GAAGD,IAAI;QACT,GACA;YAAEK,aAAahB,wBAAAA;QAAY;QAE7BK,MAAMP,oBAAAA,CAAKmB,QAAQ,CAACd,MAAME,IAAI,EAAE;YAAEW,aAAajB,0BAAAA;QAAa;QAC5DO,SAASR,oBAAAA,CAAKmB,QAAQ,CAACd,MAAMG,OAAO,EAAE;YACpCY,iBAAiB,CAAC,CAACf,MAAMgB,QAAQ;YACjCC,cAAc;gBAAED,UAAUhB,MAAMgB,QAAQ;YAAC;YACzCH,aAAajB,0BAAAA;QACf;QACAS,SAASV,oBAAAA,CAAKmB,QAAQ,CAACd,MAAMK,OAAO,EAAE;YAAEQ,aAAa;QAAO;QAC5DP,gBAAgBX,oBAAAA,CAAKmB,QAAQ,CAACd,MAAMM,cAAc,EAAE;YAAEO,aAAajB,0BAAAA;QAAa;QAChFW,iBAAiBZ,oBAAAA,CAAKmB,QAAQ,CAACd,MAAMO,eAAe,EAAE;YAAEM,aAAajB,0BAAAA;QAAa;IACpF;AACF"}

package/lib-commonjs/components/MenuGridRow/MenuGridRow.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/MenuGridRow/MenuGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/MenuGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridRow_unstable } from './useMenuGridRow';\nimport { renderMenuGridRow_unstable } from './renderMenuGridRow';\nimport type { MenuGridRowProps } from './MenuGridRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridRowStyles_unstable } from './useMenuGridRowStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridRow, using the `useMenuGridRow_unstable` hook.\n */\nexport const MenuGridRow: ForwardRefComponent<MenuGridRowProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridRow_unstable(props, ref);\n\n  useMenuGridRowStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridRowStyles_unstable')(state);\n\n  return renderMenuGridRow_unstable(state);\n});\n\nMenuGridRow.displayName = 'MenuGridRow';\n"],"names":["React","useMenuGridRow_unstable","renderMenuGridRow_unstable","useMenuGridRowStyles_unstable","MenuGridRow","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaI;;;;;;;iEAXU,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CAGnB,gCAAgC;AAMvE,oBAAMA,WAAAA,GAAqDJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;QAE7CJ,yDAAAA,EAA8BK;IAE9B,uEAAuE;IAEvE,WAAON,6CAAAA,EAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridRow/MenuGridRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridRow_unstable } from './useMenuGridRow';\nimport { renderMenuGridRow_unstable } from './renderMenuGridRow';\nimport type { MenuGridRowProps } from './MenuGridRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridRowStyles_unstable } from './useMenuGridRowStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridRow, using the `useMenuGridRow_unstable` hook.\n */\nexport const MenuGridRow: ForwardRefComponent<MenuGridRowProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridRow_unstable(props, ref);\n\n  useMenuGridRowStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridRowStyles_unstable')(state);\n\n  return renderMenuGridRow_unstable(state);\n});\n\nMenuGridRow.displayName = 'MenuGridRow';\n"],"names":["React","useMenuGridRow_unstable","renderMenuGridRow_unstable","useMenuGridRowStyles_unstable","MenuGridRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CAGnB,gCAAgC;AAMvE,MAAMI,cAAAA,WAAAA,GAAqDJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,2CAAAA,EAAwBK,OAAOC;QAE7CJ,yDAAAA,EAA8BK;IAE9B,uEAAuE;IAEvE,WAAON,6CAAAA,EAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -12,14 +13,16 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _menuGridContext = require("../../contexts/menuGridContext");
+const _useValidateNesting = require("../../utils/useValidateNesting");
 function useMenuGridRow_unstable(props, ref) {
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridRow');
     const { tableRowTabsterAttribute } = (0, _menuGridContext.useMenuGridContext_unstable)();
     return {
         components: {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
             role: 'row',
             tabIndex: 0,
             ...tableRowTabsterAttribute,

package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\nimport { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';\n\n/**\n * Given user props, returns state and render function for a MenuGridRow.\n */\nexport function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<HTMLDivElement>): MenuGridRowState {\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useMenuGridRow_unstable","props","ref","tableRowTabsterAttribute","components","root","always","role","tabIndex","elementType"],"mappings":";;;;+BASgBI;;;;;;;iEATO,QAAQ;gCACgB,4BAA4B;iCAE/B,iCAAiC;AAMtE,iCAAiCC,KAAuB,EAAEC,GAA8B;IAC7F,MAAM,EAAEC,wBAAwB,EAAE,OAAGJ,4CAAAA;IAErC,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,OAAO;YAC9BK;YACAK,MAAM;YACNC,UAAU;YACV,GAAGL,wBAAwB;YAC3B,GAAGF,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\nimport { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridRow.\n */\nexport function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<HTMLDivElement>): MenuGridRowState {\n  const validateNestingRef = useValidateNesting('MenuGridRow');\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMergedRefs","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useValidateNesting","useMenuGridRow_unstable","props","ref","validateNestingRef","tableRowTabsterAttribute","components","root","always","role","tabIndex","elementType"],"mappings":"AAAA;;;;;+BAYgBM;;;;;;;iEAVO,QAAQ;gCAC+B,4BAA4B;iCAE9C,iCAAiC;oCAE1C,iCAAiC;AAK7D,iCAAiCC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAM,EAAEK,wBAAwB,EAAE,OAAGN,4CAAAA;IAErC,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAAyB,OAAO;YAC9BM,SAAKP,6BAAAA,EAAcO,KAAKC;YACxBK,MAAM;YACNC,UAAU;YACV,GAAGL,wBAAwB;YAC3B,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/contexts/menuGridContext.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/menuGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/menuGridContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nexport const MenuGridContext = React.createContext<MenuGridContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridContextValue>;\n\nconst menuGridContextDefaultValue: MenuGridContextValue = {\n  tableRowTabsterAttribute: null,\n};\n\n/**\n * Context shared between MenuGrid and its children components\n */\nexport type MenuGridContextValue = {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport const MenuGridContextProvider = MenuGridContext.Provider;\n\nexport const useMenuGridContext_unstable = (): MenuGridContextValue =>\n  React.useContext(MenuGridContext) ?? menuGridContextDefaultValue;\n"],"names":["React","MenuGridContext","createContext","undefined","menuGridContextDefaultValue","tableRowTabsterAttribute","MenuGridContextProvider","Provider","useMenuGridContext_unstable","useContext"],"mappings":";;;;;;;;;;;IAGaC,eAAAA;;;2BAkBAK;;;+BAEAE;;;;;iEAvBU,QAAQ;AAGxB,sCAAwBR,OAAME,aAAa,CAChDC,WACuC;AAEzC,MAAMC,8BAAoD;IACxDC,0BAA0B;AAC5B;AAYO,MAAMC,0BAA0BL,gBAAgBM,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B;QACzCR;WAAAA,CAAAA,oBAAAA,OAAMS,UAAU,CAACR,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}
+{"version":3,"sources":["../src/contexts/menuGridContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nexport const MenuGridContext = React.createContext<MenuGridContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridContextValue>;\n\nconst menuGridContextDefaultValue: MenuGridContextValue = {\n  tableRowTabsterAttribute: null,\n};\n\n/**\n * Context shared between MenuGrid and its children components\n */\nexport type MenuGridContextValue = {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport const MenuGridContextProvider = MenuGridContext.Provider;\n\nexport const useMenuGridContext_unstable = (): MenuGridContextValue =>\n  React.useContext(MenuGridContext) ?? menuGridContextDefaultValue;\n"],"names":["React","MenuGridContext","createContext","undefined","menuGridContextDefaultValue","tableRowTabsterAttribute","MenuGridContextProvider","Provider","useMenuGridContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;mBAKaC;;;2BAkBAK;eAAAA;;+BAEAE;;;;;iEAvBU,QAAQ;AAGxB,MAAMP,gCAAkBD,OAAME,aAAa,CAChDC,WACuC;AAEzC,MAAMC,8BAAoD;IACxDC,0BAA0B;AAC5B;AAYO,gCAAgCJ,gBAAgBM,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B;QACzCR;WAAAA,CAAAA,oBAAAA,OAAMS,UAAU,CAACR,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}

package/lib-commonjs/contexts/menuGridGroupContext.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/menuGridGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/menuGridGroupContext.ts"],"sourcesContent":["import * as React from 'react';\n\nconst MenuGridGroupContext = React.createContext<MenuGridGroupContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridGroupContextValue>;\n\nconst MenuGridGroupContextDefaultValue: MenuGridGroupContextValue = {\n  headerId: '',\n};\n\n/**\n * Context used to guarantee correct aria-relationship between row group and header\n */\nexport type MenuGridGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGridGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGridGroupContextProvider = MenuGridGroupContext.Provider;\nexport const useMenuGridGroupContext_unstable = (): MenuGridGroupContextValue =>\n  React.useContext(MenuGridGroupContext) ?? MenuGridGroupContextDefaultValue;\n"],"names":["React","MenuGridGroupContext","createContext","undefined","MenuGridGroupContextDefaultValue","headerId","MenuGridGroupContextProvider","Provider","useMenuGridGroupContext_unstable","useContext"],"mappings":";;;;;;;;;;;gCAoBaM;;;oCACAE;;;;;iEArBU,QAAQ;AAE/B,MAAMP,qCAAuBD,OAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAA8D;IAClEC,UAAU;AACZ;AAYO,MAAMC,+BAA+BL,qBAAqBM,QAAQ,CAAC;AACnE,MAAMC,mCAAmC;QAC9CR;WAAAA,CAAAA,oBAAAA,OAAMS,UAAU,CAACR,qBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA0CI;EAAiC"}
+{"version":3,"sources":["../src/contexts/menuGridGroupContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MenuGridGroupContext = React.createContext<MenuGridGroupContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridGroupContextValue>;\n\nconst MenuGridGroupContextDefaultValue: MenuGridGroupContextValue = {\n  headerId: '',\n};\n\n/**\n * Context used to guarantee correct aria-relationship between row group and header\n */\nexport type MenuGridGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGridGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGridGroupContextProvider = MenuGridGroupContext.Provider;\nexport const useMenuGridGroupContext_unstable = (): MenuGridGroupContextValue =>\n  React.useContext(MenuGridGroupContext) ?? MenuGridGroupContextDefaultValue;\n"],"names":["React","MenuGridGroupContext","createContext","undefined","MenuGridGroupContextDefaultValue","headerId","MenuGridGroupContextProvider","Provider","useMenuGridGroupContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;gCAsBaM;;;oCACAE;;;;;iEArBU,QAAQ;AAE/B,MAAMP,qCAAuBD,OAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAA8D;IAClEC,UAAU;AACZ;AAYO,MAAMC,+BAA+BL,qBAAqBM,QAAQ,CAAC;AACnE,MAAMC,mCAAmC;QAC9CR;WAAAA,CAAAA,oBAAAA,OAAMS,UAAU,CAACR,qBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA0CI;EAAiC"}

package/lib-commonjs/utils/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useValidateNesting", {
+    enumerable: true,
+    get: function() {
+        return _useValidateNesting.useValidateNesting;
+    }
+});
+const _useValidateNesting = require("./useValidateNesting");

package/lib-commonjs/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useValidateNesting } from './useValidateNesting';\n"],"names":["useValidateNesting"],"mappings":";;;;;;;eAASA,sCAAkB;;;oCAAQ,uBAAuB"}

package/lib-commonjs/utils/useValidateNesting.js

@@ -0,0 +1,102 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useValidateNesting", {
+    enumerable: true,
+    get: function() {
+        return useValidateNesting;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reactmenu = require("@fluentui/react-menu");
+const menuItemRoleToNameMapping = {
+    menuitem: 'MenuItem',
+    menuitemcheckbox: 'MenuItemCheckbox',
+    menuitemradio: 'MenuItemRadio'
+};
+const useValidateNesting = (componentName)=>{
+    'use no memo';
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const triggerRef = (0, _reactmenu.useMenuContext_unstable)((context)=>context.triggerRef);
+    const inline = (0, _reactmenu.useMenuContext_unstable)((context)=>context.inline);
+    const ref = _react.useRef(null);
+    if (process.env.NODE_ENV !== 'production') {
+        // This check should run only in development mode
+        // It's okay to disable the ESLint rule because we ar checking env variable statically (not at runtime)
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        _react.useEffect(()=>{
+            let ancestor = ref.current;
+            let ancestorRole;
+            do {
+                var _ancestor_parentElement;
+                ancestor = (_ancestor_parentElement = ancestor === null || ancestor === void 0 ? void 0 : ancestor.parentElement) !== null && _ancestor_parentElement !== void 0 ? _ancestor_parentElement : null;
+                ancestorRole = ancestor === null || ancestor === void 0 ? void 0 : ancestor.getAttribute('role');
+                if (ancestor === null || ancestor === void 0 ? void 0 : ancestor.classList.contains('fui-MenuGrid')) {
+                    if (componentName === 'MenuGridCell') {
+                        throw new Error('MenuGridCell is incorrectly nested within MenuGrid. You probably want to wrap it in a MenuGridRow.');
+                    }
+                    break;
+                }
+                if ((ancestor === null || ancestor === void 0 ? void 0 : ancestor.classList.contains('fui-MenuGridRow')) && componentName === 'MenuGridCell') {
+                    break;
+                }
+                if ([
+                    'menuitem',
+                    'menuitemcheckbox',
+                    'menuitemradio'
+                ].includes(ancestorRole !== null && ancestorRole !== void 0 ? ancestorRole : '')) {
+                    throw new Error(`${componentName} is incorrectly nested within ${menuItemRoleToNameMapping[ancestorRole]} or within an element with the "${ancestorRole}" role.`);
+                }
+                if (ancestorRole === 'menu') {
+                    let message = '';
+                    let breakAncestorTraversal = false;
+                    switch(componentName){
+                        case 'MenuGrid':
+                            if (inline && getMenuOfTrigger(triggerRef.current, targetDocument) === ancestor) {
+                                // Handle the case when MenuGrid is inline next to its menu trigger which is a submenu item of the parent menu
+                                breakAncestorTraversal = true;
+                                break;
+                            }
+                            message = 'MenuGrid is incorrectly nested within MenuList or within an element with the "menu" role.';
+                            break;
+                        case 'MenuGridCell':
+                            message = 'MenuGridCell is incorrectly nested within MenuList or within an element with the "menu" role. You probably want to wrap it in a MenuGridRow.';
+                            break;
+                        case 'MenuGridItem':
+                            message = 'MenuGridItem is incorrectly nested within MenuList or within an element with the "menu" role. You probably want to wrap it in a MenuGrid instead.';
+                            break;
+                        case 'MenuGridRow':
+                            message = 'MenuGridRow is incorrectly nested within MenuList or within an element with the "menu" role. You probably want to wrap it in a MenuGrid instead.';
+                            break;
+                    }
+                    if (breakAncestorTraversal) {
+                        break;
+                    }
+                    throw new Error(message);
+                }
+            }while (ancestor && ancestor !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body))
+        }, [
+            componentName,
+            ref,
+            triggerRef,
+            inline,
+            targetDocument
+        ]);
+    }
+    return ref;
+};
+const getMenuOfTrigger = (trigger, targetDocument)=>{
+    let ancestor = trigger === null || trigger === void 0 ? void 0 : trigger.parentElement;
+    while(ancestor && ancestor !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)){
+        if ((ancestor === null || ancestor === void 0 ? void 0 : ancestor.getAttribute('role')) === 'menu') {
+            return ancestor;
+        }
+        var _ancestor_parentElement;
+        ancestor = (_ancestor_parentElement = ancestor === null || ancestor === void 0 ? void 0 : ancestor.parentElement) !== null && _ancestor_parentElement !== void 0 ? _ancestor_parentElement : null;
+    }
+    return null;
+};