@fluentui/react-menu 9.0.0-alpha.77 → 9.0.0-alpha.80

package/CHANGELOG.json

@@ -2,7 +2,122 @@
   "name": "@fluentui/react-menu",
   "entries": [
     {
-      "date": "Thu, 16 Sep 2021 07:35:43 GMT",
+      "date": "Tue, 21 Sep 2021 07:40:35 GMT",
+      "tag": "@fluentui/react-menu_v9.0.0-alpha.80",
+      "version": "9.0.0-alpha.80",
+      "comments": {
+        "none": [
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "comment": "Remove unnecessary docCategory tags",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "comment": "Updating to types over interfaces",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.69",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.0.0-alpha.51",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-positioning to v9.0.0-alpha.57",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.80",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-alpha.63",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-alpha.51",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.44",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.13",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 20 Sep 2021 07:36:26 GMT",
+      "tag": "@fluentui/react-menu_v9.0.0-alpha.79",
+      "version": "9.0.0-alpha.79",
+      "comments": {
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-menu",
+            "comment": "chore: use  versioon eslint-plugin and react-conformance in dev dependencies",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-menu",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6",
+            "comment": "Bump @fluentui/react-menu to v9.0.0-alpha.79"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 17 Sep 2021 07:35:26 GMT",
+      "tag": "@fluentui/react-menu_v9.0.0-alpha.78",
+      "version": "9.0.0-alpha.78",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "comment": "Menu: Making MenuTrigger accept function components which customize where props go as children.",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575",
+            "comment": "Bump @fluentui/react-menu to v9.0.0-alpha.78"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Sep 2021 07:38:39 GMT",
       "tag": "@fluentui/react-menu_v9.0.0-alpha.77",
       "version": "9.0.0-alpha.77",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,48 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Thu, 16 Sep 2021 07:35:43 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Sep 2021 07:40:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.80](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-alpha.80)
+
+Tue, 21 Sep 2021 07:40:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-alpha.79..@fluentui/react-menu_v9.0.0-alpha.80)
+
+### Changes
+
+- Updating to types over interfaces ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by gcox@microsoft.com)
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.69 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+- Bump @fluentui/react-portal to v9.0.0-alpha.51 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+- Bump @fluentui/react-positioning to v9.0.0-alpha.57 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+- Bump @fluentui/react-provider to v9.0.0-alpha.80 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-alpha.63 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-alpha.51 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.44 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.13 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+
+## [9.0.0-alpha.79](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-alpha.79)
+
+Mon, 20 Sep 2021 07:36:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-alpha.78..@fluentui/react-menu_v9.0.0-alpha.79)
+
+### Changes
+
+- Bump @fluentui/react-menu to v9.0.0-alpha.79 ([PR #19844](https://github.com/microsoft/fluentui/pull/19844) by lingfangao@hotmail.com)
+
+## [9.0.0-alpha.78](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-alpha.78)
+
+Fri, 17 Sep 2021 07:35:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-alpha.77..@fluentui/react-menu_v9.0.0-alpha.78)
+
+### Changes
+
+- Menu: Making MenuTrigger accept function components which customize where props go as children. ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-menu to v9.0.0-alpha.78 ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+
 ## [9.0.0-alpha.77](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-alpha.77)
 
-Thu, 16 Sep 2021 07:35:43 GMT 
+Thu, 16 Sep 2021 07:38:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-alpha.76..@fluentui/react-menu_v9.0.0-alpha.77)
 
 ### Changes

package/Spec.md

@@ -381,49 +381,50 @@ Sample usages will be give in the following section of this document [Sample cod
 The root level component serves as a simplified interface (sugar) for popup positioning and triggering.
 
 ```typescript
-export interface MenuProps extends MenuListProps, Pick<PositioningProps, '<Positioning props as necessary>'> {
-  /**
-   * Explicitly require children
-   */
-
-  children: React.ReactNode;
-  /**
-   * Whether the popup is open
-   */
-  open?: boolean;
-
-  /**
-   * Call back when the component requests to change value
-   * The `open` value is used as a hint when directly controlling the component
-   */
-  onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
-
-  /**
-   * Whether the popup is open by default
-   */
-  defaultOpen?: boolean;
-
-  /**
-   * Wrapper to style and add events for the popup
-   */
-  menuPopup?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-
-  /*
-   * Opens the menu on hover
-   */
-  openOnHover?: boolean;
-
-  /**
-   * Opens the menu on right click (context menu), removes all other menu open interactions
-   */
-  openOnContext?: boolean;
-
-  /**
-   * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
-   * This option is disregarded for submenus
-   */
-  inline?: boolean;
-}
+export type MenuProps = MenuListProps &
+  Pick<PositioningProps, '<Positioning props as necessary>'> & {
+    /**
+     * Explicitly require children
+     */
+
+    children: React.ReactNode;
+    /**
+     * Whether the popup is open
+     */
+    open?: boolean;
+
+    /**
+     * Call back when the component requests to change value
+     * The `open` value is used as a hint when directly controlling the component
+     */
+    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+
+    /**
+     * Whether the popup is open by default
+     */
+    defaultOpen?: boolean;
+
+    /**
+     * Wrapper to style and add events for the popup
+     */
+    menuPopup?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+
+    /*
+     * Opens the menu on hover
+     */
+    openOnHover?: boolean;
+
+    /**
+     * Opens the menu on right click (context menu), removes all other menu open interactions
+     */
+    openOnContext?: boolean;
+
+    /**
+     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
+     * This option is disregarded for submenus
+     */
+    inline?: boolean;
+  };
 ```
 
 ### MenuTrigger
@@ -431,12 +432,12 @@ export interface MenuProps extends MenuListProps, Pick<PositioningProps, '<Posit
 A non-visual component that wraps its child and configures them to be the trigger that will open a menu. This component should only accept one child
 
 ```typescript
-export interface MenuTriggerProps {
+export type MenuTriggerProps = {
   /**
    * Explicitly require single child
    */
   children: React.ReactElement;
-}
+};
 ```
 
 ### MenuList
@@ -446,35 +447,36 @@ This component is used internally by `Menu` and manages the context and layout i
 `MenuList` can also be used separately as the standalone variant of the `Menu`, since it should not control popup positioning or triggers. It is the only component in the API that can be used standalone. Envisioned to be used with more complex popup or trigger scenarios where the `Menu` component does not provide enough control for these situations.
 
 ```typescript
-export interface MenuListProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * Callback when checked items change for value with a name
-   *
-   * @param name - the name of the value
-   * @param checkedItems - the items for this value that are checked
-   */
-  onCheckedValueChange?: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;
-
-  /**
-   * Map of all checked values
-   */
-  checkedValues?: Record<string, string[]>;
-
-  /**
-   * Default values to be checked on mount
-   */
-  defaultCheckedValues?: Record<string, string[]>;
-
-  /**
-   * States that menu items can contain icons and reserve slots for item alignment
-   */
-  hasIcons?: boolean;
-
-  /**
-   * States that menu items can contain selectable items and reserve slots for item alignment
-   */
-  hasCheckmarks?: boolean;
-}
+export type MenuListProps = ComponentProps &
+  React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Callback when checked items change for value with a name
+     *
+     * @param name - the name of the value
+     * @param checkedItems - the items for this value that are checked
+     */
+    onCheckedValueChange?: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;
+
+    /**
+     * Map of all checked values
+     */
+    checkedValues?: Record<string, string[]>;
+
+    /**
+     * Default values to be checked on mount
+     */
+    defaultCheckedValues?: Record<string, string[]>;
+
+    /**
+     * States that menu items can contain icons and reserve slots for item alignment
+     */
+    hasIcons?: boolean;
+
+    /**
+     * States that menu items can contain selectable items and reserve slots for item alignment
+     */
+    hasCheckmarks?: boolean;
+  };
 ```
 
 ### MenuGroup
@@ -502,49 +504,50 @@ This divider is purely a visual cue. To ensure consistent narration experience a
 ### MenuItem
 
 ```typescript
-export interface MenuItemProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * Icon slot rendered before children content
-   */
-  icon?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-
-  /**
-   * A helper slot for alignment when a menu item is used with selectable menuitems
-   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
-   */
-  checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-
-  /**
-   * Icon slot that shows the indicator for a submenu
-   */
-  submenuIndicator?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-
-  /**
-   * Component children are placed in this slot
-   * Avoid using the `children` property in this slot in favour of Component children whenever possible
-   */
-  content?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-
-  /**
-   * Secondary content rendered opposite the primary content (e.g Shortcut text)
-   */
-  secondaryContent?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-
-  /**
-   * If the menu item is a trigger for a submenu
-   */
-  hasSubmenu?: boolean;
-
-  /**
-   * Applies disabled styles to menu item but remains focusable
-   */
-  disabled?: boolean;
-
-  /**
-   * Clicking on the menu item will not dismiss an open menu
-   */
-  persistOnClick?: boolean;
-}
+export type MenuItemProps = ComponentProps &
+  React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Icon slot rendered before children content
+     */
+    icon?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+
+    /**
+     * A helper slot for alignment when a menu item is used with selectable menuitems
+     * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
+     */
+    checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+
+    /**
+     * Icon slot that shows the indicator for a submenu
+     */
+    submenuIndicator?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+
+    /**
+     * Component children are placed in this slot
+     * Avoid using the `children` property in this slot in favour of Component children whenever possible
+     */
+    content?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+
+    /**
+     * Secondary content rendered opposite the primary content (e.g Shortcut text)
+     */
+    secondaryContent?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+
+    /**
+     * If the menu item is a trigger for a submenu
+     */
+    hasSubmenu?: boolean;
+
+    /**
+     * Applies disabled styles to menu item but remains focusable
+     */
+    disabled?: boolean;
+
+    /**
+     * Clicking on the menu item will not dismiss an open menu
+     */
+    persistOnClick?: boolean;
+  };
 ```
 
 ### MenuItemCheckbox/Radio
@@ -558,7 +561,7 @@ Variants of `MenuItem` that allows a single or multiple selection state based on
 /**
  * Props for selecatble menu items
  */
-export interface MenuItemSelectableProps extends React.HTMLAttributes<HTMLElement> {
+export type MenuItemSelectableProps = React.HTMLAttributes<HTMLElement> & {
   /**
    * Follows input convention
    * https://www.w3schools.com/jsref/prop_checkbox_name.asp
@@ -575,26 +578,24 @@ export interface MenuItemSelectableProps extends React.HTMLAttributes<HTMLElemen
    * Whether the selectable item is disabled
    */
   disabled?: boolean;
-}
-
-export interface MenuItemCheckboxProps
-  extends ComponentProps,
-    React.HTMLAttributes<HTMLElement>,
-    MenuItemProps,
-    MenuItemSelectableProps {
-  /**
-   * Slot for the checkmark indicator
-   */
-  checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-}
+};
 
-export interface MenuItemRadioProps
-  extends ComponentProps,
-    React.HTMLAttributes<HTMLElement>,
-    MenuItemProps,
-    MenuItemSelectableProps {
-  checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-}
+export type MenuItemCheckboxProps = ComponentProps &
+  React.HTMLAttributes<HTMLElement> &
+  MenuItemProps &
+  MenuItemSelectableProps & {
+    /**
+     * Slot for the checkmark indicator
+     */
+    checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+  };
+
+export type MenuItemRadioProps = ComponentProps &
+  React.HTMLAttributes<HTMLElement> &
+  MenuItemProps &
+  MenuItemSelectableProps & {
+    checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+  };
 ```
 
 ## Sample code