@fluentui/react-menu 0.0.0-nightly-20250703-1103.1 → 0.0.0-nightly-20250707-0406.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -17
- package/dist/index.d.ts +16 -2
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/useMenu.js +58 -8
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/Menu/useMenuContextValues.js +2 -1
- package/lib/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib/components/MenuPopover/MenuPopover.types.js +1 -3
- package/lib/components/MenuPopover/MenuPopover.types.js.map +1 -1
- package/lib/components/MenuPopover/renderMenuPopover.js +12 -4
- package/lib/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +10 -7
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +24 -10
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/contexts/menuContext.js.map +1 -1
- package/lib/utils/index.js +2 -0
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/useOnMenuEnter.js.map +1 -1
- package/lib/utils/useOnMenuSafeZoneTimeout.js +18 -0
- package/lib/utils/useOnMenuSafeZoneTimeout.js.map +1 -0
- package/lib-commonjs/components/Menu/Menu.types.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.js +60 -10
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenuContextValues.js +2 -1
- package/lib-commonjs/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/MenuPopover.types.js +3 -3
- package/lib-commonjs/components/MenuPopover/MenuPopover.types.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/renderMenuPopover.js +11 -3
- package/lib-commonjs/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +10 -7
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +25 -11
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/contexts/menuContext.js.map +1 -1
- package/lib-commonjs/utils/index.js +11 -0
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/useOnMenuEnter.js.map +1 -1
- package/lib-commonjs/utils/useOnMenuSafeZoneTimeout.js +32 -0
- package/lib-commonjs/utils/useOnMenuSafeZoneTimeout.js.map +1 -0
- package/package.json +14 -14
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js +0 -18
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js +0 -9
- package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +0 -23
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js +0 -216
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +0 -33
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +0 -40
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +0 -32
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +0 -117
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuList/useMenuListStyles.styles.raw.js +0 -22
- package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +0 -31
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +0 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +0 -42
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +0 -1
- package/lib/selectable/useCheckmarkStyles.styles.raw.js +0 -24
- package/lib/selectable/useCheckmarkStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js +0 -36
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js +0 -27
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +0 -41
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js +0 -234
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +0 -51
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +0 -56
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +0 -50
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +0 -136
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js +0 -38
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +0 -47
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +0 -61
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js +0 -30
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js.map +0 -1
|
@@ -1 +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":["makeStyles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","alignSelf","display","flex","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","content","width","strokeWidthThin","height","backgroundColor","colorNeutralStroke1","useMenuSplitGroupStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,kBAAkB,QAAQ,uCAAuC;AAI1E,OAAO,MAAMC,8BAA8B,iBAAiB;AAE5D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AACF;;;CAGC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAED,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDE,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEN,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDI,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEP,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDK,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOb,OAAOc,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBhB,OAAOiB,mBAAmB;YAC7C;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,yBAAyBC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACpG,OAAOF;AACT,EAAE"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { mergeClasses, makeStyles } from '@griffel/react';
|
|
2
|
-
const useStyles = makeStyles({
|
|
3
|
-
root: {
|
|
4
|
-
width: '16px',
|
|
5
|
-
height: '16px',
|
|
6
|
-
visibility: 'hidden',
|
|
7
|
-
flexShrink: 0
|
|
8
|
-
},
|
|
9
|
-
rootChecked: {
|
|
10
|
-
visibility: 'visible',
|
|
11
|
-
flexShrink: 0
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
/**
|
|
15
|
-
* Applies styles to a checkmark slot for selectable menu items
|
|
16
|
-
*
|
|
17
|
-
* @param state - should contain a `checkmark` slot
|
|
18
|
-
*/ export const useCheckmarkStyles_unstable = (state)=>{
|
|
19
|
-
'use no memo';
|
|
20
|
-
const styles = useStyles();
|
|
21
|
-
if (state.checkmark) {
|
|
22
|
-
state.checkmark.className = mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
|
|
23
|
-
}
|
|
24
|
-
};
|
|
@@ -1 +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":["mergeClasses","makeStyles","useStyles","root","width","height","visibility","flexShrink","rootChecked","useCheckmarkStyles_unstable","state","styles","checkmark","className","checked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,MAAMC,YAAYD,WAAW;IAC3BE,MAAM;QACJC,OAAO;QACPC,QAAQ;QACRC,YAAY;QACZC,YAAY;IACd;IACAC,aAAa;QACXF,YAAY;QACZC,YAAY;IACd;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,SAAST;IACf,IAAIQ,MAAME,SAAS,EAAE;QACnBF,MAAME,SAAS,CAACC,SAAS,GAAGb,aAC1BW,OAAOR,IAAI,EACXO,MAAMI,OAAO,IAAIH,OAAOH,WAAW,EACnCE,MAAME,SAAS,CAACC,SAAS;IAE7B;AACF,EAAE"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
menuDividerClassNames: function() {
|
|
13
|
-
return menuDividerClassNames;
|
|
14
|
-
},
|
|
15
|
-
useMenuDividerStyles_unstable: function() {
|
|
16
|
-
return useMenuDividerStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
|
-
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
-
const menuDividerClassNames = {
|
|
22
|
-
root: 'fui-MenuDivider'
|
|
23
|
-
};
|
|
24
|
-
const useStyles = (0, _react.makeStyles)({
|
|
25
|
-
root: {
|
|
26
|
-
margin: '4px -5px 4px -5px',
|
|
27
|
-
width: 'auto',
|
|
28
|
-
borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
const useMenuDividerStyles_unstable = (state)=>{
|
|
32
|
-
'use no memo';
|
|
33
|
-
const styles = useStyles();
|
|
34
|
-
state.root.className = (0, _react.mergeClasses)(menuDividerClassNames.root, styles.root, state.root.className);
|
|
35
|
-
return state;
|
|
36
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuDivider/useMenuDividerStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n root: {\n margin: '4px -5px 4px -5px',\n width: 'auto',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState) => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["menuDividerClassNames","useMenuDividerStyles_unstable","root","useStyles","makeStyles","margin","width","borderBottom","tokens","strokeWidthThin","colorNeutralStroke2","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,qBAAAA;eAAAA;;IAYAC,6BAAAA;eAAAA;;;uBAjB4B;4BAClB;AAIhB,MAAMD,wBAA0D;IACrEE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,QAAQ;QACRC,OAAO;QACPC,cAAc,CAAC,EAAEC,kBAAAA,CAAOC,eAAe,CAAC,OAAO,EAAED,kBAAAA,CAAOE,mBAAmB,CAAC,CAAC;IAC/E;AACF;AAEO,MAAMT,gCAAgC,CAACU;IAC5C;IAEA,MAAMC,SAAST;IACfQ,MAAMT,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAAA,EAAad,sBAAsBE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAEjG,OAAOF;AACT"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
menuGroupClassNames: function() {
|
|
13
|
-
return menuGroupClassNames;
|
|
14
|
-
},
|
|
15
|
-
useMenuGroupStyles_unstable: function() {
|
|
16
|
-
return useMenuGroupStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
|
-
const menuGroupClassNames = {
|
|
21
|
-
root: 'fui-MenuGroup'
|
|
22
|
-
};
|
|
23
|
-
const useMenuGroupStyles_unstable = (state)=>{
|
|
24
|
-
'use no memo';
|
|
25
|
-
state.root.className = (0, _react.mergeClasses)(menuGroupClassNames.root, state.root.className);
|
|
26
|
-
return state;
|
|
27
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["menuGroupClassNames","useMenuGroupStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAIAC,2BAAAA;eAAAA;;;uBAPgB;AAGtB,MAAMD,sBAAsD;IACjEE,MAAM;AACR;AAEO,MAAMD,8BAA8B,CAACE;IAC1C;IAEAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaL,oBAAoBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAElF,OAAOD;AACT"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
menuGroupHeaderClassNames: function() {
|
|
13
|
-
return menuGroupHeaderClassNames;
|
|
14
|
-
},
|
|
15
|
-
useMenuGroupHeaderStyles_unstable: function() {
|
|
16
|
-
return useMenuGroupHeaderStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
|
-
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
-
const menuGroupHeaderClassNames = {
|
|
22
|
-
root: 'fui-MenuGroupHeader'
|
|
23
|
-
};
|
|
24
|
-
const useStyles = (0, _react.makeStyles)({
|
|
25
|
-
root: {
|
|
26
|
-
fontSize: _reacttheme.tokens.fontSizeBase200,
|
|
27
|
-
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
28
|
-
paddingLeft: '8px',
|
|
29
|
-
paddingRight: '8px',
|
|
30
|
-
fontWeight: _reacttheme.tokens.fontWeightSemibold,
|
|
31
|
-
height: '32px',
|
|
32
|
-
display: 'flex',
|
|
33
|
-
alignItems: 'center'
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
const useMenuGroupHeaderStyles_unstable = (state)=>{
|
|
37
|
-
'use no memo';
|
|
38
|
-
const styles = useStyles();
|
|
39
|
-
state.root.className = (0, _react.mergeClasses)(menuGroupHeaderClassNames.root, styles.root, state.root.className);
|
|
40
|
-
return state;
|
|
41
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable","root","useStyles","makeStyles","fontSize","tokens","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,yBAAAA;eAAAA;;IAiBAC,iCAAAA;eAAAA;;;uBAtB4B;4BAClB;AAIhB,MAAMD,4BAAkE;IAC7EE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,UAAUC,kBAAAA,CAAOC,eAAe;QAChCC,OAAOF,kBAAAA,CAAOG,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYN,kBAAAA,CAAOO,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEO,MAAMf,oCAAoC,CAACgB;IAChD;IAEA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAAA,EAAapB,0BAA0BE,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IAErG,OAAOF;AACT"}
|
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
menuItemClassNames: function() {
|
|
13
|
-
return menuItemClassNames;
|
|
14
|
-
},
|
|
15
|
-
useMenuItemStyles_unstable: function() {
|
|
16
|
-
return useMenuItemStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
|
-
const _reacticons = require("@fluentui/react-icons");
|
|
21
|
-
const _reacttabster = require("@fluentui/react-tabster");
|
|
22
|
-
const _reacttheme = require("@fluentui/react-theme");
|
|
23
|
-
const _index = require("../../selectable/index");
|
|
24
|
-
const menuItemClassNames = {
|
|
25
|
-
root: 'fui-MenuItem',
|
|
26
|
-
icon: 'fui-MenuItem__icon',
|
|
27
|
-
checkmark: 'fui-MenuItem__checkmark',
|
|
28
|
-
submenuIndicator: 'fui-MenuItem__submenuIndicator',
|
|
29
|
-
content: 'fui-MenuItem__content',
|
|
30
|
-
secondaryContent: 'fui-MenuItem__secondaryContent',
|
|
31
|
-
subText: 'fui-MenuItem__subText'
|
|
32
|
-
};
|
|
33
|
-
const useRootBaseStyles = (0, _react.makeResetStyles)({
|
|
34
|
-
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
35
|
-
position: 'relative',
|
|
36
|
-
color: _reacttheme.tokens.colorNeutralForeground2,
|
|
37
|
-
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
38
|
-
paddingRight: _reacttheme.tokens.spacingVerticalSNudge,
|
|
39
|
-
paddingLeft: _reacttheme.tokens.spacingVerticalSNudge,
|
|
40
|
-
paddingTop: _reacttheme.tokens.spacingVerticalSNudge,
|
|
41
|
-
paddingBottom: _reacttheme.tokens.spacingVerticalSNudge,
|
|
42
|
-
boxSizing: 'border-box',
|
|
43
|
-
maxWidth: '290px',
|
|
44
|
-
minHeight: '32px',
|
|
45
|
-
flexShrink: 0,
|
|
46
|
-
display: 'flex',
|
|
47
|
-
alignItems: 'start',
|
|
48
|
-
fontSize: _reacttheme.tokens.fontSizeBase300,
|
|
49
|
-
cursor: 'pointer',
|
|
50
|
-
gap: '4px',
|
|
51
|
-
':hover': {
|
|
52
|
-
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
|
|
53
|
-
color: _reacttheme.tokens.colorNeutralForeground2Hover,
|
|
54
|
-
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
55
|
-
display: 'inline'
|
|
56
|
-
},
|
|
57
|
-
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
58
|
-
display: 'none'
|
|
59
|
-
},
|
|
60
|
-
[`& .${menuItemClassNames.icon}`]: {
|
|
61
|
-
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
|
|
62
|
-
},
|
|
63
|
-
[`& .${menuItemClassNames.subText}`]: {
|
|
64
|
-
color: _reacttheme.tokens.colorNeutralForeground3Hover
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
|
-
':hover:active': {
|
|
68
|
-
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
|
|
69
|
-
color: _reacttheme.tokens.colorNeutralForeground2Pressed,
|
|
70
|
-
[`& .${menuItemClassNames.subText}`]: {
|
|
71
|
-
color: _reacttheme.tokens.colorNeutralForeground3Pressed
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
// High contrast styles
|
|
75
|
-
'@media (forced-colors: active)': {
|
|
76
|
-
':hover': {
|
|
77
|
-
backgroundColor: 'Canvas',
|
|
78
|
-
borderColor: 'Highlight',
|
|
79
|
-
color: 'Highlight'
|
|
80
|
-
},
|
|
81
|
-
...(0, _reacttabster.createFocusOutlineStyle)({
|
|
82
|
-
style: {
|
|
83
|
-
outlineColor: 'Highlight'
|
|
84
|
-
}
|
|
85
|
-
})
|
|
86
|
-
},
|
|
87
|
-
userSelect: 'none',
|
|
88
|
-
...(0, _reacttabster.createFocusOutlineStyle)()
|
|
89
|
-
});
|
|
90
|
-
const useContentBaseStyles = (0, _react.makeResetStyles)({
|
|
91
|
-
paddingLeft: '2px',
|
|
92
|
-
paddingRight: '2px',
|
|
93
|
-
backgroundColor: 'transparent',
|
|
94
|
-
flexGrow: 1
|
|
95
|
-
});
|
|
96
|
-
const useSecondaryContentBaseStyles = (0, _react.makeResetStyles)({
|
|
97
|
-
paddingLeft: '2px',
|
|
98
|
-
paddingRight: '2px',
|
|
99
|
-
..._reacttheme.typographyStyles.caption1,
|
|
100
|
-
lineHeight: _reacttheme.tokens.lineHeightBase300,
|
|
101
|
-
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
102
|
-
':hover': {
|
|
103
|
-
color: _reacttheme.tokens.colorNeutralForeground3Hover
|
|
104
|
-
},
|
|
105
|
-
':focus': {
|
|
106
|
-
color: _reacttheme.tokens.colorNeutralForeground3Hover
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
const useIconBaseStyles = (0, _react.makeResetStyles)({
|
|
110
|
-
width: '20px',
|
|
111
|
-
height: '20px',
|
|
112
|
-
fontSize: '20px',
|
|
113
|
-
lineHeight: 0,
|
|
114
|
-
alignItems: 'center',
|
|
115
|
-
display: 'inline-flex',
|
|
116
|
-
justifyContent: 'center',
|
|
117
|
-
flexShrink: 0
|
|
118
|
-
});
|
|
119
|
-
const useSubmenuIndicatorBaseStyles = (0, _react.makeResetStyles)({
|
|
120
|
-
width: '20px',
|
|
121
|
-
height: '20px',
|
|
122
|
-
fontSize: '20px',
|
|
123
|
-
lineHeight: 0,
|
|
124
|
-
alignItems: 'center',
|
|
125
|
-
display: 'inline-flex',
|
|
126
|
-
justifyContent: 'center'
|
|
127
|
-
});
|
|
128
|
-
const useSubtextBaseStyles = (0, _react.makeResetStyles)({
|
|
129
|
-
..._reacttheme.typographyStyles.caption2,
|
|
130
|
-
color: _reacttheme.tokens.colorNeutralForeground3
|
|
131
|
-
});
|
|
132
|
-
const useStyles = (0, _react.makeStyles)({
|
|
133
|
-
checkmark: {
|
|
134
|
-
marginTop: '2px'
|
|
135
|
-
},
|
|
136
|
-
splitItemMain: {
|
|
137
|
-
flexGrow: 1
|
|
138
|
-
},
|
|
139
|
-
splitItemTrigger: {
|
|
140
|
-
borderTopLeftRadius: 0,
|
|
141
|
-
borderBottomLeftRadius: 0,
|
|
142
|
-
paddingLeft: 0,
|
|
143
|
-
'::before': {
|
|
144
|
-
content: '""',
|
|
145
|
-
width: _reacttheme.tokens.strokeWidthThin,
|
|
146
|
-
height: '24px',
|
|
147
|
-
backgroundColor: _reacttheme.tokens.colorNeutralStroke1
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
|
-
disabled: {
|
|
151
|
-
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
152
|
-
':hover': {
|
|
153
|
-
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
154
|
-
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
155
|
-
cursor: 'not-allowed',
|
|
156
|
-
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
157
|
-
display: 'none'
|
|
158
|
-
},
|
|
159
|
-
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
160
|
-
display: 'inline'
|
|
161
|
-
},
|
|
162
|
-
[`& .${menuItemClassNames.icon}`]: {
|
|
163
|
-
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
164
|
-
}
|
|
165
|
-
},
|
|
166
|
-
':hover:active': {
|
|
167
|
-
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
168
|
-
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
|
|
169
|
-
},
|
|
170
|
-
':focus': {
|
|
171
|
-
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
172
|
-
},
|
|
173
|
-
'@media (forced-colors: active)': {
|
|
174
|
-
color: 'GrayText',
|
|
175
|
-
':hover': {
|
|
176
|
-
color: 'GrayText',
|
|
177
|
-
backgroundColor: 'Canvas',
|
|
178
|
-
[`& .${menuItemClassNames.icon}`]: {
|
|
179
|
-
color: 'GrayText',
|
|
180
|
-
backgroundColor: 'Canvas'
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
':focus': {
|
|
184
|
-
color: 'GrayText',
|
|
185
|
-
backgroundColor: 'Canvas'
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
});
|
|
190
|
-
const useMultilineStyles = (0, _react.makeStyles)({
|
|
191
|
-
content: {
|
|
192
|
-
display: 'flex',
|
|
193
|
-
flexDirection: 'column'
|
|
194
|
-
},
|
|
195
|
-
secondaryContent: {
|
|
196
|
-
alignSelf: 'center'
|
|
197
|
-
},
|
|
198
|
-
submenuIndicator: {
|
|
199
|
-
alignSelf: 'center'
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
const useMenuItemStyles_unstable = (state)=>{
|
|
203
|
-
'use no memo';
|
|
204
|
-
const styles = useStyles();
|
|
205
|
-
const rootBaseStyles = useRootBaseStyles();
|
|
206
|
-
const contentBaseStyles = useContentBaseStyles();
|
|
207
|
-
const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
|
|
208
|
-
const iconBaseStyles = useIconBaseStyles();
|
|
209
|
-
const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
|
|
210
|
-
const multilineStyles = useMultilineStyles();
|
|
211
|
-
const subtextBaseStyles = useSubtextBaseStyles();
|
|
212
|
-
const multiline = !!state.subText;
|
|
213
|
-
state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
|
|
214
|
-
if (state.content) {
|
|
215
|
-
state.content.className = (0, _react.mergeClasses)(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
|
|
216
|
-
}
|
|
217
|
-
if (state.checkmark) {
|
|
218
|
-
state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
|
|
219
|
-
}
|
|
220
|
-
if (state.secondaryContent) {
|
|
221
|
-
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
|
|
222
|
-
}
|
|
223
|
-
if (state.icon) {
|
|
224
|
-
state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
|
|
225
|
-
}
|
|
226
|
-
if (state.submenuIndicator) {
|
|
227
|
-
state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
|
|
228
|
-
}
|
|
229
|
-
if (state.subText) {
|
|
230
|
-
state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);
|
|
231
|
-
}
|
|
232
|
-
(0, _index.useCheckmarkStyles_unstable)(state);
|
|
233
|
-
return state;
|
|
234
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItem/useMenuItemStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n subText: 'fui-MenuItem__subText',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: tokens.spacingVerticalSNudge, // 6px\n paddingLeft: tokens.spacingVerticalSNudge,\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n gap: '4px',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n },\n\n userSelect: 'none',\n ...createFocusOutlineStyle(),\n});\n\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n});\n\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: tokens.lineHeightBase300,\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n});\n\nconst useIconBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n flexShrink: 0,\n});\n\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n});\n\nconst useSubtextBaseStyles = makeResetStyles({\n ...typographyStyles.caption2,\n color: tokens.colorNeutralForeground3,\n});\n\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px',\n },\n\n splitItemMain: {\n flexGrow: 1,\n },\n\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '24px',\n backgroundColor: tokens.colorNeutralStroke1,\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n },\n },\n ':focus': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n },\n },\n },\n});\n\nconst useMultilineStyles = makeStyles({\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n\n secondaryContent: {\n alignSelf: 'center',\n },\n\n submenuIndicator: {\n alignSelf: 'center',\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState => {\n 'use no memo';\n\n const styles = useStyles();\n const rootBaseStyles = useRootBaseStyles();\n const contentBaseStyles = useContentBaseStyles();\n const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n const multilineStyles = useMultilineStyles();\n const subtextBaseStyles = useSubtextBaseStyles();\n const multiline = !!state.subText;\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n rootBaseStyles,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(\n menuItemClassNames.content,\n contentBaseStyles,\n state.content.className,\n multiline && multilineStyles.content,\n );\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && secondaryContentBaseStyles,\n state.secondaryContent.className,\n multiline && multilineStyles.secondaryContent,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n submenuIndicatorBaseStyles,\n state.submenuIndicator.className,\n multiline && multilineStyles.submenuIndicator,\n );\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);\n }\n\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n\n return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","makeResetStyles","borderRadius","tokens","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","paddingRight","spacingVerticalSNudge","paddingLeft","paddingTop","paddingBottom","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","colorNeutralBackground1Hover","colorNeutralForeground2Hover","iconFilledClassName","iconRegularClassName","colorNeutralForeground2BrandSelected","colorNeutralForeground3Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","colorNeutralForeground3Pressed","borderColor","createFocusOutlineStyle","style","outlineColor","userSelect","useContentBaseStyles","flexGrow","useSecondaryContentBaseStyles","typographyStyles","caption1","lineHeight","lineHeightBase300","colorNeutralForeground3","useIconBaseStyles","width","height","justifyContent","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","caption2","useStyles","makeStyles","marginTop","splitItemMain","splitItemTrigger","borderTopLeftRadius","borderBottomLeftRadius","strokeWidthThin","colorNeutralStroke1","disabled","colorNeutralForegroundDisabled","useMultilineStyles","flexDirection","alignSelf","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","multiline","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
menuItemCheckboxClassNames: function() {
|
|
13
|
-
return menuItemCheckboxClassNames;
|
|
14
|
-
},
|
|
15
|
-
useMenuItemCheckboxStyles_unstable: function() {
|
|
16
|
-
return useMenuItemCheckboxStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
|
-
const _index = require("../../selectable/index");
|
|
21
|
-
const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
|
|
22
|
-
const menuItemCheckboxClassNames = {
|
|
23
|
-
root: 'fui-MenuItemCheckbox',
|
|
24
|
-
icon: 'fui-MenuItemCheckbox__icon',
|
|
25
|
-
checkmark: 'fui-MenuItemCheckbox__checkmark',
|
|
26
|
-
content: 'fui-MenuItemCheckbox__content',
|
|
27
|
-
secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
|
|
28
|
-
subText: 'fui-MenuItemCheckbox__subText'
|
|
29
|
-
};
|
|
30
|
-
const useMenuItemCheckboxStyles_unstable = (state)=>{
|
|
31
|
-
'use no memo';
|
|
32
|
-
state.root.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.root, state.root.className);
|
|
33
|
-
if (state.content) {
|
|
34
|
-
state.content.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.content, state.content.className);
|
|
35
|
-
}
|
|
36
|
-
if (state.secondaryContent) {
|
|
37
|
-
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
|
|
38
|
-
}
|
|
39
|
-
if (state.icon) {
|
|
40
|
-
state.icon.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.icon, state.icon.className);
|
|
41
|
-
}
|
|
42
|
-
if (state.checkmark) {
|
|
43
|
-
state.checkmark.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
|
|
44
|
-
}
|
|
45
|
-
if (state.subText) {
|
|
46
|
-
state.subText.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.subText, state.subText.className);
|
|
47
|
-
}
|
|
48
|
-
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
|
|
49
|
-
(0, _index.useCheckmarkStyles_unstable)(state);
|
|
50
|
-
return state;
|
|
51
|
-
};
|
package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemCheckbox',\n icon: 'fui-MenuItemCheckbox__icon',\n checkmark: 'fui-MenuItemCheckbox__checkmark',\n content: 'fui-MenuItemCheckbox__content',\n secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n subText: 'fui-MenuItemCheckbox__subText',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState): MenuItemCheckboxState => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemCheckboxClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n\n return state;\n};\n"],"names":["menuItemCheckboxClassNames","useMenuItemCheckboxStyles_unstable","root","icon","checkmark","content","secondaryContent","subText","state","className","mergeClasses","useMenuItemStyles_unstable","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,0BAAAA;eAAAA;;IASAC,kCAAAA;eAAAA;;;uBAhBgB;uBACe;yCACD;AAKpC,MAAMD,6BAAsF;IACjGE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX;AAEO,MAAMN,qCAAqC,CAACO;IACjD;IAEAA,MAAMN,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAEzF,IAAID,MAAMH,OAAO,EAAE;QACjBG,MAAMH,OAAO,CAACI,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BK,OAAO,EAAEG,MAAMH,OAAO,CAACI,SAAS;IACpG;IAEA,IAAID,MAAMF,gBAAgB,EAAE;QAC1BE,MAAMF,gBAAgB,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EACjCV,2BAA2BM,gBAAgB,EAC3CE,MAAMF,gBAAgB,CAACG,SAAS;IAEpC;IAEA,IAAID,MAAML,IAAI,EAAE;QACdK,MAAML,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BG,IAAI,EAAEK,MAAML,IAAI,CAACM,SAAS;IAC3F;IAEA,IAAID,MAAMJ,SAAS,EAAE;QACnBI,MAAMJ,SAAS,CAACK,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BI,SAAS,EAAEI,MAAMJ,SAAS,CAACK,SAAS;IAC1G;IAEA,IAAID,MAAMD,OAAO,EAAE;QACjBC,MAAMD,OAAO,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BO,OAAO,EAAEC,MAAMD,OAAO,CAACE,SAAS;IACpG;IAEAE,IAAAA,mDAAAA,EAA2BH;IAC3BI,IAAAA,kCAAAA,EAA4BJ;IAE5B,OAAOA;AACT"}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
menuItemLinkClassNames: function() {
|
|
13
|
-
return menuItemLinkClassNames;
|
|
14
|
-
},
|
|
15
|
-
useMenuItemLinkStyles_unstable: function() {
|
|
16
|
-
return useMenuItemLinkStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
|
-
const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
|
|
21
|
-
const menuItemLinkClassNames = {
|
|
22
|
-
root: 'fui-MenuItemLink',
|
|
23
|
-
icon: 'fui-MenuItemLink__icon',
|
|
24
|
-
checkmark: 'fui-MenuItemLink__checkmark',
|
|
25
|
-
content: 'fui-MenuItemLink__content',
|
|
26
|
-
secondaryContent: 'fui-MenuItemLink__secondaryContent'
|
|
27
|
-
};
|
|
28
|
-
/**
|
|
29
|
-
* Styles for the root slot
|
|
30
|
-
*/ const useStyles = (0, _react.makeStyles)({
|
|
31
|
-
resetLink: {
|
|
32
|
-
textDecorationLine: 'none',
|
|
33
|
-
textDecorationThickness: 'initial',
|
|
34
|
-
textDecorationStyle: 'initial',
|
|
35
|
-
textDecorationColor: 'initial'
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
const useMenuItemLinkStyles_unstable = (state)=>{
|
|
39
|
-
'use no memo';
|
|
40
|
-
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
|
|
41
|
-
const styles = useStyles();
|
|
42
|
-
state.root.className = (0, _react.mergeClasses)(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
|
|
43
|
-
if (state.icon) {
|
|
44
|
-
state.icon.className = (0, _react.mergeClasses)(menuItemLinkClassNames.icon, state.icon.className);
|
|
45
|
-
}
|
|
46
|
-
if (state.content) {
|
|
47
|
-
state.content.className = (0, _react.mergeClasses)(menuItemLinkClassNames.content, state.content.className);
|
|
48
|
-
}
|
|
49
|
-
if (state.secondaryContent) {
|
|
50
|
-
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
|
|
51
|
-
}
|
|
52
|
-
if (state.checkmark) {
|
|
53
|
-
state.checkmark.className = (0, _react.mergeClasses)(menuItemLinkClassNames.checkmark, state.checkmark.className);
|
|
54
|
-
}
|
|
55
|
-
return state;
|
|
56
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport { MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport const menuItemLinkClassNames: SlotClassNames<MenuItemLinkSlots> = {\n root: 'fui-MenuItemLink',\n icon: 'fui-MenuItemLink__icon',\n checkmark: 'fui-MenuItemLink__checkmark',\n content: 'fui-MenuItemLink__content',\n secondaryContent: 'fui-MenuItemLink__secondaryContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n resetLink: {\n textDecorationLine: 'none',\n textDecorationThickness: 'initial',\n textDecorationStyle: 'initial',\n textDecorationColor: 'initial',\n },\n});\n\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */\nexport const useMenuItemLinkStyles_unstable = (state: MenuItemLinkState): MenuItemLinkState => {\n 'use no memo';\n\n useMenuItemStyles_unstable(state as MenuItemState);\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemLinkClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n }\n\n return state;\n};\n"],"names":["menuItemLinkClassNames","useMenuItemLinkStyles_unstable","root","icon","checkmark","content","secondaryContent","useStyles","makeStyles","resetLink","textDecorationLine","textDecorationThickness","textDecorationStyle","textDecorationColor","state","useMenuItemStyles_unstable","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,sBAAAA;eAAAA;;IAuBAC,8BAAAA;eAAAA;;;uBA7B4B;yCAGE;AAGpC,MAAMD,yBAA4D;IACvEE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAKO,MAAMZ,iCAAiC,CAACa;IAC7C;IAEAC,IAAAA,mDAAAA,EAA2BD;IAC3B,MAAME,SAAST;IACfO,MAAMZ,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,uBAAuBE,IAAI,EAAEc,OAAOP,SAAS,EAAEK,MAAMZ,IAAI,CAACe,SAAS;IAEvG,IAAIH,MAAMX,IAAI,EAAE;QACdW,MAAMX,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,uBAAuBG,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IACvF;IAEA,IAAIH,MAAMT,OAAO,EAAE;QACjBS,MAAMT,OAAO,CAACY,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,uBAAuBK,OAAO,EAAES,MAAMT,OAAO,CAACY,SAAS;IAChG;IAEA,IAAIH,MAAMR,gBAAgB,EAAE;QAC1BQ,MAAMR,gBAAgB,CAACW,SAAS,GAAGC,IAAAA,mBAAAA,EACjClB,uBAAuBM,gBAAgB,EACvCQ,MAAMR,gBAAgB,CAACW,SAAS;IAEpC;IAEA,IAAIH,MAAMV,SAAS,EAAE;QACnBU,MAAMV,SAAS,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,uBAAuBI,SAAS,EAAEU,MAAMV,SAAS,CAACa,SAAS;IACtG;IAEA,OAAOH;AACT"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
menuItemRadioClassNames: function() {
|
|
13
|
-
return menuItemRadioClassNames;
|
|
14
|
-
},
|
|
15
|
-
useMenuItemRadioStyles_unstable: function() {
|
|
16
|
-
return useMenuItemRadioStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
|
-
const _index = require("../../selectable/index");
|
|
21
|
-
const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
|
|
22
|
-
const menuItemRadioClassNames = {
|
|
23
|
-
root: 'fui-MenuItemRadio',
|
|
24
|
-
icon: 'fui-MenuItemRadio__icon',
|
|
25
|
-
checkmark: 'fui-MenuItemRadio__checkmark',
|
|
26
|
-
content: 'fui-MenuItemRadio__content',
|
|
27
|
-
secondaryContent: 'fui-MenuItemRadio__secondaryContent',
|
|
28
|
-
subText: 'fui-MenuItemRadio__subText'
|
|
29
|
-
};
|
|
30
|
-
const useMenuItemRadioStyles_unstable = (state)=>{
|
|
31
|
-
'use no memo';
|
|
32
|
-
state.root.className = (0, _react.mergeClasses)(menuItemRadioClassNames.root, state.root.className);
|
|
33
|
-
if (state.content) {
|
|
34
|
-
state.content.className = (0, _react.mergeClasses)(menuItemRadioClassNames.content, state.content.className);
|
|
35
|
-
}
|
|
36
|
-
if (state.secondaryContent) {
|
|
37
|
-
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
|
|
38
|
-
}
|
|
39
|
-
if (state.icon) {
|
|
40
|
-
state.icon.className = (0, _react.mergeClasses)(menuItemRadioClassNames.icon, state.icon.className);
|
|
41
|
-
}
|
|
42
|
-
if (state.checkmark) {
|
|
43
|
-
state.checkmark.className = (0, _react.mergeClasses)(menuItemRadioClassNames.checkmark, state.checkmark.className);
|
|
44
|
-
}
|
|
45
|
-
if (state.subText) {
|
|
46
|
-
state.subText.className = (0, _react.mergeClasses)(menuItemRadioClassNames.subText, state.subText.className);
|
|
47
|
-
}
|
|
48
|
-
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
|
|
49
|
-
(0, _index.useCheckmarkStyles_unstable)(state);
|
|
50
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n subText: 'fui-MenuItemRadio__subText',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"names":["menuItemRadioClassNames","useMenuItemRadioStyles_unstable","root","icon","checkmark","content","secondaryContent","subText","state","className","mergeClasses","useMenuItemStyles_unstable","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,uBAAAA;eAAAA;;IASAC,+BAAAA;eAAAA;;;uBAhBgB;uBACe;yCACD;AAKpC,MAAMD,0BAAmF;IAC9FE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX;AAEO,MAAMN,kCAAkC,CAACO;IAC9C;IAEAA,MAAMN,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAEtF,IAAID,MAAMH,OAAO,EAAE;QACjBG,MAAMH,OAAO,CAACI,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBK,OAAO,EAAEG,MAAMH,OAAO,CAACI,SAAS;IACjG;IAEA,IAAID,MAAMF,gBAAgB,EAAE;QAC1BE,MAAMF,gBAAgB,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EACjCV,wBAAwBM,gBAAgB,EACxCE,MAAMF,gBAAgB,CAACG,SAAS;IAEpC;IAEA,IAAID,MAAML,IAAI,EAAE;QACdK,MAAML,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBG,IAAI,EAAEK,MAAML,IAAI,CAACM,SAAS;IACxF;IAEA,IAAID,MAAMJ,SAAS,EAAE;QACnBI,MAAMJ,SAAS,CAACK,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBI,SAAS,EAAEI,MAAMJ,SAAS,CAACK,SAAS;IACvG;IAEA,IAAID,MAAMD,OAAO,EAAE;QACjBC,MAAMD,OAAO,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBO,OAAO,EAAEC,MAAMD,OAAO,CAACE,SAAS;IACjG;IAEAE,IAAAA,mDAAAA,EAA2BH;IAC3BI,IAAAA,kCAAAA,EAA4BJ;AAC9B"}
|