@fluentui/react-button 9.7.1 → 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0

package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Container that wraps the children and the secondaryContent slot.\n   */\n  contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ButtonDesignPropNames, ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Container that wraps the children and the secondaryContent slot.\n   */\n  contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;\n\nexport type CompoundButtonBaseProps = DistributiveOmit<CompoundButtonProps, ButtonDesignPropNames>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components'>;\n\nexport type CompoundButtonBaseState = DistributiveOmit<CompoundButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":""}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderCompoundButton_unstable: function() {
         return _renderCompoundButton.renderCompoundButton_unstable;
     },
+    useCompoundButtonBase_unstable: function() {
+        return _useCompoundButtonBase.useCompoundButtonBase_unstable;
+    },
     useCompoundButtonStyles_unstable: function() {
         return _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable;
     },
@@ -28,4 +31,5 @@ _export(exports, {
 const _CompoundButton = require("./CompoundButton");
 const _renderCompoundButton = require("./renderCompoundButton");
 const _useCompoundButton = require("./useCompoundButton");
+const _useCompoundButtonBase = require("./useCompoundButtonBase");
 const _useCompoundButtonStylesstyles = require("./useCompoundButtonStyles.styles");

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","renderCompoundButton_unstable","useCompoundButton_unstable","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAIdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCAHJ,mBAAmB;sCAEJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}
+{"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type {\n  CompoundButtonBaseProps,\n  CompoundButtonProps,\n  CompoundButtonSlots,\n  CompoundButtonBaseState,\n  CompoundButtonState,\n} from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { useCompoundButtonBase_unstable } from './useCompoundButtonBase';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonBase_unstable","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAWdI,uDAAwB;;;eAHxBH,mDAA6B;;;eAE7BE,qDAA8B;;;eACJE,+DAAgC;;;eAF1DH,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCAC5B,sBAAsB;uCAClB,0BAA0B;+CACE,mCAAmC"}

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

@@ -11,28 +11,16 @@ Object.defineProperty(exports, "useCompoundButton_unstable", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactutilities = require("@fluentui/react-utilities");
-const _index = require("../Button/index");
-const useCompoundButton_unstable = ({ contentContainer, secondaryContent, ...props }, ref)=>{
-    var _state_icon, _state_secondaryContent;
-    const state = {
-        // Button state
-        ...(0, _index.useButton_unstable)(props, ref),
-        // Slots definition
-        components: {
-            root: 'button',
-            icon: 'span',
-            contentContainer: 'span',
-            secondaryContent: 'span'
-        },
-        contentContainer: _reactutilities.slot.always(contentContainer, {
-            elementType: 'span'
-        }),
-        secondaryContent: _reactutilities.slot.optional(secondaryContent, {
-            elementType: 'span'
-        })
+const _useCompoundButtonBase = require("./useCompoundButtonBase");
+const _contexts = require("../../contexts");
+const useCompoundButton_unstable = (props, ref)=>{
+    const { size: contextSize } = (0, _contexts.useButtonContext)();
+    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
+    const state = (0, _useCompoundButtonBase.useCompoundButtonBase_unstable)(props, ref);
+    return {
+        appearance,
+        size,
+        shape,
+        ...state
     };
-    // Recalculate iconOnly to take into account secondaryContent.
-    state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
-    return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const state: CompoundButtonState = {\n    // Button state\n    ...useButton_unstable(props, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"],"names":["React","slot","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA;;;;;+BAYaG;;;;;;;iEAVU,QAAQ;gCACV,4BAA4B;uBACd,kBAAkB;AAQ9C,mCAAmC,CACxC,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAA4B,EACrEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,OAAGN,yBAAAA,EAAmBI,OAAOC,IAAI;QAEjC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,oBAAAA,CAAKW,MAAM,CAACR,kBAAkB;YAAES,aAAa;QAAO;QACtER,kBAAkBJ,oBAAAA,CAAKa,QAAQ,CAACT,kBAAkB;YAAEQ,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DL,MAAMO,QAAQ,GAAGC,QAAQR,CAAAA,CAAAA,cAAAA,MAAMG,IAAAA,AAAI,MAAA,QAAVH,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYS,QAAAA,AAAQ,KAAI,CAACX,MAAMW,QAAQ,IAAI,CAAA,CAAA,CAACT,0BAAAA,MAAMH,gBAAAA,AAAgB,MAAA,QAAtBG,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBS,QAAAA,AAAQ;IAErG,OAAOT;AACT,EAAE"}
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\nimport { useCompoundButtonBase_unstable } from './useCompoundButtonBase';\nimport { useButtonContext } from '../../contexts';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n  const state = useCompoundButtonBase_unstable(props, ref);\n\n  return {\n    appearance,\n    size,\n    shape,\n    ...state,\n  };\n};\n"],"names":["React","useCompoundButtonBase_unstable","useButtonContext","useCompoundButton_unstable","props","ref","size","contextSize","appearance","shape","state"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;uCAEgB,0BAA0B;0BACxC,iBAAiB;AAO3C,MAAMG,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGL,0BAAAA;IAC9B,MAAM,EAAEM,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGH;IACxF,MAAMM,YAAQT,qDAAAA,EAA+BG,OAAOC;IAEpD,OAAO;QACLG;QACAF;QACAG;QACA,GAAGC,KAAK;IACV;AACF,EAAE"}

package/lib-commonjs/components/CompoundButton/useCompoundButtonBase.js

@@ -0,0 +1,38 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCompoundButtonBase_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCompoundButtonBase_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _index = require("../Button/index");
+const useCompoundButtonBase_unstable = ({ contentContainer, secondaryContent, ...props }, ref)=>{
+    var _state_icon, _state_secondaryContent;
+    const state = {
+        // Button state
+        ...(0, _index.useButtonBase_unstable)(props, ref),
+        // Slots definition
+        components: {
+            root: 'button',
+            icon: 'span',
+            contentContainer: 'span',
+            secondaryContent: 'span'
+        },
+        contentContainer: _reactutilities.slot.always(contentContainer, {
+            elementType: 'span'
+        }),
+        secondaryContent: _reactutilities.slot.optional(secondaryContent, {
+            elementType: 'span'
+        })
+    };
+    // Recalculate iconOnly to take into account secondaryContent.
+    state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
+    return state;
+};

package/lib-commonjs/components/CompoundButton/useCompoundButtonBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonBase.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { CompoundButtonBaseProps, CompoundButtonBaseState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButtonBase_unstable = (\n  { contentContainer, secondaryContent, ...props }: CompoundButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonBaseState => {\n  const state: CompoundButtonBaseState = {\n    // Button state\n    ...useButtonBase_unstable(props, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"],"names":["React","slot","useButtonBase_unstable","useCompoundButtonBase_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA;;;;;+BAYaG;;;;;;;iEAVU,QAAQ;gCACV,4BAA4B;uBACV,kBAAkB;AAQlD,uCAAuC,CAC5C,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAAgC,EACzEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAAiC;QACrC,eAAe;QACf,OAAGN,6BAAAA,EAAuBI,OAAOC,IAAI;QAErC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,oBAAAA,CAAKW,MAAM,CAACR,kBAAkB;YAAES,aAAa;QAAO;QACtER,kBAAkBJ,oBAAAA,CAAKa,QAAQ,CAACT,kBAAkB;YAAEQ,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DL,MAAMO,QAAQ,GAAGC,QAAQR,CAAAA,CAAAA,cAAAA,MAAMG,IAAAA,AAAI,MAAA,QAAVH,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYS,QAAAA,AAAQ,KAAI,CAACX,MAAMW,QAAQ,IAAI,CAAA,CAAA,CAACT,0BAAAA,MAAMH,gBAAAA,AAAgB,MAAA,QAAtBG,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBS,QAAAA,AAAQ;IAErG,OAAOT;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ButtonDesignPropNames, ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonBaseProps = DistributiveOmit<MenuButtonProps, ButtonDesignPropNames>;\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n\nexport type MenuButtonBaseState = DistributiveOmit<MenuButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":""}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderMenuButton_unstable: function() {
         return _renderMenuButton.renderMenuButton_unstable;
     },
+    useMenuButtonBase_unstable: function() {
+        return _useMenuButtonBase.useMenuButtonBase_unstable;
+    },
     useMenuButtonStyles_unstable: function() {
         return _useMenuButtonStylesstyles.useMenuButtonStyles_unstable;
     },
@@ -28,4 +31,5 @@ _export(exports, {
 const _MenuButton = require("./MenuButton");
 const _renderMenuButton = require("./renderMenuButton");
 const _useMenuButton = require("./useMenuButton");
+const _useMenuButtonBase = require("./useMenuButtonBase");
 const _useMenuButtonStylesstyles = require("./useMenuButtonStyles.styles");

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,sBAAU;;;eAGVG,+CAAoB;;;eAFpBF,2CAAyB;;;eAEHG,uDAA4B;;;eADlDF,qCAAsB;;;4BAFJ,eAAe;kCACA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B"}
+{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type {\n  MenuButtonBaseProps,\n  MenuButtonProps,\n  MenuButtonSlots,\n  MenuButtonBaseState,\n  MenuButtonState,\n} from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { useMenuButtonBase_unstable } from './useMenuButtonBase';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAOSA,sBAAU;;;eAIVI,+CAAoB;;;eAHpBH,2CAAyB;;;eAEzBE,6CAA0B;;;eACJE,uDAA4B;;;eAFlDH,qCAAsB;;;4BAFJ,eAAe;kCACA,qBAAqB;+BACxB,kBAAkB;mCACd,sBAAsB;2CACE,+BAA+B"}

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

@@ -12,30 +12,21 @@ Object.defineProperty(exports, "useMenuButton_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacticons = require("@fluentui/react-icons");
-const _reactutilities = require("@fluentui/react-utilities");
-const _index = require("../Button/index");
-const useMenuButton_unstable = ({ menuIcon, ...props }, ref)=>{
+const _contexts = require("../../contexts");
+const _useMenuButtonBase = require("./useMenuButtonBase");
+const useMenuButton_unstable = (props, ref)=>{
     'use no memo';
-    const buttonState = (0, _index.useButton_unstable)(props, ref);
-    // force aria-expanded to be a boolean, not a string
-    buttonState.root['aria-expanded'] = props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false;
+    const { size: contextSize } = (0, _contexts.useButtonContext)();
+    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
+    const state = (0, _useMenuButtonBase.useMenuButtonBase_unstable)(props, ref);
     return {
-        // Button state
-        ...buttonState,
-        // State calculated from a set of props
-        iconOnly: Boolean(!props.children),
-        // Slots definition
-        components: {
-            root: 'button',
-            icon: 'span',
-            menuIcon: 'span'
-        },
-        menuIcon: _reactutilities.slot.optional(menuIcon, {
-            defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null)
-            },
-            renderByDefault: true,
-            elementType: 'span'
-        })
+        appearance,
+        size,
+        shape,
+        ...state,
+        menuIcon: {
+            children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null),
+            ...state.menuIcon
+        }
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  { menuIcon, ...props }: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  'use no memo';\n\n  const buttonState = useButton_unstable(props, ref);\n  // force aria-expanded to be a boolean, not a string\n  buttonState.root['aria-expanded'] = props['aria-expanded']\n    ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n    : false;\n\n  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: slot.optional(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","ChevronDownRegular","slot","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","optional","defaultProps","renderByDefault","elementType"],"mappings":"AAAA;;;;;+BAWaI;;;;;;;iEATU,QAAQ;4BACI,wBAAwB;gCACtC,4BAA4B;uBACd,kBAAkB;AAM9C,+BAA+B,CACpC,EAAEC,QAAQ,EAAE,GAAGC,OAAwB,EACvCC;IAEA;IAEA,MAAMC,kBAAcL,yBAAAA,EAAmBG,OAAOC;IAC9C,oDAAoD;IACpDC,YAAYC,IAAI,CAAC,gBAAgB,GAAGH,KAAK,CAAC,gBAAgB,GACtDA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;IAEJ,OAAO;QACL,eAAe;QACf,GAAGE,WAAW;QAEd,uCAAuC;QACvCE,UAAUC,QAAQ,CAACL,MAAMM,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACVJ,MAAM;YACNK,MAAM;YACNT,UAAU;QACZ;QAEAA,UAAUH,oBAAAA,CAAKa,QAAQ,CAACV,UAAU;YAChCW,cAAc;gBACZJ,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACX,8BAAAA,EAAAA;YACb;YACAgB,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\nimport { useButtonContext } from '../../contexts';\nimport { useMenuButtonBase_unstable } from './useMenuButtonBase';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  props: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  'use no memo';\n\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n  const state = useMenuButtonBase_unstable(props, ref);\n\n  return {\n    appearance,\n    size,\n    shape,\n    ...state,\n    menuIcon: {\n      children: <ChevronDownRegular />,\n      ...state.menuIcon,\n    },\n  };\n};\n"],"names":["React","ChevronDownRegular","useButtonContext","useMenuButtonBase_unstable","useMenuButton_unstable","props","ref","size","contextSize","appearance","shape","state","menuIcon","children"],"mappings":"AAAA;;;;;+BAWaI;;;;;;;iEATU,QAAQ;4BACI,wBAAwB;0BAE1B,iBAAiB;mCACP,sBAAsB;AAK1D,+BAA+B,CACpCC,OACAC;IAEA;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGN,0BAAAA;IAC9B,MAAM,EAAEO,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGH;IACxF,MAAMM,YAAQR,6CAAAA,EAA2BE,OAAOC;IAEhD,OAAO;QACLG;QACAF;QACAG;QACA,GAAGC,KAAK;QACRC,UAAU;YACRC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACZ,8BAAAA,EAAAA;YACX,GAAGU,MAAMC,QAAQ;QACnB;IACF;AACF,EAAE"}

package/lib-commonjs/components/MenuButton/useMenuButtonBase.js

@@ -0,0 +1,36 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMenuButtonBase_unstable", {
+    enumerable: true,
+    get: function() {
+        return useMenuButtonBase_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _index = require("../Button/index");
+const useMenuButtonBase_unstable = ({ menuIcon, ...props }, ref)=>{
+    'use no memo';
+    const buttonState = (0, _index.useButtonBase_unstable)(props, ref);
+    // force aria-expanded to be a boolean, not a string
+    buttonState.root['aria-expanded'] = props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false;
+    return {
+        ...buttonState,
+        // State calculated from a set of props
+        iconOnly: Boolean(!props.children),
+        // Slots definition
+        components: {
+            root: 'button',
+            icon: 'span',
+            menuIcon: 'span'
+        },
+        menuIcon: _reactutilities.slot.optional(menuIcon, {
+            elementType: 'span',
+            renderByDefault: true
+        })
+    };
+};

package/lib-commonjs/components/MenuButton/useMenuButtonBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/useMenuButtonBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { MenuButtonBaseProps, MenuButtonBaseState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButtonBase_unstable = (\n  { menuIcon, ...props }: MenuButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonBaseState => {\n  'use no memo';\n\n  const buttonState = useButtonBase_unstable(props, ref);\n  // force aria-expanded to be a boolean, not a string\n  buttonState.root['aria-expanded'] = props['aria-expanded']\n    ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n    : false;\n\n  return {\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: slot.optional(menuIcon, {\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n  };\n};\n"],"names":["React","slot","useButtonBase_unstable","useMenuButtonBase_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","optional","elementType","renderByDefault"],"mappings":"AAAA;;;;;+BAUaG;;;;;;;iEARU,QAAQ;gCACV,4BAA4B;uBACV,kBAAkB;AAMlD,mCAAmC,CACxC,EAAEC,QAAQ,EAAE,GAAGC,OAA4B,EAC3CC;IAEA;IAEA,MAAMC,kBAAcL,6BAAAA,EAAuBG,OAAOC;IAClD,oDAAoD;IACpDC,YAAYC,IAAI,CAAC,gBAAgB,GAAGH,KAAK,CAAC,gBAAgB,GACtDA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;IAEJ,OAAO;QACL,GAAGE,WAAW;QAEd,uCAAuC;QACvCE,UAAUC,QAAQ,CAACL,MAAMM,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACVJ,MAAM;YACNK,MAAM;YACNT,UAAU;QACZ;QAEAA,UAAUH,oBAAAA,CAAKa,QAAQ,CAACV,UAAU;YAChCW,aAAa;YACbC,iBAAiB;QACnB;IACF;AACF,EAAE"}

package/lib-commonjs/components/SplitButton/SplitButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root' | 'as'> &\n  Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ButtonDesignPropNames, ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root' | 'as'> &\n  Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonBaseProps = DistributiveOmit<SplitButtonProps, ButtonDesignPropNames>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n\nexport type SplitButtonBaseState = DistributiveOmit<SplitButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":""}

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

@@ -18,6 +18,9 @@ _export(exports, {
     splitButtonClassNames: function() {
         return _useSplitButtonStylesstyles.splitButtonClassNames;
     },
+    useSplitButtonBase_unstable: function() {
+        return _useSplitButtonBase.useSplitButtonBase_unstable;
+    },
     useSplitButtonStyles_unstable: function() {
         return _useSplitButtonStylesstyles.useSplitButtonStyles_unstable;
     },
@@ -28,4 +31,5 @@ _export(exports, {
 const _SplitButton = require("./SplitButton");
 const _renderSplitButton = require("./renderSplitButton");
 const _useSplitButton = require("./useSplitButton");
+const _useSplitButtonBase = require("./useSplitButtonBase");
 const _useSplitButtonStylesstyles = require("./useSplitButtonStyles.styles");

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable } from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","useSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAEXC,6CAA0B;;;eAE1BE,iDAAqB;;;eAAEC,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}
+{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type {\n  SplitButtonBaseProps,\n  SplitButtonProps,\n  SplitButtonSlots,\n  SplitButtonBaseState,\n  SplitButtonState,\n} from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable } from './useSplitButton';\nexport { useSplitButtonBase_unstable } from './useSplitButtonBase';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonBase_unstable","splitButtonClassNames","useSplitButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAQXC,6CAA0B;;;eAG1BG,iDAAqB;;;eADrBD,+CAA2B;;;eACJE,yDAA6B;;;eAFpDH,uCAAuB;;;6BATJ,gBAAgB;mCAQD,sBAAsB;gCACzB,mBAAmB;oCACf,uBAAuB;4CACE,gCAAgC"}

package/lib-commonjs/components/SplitButton/useSplitButton.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -10,64 +11,26 @@ Object.defineProperty(exports, "useSplitButton_unstable", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactutilities = require("@fluentui/react-utilities");
-const _Button = require("../Button/Button");
-const _MenuButton = require("../MenuButton/MenuButton");
+const _useSplitButtonBase = require("./useSplitButtonBase");
 const useSplitButton_unstable = (props, ref)=>{
-    const { appearance = 'secondary', children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton, shape = 'rounded', size = 'medium' } = props;
-    const baseId = (0, _reactutilities.useId)('splitButton-');
-    const menuButtonShorthand = _reactutilities.slot.optional(menuButton, {
-        defaultProps: {
-            appearance,
-            disabled,
-            disabledFocusable,
-            menuIcon,
-            shape,
-            size
-        },
-        renderByDefault: true,
-        elementType: _MenuButton.MenuButton
-    });
-    const primaryActionButtonShorthand = _reactutilities.slot.optional(primaryActionButton, {
-        defaultProps: {
-            appearance,
-            children,
-            disabled,
-            disabledFocusable,
-            icon,
-            iconPosition,
-            id: baseId + '__primaryActionButton',
-            shape,
-            size
-        },
-        renderByDefault: true,
-        elementType: _Button.Button
-    });
-    // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
-    // user.
-    if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
-        menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
-    }
+    const { appearance = 'secondary', shape = 'rounded', size = 'medium' } = props;
+    const state = (0, _useSplitButtonBase.useSplitButtonBase_unstable)(props, ref);
     return {
-        // Props passed at the top-level
         appearance,
-        disabled,
-        disabledFocusable,
-        iconPosition,
         shape,
         size,
-        components: {
-            root: 'div',
-            menuButton: _MenuButton.MenuButton,
-            primaryActionButton: _Button.Button
+        ...state,
+        menuButton: {
+            appearance,
+            shape,
+            size,
+            ...state.menuButton
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref,
-            ...props
-        }), {
-            elementType: 'div'
-        }),
-        menuButton: menuButtonShorthand,
-        primaryActionButton: primaryActionButtonShorthand
+        primaryActionButton: {
+            appearance,
+            shape,
+            size,
+            ...state.primaryActionButton
+        }
     };
 };

package/lib-commonjs/components/SplitButton/useSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: MenuButton,\n  });\n  const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: Button,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n  // user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size, // Slots definition\n    components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n    root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":";;;;+BAWaM;;;;;;;iEAXU,QAAQ;gCACuB,4BAA4B;wBAC3D,mBAAmB;4BACf,2BAA2B;AAQ/C,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EAChB,GAAGZ;IACJ,MAAMa,aAASlB,qBAAAA,EAAM;IAErB,MAAMmB,sBAAsBlB,oBAAAA,CAAKmB,QAAQ,CAACP,YAAY;QACpDQ,cAAc;YACZd;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAK,iBAAiB;QACjBC,aAAapB,sBAAAA;IACf;IACA,MAAMqB,+BAA+BvB,oBAAAA,CAAKmB,QAAQ,CAACL,qBAAqB;QACtEM,cAAc;YACZd;YACAC;YACAC;YACAC;YACAC;YACAC;YACAa,IAAIP,SAAS;YACbF;YACAC;QACF;QACAK,iBAAiB;QACjBC,aAAarB,cAAAA;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEiB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChClB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAS,YAAY;YAAEC,MAAM;YAAOd,YAAYV,sBAAAA;YAAYY,qBAAqBb,cAAAA;QAAO;QAC/EyB,MAAM1B,oBAAAA,CAAK2B,MAAM,KAAC7B,wCAAAA,EAAyB,OAAO;YAAEO;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEkB,aAAa;QAAM;QAC3FV,YAAYM;QACZJ,qBAAqBS;IACvB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\nimport { useSplitButtonBase_unstable } from './useSplitButtonBase';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const { appearance = 'secondary', shape = 'rounded', size = 'medium' } = props;\n\n  const state = useSplitButtonBase_unstable(props, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...state,\n    menuButton: {\n      appearance,\n      shape,\n      size,\n      ...state.menuButton,\n    },\n    primaryActionButton: {\n      appearance,\n      shape,\n      size,\n      ...state.primaryActionButton,\n    },\n  };\n};\n"],"names":["React","useSplitButtonBase_unstable","useSplitButton_unstable","props","ref","appearance","shape","size","state","menuButton","primaryActionButton"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCAEa,uBAAuB;AAO5D,MAAME,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGJ;IAEzE,MAAMK,YAAQP,+CAAAA,EAA4BE,OAAOC;IAEjD,OAAO;QACLC;QACAC;QACAC;QACA,GAAGC,KAAK;QACRC,YAAY;YACVJ;YACAC;YACAC;YACA,GAAGC,MAAMC,UAAU;QACrB;QACAC,qBAAqB;YACnBL;YACAC;YACAC;YACA,GAAGC,MAAME,mBAAmB;QAC9B;IACF;AACF,EAAE"}

package/lib-commonjs/components/SplitButton/useSplitButtonBase.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSplitButtonBase_unstable", {
+    enumerable: true,
+    get: function() {
+        return useSplitButtonBase_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _Button = require("../Button/Button");
+const _MenuButton = require("../MenuButton/MenuButton");
+const useSplitButtonBase_unstable = (props, ref)=>{
+    const { children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton } = props;
+    const baseId = (0, _reactutilities.useId)('splitButton-');
+    const menuButtonShorthand = _reactutilities.slot.optional(menuButton, {
+        defaultProps: {
+            disabled,
+            disabledFocusable,
+            menuIcon
+        },
+        renderByDefault: true,
+        elementType: _MenuButton.MenuButton
+    });
+    const primaryActionButtonShorthand = _reactutilities.slot.optional(primaryActionButton, {
+        defaultProps: {
+            children,
+            disabled,
+            disabledFocusable,
+            icon,
+            iconPosition,
+            id: baseId + '__primaryActionButton'
+        },
+        renderByDefault: true,
+        elementType: _Button.Button
+    });
+    // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
+    // user.
+    if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
+        menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
+    }
+    return {
+        // Props passed at the top-level
+        disabled,
+        disabledFocusable,
+        iconPosition,
+        components: {
+            root: 'div',
+            menuButton: _MenuButton.MenuButton,
+            primaryActionButton: _Button.Button
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        menuButton: menuButtonShorthand,
+        primaryActionButton: primaryActionButtonShorthand
+    };
+};

package/lib-commonjs/components/SplitButton/useSplitButtonBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/useSplitButtonBase.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonBaseProps, SplitButtonBaseState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButtonBase_unstable = (\n  props: SplitButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonBaseState => {\n  const {\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n  } = props;\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      disabled,\n      disabledFocusable,\n      menuIcon,\n    },\n    renderByDefault: true,\n    elementType: MenuButton,\n  });\n  const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n    defaultProps: {\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n    },\n    renderByDefault: true,\n    elementType: Button,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n  // user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n    root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","Button","MenuButton","useSplitButtonBase_unstable","props","ref","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":";;;;+BAWaM;;;;;;;iEAXU,QAAQ;gCACuB,4BAA4B;wBAC3D,mBAAmB;4BACf,2BAA2B;AAQ/C,oCAAoC,CACzCC,OACAC;IAEA,MAAM,EACJC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACpB,GAAGT;IACJ,MAAMU,aAASf,qBAAAA,EAAM;IAErB,MAAMgB,sBAAsBf,oBAAAA,CAAKgB,QAAQ,CAACL,YAAY;QACpDM,cAAc;YACZV;YACAC;YACAI;QACF;QACAM,iBAAiB;QACjBC,aAAajB,sBAAAA;IACf;IACA,MAAMkB,+BAA+BpB,oBAAAA,CAAKgB,QAAQ,CAACH,qBAAqB;QACtEI,cAAc;YACZX;YACAC;YACAC;YACAC;YACAC;YACAW,IAAIP,SAAS;QACf;QACAI,iBAAiB;QACjBC,aAAalB,cAAAA;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEc,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCd;QACAC;QACAE;QACAY,YAAY;YAAEC,MAAM;YAAOZ,YAAYT,sBAAAA;YAAYW,qBAAqBZ,cAAAA;QAAO;QAC/EsB,MAAMvB,oBAAAA,CAAKwB,MAAM,KAAC1B,wCAAAA,EAAyB,OAAO;YAAEO;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEe,aAAa;QAAM;QAC3FR,YAAYI;QACZF,qBAAqBO;IACvB;AACF,EAAE"}

package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * If passed, `ToggleButton` ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ButtonDesignPropNames, ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * If passed, `ToggleButton` ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n};\n\nexport type ToggleButtonBaseProps = DistributiveOmit<ToggleButtonProps, ButtonDesignPropNames>;\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n\nexport type ToggleButtonBaseState = DistributiveOmit<ToggleButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":""}

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

@@ -18,6 +18,9 @@ _export(exports, {
     toggleButtonClassNames: function() {
         return _useToggleButtonStylesstyles.toggleButtonClassNames;
     },
+    useToggleButtonBase_unstable: function() {
+        return _useToggleButtonBase.useToggleButtonBase_unstable;
+    },
     useToggleButtonStyles_unstable: function() {
         return _useToggleButtonStylesstyles.useToggleButtonStyles_unstable;
     },
@@ -28,4 +31,5 @@ _export(exports, {
 const _ToggleButton = require("./ToggleButton");
 const _renderToggleButton = require("./renderToggleButton");
 const _useToggleButton = require("./useToggleButton");
+const _useToggleButtonBase = require("./useToggleButtonBase");
 const _useToggleButtonStylesstyles = require("./useToggleButtonStyles.styles");

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAEZC,+CAA2B;;;eAE3BE,mDAAsB;;;eAAEC,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,iBAAiB;oCAEF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}
+{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonBaseState,\n  ToggleButtonState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable } from './useToggleButton';\nexport { useToggleButtonBase_unstable } from './useToggleButtonBase';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAOZC,+CAA2B;;;eAG3BG,mDAAsB;;;eADtBD,iDAA4B;;;eACJE,2DAA8B;;;eAFtDH,yCAAwB;;;8BARJ,iBAAiB;oCAOF,uBAAuB;iCAC1B,oBAAoB;qCAChB,wBAAwB;6CACE,iCAAiC"}

package/lib-commonjs/components/ToggleButton/useToggleButton.js

@@ -11,9 +11,17 @@ Object.defineProperty(exports, "useToggleButton_unstable", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useToggleState = require("../../utils/useToggleState");
-const _useButton = require("../Button/useButton");
+const _useToggleButtonBase = require("./useToggleButtonBase");
+const _contexts = require("../../contexts");
 const useToggleButton_unstable = (props, ref)=>{
-    const buttonState = (0, _useButton.useButton_unstable)(props, ref);
-    return (0, _useToggleState.useToggleState)(props, buttonState);
+    'use no memo';
+    const { size: contextSize } = (0, _contexts.useButtonContext)();
+    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
+    const buttonState = (0, _useToggleButtonBase.useToggleButtonBase_unstable)(props, ref);
+    return {
+        appearance,
+        shape,
+        size,
+        ...buttonState
+    };
 };

package/lib-commonjs/components/ToggleButton/useToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["React","useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACA,6BAA6B;2BACzB,sBAAsB;AASlD,MAAMG,2BAA2B,CACtCC,OACAC;IAEA,MAAMC,kBAAcJ,6BAAAA,EAAmBE,OAAOC;IAE9C,WAAOJ,8BAAAA,EAAeG,OAAOE;AAC/B,EAAE"}
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\nimport { useToggleButtonBase_unstable } from './useToggleButtonBase';\nimport { useButtonContext } from '../../contexts';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls `useToggleButtonBase_unstable` and adds design-related props, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  'use no memo';\n\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n\n  const buttonState = useToggleButtonBase_unstable(props, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...buttonState,\n  };\n};\n"],"names":["React","useToggleButtonBase_unstable","useButtonContext","useToggleButton_unstable","props","ref","size","contextSize","appearance","shape","buttonState"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEc,wBAAwB;0BACpC,iBAAiB;AAQ3C,MAAMG,2BAA2B,CACtCC,OACAC;IAEA;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGL,0BAAAA;IAC9B,MAAM,EAAEM,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGH;IAExF,MAAMM,kBAAcT,iDAAAA,EAA6BG,OAAOC;IAExD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGI,WAAW;IAChB;AACF,EAAE"}

package/lib-commonjs/components/ToggleButton/useToggleButtonBase.js

@@ -0,0 +1,19 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToggleButtonBase_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToggleButtonBase_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useToggleState = require("../../utils/useToggleState");
+const _index = require("../Button/index");
+const useToggleButtonBase_unstable = (props, ref)=>{
+    const buttonState = (0, _index.useButtonBase_unstable)(props, ref);
+    return (0, _useToggleState.useToggleState)(props, buttonState);
+};

package/lib-commonjs/components/ToggleButton/useToggleButtonBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonBase.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton.types';\n\n/**\n * Given user props, defines base props (including behavioral and structural ones) for the ToggleButton returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n  props: ToggleButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n  const buttonState = useButtonBase_unstable(props, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["React","useToggleState","useButtonBase_unstable","useToggleButtonBase_unstable","props","ref","buttonState"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACA,6BAA6B;uBACrB,kBAAkB;AASlD,MAAMG,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,kBAAcJ,6BAAAA,EAAuBE,OAAOC;IAElD,WAAOJ,8BAAAA,EAAeG,OAAOE;AAC/B,EAAE"}