@fluentui/react-menu 0.0.0-nightly-20240822-1237.1 → 0.0.0-nightly-20240823-1802.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 +17 -39
- package/dist/index.d.ts +2 -3
- 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 +0 -1
- package/lib/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js +0 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +11 -12
- 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 +0 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js +0 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +25 -26
- 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
package/CHANGELOG.md
CHANGED
|
@@ -1,52 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-menu
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 23 Aug 2024 18:07:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240823-1802.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20240823-1802.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.
|
|
9
|
+
Fri, 23 Aug 2024 18:07:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.12..@fluentui/react-menu_v0.0.0-nightly-20240823-1802.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-portal to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-positioning to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
25
|
-
- Bump @fluentui/react-provider to v0.0.0-nightly-
|
|
26
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
27
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
28
|
-
|
|
29
|
-
## [9.14.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.14)
|
|
30
|
-
|
|
31
|
-
Thu, 15 Aug 2024 13:49:46 GMT
|
|
32
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.13..@fluentui/react-menu_v9.14.14)
|
|
33
|
-
|
|
34
|
-
### Patches
|
|
35
|
-
|
|
36
|
-
- Bump @fluentui/react-aria to v9.13.4 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
37
|
-
- Bump @fluentui/react-portal to v9.4.33 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
38
|
-
- Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
39
|
-
|
|
40
|
-
## [9.14.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.13)
|
|
41
|
-
|
|
42
|
-
Thu, 15 Aug 2024 08:22:11 GMT
|
|
43
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.12..@fluentui/react-menu_v9.14.13)
|
|
44
|
-
|
|
45
|
-
### Patches
|
|
46
|
-
|
|
47
|
-
- Bump @fluentui/react-aria to v9.13.3 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
48
|
-
- Bump @fluentui/react-portal to v9.4.32 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
49
|
-
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
16
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
19
|
+
- Bump @fluentui/react-positioning to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
22
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
23
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
24
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
25
|
+
- Bump @fluentui/react-provider to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
26
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
27
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
50
28
|
|
|
51
29
|
## [9.14.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.12)
|
|
52
30
|
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,6 @@ import { ARIAButtonType } from '@fluentui/react-aria';
|
|
|
6
6
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
7
7
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
8
8
|
import type { ContextSelector } from '@fluentui/react-context-selector';
|
|
9
|
-
import type { ExtractSlotProps } from '@fluentui/react-utilities';
|
|
10
9
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
11
10
|
import type { PortalProps } from '@fluentui/react-portal';
|
|
12
11
|
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
|
@@ -172,7 +171,7 @@ export declare type MenuItemLinkSlots = {
|
|
|
172
171
|
*/
|
|
173
172
|
export declare type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;
|
|
174
173
|
|
|
175
|
-
export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots
|
|
174
|
+
export declare type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> & Pick<Partial<MenuItemSlots>, 'content'> & {
|
|
176
175
|
/**
|
|
177
176
|
* If the menu item is a trigger for a submenu
|
|
178
177
|
*
|
|
@@ -231,7 +230,7 @@ export declare type MenuItemSelectableState = MenuItemSelectableProps & {
|
|
|
231
230
|
};
|
|
232
231
|
|
|
233
232
|
export declare type MenuItemSlots = {
|
|
234
|
-
root: Slot<
|
|
233
|
+
root: Slot<'div'>;
|
|
235
234
|
/**
|
|
236
235
|
* Icon slot rendered before children content
|
|
237
236
|
*/
|
|
@@ -5,17 +5,17 @@ export const menuGroupHeaderClassNames = {
|
|
|
5
5
|
};
|
|
6
6
|
const useStyles = /*#__PURE__*/__styles({
|
|
7
7
|
root: {
|
|
8
|
-
Be2twd7: "
|
|
9
|
-
sj55zd: "
|
|
8
|
+
Be2twd7: "f1xnrmmq",
|
|
9
|
+
sj55zd: "fct541z",
|
|
10
10
|
uwmqm3: ["f177v4lu", "f19lj068"],
|
|
11
11
|
z189sj: ["f19lj068", "f177v4lu"],
|
|
12
|
-
Bhrd7zp: "
|
|
12
|
+
Bhrd7zp: "f1787h39",
|
|
13
13
|
Bqenvij: "f1d2rq10",
|
|
14
14
|
mc9l5x: "f22iagw",
|
|
15
15
|
Bt984gj: "f122n59"
|
|
16
16
|
}
|
|
17
17
|
}, {
|
|
18
|
-
d: [".
|
|
18
|
+
d: [".f1xnrmmq{font-size:var(--1301, var(--1302, var(--fontSizeBase200)));}", ".fct541z{color:var(--1303, var(--1304, var(--colorNeutralForeground3)));}", ".f177v4lu{padding-left:8px;}", ".f19lj068{padding-right:8px;}", ".f1787h39{font-weight:var(--1305, var(--1306, var(--fontWeightSemibold)));}", ".f1d2rq10{height:32px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}"]
|
|
19
19
|
});
|
|
20
20
|
export const useMenuGroupHeaderStyles_unstable = state => {
|
|
21
21
|
'use no memo';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"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
|
|
1
|
+
{"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"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: `var(--1301, var(--1302, ${tokens.fontSizeBase200}))`,\n color: `var(--1303, var(--1304, ${tokens.colorNeutralForeground3}))`,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: `var(--1305, var(--1306, ${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"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState,
|
|
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'>;\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 = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n Pick<Partial<MenuItemSlots>, 'content'> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"rangeMappings":"","mappings":"AAyDA,WAC8E"}
|
|
@@ -15,7 +15,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
|
|
|
15
15
|
*/ export const useMenuItem_unstable = (props, ref)=>{
|
|
16
16
|
const isSubmenuTrigger = useMenuTriggerContext_unstable();
|
|
17
17
|
const persistOnClickContext = useMenuContext_unstable((context)=>context.persistOnItemClick);
|
|
18
|
-
const { disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext
|
|
18
|
+
const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
|
|
19
19
|
const hasIcons = useMenuListContext_unstable((context)=>context.hasIcons);
|
|
20
20
|
const hasCheckmarks = useMenuListContext_unstable((context)=>context.hasCheckmarks);
|
|
21
21
|
const setOpen = useMenuContext_unstable((context)=>context.setOpen);
|
|
@@ -34,9 +34,9 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
|
|
|
34
34
|
content: 'span',
|
|
35
35
|
secondaryContent: 'span'
|
|
36
36
|
},
|
|
37
|
-
root: slot.always(getIntrinsicElementProps(
|
|
37
|
+
root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(as, {
|
|
38
38
|
role: 'menuitem',
|
|
39
|
-
...
|
|
39
|
+
...props,
|
|
40
40
|
disabled: false,
|
|
41
41
|
disabledFocusable: disabled,
|
|
42
42
|
ref: 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 {\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n useARIAButtonProps,\n} 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 { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = 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(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...props,\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":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","setOpen","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC5G,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,8BAA8B,QAAQ,oCAAoC;AACnF,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,UAAU,QACL,wBAAwB;AAC/B,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,SAIEC,kBAAkB,QACb,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAEvD,MAAMC,mBAAmBN,WAAWJ,oBAAoBC;AACxD,MAAMU,kBAAkBP,WAAWF,mBAAmBC;AAEtD;;CAEC,GACD,OAAO,MAAMS,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,mBAAmBhB;IACzB,MAAMiB,wBAAwBV,wBAAwBW,CAAAA,UAAWA,QAAQC,kBAAkB;IAC3F,MAAM,EAAEC,KAAK,KAAK,EAAEC,WAAW,KAAK,EAAEC,aAAaN,gBAAgB,EAAEO,iBAAiBN,qBAAqB,EAAE,GAAGH;IAChH,MAAMU,WAAWlB,4BAA4BY,CAAAA,UAAWA,QAAQM,QAAQ;IACxE,MAAMC,gBAAgBnB,4BAA4BY,CAAAA,UAAWA,QAAQO,aAAa;IAClF,MAAMC,UAAUnB,wBAAwBW,CAAAA,UAAWA,QAAQQ,OAAO;IAElE,MAAM,EAAEC,GAAG,EAAE,GAAG7B;IAChB,MAAM8B,WAAWpC,MAAMqC,MAAM,CAAuC;IACpE,MAAMC,2BAA2BtC,MAAMqC,MAAM,CAAC;IAE9C,MAAME,QAAuB;QAC3BT;QACAD;QACAE;QACAS,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,WAAW;YACXC,kBAAkB;YAClBC,SAAS;YACTC,kBAAkB;QACpB;QACAL,MAAMrC,KAAK2C,MAAM,CACf5C,yBACEyB,IACAZ,mBAAkDY,IAAI;YACpDoB,MAAM;YACN,GAAG1B,KAAK;YACRO,UAAU;YACVoB,mBAAmBpB;YACnBN,KAAKrB,cAAcqB,KAAKa;YACxBc,WAAWjD,iBAAiBkD,CAAAA;oBAC1B7B;iBAAAA,mBAAAA,MAAM4B,SAAS,cAAf5B,uCAAAA,sBAAAA,OAAkB6B;gBAClB,IAAI,CAACA,MAAMC,kBAAkB,MAAOD,CAAAA,MAAME,GAAG,KAAKnC,SAASiC,MAAME,GAAG,KAAKpC,KAAI,GAAI;oBAC/EqB,yBAAyBgB,OAAO,GAAG;gBACrC;YACF;YACAC,cAActD,iBAAiBkD,CAAAA;oBAC7Bf,mBAEAd;iBAFAc,oBAAAA,SAASkB,OAAO,cAAhBlB,wCAAAA,kBAAkBoB,KAAK;iBAEvBlC,sBAAAA,MAAMiC,YAAY,cAAlBjC,0CAAAA,yBAAAA,OAAqB6B;YACvB;YACAM,SAASxD,iBAAiBkD,CAAAA;oBAYxB7B;gBAXA,IAAI,CAACQ,cAAc,CAACC,gBAAgB;oBAClCG,QAAQiB,OAAO;wBACbO,MAAM;wBACNC,UAAUrB,yBAAyBgB,OAAO;wBAC1CM,QAAQ;wBACRC,MAAM;wBACNV;oBACF;oBACAb,yBAAyBgB,OAAO,GAAG;gBACrC;iBAEAhC,iBAAAA,MAAMmC,OAAO,cAAbnC,qCAAAA,oBAAAA,OAAgB6B;YAClB;QACF,KAEF;YAAEW,aAAa;QAAM;QAEvBpB,MAAMtC,KAAK2D,QAAQ,CAACzC,MAAMoB,IAAI,EAAE;YAAEsB,iBAAiBhC;YAAU8B,aAAa;QAAO;QACjFnB,WAAWvC,KAAK2D,QAAQ,CAACzC,MAAMqB,SAAS,EAAE;YAAEqB,iBAAiB/B;YAAe6B,aAAa;QAAO;QAChGlB,kBAAkBxC,KAAK2D,QAAQ,CAACzC,MAAMsB,gBAAgB,EAAE;YACtDoB,iBAAiBlC;YACjBmC,cAAc;gBACZC,UAAU/B,QAAQ,sBAAQ,oBAAChB,wCAAsB,oBAACC;YACpD;YACA0C,aAAa;QACf;QACAjB,SAASzC,KAAK2D,QAAQ,CAACzC,MAAMuB,OAAO,EAAE;YACpCmB,iBAAiB,CAAC,CAAC1C,MAAM4C,QAAQ;YACjCD,cAAc;gBAAEC,UAAU5C,MAAM4C,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACAhB,kBAAkB1C,KAAK2D,QAAQ,CAACzC,MAAMwB,gBAAgB,EAAE;YAAEgB,aAAa;QAAO;IAChF;IACAvD,mBAAmBgC,OAAOH;IAC1B,OAAOG;AACT,EAAE"}
|
|
@@ -11,12 +11,12 @@ export const menuItemClassNames = {
|
|
|
11
11
|
content: 'fui-MenuItem__content',
|
|
12
12
|
secondaryContent: 'fui-MenuItem__secondaryContent'
|
|
13
13
|
};
|
|
14
|
-
const useRootBaseStyles = /*#__PURE__*/__resetStyles("
|
|
15
|
-
r: [".
|
|
16
|
-
s: ["@media (forced-colors: active){.
|
|
14
|
+
const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1flkek8", "r16jqo9h", {
|
|
15
|
+
r: [".r1flkek8{border-radius:var(--1307, var(--1308, var(--borderRadiusMedium)));position:relative;color:var(--1309, var(--1310, var(--colorNeutralForeground2)));background-color:var(--1311, var(--1312, var(--colorNeutralBackground1)));padding-right:var(--1313, var(--1314, var(--spacingVerticalSNudge)));padding-left:var(--1315, var(--1316, var(--spacingVerticalSNudge)));padding-top:var(--1317, var(--1318, var(--spacingVerticalSNudge)));padding-bottom:var(--1319, var(--1320, var(--spacingVerticalSNudge)));box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--1321, var(--1322, var(--fontSizeBase300)));cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r1flkek8:hover{background-color:var(--1323, var(--1324, var(--colorNeutralBackground1Hover)));color:var(--1325, var(--1326, var(--colorNeutralForeground2Hover)));}", ".r1flkek8:hover .fui-Icon-filled{display:inline;}", ".r1flkek8:hover .fui-Icon-regular{display:none;}", ".r1flkek8:hover .fui-MenuItem__icon{color:var(--1327, var(--1328, var(--colorNeutralForeground2BrandSelected)));}", ".r1flkek8:hover:active{background-color:var(--1329, var(--1330, var(--colorNeutralBackground1Pressed)));color:var(--1331, var(--1332, var(--colorNeutralForeground2Pressed)));}", ".r1flkek8:focus{outline-style:none;}", ".r1flkek8:focus-visible{outline-style:none;}", ".r1flkek8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1flkek8[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);}", ".r16jqo9h{border-radius:var(--1307, var(--1308, var(--borderRadiusMedium)));position:relative;color:var(--1309, var(--1310, var(--colorNeutralForeground2)));background-color:var(--1311, var(--1312, var(--colorNeutralBackground1)));padding-left:var(--1313, var(--1314, var(--spacingVerticalSNudge)));padding-right:var(--1315, var(--1316, var(--spacingVerticalSNudge)));padding-top:var(--1317, var(--1318, var(--spacingVerticalSNudge)));padding-bottom:var(--1319, var(--1320, var(--spacingVerticalSNudge)));box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--1321, var(--1322, var(--fontSizeBase300)));cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r16jqo9h:hover{background-color:var(--1323, var(--1324, var(--colorNeutralBackground1Hover)));color:var(--1325, var(--1326, var(--colorNeutralForeground2Hover)));}", ".r16jqo9h:hover .fui-Icon-filled{display:inline;}", ".r16jqo9h:hover .fui-Icon-regular{display:none;}", ".r16jqo9h:hover .fui-MenuItem__icon{color:var(--1327, var(--1328, var(--colorNeutralForeground2BrandSelected)));}", ".r16jqo9h:hover:active{background-color:var(--1329, var(--1330, var(--colorNeutralBackground1Pressed)));color:var(--1331, var(--1332, var(--colorNeutralForeground2Pressed)));}", ".r16jqo9h:focus{outline-style:none;}", ".r16jqo9h:focus-visible{outline-style:none;}", ".r16jqo9h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r16jqo9h[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);}"],
|
|
16
|
+
s: ["@media (forced-colors: active){.r1flkek8:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r1flkek8:focus{outline-style:none;}.r1flkek8:focus-visible{outline-style:none;}.r1flkek8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.r1flkek8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.r1flkek8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}", "@media (forced-colors: active){.r1flkek8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r16jqo9h:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r16jqo9h:focus{outline-style:none;}.r16jqo9h:focus-visible{outline-style:none;}.r16jqo9h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r16jqo9h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r16jqo9h[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}", "@media (forced-colors: active){.r16jqo9h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
|
|
17
17
|
});
|
|
18
18
|
const useContentBaseStyles = /*#__PURE__*/__resetStyles("r1ls86vo", "rpbc5dr", [".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}", ".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}"]);
|
|
19
|
-
const useSecondaryContentBaseStyles = /*#__PURE__*/__resetStyles("
|
|
19
|
+
const useSecondaryContentBaseStyles = /*#__PURE__*/__resetStyles("ru7jybp", "rp6tyji", [".ru7jybp{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--1333, var(--1334, var(--lineHeightBase300)));color:var(--1335, var(--1336, var(--colorNeutralForeground3)));}", ".ru7jybp:hover{color:var(--1337, var(--1338, var(--colorNeutralForeground3Hover)));}", ".ru7jybp:focus{color:var(--1339, var(--1340, var(--colorNeutralForeground3Hover)));}", ".rp6tyji{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--1333, var(--1334, var(--lineHeightBase300)));color:var(--1335, var(--1336, var(--colorNeutralForeground3)));}", ".rp6tyji:hover{color:var(--1337, var(--1338, var(--colorNeutralForeground3Hover)));}", ".rp6tyji:focus{color:var(--1339, var(--1340, var(--colorNeutralForeground3Hover)));}"]);
|
|
20
20
|
const useIconBaseStyles = /*#__PURE__*/__resetStyles("r9c34qo", null, [".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"]);
|
|
21
21
|
const useSubmenuIndicatorBaseStyles = /*#__PURE__*/__resetStyles("r9c34qo", null, [".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"]);
|
|
22
22
|
const useStyles = /*#__PURE__*/__styles({
|
|
@@ -31,21 +31,21 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
31
31
|
Beyfa6y: ["f1deotkl", "f1krrbdw"],
|
|
32
32
|
uwmqm3: ["f1cnd47f", "fhxju0i"],
|
|
33
33
|
Ftih45: "f1wl9k8s",
|
|
34
|
-
Ccq8qp: "
|
|
34
|
+
Ccq8qp: "f1sa9021",
|
|
35
35
|
Baz25je: "f68mna0",
|
|
36
|
-
cmx5o7: "
|
|
36
|
+
cmx5o7: "f14ltx6a"
|
|
37
37
|
},
|
|
38
38
|
disabled: {
|
|
39
|
-
sj55zd: "
|
|
40
|
-
Bi91k9c: "
|
|
41
|
-
Jwef8y: "
|
|
39
|
+
sj55zd: "fpzq6t0",
|
|
40
|
+
Bi91k9c: "f19s7x3y",
|
|
41
|
+
Jwef8y: "f1nw4t48",
|
|
42
42
|
eoavqd: "fphbwmw",
|
|
43
43
|
Bk3fhr4: "f19vpps7",
|
|
44
44
|
Bmfj8id: "fv5swzo",
|
|
45
|
-
Bg7n49j: "
|
|
46
|
-
B2d53fq: "
|
|
47
|
-
iro3zm: "
|
|
48
|
-
t0hwav: "
|
|
45
|
+
Bg7n49j: "f1dpie7v",
|
|
46
|
+
B2d53fq: "f2gmxn8",
|
|
47
|
+
iro3zm: "faggc2",
|
|
48
|
+
t0hwav: "f13jpomk",
|
|
49
49
|
Bbusuzp: "f1dcs8yz",
|
|
50
50
|
ze5xyy: "f1kc2mi9",
|
|
51
51
|
Bqrx1nm: "fkavljg",
|
|
@@ -55,9 +55,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
55
55
|
Bh953qp: "f10l1t5h"
|
|
56
56
|
}
|
|
57
57
|
}, {
|
|
58
|
-
d: [".fmnzpld{margin-top:2px;}", ".fqerorx{flex-grow:1;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1wl9k8s::before{content:\"\";}", ".
|
|
59
|
-
h: [".
|
|
60
|
-
f: [".
|
|
58
|
+
d: [".fmnzpld{margin-top:2px;}", ".fqerorx{flex-grow:1;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1wl9k8s::before{content:\"\";}", ".f1sa9021::before{width:var(--1341, var(--1342, var(--strokeWidthThin)));}", ".f68mna0::before{height:24px;}", ".f14ltx6a::before{background-color:var(--1343, var(--1344, var(--colorNeutralStroke1)));}", ".fpzq6t0{color:var(--1345, var(--1346, var(--colorNeutralForegroundDisabled)));}"],
|
|
59
|
+
h: [".f19s7x3y:hover{color:var(--1347, var(--1348, var(--colorNeutralForegroundDisabled)));}", ".f1nw4t48:hover{background-color:var(--1349, var(--1350, var(--colorNeutralBackground1)));}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1dpie7v:hover .fui-MenuItem__icon{color:var(--1351, var(--1352, var(--colorNeutralForegroundDisabled)));}", ".f2gmxn8:hover:active{color:var(--1353, var(--1354, var(--colorNeutralForegroundDisabled)));}", ".faggc2:hover:active{background-color:var(--1355, var(--1356, var(--colorNeutralBackground1)));}"],
|
|
60
|
+
f: [".f13jpomk:focus{color:var(--1357, var(--1358, var(--colorNeutralForegroundDisabled)));}"],
|
|
61
61
|
m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
|
|
62
62
|
m: "(forced-colors: active)"
|
|
63
63
|
}], ["@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","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","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className"],"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"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","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","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className"],"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"],"mappings":"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","ignoreList":[]}
|
|
@@ -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
|
|
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":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnG,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,KAAKU,MAAM,CACfX,yBAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}
|
|
@@ -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
|
|
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":["React","slot","useMenuItemCheckbox_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","baseState","switchIndicator","optional","renderByDefault","elementType","defaultProps","children","className","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,YAAYN,6BAA6BI,OAAOC;IACtD,OAAO;QACL,GAAGC,SAAS;QACZC,iBAAiBR,KAAKS,QAAQ,CAACJ,MAAMG,eAAe,EAAE;YACpDE,iBAAiB;YACjBC,aAAa;YACbC,cAAc;gBACZC,wBAAU,oBAACX;oBAAaY,WAAWX;;YACrC;QACF;QACAY,YAAY;YACV,GAAGR,UAAUQ,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}
|
|
@@ -14,35 +14,35 @@ const spaceBetweenThumbAndTrack = 2;
|
|
|
14
14
|
const trackHeight = 20;
|
|
15
15
|
const trackWidth = 40;
|
|
16
16
|
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
|
17
|
-
const useSwitchIndicatorBaseClassName = /*#__PURE__*/__resetStyles("
|
|
18
|
-
r: [".
|
|
19
|
-
s: ["@media screen and (prefers-reduced-motion: reduce){.
|
|
17
|
+
const useSwitchIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1acc4xw", "r1w2iyxf", {
|
|
18
|
+
r: [".r1acc4xw{border-radius:var(--1359, var(--1360, 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(--1361, var(--1362, var(--durationNormal)));transition-timing-function:var(--1363, var(--1364, var(--curveEasyEase)));transition-property:background,border,color;width:40px;margin-right:var(--1365, var(--1366, var(--spacingHorizontalXS)));color:var(--1367, var(--1368, var(--colorNeutralStrokeAccessible)));}", ".r1acc4xw:hover{color:var(--1369, var(--1370, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--1371, var(--1372, var(--colorNeutralStrokeAccessibleHover)));}", ".r1acc4xw:hover:active{color:var(--1373, var(--1374, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--1375, var(--1376, var(--colorNeutralStrokeAccessiblePressed)));}", ".r1acc4xw .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--1377, var(--1378, var(--durationNormal)));transition-timing-function:var(--1379, var(--1380, var(--curveEasyEase)));transition-property:transform;}", ".r1w2iyxf{border-radius:var(--1359, var(--1360, 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(--1361, var(--1362, var(--durationNormal)));transition-timing-function:var(--1363, var(--1364, var(--curveEasyEase)));transition-property:background,border,color;width:40px;margin-left:var(--1365, var(--1366, var(--spacingHorizontalXS)));color:var(--1367, var(--1368, var(--colorNeutralStrokeAccessible)));}", ".r1w2iyxf:hover{color:var(--1369, var(--1370, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--1371, var(--1372, var(--colorNeutralStrokeAccessibleHover)));}", ".r1w2iyxf:hover:active{color:var(--1373, var(--1374, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--1375, var(--1376, var(--colorNeutralStrokeAccessiblePressed)));}", ".r1w2iyxf .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--1377, var(--1378, var(--durationNormal)));transition-timing-function:var(--1379, var(--1380, var(--curveEasyEase)));transition-property:transform;}"],
|
|
19
|
+
s: ["@media screen and (prefers-reduced-motion: reduce){.r1acc4xw{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1acc4xw .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1w2iyxf{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1w2iyxf .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}"]
|
|
20
20
|
});
|
|
21
21
|
const useSwitchIndicatorStyles = /*#__PURE__*/__styles({
|
|
22
22
|
checked: {
|
|
23
23
|
G4r02d: ["fdca5i2", "fk0rr1z"],
|
|
24
|
-
De3pzq: "
|
|
25
|
-
sj55zd: "
|
|
24
|
+
De3pzq: "f1eczkbk",
|
|
25
|
+
sj55zd: "f48jobs",
|
|
26
26
|
g2u3we: "fghlq4f",
|
|
27
27
|
h3c5rm: ["f1gn591s", "fjscplz"],
|
|
28
28
|
B9xav0g: "fb073pr",
|
|
29
29
|
zhjwy3: ["fjscplz", "f1gn591s"],
|
|
30
|
-
Bi91k9c: "
|
|
31
|
-
Jwef8y: "
|
|
30
|
+
Bi91k9c: "f16oppfk",
|
|
31
|
+
Jwef8y: "f1sb3j8z",
|
|
32
32
|
Bgoe8wy: "fpa59ij",
|
|
33
33
|
Bwzppfd: ["f1rhln42", "f1l1ogpg"],
|
|
34
34
|
oetu4i: "fz67qlh",
|
|
35
35
|
gg5e9n: ["f1l1ogpg", "f1rhln42"],
|
|
36
|
-
B2d53fq: "
|
|
37
|
-
iro3zm: "
|
|
36
|
+
B2d53fq: "f1a3u1qo",
|
|
37
|
+
iro3zm: "fkjkmlx",
|
|
38
38
|
b661bw: "f1j8ziw4",
|
|
39
39
|
Bk6r4ia: ["f1xzu9i0", "f1jlpvxk"],
|
|
40
40
|
B9zn80p: "f1i1ccxp",
|
|
41
41
|
Bpld233: ["f1jlpvxk", "f1xzu9i0"]
|
|
42
42
|
}
|
|
43
43
|
}, {
|
|
44
|
-
d: [".fdca5i2 .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(20px);}", ".fk0rr1z .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(-20px);}", ".
|
|
45
|
-
h: [".
|
|
44
|
+
d: [".fdca5i2 .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(20px);}", ".fk0rr1z .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(-20px);}", ".f1eczkbk{background-color:var(--1381, var(--1382, var(--colorCompoundBrandBackground)));}", ".f48jobs{color:var(--1383, var(--1384, var(--colorNeutralForegroundInverted)));}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}"],
|
|
45
|
+
h: [".f16oppfk:hover{color:var(--1385, var(--1386, var(--colorNeutralForegroundInverted)));}", ".f1sb3j8z:hover{background-color:var(--1387, var(--1388, var(--colorCompoundBrandBackgroundHover)));}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1a3u1qo:hover:active{color:var(--1389, var(--1390, var(--colorNeutralForegroundInverted)));}", ".fkjkmlx:hover:active{background-color:var(--1391, var(--1392, var(--colorCompoundBrandBackgroundPressed)));}", ".f1j8ziw4:hover:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1xzu9i0:hover:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1jlpvxk:hover:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1i1ccxp:hover:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}"]
|
|
46
46
|
});
|
|
47
47
|
/**
|
|
48
48
|
* Apply styling to the MenuItemSwitch slots based on the state
|
|
@@ -71,7 +71,6 @@ export const useMenuItemSwitchStyles_unstable = state => {
|
|
|
71
71
|
useMenuItemStyles_unstable({
|
|
72
72
|
...state,
|
|
73
73
|
components: {
|
|
74
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
75
74
|
...state.components,
|
|
76
75
|
checkmark: 'span',
|
|
77
76
|
submenuIndicator: 'span'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMenuItemSwitchStyles_unstable","state","switchIndicatorStyles","switchIndicatorBaseStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular
|
|
1
|
+
{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMenuItemSwitchStyles_unstable","state","switchIndicatorStyles","switchIndicatorBaseStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: `var(--1359, var(--1360, ${tokens.borderRadiusCircular}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: `var(--1361, var(--1362, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1363, var(--1364, ${tokens.curveEasyEase}))`,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: `var(--1365, var(--1366, ${tokens.spacingHorizontalXS}))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: `var(--1367, var(--1368, ${tokens.colorNeutralStrokeAccessible}))`,\n ':hover': {\n color: `var(--1369, var(--1370, ${tokens.colorNeutralStrokeAccessibleHover}))`,\n borderColor: `var(--1371, var(--1372, ${tokens.colorNeutralStrokeAccessibleHover}))`\n },\n ':hover:active': {\n color: `var(--1373, var(--1374, ${tokens.colorNeutralStrokeAccessiblePressed}))`,\n borderColor: `var(--1375, var(--1376, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: `var(--1377, var(--1378, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1379, var(--1380, ${tokens.curveEasyEase}))`,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: `var(--1381, var(--1382, ${tokens.colorCompoundBrandBackground}))`,\n color: `var(--1383, var(--1384, ${tokens.colorNeutralForegroundInverted}))`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: `var(--1385, var(--1386, ${tokens.colorNeutralForegroundInverted}))`,\n backgroundColor: `var(--1387, var(--1388, ${tokens.colorCompoundBrandBackgroundHover}))`,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: `var(--1389, var(--1390, ${tokens.colorNeutralForegroundInverted}))`,\n backgroundColor: `var(--1391, var(--1392, ${tokens.colorCompoundBrandBackgroundPressed}))`,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked } = state;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,9 +10,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
10
10
|
Bbmb7ep: 0,
|
|
11
11
|
Btl43ni: 0,
|
|
12
12
|
B7oj6ja: 0,
|
|
13
|
-
Dimara: "
|
|
14
|
-
De3pzq: "
|
|
15
|
-
sj55zd: "
|
|
13
|
+
Dimara: "f1spenlm",
|
|
14
|
+
De3pzq: "fd1f8cp",
|
|
15
|
+
sj55zd: "fudzgy5",
|
|
16
16
|
B7ck84d: "f1ewtqcl",
|
|
17
17
|
Bf4jedk: "fl8fusi",
|
|
18
18
|
B2u0y6b: "f1kaai3v",
|
|
@@ -62,9 +62,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
62
62
|
Bvtglag: "fjp4h9y"
|
|
63
63
|
}
|
|
64
64
|
}, {
|
|
65
|
-
d: [[".
|
|
65
|
+
d: [[".f1spenlm{border-radius:var(--1393, var(--1394, var(--borderRadiusMedium)));}", {
|
|
66
66
|
p: -1
|
|
67
|
-
}], ".
|
|
67
|
+
}], ".fd1f8cp{background-color:var(--1395, var(--1396, var(--colorNeutralBackground1)));}", ".fudzgy5{color:var(--1397, var(--1398, var(--colorNeutralForeground1)));}", ".f1ewtqcl{box-sizing:border-box;}", ".fl8fusi{min-width:138px;}", ".f1kaai3v{max-width:300px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1ahpp82{width:max-content;}", ".f1hg901r{box-shadow:var(--shadow16);}", [".fd3pd8h{padding:4px;}", {
|
|
68
68
|
p: -1
|
|
69
69
|
}], [".f9ggezi{border:1px solid var(--colorTransparentStroke);}", {
|
|
70
70
|
p: -2
|