@fluentui/react-button 9.0.0-alpha.10 → 9.0.0-alpha.100

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC","sourcesContent":["export * from './Button';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib-commonjs/Button.js

@@ -1,5 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./components/Button/index"), exports);
 //# sourceMappingURL=Button.js.map

package/lib-commonjs/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"../src/","sources":["Button.tsx"],"names":[],"mappings":";;;AAAA,oEAA0C","sourcesContent":["export * from './components/Button/index';\n"]}
+{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/CompoundButton.d.ts

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

package/lib-commonjs/CompoundButton.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/CompoundButton/index"), exports);
+//# sourceMappingURL=CompoundButton.js.map

package/lib-commonjs/CompoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CompoundButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/MenuButton.d.ts

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

package/lib-commonjs/MenuButton.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/MenuButton/index"), exports);
+//# sourceMappingURL=MenuButton.js.map

package/lib-commonjs/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MenuButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/SplitButton.d.ts

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

package/lib-commonjs/SplitButton.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/SplitButton/index"), exports);
+//# sourceMappingURL=SplitButton.js.map

package/lib-commonjs/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SplitButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/ToggleButton.d.ts

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

package/lib-commonjs/ToggleButton.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/ToggleButton/index"), exports);
+//# sourceMappingURL=ToggleButton.js.map

package/lib-commonjs/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/common/isConformant.d.ts

@@ -1,2 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>): void;
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib-commonjs/common/isConformant.js

@@ -1,13 +1,24 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_conformance_1 = require("@fluentui/react-conformance");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isConformant = void 0;
+
+var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
+
+var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
+
 function isConformant(testInfo) {
-    var defaultOptions = {
-        asPropHandlesRef: true,
-        componentPath: module.parent.filename.replace('.test', ''),
-        disabledTests: ['has-docblock', 'kebab-aria-attributes'],
-    };
-    react_conformance_1.isConformant(defaultOptions, testInfo);
+  var defaultOptions = {
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', ''),
+    disabledTests: ['has-docblock', 'kebab-aria-attributes'],
+    extraTests: react_conformance_make_styles_1.default,
+    skipAsPropTests: true
+  };
+  react_conformance_1.isConformant(defaultOptions, testInfo);
 }
+
 exports.isConformant = isConformant;
 //# sourceMappingURL=isConformant.js.map

package/lib-commonjs/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;AAAA,iEAAoG;AAEpG,SAAgB,YAAY,CAAC,QAAoD;IAC/E,IAAM,cAAc,GAAG;QACrB,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;QAC5D,aAAa,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;KACzD,CAAC;IAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AARD,oCAQC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>) {\n  const defaultOptions = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    disabledTests: ['has-docblock', 'kebab-aria-attributes'],\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,EAAiB,uBAAjB,CAH4C;AAI3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAZD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}

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

@@ -1,13 +1,6 @@
-import * as React from 'react';
+import type { ButtonProps } from './Button.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled Button, using the `useButton` hook.
- * {@docCategory Button}
+ * Buttons give people a way to trigger an action.
  */
-export declare const Button: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentProps & React.ButtonHTMLAttributes<HTMLElement> & {
-    icon?: import("@fluentui/react-utilities").ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    disabled?: boolean | undefined;
-    iconOnly?: boolean | undefined;
-    iconPosition?: "after" | "before" | undefined;
-    primary?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-} & React.RefAttributes<HTMLElement>>;
+export declare const Button: ForwardRefComponent<ButtonProps>;

package/lib-commonjs/components/Button/Button.js

@@ -1,26 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var useButton_1 = require("./useButton");
-var renderButton_1 = require("./renderButton");
-var useButtonStyles_1 = require("./useButtonStyles");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+
+var React = /*#__PURE__*/require("react");
+
+var renderButton_1 = /*#__PURE__*/require("./renderButton");
+
+var useButton_1 = /*#__PURE__*/require("./useButton");
+
+var useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
 /**
- * Define a styled Button, using the `useButton` hook.
- * {@docCategory Button}
+ * Buttons give people a way to trigger an action.
  */
-exports.Button = React.forwardRef(function (props, ref) {
-    var _a, _b;
-    var state = useButton_1.useButton(props, ref);
-    var receivedChildren = !!((_a = state.children) === null || _a === void 0 ? void 0 : _a.children);
-    var receivedIcon = !!((_b = state.icon) === null || _b === void 0 ? void 0 : _b.children);
-    var styleSelectors = {
-        disabled: state.disabled,
-        primary: state.primary,
-        iconOnly: receivedIcon && !receivedChildren,
-        size: state.size,
-    };
-    useButtonStyles_1.useButtonStyles(state, styleSelectors);
-    return renderButton_1.renderButton(state);
+
+
+exports.Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useButton_1.useButton(props, ref);
+  useButtonStyles_1.useButtonStyles(state);
+  return renderButton_1.renderButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 exports.Button.displayName = 'Button';
 //# sourceMappingURL=Button.js.map

package/lib-commonjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"../src/","sources":["components/Button/Button.tsx"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,yCAAwC;AAExC,+CAA8C;AAC9C,qDAAoD;AAEpD;;;GAGG;AACU,QAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAA2B,UAAC,KAAK,EAAE,GAAG;;IAC1E,IAAM,KAAK,GAAG,qBAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEpC,IAAM,gBAAgB,GAAG,CAAC,QAAC,KAAK,CAAC,QAAQ,0CAAE,QAAQ,CAAA,CAAC;IACpD,IAAM,YAAY,GAAG,CAAC,QAAC,KAAK,CAAC,IAAI,0CAAE,QAAQ,CAAA,CAAC;IAE5C,IAAM,cAAc,GAAyB;QAC3C,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,QAAQ,EAAE,YAAY,IAAI,CAAC,gBAAgB;QAC3C,IAAI,EAAE,KAAK,CAAC,IAAI;KACjB,CAAC;IAEF,iCAAe,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;IAEvC,OAAO,2BAAY,CAAC,KAAK,CAAC,CAAC;AAC7B,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { useButton } from './useButton';\nimport { ButtonProps, ButtonStyleSelectors } from './Button.types';\nimport { renderButton } from './renderButton';\nimport { useButtonStyles } from './useButtonStyles';\n\n/**\n * Define a styled Button, using the `useButton` hook.\n * {@docCategory Button}\n */\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>((props, ref) => {\n  const state = useButton(props, ref);\n\n  const receivedChildren = !!state.children?.children;\n  const receivedIcon = !!state.icon?.children;\n\n  const styleSelectors: ButtonStyleSelectors = {\n    disabled: state.disabled,\n    primary: state.primary,\n    iconOnly: receivedIcon && !receivedChildren,\n    size: state.size,\n  };\n\n  useButtonStyles(state, styleSelectors);\n\n  return renderButton(state);\n});\n\nButton.displayName = 'Button';\n"]}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAAd;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,cAAA,CAAA,YAAA,CAAa,KAAb,CAAP,CALkF,CAMlF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}

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

@@ -1,65 +1,62 @@
-import * as React from 'react';
-import { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
-export declare type ButtonProps = ComponentProps & React.ButtonHTMLAttributes<HTMLElement> & {
+import { ARIAButtonShorthandProps } from '@fluentui/react-aria';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type ButtonSlots = {
     /**
-     * Shorthand icon. A shorthand prop can be a literal, object, or
-     * JSX. The `children` prop of the object can be a render function,
-     * taking in the original slot component and props.
+     * Root of the component that renders as either a <button> tag.
      */
-    icon?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    /** A button can show that it cannot be interacted with. */
-    disabled?: boolean;
-    /** A button can contain only an icon. */
-    iconOnly?: boolean;
-    /** An icon button can format its icon to appear before or after its content. */
-    iconPosition?: 'before' | 'after';
-    /** A button can emphasize that it represents the primary action. */
-    primary?: boolean;
-    /** A button can be sized. */
-    size?: 'small' | 'large';
-};
-/**
- * {@docCategory Button}
- */
-export interface ButtonState extends ButtonProps {
-    ref: React.RefObject<HTMLButtonElement>;
-    icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    children?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-}
-export declare type ButtonStyleSelectors = {
-    disabled?: boolean;
-    iconOnly?: boolean;
-    primary?: boolean;
-    size?: string;
+    root: ARIAButtonShorthandProps;
+    /**
+     * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
+     */
+    icon?: IntrinsicShorthandProps<'span'>;
 };
-export declare type ButtonVariants = 'base' | 'disabled' | 'iconOnly' | 'primary' | 'small' | 'large' | 'primaryDisabled' | 'iconOnlySmall' | 'iconOnlyLarge';
-export declare type ButtonTokens = {
-    height: string;
-    paddingX: string;
-    paddingY: string;
-    minWidth: string;
-    maxWidth: string;
-    fontSize: string;
-    fontWeight: number;
-    lineHeight: string;
-    iconWidth: string;
-    iconHeight: string;
-    iconSpacing: string;
-    color: string;
-    content2Color: string;
-    background: string;
-    backgroundHover: string;
-    backgroundPressed: string;
-    backgroundActive: string;
-    borderColor: string;
-    borderColorHover: string;
-    borderColorActive: string;
-    borderWidth: string;
-    borderRadius: string;
-    shadow: string;
-    shadowPressed: string;
+export declare type ButtonCommons = {
+    /**
+     * A button can have its content and borders styled for greater emphasis or to be subtle.
+     * - 'primary': Emphasizes the button as a primary action.
+     * - 'outline': Removes background styling.
+     * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     * - 'transparent': Removes background and border styling.
+     */
+    appearance?: 'primary' | 'outline' | 'subtle' | 'transparent';
+    /**
+     * A button can fill the width of its container.
+     * @default false
+     */
+    block: boolean;
+    /**
+     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
+     * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
+     * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
+     * @default false
+     */
+    disabledFocusable: boolean;
+    /**
+     * A button can show that it cannot be interacted with.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * A button can format its icon to appear before or after its content.
+     * @default 'before'
+     */
+    iconPosition: 'before' | 'after';
+    /**
+     * A button can be rounded, circular, or square.
+     * @default 'rounded'
+     */
+    shape: 'rounded' | 'circular' | 'square';
+    /**
+     * A button supports different sizes.
+     * @default 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
 };
-export declare type ButtonVariantTokens = {
-    [variant in ButtonVariants]: Partial<ButtonTokens>;
+export declare type ButtonProps = ComponentProps<ButtonSlots> & Partial<ButtonCommons>;
+export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
+    /**
+     * A button can contain only an icon.
+     * @default false
+     */
+    iconOnly: boolean;
 };

package/lib-commonjs/components/Button/Button.types.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=Button.types.js.map

package/lib-commonjs/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 { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';\nimport { ObjectShorthandProps } from '@fluentui/react-utilities';\n\nexport type ButtonProps = ComponentProps &\n  React.ButtonHTMLAttributes<HTMLElement> & {\n    /**\n     * Shorthand icon. A shorthand prop can be a literal, object, or\n     * JSX. The `children` prop of the object can be a render function,\n     * taking in the original slot component and props.\n     */\n    icon?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;\n\n    // TODO: children needs a new typing to handle render functions along with hook updates for children functionality\n    // children?: ???;\n\n    // /** A button can appear circular. */\n    // circular?: boolean;\n\n    /** A button can show that it cannot be interacted with. */\n    disabled?: boolean;\n\n    // /**\n    // eslint-disable-next-line @fluentui/max-len\n    //  * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it is\n    //  * important to keep a consistent tab order for screen reader and keyboard users.\n    //  * @defaultvalue false\n    //  */\n    // disabledFocusable?: boolean;\n\n    // /** A button can fill the width of its container. */\n    // block?: boolean;\n\n    /** A button can contain only an icon. */\n    iconOnly?: boolean;\n\n    /** An icon button can format its icon to appear before or after its content. */\n    iconPosition?: 'before' | 'after';\n\n    // /** A button can show a loading indicator. */\n    // loading?: boolean;\n\n    /** A button can emphasize that it represents the primary action. */\n    primary?: boolean;\n\n    // /** A button can blend into its background to become less emphasized. */\n    // subtle?: boolean;\n\n    // /** A button can have no background styling and just be emphasized through its content styling. */\n    // transparent?: boolean;\n\n    /** A button can be sized. */\n    size?: 'small' | 'large';\n  };\n\n/**\n * {@docCategory Button}\n */\nexport interface ButtonState extends ButtonProps {\n  ref: React.RefObject<HTMLButtonElement>;\n\n  icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;\n  children?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;\n}\n\nexport type ButtonStyleSelectors = {\n  disabled?: boolean;\n  iconOnly?: boolean;\n  primary?: boolean;\n  size?: string;\n};\n\nexport type ButtonVariants =\n  | 'base'\n  | 'disabled'\n  | 'iconOnly'\n  | 'primary'\n  | 'small'\n  | 'large'\n  // TODO: get rid of these combinations, use individual variants in matchers\n  | 'primaryDisabled'\n  | 'iconOnlySmall'\n  | 'iconOnlyLarge';\n\nexport type ButtonTokens = {\n  height: string;\n  paddingX: string;\n  paddingY: string;\n  minWidth: string;\n  maxWidth: string;\n\n  fontSize: string;\n  fontWeight: number;\n  lineHeight: string;\n\n  iconWidth: string;\n  iconHeight: string;\n  iconSpacing: string;\n\n  color: string;\n  content2Color: string;\n\n  background: string;\n  backgroundHover: string;\n  backgroundPressed: string;\n  backgroundActive: string;\n\n  borderColor: string;\n  borderColorHover: string;\n  borderColorActive: string;\n  borderWidth: string;\n  borderRadius: string;\n\n  shadow: string;\n  shadowPressed: string;\n};\n\nexport type ButtonVariantTokens = {\n  [variant in ButtonVariants]: Partial<ButtonTokens>;\n};\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

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

@@ -1,6 +1,5 @@
-export * from './Button.types';
 export * from './Button';
+export * from './Button.types';
 export * from './renderButton';
 export * from './useButton';
 export { useButtonStyles } from './useButtonStyles';
-export * from './useButtonState';

package/lib-commonjs/components/Button/index.js

@@ -1,10 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButtonStyles = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./Button"), exports);
+
+tslib_1.__exportStar(require("./Button.types"), exports);
+
 tslib_1.__exportStar(require("./renderButton"), exports);
+
 tslib_1.__exportStar(require("./useButton"), exports);
-var useButtonStyles_1 = require("./useButtonStyles");
-exports.useButtonStyles = useButtonStyles_1.useButtonStyles;
-tslib_1.__exportStar(require("./useButtonState"), exports);
+
+var useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
+
+Object.defineProperty(exports, "useButtonStyles", {
+  enumerable: true,
+  get: function () {
+    return useButtonStyles_1.useButtonStyles;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Button/index.ts"],"names":[],"mappings":";;;AACA,mDAAyB;AACzB,yDAA+B;AAC/B,sDAA4B;AAC5B,qDAAoD;AAA3C,4CAAA,eAAe,CAAA;AACxB,2DAAiC","sourcesContent":["export * from './Button.types';\nexport * from './Button';\nexport * from './renderButton';\nexport * from './useButton';\nexport { useButtonStyles } from './useButtonStyles';\nexport * from './useButtonState';\n"]}
+{"version":3,"sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA","sourceRoot":""}

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

@@ -1,5 +1,5 @@
-import { ButtonState } from './Button.types';
+import type { ButtonState } from './Button.types';
 /**
- * Define the render function. Given the state of a button, renders it.
+ * Renders a Button component by passing the state defined props to the appropriate slots.
  */
 export declare const renderButton: (state: ButtonState) => JSX.Element;

package/lib-commonjs/components/Button/renderButton.js

@@ -1,18 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var useButton_1 = require("./useButton");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderButton = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
- * Define the render function. Given the state of a button, renders it.
+ * Renders a Button component by passing the state defined props to the appropriate slots.
  */
-exports.renderButton = function (state) {
-    var _a = react_utilities_1.getSlots(state, useButton_1.buttonShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    var /*loading,*/ iconPosition = state.iconPosition, iconOnly = state.iconOnly;
-    return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-        iconPosition !== 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
-        !iconOnly && React.createElement(slots.children, tslib_1.__assign({}, slotProps.children)),
-        iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
+
+
+var renderButton = function (state) {
+  var _a = react_utilities_1.getSlots(state, ['root', 'icon']),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  var iconOnly = state.iconOnly,
+      iconPosition = state.iconPosition;
+  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), iconPosition !== 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), !iconOnly && state.root.children, iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)));
 };
+
+exports.renderButton = renderButton;
 //# sourceMappingURL=renderButton.js.map

package/lib-commonjs/components/Button/renderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderButton.js","sourceRoot":"../src/","sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,6DAAqD;AAErD,yCAAmD;AAEnD;;GAEG;AACU,QAAA,YAAY,GAAG,UAAC,KAAkB;IACvC,IAAA,wEAA4D,EAA1D,gBAAK,EAAE,wBAAmD,CAAC;IAC9C,IAAb,YAAY,CAAC,iCAAY,EAAE,yBAAQ,CAAW;IAEtD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;QAE3B,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;QAC9D,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI;QACvD,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACpD,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ButtonState } from './Button.types';\nimport { buttonShorthandProps } from './useButton';\n\n/**\n * Define the render function. Given the state of a button, renders it.\n */\nexport const renderButton = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots(state, buttonShorthandProps);\n  const { /*loading,*/ iconPosition, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*{loading && <slots.loader {...slotProps.loader} />}*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && <slots.children {...slotProps.children} />}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,EAA6B,CAAC,MAAD,EAAS,MAAT,CAA7B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAR;AAAA,MAAU,YAAY,GAAK,KAAK,CAAV,YAAtB;AAER,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAH/B,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourceRoot":""}

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { ButtonProps, ButtonState } from './Button.types';
+import type { ButtonProps, ButtonState } from './Button.types';
 /**
- * Consts listing which props are shorthand props.
+ * 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 buttonShorthandProps: string[];
-/**
- * Given user props, returns state and render function for a Button.
- */
-export declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;
+export declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;

package/lib-commonjs/components/Button/useButton.js

@@ -1,29 +1,64 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var useButtonState_1 = require("./useButtonState");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButton = void 0;
+
+var react_aria_1 = /*#__PURE__*/require("@fluentui/react-aria");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
- * Consts listing which props are shorthand props.
+ * 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.
  */
-exports.buttonShorthandProps = ['icon', 'children'];
-var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.buttonShorthandProps });
-/**
- * Given user props, returns state and render function for a Button.
- */
-exports.useButton = function (props, ref, defaultProps) {
-    // Ensure that the `ref` prop can be used by other things (like useFocusRects) to refer to the root.
-    // NOTE: We are assuming refs should not mutate to undefined. Either they are passed or not.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var resolvedRef = ref || React.useRef();
-    var state = mergeProps({
-        ref: resolvedRef,
-        as: 'button',
-        icon: { as: 'span' },
-        content: { as: 'span', children: props.children },
-        loader: { as: 'span' },
-    }, defaultProps, react_utilities_1.resolveShorthandProps(props, exports.buttonShorthandProps));
-    useButtonState_1.useButtonState(state);
-    return state;
+
+
+var useButton = function (props, ref) {
+  var appearance = props.appearance,
+      as = props.as,
+      _a = props.block,
+      block = _a === void 0 ? false : _a,
+      _b = props.disabled,
+      disabled = _b === void 0 ? false : _b,
+      _c = props.disabledFocusable,
+      disabledFocusable = _c === void 0 ? false : _c,
+      icon = props.icon,
+      _d = props.iconPosition,
+      iconPosition = _d === void 0 ? 'before' : _d,
+      _e = props.shape,
+      shape = _e === void 0 ? 'rounded' : _e,
+      _f = props.size,
+      size = _f === void 0 ? 'medium' : _f;
+  var iconShorthand = react_utilities_1.resolveShorthand(icon);
+  return {
+    // Props passed at the top-level
+    appearance: appearance,
+    block: block,
+    disabled: disabled,
+    disabledFocusable: disabledFocusable,
+    iconPosition: iconPosition,
+    shape: shape,
+    size: size,
+    // State calculated from a set of props
+    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+    // Slots definition
+    components: {
+      root: 'button',
+      icon: 'span'
+    },
+    root: react_utilities_1.getNativeElementProps(as || 'button', react_aria_1.useARIAButton(props, {
+      required: true,
+      defaultProps: {
+        // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>
+        ref: ref,
+        type: 'button'
+      }
+    })),
+    icon: iconShorthand
+  };
 };
+
+exports.useButton = useButton;
 //# sourceMappingURL=useButton.js.map