@fluentui/react-menu 0.0.0-nightly442708a36520211209.1 → 0.0.0-nightly49d3df438d20220225.1

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -5,16 +5,18 @@ import { Portal } from '@fluentui/react-portal';
  * Render the final JSX of MenuPopover
  */
 
-export const renderMenuPopover = state => {
+export const renderMenuPopover_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
 
   if (state.inline) {
-    return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root));
+    return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+    });
   }
 
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root)));
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }));
 };
 //# sourceMappingURL=renderMenuPopover.js.map

package/lib/components/MenuPopover/renderMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuPopover/renderMenuPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AAEA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,wBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD;;AAED,sBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,CADF;AAKD,CAZM","sourceRoot":""}
+{"version":3,"sources":["components/MenuPopover/renderMenuPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AAEA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,wBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,KAAX,CAAP;AACD;;AAED,sBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADF,CADF;AAKD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuPopover/useMenuPopover.d.ts

@@ -3,10 +3,10 @@ import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 /**
  * Create the state required to render MenuPopover.
  *
- * The returned state can be modified with hooks such as useMenuPopoverStyles,
- * before being passed to renderMenuPopover.
+ * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
+ * before being passed to renderMenuPopover_unstable.
  *
  * @param props - props from this instance of MenuPopover
  * @param ref - reference to root HTMLElement of MenuPopover
  */
-export declare const useMenuPopover: (props: MenuPopoverProps, ref: React.Ref<HTMLElement>) => MenuPopoverState;
+export declare const useMenuPopover_unstable: (props: MenuPopoverProps, ref: React.Ref<HTMLElement>) => MenuPopoverState;

package/lib/components/MenuPopover/useMenuPopover.js

@@ -1,26 +1,26 @@
 import * as React from 'react';
 import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
 import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { useMenuContext } from '../../contexts/menuContext';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { dispatchMenuEnterEvent } from '../../utils/index';
 import { useFluent } from '@fluentui/react-shared-contexts';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
 /**
  * Create the state required to render MenuPopover.
  *
- * The returned state can be modified with hooks such as useMenuPopoverStyles,
- * before being passed to renderMenuPopover.
+ * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
+ * before being passed to renderMenuPopover_unstable.
  *
  * @param props - props from this instance of MenuPopover
  * @param ref - reference to root HTMLElement of MenuPopover
  */
 
-export const useMenuPopover = (props, ref) => {
+export const useMenuPopover_unstable = (props, ref) => {
   var _a;
 
-  const popoverRef = useMenuContext(context => context.menuPopoverRef);
-  const setOpen = useMenuContext(context => context.setOpen);
-  const openOnHover = useMenuContext(context => context.openOnHover);
+  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);
+  const setOpen = useMenuContext_unstable(context => context.setOpen);
+  const openOnHover = useMenuContext_unstable(context => context.openOnHover);
   const isSubmenu = useIsSubmenu();
   const canDispatchCustomEventRef = React.useRef(true);
   const throttleDispatchTimerRef = React.useRef(0);
@@ -49,7 +49,7 @@ export const useMenuPopover = (props, ref) => {
   React.useEffect(() => {
     () => clearTimeout(throttleDispatchTimerRef.current);
   }, []);
-  const inline = (_a = useMenuContext(context => context.inline)) !== null && _a !== void 0 ? _a : false;
+  const inline = (_a = useMenuContext_unstable(context => context.inline)) !== null && _a !== void 0 ? _a : false;
   const rootProps = getNativeElementProps('div', {
     role: 'presentation',
     ...props,
@@ -95,6 +95,9 @@ export const useMenuPopover = (props, ref) => {
   });
   return {
     inline,
+    components: {
+      root: 'div'
+    },
     root: rootProps
   };
 };

package/lib/components/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    onMouseEnterOriginal?.(e);\n  });\n\n  rootProps.onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    const key = e.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (popoverRef.current?.contains(e.target as HTMLElement)) {\n        setOpen(e, { open: false, keyboard: true });\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(e, { open: false, keyboard: true });\n      e.preventDefault();\n    }\n\n    onKeyDownOriginal?.(e);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuPopover/useMenuPopoverStyles.d.ts

@@ -3,4 +3,4 @@ export declare const menuPopoverClassName = "fui-MenuPopover";
 /**
  * Apply styling to the Menu slots based on the state
  */
-export declare const useMenuPopoverStyles: (state: MenuPopoverState) => MenuPopoverState;
+export declare const useMenuPopoverStyles_unstable: (state: MenuPopoverState) => MenuPopoverState;

package/lib/components/MenuPopover/useMenuPopoverStyles.js

@@ -1,4 +1,5 @@
-import { shorthands, mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const menuPopoverClassName = 'fui-MenuPopover';
 
 const useStyles = /*#__PURE__*/__styles({
@@ -37,7 +38,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useMenuPopoverStyles = state => {
+export const useMenuPopoverStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);
   return state;

package/lib/components/MenuPopover/useMenuPopoverStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,6BAArD;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAaA;;AAEG;;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA8C;AAChF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAaA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuPopoverState } from './MenuPopover.types';\n\nexport const menuPopoverClassName = 'fui-MenuPopover';\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.padding('4px'),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuSplitGroup/MenuSplitGroup.d.ts

@@ -0,0 +1,6 @@
+import type { MenuSplitGroupProps } from './MenuSplitGroup.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
+ */
+export declare const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;

package/lib/components/MenuSplitGroup/MenuSplitGroup.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
+import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
+import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';
+/**
+ * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
+ */
+
+export const MenuSplitGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useMenuSplitGroup_unstable(props, ref);
+  useMenuSplitGroupStyles_unstable(state);
+  return renderMenuSplitGroup_unstable(state);
+});
+MenuSplitGroup.displayName = 'MenuSplitGroup';
+//# sourceMappingURL=MenuSplitGroup.js.map

package/lib/components/MenuSplitGroup/MenuSplitGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuSplitGroup/MenuSplitGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AACA,SAAO,6BAA6B,CAAC,KAAD,CAApC;AACD,CALuE,CAAjE;AAOP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"sourceRoot":"../src/"}

package/lib/components/MenuSplitGroup/MenuSplitGroup.types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type MenuSplitGroupSlots = {
+    root: Slot<'div'>;
+};
+declare type MenuSplitGroupCommons = {};
+/**
+ * MenuSplitGroup Props
+ */
+export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+/**
+ * State used in rendering MenuSplitGroup
+ */
+export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+export {};

package/lib/components/MenuSplitGroup/MenuSplitGroup.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MenuSplitGroup.types.js.map

package/lib/components/MenuSplitGroup/MenuSplitGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSplitGroup.types.js","sourceRoot":"../src/","sources":["components/MenuSplitGroup/MenuSplitGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\ntype MenuSplitGroupCommons = {};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots> & MenuSplitGroupCommons;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & MenuSplitGroupCommons;\n"]}

package/lib/components/MenuSplitGroup/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MenuSplitGroup';
+export * from './MenuSplitGroup.types';
+export * from './renderMenuSplitGroup';
+export * from './useMenuSplitGroup';
+export * from './useMenuSplitGroupStyles';

package/lib/components/MenuSplitGroup/index.js

@@ -0,0 +1,6 @@
+export * from './MenuSplitGroup';
+export * from './MenuSplitGroup.types';
+export * from './renderMenuSplitGroup';
+export * from './useMenuSplitGroup';
+export * from './useMenuSplitGroupStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/MenuSplitGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuSplitGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './MenuSplitGroup';\nexport * from './MenuSplitGroup.types';\nexport * from './renderMenuSplitGroup';\nexport * from './useMenuSplitGroup';\nexport * from './useMenuSplitGroupStyles';\n"]}

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.d.ts

@@ -0,0 +1,5 @@
+import type { MenuSplitGroupState } from './MenuSplitGroup.types';
+/**
+ * Render the final JSX of MenuSplitGroup
+ */
+export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState) => JSX.Element;

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of MenuSplitGroup
+ */
+
+export const renderMenuSplitGroup_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
+};
+//# sourceMappingURL=renderMenuSplitGroup.js.map

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots } from './MenuSplitGroup.types';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState) => {\n  const { slots, slotProps } = getSlots<MenuSplitGroupSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuSplitGroup/useMenuSplitGroup.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';
+/**
+ * Create the state required to render MenuSplitGroup.
+ *
+ * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,
+ * before being passed to renderMenuSplitGroup_unstable.
+ *
+ * @param props - props from this instance of MenuSplitGroup
+ * @param ref - reference to root HTMLElement of MenuSplitGroup
+ */
+export declare const useMenuSplitGroup_unstable: (props: MenuSplitGroupProps, ref: React.Ref<HTMLElement>) => MenuSplitGroupState;

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
+/**
+ * Create the state required to render MenuSplitGroup.
+ *
+ * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,
+ * before being passed to renderMenuSplitGroup_unstable.
+ *
+ * @param props - props from this instance of MenuSplitGroup
+ * @param ref - reference to root HTMLElement of MenuSplitGroup
+ */
+
+export const useMenuSplitGroup_unstable = (props, ref) => {
+  const innerRef = React.useRef();
+  const {
+    dir,
+    targetDocument
+  } = useFluent();
+  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);
+  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);
+  const {
+    findNextFocusable,
+    findPrevFocusable
+  } = useFocusFinders();
+  const onKeyDown = React.useCallback(e => {
+    var _a;
+
+    const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+
+    if (!activeElement) {
+      return;
+    }
+
+    if (!((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+      return;
+    }
+
+    if (e.key === nextArrowKey) {
+      const next = findNextFocusable(activeElement, {
+        container: innerRef.current
+      });
+      next === null || next === void 0 ? void 0 : next.focus();
+    }
+
+    if (e.key === prevArrowKey) {
+      const prev = findPrevFocusable(activeElement, {
+        container: innerRef.current
+      });
+      prev === null || prev === void 0 ? void 0 : prev.focus();
+    }
+  }, [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey]);
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      role: 'group',
+      ref: useMergedRefs(ref, innerRef),
+      onKeyDown,
+      ...props
+    })
+  };
+};
+//# sourceMappingURL=useMenuSplitGroup.js.map

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,aAAhC,EAA+C,aAA/C,QAAoE,2BAApE;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,SAAT,QAA0B,iCAA1B;AAEA,SAAS,UAAT,EAAqB,SAArB,QAAsC,yBAAtC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;AACA,QAAM;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,MAA0B,SAAS,EAAzC;AAEA,QAAM,YAAY,GAAG,aAAa,CAAC,UAAD,EAAa,GAAb,CAAlC;AACA,QAAM,YAAY,GAAG,aAAa,CAAC,SAAD,EAAY,GAAZ,CAAlC;AAEA,QAAM;AAAE,IAAA,iBAAF;AAAqB,IAAA;AAArB,MAA2C,eAAe,EAAhE;AAEA,QAAM,SAAS,GAAG,KAAK,CAAC,WAAN,CACf,CAAD,IAAwC;;;AACtC,UAAM,aAAa,GAAG,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAAtC;;AACA,QAAI,CAAC,aAAL,EAAoB;AAClB;AACD;;AAED,QAAI,EAAC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,QAAF,CAAW,aAAX,CAAjB,CAAJ,EAAgD;AAC9C;AACD;;AAED,QAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;AAC1B,YAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;AAAE,QAAA,SAAS,EAAE,QAAQ,CAAC;AAAtB,OAA/B,CAA9B;AACA,MAAA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;AACD;;AAED,QAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;AAC1B,YAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;AAAE,QAAA,SAAS,EAAE,QAAQ,CAAC;AAAtB,OAA/B,CAA9B;AACA,MAAA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;AACD;AACF,GApBe,EAqBhB,CAAC,iBAAD,EAAoB,iBAApB,EAAuC,cAAvC,EAAuD,YAAvD,EAAqE,YAArE,CArBgB,CAAlB;AAwBA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,IAAI,EAAE,OAD2B;AAEjC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,QAAN,CAFe;AAGjC,MAAA,SAHiC;AAIjC,SAAG;AAJ8B,KAAR;AAJtB,GAAP;AAWD,CA/CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n  props: MenuSplitGroupProps,\n  ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n  const innerRef = React.useRef<HTMLElement>();\n  const { dir, targetDocument } = useFluent();\n\n  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const activeElement = targetDocument?.activeElement;\n      if (!activeElement) {\n        return;\n      }\n\n      if (!innerRef.current?.contains(activeElement)) {\n        return;\n      }\n\n      if (e.key === nextArrowKey) {\n        const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        next?.focus();\n      }\n\n      if (e.key === prevArrowKey) {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    },\n    [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      role: 'group',\n      ref: useMergedRefs(ref, innerRef),\n      onKeyDown,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.d.ts

@@ -0,0 +1,6 @@
+import type { MenuSplitGroupState } from './MenuSplitGroup.types';
+export declare const menuSplitGroupClassName = "fui-MenuSplitGroup";
+/**
+ * Apply styling to the MenuSplitGroup slots based on the state
+ */
+export declare const useMenuSplitGroupStyles_unstable: (state: MenuSplitGroupState) => MenuSplitGroupState;

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js

@@ -0,0 +1,35 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { menuItemClassName } from '../MenuItem/useMenuItemStyles';
+export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "u7v6m2": "f168awwq",
+    "Bo1wru1": ["f1om2jlk", "fcyhg04"],
+    "Bhkyaub": ["fgqgg70", "fqo1hry"],
+    "J9ixe0": ["fh1zedf", "f1auaj6e"],
+    "rj29m3": ["fokbbcd", "f1xlvh9o"],
+    "lispf9": "f1et5qag",
+    "B9hwub1": "f13ngu1f",
+    "dvf9w6": "f1db9j62",
+    "Hjn5ok": "f92z21p"
+  }
+}, {
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f168awwq>.fui-MenuItem:nth-child(1){width:100%;}", ".f1om2jlk>.fui-MenuItem:nth-child(2){border-top-left-radius:0;}", ".fcyhg04>.fui-MenuItem:nth-child(2){border-top-right-radius:0;}", ".fgqgg70>.fui-MenuItem:nth-child(2){border-bottom-left-radius:0;}", ".fqo1hry>.fui-MenuItem:nth-child(2){border-bottom-right-radius:0;}", ".fh1zedf>.fui-MenuItem:nth-child(2){padding-left:0;}", ".f1auaj6e>.fui-MenuItem:nth-child(2){padding-right:0;}", ".fokbbcd>.fui-MenuItem:nth-child(2){margin-left:auto;}", ".f1xlvh9o>.fui-MenuItem:nth-child(2){margin-right:auto;}", ".f1et5qag>.fui-MenuItem:nth-child(2):before{content:\"\";}", ".f13ngu1f>.fui-MenuItem:nth-child(2):before{width:var(--strokeWidthThin);}", ".f1db9j62>.fui-MenuItem:nth-child(2):before{height:24px;}", ".f92z21p>.fui-MenuItem:nth-child(2):before{background-color:var(--colorNeutralStroke1);}"]
+});
+/**
+ * Apply styling to the MenuSplitGroup slots based on the state
+ */
+
+
+export const useMenuSplitGroupStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useMenuSplitGroupStyles.js.map

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,iBAAT,QAAkC,+BAAlC;AAGA,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAD,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassName } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const menuSplitGroupClassName = 'fui-MenuSplitGroup';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    [`& > .${menuItemClassName}:nth-child(1)`]: {\n      width: '100%',\n    },\n    [`& > .${menuItemClassName}:nth-child(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      marginLeft: 'auto',\n      ':before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '24px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuTrigger/MenuTrigger.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { MenuTriggerProps } from './MenuTrigger.types';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
  */
-export declare const MenuTrigger: React.FC<MenuTriggerProps>;
+export declare const MenuTrigger: React.FC<MenuTriggerProps> & FluentTriggerComponent;

package/lib/components/MenuTrigger/MenuTrigger.js

@@ -1,13 +1,14 @@
-import { useMenuTrigger } from './useMenuTrigger';
-import { renderMenuTrigger } from './renderMenuTrigger';
+import { useMenuTrigger_unstable } from './useMenuTrigger';
+import { renderMenuTrigger_unstable } from './renderMenuTrigger';
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
  */
 
 export const MenuTrigger = props => {
-  const state = useMenuTrigger(props);
-  return renderMenuTrigger(state);
+  const state = useMenuTrigger_unstable(props);
+  return renderMenuTrigger_unstable(state);
 };
 MenuTrigger.displayName = 'MenuTrigger';
+MenuTrigger.isFluentTriggerComponent = true;
 //# sourceMappingURL=MenuTrigger.js.map

package/lib/components/MenuTrigger/MenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AAGA;;;AAGG;;AACH,OAAO,MAAM,WAAW,GAA+B,KAAK,IAAG;AAC7D,QAAM,KAAK,GAAG,cAAc,CAAC,KAAD,CAA5B;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CAJM;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"sources":["components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,GAAwD,KAAK,IAAG;AACtF,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,CAArC;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CAJM;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B;AACA,WAAW,CAAC,wBAAZ,GAAuC,IAAvC","sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> & FluentTriggerComponent = props => {\n  const state = useMenuTrigger_unstable(props);\n\n  return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\nMenuTrigger.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}

package/lib/components/MenuTrigger/MenuTrigger.types.d.ts

@@ -5,13 +5,16 @@ export declare type MenuTriggerProps = {
      */
     children: (React.ReactElement & {
         ref?: React.Ref<unknown>;
-    }) | ((props: MenuTriggerChildProps) => React.ReactNode);
+    }) | ((props: MenuTriggerChildProps) => React.ReactElement | null);
 };
 /**
  * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu
  */
-export declare type MenuTriggerChildProps = Required<Pick<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'id'>> & {
+export declare type MenuTriggerChildProps = Required<Pick<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'id'>> & {
     ref?: React.Ref<never>;
     'aria-expanded': boolean | undefined;
 };
-export declare type MenuTriggerState = MenuTriggerProps;
+export declare type MenuTriggerState = {
+    children: React.ReactElement | null;
+    isSubmenu: boolean;
+};

package/lib/components/MenuTrigger/MenuTrigger.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"","sources":["../../../src/components/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type MenuTriggerProps = {\n  /**\n   * Explicitly require single child or render function\n   */\n  children:\n    | (React.ReactElement & { ref?: React.Ref<unknown> })\n    | ((props: MenuTriggerChildProps) => React.ReactElement | null);\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps = Required<\n  Pick<\n    React.HTMLAttributes<HTMLElement>,\n    'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'id'\n  >\n> & {\n  ref?: React.Ref<never>;\n  // aria-expanded should only be present when the menu when it is not a submenu\n  'aria-expanded': boolean | undefined;\n};\n\nexport type MenuTriggerState = {\n  children: React.ReactElement | null;\n  isSubmenu: boolean;\n};\n"]}

package/lib/components/MenuTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuTrigger/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuTrigger/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './MenuTrigger';\nexport * from './MenuTrigger.types';\nexport * from './renderMenuTrigger';\nexport * from './useMenuTrigger';\n"]}

package/lib/components/MenuTrigger/renderMenuTrigger.d.ts

@@ -4,4 +4,4 @@ import type { MenuTriggerState } from './MenuTrigger.types';
  *
  * Only renders children
  */
-export declare const renderMenuTrigger: (state: MenuTriggerState) => JSX.Element;
+export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JSX.Element;

package/lib/components/MenuTrigger/renderMenuTrigger.js

@@ -6,9 +6,9 @@ import { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';
  * Only renders children
  */
 
-export const renderMenuTrigger = state => {
+export const renderMenuTrigger_unstable = state => {
   return /*#__PURE__*/React.createElement(MenuTriggerContextProvider, {
-    value: true
+    value: state.isSubmenu
   }, state.children);
 };
 //# sourceMappingURL=renderMenuTrigger.js.map

package/lib/components/MenuTrigger/renderMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,mCAA3C;AAGA;;;;AAIG;;AACH,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,sBAAO,KAAA,CAAA,aAAA,CAAC,0BAAD,EAA2B;AAAC,IAAA,KAAK,EAAE;AAAR,GAA3B,EAA0C,KAAK,CAAC,QAAhD,CAAP;AACD,CAFM","sourceRoot":""}
+{"version":3,"sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,mCAA3C;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,sBAAO,KAAA,CAAA,aAAA,CAAC,0BAAD,EAA2B;AAAC,IAAA,KAAK,EAAE,KAAK,CAAC;AAAd,GAA3B,EAAqD,KAAK,CAAC,QAA3D,CAAP;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={state.isSubmenu}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuTrigger/useMenuTrigger.d.ts

@@ -1,8 +1,8 @@
-import type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 /**
  * Create the state required to render MenuTrigger.
  * Clones the only child component and adds necessary event handling behaviours to open a popup menu
  *
  * @param props - props from this instance of MenuTrigger
  */
-export declare const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;
+export declare const useMenuTrigger_unstable: (props: MenuTriggerProps) => MenuTriggerState;