@fluentui/react-button 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1

package/lib/components/CompoundButton/index.js

@@ -1,6 +1,6 @@
-export * from "./CompoundButton";
-export * from "./CompoundButton.types";
-export * from "./renderCompoundButton";
-export * from "./useCompoundButton";
-export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from "./useCompoundButtonStyles";
+export * from './CompoundButton';
+export * from './CompoundButton.types';
+export * from './renderCompoundButton';
+export * from './useCompoundButton';
+export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["compoundButtonClassNames","useCompoundButtonStyles_unstable"],"sources":["../../../src/components/CompoundButton/index.ts"],"sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,wBAAwB,EAAEC,gCAAgC,QAAQ"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}

package/lib/components/CompoundButton/renderCompoundButton.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */
@@ -12,6 +12,16 @@ export const renderCompoundButton_unstable = state => {
     iconOnly,
     iconPosition
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, iconPosition !== "after" && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, slotProps.contentContainer, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, slotProps.secondaryContent)), iconPosition === "after" && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon));
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, {
+    ...slotProps.contentContainer
+  }, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, {
+    ...slotProps.secondaryContent
+  })), iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }));
 };
 //# sourceMappingURL=renderCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","createElement","root","icon","contentContainer","children","secondaryContent"],"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {slotProps.root.children}\n          {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA+B;EAC3E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA8BE,KAAA;EAC3D,MAAM;IAAEG,QAAA;IAAUC;EAAY,CAAE,GAAGJ,KAAA;EAEnC,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3BF,YAAA,KAAiB,WAAWH,KAAA,CAAMM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI,GACxE,CAACJ,QAAA,iBACAN,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMO,gBAAgB,EAAKN,SAAA,CAAUM,gBAAgB,EACnDN,SAAA,CAAUI,IAAI,CAACG,QAAQ,EACvBR,KAAA,CAAMS,gBAAgB,iBAAIb,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMS,gBAAgB,EAAKR,SAAA,CAAUQ,gBAAgB,IAGpFN,YAAA,KAAiB,WAAWH,KAAA,CAAMM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI;AAG/E"}
+{"version":3,"names":["React","getSlots","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","createElement","root","icon","contentContainer","children","secondaryContent"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {slotProps.root.children}\n          {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAsBE,KAAK,CAAC;EACjE,MAAM;IAAEG,QAAQ;IAAEC;EAAY,CAAE,GAAGJ,KAAK;EAExC,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAC3BF,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,EAC5E,CAACJ,QAAQ,iBACRN,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACO,gBAAgB;IAAA,GAAKN,SAAS,CAACM;EAAgB,GACnDN,SAAS,CAACI,IAAI,CAACG,QAAQ,EACvBR,KAAK,CAACS,gBAAgB,iBAAIb,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACS,gBAAgB;IAAA,GAAKR,SAAS,CAACQ;EAAgB,EAAI,CAExF,EACAN,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CAClE;AAEjB,CAAC"}

package/lib/components/CompoundButton/useCompoundButton.js

@@ -1,6 +1,5 @@
-import * as React from "react";
-import { resolveShorthand } from "@fluentui/react-utilities";
-import { useButton_unstable } from "../Button/index";
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useButton_unstable } from '../Button/index';
 /**
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
  * @param props - User provided props to the CompoundButton component.
@@ -11,15 +10,16 @@ export const useCompoundButton_unstable = ({
   secondaryContent,
   ...props
 }, ref) => {
+  var _a, _b;
   const state = {
     // Button state
     ...useButton_unstable(props, ref),
     // Slots definition
     components: {
-      root: "button",
-      icon: "span",
-      contentContainer: "span",
-      secondaryContent: "span"
+      root: 'button',
+      icon: 'span',
+      contentContainer: 'span',
+      secondaryContent: 'span'
     },
     contentContainer: resolveShorthand(contentContainer, {
       required: true
@@ -27,7 +27,7 @@ export const useCompoundButton_unstable = ({
     secondaryContent: resolveShorthand(secondaryContent)
   };
   // Recalculate iconOnly to take into account secondaryContent.
-  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);
+  state.iconOnly = Boolean(((_a = state.icon) === null || _a === void 0 ? void 0 : _a.children) && !props.children && !((_b = state.secondaryContent) === null || _b === void 0 ? void 0 : _b.children));
   return state;
 };
 //# sourceMappingURL=useCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","required","iconOnly","Boolean","children"],"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } 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: resolveShorthand(contentContainer, { required: true }),\n    secondaryContent: resolveShorthand(secondaryContent),\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;;;AAKA,OAAO,MAAMC,0BAAA,GAA6BA,CACxC;EAAEC,gBAAA;EAAkBC,gBAAA;EAAkB,GAAGC;AAAA,CAA4B,EACrEC,GAAA,KACwB;EACxB,MAAMC,KAAA,GAA6B;IACjC;IACA,GAAGN,kBAAA,CAAmBI,KAAA,EAAOC,GAAA,CAAI;IAEjC;IACAE,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,IAAA,EAAM;MACNP,gBAAA,EAAkB;MAClBC,gBAAA,EAAkB;IACpB;IACAD,gBAAA,EAAkBH,gBAAA,CAAiBG,gBAAA,EAAkB;MAAEQ,QAAA,EAAU;IAAK;IACtEP,gBAAA,EAAkBJ,gBAAA,CAAiBI,gBAAA;EACrC;EAEA;EACAG,KAAA,CAAMK,QAAQ,GAAGC,OAAA,CAAQN,KAAA,CAAMG,IAAI,EAAEI,QAAA,IAAY,CAACT,KAAA,CAAMS,QAAQ,IAAI,CAACP,KAAA,CAAMH,gBAAgB,EAAEU,QAAA;EAE7F,OAAOP,KAAA;AACT"}
+{"version":3,"names":["resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","required","iconOnly","Boolean","_a","children","_b"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } 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: resolveShorthand(contentContainer, { required: true }),\n    secondaryContent: resolveShorthand(secondaryContent),\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"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,iBAAiB;AAGpD;;;;;AAKA,OAAO,MAAMC,0BAA0B,GAAGA,CACxC;EAAEC,gBAAgB;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAuB,EACrEC,GAAqD,KAC9B;;EACvB,MAAMC,KAAK,GAAwB;IACjC;IACA,GAAGN,kBAAkB,CAACI,KAAK,EAAEC,GAAG,CAAC;IAEjC;IACAE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,IAAI,EAAE,MAAM;MACZP,gBAAgB,EAAE,MAAM;MACxBC,gBAAgB,EAAE;KACnB;IACDD,gBAAgB,EAAEH,gBAAgB,CAACG,gBAAgB,EAAE;MAAEQ,QAAQ,EAAE;IAAI,CAAE,CAAC;IACxEP,gBAAgB,EAAEJ,gBAAgB,CAACI,gBAAgB;GACpD;EAED;EACAG,KAAK,CAACK,QAAQ,GAAGC,OAAO,CAAC,EAAAC,EAAA,GAAAP,KAAK,CAACG,IAAI,cAAAI,EAAA,uBAAAA,EAAA,CAAEC,QAAQ,KAAI,CAACV,KAAK,CAACU,QAAQ,IAAI,EAAC,CAAAC,EAAA,GAAAT,KAAK,CAACH,gBAAgB,cAAAY,EAAA,uBAAAA,EAAA,CAAED,QAAQ,EAAC;EAEtG,OAAOR,KAAK;AACd,CAAC"}

package/lib/components/CompoundButton/useCompoundButtonStyles.js

@@ -1,11 +1,11 @@
-import { tokens } from "@fluentui/react-theme";
-import { shorthands, mergeClasses, __styles } from "@griffel/react";
-import { useButtonStyles_unstable } from "../Button/useButtonStyles";
+import { tokens } from '@fluentui/react-theme';
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles';
 export const compoundButtonClassNames = {
-  root: "fui-CompoundButton",
-  icon: "fui-CompoundButton__icon",
-  contentContainer: "fui-CompoundButton__contentContainer",
-  secondaryContent: "fui-CompoundButton__secondaryContent"
+  root: 'fui-CompoundButton',
+  icon: 'fui-CompoundButton__icon',
+  contentContainer: 'fui-CompoundButton__contentContainer',
+  secondaryContent: 'fui-CompoundButton__secondaryContent'
 };
 const useRootStyles = /*#__PURE__*/__styles({
   base: {

package/lib/components/CompoundButton/useCompoundButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalS),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalS),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/MenuButton/MenuButton.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { renderMenuButton_unstable } from "./renderMenuButton";
-import { useMenuButton_unstable } from "./useMenuButton";
-import { useMenuButtonStyles_unstable } from "./useMenuButtonStyles";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { renderMenuButton_unstable } from './renderMenuButton';
+import { useMenuButton_unstable } from './useMenuButton';
+import { useMenuButtonStyles_unstable } from './useMenuButtonStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
  * menus.
@@ -18,5 +18,5 @@ export const MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Casting is required due to lack of distributive union to support unions on @types/react
 });
 
-MenuButton.displayName = "MenuButton";
+MenuButton.displayName = 'MenuButton';
 //# sourceMappingURL=MenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHooks_unstable","MenuButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  const { useMenuButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,4BAA4B,QAAQ;AAG7C,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,UAAA,gBAAmDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQP,sBAAA,CAAuBK,KAAA,EAAOC,GAAA;EAE5CL,4BAAA,CAA6BM,KAAA;EAE7B,MAAM;IAAEN,4BAAA,EAA8BO;EAAe,CAAE,GAAGN,4BAAA;EAC1DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,yBAAA,CAA0BQ,KAAA;EACjC;AACF;;AAEAJ,UAAA,CAAWM,WAAW,GAAG"}
+{"version":3,"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHooks_unstable","MenuButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  const { useMenuButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,4BAA4B,QAAQ,uBAAuB;AAGpE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;;AAIA,OAAO,MAAMC,UAAU,gBAAyCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,sBAAsB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEhDL,4BAA4B,CAACM,KAAK,CAAC;EAEnC,MAAM;IAAEN,4BAA4B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACxFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,yBAAyB,CAACQ,KAAK,CAAC;EACvC;AACF,CAAC,CAAyC;;AAE1CJ,UAAU,CAACM,WAAW,GAAG,YAAY"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"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"],"mappings":"AAAA"}
+{"version":3,"file":"MenuButton.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","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"]}

package/lib/components/MenuButton/index.js

@@ -1,6 +1,6 @@
-export * from "./MenuButton.types";
-export * from "./MenuButton";
-export * from "./renderMenuButton";
-export * from "./useMenuButton";
-export { menuButtonClassNames, useMenuButtonStyles_unstable } from "./useMenuButtonStyles";
+export * from './MenuButton.types';
+export * from './MenuButton';
+export * from './renderMenuButton';
+export * from './useMenuButton';
+export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["menuButtonClassNames","useMenuButtonStyles_unstable"],"sources":["../../../src/components/MenuButton/index.ts"],"sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,oBAAoB,EAAEC,4BAA4B,QAAQ"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}

package/lib/components/MenuButton/renderMenuButton.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */
@@ -12,6 +12,12 @@ export const renderMenuButton_unstable = state => {
     icon,
     iconOnly
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !iconOnly && slotProps.root.children, (!iconOnly || !icon?.children) && slots.menuIcon && /*#__PURE__*/React.createElement(slots.menuIcon, slotProps.menuIcon));
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/React.createElement(slots.menuIcon, {
+    ...slotProps.menuIcon
+  }));
 };
 //# sourceMappingURL=renderMenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","createElement","root","children","menuIcon"],"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA0BE,KAAA;EACvD,MAAM;IAAEG,IAAA;IAAMC;EAAQ,CAAE,GAAGJ,KAAA;EAE3B,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3BL,KAAA,CAAME,IAAI,iBAAIN,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,GAC5C,CAACC,QAAA,IAAYF,SAAA,CAAUI,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACH,QAAA,IAAY,CAACD,IAAA,EAAMI,QAAO,KAAMN,KAAA,CAAMO,QAAQ,iBAAIX,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMO,QAAQ,EAAKN,SAAA,CAAUM,QAAQ;AAGjG"}
+{"version":3,"names":["React","getSlots","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","createElement","root","children","menuIcon"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAkBE,KAAK,CAAC;EAC7D,MAAM;IAAEG,IAAI;IAAEC;EAAQ,CAAE,GAAGJ,KAAK;EAEhC,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAC3BL,KAAK,CAACE,IAAI,iBAAIN,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,EAAI,EAChD,CAACC,QAAQ,IAAIF,SAAS,CAACI,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACH,QAAQ,IAAI,EAACD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ,MAAKN,KAAK,CAACO,QAAQ,iBAAIX,KAAA,CAAAQ,aAAA,CAACJ,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,CACpF;AAEjB,CAAC"}

package/lib/components/MenuButton/useMenuButton.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { ChevronDownRegular } from "@fluentui/react-icons";
-import { resolveShorthand } from "@fluentui/react-utilities";
-import { useButton_unstable } from "../Button/index";
+import * as React from 'react';
+import { ChevronDownRegular } from '@fluentui/react-icons';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useButton_unstable } from '../Button/index';
 /**
  * Given user props, returns the final state for a MenuButton.
  */
@@ -9,8 +9,9 @@ export const useMenuButton_unstable = ({
   menuIcon,
   ...props
 }, ref) => {
+  var _a;
   const buttonState = useButton_unstable(props, ref);
-  buttonState.root["aria-expanded"] = props["aria-expanded"] ?? false;
+  buttonState.root['aria-expanded'] = (_a = props['aria-expanded']) !== null && _a !== void 0 ? _a : false;
   return {
     // Button state
     ...buttonState,
@@ -18,9 +19,9 @@ export const useMenuButton_unstable = ({
     iconOnly: Boolean(!props.children),
     // Slots definition
     components: {
-      root: "button",
-      icon: "span",
-      menuIcon: "span"
+      root: 'button',
+      icon: 'span',
+      menuIcon: 'span'
     },
     menuIcon: resolveShorthand(menuIcon, {
       defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","defaultProps","createElement","required"],"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } 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  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? 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: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CACpC;EAAEC,QAAA;EAAU,GAAGC;AAAA,CAAwB,EACvCC,GAAA,KACoB;EACpB,MAAMC,WAAA,GAAcL,kBAAA,CAAmBG,KAAA,EAAOC,GAAA;EAC9CC,WAAA,CAAYC,IAAI,CAAC,gBAAgB,GAAGH,KAAK,CAAC,gBAAgB,IAAI,KAAK;EAEnE,OAAO;IACL;IACA,GAAGE,WAAW;IAEd;IACAE,QAAA,EAAUC,OAAA,CAAQ,CAACL,KAAA,CAAMM,QAAQ;IAEjC;IACAC,UAAA,EAAY;MACVJ,IAAA,EAAM;MACNK,IAAA,EAAM;MACNT,QAAA,EAAU;IACZ;IAEAA,QAAA,EAAUH,gBAAA,CAAiBG,QAAA,EAAU;MACnCU,YAAA,EAAc;QACZH,QAAA,eAAUZ,KAAA,CAAAgB,aAAA,CAACf,kBAAA;MACb;MACAgB,QAAA,EAAU;IACZ;EACF;AACF"}
+{"version":3,"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","_a","iconOnly","Boolean","children","components","icon","defaultProps","createElement","required"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } 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  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? 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: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,iBAAiB;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAGA,CACpC;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAmB,EACvCC,GAAqD,KAClC;;EACnB,MAAMC,WAAW,GAAGL,kBAAkB,CAACG,KAAK,EAAEC,GAAG,CAAC;EAClDC,WAAW,CAACC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAAC,EAAA,GAAAJ,KAAK,CAAC,eAAe,CAAC,cAAAI,EAAA,cAAAA,EAAA,GAAI,KAAK;EAEnE,OAAO;IACL;IACA,GAAGF,WAAW;IAEd;IACAG,QAAQ,EAAEC,OAAO,CAAC,CAACN,KAAK,CAACO,QAAQ,CAAC;IAElC;IACAC,UAAU,EAAE;MACVL,IAAI,EAAE,QAAQ;MACdM,IAAI,EAAE,MAAM;MACZV,QAAQ,EAAE;KACX;IAEDA,QAAQ,EAAEH,gBAAgB,CAACG,QAAQ,EAAE;MACnCW,YAAY,EAAE;QACZH,QAAQ,eAAEb,KAAA,CAAAiB,aAAA,CAAChB,kBAAkB;OAC9B;MACDiB,QAAQ,EAAE;KACX;GACF;AACH,CAAC"}

package/lib/components/MenuButton/useMenuButtonStyles.js

@@ -1,11 +1,11 @@
-import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
-import { tokens } from "@fluentui/react-theme";
-import { mergeClasses, __styles, shorthands } from "@griffel/react";
-import { useButtonStyles_unstable } from "../Button/useButtonStyles";
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles';
 export const menuButtonClassNames = {
-  root: "fui-MenuButton",
-  icon: "fui-MenuButton__icon",
-  menuIcon: "fui-MenuButton__menuIcon"
+  root: 'fui-MenuButton',
+  icon: 'fui-MenuButton__icon',
+  menuIcon: 'fui-MenuButton__menuIcon'
 };
 const useRootExpandedStyles = /*#__PURE__*/__styles({
   base: {
@@ -94,16 +94,16 @@ export const useMenuButtonStyles_unstable = state => {
   const rootExpandedStyles = useRootExpandedStyles();
   const iconExpandedStyles = useIconExpandedStyles();
   const menuIconStyles = useMenuIconStyles();
-  state.root.className = mergeClasses(menuButtonClassNames.root, state.root["aria-expanded"] && rootExpandedStyles.base, state.root["aria-expanded"] && rootExpandedStyles[state.appearance], state.root.className);
+  state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
   if (state.icon) {
-    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root["aria-expanded"] && iconExpandedStyles[state.appearance], state.icon.className);
+    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance], state.icon.className);
   }
   if (state.menuIcon) {
     state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
   }
   useButtonStyles_unstable({
     ...state,
-    iconPosition: "before"
+    iconPosition: 'before'
   });
   return state;
 };

package/lib/components/MenuButton/useMenuButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/SplitButton/SplitButton.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHooks_unstable","SplitButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where 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  const { useSplitButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,uBAAuB,QAAQ;AACxC,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQP,uBAAA,CAAwBK,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9B,MAAM;IAAEN,6BAAA,EAA+BO;EAAe,CAAE,GAAGN,4BAAA;EAC3DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,0BAAA,CAA2BQ,KAAA;EAClC;AACF;;AAEAJ,WAAA,CAAYM,WAAW,GAAG"}
+{"version":3,"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHooks_unstable","SplitButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where 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  const { useSplitButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AAGtE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;;AAIA,OAAO,MAAMC,WAAW,gBAA0CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDL,6BAA6B,CAACM,KAAK,CAAC;EAEpC,MAAM;IAAEN,6BAA6B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACzFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,0BAA0B,CAACQ,KAAK,CAAC;EACxC;AACF,CAAC,CAA0C;;AAE3CJ,WAAW,CAACM,WAAW,GAAG,aAAa"}

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

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

@@ -1,6 +1,6 @@
-export * from "./SplitButton";
-export * from "./SplitButton.types";
-export * from "./renderSplitButton";
-export * from "./useSplitButton";
-export { splitButtonClassNames, useSplitButtonStyles_unstable } from "./useSplitButtonStyles";
+export * from './SplitButton';
+export * from './SplitButton.types';
+export * from './renderSplitButton';
+export * from './useSplitButton';
+export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["splitButtonClassNames","useSplitButtonStyles_unstable"],"sources":["../../../src/components/SplitButton/index.ts"],"sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,qBAAqB,EAAEC,6BAA6B,QAAQ"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/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,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}

package/lib/components/SplitButton/renderSplitButton.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+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.
  */
@@ -8,6 +8,12 @@ export const renderSplitButton_unstable = state => {
     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));
+  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,"names":["React","getSlots","renderSplitButton_unstable","state","slots","slotProps","createElement","root","primaryActionButton","menuButton"],"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA2BE,KAAA;EAExD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,mBAAmB,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,mBAAmB,EAAKH,SAAA,CAAUG,mBAAmB,GACzFJ,KAAA,CAAMK,UAAU,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,UAAU,EAAKJ,SAAA,CAAUI,UAAU;AAGrE"}
+{"version":3,"names":["React","getSlots","renderSplitButton_unstable","state","slots","slotProps","createElement","root","primaryActionButton","menuButton"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx"],"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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAE9D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,mBAAmB,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,mBAAmB;IAAA,GAAKH,SAAS,CAACG;EAAmB,EAAI,EAC7FJ,KAAK,CAACK,UAAU,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,UAAU;IAAA,GAAKJ,SAAS,CAACI;EAAU,EAAI,CACxD;AAEjB,CAAC"}