@fluentui/react-menu 0.0.0-nightly-20250716-0406.1 → 0.0.0-nightly-20250718-0405.1

package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js

@@ -0,0 +1,38 @@
+"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, {
+    menuListClassNames: function() {
+        return menuListClassNames;
+    },
+    useMenuListStyles_unstable: function() {
+        return useMenuListStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const menuListClassNames = {
+    root: 'fui-MenuList'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2px'
+    },
+    hasMenuContext: {
+        height: '100%'
+    }
+});
+const useMenuListStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
+    return state;
+};

package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\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 useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuListClassNames.root,\n    styles.root,\n    state.hasMenuContext && styles.hasMenuContext,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["menuListClassNames","useMenuListStyles_unstable","root","useStyles","makeStyles","display","flexDirection","gap","hasMenuContext","height","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,kBAAAA;eAAAA;;IAkBAC,0BAAAA;eAAAA;;;uBArB4B;AAGlC,MAAMD,qBAAoD;IAC/DE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,MAAMR,6BAA6B,CAACS;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAAA,EACrBb,mBAAmBE,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMF,cAAc,IAAIG,OAAOH,cAAc,EAC7CE,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT"}

package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js

@@ -0,0 +1,47 @@
+"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, {
+    menuPopoverClassNames: function() {
+        return menuPopoverClassNames;
+    },
+    useMenuPopoverStyles_unstable: function() {
+        return useMenuPopoverStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactpositioning = require("@fluentui/react-positioning");
+const menuPopoverClassNames = {
+    root: 'fui-MenuPopover'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        boxSizing: 'border-box',
+        minWidth: '138px',
+        maxWidth: '300px',
+        overflowX: 'hidden',
+        width: 'max-content',
+        boxShadow: `${_reacttheme.tokens.shadow16}`,
+        padding: '4px',
+        border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        ..._reacttheme.typographyStyles.body1,
+        ...(0, _reactpositioning.createSlideStyles)(10)
+    }
+});
+const useMenuPopoverStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(menuPopoverClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createSlideStyles } from '@fluentui/react-positioning';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n  root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    minWidth: '138px',\n    maxWidth: '300px',\n    overflowX: 'hidden',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    padding: '4px',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    ...typographyStyles.body1,\n    ...createSlideStyles(10),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["menuPopoverClassNames","useMenuPopoverStyles_unstable","root","useStyles","makeStyles","borderRadius","tokens","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","typographyStyles","body1","createSlideStyles","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,qBAAAA;eAAAA;;IAyBAC,6BAAAA;eAAAA;;;uBA/B4B;4BACA;kCAGP;AAE3B,MAAMD,wBAA0D;IACrEE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,cAAcC,kBAAAA,CAAOC,kBAAkB;QACvCC,iBAAiBF,kBAAAA,CAAOG,uBAAuB;QAC/CC,OAAOJ,kBAAAA,CAAOK,uBAAuB;QACrCC,WAAW;QACXC,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,OAAO;QACPC,WAAW,CAAC,EAAEX,kBAAAA,CAAOY,QAAQ,CAAC,CAAC;QAC/BC,SAAS;QACTC,QAAQ,CAAC,UAAU,EAAEd,kBAAAA,CAAOe,sBAAsB,CAAC,CAAC;QACpD,GAAGC,4BAAAA,CAAiBC,KAAK;QACzB,GAAGC,IAAAA,mCAAAA,EAAkB,GAAG;IAC1B;AACF;AAKO,MAAMvB,gCAAgC,CAACwB;IAC5C;IAEA,MAAMC,SAASvB;IACfsB,MAAMvB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,mBAAAA,EAAa5B,sBAAsBE,IAAI,EAAEwB,OAAOxB,IAAI,EAAEuB,MAAMvB,IAAI,CAACyB,SAAS;IACjG,OAAOF;AACT"}

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js

@@ -0,0 +1,61 @@
+"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, {
+    menuSplitGroupClassNames: function() {
+        return menuSplitGroupClassNames;
+    },
+    menuSplitGroupMultilineAttr: function() {
+        return menuSplitGroupMultilineAttr;
+    },
+    useMenuSplitGroupStyles_unstable: function() {
+        return useMenuSplitGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
+const menuSplitGroupMultilineAttr = 'data-multiline';
+const menuSplitGroupClassNames = {
+    root: 'fui-MenuSplitGroup'
+};
+/**
+ * Styles for the root slot
+ * TODO - remove the use of nested combinators to style child menu items
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        [`[${menuSplitGroupMultilineAttr}]`]: {
+            [`& > .${_useMenuItemStylesstyles.menuItemClassNames.root}:nth-of-type(2)`]: {
+                alignSelf: 'center'
+            }
+        },
+        display: 'flex',
+        [`& > .${_useMenuItemStylesstyles.menuItemClassNames.root}:nth-of-type(1)`]: {
+            flex: 1
+        },
+        [`& > .${_useMenuItemStylesstyles.menuItemClassNames.root}:nth-of-type(2)`]: {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            paddingLeft: 0,
+            '::before': {
+                content: '""',
+                width: _reacttheme.tokens.strokeWidthThin,
+                height: '20px',
+                backgroundColor: _reacttheme.tokens.colorNeutralStroke1
+            }
+        }
+    }
+});
+const useMenuSplitGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(menuSplitGroupClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n  root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */\nconst useStyles = makeStyles({\n  root: {\n    [`[${menuSplitGroupMultilineAttr}]`]: {\n      [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n        alignSelf: 'center',\n      },\n    },\n    display: 'flex',\n    [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n      flex: 1,\n    },\n    [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      '::before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '20px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["menuSplitGroupClassNames","menuSplitGroupMultilineAttr","useMenuSplitGroupStyles_unstable","root","useStyles","makeStyles","menuItemClassNames","alignSelf","display","flex","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","content","width","tokens","strokeWidthThin","height","backgroundColor","colorNeutralStroke1","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,wBAAAA;eAAAA;;IAFAC,2BAAAA;eAAAA;;IAqCAC,gCAAAA;eAAAA;;;uBA3C4B;4BAClB;yCACY;AAI5B,MAAMD,8BAA8B;AAEpC,MAAMD,2BAAgE;IAC3EG,MAAM;AACR;AACA;;;CAGC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAEK,2CAAAA,CAAmBH,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDI,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEF,2CAAAA,CAAmBH,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDM,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEH,2CAAAA,CAAmBH,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDO,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOC,kBAAAA,CAAOC,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBH,kBAAAA,CAAOI,mBAAmB;YAC7C;QACF;IACF;AACF;AAKO,MAAMjB,mCAAmC,CAACkB;IAC/C;IAEA,MAAMC,SAASjB;IACfgB,MAAMjB,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAAA,EAAavB,yBAAyBG,IAAI,EAAEkB,OAAOlB,IAAI,EAAEiB,MAAMjB,IAAI,CAACmB,SAAS;IACpG,OAAOF;AACT"}

package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCheckmarkStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCheckmarkStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        width: '16px',
+        height: '16px',
+        visibility: 'hidden',
+        flexShrink: 0
+    },
+    rootChecked: {
+        visibility: 'visible',
+        flexShrink: 0
+    }
+});
+const useCheckmarkStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    if (state.checkmark) {
+        state.checkmark.className = (0, _react.mergeClasses)(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
+    }
+};

package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/selectable/useCheckmarkStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemState } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '16px',\n    height: '16px',\n    visibility: 'hidden',\n    flexShrink: 0,\n  },\n  rootChecked: {\n    visibility: 'visible',\n    flexShrink: 0,\n  },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles_unstable = (state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>) => {\n  'use no memo';\n\n  const styles = useStyles();\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(\n      styles.root,\n      state.checked && styles.rootChecked,\n      state.checkmark.className,\n    );\n  }\n};\n"],"names":["useCheckmarkStyles_unstable","useStyles","makeStyles","root","width","height","visibility","flexShrink","rootChecked","state","styles","checkmark","className","mergeClasses","checked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsBaA;;;eAAAA;;;uBAtB4B;AAIzC,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,MAAM;QACJC,OAAO;QACPC,QAAQ;QACRC,YAAY;QACZC,YAAY;IACd;IACAC,aAAa;QACXF,YAAY;QACZC,YAAY;IACd;AACF;AAOO,MAAMP,8BAA8B,CAACS;IAC1C;IAEA,MAAMC,SAAST;IACf,IAAIQ,MAAME,SAAS,EAAE;QACnBF,MAAME,SAAS,CAACC,SAAS,GAAGC,IAAAA,mBAAAA,EAC1BH,OAAOP,IAAI,EACXM,MAAMK,OAAO,IAAIJ,OAAOF,WAAW,EACnCC,MAAME,SAAS,CAACC,SAAS;IAE7B;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "0.0.0-nightly-20250716-0406.1",
+  "version": "0.0.0-nightly-20250718-0405.1",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,25 +12,25 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react-provider": "0.0.0-nightly-20250716-0406.1",
+    "@fluentui/react-provider": "0.0.0-nightly-20250718-0405.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250716-0406.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250718-0405.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-aria": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20250716-0406.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20250718-0405.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-portal": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-positioning": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250716-0406.1",
+    "@fluentui/react-portal": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-positioning": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250718-0405.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },