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

package/CHANGELOG.json

@@ -2,7 +2,129 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Tue, 14 Sep 2021 20:06:25 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": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "comment": "SplitButton: Re-introducing SplitButton using the latest version of makeStyles.",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6",
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.88"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-button",
+            "comment": "chore: use  versioon eslint-plugin and react-conformance in dev dependencies",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 17 Sep 2021 07:35:26 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-alpha.87",
+      "version": "9.0.0-alpha.87",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "comment": "Modifying MenuButton to adhere to MenuTrigger changes.",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "comment": "Updating API comments to be more descriptive.",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575",
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.87"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Sep 2021 07:38:39 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-alpha.86",
+      "version": "9.0.0-alpha.86",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "fbe41e2877a20ce0f3c01b5188e17c12f941cc4c",
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.86"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Sep 2021 20:09:02 GMT",
       "tag": "@fluentui/react-button_v9.0.0-alpha.85",
       "version": "9.0.0-alpha.85",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,57 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Tue, 14 Sep 2021 20:06:25 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: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 #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)
+
+Fri, 17 Sep 2021 07:35:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.86..@fluentui/react-button_v9.0.0-alpha.87)
+
+### Changes
+
+- Modifying MenuButton to adhere to MenuTrigger changes. ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+- Updating API comments to be more descriptive. ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-button to v9.0.0-alpha.87 ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+
+## [9.0.0-alpha.86](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.86)
+
+Thu, 16 Sep 2021 07:38:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.85..@fluentui/react-button_v9.0.0-alpha.86)
+
+### Changes
+
+- Bump @fluentui/react-button to v9.0.0-alpha.86 ([PR #19815](https://github.com/microsoft/fluentui/pull/19815) by behowell@microsoft.com)
+
 ## [9.0.0-alpha.85](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.85)
 
-Tue, 14 Sep 2021 20:06:25 GMT 
+Tue, 14 Sep 2021 20:09:02 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.84..@fluentui/react-button_v9.0.0-alpha.85)
 
 ### Changes

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.
@@ -140,7 +154,7 @@ export declare const MenuButton: React_2.FunctionComponent<MenuButtonProps & Rea
 
 export declare type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';
 
-export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partial<MenuTriggerChildProps> & {
+export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partial<Omit<MenuTriggerChildProps, 'ref'>> & {
     /**
      * Menu icon that indicates that this button has a menu that can be expanded.
      */
@@ -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.
@@ -174,14 +187,72 @@ export declare const renderCompoundButton: (state: CompoundButtonState) => JSX.E
  */
 export declare const renderMenuButton: (state: MenuButtonState) => JSX.Element;
 
+/**
+ * Renders a SplitButton component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element;
+
+/**
+ * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
+ * action, while interacting with the second one opens a menu with secondary actions.
+ */
+export declare const SplitButton: React_2.ForwardRefExoticComponent<SplitButtonProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare type SplitButtonDefaultedProps = 'size';
+
+export declare interface SplitButtonProps extends Omit<ButtonProps, ButtonShorthandPropsCompat>, MenuButtonProps {
+    /**
+     * Button to perform primary action in SplitButton.
+     */
+    button?: ShorthandPropsCompat<ButtonProps>;
+    /**
+     * Button that opens menu with secondary actions in SplitButton.
+     */
+    menuButton?: ShorthandPropsCompat<MenuButtonProps>;
+    /**
+     * Ref to the Button element.
+     */
+    buttonRef?: React_2.Ref<HTMLElement>;
+    /**
+     * Ref to the MenuButton element.
+     */
+    menuButtonRef?: React_2.Ref<HTMLElement>;
+}
+
+export declare const splitButtonShorthandProps: SplitButtonShorthandPropsCompat[];
+
+export declare type SplitButtonShorthandPropsCompat = 'button' | 'menuButton';
+
+export declare interface SplitButtonState extends ComponentStateCompat<SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonDefaultedProps> {
+    /**
+     * Ref to the root element
+     */
+    ref: React_2.Ref<HTMLElement>;
+}
+
 /**
  * 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`.
@@ -196,21 +267,22 @@ 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, returns the final state for a Button.
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
  */
 export declare const useButton: (props: ButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;
 
 /**
- * The useButton hook processes the Button draft state.
- * @param state - Button draft state to mutate.
+ * The useButton hook processes the Button state.
+ * @param state - Button state to mutate.
  */
 export declare const useButtonState: (state: ButtonState) => ButtonState;
 
@@ -223,23 +295,44 @@ export declare const useButtonStyles: (state: ButtonState) => ButtonState;
 export declare const useChecked: <TState extends CheckedState>(state: TState) => void;
 
 /**
- * Given user props, returns the final state for a CompoundButton.
+ * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the CompoundButton component.
+ * @param ref - User provided ref to be passed to the CompoundButton component.
  */
 export declare const useCompoundButton: (props: CompoundButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => CompoundButtonState;
 
 export declare const useCompoundButtonStyles: (state: CompoundButtonState) => CompoundButtonState;
 
 /**
- * Given user props, returns the final state for a MenuButton.
+ * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
  */
 export declare const useMenuButton: (props: MenuButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => MenuButtonState;
 
+/**
+ * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any
+ * additional MenuButton specific processing.
+ * @param state - MenuButtonButton state to mutate.
+ */
 export declare const useMenuButtonState: (state: MenuButtonState) => MenuButtonState;
 
 export declare const useMenuButtonStyles: (state: MenuButtonState) => MenuButtonState;
 
 /**
- * Given user props, returns the final state for a ToggleButton.
+ * Given user props, defines default props for the SplitButton and returns processed state.
+ * @param props - User provided props to the SplitButton component.
+ * @param ref - User provided ref to be passed to the SplitButton component.
+ */
+export declare const useSplitButton: (props: SplitButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: SplitButtonProps | undefined) => SplitButtonState;
+
+export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;
+
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
  */
 export declare const useToggleButton: (props: ToggleButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState;
 

package/lib/SplitButton.d.ts

@@ -0,0 +1 @@
+export * from './components/SplitButton/index';

package/lib/SplitButton.js

@@ -0,0 +1,2 @@
+export * from './components/SplitButton/index';
+//# sourceMappingURL=SplitButton.js.map

package/lib/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sourceRoot":"../src/","sources":["SplitButton.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/SplitButton/index';\n"]}

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/Button/renderButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,0BAAT,QAA2C,aAA3C;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,0BAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAEG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAF/B,EAGG,CAAC,QAAD,IAAa,QAHhB,EAIG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAJ/B,CADF;AAQD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { buttonShorthandPropsCompat } from './useButton';\nimport type { ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton = (state: ButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, buttonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*{loading && <slots.loader {...slotProps.loader} />}*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && children}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,0BAAT,QAA2C,aAA3C;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,0BAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IAAa,QAFhB,EAGG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAH/B,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { buttonShorthandPropsCompat } from './useButton';\nimport type { ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton = (state: ButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, buttonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && children}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,6 +5,8 @@ import type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './But
  */
 export declare const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[];
 /**
- * Given user props, returns the final state for a Button.
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
  */
 export declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;

package/lib/components/Button/useButton.js

@@ -9,7 +9,9 @@ var mergeProps = /*#__PURE__*/makeMergeProps({
   deepMerge: buttonShorthandPropsCompat
 });
 /**
- * Given user props, returns the final state for a Button.
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
  */
 
 export var useButton = function (props, ref, defaultProps) {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,0BAA0B,GAAiC,CAAC,MAAD,CAAjE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAc;AAAE,EAAA,SAAS,EAAE;AAAb,CAAd,CAAjC;AAEA;;AAEG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAAkD,YAAlD,EAA4E;AACnG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,QAFN;AAGE;AACA,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJR;AAKE;AACA,IAAA,IAAI,EAAE,QANR;AAOE,IAAA,IAAI,EAAE;AAPR,GADsB,EAUtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,0BAAf,CAVf,EAWtB,qBAAqB,CAAC,KAAD,EAAQ,0BAAR,CAXC,CAAxB;AAcA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from './useButtonState';\nimport type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './Button.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[] = ['icon'];\n\nconst mergeProps = makeMergeProps<ButtonState>({ deepMerge: buttonShorthandPropsCompat });\n\n/**\n * Given user props, returns the final state for a Button.\n */\nexport const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps): ButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots\n      icon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, buttonShorthandPropsCompat),\n    resolveShorthandProps(props, buttonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,0BAA0B,GAAiC,CAAC,MAAD,CAAjE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAc;AAAE,EAAA,SAAS,EAAE;AAAb,CAAd,CAAjC;AAEA;;;;AAIG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAAkD,YAAlD,EAA4E;AACnG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,QAFN;AAGE;AACA,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJR;AAKE;AACA,IAAA,IAAI,EAAE,QANR;AAOE,IAAA,IAAI,EAAE;AAPR,GADsB,EAUtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,0BAAf,CAVf,EAWtB,qBAAqB,CAAC,KAAD,EAAQ,0BAAR,CAXC,CAAxB;AAcA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from './useButtonState';\nimport type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './Button.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[] = ['icon'];\n\nconst mergeProps = makeMergeProps<ButtonState>({ deepMerge: buttonShorthandPropsCompat });\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps): ButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots\n      icon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, buttonShorthandPropsCompat),\n    resolveShorthandProps(props, buttonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,6 +1,6 @@
 import type { ButtonState } from './Button.types';
 /**
- * The useButton hook processes the Button draft state.
- * @param state - Button draft state to mutate.
+ * The useButton hook processes the Button state.
+ * @param state - Button state to mutate.
  */
 export declare const useButtonState: (state: ButtonState) => ButtonState;

package/lib/components/Button/useButtonState.js

@@ -1,7 +1,7 @@
 import { Enter, Space } from '@fluentui/keyboard-keys';
 /**
- * The useButton hook processes the Button draft state.
- * @param state - Button draft state to mutate.
+ * The useButton hook processes the Button state.
+ * @param state - Button state to mutate.
  */
 
 export var useButtonState = function (state) {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param state - Button draft state to mutate.\n */\nexport const useButtonState = (state: ButtonState): ButtonState => {\n  const { as, children, disabled, disabledFocusable, icon, onClick, onKeyDown: onKeyDownCallback } = state;\n\n  const receivedChildren = !!children;\n  const receivedIcon = !!icon?.children;\n  state.iconOnly = receivedIcon && !receivedChildren;\n\n  const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDownCallback?.(ev);\n\n    const key = ev.key;\n    if (!ev.defaultPrevented && onClick && (key === Enter || key === Space)) {\n      // Translate the keydown enter/space to a click.\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      onClick((ev as unknown) as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>);\n    }\n  };\n\n  // Adjust props depending on the root type.\n  if (typeof as === 'string') {\n    // Add 'role=button' and 'tabIndex=0' for all non-button elements.\n    if (as !== 'button') {\n      state.role = 'button';\n      state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n      // Add keydown event handler for all other non-anchor elements.\n      if (as !== 'a') {\n        state.onKeyDown = onNonAnchorOrButtonKeyDown;\n      }\n    }\n  }\n  // Add keydown event handler, 'role=button' and 'tabIndex=0' for all other elements.\n  else {\n    state.onKeyDown = onNonAnchorOrButtonKeyDown;\n    state.role = 'button';\n    state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.onClick = (ev: React.MouseEvent<HTMLElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  const { onKeyDown } = state;\n  state.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const key = ev.key;\n    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = as === 'button' ? disabled && !disabledFocusable : undefined;\n  state['aria-disabled'] = disabled && !state.disabled;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button state.\n * @param state - Button state to mutate.\n */\nexport const useButtonState = (state: ButtonState): ButtonState => {\n  const { as, children, disabled, disabledFocusable, icon, onClick, onKeyDown: onKeyDownCallback } = state;\n\n  const receivedChildren = !!children;\n  const receivedIcon = !!icon?.children;\n  state.iconOnly = receivedIcon && !receivedChildren;\n\n  const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDownCallback?.(ev);\n\n    const key = ev.key;\n    if (!ev.defaultPrevented && onClick && (key === Enter || key === Space)) {\n      // Translate the keydown enter/space to a click.\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      onClick((ev as unknown) as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>);\n    }\n  };\n\n  // Adjust props depending on the root type.\n  if (typeof as === 'string') {\n    // Add 'role=button' and 'tabIndex=0' for all non-button elements.\n    if (as !== 'button') {\n      state.role = 'button';\n      state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n      // Add keydown event handler for all other non-anchor elements.\n      if (as !== 'a') {\n        state.onKeyDown = onNonAnchorOrButtonKeyDown;\n      }\n    }\n  }\n  // Add keydown event handler, 'role=button' and 'tabIndex=0' for all other elements.\n  else {\n    state.onKeyDown = onNonAnchorOrButtonKeyDown;\n    state.role = 'button';\n    state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.onClick = (ev: React.MouseEvent<HTMLElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  const { onKeyDown } = state;\n  state.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const key = ev.key;\n    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = as === 'button' ? disabled && !disabledFocusable : undefined;\n  state['aria-disabled'] = disabled && !state.disabled;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}