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

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

@@ -1,24 +0,0 @@
-define(["require", "exports", "react", "./useButton", "./renderButton", "./useButtonStyles"], function (require, exports, React, useButton_1, renderButton_1, useButtonStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Define a styled Button, using the `useButton` hook.
-     * {@docCategory Button}
-     */
-    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.displayName = 'Button';
-});
-//# sourceMappingURL=Button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"../src/","sources":["components/Button/Button.tsx"],"names":[],"mappings":";;;IAMA;;;OAGG;IACU,QAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAA2B,UAAC,KAAK,EAAE,GAAG;;QAC1E,IAAM,KAAK,GAAG,qBAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEpC,IAAM,gBAAgB,GAAG,CAAC,QAAC,KAAK,CAAC,QAAQ,0CAAE,QAAQ,CAAA,CAAC;QACpD,IAAM,YAAY,GAAG,CAAC,QAAC,KAAK,CAAC,IAAI,0CAAE,QAAQ,CAAA,CAAC;QAE5C,IAAM,cAAc,GAAyB;YAC3C,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,QAAQ,EAAE,YAAY,IAAI,CAAC,gBAAgB;YAC3C,IAAI,EAAE,KAAK,CAAC,IAAI;SACjB,CAAC;QAEF,iCAAe,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;QAEvC,OAAO,2BAAY,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,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"]}

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

@@ -1,65 +0,0 @@
-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> & {
-    /**
-     * 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.
-     */
-    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;
-};
-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 ButtonVariantTokens = {
-    [variant in ButtonVariants]: Partial<ButtonTokens>;
-};

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

@@ -1,5 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
-//# sourceMappingURL=Button.types.js.map

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

@@ -1 +0,0 @@
-{"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"]}

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

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

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

@@ -1,10 +0,0 @@
-define(["require", "exports", "tslib", "./Button", "./renderButton", "./useButton", "./useButtonStyles", "./useButtonState"], function (require, exports, tslib_1, Button_1, renderButton_1, useButton_1, useButtonStyles_1, useButtonState_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Button_1, exports);
-    tslib_1.__exportStar(renderButton_1, exports);
-    tslib_1.__exportStar(useButton_1, exports);
-    exports.useButtonStyles = useButtonStyles_1.useButtonStyles;
-    tslib_1.__exportStar(useButtonState_1, exports);
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Button/index.ts"],"names":[],"mappings":";;;IACA,wCAAyB;IACzB,8CAA+B;IAC/B,2CAA4B;IACnB,4CAAA,eAAe,CAAA;IACxB,gDAAiC","sourcesContent":["export * from './Button.types';\nexport * from './Button';\nexport * from './renderButton';\nexport * from './useButton';\nexport { useButtonStyles } from './useButtonStyles';\nexport * from './useButtonState';\n"]}

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

@@ -1,5 +0,0 @@
-import { ButtonState } from './Button.types';
-/**
- * Define the render function. Given the state of a button, renders it.
- */
-export declare const renderButton: (state: ButtonState) => JSX.Element;

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

@@ -1,16 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useButton"], function (require, exports, tslib_1, React, react_utilities_1, useButton_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Define the render function. Given the state of a button, renders it.
-     */
-    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))));
-    };
-});
-//# sourceMappingURL=renderButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderButton.js","sourceRoot":"../src/","sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;IAKA;;OAEG;IACU,QAAA,YAAY,GAAG,UAAC,KAAkB;QACvC,IAAA,wEAA4D,EAA1D,gBAAK,EAAE,wBAAmD,CAAC;QAC9C,IAAb,YAAY,CAAC,iCAAY,EAAE,yBAAQ,CAAW;QAEtD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAE3B,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC9D,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI;YACvD,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACpD,CACd,CAAC;IACJ,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"]}

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

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ButtonProps, ButtonState } from './Button.types';
-/**
- * Consts listing which props are shorthand props.
- */
-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;

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

@@ -1,28 +0,0 @@
-define(["require", "exports", "react", "@fluentui/react-utilities", "./useButtonState"], function (require, exports, React, react_utilities_1, useButtonState_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Consts listing which props are shorthand props.
-     */
-    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;
-    };
-});
-//# sourceMappingURL=useButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useButton.js","sourceRoot":"../src/","sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;IAKA;;OAEG;IACU,QAAA,oBAAoB,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAEzD,IAAM,UAAU,GAAG,gCAAc,CAAc,EAAE,SAAS,EAAE,4BAAoB,EAAE,CAAC,CAAC;IAEpF;;OAEG;IACU,QAAA,SAAS,GAAG,UAAC,KAAkB,EAAE,GAA2B,EAAE,YAA0B;QACnG,oGAAoG;QACpG,4FAA4F;QAC5F,sDAAsD;QACtD,IAAM,WAAW,GAAG,GAAG,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QAC1C,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,EAAE,WAAW;YAChB,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACpB,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;YACjD,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;SACvB,EACD,YAAY,EACZ,uCAAqB,CAAC,KAAK,EAAE,4BAAoB,CAAC,CACnD,CAAC;QAEF,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonState } from './Button.types';\nimport { useButtonState } from './useButtonState';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandProps = ['icon', 'children'];\n\nconst mergeProps = makeMergeProps<ButtonState>({ 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): ButtonState => {\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: '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;\n};\n"]}

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

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

package/lib-amd/components/Button/useButtonState.js

@@ -1,48 +0,0 @@
-define(["require", "exports", "@fluentui/keyboard-key"], function (require, exports, keyboard_key_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * The useButton hook processes the Button draft state.
-     * @param draftState - Button draft state to mutate.
-     */
-    exports.useButtonState = function (draftState) {
-        if (draftState.as !== 'button') {
-            draftState.role = 'button';
-            if (draftState.as !== 'a') {
-                var onClickCallback_1 = draftState.onClick, onKeyDownCallback_1 = draftState.onKeyDown;
-                draftState.tabIndex = 0;
-                draftState.onKeyDown = function (ev) {
-                    if (onKeyDownCallback_1) {
-                        onKeyDownCallback_1(ev);
-                    }
-                    var keyCode = keyboard_key_1.getCode(ev);
-                    if (!ev.defaultPrevented && onClickCallback_1 && (keyCode === keyboard_key_1.EnterKey || keyCode === keyboard_key_1.SpacebarKey)) {
-                        // Translate the keydown enter/space to a click.
-                        ev.preventDefault();
-                        ev.stopPropagation();
-                        ev.target.click();
-                    }
-                };
-            }
-        }
-        // Disallow click and keyboard events when component is disabled and eat events when disabledFocusable is set to true.
-        var disabled = draftState.disabled, /* disabledFocusable, */ onKeyDown = draftState.onKeyDown;
-        if (disabled) {
-            draftState.onClick = undefined;
-        }
-        draftState.onKeyDown = function (ev) {
-            var _a;
-            var keyCode = keyboard_key_1.getCode(ev);
-            if (disabled && (keyCode === keyboard_key_1.EnterKey || keyCode === keyboard_key_1.SpacebarKey)) {
-                ev.preventDefault();
-                ev.stopPropagation();
-            }
-            else {
-                (_a = onKeyDown) === null || _a === void 0 ? void 0 : _a(ev);
-            }
-        };
-        draftState['aria-disabled'] = disabled /* || disabledFocusable*/;
-        draftState.disabled = draftState.as === 'button' ? disabled /* && !disabledFocusable */ : undefined;
-    };
-});
-//# sourceMappingURL=useButtonState.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":";;;IAIA;;;OAGG;IACU,QAAA,cAAc,GAAG,UAAC,UAAuB;QACpD,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE;YAC9B,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;YAE3B,IAAI,UAAU,CAAC,EAAE,KAAK,GAAG,EAAE;gBACjB,IAAA,sCAAwB,EAAE,0CAA4B,CAAgB;gBAE9E,UAAU,CAAC,QAAQ,GAAG,CAAC,CAAC;gBAExB,UAAU,CAAC,SAAS,GAAG,UAAC,EAAoC;oBAC1D,IAAI,mBAAiB,EAAE;wBACrB,mBAAiB,CAAC,EAAE,CAAC,CAAC;qBACvB;oBAED,IAAM,OAAO,GAAG,sBAAO,CAAC,EAAE,CAAC,CAAC;oBAC5B,IAAI,CAAC,EAAE,CAAC,gBAAgB,IAAI,iBAAe,IAAI,CAAC,OAAO,KAAK,uBAAQ,IAAI,OAAO,KAAK,0BAAW,CAAC,EAAE;wBAChG,gDAAgD;wBAChD,EAAE,CAAC,cAAc,EAAE,CAAC;wBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;wBAEpB,EAAE,CAAC,MAAsB,CAAC,KAAK,EAAE,CAAC;qBACpC;gBACH,CAAC,CAAC;aACH;SACF;QAED,sHAAsH;QAC9G,IAAA,8BAAQ,EAAE,wBAAwB,CAAC,gCAAS,CAAgB;QACpE,IAAI,QAAQ,EAAE;YACZ,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC;SAChC;QACD,UAAU,CAAC,SAAS,GAAG,UAAC,EAAoC;;YAC1D,IAAM,OAAO,GAAG,sBAAO,CAAC,EAAE,CAAC,CAAC;YAC5B,IAAI,QAAQ,IAAI,CAAC,OAAO,KAAK,uBAAQ,IAAI,OAAO,KAAK,0BAAW,CAAC,EAAE;gBACjE,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;aACtB;iBAAM;gBACL,MAAA,SAAS,0CAAG,EAAE,EAAE;aACjB;QACH,CAAC,CAAC;QAEF,UAAU,CAAC,eAAe,CAAC,GAAG,QAAQ,CAAC,yBAAyB,CAAC;QACjE,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS,CAAC;IACtG,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getCode, EnterKey, SpacebarKey } from '@fluentui/keyboard-key';\nimport { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param draftState - Button draft state to mutate.\n */\nexport const useButtonState = (draftState: ButtonState) => {\n  if (draftState.as !== 'button') {\n    draftState.role = 'button';\n\n    if (draftState.as !== 'a') {\n      const { onClick: onClickCallback, onKeyDown: onKeyDownCallback } = draftState;\n\n      draftState.tabIndex = 0;\n\n      draftState.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n        if (onKeyDownCallback) {\n          onKeyDownCallback(ev);\n        }\n\n        const keyCode = getCode(ev);\n        if (!ev.defaultPrevented && onClickCallback && (keyCode === EnterKey || keyCode === SpacebarKey)) {\n          // Translate the keydown enter/space to a click.\n          ev.preventDefault();\n          ev.stopPropagation();\n\n          (ev.target as HTMLElement).click();\n        }\n      };\n    }\n  }\n\n  // Disallow click and keyboard events when component is disabled and eat events when disabledFocusable is set to true.\n  const { disabled, /* disabledFocusable, */ onKeyDown } = draftState;\n  if (disabled) {\n    draftState.onClick = undefined;\n  }\n  draftState.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const keyCode = getCode(ev);\n    if (disabled && (keyCode === EnterKey || keyCode === SpacebarKey)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  draftState['aria-disabled'] = disabled /* || disabledFocusable*/;\n  draftState.disabled = draftState.as === 'button' ? disabled /* && !disabledFocusable */ : undefined;\n};\n"]}

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

@@ -1,4 +0,0 @@
-import { ButtonState, ButtonStyleSelectors, ButtonVariantTokens } from './Button.types';
-import { Theme } from '@fluentui/react-theme';
-export declare const makeButtonTokens: (theme: Theme) => ButtonVariantTokens;
-export declare const useButtonStyles: (state: ButtonState, selectors: ButtonStyleSelectors) => void;