@fluentui/react-button 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4

package/lib/components/SplitButton/SplitButton.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { renderSplitButton } from './renderSplitButton';
-import { useSplitButton } from './useSplitButton';
-import { useSplitButtonStyles } from './useSplitButtonStyles';
+import { renderSplitButton_unstable } from './renderSplitButton';
+import { useSplitButton_unstable } from './useSplitButton';
+import { useSplitButtonStyles_unstable } from './useSplitButtonStyles';
 /**
  * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
  * action, while interacting with the second one opens a menu with secondary actions.
  */
 
-export var SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useSplitButton(props, ref);
-  useSplitButtonStyles(state);
-  return renderSplitButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
+export const SplitButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useSplitButton_unstable(props, ref);
+  useSplitButtonStyles_unstable(state);
+  return renderSplitButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 SplitButton.displayName = 'SplitButton';
 //# sourceMappingURL=SplitButton.js.map

package/lib/components/SplitButton/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;;AAGG;;AACH,OAAO,IAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC5F,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB,CAL4F,CAM5F;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/SplitButton.types.d.ts

@@ -1,19 +1,21 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
+import { Button } from '../Button/Button';
+import { MenuButton } from '../MenuButton/MenuButton';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { ButtonProps, ButtonState } from '../Button/Button.types';
 import type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';
 export declare type SplitButtonSlots = {
     /**
      * Root of the component that wraps the primary action button and menu button.
      */
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
     /**
      * Button that opens menu with secondary actions in SplitButton.
      */
-    menuButton?: ObjectShorthandProps<MenuButtonProps>;
+    menuButton?: Slot<typeof MenuButton>;
     /**
      * Button to perform primary action in SplitButton.
      */
-    primaryActionButton?: ObjectShorthandProps<ButtonProps>;
+    primaryActionButton?: Slot<typeof Button>;
 };
 export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
 export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;

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

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.types.js","sourceRoot":"","sources":["../../../src/components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"SplitButton.types.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","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: 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'> &\n  Omit<MenuButtonProps, 'root'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"]}

package/lib/components/SplitButton/index.d.ts

@@ -2,4 +2,4 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export { useSplitButtonStyles } from './useSplitButtonStyles';
+export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';

package/lib/components/SplitButton/index.js

@@ -2,5 +2,5 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export { useSplitButtonStyles } from './useSplitButtonStyles';
+export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}

package/lib/components/SplitButton/renderSplitButton.d.ts

@@ -2,4 +2,4 @@ import type { SplitButtonState } from './SplitButton.types';
 /**
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
  */
-export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element;
+export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;

package/lib/components/SplitButton/renderSplitButton.js

@@ -1,15 +1,17 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
  */
 
-export var renderSplitButton = function (state) {
-  var _a = getSlots(state, ['root', 'menuButton', 'primaryActionButton']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.primaryActionButton, __assign({}, slotProps.primaryActionButton)), /*#__PURE__*/React.createElement(slots.menuButton, __assign({}, slotProps.menuButton)));
+export const renderSplitButton_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slots.primaryActionButton && /*#__PURE__*/React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
+  }), slots.menuButton && /*#__PURE__*/React.createElement(slots.menuButton, { ...slotProps.menuButton
+  }));
 };
 //# sourceMappingURL=renderSplitButton.js.map

package/lib/components/SplitButton/renderSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACjD,MAAA,EAAA,GAAuB,QAAQ,CAAmB,KAAnB,EAA0B,CAAC,MAAD,EAAS,YAAT,EAAuB,qBAAvB,CAA1B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,mBAAf,CAA1B,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,mBAAN,iBAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAFvB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n      {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButton.d.ts

@@ -5,4 +5,4 @@ import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
  * @param props - User provided props to the SplitButton component.
  * @param ref - User provided ref to be passed to the SplitButton component.
  */
-export declare const useSplitButton: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
+export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;

package/lib/components/SplitButton/useSplitButton.js

@@ -1,5 +1,4 @@
-import { __assign } from "tslib";
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
 import { Button } from '../Button/Button';
 import { MenuButton } from '../MenuButton/MenuButton';
 /**
@@ -8,64 +7,73 @@ import { MenuButton } from '../MenuButton/MenuButton';
  * @param ref - User provided ref to be passed to the SplitButton component.
  */
 
-export var useSplitButton = function (props, ref) {
-  var appearance = props.appearance,
-      _a = props.block,
-      block = _a === void 0 ? false : _a,
-      children = props.children,
-      _b = props.disabled,
-      disabled = _b === void 0 ? false : _b,
-      _c = props.disabledFocusable,
-      disabledFocusable = _c === void 0 ? false : _c,
-      icon = props.icon,
-      _d = props.iconPosition,
-      iconPosition = _d === void 0 ? 'before' : _d,
-      menuButton = props.menuButton,
-      primaryActionButton = props.primaryActionButton,
-      _e = props.shape,
-      shape = _e === void 0 ? 'rounded' : _e,
-      _f = props.size,
-      size = _f === void 0 ? 'medium' : _f;
-  var menuButtonShorthand = resolveShorthand(menuButton, {
+export const useSplitButton_unstable = (props, ref) => {
+  const {
+    appearance,
+    block = false,
+    children,
+    disabled = false,
+    disabledFocusable = false,
+    icon,
+    iconPosition = 'before',
+    menuButton,
+    menuIcon,
+    primaryActionButton,
+    shape = 'rounded',
+    size = 'medium'
+  } = props;
+  const baseId = useId('splitButton-');
+  const menuButtonShorthand = resolveShorthand(menuButton, {
     defaultProps: {
-      appearance: appearance,
-      disabled: disabled,
-      disabledFocusable: disabledFocusable,
-      shape: shape,
-      size: size
-    }
+      appearance,
+      disabled,
+      disabledFocusable,
+      menuIcon,
+      shape,
+      size
+    },
+    required: true
   });
-  var primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
+  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
     defaultProps: {
-      appearance: appearance,
-      block: block,
-      children: children,
-      disabled: disabled,
-      disabledFocusable: disabledFocusable,
-      icon: icon,
-      iconPosition: iconPosition,
-      shape: shape,
-      size: size
-    }
-  });
+      appearance,
+      block,
+      children,
+      disabled,
+      disabledFocusable,
+      icon,
+      iconPosition,
+      id: baseId + '__primaryActionButton',
+      shape,
+      size
+    },
+    required: true
+  }); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not 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
-    appearance: appearance,
-    block: block,
-    disabled: disabled,
-    disabledFocusable: disabledFocusable,
-    iconPosition: iconPosition,
-    shape: shape,
-    size: size,
+    appearance,
+    block,
+    disabled,
+    disabledFocusable,
+    iconPosition,
+    shape,
+    size,
     // Slots definition
     components: {
       root: 'div',
       menuButton: MenuButton,
       primaryActionButton: Button
     },
-    root: getNativeElementProps('div', __assign({
-      ref: ref
-    }, props)),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
     menuButton: menuButtonShorthand,
     primaryActionButton: primaryActionButtonShorthand
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,KAD4B,EAE5B,GAF4B,EAEyB;AAGnD,MAAA,UAAU,GAWR,KAAK,CAXG,UAAV;AAAA,MACA,EAAA,GAUE,KAAK,CAVM,KADb;AAAA,MACA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EADb;AAAA,MAEA,QAAQ,GASN,KAAK,CATC,QAFR;AAAA,MAGA,EAAA,GAQE,KAAK,CARS,QAHhB;AAAA,MAGA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAHhB;AAAA,MAIA,EAAA,GAOE,KAAK,CAPkB,iBAJzB;AAAA,MAIA,iBAAiB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAJzB;AAAA,MAKA,IAAI,GAMF,KAAK,CANH,IALJ;AAAA,MAMA,EAAA,GAKE,KAAK,CALgB,YANvB;AAAA,MAMA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EANvB;AAAA,MAOA,UAAU,GAIR,KAAK,CAJG,UAPV;AAAA,MAQA,mBAAmB,GAGjB,KAAK,CAHY,mBARnB;AAAA,MASA,EAAA,GAEE,KAAK,CAFU,KATjB;AAAA,MASA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAH,GAAY,EATjB;AAAA,MAUA,EAAA,GACE,KAAK,CADQ,IAVf;AAAA,MAUA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAVf;AAYF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UAAU,EAAA,UADE;AAEZ,MAAA,QAAQ,EAAA,QAFI;AAGZ,MAAA,iBAAiB,EAAA,iBAHL;AAIZ,MAAA,KAAK,EAAA,KAJO;AAKZ,MAAA,IAAI,EAAA;AALQ;AADyC,GAAb,CAA5C;AASA,MAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UAAU,EAAA,UADE;AAEZ,MAAA,KAAK,EAAA,KAFO;AAGZ,MAAA,QAAQ,EAAA,QAHI;AAIZ,MAAA,QAAQ,EAAA,QAJI;AAKZ,MAAA,iBAAiB,EAAA,iBALL;AAMZ,MAAA,IAAI,EAAA,IANQ;AAOZ,MAAA,YAAY,EAAA,YAPA;AAQZ,MAAA,KAAK,EAAA,KARO;AASZ,MAAA,IAAI,EAAA;AATQ;AAD2D,GAAtB,CAArD;AAcA,SAAO;AACL;AACA,IAAA,UAAU,EAAA,UAFL;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,QAAQ,EAAA,QAJH;AAKL,IAAA,iBAAiB,EAAA,iBALZ;AAML,IAAA,YAAY,EAAA,YANP;AAOL,IAAA,KAAK,EAAA,KAPA;AAQL,IAAA,IAAI,EAAA,IARC;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAAN,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CA7DM","sourceRoot":""}
+{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,KAFJ;AAGJ,IAAA,QAHI;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,UARI;AASJ,IAAA,QATI;AAUJ,IAAA,mBAVI;AAWJ,IAAA,KAAK,GAAG,SAXJ;AAYJ,IAAA,IAAI,GAAG;AAZH,MAaF,KAbJ;AAeA,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAAb,CAA5C;AAYA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtB,CAArD,CA9BoB,CA8CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CAjFM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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,\n    block = false,\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\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = resolveShorthand(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      block,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n  // by the 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    block,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      menuButton: MenuButton,\n      primaryActionButton: Button,\n    },\n\n    root: getNativeElementProps('div', { ref, ...props }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButtonStyles.d.ts

@@ -1,2 +1,3 @@
 import type { SplitButtonState } from './SplitButton.types';
-export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;
+export declare const splitButtonClassName = "fui-SplitButton";
+export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;

package/lib/components/SplitButton/useSplitButtonStyles.js

@@ -1,11 +1,13 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-var SplitButtonClassNames = {
-  primaryActionButton: 'SplitButton-primaryActionButton',
-  menuButton: 'SplitButton-menuButton'
+import { tokens } from '@fluentui/react-theme';
+export const splitButtonClassName = 'fui-SplitButton';
+const SplitButtonClassNames = {
+  primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
+  menuButton: `${splitButtonClassName}-menuButton`
 };
 
-var useFocusStyles = /*#__PURE__*/__styles({
+const useFocusStyles = /*#__PURE__*/__styles({
   "primaryActionButton": {
     "B486eqv": "f2hkw1w",
     "Bmrpcm6": ["fub8a6s", "f1g41uvt"],
@@ -22,59 +24,61 @@ var useFocusStyles = /*#__PURE__*/__styles({
   "d": ["[data-keyboard-nav] .fub8a6s:focus{border-top-right-radius:0;}", "[data-keyboard-nav] .f1g41uvt:focus{border-top-left-radius:0;}", "[data-keyboard-nav] .f58hr3h:focus{border-bottom-right-radius:0;}", "[data-keyboard-nav] .f1u1mnrj:focus{border-bottom-left-radius:0;}", "[data-keyboard-nav] .fy9hclh:focus{border-left-width:0;}", "[data-keyboard-nav] .f549e1y:focus{border-right-width:0;}"]
 });
 
-var useRootStyles = /*#__PURE__*/__styles({
+const useRootStyles = /*#__PURE__*/__styles({
   "base": {
     "mc9l5x": "ftuwxu6",
     "Brf1p80": "fsxf2b5",
     "qhf8xq": "f10pi13n",
     "ha4doy": "fmrv4ls",
-    "ipgm0c": ["f178uykt", "f90yzzo"],
-    "B6cuk21": ["f1bxd3c5", "f1ekv84t"],
-    "bajz6s": ["fnux5s6", "f5nfhee"],
-    "Bzqncq": ["f19wc9x7", "f5bevrs"],
-    "Flt4rd": ["f1wefiyg", "f1leuqsa"]
+    "mfjwoh": ["fwj9yvy", "f1lzjiju"],
+    "ibxugx": ["f1a35zaw", "f1l6wyf7"],
+    "Bqvcgfq": ["f104opbk", "f147sopj"],
+    "Baxitl6": ["fxs6g7p", "f1moly3t"],
+    "zkjfwm": ["f1m1y7kk", "ff82swa"]
   },
   "block": {
     "a9b677": "fly5x3f"
   },
   "outline": {},
   "primary": {
-    "Bxrr62k": ["f8z1slf", "f1qj10op"],
-    "wqijrc": ["fmrqvvu", "fu0z9tm"],
-    "Bsk9mq6": ["f1naws84", "f1ry7auu"]
+    "Bt6mj9": ["fptrtw7", "f51449u"],
+    "xhdd7j": ["f1n4yg8a", "fbebbjo"],
+    "Jxu9b0": ["fnmoi2n", "f1l3povx"]
   },
   "subtle": {
-    "Bxrr62k": ["f1xobncs", "f1xirlzn"],
-    "wqijrc": ["f1hmsn3f", "fi0rm9z"],
-    "Bsk9mq6": ["fam4u78", "f1hqq1j6"]
+    "Bt6mj9": ["fh2ci0", "f1us00qf"],
+    "xhdd7j": ["fj8butq", "fkv8iz"],
+    "Jxu9b0": ["fjmcta", "fm99moz"]
   },
   "transparent": {
-    "Bxrr62k": ["f1xobncs", "f1xirlzn"],
-    "wqijrc": ["f1hmsn3f", "fi0rm9z"],
-    "Bsk9mq6": ["fam4u78", "f1hqq1j6"]
+    "Bt6mj9": ["fh2ci0", "f1us00qf"],
+    "xhdd7j": ["fj8butq", "fkv8iz"],
+    "Jxu9b0": ["fjmcta", "fm99moz"]
   },
   "circular": {},
   "rounded": {},
   "square": {},
   "disabled": {
-    "Bxrr62k": ["f11wzqjl", "f1a5dzic"],
-    "wqijrc": ["fhk4lgh", "f1r7ztp2"],
-    "Bsk9mq6": ["f1ot7jx6", "f1qvd61g"]
+    "Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
+    "xhdd7j": ["f3cl9o2", "f12vilfs"],
+    "Jxu9b0": ["f1lpnjjp", "f8nirj0"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f178uykt .SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f90yzzo .SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1bxd3c5 .SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1ekv84t .SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".fnux5s6 .SplitButton-menuButton{border-left-width:0;}", ".f5nfhee .SplitButton-menuButton{border-right-width:0;}", ".f19wc9x7 .SplitButton-menuButton{border-top-left-radius:0;}", ".f5bevrs .SplitButton-menuButton{border-top-right-radius:0;}", ".f1wefiyg .SplitButton-menuButton{border-bottom-left-radius:0;}", ".f1leuqsa .SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".f8z1slf .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1qj10op .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1xobncs .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1xirlzn .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f11wzqjl .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1a5dzic .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
-  "h": [".fmrqvvu:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fu0z9tm:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1hmsn3f:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fi0rm9z:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".fhk4lgh:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1r7ztp2:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
-  "a": [".f1naws84:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1ry7auu:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fam4u78:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1hqq1j6:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1ot7jx6:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1qvd61g:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".fwj9yvy .fui-SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f1lzjiju .fui-SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1a35zaw .fui-SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1l6wyf7 .fui-SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".f104opbk .fui-SplitButton-menuButton{border-left-width:0;}", ".f147sopj .fui-SplitButton-menuButton{border-right-width:0;}", ".fxs6g7p .fui-SplitButton-menuButton{border-top-left-radius:0;}", ".f1moly3t .fui-SplitButton-menuButton{border-top-right-radius:0;}", ".f1m1y7kk .fui-SplitButton-menuButton{border-bottom-left-radius:0;}", ".ff82swa .fui-SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".fptrtw7 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f51449u .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fh2ci0 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1us00qf .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1gu8nb8 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f7r8m4m .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "h": [".f1n4yg8a:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fbebbjo:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fj8butq:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fkv8iz:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f3cl9o2:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f12vilfs:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "a": [".fnmoi2n:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1l3povx:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fjmcta:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fm99moz:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lpnjjp:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f8nirj0:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
 });
 
-export var useSplitButtonStyles = function (state) {
-  var rootStyles = useRootStyles();
-  var focusStyles = useFocusStyles();
-  var appearance = state.appearance,
-      block = state.block,
-      disabled = state.disabled,
-      disabledFocusable = state.disabledFocusable;
-  state.root.className = mergeClasses(rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
+export const useSplitButtonStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const {
+    appearance,
+    block,
+    disabled,
+    disabledFocusable
+  } = state;
+  state.root.className = mergeClasses(splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
 
   if (state.menuButton) {
     state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);

package/lib/components/SplitButton/useSplitButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAGA,IAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,iCADO;AAE5B,EAAA,UAAU,EAAE;AAFgB,CAA9B;;AAKA,IAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,IAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,WAAW,GAAG,cAAc,EAAlC;AAEQ,MAAA,UAAU,GAAyC,KAAK,CAA9C,UAAV;AAAA,MAAY,KAAK,GAAkC,KAAK,CAAvC,KAAjB;AAAA,MAAmB,QAAQ,GAAwB,KAAK,CAA7B,QAA3B;AAAA,MAA6B,iBAAiB,GAAK,KAAK,CAAV,iBAA9C;AAER,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,UAAU,CAAC,IADsB,EAEjC,KAAK,IAAI,UAAU,CAAC,KAFa,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CA/BM","sourceRoot":""}
+{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA;AAA/B,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassName = 'fui-SplitButton';\n\nconst SplitButtonClassNames = {\n  primaryActionButton: `${splitButtonClassName}-primaryActionButton`,\n  menuButton: `${splitButtonClassName}-menuButton`,\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base rootStyles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n  },\n\n  // Block rootStyles\n  block: {\n    width: '100%',\n  },\n\n  // Appearance variations\n  outline: {\n    /* No rootStyles */\n  },\n  primary: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundInverted,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundInverted,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundInverted,\n      },\n    },\n  },\n  subtle: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n  },\n  transparent: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled rootStyles\n  disabled: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, block, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassName,\n    rootStyles.base,\n    block && rootStyles.block,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      SplitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      SplitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/ToggleButton.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { renderToggleButton } from './renderToggleButton';
-import { useToggleButton } from './useToggleButton';
-import { useToggleButtonStyles } from './useToggleButtonStyles';
+import { renderToggleButton_unstable } from './renderToggleButton';
+import { useToggleButton_unstable } from './useToggleButton';
+import { useToggleButtonStyles_unstable } from './useToggleButtonStyles';
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
 
-export var ToggleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useToggleButton(props, ref);
-  useToggleButtonStyles(state);
-  return renderToggleButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
+export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useToggleButton_unstable(props, ref);
+  useToggleButtonStyles_unstable(state);
+  return renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 ToggleButton.displayName = 'ToggleButton';
 //# sourceMappingURL=ToggleButton.js.map

package/lib/components/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAIA;;AAEG;;AACH,OAAO,IAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9F,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,kBAAkB,CAAC,KAAD,CAAzB,CAL8F,CAM9F;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
+{"version":3,"sources":["components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,EAAA,8BAA8B,CAAC,KAAD,CAA9B;AAEA,SAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/ToggleButton.types.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonProps, ButtonState } from '../Button/Button.types';
-export declare type ToggleButtonCommons = {
+declare type ToggleButtonCommons = {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * If passed, `ToggleButton` ignores the `defaultChecked` property.
@@ -17,3 +17,4 @@ export declare type ToggleButtonProps = ButtonProps & Partial<ToggleButtonCommon
     defaultChecked?: boolean;
 };
 export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.types.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\ntype ToggleButtonCommons = {\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   * @default false\n   */\n  checked: boolean;\n};\n\nexport type ToggleButtonProps = ButtonProps &\n  Partial<ToggleButtonCommons> & {\n    /**\n     * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n     * @default false\n     */\n    defaultChecked?: boolean;\n  };\n\nexport type ToggleButtonState = ButtonState & ToggleButtonCommons;\n"]}

package/lib/components/ToggleButton/index.d.ts

@@ -2,4 +2,4 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { useToggleButtonStyles } from './useToggleButtonStyles';
+export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';

package/lib/components/ToggleButton/index.js

@@ -2,5 +2,5 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { useToggleButtonStyles } from './useToggleButtonStyles';
+export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}

package/lib/components/ToggleButton/renderToggleButton.d.ts

@@ -1 +1 @@
-export { renderButton as renderToggleButton } from '../Button/renderButton';
+export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';

package/lib/components/ToggleButton/renderToggleButton.js

@@ -1,2 +1,2 @@
-export { renderButton as renderToggleButton } from '../Button/renderButton';
+export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
 //# sourceMappingURL=renderToggleButton.js.map

package/lib/components/ToggleButton/renderToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"renderToggleButton.js","sourceRoot":"../src/","sources":["components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}

package/lib/components/ToggleButton/useToggleButton.d.ts

@@ -6,4 +6,4 @@ import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types'
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */
-export declare const useToggleButton: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
+export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;