@fluentui/react-button 9.0.0-alpha.88 → 9.0.0-alpha.89

package/CHANGELOG.json

@@ -2,7 +2,58 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Mon, 20 Sep 2021 07:35:22 GMT",
+      "date": "Tue, 21 Sep 2021 07:40:35 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-alpha.89",
+      "version": "9.0.0-alpha.89",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-button",
+            "comment": "Updating to types over interfaces",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.69",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-alpha.63",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-alpha.51",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.44",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.13",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-menu to v9.0.0-alpha.80",
+            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 20 Sep 2021 07:36:26 GMT",
       "tag": "@fluentui/react-button_v9.0.0-alpha.88",
       "version": "9.0.0-alpha.88",
       "comments": {
@@ -11,12 +62,12 @@
             "author": "Humberto.Morimoto@microsoft.com",
             "package": "@fluentui/react-button",
             "comment": "SplitButton: Re-introducing SplitButton using the latest version of makeStyles.",
-            "commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884"
+            "commit": "b8a304770f77c0353553a152dad34421070400a6"
           },
           {
             "author": "lingfangao@hotmail.com",
             "package": "@fluentui/react-button",
-            "commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6",
             "comment": "Bump @fluentui/react-button to v9.0.0-alpha.88"
           }
         ],
@@ -25,7 +76,7 @@
             "author": "lingfangao@hotmail.com",
             "package": "@fluentui/react-button",
             "comment": "chore: use  versioon eslint-plugin and react-conformance in dev dependencies",
-            "commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884"
+            "commit": "b8a304770f77c0353553a152dad34421070400a6"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,18 +1,33 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Mon, 20 Sep 2021 07:35:22 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.89](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.89)
+
+Tue, 21 Sep 2021 07:40:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.88..@fluentui/react-button_v9.0.0-alpha.89)
+
+### 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-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)
+- Bump @fluentui/react-menu to v9.0.0-alpha.80 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+
 ## [9.0.0-alpha.88](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.88)
 
-Mon, 20 Sep 2021 07:35:22 GMT 
+Mon, 20 Sep 2021 07:36:26 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.87..@fluentui/react-button_v9.0.0-alpha.88)
 
 ### Changes
 
-- SplitButton: Re-introducing SplitButton using the latest version of makeStyles. ([PR #18290](https://github.com/microsoft/fluentui/pull/18290) by Humberto.Morimoto@microsoft.com)
-- Bump @fluentui/react-button to v9.0.0-alpha.88 ([PR #18290](https://github.com/microsoft/fluentui/pull/18290) by lingfangao@hotmail.com)
+- SplitButton: Re-introducing SplitButton using the latest version of makeStyles. ([PR #19844](https://github.com/microsoft/fluentui/pull/19844) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-button to v9.0.0-alpha.88 ([PR #19844](https://github.com/microsoft/fluentui/pull/19844) by lingfangao@hotmail.com)
 
 ## [9.0.0-alpha.87](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.87)
 

package/dist/react-button.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentPropsCompat } from '@fluentui/react-utilities';
+import { ComponentPropsCompat } from '@fluentui/react-utilities';
 import type { ComponentStateCompat } from '@fluentui/react-utilities';
 import type { MenuTriggerChildProps } from '@fluentui/react-menu';
 import * as React_2 from 'react';
-import type { ShorthandPropsCompat } from '@fluentui/react-utilities';
+import { ShorthandPropsCompat } from '@fluentui/react-utilities';
 
 /**
  * Buttons give people a way to trigger an action.
@@ -84,7 +84,7 @@ export declare type ButtonShorthandPropsCompat = 'icon';
  */
 export declare const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[];
 
-export declare interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> {
+export declare type ButtonState = ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> & {
     /**
      * A button can contain only an icon.
      * @default false
@@ -94,25 +94,40 @@ export declare interface ButtonState extends ComponentStateCompat<ButtonProps, B
      * Ref to the root element
      */
     ref: React_2.Ref<HTMLElement>;
-}
+};
 
-export declare interface CheckedState {
+export declare type CheckedState = {
     checked?: boolean;
     defaultChecked?: boolean;
     onClick?: React_2.DOMAttributes<HTMLElement>['onClick'];
     role?: string;
     'aria-checked'?: React_2.AriaAttributes['aria-pressed'];
     'aria-pressed'?: React_2.AriaAttributes['aria-pressed'];
-}
+};
 
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
-export declare const CompoundButton: React_2.ForwardRefExoticComponent<CompoundButtonProps & React_2.RefAttributes<HTMLElement>>;
+export declare const CompoundButton: React_2.ForwardRefExoticComponent<ComponentPropsCompat & React_2.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    secondaryContent?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
+    contentContainer?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
+} & React_2.RefAttributes<HTMLElement>>;
 
 export declare type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';
 
-export declare interface CompoundButtonProps extends ButtonProps {
+export declare type CompoundButtonProps = ButtonProps & {
     /**
      * Second line of text that describes the action this button takes.
      */
@@ -121,7 +136,7 @@ export declare interface CompoundButtonProps extends ButtonProps {
      * Container that wraps the children and secondaryContent slots.
      */
     contentContainer?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
-}
+};
 
 export declare type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';
 
@@ -130,8 +145,7 @@ export declare type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCom
  */
 export declare const compoundButtonShorthandPropsCompat: CompoundButtonShorthandPropsCompat[];
 
-export declare interface CompoundButtonState extends ButtonState, ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps> {
-}
+export declare type CompoundButtonState = ButtonState & ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;
 
 /**
  * MenuButtons are buttons that handle opening and closing a menu when they are triggered.
@@ -154,8 +168,7 @@ export declare type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat
  */
 export declare const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[];
 
-export declare interface MenuButtonState extends Omit<ButtonState, 'iconPosition'>, ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {
-}
+export declare type MenuButtonState = Omit<ButtonState, 'iconPosition'> & ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps>;
 
 /**
  * Renders a Button component by passing the state defined props to the appropriate slots.
@@ -220,11 +233,26 @@ export declare interface SplitButtonState extends ComponentStateCompat<SplitButt
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-export declare const ToggleButton: React_2.ForwardRefExoticComponent<ToggleButtonProps & React_2.RefAttributes<HTMLElement>>;
+export declare const ToggleButton: React_2.ForwardRefExoticComponent<ComponentPropsCompat & React_2.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+} & React_2.RefAttributes<HTMLElement>>;
 
 export declare type ToggleButtonDefaultedProps = ButtonDefaultedProps;
 
-export declare interface ToggleButtonProps extends ButtonProps {
+export declare type ToggleButtonProps = ButtonProps & {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * Mutually exclusive to `defaultChecked`.
@@ -239,12 +267,11 @@ export declare interface ToggleButtonProps extends ButtonProps {
      * @default false
      */
     defaultChecked?: boolean;
-}
+};
 
 export declare type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;
 
-export declare interface ToggleButtonState extends ButtonState, ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {
-}
+export declare type ToggleButtonState = ButtonState & ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;
 
 /**
  * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.

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

@@ -67,7 +67,7 @@ export declare type ButtonProps = ComponentPropsCompat & React.ButtonHTMLAttribu
 };
 export declare type ButtonShorthandPropsCompat = 'icon';
 export declare type ButtonDefaultedProps = 'icon' | 'size';
-export interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> {
+export declare type ButtonState = ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> & {
     /**
      * A button can contain only an icon.
      * @default false
@@ -77,4 +77,4 @@ export interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonSho
      * Ref to the root element
      */
     ref: React.Ref<HTMLElement>;
-}
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\n\nexport type ButtonProps = ComponentPropsCompat &\n  React.ButtonHTMLAttributes<HTMLElement> & {\n    /**\n     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the\n     * `iconPosition` prop.\n     */\n    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n    // /**\n    //  * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag\n    //  * is set to `true`.\n    //  */\n    // loader?: ShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;\n\n    /**\n     * A button can fill the width of its container.\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * A button can have completely rounded corners.\n     * @default false\n     */\n    circular?: boolean;\n\n    /**\n     * A button can show that it cannot be interacted with.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n     * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n     * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n     * @default false\n     */\n    disabledFocusable?: boolean;\n\n    /**\n     * A button can format its icon to appear before or after its content.\n     * @default 'before'\n     */\n    iconPosition?: 'before' | 'after';\n\n    // /**\n    //  * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to\n    //  * be interacted with.\n    //  * @default false\n    //  */\n    // loading?: boolean;\n\n    /**\n     * A button can be styled such that it has no background styling and is just emphasized through the styling of\n     * its content and borders.\n     * Mutually exclusive with `primary`, `subtle` and `transparent`.\n     * @default false\n     */\n    outline?: boolean;\n\n    /**\n     * A button can be styled to emphasize that it represents the primary action.\n     * Mutually exclusive with `outline`, `subtle` and `transparent`.\n     * @default false\n     */\n    primary?: boolean;\n\n    /**\n     * A button supports different sizes.\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * A button can be styled to blend into its background and become less emphasized.\n     * @default false\n     * Mutually exclusive with `outline`, `primary` and `transparent`.\n     */\n    subtle?: boolean;\n\n    /**\n     * A button can be styled such that it has no background or border styling and is just emphasized through its\n     * content styling.\n     * Mutually exclusive with `outline`, `primary` and `subtle`.\n     * @default false\n     */\n    transparent?: boolean;\n  };\n\nexport type ButtonShorthandPropsCompat = 'icon';\n\nexport type ButtonDefaultedProps = 'icon' | 'size';\n\nexport interface ButtonState\n  extends ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> {\n  /**\n   * A button can contain only an icon.\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n}\n"]}
+{"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\n\nexport type ButtonProps = ComponentPropsCompat &\n  React.ButtonHTMLAttributes<HTMLElement> & {\n    /**\n     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the\n     * `iconPosition` prop.\n     */\n    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n    // /**\n    //  * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag\n    //  * is set to `true`.\n    //  */\n    // loader?: ShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;\n\n    /**\n     * A button can fill the width of its container.\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * A button can have completely rounded corners.\n     * @default false\n     */\n    circular?: boolean;\n\n    /**\n     * A button can show that it cannot be interacted with.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n     * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n     * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n     * @default false\n     */\n    disabledFocusable?: boolean;\n\n    /**\n     * A button can format its icon to appear before or after its content.\n     * @default 'before'\n     */\n    iconPosition?: 'before' | 'after';\n\n    // /**\n    //  * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to\n    //  * be interacted with.\n    //  * @default false\n    //  */\n    // loading?: boolean;\n\n    /**\n     * A button can be styled such that it has no background styling and is just emphasized through the styling of\n     * its content and borders.\n     * Mutually exclusive with `primary`, `subtle` and `transparent`.\n     * @default false\n     */\n    outline?: boolean;\n\n    /**\n     * A button can be styled to emphasize that it represents the primary action.\n     * Mutually exclusive with `outline`, `subtle` and `transparent`.\n     * @default false\n     */\n    primary?: boolean;\n\n    /**\n     * A button supports different sizes.\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * A button can be styled to blend into its background and become less emphasized.\n     * @default false\n     * Mutually exclusive with `outline`, `primary` and `transparent`.\n     */\n    subtle?: boolean;\n\n    /**\n     * A button can be styled such that it has no background or border styling and is just emphasized through its\n     * content styling.\n     * Mutually exclusive with `outline`, `primary` and `subtle`.\n     * @default false\n     */\n    transparent?: boolean;\n  };\n\nexport type ButtonShorthandPropsCompat = 'icon';\n\nexport type ButtonDefaultedProps = 'icon' | 'size';\n\nexport type ButtonState = ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> & {\n  /**\n   * A button can contain only an icon.\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n};\n"]}

package/lib/components/CompoundButton/CompoundButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { CompoundButtonProps } from './CompoundButton.types';
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
-export declare const CompoundButton: React.ForwardRefExoticComponent<CompoundButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const CompoundButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    secondaryContent?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    contentContainer?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+} & React.RefAttributes<HTMLElement>>;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface CompoundButtonProps extends ButtonProps {
+export declare type CompoundButtonProps = ButtonProps & {
     /**
      * Second line of text that describes the action this button takes.
      */
@@ -10,8 +10,7 @@ export interface CompoundButtonProps extends ButtonProps {
      * Container that wraps the children and secondaryContent slots.
      */
     contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
+};
 export declare type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';
 export declare type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';
-export interface CompoundButtonState extends ButtonState, ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps> {
-}
+export declare type CompoundButtonState = ButtonState & ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport interface CompoundButtonProps extends ButtonProps {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n  /**\n   * Container that wraps the children and secondaryContent slots.\n   */\n  contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';\n\nexport type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';\n\nexport interface CompoundButtonState\n  extends ButtonState,\n    ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type CompoundButtonProps = ButtonProps & {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n  /**\n   * Container that wraps the children and secondaryContent slots.\n   */\n  contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n};\n\nexport type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';\n\nexport type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';\n\nexport type CompoundButtonState = ButtonState &\n  ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;\n"]}

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

@@ -10,5 +10,4 @@ export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partia
 };
 export declare type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';
 export declare type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';
-export interface MenuButtonState extends Omit<ButtonState, 'iconPosition'>, ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {
-}
+export declare type MenuButtonState = Omit<ButtonState, 'iconPosition'> & ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { MenuTriggerChildProps } from '@fluentui/react-menu';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> &\n  Partial<Omit<MenuTriggerChildProps, 'ref'>> & {\n    /**\n     * Menu icon that indicates that this button has a menu that can be expanded.\n     */\n    menuIcon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n  };\n\nexport type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';\n\nexport type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';\n\nexport interface MenuButtonState\n  extends Omit<ButtonState, 'iconPosition'>,\n    ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { MenuTriggerChildProps } from '@fluentui/react-menu';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> &\n  Partial<Omit<MenuTriggerChildProps, 'ref'>> & {\n    /**\n     * Menu icon that indicates that this button has a menu that can be expanded.\n     */\n    menuIcon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n  };\n\nexport type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';\n\nexport type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';\n\nexport type MenuButtonState = Omit<ButtonState, 'iconPosition'> &\n  ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps>;\n"]}

package/lib/components/ToggleButton/ToggleButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { ToggleButtonProps } from './ToggleButton.types';
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;

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

@@ -1,6 +1,6 @@
 import type { ComponentStateCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface ToggleButtonProps extends ButtonProps {
+export declare type ToggleButtonProps = ButtonProps & {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * Mutually exclusive to `defaultChecked`.
@@ -15,8 +15,7 @@ export interface ToggleButtonProps extends ButtonProps {
      * @default false
      */
     defaultChecked?: boolean;
-}
+};
 export declare type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;
 export declare type ToggleButtonDefaultedProps = ButtonDefaultedProps;
-export interface ToggleButtonState extends ButtonState, ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {
-}
+export declare type ToggleButtonState = ButtonState & ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentStateCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport interface ToggleButtonProps extends ButtonProps {\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * Mutually exclusive to `defaultChecked`.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   * Mutually exclusive to `checked`.\n   * @default false\n   */\n  defaultChecked?: boolean;\n}\n\nexport type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;\n\nexport type ToggleButtonDefaultedProps = ButtonDefaultedProps;\n\nexport interface ToggleButtonState\n  extends ButtonState,\n    ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentStateCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * Mutually exclusive to `defaultChecked`.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   * Mutually exclusive to `checked`.\n   * @default false\n   */\n  defaultChecked?: boolean;\n};\n\nexport type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;\n\nexport type ToggleButtonDefaultedProps = ButtonDefaultedProps;\n\nexport type ToggleButtonState = ButtonState &\n  ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;\n"]}

package/lib/components/ToggleButton/useChecked.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-export interface CheckedState {
+export declare type CheckedState = {
     checked?: boolean;
     defaultChecked?: boolean;
     onClick?: React.DOMAttributes<HTMLElement>['onClick'];
     role?: string;
     'aria-checked'?: React.AriaAttributes['aria-pressed'];
     'aria-pressed'?: React.AriaAttributes['aria-pressed'];
-}
+};
 /**
  * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
  * @param state - state to read and augment.

package/lib/components/ToggleButton/useChecked.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,2BAArC;AAYA;;;AAGG;;AACH,OAAO,IAAM,UAAU,GAAG,UAA8B,KAA9B,EAA2C;AAC3D,MAAA,OAAO,GAAoC,KAAK,CAAzC,OAAP;AAAA,MAAS,OAAO,GAA2B,KAAK,CAAhC,OAAhB;AAAA,MAAkB,cAAc,GAAW,KAAK,CAAhB,cAAhC;AAAA,MAAkC,IAAI,GAAK,KAAK,CAAV,IAAtC;;AACF,MAAA,EAAA,GAAkC,oBAAoB,CAAC,OAAD,EAAU,cAAV,CAAtD;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B,CAF6D,CAInE;;;AACA,EAAA,KAAK,CAAC,OAAN,GAAgB,YAAhB,CALmE,CAOnE;;AACA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,EAAA,KAAK,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,CAAL,GAA8D,CAAC,CAAC,YAAhE;AAEA,EAAA,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,WAAN,CACd,UAAC,EAAD,EAAoD;AAClD,QAAI,OAAJ,EAAa;AACX,MAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,IAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,GAXa,EAYd,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZc,CAAhB;AAcD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport interface CheckedState {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n}\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,2BAArC;AAYA;;;AAGG;;AACH,OAAO,IAAM,UAAU,GAAG,UAA8B,KAA9B,EAA2C;AAC3D,MAAA,OAAO,GAAoC,KAAK,CAAzC,OAAP;AAAA,MAAS,OAAO,GAA2B,KAAK,CAAhC,OAAhB;AAAA,MAAkB,cAAc,GAAW,KAAK,CAAhB,cAAhC;AAAA,MAAkC,IAAI,GAAK,KAAK,CAAV,IAAtC;;AACF,MAAA,EAAA,GAAkC,oBAAoB,CAAC,OAAD,EAAU,cAAV,CAAtD;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B,CAF6D,CAInE;;;AACA,EAAA,KAAK,CAAC,OAAN,GAAgB,YAAhB,CALmE,CAOnE;;AACA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,EAAA,KAAK,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,CAAL,GAA8D,CAAC,CAAC,YAAhE;AAEA,EAAA,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,WAAN,CACd,UAAC,EAAD,EAAoD;AAClD,QAAI,OAAJ,EAAa;AACX,MAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,IAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,GAXa,EAYd,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZc,CAAhB;AAcD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport type CheckedState = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n};\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-amd/components/Button/Button.types.d.ts

@@ -67,7 +67,7 @@ export declare type ButtonProps = ComponentPropsCompat & React.ButtonHTMLAttribu
 };
 export declare type ButtonShorthandPropsCompat = 'icon';
 export declare type ButtonDefaultedProps = 'icon' | 'size';
-export interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> {
+export declare type ButtonState = ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> & {
     /**
      * A button can contain only an icon.
      * @default false
@@ -77,4 +77,4 @@ export interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonSho
      * Ref to the root element
      */
     ref: React.Ref<HTMLElement>;
-}
+};

package/lib-amd/components/Button/Button.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\n\nexport type ButtonProps = ComponentPropsCompat &\n  React.ButtonHTMLAttributes<HTMLElement> & {\n    /**\n     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the\n     * `iconPosition` prop.\n     */\n    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n    // /**\n    //  * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag\n    //  * is set to `true`.\n    //  */\n    // loader?: ShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;\n\n    /**\n     * A button can fill the width of its container.\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * A button can have completely rounded corners.\n     * @default false\n     */\n    circular?: boolean;\n\n    /**\n     * A button can show that it cannot be interacted with.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n     * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n     * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n     * @default false\n     */\n    disabledFocusable?: boolean;\n\n    /**\n     * A button can format its icon to appear before or after its content.\n     * @default 'before'\n     */\n    iconPosition?: 'before' | 'after';\n\n    // /**\n    //  * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to\n    //  * be interacted with.\n    //  * @default false\n    //  */\n    // loading?: boolean;\n\n    /**\n     * A button can be styled such that it has no background styling and is just emphasized through the styling of\n     * its content and borders.\n     * Mutually exclusive with `primary`, `subtle` and `transparent`.\n     * @default false\n     */\n    outline?: boolean;\n\n    /**\n     * A button can be styled to emphasize that it represents the primary action.\n     * Mutually exclusive with `outline`, `subtle` and `transparent`.\n     * @default false\n     */\n    primary?: boolean;\n\n    /**\n     * A button supports different sizes.\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * A button can be styled to blend into its background and become less emphasized.\n     * @default false\n     * Mutually exclusive with `outline`, `primary` and `transparent`.\n     */\n    subtle?: boolean;\n\n    /**\n     * A button can be styled such that it has no background or border styling and is just emphasized through its\n     * content styling.\n     * Mutually exclusive with `outline`, `primary` and `subtle`.\n     * @default false\n     */\n    transparent?: boolean;\n  };\n\nexport type ButtonShorthandPropsCompat = 'icon';\n\nexport type ButtonDefaultedProps = 'icon' | 'size';\n\nexport interface ButtonState\n  extends ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> {\n  /**\n   * A button can contain only an icon.\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n}\n"]}
+{"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\n\nexport type ButtonProps = ComponentPropsCompat &\n  React.ButtonHTMLAttributes<HTMLElement> & {\n    /**\n     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the\n     * `iconPosition` prop.\n     */\n    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n    // /**\n    //  * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag\n    //  * is set to `true`.\n    //  */\n    // loader?: ShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;\n\n    /**\n     * A button can fill the width of its container.\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * A button can have completely rounded corners.\n     * @default false\n     */\n    circular?: boolean;\n\n    /**\n     * A button can show that it cannot be interacted with.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n     * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n     * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n     * @default false\n     */\n    disabledFocusable?: boolean;\n\n    /**\n     * A button can format its icon to appear before or after its content.\n     * @default 'before'\n     */\n    iconPosition?: 'before' | 'after';\n\n    // /**\n    //  * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to\n    //  * be interacted with.\n    //  * @default false\n    //  */\n    // loading?: boolean;\n\n    /**\n     * A button can be styled such that it has no background styling and is just emphasized through the styling of\n     * its content and borders.\n     * Mutually exclusive with `primary`, `subtle` and `transparent`.\n     * @default false\n     */\n    outline?: boolean;\n\n    /**\n     * A button can be styled to emphasize that it represents the primary action.\n     * Mutually exclusive with `outline`, `subtle` and `transparent`.\n     * @default false\n     */\n    primary?: boolean;\n\n    /**\n     * A button supports different sizes.\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * A button can be styled to blend into its background and become less emphasized.\n     * @default false\n     * Mutually exclusive with `outline`, `primary` and `transparent`.\n     */\n    subtle?: boolean;\n\n    /**\n     * A button can be styled such that it has no background or border styling and is just emphasized through its\n     * content styling.\n     * Mutually exclusive with `outline`, `primary` and `subtle`.\n     * @default false\n     */\n    transparent?: boolean;\n  };\n\nexport type ButtonShorthandPropsCompat = 'icon';\n\nexport type ButtonDefaultedProps = 'icon' | 'size';\n\nexport type ButtonState = ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> & {\n  /**\n   * A button can contain only an icon.\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n};\n"]}

package/lib-amd/components/CompoundButton/CompoundButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { CompoundButtonProps } from './CompoundButton.types';
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
-export declare const CompoundButton: React.ForwardRefExoticComponent<CompoundButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const CompoundButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    secondaryContent?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    contentContainer?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+} & React.RefAttributes<HTMLElement>>;

package/lib-amd/components/CompoundButton/CompoundButton.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface CompoundButtonProps extends ButtonProps {
+export declare type CompoundButtonProps = ButtonProps & {
     /**
      * Second line of text that describes the action this button takes.
      */
@@ -10,8 +10,7 @@ export interface CompoundButtonProps extends ButtonProps {
      * Container that wraps the children and secondaryContent slots.
      */
     contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
+};
 export declare type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';
 export declare type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';
-export interface CompoundButtonState extends ButtonState, ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps> {
-}
+export declare type CompoundButtonState = ButtonState & ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;

package/lib-amd/components/CompoundButton/CompoundButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport interface CompoundButtonProps extends ButtonProps {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n  /**\n   * Container that wraps the children and secondaryContent slots.\n   */\n  contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';\n\nexport type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';\n\nexport interface CompoundButtonState\n  extends ButtonState,\n    ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type CompoundButtonProps = ButtonProps & {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n  /**\n   * Container that wraps the children and secondaryContent slots.\n   */\n  contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n};\n\nexport type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';\n\nexport type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';\n\nexport type CompoundButtonState = ButtonState &\n  ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;\n"]}

package/lib-amd/components/MenuButton/MenuButton.types.d.ts

@@ -10,5 +10,4 @@ export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partia
 };
 export declare type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';
 export declare type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';
-export interface MenuButtonState extends Omit<ButtonState, 'iconPosition'>, ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {
-}
+export declare type MenuButtonState = Omit<ButtonState, 'iconPosition'> & ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps>;

package/lib-amd/components/MenuButton/MenuButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { MenuTriggerChildProps } from '@fluentui/react-menu';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> &\n  Partial<Omit<MenuTriggerChildProps, 'ref'>> & {\n    /**\n     * Menu icon that indicates that this button has a menu that can be expanded.\n     */\n    menuIcon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n  };\n\nexport type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';\n\nexport type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';\n\nexport interface MenuButtonState\n  extends Omit<ButtonState, 'iconPosition'>,\n    ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { MenuTriggerChildProps } from '@fluentui/react-menu';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> &\n  Partial<Omit<MenuTriggerChildProps, 'ref'>> & {\n    /**\n     * Menu icon that indicates that this button has a menu that can be expanded.\n     */\n    menuIcon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n  };\n\nexport type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';\n\nexport type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';\n\nexport type MenuButtonState = Omit<ButtonState, 'iconPosition'> &\n  ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps>;\n"]}

package/lib-amd/components/ToggleButton/ToggleButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { ToggleButtonProps } from './ToggleButton.types';
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;

package/lib-amd/components/ToggleButton/ToggleButton.types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentStateCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface ToggleButtonProps extends ButtonProps {
+export declare type ToggleButtonProps = ButtonProps & {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * Mutually exclusive to `defaultChecked`.
@@ -15,8 +15,7 @@ export interface ToggleButtonProps extends ButtonProps {
      * @default false
      */
     defaultChecked?: boolean;
-}
+};
 export declare type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;
 export declare type ToggleButtonDefaultedProps = ButtonDefaultedProps;
-export interface ToggleButtonState extends ButtonState, ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {
-}
+export declare type ToggleButtonState = ButtonState & ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;

package/lib-amd/components/ToggleButton/ToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentStateCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport interface ToggleButtonProps extends ButtonProps {\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * Mutually exclusive to `defaultChecked`.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   * Mutually exclusive to `checked`.\n   * @default false\n   */\n  defaultChecked?: boolean;\n}\n\nexport type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;\n\nexport type ToggleButtonDefaultedProps = ButtonDefaultedProps;\n\nexport interface ToggleButtonState\n  extends ButtonState,\n    ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentStateCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * Mutually exclusive to `defaultChecked`.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   * Mutually exclusive to `checked`.\n   * @default false\n   */\n  defaultChecked?: boolean;\n};\n\nexport type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;\n\nexport type ToggleButtonDefaultedProps = ButtonDefaultedProps;\n\nexport type ToggleButtonState = ButtonState &\n  ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;\n"]}

package/lib-amd/components/ToggleButton/useChecked.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-export interface CheckedState {
+export declare type CheckedState = {
     checked?: boolean;
     defaultChecked?: boolean;
     onClick?: React.DOMAttributes<HTMLElement>['onClick'];
     role?: string;
     'aria-checked'?: React.AriaAttributes['aria-pressed'];
     'aria-pressed'?: React.AriaAttributes['aria-pressed'];
-}
+};
 /**
  * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
  * @param state - state to read and augment.

package/lib-amd/components/ToggleButton/useChecked.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChecked.js","sourceRoot":"../src/","sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":";;;;IAaA;;;OAGG;IACI,IAAM,UAAU,GAAG,UAA8B,KAAa;QAC3D,IAAA,OAAO,GAAoC,KAAK,QAAzC,EAAE,OAAO,GAA2B,KAAK,QAAhC,EAAE,cAAc,GAAW,KAAK,eAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;QACnD,IAAA,KAAkC,sCAAoB,CAAC,OAAO,EAAE,cAAc,CAAC,EAA9E,YAAY,QAAA,EAAE,eAAe,QAAiD,CAAC;QAEtF,iEAAiE;QACjE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;QAE7B,qEAAqE;QACrE,IAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAkB,IAAI,IAAI,KAAK,UAAU,CAAC;QAE9E,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC;QAE7E,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,UAAC,EAAmD;YAClD,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,EAAE,CAAC,CAAC;gBAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;oBACvB,OAAO;iBACR;aACF;YAED,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;QACjC,CAAC,EACD,CAAC,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CACzC,CAAC;IACJ,CAAC,CAAC;IA1BW,QAAA,UAAU,cA0BrB","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport interface CheckedState {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n}\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"]}
+{"version":3,"file":"useChecked.js","sourceRoot":"../src/","sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":";;;;IAaA;;;OAGG;IACI,IAAM,UAAU,GAAG,UAA8B,KAAa;QAC3D,IAAA,OAAO,GAAoC,KAAK,QAAzC,EAAE,OAAO,GAA2B,KAAK,QAAhC,EAAE,cAAc,GAAW,KAAK,eAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;QACnD,IAAA,KAAkC,sCAAoB,CAAC,OAAO,EAAE,cAAc,CAAC,EAA9E,YAAY,QAAA,EAAE,eAAe,QAAiD,CAAC;QAEtF,iEAAiE;QACjE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;QAE7B,qEAAqE;QACrE,IAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAkB,IAAI,IAAI,KAAK,UAAU,CAAC;QAE9E,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC;QAE7E,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,UAAC,EAAmD;YAClD,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,EAAE,CAAC,CAAC;gBAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;oBACvB,OAAO;iBACR;aACF;YAED,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;QACjC,CAAC,EACD,CAAC,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CACzC,CAAC;IACJ,CAAC,CAAC;IA1BW,QAAA,UAAU,cA0BrB","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport type CheckedState = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n};\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"]}

package/lib-commonjs/components/Button/Button.types.d.ts

@@ -67,7 +67,7 @@ export declare type ButtonProps = ComponentPropsCompat & React.ButtonHTMLAttribu
 };
 export declare type ButtonShorthandPropsCompat = 'icon';
 export declare type ButtonDefaultedProps = 'icon' | 'size';
-export interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> {
+export declare type ButtonState = ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> & {
     /**
      * A button can contain only an icon.
      * @default false
@@ -77,4 +77,4 @@ export interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonSho
      * Ref to the root element
      */
     ref: React.Ref<HTMLElement>;
-}
+};

package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { CompoundButtonProps } from './CompoundButton.types';
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
-export declare const CompoundButton: React.ForwardRefExoticComponent<CompoundButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const CompoundButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    secondaryContent?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    contentContainer?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+} & React.RefAttributes<HTMLElement>>;

package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface CompoundButtonProps extends ButtonProps {
+export declare type CompoundButtonProps = ButtonProps & {
     /**
      * Second line of text that describes the action this button takes.
      */
@@ -10,8 +10,7 @@ export interface CompoundButtonProps extends ButtonProps {
      * Container that wraps the children and secondaryContent slots.
      */
     contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
+};
 export declare type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';
 export declare type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';
-export interface CompoundButtonState extends ButtonState, ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps> {
-}
+export declare type CompoundButtonState = ButtonState & ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;

package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts

@@ -10,5 +10,4 @@ export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partia
 };
 export declare type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';
 export declare type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';
-export interface MenuButtonState extends Omit<ButtonState, 'iconPosition'>, ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {
-}
+export declare type MenuButtonState = Omit<ButtonState, 'iconPosition'> & ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps>;

package/lib-commonjs/components/ToggleButton/ToggleButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { ToggleButtonProps } from './ToggleButton.types';
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;

package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentStateCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface ToggleButtonProps extends ButtonProps {
+export declare type ToggleButtonProps = ButtonProps & {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * Mutually exclusive to `defaultChecked`.
@@ -15,8 +15,7 @@ export interface ToggleButtonProps extends ButtonProps {
      * @default false
      */
     defaultChecked?: boolean;
-}
+};
 export declare type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;
 export declare type ToggleButtonDefaultedProps = ButtonDefaultedProps;
-export interface ToggleButtonState extends ButtonState, ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {
-}
+export declare type ToggleButtonState = ButtonState & ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;

package/lib-commonjs/components/ToggleButton/useChecked.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-export interface CheckedState {
+export declare type CheckedState = {
     checked?: boolean;
     defaultChecked?: boolean;
     onClick?: React.DOMAttributes<HTMLElement>['onClick'];
     role?: string;
     'aria-checked'?: React.AriaAttributes['aria-pressed'];
     'aria-pressed'?: React.AriaAttributes['aria-pressed'];
-}
+};
 /**
  * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
  * @param state - state to read and augment.

package/lib-commonjs/components/ToggleButton/useChecked.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAYA;;;AAGG;;;AACI,IAAM,UAAU,GAAG,UAA8B,KAA9B,EAA2C;AAC3D,MAAA,OAAO,GAAoC,KAAK,CAAzC,OAAP;AAAA,MAAS,OAAO,GAA2B,KAAK,CAAhC,OAAhB;AAAA,MAAkB,cAAc,GAAW,KAAK,CAAhB,cAAhC;AAAA,MAAkC,IAAI,GAAK,KAAK,CAAV,IAAtC;;AACF,MAAA,EAAA,GAAkC,iBAAA,CAAA,oBAAA,CAAqB,OAArB,EAA8B,cAA9B,CAAlC;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B,CAF6D,CAInE;;;AACA,EAAA,KAAK,CAAC,OAAN,GAAgB,YAAhB,CALmE,CAOnE;;AACA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,EAAA,KAAK,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,CAAL,GAA8D,CAAC,CAAC,YAAhE;AAEA,EAAA,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,WAAN,CACd,UAAC,EAAD,EAAoD;AAClD,QAAI,OAAJ,EAAa;AACX,MAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,IAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,GAXa,EAYd,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZc,CAAhB;AAcD,CA1BM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport interface CheckedState {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n}\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAYA;;;AAGG;;;AACI,IAAM,UAAU,GAAG,UAA8B,KAA9B,EAA2C;AAC3D,MAAA,OAAO,GAAoC,KAAK,CAAzC,OAAP;AAAA,MAAS,OAAO,GAA2B,KAAK,CAAhC,OAAhB;AAAA,MAAkB,cAAc,GAAW,KAAK,CAAhB,cAAhC;AAAA,MAAkC,IAAI,GAAK,KAAK,CAAV,IAAtC;;AACF,MAAA,EAAA,GAAkC,iBAAA,CAAA,oBAAA,CAAqB,OAArB,EAA8B,cAA9B,CAAlC;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B,CAF6D,CAInE;;;AACA,EAAA,KAAK,CAAC,OAAN,GAAgB,YAAhB,CALmE,CAOnE;;AACA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,EAAA,KAAK,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,CAAL,GAA8D,CAAC,CAAC,YAAhE;AAEA,EAAA,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,WAAN,CACd,UAAC,EAAD,EAAoD;AAClD,QAAI,OAAJ,EAAa;AACX,MAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,IAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,GAXa,EAYd,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZc,CAAhB;AAcD,CA1BM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport type CheckedState = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n};\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "9.0.0-alpha.88",
+  "version": "9.0.0-alpha.89",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,12 +26,12 @@
   },
   "devDependencies": {
     "@fluentui/a11y-testing": "^0.1.0",
-    "@fluentui/babel-make-styles": "9.0.0-alpha.50",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.51",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.43",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.44",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.12",
-    "@fluentui/react-menu": "9.0.0-alpha.79",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.13",
+    "@fluentui/react-menu": "9.0.0-alpha.80",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -47,8 +47,8 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "9.0.0-alpha.3",
     "@fluentui/react-icons": "^1.1.136",
-    "@fluentui/react-make-styles": "9.0.0-alpha.68",
-    "@fluentui/react-tabster": "9.0.0-alpha.62",
+    "@fluentui/react-make-styles": "9.0.0-alpha.69",
+    "@fluentui/react-tabster": "9.0.0-alpha.63",
     "@fluentui/react-utilities": "9.0.0-alpha.49",
     "tslib": "^2.1.0"
   },