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

package/lib-amd/components/CompoundButton/renderCompoundButton.js

@@ -1,19 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-compose/lib/next/index", "./useCompoundButton"], function (require, exports, tslib_1, React, index_1, useCompoundButton_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Define the render function. Given the state of a button, renders it.
-     */
-    exports.renderCompoundButton = function (state) {
-        var _a = index_1.getSlots(state, useCompoundButton_1.compoundButtonShorthandProps), 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.contentContainer, tslib_1.__assign({}, slotProps.contentContainer),
-                React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
-                React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent)))),
-            iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
-    };
-});
-//# sourceMappingURL=renderCompoundButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderCompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;IAKA;;OAEG;IACU,QAAA,oBAAoB,GAAG,UAAC,KAA0B;QACvD,IAAA,8EAAoE,EAAlE,gBAAK,EAAE,wBAA2D,CAAC;QACnE,IAAA,uBAAO,EAAE,iCAAY,EAAE,yBAAQ,CAAW;QAElD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,OAAO,IAAI,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI;YACjD,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC9D,CAAC,QAAQ,IAAI,CACZ,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB;gBACpD,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;gBACxC,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CACnC,CAC1B;YACA,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-compose/lib/next/index';\nimport { CompoundButtonState } from './CompoundButton.types';\nimport { compoundButtonShorthandProps } from './useCompoundButton';\n\n/**\n * Define the render function. Given the state of a button, renders it.\n */\nexport const renderCompoundButton = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlots(state, compoundButtonShorthandProps);\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 && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          <slots.content {...slotProps.content} />\n          <slots.secondaryContent {...slotProps.secondaryContent} />\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { CompoundButtonProps } from './CompoundButton.types';
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const compoundButtonShorthandProps: string[];
-/**
- * Given user props, returns state and render function for a Button.
- */
-export declare const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => {
-    state: Record<string, any>;
-    render: (state: import("./CompoundButton.types").CompoundButtonState) => JSX.Element;
-};

package/lib-amd/components/CompoundButton/useCompoundButton.js

@@ -1,32 +0,0 @@
-define(["require", "exports", "react", "@fluentui/react-compose/lib/next/index", "../Button/useButtonState", "./renderCompoundButton"], function (require, exports, React, index_1, useButtonState_1, renderCompoundButton_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Consts listing which props are shorthand props.
-     */
-    exports.compoundButtonShorthandProps = ['icon', 'loader', 'content', 'contentContainer', 'secondaryContent'];
-    var mergeProps = index_1.makeMergeProps({
-        deepMerge: exports.compoundButtonShorthandProps,
-    });
-    /**
-     * Given user props, returns state and render function for a Button.
-     */
-    exports.useCompoundButton = 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 },
-            contentContainer: { as: 'span', children: null },
-            secondaryContent: { as: 'span' },
-            loader: { as: 'span' },
-        }, defaultProps, index_1.resolveShorthandProps(props, exports.compoundButtonShorthandProps));
-        useButtonState_1.useButtonState(state);
-        return { state: state, render: renderCompoundButton_1.renderCompoundButton };
-    };
-});
-//# sourceMappingURL=useCompoundButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useCompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;IAMA;;OAEG;IACU,QAAA,4BAA4B,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;IAElH,IAAM,UAAU,GAAG,sBAAc,CAAC;QAChC,SAAS,EAAE,oCAA4B;KACxC,CAAC,CAAC;IAEH;;OAEG;IACU,QAAA,iBAAiB,GAAG,UAC/B,KAA0B,EAC1B,GAA2B,EAC3B,YAAkC;QAElC,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,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;YAChD,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YAChC,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;SACvB,EACD,YAAY,EACZ,6BAAqB,CAAC,KAAK,EAAE,oCAA4B,CAAC,CAC3D,CAAC;QAEF,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,EAAE,KAAK,OAAA,EAAE,MAAM,EAAE,2CAAoB,EAAE,CAAC;IACjD,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index';\nimport { CompoundButtonProps } from './CompoundButton.types';\nimport { useButtonState } from '../Button/useButtonState';\nimport { renderCompoundButton } from './renderCompoundButton';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const compoundButtonShorthandProps = ['icon', 'loader', 'content', 'contentContainer', 'secondaryContent'];\n\nconst mergeProps = makeMergeProps({\n  deepMerge: compoundButtonShorthandProps,\n});\n\n/**\n * Given user props, returns state and render function for a Button.\n */\nexport const useCompoundButton = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: CompoundButtonProps,\n) => {\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      contentContainer: { as: 'span', children: null },\n      secondaryContent: { as: 'span' },\n      loader: { as: 'span' },\n    },\n    defaultProps,\n    resolveShorthandProps(props, compoundButtonShorthandProps),\n  );\n\n  useButtonState(state);\n\n  return { state, render: renderCompoundButton };\n};\n"]}

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

@@ -1,4 +0,0 @@
-import { Theme } from '@fluentui/react-theme-provider';
-import { CompoundButtonState } from './CompoundButton.types';
-export declare const useClasses: (state: CompoundButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
-export declare const useCompoundButtonClasses: (state: CompoundButtonState) => void;

package/lib-amd/components/CompoundButton/useCompoundButtonClasses.js

@@ -1,182 +0,0 @@
-define(["require", "exports", "@fluentui/react-theme-provider", "../Button/useButtonClasses"], function (require, exports, react_theme_provider_1, useButtonClasses_1) {
-    "use strict";
-    var _a;
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var GlobalClassNames = {
-        root: 'ms-CompoundButton',
-        contentContainer: 'ms-CompoundButton-contentContainer',
-        secondaryContent: 'ms-CompoundButton-secondaryContent',
-    };
-    exports.useClasses = react_theme_provider_1.makeVariantClasses({
-        name: 'CompoundButton',
-        prefix: '--button',
-        styles: {
-            root: [
-                GlobalClassNames.root,
-                {
-                    alignItems: 'flex-start',
-                },
-            ],
-            contentContainer: [
-                GlobalClassNames.contentContainer,
-                {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    textAlign: 'left',
-                },
-            ],
-            secondaryContent: [
-                GlobalClassNames.secondaryContent,
-                (_a = {
-                        color: 'var(--button-secondaryContentColor, var(--button-contentColor))',
-                        fontSize: 'var(--button-secondaryContentFontSize)',
-                        fontWeight: 'var(--button-secondaryContentFontWeight)',
-                        lineHeight: '100%',
-                        marginTop: 'var(--button-secondaryContentGap)',
-                        '@media (forced-colors: active)': {
-                            color: 'var(--button-highContrast-secondaryContentColor)',
-                        }
-                    },
-                    _a["." + GlobalClassNames.root + ":hover &"] = {
-                        color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))',
-                        '@media (forced-colors: active)': {
-                            color: 'var(--button-highContrast-hovered-secondaryContentColor, ' +
-                                'var(--button-highContrast-secondaryContentColor))',
-                        },
-                    },
-                    _a["." + GlobalClassNames.root + ":active &"] = {
-                        color: 'var(--button-pressed-secondaryContentColor, ' +
-                            'var(--button-hovered-secondaryContentColor, ' +
-                            'var(--button-secondaryContentColor)))',
-                        '@media (forced-colors: active)': {
-                            color: 'var(--button-highContrast-pressed-secondaryContentColor, ' +
-                                'var(--button-highContrast-hovered-secondaryContentColor, ' +
-                                'var(--button-highContrast-secondaryContentColor)))',
-                        },
-                    },
-                    _a["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = {
-                        color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))',
-                        '@media (forced-colors: active)': {
-                            color: 'var(--button-highContrast-disabled-secondaryContentColor, ' +
-                                'var(--button-highContrast-secondaryContentColor))',
-                        },
-                    },
-                    _a),
-            ],
-        },
-        variants: function (theme) {
-            var _a, _b;
-            var fonts = theme.fonts, palette = theme.palette, semanticColors = theme.semanticColors;
-            return {
-                root: {
-                    height: 'auto',
-                    maxWidth: '280px',
-                    minWidth: '72px',
-                    paddingBottom: '16px',
-                    paddingLeft: '12px',
-                    paddingRight: '12px',
-                    paddingTop: '16px',
-                    iconSize: '28px',
-                    secondaryContentColor: palette.neutralSecondary,
-                    secondaryContentGap: '4px',
-                    secondaryContentFontSize: (_a = fonts) === null || _a === void 0 ? void 0 : _a.small.fontSize,
-                    secondaryContentFontWeight: 'normal',
-                    hovered: {
-                        secondaryContentColor: palette.neutralDark,
-                    },
-                    pressed: {
-                        secondaryContentColor: semanticColors.buttonTextPressed,
-                    },
-                    disabled: {
-                        secondaryContentColor: semanticColors.buttonTextDisabled,
-                    },
-                    highContrast: {
-                        secondaryContentColor: 'WindowText',
-                        hovered: {
-                            secondaryContentColor: 'Highlight',
-                        },
-                        pressed: {
-                            secondaryContentColor: 'WindowText',
-                        },
-                        disabled: {
-                            secondaryContentColor: 'GrayText',
-                        },
-                    },
-                },
-                block: {
-                    maxWidth: '100%',
-                },
-                iconOnly: {
-                    minHeight: 'var(--button-size-regular)',
-                    width: 'var(--button-minHeight)',
-                    minWidth: '0',
-                    paddingBottom: '0',
-                    paddingTop: '0',
-                    paddingLeft: '0',
-                    paddingRight: '0',
-                },
-                primary: {
-                    secondaryContentColor: 'var(--color-brand-secondaryContentColor)',
-                    focused: {
-                        secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)',
-                    },
-                    hovered: {
-                        secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)',
-                    },
-                    pressed: {
-                        secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)',
-                    },
-                    highContrast: {
-                        secondaryContentColor: 'Window',
-                        hovered: {
-                            secondaryContentColor: 'Window',
-                        },
-                        pressed: {
-                            secondaryContentColor: 'Window',
-                        },
-                        disabled: {
-                            secondaryContentColor: 'GrayText',
-                        },
-                    },
-                },
-                ghost: {
-                    secondaryContentColor: palette.neutralSecondary,
-                    disabled: {
-                        secondaryContentColor: palette.neutralTertiary,
-                    },
-                    focused: {
-                        secondaryContentColor: palette.neutralSecondary,
-                    },
-                    hovered: {
-                        secondaryContentColor: palette.neutralDark,
-                    },
-                    pressed: {
-                        secondaryContentColor: palette.black,
-                    },
-                    highContrast: {
-                        secondaryContentColor: 'WindowText',
-                        hovered: {
-                            secondaryContentColor: 'Highlight',
-                        },
-                        pressed: {
-                            secondaryContentColor: 'Highlight',
-                        },
-                        disabled: {
-                            secondaryContentColor: 'GrayText',
-                        },
-                    },
-                },
-                transparent: {
-                    hovered: {
-                        secondaryContentColor: (_b = palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
-                    },
-                },
-            };
-        },
-    });
-    exports.useCompoundButtonClasses = function (state) {
-        useButtonClasses_1.useButtonClasses(state);
-        exports.useClasses(state);
-    };
-});
-//# sourceMappingURL=useCompoundButtonClasses.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useCompoundButtonClasses.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { CompoundButtonState, CompoundButtonVariants } from './CompoundButton.types';\nimport { useButtonClasses } from '../Button/useButtonClasses';\n\nconst GlobalClassNames = {\n  root: 'ms-CompoundButton',\n  contentContainer: 'ms-CompoundButton-contentContainer',\n  secondaryContent: 'ms-CompoundButton-secondaryContent',\n};\n\nexport const useClasses = makeVariantClasses<CompoundButtonState, CompoundButtonVariants>({\n  name: 'CompoundButton',\n  prefix: '--button',\n  styles: {\n    root: [\n      GlobalClassNames.root,\n      {\n        alignItems: 'flex-start',\n      },\n    ],\n\n    contentContainer: [\n      GlobalClassNames.contentContainer,\n      {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left',\n      },\n    ],\n\n    secondaryContent: [\n      GlobalClassNames.secondaryContent,\n      {\n        color: 'var(--button-secondaryContentColor, var(--button-contentColor))',\n        fontSize: 'var(--button-secondaryContentFontSize)',\n        fontWeight: 'var(--button-secondaryContentFontWeight)',\n        lineHeight: '100%',\n        marginTop: 'var(--button-secondaryContentGap)',\n\n        '@media (forced-colors: active)': {\n          color: 'var(--button-highContrast-secondaryContentColor)',\n        },\n\n        [`.${GlobalClassNames.root}:hover &`]: {\n          color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))',\n\n          '@media (forced-colors: active)': {\n            color:\n              'var(--button-highContrast-hovered-secondaryContentColor, ' +\n              'var(--button-highContrast-secondaryContentColor))',\n          },\n        },\n\n        [`.${GlobalClassNames.root}:active &`]: {\n          color:\n            'var(--button-pressed-secondaryContentColor, ' +\n            'var(--button-hovered-secondaryContentColor, ' +\n            'var(--button-secondaryContentColor)))',\n\n          '@media (forced-colors: active)': {\n            color:\n              'var(--button-highContrast-pressed-secondaryContentColor, ' +\n              'var(--button-highContrast-hovered-secondaryContentColor, ' +\n              'var(--button-highContrast-secondaryContentColor)))',\n          },\n        },\n\n        [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n          color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))',\n\n          '@media (forced-colors: active)': {\n            color:\n              'var(--button-highContrast-disabled-secondaryContentColor, ' +\n              'var(--button-highContrast-secondaryContentColor))',\n          },\n        },\n      },\n    ],\n  },\n\n  variants: (theme: Theme): CompoundButtonVariants => {\n    const { fonts, palette, semanticColors } = theme;\n\n    return {\n      root: {\n        height: 'auto',\n        maxWidth: '280px',\n        minWidth: '72px',\n        paddingBottom: '16px',\n        paddingLeft: '12px',\n        paddingRight: '12px',\n        paddingTop: '16px',\n        iconSize: '28px',\n        secondaryContentColor: palette.neutralSecondary,\n        secondaryContentGap: '4px',\n        secondaryContentFontSize: fonts?.small.fontSize as string,\n        secondaryContentFontWeight: 'normal',\n\n        hovered: {\n          secondaryContentColor: palette.neutralDark,\n        },\n\n        pressed: {\n          secondaryContentColor: semanticColors.buttonTextPressed,\n        },\n\n        disabled: {\n          secondaryContentColor: semanticColors.buttonTextDisabled,\n        },\n\n        highContrast: {\n          secondaryContentColor: 'WindowText',\n          hovered: {\n            secondaryContentColor: 'Highlight',\n          },\n          pressed: {\n            secondaryContentColor: 'WindowText',\n          },\n          disabled: {\n            secondaryContentColor: 'GrayText',\n          },\n        },\n      },\n\n      block: {\n        maxWidth: '100%',\n      },\n\n      iconOnly: {\n        minHeight: 'var(--button-size-regular)',\n        width: 'var(--button-minHeight)',\n        minWidth: '0',\n        paddingBottom: '0',\n        paddingTop: '0',\n        paddingLeft: '0',\n        paddingRight: '0',\n      },\n\n      primary: {\n        secondaryContentColor: 'var(--color-brand-secondaryContentColor)',\n\n        focused: {\n          secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)',\n        },\n\n        hovered: {\n          secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)',\n        },\n\n        pressed: {\n          secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)',\n        },\n\n        highContrast: {\n          secondaryContentColor: 'Window',\n          hovered: {\n            secondaryContentColor: 'Window',\n          },\n          pressed: {\n            secondaryContentColor: 'Window',\n          },\n          disabled: {\n            secondaryContentColor: 'GrayText',\n          },\n        },\n      },\n\n      ghost: {\n        secondaryContentColor: palette.neutralSecondary,\n        disabled: {\n          secondaryContentColor: palette.neutralTertiary,\n        },\n        focused: {\n          secondaryContentColor: palette.neutralSecondary,\n        },\n        hovered: {\n          secondaryContentColor: palette.neutralDark,\n        },\n        pressed: {\n          secondaryContentColor: palette.black,\n        },\n\n        highContrast: {\n          secondaryContentColor: 'WindowText',\n          hovered: {\n            secondaryContentColor: 'Highlight',\n          },\n          pressed: {\n            secondaryContentColor: 'Highlight',\n          },\n          disabled: {\n            secondaryContentColor: 'GrayText',\n          },\n        },\n      },\n\n      transparent: {\n        hovered: {\n          secondaryContentColor: palette?.themePrimary,\n        },\n      },\n    };\n  },\n});\n\nexport const useCompoundButtonClasses = (state: CompoundButtonState) => {\n  useButtonClasses(state);\n  useClasses(state);\n};\n"]}

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { MenuButtonProps } from './MenuButton.types';
-/**
- * Define a styled MenuButton, using the `useMenuButton` hook.
- * {@docCategory Button}
- */
-export declare const MenuButton: React.ForwardRefExoticComponent<Pick<MenuButtonProps, string | number> & React.RefAttributes<HTMLElement>>;

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

@@ -1,26 +0,0 @@
-define(["require", "exports", "react", "@fluentui/react-icons-mdl2", "@fluentui/react-theme-provider", "./useMenuButton", "../Button/index", "./useMenuButtonClasses"], function (require, exports, React, react_icons_mdl2_1, react_theme_provider_1, useMenuButton_1, index_1, useMenuButtonClasses_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Define a styled MenuButton, using the `useMenuButton` hook.
-     * {@docCategory Button}
-     */
-    exports.MenuButton = React.forwardRef(function (props, ref) {
-        var _a = useMenuButton_1.useMenuButton(props, ref, {
-            menuIcon: { as: react_icons_mdl2_1.ChevronDownIcon },
-        }), state = _a.state, render = _a.render;
-        index_1.useButtonClasses(state);
-        useMenuButtonClasses_1.useMenuButtonClasses(state);
-        // TODO remove any
-        /**
-         * Type 'MenuButtonState' has no properties in common with type '{
-         *  style?: CSSProperties | undefined; tokens?: string | { [key: string]: any; }
-         *  | undefined; }
-         */
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        react_theme_provider_1.useInlineTokens(state, '--button');
-        return render(state);
-    });
-    exports.MenuButton.displayName = 'MenuButton';
-});
-//# sourceMappingURL=MenuButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";;;IAQA;;;OAGG;IACU,QAAA,UAAU,GAAG,KAAK,CAAC,UAAU,CAA+B,UAAC,KAAK,EAAE,GAAG;QAC5E,IAAA;;UAEJ,EAFM,gBAAK,EAAE,kBAEb,CAAC;QAEH,wBAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,2CAAoB,CAAC,KAAK,CAAC,CAAC;QAE5B,kBAAkB;QAClB;;;;WAIG;QACH,8DAA8D;QAC9D,sCAAe,CAAC,KAAY,EAAE,UAAU,CAAC,CAAC;QAE1C,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { ChevronDownIcon } from '@fluentui/react-icons-mdl2';\nimport { useInlineTokens } from '@fluentui/react-theme-provider';\nimport { useMenuButton } from './useMenuButton';\nimport { MenuButtonProps } from './MenuButton.types';\nimport { useButtonClasses } from '../Button/index';\nimport { useMenuButtonClasses } from './useMenuButtonClasses';\n\n/**\n * Define a styled MenuButton, using the `useMenuButton` hook.\n * {@docCategory Button}\n */\nexport const MenuButton = React.forwardRef<HTMLElement, MenuButtonProps>((props, ref) => {\n  const { state, render } = useMenuButton(props, ref, {\n    menuIcon: { as: ChevronDownIcon },\n  });\n\n  useButtonClasses(state);\n  useMenuButtonClasses(state);\n\n  // TODO remove any\n  /**\n   * Type 'MenuButtonState' has no properties in common with type '{\n   *  style?: CSSProperties | undefined; tokens?: string | { [key: string]: any; }\n   *  | undefined; }\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  useInlineTokens(state as any, '--button');\n\n  return render(state);\n});\n\nMenuButton.displayName = 'MenuButton';\n"]}

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

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ButtonProps, ButtonState, ButtonTokens, ButtonVariants } from '../Button/Button.types';
-/**
- * {@docCategory Button}
- */
-export declare type MinimalMenuProps = {
-    hidden?: boolean;
-    onDismiss?: () => void;
-    target?: React.Ref<HTMLElement | undefined>;
-};
-/**
- * {@docCategory Button}
- */
-export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition' | 'loader'> & {
-    /**
-     * Menu that is displayed when the button is pressed.
-     */
-    menu?: ShorthandProps;
-    /**
-     * Menu icon that indicates that this button has a menu that can be expanded.
-     */
-    menuIcon?: ShorthandProps;
-    /**
-     * Defines the inital expanded state of the MenuButton. Use this if you want the MenuButton to maintain its own state.
-     * Mutually exclusive with `expanded`.
-     * @defaultvalue false
-     */
-    defaultExpanded?: boolean;
-    /**
-     * Defines whether the MenuButton is in an expanded state. Use this if you wish to have the expanded state of the
-     * MenuButton be controlled. Mutually exclusive with `defaultExpanded`.
-     * @defaultvalue defaultExpanded
-     */
-    expanded?: boolean;
-    /**
-     * Defines a callback that runs after the MenuButton's contextual menu has been dismissed.
-     */
-    onMenuDismiss?: () => void;
-};
-export interface MenuButtonState extends Omit<MenuButtonProps, 'menu'>, Omit<ButtonState, 'iconPosition' | 'loader'> {
-    menu?: React.PropsWithChildren<MinimalMenuProps>;
-}
-/**
- * {@docCategory Button}
- */
-export declare type MenuButtonTokens = ButtonTokens & {
-    menuIconColor?: string;
-    menuIconSize?: string;
-};
-/**
- * {@docCategory Button}
- */
-export declare type MenuButtonVariants = ButtonVariants<MenuButtonTokens>;

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ShorthandProps } from '@fluentui/react-compose/lib/next/index';\nimport { ButtonProps, ButtonState, ButtonTokens, ButtonVariants } from '../Button/Button.types';\n\n/**\n * {@docCategory Button}\n */\nexport type MinimalMenuProps = {\n  hidden?: boolean;\n  onDismiss?: () => void;\n  target?: React.Ref<HTMLElement | undefined>;\n};\n\n/**\n * {@docCategory Button}\n */\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition' | 'loader'> & {\n  /**\n   * Menu that is displayed when the button is pressed.\n   */\n  menu?: ShorthandProps;\n\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: ShorthandProps;\n\n  /**\n   * Defines the inital expanded state of the MenuButton. Use this if you want the MenuButton to maintain its own state.\n   * Mutually exclusive with `expanded`.\n   * @defaultvalue false\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Defines whether the MenuButton is in an expanded state. Use this if you wish to have the expanded state of the\n   * MenuButton be controlled. Mutually exclusive with `defaultExpanded`.\n   * @defaultvalue defaultExpanded\n   */\n  expanded?: boolean;\n\n  /**\n   * Defines a callback that runs after the MenuButton's contextual menu has been dismissed.\n   */\n  onMenuDismiss?: () => void;\n};\n\nexport interface MenuButtonState extends Omit<MenuButtonProps, 'menu'>, Omit<ButtonState, 'iconPosition' | 'loader'> {\n  menu?: React.PropsWithChildren<MinimalMenuProps>;\n}\n\n/**\n * {@docCategory Button}\n */\nexport type MenuButtonTokens = ButtonTokens & {\n  menuIconColor?: string;\n  menuIconSize?: string;\n};\n\n/**\n * {@docCategory Button}\n */\nexport type MenuButtonVariants = ButtonVariants<MenuButtonTokens>;\n"]}

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

@@ -1,6 +0,0 @@
-export * from './MenuButton.types';
-export * from './MenuButton';
-export * from './useMenuButton';
-export * from './useMenuButtonState';
-export * from './useExpanded';
-export * from './useMenuButtonClasses';

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

@@ -1,10 +0,0 @@
-define(["require", "exports", "tslib", "./MenuButton", "./useMenuButton", "./useMenuButtonState", "./useExpanded", "./useMenuButtonClasses"], function (require, exports, tslib_1, MenuButton_1, useMenuButton_1, useMenuButtonState_1, useExpanded_1, useMenuButtonClasses_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(MenuButton_1, exports);
-    tslib_1.__exportStar(useMenuButton_1, exports);
-    tslib_1.__exportStar(useMenuButtonState_1, exports);
-    tslib_1.__exportStar(useExpanded_1, exports);
-    tslib_1.__exportStar(useMenuButtonClasses_1, exports);
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuButton/index.ts"],"names":[],"mappings":";;;IACA,4CAA6B;IAC7B,+CAAgC;IAChC,oDAAqC;IACrC,6CAA8B;IAC9B,sDAAuC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './useMenuButton';\nexport * from './useMenuButtonState';\nexport * from './useExpanded';\nexport * from './useMenuButtonClasses';\n"]}

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

@@ -1,7 +0,0 @@
-import { MenuButtonState } from './MenuButton.types';
-/**
- * Redefine the render function to add slots. Reuse the button structure but add
- * slots to children.
- * @param state
- */
-export declare const renderMenuButton: (state: MenuButtonState) => JSX.Element;

package/lib-amd/components/MenuButton/renderMenuButton.js

@@ -1,21 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-compose/lib/next/index", "./useMenuButton"], function (require, exports, tslib_1, React, index_1, useMenuButton_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Redefine the render function to add slots. Reuse the button structure but add
-     * slots to children.
-     * @param state
-     */
-    exports.renderMenuButton = function (state) {
-        var _a;
-        var _b = index_1.getSlots(state, useMenuButton_1.menuButtonShorthandProps), slots = _b.slots, slotProps = _b.slotProps;
-        var iconOnly = state.iconOnly, children = state.children;
-        var contentVisible = !iconOnly && (children || ((_a = slotProps.content) === null || _a === void 0 ? void 0 : _a.children));
-        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-            React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
-            contentVisible && React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
-            !iconOnly && React.createElement(slots.menuIcon, tslib_1.__assign({}, slotProps.menuIcon)),
-            React.createElement(slots.menu, tslib_1.__assign({}, slotProps.menu))));
-    };
-});
-//# sourceMappingURL=renderMenuButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderMenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;IAKA;;;;OAIG;IACU,QAAA,gBAAgB,GAAG,UAAC,KAAsB;;QAC/C,IAAA,sEAAgE,EAA9D,gBAAK,EAAE,wBAAuD,CAAC;QAC/D,IAAA,yBAAQ,EAAE,yBAAQ,CAAW;QAErC,IAAM,cAAc,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,WAAI,SAAS,CAAC,OAAO,0CAAE,QAAQ,CAAA,CAAC,CAAC;QAE9E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YACjC,cAAc,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YAC1D,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI;YACxD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACvB,CACd,CAAC;IACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-compose/lib/next/index';\nimport { MenuButtonState } from './MenuButton.types';\nimport { menuButtonShorthandProps } from './useMenuButton';\n\n/**\n * Redefine the render function to add slots. Reuse the button structure but add\n * slots to children.\n * @param state\n */\nexport const renderMenuButton = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots(state, menuButtonShorthandProps);\n  const { iconOnly, children } = state;\n\n  const contentVisible = !iconOnly && (children || slotProps.content?.children);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.icon {...slotProps.icon} />\n      {contentVisible && <slots.content {...slotProps.content} />}\n      {!iconOnly && <slots.menuIcon {...slotProps.menuIcon} />}\n      <slots.menu {...slotProps.menu} />\n    </slots.root>\n  );\n};\n"]}

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { MenuButtonState, MinimalMenuProps } from './MenuButton.types';
-export declare type ExpandedState = {
-    ref?: React.Ref<unknown>;
-    expanded?: boolean;
-    defaultExpanded?: boolean;
-    onClick?: (ev: React.MouseEvent) => void;
-    onMenuDismiss?: () => void;
-    onKeyDown?: (ev: React.KeyboardEvent) => void;
-    'aria-expanded'?: React.HTMLAttributes<HTMLElement>['aria-expanded'];
-    'aria-haspopup'?: React.HTMLAttributes<HTMLElement>['aria-haspopup'];
-    menu?: MenuButtonState['menu'];
-};
-export declare const useMenuContext: () => MinimalMenuProps;
-/**
- * @param draftState - mutable state object to update to add expanded behavior.
- */
-export declare const useExpanded: <TDraftState extends ExpandedState>(draftState: TDraftState) => void;

package/lib-amd/components/MenuButton/useExpanded.js

@@ -1,62 +0,0 @@
-define(["require", "exports", "react", "@fluentui/react-hooks", "@fluentui/keyboard-key"], function (require, exports, React, react_hooks_1, keyboard_key_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var MenuContext = React.createContext({});
-    exports.useMenuContext = function () {
-        return React.useContext(MenuContext);
-    };
-    /**
-     * @param draftState - mutable state object to update to add expanded behavior.
-     */
-    exports.useExpanded = function (draftState) {
-        var expanded = draftState.expanded, defaultExpanded = draftState.defaultExpanded, onClick = draftState.onClick, onMenuDismiss = draftState.onMenuDismiss, onKeyDown = draftState.onKeyDown;
-        var _a = react_hooks_1.useControllableValue(expanded, defaultExpanded), expandedValue = _a[0], setExpandedValue = _a[1];
-        var rootRef = React.useRef();
-        // Set up a ref to be used for the menu target.
-        draftState.ref = react_hooks_1.useMergedRefs(draftState.ref, rootRef);
-        // Set true value.
-        draftState.expanded = expandedValue;
-        // When the root is clicked, toggle menu.
-        draftState.onClick = React.useCallback(function (ev) {
-            if (onClick) {
-                onClick(ev);
-                if (ev.defaultPrevented) {
-                    return;
-                }
-            }
-            setExpandedValue(!expandedValue);
-        }, [onClick, expandedValue, setExpandedValue]);
-        // When alt/meta down arrow is pressed, expand.
-        draftState.onKeyDown = React.useCallback(function (ev) {
-            if (onKeyDown) {
-                onKeyDown(ev);
-                if (ev.defaultPrevented) {
-                    return;
-                }
-            }
-            if ((ev.altKey || ev.metaKey) && keyboard_key_1.getCode(ev) === keyboard_key_1.ArrowDownKey) {
-                setExpandedValue(true);
-                ev.stopPropagation();
-                ev.preventDefault();
-            }
-        }, [onKeyDown, setExpandedValue]);
-        var onDismiss = React.useCallback(function () {
-            var _a;
-            (_a = onMenuDismiss) === null || _a === void 0 ? void 0 : _a();
-            setExpandedValue(false);
-            // TODO: should we re-focus the root?
-        }, [onMenuDismiss, setExpandedValue]);
-        var menuProps = {
-            hidden: !expandedValue,
-            onDismiss: onDismiss,
-            target: rootRef,
-        };
-        // Assign extra props to the menu slot.
-        draftState.menu = {
-            children: draftState.menu ? (typeof draftState.menu.children === 'function' ? (draftState.menu.children(menuProps)) : (React.createElement(MenuContext.Provider, { value: menuProps }, draftState.menu.children))) : null,
-        };
-        draftState['aria-expanded'] = expandedValue;
-        draftState['aria-haspopup'] = true;
-    };
-});
-//# sourceMappingURL=useExpanded.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useExpanded.js","sourceRoot":"../src/","sources":["components/MenuButton/useExpanded.tsx"],"names":[],"mappings":";;;IAkBA,IAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB,EAAE,CAAC,CAAC;IACjD,QAAA,cAAc,GAAG;QAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF;;OAEG;IACU,QAAA,WAAW,GAAG,UAAoC,UAAuB;QAC5E,IAAA,8BAAQ,EAAE,4CAAe,EAAE,4BAAO,EAAE,wCAAa,EAAE,gCAAS,CAAgB;QAC9E,IAAA,kEAAmF,EAAlF,qBAAa,EAAE,wBAAmE,CAAC;QAC1F,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAA2B,CAAC;QAExD,+CAA+C;QAC/C,UAAU,CAAC,GAAG,GAAG,2BAAa,CAAC,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QAExD,kBAAkB;QAClB,UAAU,CAAC,QAAQ,GAAG,aAAa,CAAC;QAEpC,yCAAyC;QACzC,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,EAAuC;YACtC,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,EAAE,CAAC,CAAC;gBAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;oBACvB,OAAO;iBACR;aACF;YAED,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;QACnC,CAAC,EACD,CAAC,OAAO,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAC3C,CAAC;QAEF,+CAA+C;QAC/C,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,WAAW,CACtC,UAAC,EAAuB;YACtB,IAAI,SAAS,EAAE;gBACb,SAAS,CAAC,EAAE,CAAC,CAAC;gBAEd,IAAI,EAAE,CAAC,gBAAgB,EAAE;oBACvB,OAAO;iBACR;aACF;YAED,IAAI,CAAC,EAAE,CAAC,MAAM,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,sBAAO,CAAC,EAAE,CAAC,KAAK,2BAAY,EAAE;gBAC7D,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACvB,EAAE,CAAC,eAAe,EAAE,CAAC;gBACrB,EAAE,CAAC,cAAc,EAAE,CAAC;aACrB;QACH,CAAC,EACD,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAC9B,CAAC;QAEF,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC;;YAClC,MAAA,aAAa,4CAAK;YAElB,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAExB,qCAAqC;QACvC,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC;QAEtC,IAAM,SAAS,GAAqB;YAClC,MAAM,EAAE,CAAC,aAAa;YACtB,SAAS,WAAA;YACT,MAAM,EAAE,OAAO;SAChB,CAAC;QAEF,uCAAuC;QACvC,UAAU,CAAC,IAAI,GAAG;YAChB,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,OAAO,UAAU,CAAC,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAC/C,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CACpC,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAwB,CAC1F,CACF,CAAC,CAAC,CAAC,IAAI;SACT,CAAC;QAEF,UAAU,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC;QAC5C,UAAU,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;IACrC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useControllableValue, useMergedRefs } from '@fluentui/react-hooks';\nimport { getCode, ArrowDownKey } from '@fluentui/keyboard-key';\nimport { MenuButtonState, MinimalMenuProps } from './MenuButton.types';\n\nexport type ExpandedState = {\n  ref?: React.Ref<unknown>;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onClick?: (ev: React.MouseEvent) => void;\n  onMenuDismiss?: () => void;\n  onKeyDown?: (ev: React.KeyboardEvent) => void;\n  'aria-expanded'?: React.HTMLAttributes<HTMLElement>['aria-expanded'];\n  'aria-haspopup'?: React.HTMLAttributes<HTMLElement>['aria-haspopup'];\n\n  menu?: MenuButtonState['menu'];\n};\n\nconst MenuContext = React.createContext<MinimalMenuProps>({});\nexport const useMenuContext = () => {\n  return React.useContext(MenuContext);\n};\n\n/**\n * @param draftState - mutable state object to update to add expanded behavior.\n */\nexport const useExpanded = <TDraftState extends ExpandedState>(draftState: TDraftState) => {\n  const { expanded, defaultExpanded, onClick, onMenuDismiss, onKeyDown } = draftState;\n  const [expandedValue, setExpandedValue] = useControllableValue(expanded, defaultExpanded);\n  const rootRef = React.useRef<HTMLElement | undefined>();\n\n  // Set up a ref to be used for the menu target.\n  draftState.ref = useMergedRefs(draftState.ref, rootRef);\n\n  // Set true value.\n  draftState.expanded = expandedValue;\n\n  // When the root is clicked, toggle menu.\n  draftState.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setExpandedValue(!expandedValue);\n    },\n    [onClick, expandedValue, setExpandedValue],\n  );\n\n  // When alt/meta down arrow is pressed, expand.\n  draftState.onKeyDown = React.useCallback(\n    (ev: React.KeyboardEvent) => {\n      if (onKeyDown) {\n        onKeyDown(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      if ((ev.altKey || ev.metaKey) && getCode(ev) === ArrowDownKey) {\n        setExpandedValue(true);\n        ev.stopPropagation();\n        ev.preventDefault();\n      }\n    },\n    [onKeyDown, setExpandedValue],\n  );\n\n  const onDismiss = React.useCallback(() => {\n    onMenuDismiss?.();\n\n    setExpandedValue(false);\n\n    // TODO: should we re-focus the root?\n  }, [onMenuDismiss, setExpandedValue]);\n\n  const menuProps: MinimalMenuProps = {\n    hidden: !expandedValue,\n    onDismiss,\n    target: rootRef,\n  };\n\n  // Assign extra props to the menu slot.\n  draftState.menu = {\n    children: draftState.menu ? (\n      typeof draftState.menu.children === 'function' ? (\n        draftState.menu.children(menuProps)\n      ) : (\n        <MenuContext.Provider value={menuProps}>{draftState.menu.children}</MenuContext.Provider>\n      )\n    ) : null,\n  };\n\n  draftState['aria-expanded'] = expandedValue;\n  draftState['aria-haspopup'] = true;\n};\n"]}

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

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { MenuButtonProps, MenuButtonState } from './MenuButton.types';
-export declare const menuButtonShorthandProps: string[];
-/**
- * Redefine the component factory, reusing button factory.
- */
-export declare const useMenuButton: (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => {
-    state: MenuButtonState;
-    render: (state: MenuButtonState) => JSX.Element;
-};

package/lib-amd/components/MenuButton/useMenuButton.js

@@ -1,27 +0,0 @@
-define(["require", "exports", "@fluentui/react-compose/lib/next/index", "./useMenuButtonState", "./renderMenuButton"], function (require, exports, index_1, useMenuButtonState_1, renderMenuButton_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.menuButtonShorthandProps = ['icon', 'content', 'menuIcon', 'menu'];
-    var mergeProps = index_1.makeMergeProps({ deepMerge: exports.menuButtonShorthandProps });
-    /**
-     * Redefine the component factory, reusing button factory.
-     */
-    exports.useMenuButton = function (props, ref, defaultProps) {
-        // Note: because menu button's template and slots are different, we can't reuse
-        // those, but the useMenuButtonState hook can reuse useButtonState.
-        var state = mergeProps({
-            ref: ref,
-            as: 'button',
-            icon: { as: 'span' },
-            content: { as: 'span', children: props.children },
-            menuIcon: { as: 'span' },
-            menu: { as: 'span' },
-        }, defaultProps, index_1.resolveShorthandProps(props, exports.menuButtonShorthandProps));
-        useMenuButtonState_1.useMenuButtonState(state);
-        return {
-            state: state,
-            render: renderMenuButton_1.renderMenuButton,
-        };
-    };
-});
-//# sourceMappingURL=useMenuButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButton.ts"],"names":[],"mappings":";;;IAMa,QAAA,wBAAwB,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;IAEhF,IAAM,UAAU,GAAG,sBAAc,CAAC,EAAE,SAAS,EAAE,gCAAwB,EAAE,CAAC,CAAC;IAE3E;;OAEG;IACU,QAAA,aAAa,GAAG,UAAC,KAAsB,EAAE,GAA2B,EAAE,YAA8B;QAC/G,+EAA+E;QAC/E,mEAAmE;QACnE,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,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,QAAQ,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACxB,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;SACrB,EACD,YAAY,EACZ,6BAAqB,CAAC,KAAK,EAAE,gCAAwB,CAAC,CACpC,CAAC;QAErB,uCAAkB,CAAC,KAAK,CAAC,CAAC;QAE1B,OAAO;YACL,KAAK,OAAA;YACL,MAAM,EAAE,mCAAgB;SACzB,CAAC;IACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index';\nimport { MenuButtonProps, MenuButtonState } from './MenuButton.types';\nimport { useMenuButtonState } from './useMenuButtonState';\nimport { renderMenuButton } from './renderMenuButton';\n\nexport const menuButtonShorthandProps = ['icon', 'content', 'menuIcon', 'menu'];\n\nconst mergeProps = makeMergeProps({ deepMerge: menuButtonShorthandProps });\n\n/**\n * Redefine the component factory, reusing button factory.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n  // Note: because menu button's template and slots are different, we can't reuse\n  // those, but the useMenuButtonState hook can reuse useButtonState.\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      icon: { as: 'span' },\n      content: { as: 'span', children: props.children },\n      menuIcon: { as: 'span' },\n      menu: { as: 'span' },\n    },\n    defaultProps,\n    resolveShorthandProps(props, menuButtonShorthandProps),\n  ) as MenuButtonState;\n\n  useMenuButtonState(state);\n\n  return {\n    state,\n    render: renderMenuButton,\n  };\n};\n"]}

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

@@ -1,3 +0,0 @@
-import { Theme } from '@fluentui/react-theme-provider';
-import { MenuButtonState } from './MenuButton.types';
-export declare const useMenuButtonClasses: (state: MenuButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;