@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

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

@@ -1,130 +1,62 @@
-import * as React from 'react';
-import { ComponentProps, ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ColorTokens, RecursivePartial, SizeValue, FontTokens } from '@fluentui/theme';
-/**
- * {@docCategory Button}
- */
-export declare type ButtonProps = ComponentProps & React.HTMLAttributes<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;
+    root: ARIAButtonShorthandProps;
     /**
-     * Shorthand loader content within the button.
+     * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
      */
-    loader?: ShorthandProps;
+    icon?: IntrinsicShorthandProps<'span'>;
+};
+export declare type ButtonCommons = {
     /**
-     * Shorthand children content within the button.
+     * 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.
      */
-    content?: ShorthandProps;
+    appearance?: 'primary' | 'outline' | 'subtle' | 'transparent';
     /**
-     * Defines the href to navigate to. If applied, will render the button as an anchor
-     * element by default, unless `as` specifies otherwise. Note that specifying an href
-     * and a non-anchor as the render type will prevent the Button from behaving like a
-     * hyperlink and opening the href on click.
+     * A button can fill the width of its container.
+     * @default false
      */
-    href?: string;
+    block: boolean;
     /**
-     * Defines the target window to open the href in. Only is applied if the button renders
-     * as an anchor tag, which is the default behavior if href is provided.
+     * 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
      */
-    target?: string;
-    /** A button can appear circular. */
-    circular?: boolean;
-    /** A button can show that it cannot be interacted with. */
-    disabled?: boolean;
-    /** A button can fill the width of its container. */
-    block?: 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 that inherits its background and has a subtle appearance. */
-    inverted?: boolean;
-    /** Opt in to a named variant which can be supplied by a theme. */
-    variant?: string;
-    /** A button can show a loading indicator. */
-    loading?: boolean;
+    disabledFocusable: boolean;
     /**
-     * Called after a user clicks the button.
-     * @param event - React's original SyntheticEvent.
-     * @param data - All props.
+     * A button can show that it cannot be interacted with.
+     * @default false
      */
+    disabled: boolean;
     /**
-     * Called after a user focuses the button.
-     * @param event - React's original SyntheticEvent.
-     * @param data - All props.
+     * A button can format its icon to appear before or after its content.
+     * @default 'before'
      */
-    /** A button can emphasize that it represents the primary action. */
-    primary?: boolean;
-    /** A button can emphasize that it represents an alternative action. */
-    secondary?: boolean;
-    /** A button can blend into its background to become less emphasized. */
-    ghost?: boolean;
-    /** A button can have no background styling and just be emphasized through its content styling. */
-    transparent?: boolean;
-    /** A button can be sized. */
-    size?: SizeValue;
-    /** A button can be formatted to show only text in order to indicate a less-pronounced action. */
-    tokens?: RecursivePartial<ButtonTokens>;
-};
-/**
- * {@docCategory Button}
- */
-export interface ButtonState extends ButtonProps {
-    buttonRef?: React.RefObject<HTMLButtonElement>;
-}
-/**
- * {@docCategory Button}
- */
-export declare type ButtonTokens = ColorTokens & FontTokens & {
-    paddingLeft?: string;
-    paddingRight?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    margin?: string;
-    height?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    minHeight?: string;
-    contentGap?: string;
-    iconSize?: string;
-    borderRadius?: string;
-    borderTopLeftRadius?: string;
-    borderTopRightRadius?: string;
-    borderBottomLeftRadius?: string;
-    borderBottomRightRadius?: string;
-    borderWidth?: string;
-    boxShadow?: string;
-    width?: string;
-    forcedColorAdjust?: string;
-    transform?: string;
-    transition?: string;
-    size?: {
-        smallest?: string;
-        smaller?: string;
-        small?: string;
-        regular?: string;
-        large?: string;
-        larger?: string;
-        largest?: string;
-    };
-    pressed?: {
-        transform?: string;
-        transition?: string;
-    };
+    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';
 };
-/**
- * {@docCategory Button}
- */
-export declare type ButtonVariants<TTokens = ButtonTokens> = {
-    root?: TTokens;
-    block?: TTokens;
-    circular?: TTokens;
-    iconOnly?: TTokens;
-    ghost?: TTokens;
-    primary?: TTokens;
-    transparent?: TTokens;
+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-compose/lib/next/index';\nimport { ColorTokens, RecursivePartial, SizeValue, FontTokens } from '@fluentui/theme';\n\n/**\n * {@docCategory Button}\n */\nexport type ButtonProps = ComponentProps &\n  React.HTMLAttributes<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;\n\n    /**\n     * Shorthand loader content within the button.\n     */\n    loader?: ShorthandProps;\n\n    /**\n     * Shorthand children content within the button.\n     */\n    content?: ShorthandProps;\n\n    /**\n     * Defines the href to navigate to. If applied, will render the button as an anchor\n     * element by default, unless `as` specifies otherwise. Note that specifying an href\n     * and a non-anchor as the render type will prevent the Button from behaving like a\n     * hyperlink and opening the href on click.\n     */\n    href?: string;\n\n    /**\n     * Defines the target window to open the href in. Only is applied if the button renders\n     * as an anchor tag, which is the default behavior if href is provided.\n     */\n    target?: string;\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    /** 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 that inherits its background and has a subtle appearance. */\n    inverted?: boolean;\n\n    /** Opt in to a named variant which can be supplied by a theme. */\n    variant?: string;\n\n    /** A button can show a loading indicator. */\n    loading?: boolean;\n\n    /**\n     * Called after a user clicks the button.\n     * @param event - React's original SyntheticEvent.\n     * @param data - All props.\n     */\n    // onClick?: ComponentEventHandler<ButtonProps>;\n\n    /**\n     * Called after a user focuses the button.\n     * @param event - React's original SyntheticEvent.\n     * @param data - All props.\n     */\n    // onFocus?: ComponentEventHandler<ButtonProps>;\n\n    /** A button can emphasize that it represents the primary action. */\n    primary?: boolean;\n\n    /** A button can emphasize that it represents an alternative action. */\n    secondary?: boolean;\n\n    /** A button can blend into its background to become less emphasized. */\n    ghost?: 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?: SizeValue;\n\n    // TODO: Deprecate or rename to textOnly for alignment with iconOnly?\n    /** A button can be formatted to show only text in order to indicate a less-pronounced action. */\n    // text?: boolean;\n\n    tokens?: RecursivePartial<ButtonTokens>;\n  };\n\n/**\n * {@docCategory Button}\n */\nexport interface ButtonState extends ButtonProps {\n  buttonRef?: React.RefObject<HTMLButtonElement>;\n}\n\n/**\n * {@docCategory Button}\n */\nexport type ButtonTokens = ColorTokens &\n  FontTokens & {\n    /* sizing */\n    paddingLeft?: string;\n    paddingRight?: string;\n    paddingTop?: string;\n    paddingBottom?: string;\n    margin?: string;\n    height?: string;\n    minWidth?: string;\n    maxWidth?: string;\n    minHeight?: string;\n    contentGap?: string;\n    iconSize?: string;\n    borderRadius?: string;\n    borderTopLeftRadius?: string;\n    borderTopRightRadius?: string;\n    borderBottomLeftRadius?: string;\n    borderBottomRightRadius?: string;\n    borderWidth?: string;\n    boxShadow?: string;\n    width?: string;\n\n    forcedColorAdjust?: string;\n\n    transform?: string;\n    transition?: string;\n\n    size?: {\n      smallest?: string;\n      smaller?: string;\n      small?: string;\n      regular?: string;\n      large?: string;\n      larger?: string;\n      largest?: string;\n    };\n\n    pressed?: {\n      transform?: string;\n      transition?: string;\n    };\n  };\n\n/**\n * {@docCategory Button}\n */\nexport type ButtonVariants<TTokens = ButtonTokens> = {\n  root?: TTokens;\n  block?: TTokens;\n  circular?: TTokens;\n  iconOnly?: TTokens;\n  ghost?: TTokens;\n  primary?: TTokens;\n  transparent?: TTokens;\n};\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

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

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

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

@@ -1,8 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./useButtonClasses"), exports);
-tslib_1.__exportStar(require("./useButton"), exports);
-tslib_1.__exportStar(require("./useButtonState"), exports);
+
+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 = /*#__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,6DAAmC;AACnC,sDAA4B;AAC5B,2DAAiC;AACjC,mDAAyB","sourcesContent":["export * from './Button.types';\nexport * from './useButtonClasses';\nexport * from './useButton';\nexport * from './useButtonState';\nexport * from './Button';\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,19 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var index_1 = require("@fluentui/react-compose/lib-commonjs/next/index");
-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 = index_1.getSlots(state, useButton_1.buttonShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    var loading = state.loading, iconPosition = state.iconPosition, iconOnly = state.iconOnly;
-    return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-        loading && React.createElement(slots.loader, tslib_1.__assign({}, slotProps.loader)),
-        iconPosition !== 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
-        !iconOnly && React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
-        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,gEAAkE;AAElE,yCAAmD;AAEnD;;GAEG;AACU,QAAA,YAAY,GAAG,UAAC,KAAkB;IACvC,IAAA,8DAA4D,EAA1D,gBAAK,EAAE,wBAAmD,CAAC;IAC3D,IAAA,uBAAO,EAAE,iCAAY,EAAE,yBAAQ,CAAW;IAElD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;QAC3B,OAAO,IAAI,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI;QACjD,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;QAC9D,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;QACrD,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-compose/lib/next/index';\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.content {...slotProps.content} />}\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,13 +1,8 @@
 import * as React from 'react';
-import { ButtonProps } 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) => {
-    state: Record<string, any>;
-    render: (state: import("./Button.types").ButtonState) => JSX.Element;
-};
+export declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;

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

@@ -1,30 +1,64 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var index_1 = require("@fluentui/react-compose/lib-commonjs/next/index");
-var useButtonState_1 = require("./useButtonState");
-var renderButton_1 = require("./renderButton");
+
+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', 'loader', 'content'];
-var mergeProps = index_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: props.href ? 'a' : 'button',
-        icon: { as: 'span' },
-        content: { as: 'span', children: props.children },
-        loader: { as: 'span' },
-    }, defaultProps, index_1.resolveShorthandProps(props, exports.buttonShorthandProps));
-    useButtonState_1.useButtonState(state);
-    return { state: state, render: renderButton_1.renderButton };
+
+
+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

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

@@ -1 +1 @@
-{"version":3,"file":"useButton.js","sourceRoot":"../src/","sources":["components/Button/useButton.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,gEAA+F;AAE/F,mDAAkD;AAClD,+CAA8C;AAE9C;;GAEG;AACU,QAAA,oBAAoB,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAElE,IAAM,UAAU,GAAG,sBAAc,CAAC,EAAE,SAAS,EAAE,4BAAoB,EAAE,CAAC,CAAC;AAEvE;;GAEG;AACU,QAAA,SAAS,GAAG,UAAC,KAAkB,EAAE,GAA2B,EAAE,YAA0B;IACnG,oGAAoG;IACpG,4FAA4F;IAC5F,sDAAsD;IACtD,IAAM,WAAW,GAAG,GAAG,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;IAC1C,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,WAAW;QAChB,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ;QAC/B,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;QACpB,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;QACjD,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;KACvB,EACD,YAAY,EACZ,6BAAqB,CAAC,KAAK,EAAE,4BAAoB,CAAC,CACnD,CAAC;IAEF,+BAAc,CAAC,KAAK,CAAC,CAAC;IAEtB,OAAO,EAAE,KAAK,OAAA,EAAE,MAAM,EAAE,2BAAY,EAAE,CAAC;AACzC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index';\nimport { ButtonProps } from './Button.types';\nimport { useButtonState } from './useButtonState';\nimport { renderButton } from './renderButton';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandProps = ['icon', 'loader', 'content'];\n\nconst mergeProps = makeMergeProps({ deepMerge: buttonShorthandProps });\n\n/**\n * Given user props, returns state and render function for a Button.\n */\nexport const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps) => {\n  // Ensure that the `ref` prop can be used by other things (like useFocusRects) to refer to the root.\n  // NOTE: We are assuming refs should not mutate to undefined. Either they are passed or not.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const resolvedRef = ref || React.useRef();\n  const state = mergeProps(\n    {\n      ref: resolvedRef,\n      as: props.href ? 'a' : 'button',\n      icon: { as: 'span' },\n      content: { as: 'span', children: props.children },\n      loader: { as: 'span' },\n    },\n    defaultProps,\n    resolveShorthandProps(props, buttonShorthandProps),\n  );\n\n  useButtonState(state);\n\n  return { state, render: renderButton };\n};\n"]}
+{"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAA0E;AAE/F,MAAA,UAAU,GASR,KAAK,CATG,UAAV;AAAA,MACA,EAAE,GAQA,KAAK,CARL,EADF;AAAA,MAEA,EAAA,GAOE,KAAK,CAPM,KAFb;AAAA,MAEA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAFb;AAAA,MAGA,EAAA,GAME,KAAK,CANS,QAHhB;AAAA,MAGA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAHhB;AAAA,MAIA,EAAA,GAKE,KAAK,CALkB,iBAJzB;AAAA,MAIA,iBAAiB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAJzB;AAAA,MAKA,IAAI,GAIF,KAAK,CAJH,IALJ;AAAA,MAMA,EAAA,GAGE,KAAK,CAHgB,YANvB;AAAA,MAMA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EANvB;AAAA,MAOA,EAAA,GAEE,KAAK,CAFU,KAPjB;AAAA,MAOA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAH,GAAY,EAPjB;AAAA,MAQA,EAAA,GACE,KAAK,CADQ,IARf;AAAA,MAQA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EARf;AAUF,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;AAEA,SAAO;AACL;AACA,IAAA,UAAU,EAAA,UAFL;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,QAAQ,EAAA,QAJH;AAKL,IAAA,iBAAiB,EAAA,iBALZ;AAML,IAAA,YAAY,EAAA,YANP;AAOL,IAAA,KAAK,EAAA,KAPA;AAQL,IAAA,IAAI,EAAA,IARC;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAc,KAAd,EAAqB;AACnB,MAAA,QAAQ,EAAE,IADS;AAEnB,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE;AAHM;AAFK,KAArB,CAFI,CAnBD;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CA9CM;;AAAM,OAAA,CAAA,SAAA,GAAS,SAAT","sourceRoot":""}

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

@@ -0,0 +1,10 @@
+import type { ButtonState } from './Button.types';
+export declare const buttonSpacing: {
+    smallest: string;
+    smaller: string;
+    small: string;
+    medium: string;
+    large: string;
+    larger: string;
+};
+export declare const useButtonStyles: (state: ButtonState) => ButtonState;