@fluentui/react-menu 0.0.0-nightly-20240820-2210.1 → 0.0.0-nightly-20240822-1237.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 +39 -17
- package/dist/index.d.ts +3 -2
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +4 -4
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib/components/MenuItem/useMenuItem.js +3 -3
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.js +16 -16
- package/lib/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLink.js +1 -0
- package/lib/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js +1 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +12 -11
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js +5 -5
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +3 -3
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +6 -6
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js +3 -3
- package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js +50 -50
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js +1 -0
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js +1 -0
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +26 -25
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js +6 -6
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +4 -4
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
- package/package.json +14 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","__styles","tokens","typographyStyles","createSlideStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","d","p","k","m","t","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createSlideStyles } from '@fluentui/react-positioning';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n root: {\n borderRadius:
|
|
1
|
+
{"version":3,"names":["mergeClasses","__styles","tokens","typographyStyles","createSlideStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","d","p","k","m","t","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createSlideStyles } from '@fluentui/react-positioning';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\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 * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAgBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAG9D,SAAS,CAAC,CAAC;EAC1B6D,KAAK,CAAC9D,IAAI,CAACgE,SAAS,GAAGtE,YAAY,CAACK,qBAAqB,CAACC,IAAI,EAAE+D,MAAM,CAAC/D,IAAI,EAAE8D,KAAK,CAAC9D,IAAI,CAACgE,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -15,12 +15,12 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
15
15
|
B71tm0z: ["fn8z6db", "f1be8c1t"],
|
|
16
16
|
Gjs4sj: ["f1vtn0lh", "f8hq2kl"],
|
|
17
17
|
foni4y: "f7j48hl",
|
|
18
|
-
Ie9k5m: "
|
|
18
|
+
Ie9k5m: "f13du8c1",
|
|
19
19
|
f30fub: "fe64lw1",
|
|
20
|
-
Jberyy: "
|
|
20
|
+
Jberyy: "f92oj5h"
|
|
21
21
|
}
|
|
22
22
|
}, {
|
|
23
|
-
d: [".f22iagw{display:flex;}", ".f1mvlx34>.fui-MenuItem:nth-of-type(1){flex-grow:1;}", ".fsdyxoe>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}", ".fuk6rhi>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}", ".fn8z6db>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}", ".f1be8c1t>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}", ".f1vtn0lh>.fui-MenuItem:nth-of-type(2){padding-left:0;}", ".f8hq2kl>.fui-MenuItem:nth-of-type(2){padding-right:0;}", ".f7j48hl>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}", ".
|
|
23
|
+
d: [".f22iagw{display:flex;}", ".f1mvlx34>.fui-MenuItem:nth-of-type(1){flex-grow:1;}", ".fsdyxoe>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}", ".fuk6rhi>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}", ".fn8z6db>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}", ".f1be8c1t>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}", ".f1vtn0lh>.fui-MenuItem:nth-of-type(2){padding-left:0;}", ".f8hq2kl>.fui-MenuItem:nth-of-type(2){padding-right:0;}", ".f7j48hl>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}", ".f13du8c1>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}", ".fe64lw1>.fui-MenuItem:nth-of-type(2)::before{height:20px;}", ".f92oj5h>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}"]
|
|
24
24
|
});
|
|
25
25
|
/**
|
|
26
26
|
* Apply styling to the MenuSplitGroup slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupClassNames","root","useStyles","mc9l5x","oe75ve","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flexGrow: 1\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width:
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupClassNames","root","useStyles","mc9l5x","oe75ve","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flexGrow: 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 * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAkBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -22,8 +22,8 @@ const menuGroupHeaderClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
24
24
|
root: {
|
|
25
|
-
Be2twd7: "
|
|
26
|
-
sj55zd: "
|
|
25
|
+
Be2twd7: "fy9rknc",
|
|
26
|
+
sj55zd: "f11d4kpn",
|
|
27
27
|
uwmqm3: [
|
|
28
28
|
"f177v4lu",
|
|
29
29
|
"f19lj068"
|
|
@@ -32,18 +32,18 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
32
32
|
"f19lj068",
|
|
33
33
|
"f177v4lu"
|
|
34
34
|
],
|
|
35
|
-
Bhrd7zp: "
|
|
35
|
+
Bhrd7zp: "fl43uef",
|
|
36
36
|
Bqenvij: "f1d2rq10",
|
|
37
37
|
mc9l5x: "f22iagw",
|
|
38
38
|
Bt984gj: "f122n59"
|
|
39
39
|
}
|
|
40
40
|
}, {
|
|
41
41
|
d: [
|
|
42
|
-
".
|
|
43
|
-
".
|
|
42
|
+
".fy9rknc{font-size:var(--fontSizeBase200);}",
|
|
43
|
+
".f11d4kpn{color:var(--colorNeutralForeground3);}",
|
|
44
44
|
".f177v4lu{padding-left:8px;}",
|
|
45
45
|
".f19lj068{padding-right:8px;}",
|
|
46
|
-
".
|
|
46
|
+
".fl43uef{font-weight:var(--fontWeightSemibold);}",
|
|
47
47
|
".f1d2rq10{height:32px;}",
|
|
48
48
|
".f22iagw{display:flex;}",
|
|
49
49
|
".f122n59{align-items:center;}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n root: {\n fontSize:
|
|
1
|
+
{"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center'\n }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable","root","useStyles","__styles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAeAC,iCAAiC;eAAjCA;;;uBAjB4B;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAYX,MAAMZ,oCAAqCa,CAAAA;IAC9C;IACA,MAAMC,SAASZ;IACfW,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,0BAA0BE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IACrG,OAAOF;AACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<'div'
|
|
1
|
+
{"version":3,"sources":["MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<Omit<ExtractSlotProps<Slot<'div'>>, 'content'>>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n};\n\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n};\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -24,7 +24,7 @@ const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFille
|
|
|
24
24
|
const useMenuItem_unstable = (props, ref)=>{
|
|
25
25
|
const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
|
|
26
26
|
const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
|
|
27
|
-
const {
|
|
27
|
+
const { disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content, ...rest } = props;
|
|
28
28
|
const hasIcons = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasIcons);
|
|
29
29
|
const hasCheckmarks = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasCheckmarks);
|
|
30
30
|
const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
|
|
@@ -43,9 +43,9 @@ const useMenuItem_unstable = (props, ref)=>{
|
|
|
43
43
|
content: 'span',
|
|
44
44
|
secondaryContent: 'span'
|
|
45
45
|
},
|
|
46
|
-
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(
|
|
46
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', (0, _reactaria.useARIAButtonProps)('div', {
|
|
47
47
|
role: 'menuitem',
|
|
48
|
-
...
|
|
48
|
+
...rest,
|
|
49
49
|
disabled: false,
|
|
50
50
|
disabledFocusable: disabled,
|
|
51
51
|
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {
|
|
1
|
+
{"version":3,"sources":["useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const {\n disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content,\n ...rest\n } = props;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps<MenuItemProps>(\n 'div',\n useARIAButtonProps('div', {\n role: 'menuitem',\n ...rest,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseEnter: useEventCallback(event => {\n innerRef.current?.focus();\n\n props.onMouseEnter?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, { renderByDefault: hasCheckmarks, elementType: 'span' }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n"],"names":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","disabled","hasSubmenu","persistOnClick","content","rest","hasIcons","useMenuListContext_unstable","hasCheckmarks","setOpen","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","secondaryContent","slot","always","getIntrinsicElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","isDefaultPrevented","key","Space","Enter","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -26,47 +26,47 @@ const menuItemClassNames = {
|
|
|
26
26
|
content: 'fui-MenuItem__content',
|
|
27
27
|
secondaryContent: 'fui-MenuItem__secondaryContent'
|
|
28
28
|
};
|
|
29
|
-
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
29
|
+
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r11normc", "r1lnj0i0", {
|
|
30
30
|
r: [
|
|
31
|
-
".
|
|
32
|
-
".
|
|
33
|
-
".
|
|
34
|
-
".
|
|
35
|
-
".
|
|
36
|
-
".
|
|
37
|
-
".
|
|
38
|
-
".
|
|
39
|
-
".
|
|
40
|
-
".
|
|
41
|
-
".
|
|
42
|
-
".
|
|
43
|
-
".
|
|
44
|
-
".
|
|
45
|
-
".
|
|
46
|
-
".
|
|
47
|
-
".
|
|
48
|
-
".
|
|
49
|
-
".
|
|
50
|
-
".
|
|
31
|
+
".r11normc{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
|
|
32
|
+
".r11normc:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
|
|
33
|
+
".r11normc:hover .fui-Icon-filled{display:inline;}",
|
|
34
|
+
".r11normc:hover .fui-Icon-regular{display:none;}",
|
|
35
|
+
".r11normc:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
|
|
36
|
+
".r11normc:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
|
|
37
|
+
".r11normc:focus{outline-style:none;}",
|
|
38
|
+
".r11normc:focus-visible{outline-style:none;}",
|
|
39
|
+
".r11normc[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
40
|
+
".r11normc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
41
|
+
".r1lnj0i0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
|
|
42
|
+
".r1lnj0i0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
|
|
43
|
+
".r1lnj0i0:hover .fui-Icon-filled{display:inline;}",
|
|
44
|
+
".r1lnj0i0:hover .fui-Icon-regular{display:none;}",
|
|
45
|
+
".r1lnj0i0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
|
|
46
|
+
".r1lnj0i0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
|
|
47
|
+
".r1lnj0i0:focus{outline-style:none;}",
|
|
48
|
+
".r1lnj0i0:focus-visible{outline-style:none;}",
|
|
49
|
+
".r1lnj0i0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
50
|
+
".r1lnj0i0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
51
51
|
],
|
|
52
52
|
s: [
|
|
53
|
-
"@media (forced-colors: active){.
|
|
54
|
-
"@media (forced-colors: active){.
|
|
55
|
-
"@media (forced-colors: active){.
|
|
56
|
-
"@media (forced-colors: active){.
|
|
53
|
+
"@media (forced-colors: active){.r11normc:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r11normc:focus{outline-style:none;}.r11normc:focus-visible{outline-style:none;}.r11normc[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.r11normc[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.r11normc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}",
|
|
54
|
+
"@media (forced-colors: active){.r11normc[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
|
|
55
|
+
"@media (forced-colors: active){.r1lnj0i0:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r1lnj0i0:focus{outline-style:none;}.r1lnj0i0:focus-visible{outline-style:none;}.r1lnj0i0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r1lnj0i0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r1lnj0i0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}",
|
|
56
|
+
"@media (forced-colors: active){.r1lnj0i0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
|
|
57
57
|
]
|
|
58
58
|
});
|
|
59
59
|
const useContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1ls86vo", "rpbc5dr", [
|
|
60
60
|
".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}",
|
|
61
61
|
".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}"
|
|
62
62
|
]);
|
|
63
|
-
const useSecondaryContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
64
|
-
".
|
|
65
|
-
".
|
|
66
|
-
".
|
|
67
|
-
".
|
|
68
|
-
".
|
|
69
|
-
".
|
|
63
|
+
const useSecondaryContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r12mwwux", "r1ewgu5j", [
|
|
64
|
+
".r12mwwux{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}",
|
|
65
|
+
".r12mwwux:hover{color:var(--colorNeutralForeground3Hover);}",
|
|
66
|
+
".r12mwwux:focus{color:var(--colorNeutralForeground3Hover);}",
|
|
67
|
+
".r1ewgu5j{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}",
|
|
68
|
+
".r1ewgu5j:hover{color:var(--colorNeutralForeground3Hover);}",
|
|
69
|
+
".r1ewgu5j:focus{color:var(--colorNeutralForeground3Hover);}"
|
|
70
70
|
]);
|
|
71
71
|
const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r9c34qo", null, [
|
|
72
72
|
".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"
|
|
@@ -95,21 +95,21 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
95
95
|
"fhxju0i"
|
|
96
96
|
],
|
|
97
97
|
Ftih45: "f1wl9k8s",
|
|
98
|
-
Ccq8qp: "
|
|
98
|
+
Ccq8qp: "f1yn80uh",
|
|
99
99
|
Baz25je: "f68mna0",
|
|
100
|
-
cmx5o7: "
|
|
100
|
+
cmx5o7: "f1p5zmk"
|
|
101
101
|
},
|
|
102
102
|
disabled: {
|
|
103
|
-
sj55zd: "
|
|
104
|
-
Bi91k9c: "
|
|
105
|
-
Jwef8y: "
|
|
103
|
+
sj55zd: "f1s2aq7o",
|
|
104
|
+
Bi91k9c: "fvgxktp",
|
|
105
|
+
Jwef8y: "f1ijtazh",
|
|
106
106
|
eoavqd: "fphbwmw",
|
|
107
107
|
Bk3fhr4: "f19vpps7",
|
|
108
108
|
Bmfj8id: "fv5swzo",
|
|
109
|
-
Bg7n49j: "
|
|
110
|
-
B2d53fq: "
|
|
111
|
-
iro3zm: "
|
|
112
|
-
t0hwav: "
|
|
109
|
+
Bg7n49j: "f1q1x1ba",
|
|
110
|
+
B2d53fq: "fcvwxyo",
|
|
111
|
+
iro3zm: "f1to34ca",
|
|
112
|
+
t0hwav: "ft33916",
|
|
113
113
|
Bbusuzp: "f1dcs8yz",
|
|
114
114
|
ze5xyy: "f1kc2mi9",
|
|
115
115
|
Bqrx1nm: "fkavljg",
|
|
@@ -129,23 +129,23 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
129
129
|
".f1cnd47f{padding-left:0;}",
|
|
130
130
|
".fhxju0i{padding-right:0;}",
|
|
131
131
|
".f1wl9k8s::before{content:\"\";}",
|
|
132
|
-
".
|
|
132
|
+
".f1yn80uh::before{width:var(--strokeWidthThin);}",
|
|
133
133
|
".f68mna0::before{height:24px;}",
|
|
134
|
-
".
|
|
135
|
-
".
|
|
134
|
+
".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}",
|
|
135
|
+
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
|
|
136
136
|
],
|
|
137
137
|
h: [
|
|
138
|
-
".
|
|
139
|
-
".
|
|
138
|
+
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
|
|
139
|
+
".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}",
|
|
140
140
|
".fphbwmw:hover{cursor:not-allowed;}",
|
|
141
141
|
".f19vpps7:hover .fui-Icon-filled{display:none;}",
|
|
142
142
|
".fv5swzo:hover .fui-Icon-regular{display:inline;}",
|
|
143
|
-
".
|
|
144
|
-
".
|
|
145
|
-
".
|
|
143
|
+
".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}",
|
|
144
|
+
".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
|
|
145
|
+
".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}"
|
|
146
146
|
],
|
|
147
147
|
f: [
|
|
148
|
-
".
|
|
148
|
+
".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
|
|
149
149
|
],
|
|
150
150
|
m: [
|
|
151
151
|
[
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuItemStyles.styles.js"],"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';\nexport const menuItemClassNames = {\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};\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: `var(--1307, var(--1308, ${tokens.borderRadiusMedium}))`,\n position: 'relative',\n color: `var(--1309, var(--1310, ${tokens.colorNeutralForeground2}))`,\n backgroundColor: `var(--1311, var(--1312, ${tokens.colorNeutralBackground1}))`,\n paddingRight: `var(--1313, var(--1314, ${tokens.spacingVerticalSNudge}))`,\n paddingLeft: `var(--1315, var(--1316, ${tokens.spacingVerticalSNudge}))`,\n paddingTop: `var(--1317, var(--1318, ${tokens.spacingVerticalSNudge}))`,\n paddingBottom: `var(--1319, var(--1320, ${tokens.spacingVerticalSNudge}))`,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: `var(--1321, var(--1322, ${tokens.fontSizeBase300}))`,\n cursor: 'pointer',\n gap: '4px',\n ':hover': {\n backgroundColor: `var(--1323, var(--1324, ${tokens.colorNeutralBackground1Hover}))`,\n color: `var(--1325, var(--1326, ${tokens.colorNeutralForeground2Hover}))`,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: `var(--1327, var(--1328, ${tokens.colorNeutralForeground2BrandSelected}))`\n }\n },\n ':hover:active': {\n backgroundColor: `var(--1329, var(--1330, ${tokens.colorNeutralBackground1Pressed}))`,\n color: `var(--1331, var(--1332, ${tokens.colorNeutralForeground2Pressed}))`\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight'\n },\n ...createFocusOutlineStyle({\n style: {\n outlineColor: 'Highlight'\n }\n })\n },\n userSelect: 'none',\n ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: `var(--1333, var(--1334, ${tokens.lineHeightBase300}))`,\n color: `var(--1335, var(--1336, ${tokens.colorNeutralForeground3}))`,\n ':hover': {\n color: `var(--1337, var(--1338, ${tokens.colorNeutralForeground3Hover}))`\n },\n ':focus': {\n color: `var(--1339, var(--1340, ${tokens.colorNeutralForeground3Hover}))`\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});\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});\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px'\n },\n splitItemMain: {\n flexGrow: 1\n },\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: `var(--1341, var(--1342, ${tokens.strokeWidthThin}))`,\n height: '24px',\n backgroundColor: `var(--1343, var(--1344, ${tokens.colorNeutralStroke1}))`\n }\n },\n disabled: {\n color: `var(--1345, var(--1346, ${tokens.colorNeutralForegroundDisabled}))`,\n ':hover': {\n color: `var(--1347, var(--1348, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: `var(--1349, var(--1350, ${tokens.colorNeutralBackground1}))`,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: `var(--1351, var(--1352, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n ':hover:active': {\n color: `var(--1353, var(--1354, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: `var(--1355, var(--1356, ${tokens.colorNeutralBackground1}))`\n },\n ':focus': {\n color: `var(--1357, var(--1358, ${tokens.colorNeutralForegroundDisabled}))`\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/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n 'use no memo';\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 state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","__resetStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","__styles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useMenuItemStyles.styles.js"],"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';\nexport const menuItemClassNames = {\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};\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: tokens.spacingVerticalSNudge,\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 ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight'\n },\n ...createFocusOutlineStyle({\n style: {\n outlineColor: 'Highlight'\n }\n })\n },\n userSelect: 'none',\n ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\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});\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});\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});\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px'\n },\n splitItemMain: {\n flexGrow: 1\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 ':hover:active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1\n },\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled\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/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n 'use no memo';\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 state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","__resetStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","__styles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n props: MenuItemLinkProps,\n ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n // casting because the root slot changes from div to a\n const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n // FIXME: casting because the root slot changes from div to a,\n // ideal solution would be to extract common logic from useMenuItem_unstable root\n // and use it in both without assuming element type\n const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n return {\n ...baseState,\n components: {\n ...baseState.components,\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n role: 'menuitem',\n ..._props,\n }),\n { elementType: 'a' },\n ),\n };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","_props","root","tabIndex","components","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n props: MenuItemLinkProps,\n ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n // casting because the root slot changes from div to a\n const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n // FIXME: casting because the root slot changes from div to a,\n // ideal solution would be to extract common logic from useMenuItem_unstable root\n // and use it in both without assuming element type\n const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n return {\n ...baseState,\n components: {\n // eslint-disable-next-line deprecation/deprecation\n ...baseState.components,\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n role: 'menuitem',\n ..._props,\n }),\n { elementType: 'a' },\n ),\n };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","_props","root","tabIndex","components","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACgD;6BAElC;AAY9B,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYC,IAAAA,iCAAAA,EAAqBH,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMI,SAAS;QAAE,GAAGJ,KAAK;QAAE,GAAIE,UAAUG,IAAI;QAAkCJ;QAAKK,UAAUN,MAAMM,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGJ,SAAS;QACZK,YAAY;YACV,mDAAmD;YACnD,GAAGL,UAAUK,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,KAAK;YAC5BC,MAAM;YACN,GAAGP,MAAM;QACX,IACA;YAAEQ,aAAa;QAAI;IAEvB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckbox_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n defaultProps: {\n children: <CircleFilled className={circleFilledClassName} />,\n },\n }),\n components: {\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["useMenuItemSwitch_unstable","props","ref","baseState","useMenuItemCheckbox_unstable","switchIndicator","slot","optional","renderByDefault","elementType","defaultProps","children","React","createElement","CircleFilled","className","circleFilledClassName","components"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckbox_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n defaultProps: {\n children: <CircleFilled className={circleFilledClassName} />,\n },\n }),\n components: {\n // eslint-disable-next-line deprecation/deprecation\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["useMenuItemSwitch_unstable","props","ref","baseState","useMenuItemCheckbox_unstable","switchIndicator","slot","optional","renderByDefault","elementType","defaultProps","children","React","createElement","CircleFilled","className","circleFilledClassName","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACF;qCAEwB;4BAChB;+CACS;AAW/B,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,YAAYC,IAAAA,iDAAAA,EAA6BH,OAAOC;IACtD,OAAO;QACL,GAAGC,SAAS;QACZE,iBAAiBC,oBAAAA,CAAKC,QAAQ,CAACN,MAAMI,eAAe,EAAE;YACpDG,iBAAiB;YACjBC,aAAa;YACbC,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,wBAAAA,EAAAA;oBAAaC,WAAWC,oDAAAA;;YACrC;QACF;QACAC,YAAY;YACV,mDAAmD;YACnD,GAAGd,UAAUc,UAAU;YACvBZ,iBAAiB;QACnB;IACF;AACF"}
|
|
@@ -34,22 +34,22 @@ const spaceBetweenThumbAndTrack = 2;
|
|
|
34
34
|
const trackHeight = 20;
|
|
35
35
|
const trackWidth = 40;
|
|
36
36
|
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
|
37
|
-
const useSwitchIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
37
|
+
const useSwitchIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1x31n8g", "rsmcm5v", {
|
|
38
38
|
r: [
|
|
39
|
-
".
|
|
40
|
-
".
|
|
41
|
-
".
|
|
42
|
-
".
|
|
43
|
-
".
|
|
44
|
-
".
|
|
45
|
-
".
|
|
46
|
-
".
|
|
39
|
+
".r1x31n8g{border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;margin-right:var(--spacingHorizontalXS);color:var(--colorNeutralStrokeAccessible);}",
|
|
40
|
+
".r1x31n8g:hover{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
|
41
|
+
".r1x31n8g:hover:active{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
|
42
|
+
".r1x31n8g .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}",
|
|
43
|
+
".rsmcm5v{border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;margin-left:var(--spacingHorizontalXS);color:var(--colorNeutralStrokeAccessible);}",
|
|
44
|
+
".rsmcm5v:hover{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
|
45
|
+
".rsmcm5v:hover:active{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
|
46
|
+
".rsmcm5v .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"
|
|
47
47
|
],
|
|
48
48
|
s: [
|
|
49
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
50
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
51
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
52
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
49
|
+
"@media screen and (prefers-reduced-motion: reduce){.r1x31n8g{transition-duration:0.01ms;}}",
|
|
50
|
+
"@media screen and (prefers-reduced-motion: reduce){.r1x31n8g .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}",
|
|
51
|
+
"@media screen and (prefers-reduced-motion: reduce){.rsmcm5v{transition-duration:0.01ms;}}",
|
|
52
|
+
"@media screen and (prefers-reduced-motion: reduce){.rsmcm5v .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}"
|
|
53
53
|
]
|
|
54
54
|
});
|
|
55
55
|
const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -58,8 +58,8 @@ const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
58
58
|
"fdca5i2",
|
|
59
59
|
"fk0rr1z"
|
|
60
60
|
],
|
|
61
|
-
De3pzq: "
|
|
62
|
-
sj55zd: "
|
|
61
|
+
De3pzq: "ftywsgz",
|
|
62
|
+
sj55zd: "fqpbvvt",
|
|
63
63
|
g2u3we: "fghlq4f",
|
|
64
64
|
h3c5rm: [
|
|
65
65
|
"f1gn591s",
|
|
@@ -70,8 +70,8 @@ const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
70
70
|
"fjscplz",
|
|
71
71
|
"f1gn591s"
|
|
72
72
|
],
|
|
73
|
-
Bi91k9c: "
|
|
74
|
-
Jwef8y: "
|
|
73
|
+
Bi91k9c: "fz46y8r",
|
|
74
|
+
Jwef8y: "f1kjrvvj",
|
|
75
75
|
Bgoe8wy: "fpa59ij",
|
|
76
76
|
Bwzppfd: [
|
|
77
77
|
"f1rhln42",
|
|
@@ -82,8 +82,8 @@ const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
82
82
|
"f1l1ogpg",
|
|
83
83
|
"f1rhln42"
|
|
84
84
|
],
|
|
85
|
-
B2d53fq: "
|
|
86
|
-
iro3zm: "
|
|
85
|
+
B2d53fq: "frlnr8d",
|
|
86
|
+
iro3zm: "fle2s0s",
|
|
87
87
|
b661bw: "f1j8ziw4",
|
|
88
88
|
Bk6r4ia: [
|
|
89
89
|
"f1xzu9i0",
|
|
@@ -99,22 +99,22 @@ const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
99
99
|
d: [
|
|
100
100
|
".fdca5i2 .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(20px);}",
|
|
101
101
|
".fk0rr1z .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(-20px);}",
|
|
102
|
-
".
|
|
103
|
-
".
|
|
102
|
+
".ftywsgz{background-color:var(--colorCompoundBrandBackground);}",
|
|
103
|
+
".fqpbvvt{color:var(--colorNeutralForegroundInverted);}",
|
|
104
104
|
".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
|
|
105
105
|
".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
|
|
106
106
|
".fjscplz{border-left-color:var(--colorTransparentStroke);}",
|
|
107
107
|
".fb073pr{border-bottom-color:var(--colorTransparentStroke);}"
|
|
108
108
|
],
|
|
109
109
|
h: [
|
|
110
|
-
".
|
|
111
|
-
".
|
|
110
|
+
".fz46y8r:hover{color:var(--colorNeutralForegroundInverted);}",
|
|
111
|
+
".f1kjrvvj:hover{background-color:var(--colorCompoundBrandBackgroundHover);}",
|
|
112
112
|
".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}",
|
|
113
113
|
".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}",
|
|
114
114
|
".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}",
|
|
115
115
|
".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}",
|
|
116
|
-
".
|
|
117
|
-
".
|
|
116
|
+
".frlnr8d:hover:active{color:var(--colorNeutralForegroundInverted);}",
|
|
117
|
+
".fle2s0s:hover:active{background-color:var(--colorCompoundBrandBackgroundPressed);}",
|
|
118
118
|
".f1j8ziw4:hover:active{border-top-color:var(--colorTransparentStrokeInteractive);}",
|
|
119
119
|
".f1xzu9i0:hover:active{border-right-color:var(--colorTransparentStrokeInteractive);}",
|
|
120
120
|
".f1jlpvxk:hover:active{border-left-color:var(--colorTransparentStrokeInteractive);}",
|
|
@@ -142,6 +142,7 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
|
|
|
142
142
|
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
|
|
143
143
|
...state,
|
|
144
144
|
components: {
|
|
145
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
145
146
|
...state.components,
|
|
146
147
|
checkmark: 'span',
|
|
147
148
|
submenuIndicator: 'span'
|