@fluentui/react-button 9.0.0-alpha.84 → 9.0.0-alpha.88

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

@@ -1 +1 @@
-{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param state - Button draft state to mutate.\n */\nexport const useButtonState = (state: ButtonState): ButtonState => {\n  const { as, children, disabled, disabledFocusable, icon, onClick, onKeyDown: onKeyDownCallback } = state;\n\n  const receivedChildren = !!children;\n  const receivedIcon = !!icon?.children;\n  state.iconOnly = receivedIcon && !receivedChildren;\n\n  const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDownCallback?.(ev);\n\n    const key = ev.key;\n    if (!ev.defaultPrevented && onClick && (key === Enter || key === Space)) {\n      // Translate the keydown enter/space to a click.\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      onClick((ev as unknown) as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>);\n    }\n  };\n\n  // Adjust props depending on the root type.\n  if (typeof as === 'string') {\n    // Add 'role=button' and 'tabIndex=0' for all non-button elements.\n    if (as !== 'button') {\n      state.role = 'button';\n      state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n      // Add keydown event handler for all other non-anchor elements.\n      if (as !== 'a') {\n        state.onKeyDown = onNonAnchorOrButtonKeyDown;\n      }\n    }\n  }\n  // Add keydown event handler, 'role=button' and 'tabIndex=0' for all other elements.\n  else {\n    state.onKeyDown = onNonAnchorOrButtonKeyDown;\n    state.role = 'button';\n    state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.onClick = (ev: React.MouseEvent<HTMLElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  const { onKeyDown } = state;\n  state.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const key = ev.key;\n    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = as === 'button' ? disabled && !disabledFocusable : undefined;\n  state['aria-disabled'] = disabled && !state.disabled;\n\n  return state;\n};\n"]}
+{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":";;;;IAIA;;;OAGG;IACI,IAAM,cAAc,GAAG,UAAC,KAAkB;QACvC,IAAA,EAAE,GAAyF,KAAK,GAA9F,EAAE,QAAQ,GAA+E,KAAK,SAApF,EAAE,QAAQ,GAAqE,KAAK,SAA1E,EAAE,iBAAiB,GAAkD,KAAK,kBAAvD,EAAE,IAAI,GAA4C,KAAK,KAAjD,EAAE,OAAO,GAAmC,KAAK,QAAxC,EAAa,iBAAiB,GAAK,KAAK,UAAV,CAAW;QAEzG,IAAM,gBAAgB,GAAG,CAAC,CAAC,QAAQ,CAAC;QACpC,IAAM,YAAY,GAAG,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAA,CAAC;QACtC,KAAK,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,gBAAgB,CAAC;QAEnD,IAAM,0BAA0B,GAAG,UAAC,EAAoC;YACtE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,EAAE,EAAE;YAExB,IAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;YACnB,IAAI,CAAC,EAAE,CAAC,gBAAgB,IAAI,OAAO,IAAI,CAAC,GAAG,KAAK,qBAAK,IAAI,GAAG,KAAK,qBAAK,CAAC,EAAE;gBACvE,gDAAgD;gBAChD,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;gBAErB,OAAO,CAAE,EAAuF,CAAC,CAAC;aACnG;QACH,CAAC,CAAC;QAEF,2CAA2C;QAC3C,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE;YAC1B,kEAAkE;YAClE,IAAI,EAAE,KAAK,QAAQ,EAAE;gBACnB,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;gBACtB,KAAK,CAAC,QAAQ,GAAG,QAAQ,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;gBAEhE,+DAA+D;gBAC/D,IAAI,EAAE,KAAK,GAAG,EAAE;oBACd,KAAK,CAAC,SAAS,GAAG,0BAA0B,CAAC;iBAC9C;aACF;SACF;QACD,oFAAoF;aAC/E;YACH,KAAK,CAAC,SAAS,GAAG,0BAA0B,CAAC;YAC7C,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;YACtB,KAAK,CAAC,QAAQ,GAAG,QAAQ,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;SACjE;QAED,wGAAwG;QACxG,KAAK,CAAC,OAAO,GAAG,UAAC,EAAiC;YAChD,IAAI,QAAQ,IAAI,iBAAiB,EAAE;gBACjC,EAAE,CAAC,cAAc,EAAE,CAAC;aACrB;iBAAM;gBACL,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,EAAE;aACf;QACH,CAAC,CAAC;QAEF,0GAA0G;QAClG,IAAA,SAAS,GAAK,KAAK,UAAV,CAAW;QAC5B,KAAK,CAAC,SAAS,GAAG,UAAC,EAAoC;YACrD,IAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;YACnB,IAAI,CAAC,QAAQ,IAAI,iBAAiB,CAAC,IAAI,CAAC,GAAG,KAAK,qBAAK,IAAI,GAAG,KAAK,qBAAK,CAAC,EAAE;gBACvE,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;aACtB;iBAAM;gBACL,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,EAAE,EAAE;aACjB;QACH,CAAC,CAAC;QAEF,sDAAsD;QACtD,KAAK,CAAC,QAAQ,GAAG,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9E,KAAK,CAAC,eAAe,CAAC,GAAG,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAErD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAlEW,QAAA,cAAc,kBAkEzB","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button state.\n * @param state - Button state to mutate.\n */\nexport const useButtonState = (state: ButtonState): ButtonState => {\n  const { as, children, disabled, disabledFocusable, icon, onClick, onKeyDown: onKeyDownCallback } = state;\n\n  const receivedChildren = !!children;\n  const receivedIcon = !!icon?.children;\n  state.iconOnly = receivedIcon && !receivedChildren;\n\n  const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDownCallback?.(ev);\n\n    const key = ev.key;\n    if (!ev.defaultPrevented && onClick && (key === Enter || key === Space)) {\n      // Translate the keydown enter/space to a click.\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      onClick((ev as unknown) as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>);\n    }\n  };\n\n  // Adjust props depending on the root type.\n  if (typeof as === 'string') {\n    // Add 'role=button' and 'tabIndex=0' for all non-button elements.\n    if (as !== 'button') {\n      state.role = 'button';\n      state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n      // Add keydown event handler for all other non-anchor elements.\n      if (as !== 'a') {\n        state.onKeyDown = onNonAnchorOrButtonKeyDown;\n      }\n    }\n  }\n  // Add keydown event handler, 'role=button' and 'tabIndex=0' for all other elements.\n  else {\n    state.onKeyDown = onNonAnchorOrButtonKeyDown;\n    state.role = 'button';\n    state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.onClick = (ev: React.MouseEvent<HTMLElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  const { onKeyDown } = state;\n  state.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const key = ev.key;\n    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = as === 'button' ? disabled && !disabledFocusable : undefined;\n  state['aria-disabled'] = disabled && !state.disabled;\n\n  return state;\n};\n"]}

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

@@ -202,6 +202,7 @@ define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-ta
         base: react_tabster_1.createFocusIndicatorStyleRule(function (theme) { return ({
             borderColor: 'transparent',
             boxShadow: "\n      " + theme.alias.shadow.shadow4 + ",\n      0 0 0 2px " + theme.alias.color.neutral.strokeFocus2 + "\n    ",
+            zIndex: 1,
         }); }),
         circular: react_tabster_1.createFocusIndicatorStyleRule(function (theme) { return ({
             borderRadius: theme.global.borderRadius.circular,

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

@@ -1 +1 @@
-{"version":3,"file":"useButtonStyles.js","sourceRoot":"../src/","sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { ButtonState } from './Button.types';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nexport const buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    margin: 0,\n\n    maxWidth: '280px',\n\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    background: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n\n    fontFamily: theme.global.type.fontFamilies.base,\n\n    outline: 'none',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      outline: 'none',\n    },\n  }),\n  small: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.smaller,\n    padding: `0 ${buttonSpacing.medium}`,\n\n    height: '24px',\n    minWidth: '64px',\n\n    borderRadius: theme.global.borderRadius.small,\n\n    fontSize: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  medium: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.large}`,\n\n    height: '32px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.larger}`,\n\n    height: '40px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n  circular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  outline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  primary: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  subtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  transparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  }),\n  disabledOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createFocusIndicatorStyleRule(theme => ({\n    borderColor: 'transparent',\n    boxShadow: `\n      ${theme.alias.shadow.shadow4},\n      0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}\n    `,\n  })),\n  circular: createFocusIndicatorStyleRule(theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  })),\n  primary: createFocusIndicatorStyleRule(theme => ({\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n    boxShadow: `${theme.alias.shadow.shadow2}, 0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}`,\n  })),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacing.small,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useButtonStyles = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  state.className = mergeClasses(\n    rootStyles.base,\n    rootFocusStyles.base,\n    rootStyles[state.size],\n    state.block && rootStyles.block,\n    state.circular && rootStyles.circular,\n    state.circular && rootFocusStyles.circular,\n    state.outline && rootStyles.outline,\n    state.primary && rootStyles.primary,\n    state.primary && rootFocusStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.outline && rootStyles.disabledOutline,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useButtonStyles.js","sourceRoot":"../src/","sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { ButtonState } from './Button.types';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nexport const buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    margin: 0,\n\n    maxWidth: '280px',\n\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    background: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n\n    fontFamily: theme.global.type.fontFamilies.base,\n\n    outline: 'none',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      outline: 'none',\n    },\n  }),\n  small: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.smaller,\n    padding: `0 ${buttonSpacing.medium}`,\n\n    height: '24px',\n    minWidth: '64px',\n\n    borderRadius: theme.global.borderRadius.small,\n\n    fontSize: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  medium: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.large}`,\n\n    height: '32px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.larger}`,\n\n    height: '40px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n  circular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  outline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  primary: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  subtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  transparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  }),\n  disabledOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createFocusIndicatorStyleRule(theme => ({\n    borderColor: 'transparent',\n    boxShadow: `\n      ${theme.alias.shadow.shadow4},\n      0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}\n    `,\n    zIndex: 1,\n  })),\n  circular: createFocusIndicatorStyleRule(theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  })),\n  primary: createFocusIndicatorStyleRule(theme => ({\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n    boxShadow: `${theme.alias.shadow.shadow2}, 0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}`,\n  })),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacing.small,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useButtonStyles = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  state.className = mergeClasses(\n    rootStyles.base,\n    rootFocusStyles.base,\n    rootStyles[state.size],\n    state.block && rootStyles.block,\n    state.circular && rootStyles.circular,\n    state.circular && rootFocusStyles.circular,\n    state.outline && rootStyles.outline,\n    state.primary && rootStyles.primary,\n    state.primary && rootFocusStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.outline && rootStyles.disabledOutline,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n\n  return state;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"renderCompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAA0B;QACvD,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,sDAAkC,CAAC,EAA9E,KAAK,WAAA,EAAE,SAAS,eAA8D,CAAC;QAC/E,IAAA,QAAQ,GAA6B,KAAK,SAAlC,EAAE,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEnD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAE3B,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC9D,CAAC,QAAQ,IAAI,CACZ,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB;gBACnD,QAAQ;gBACT,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CACnC,CAC1B;YACA,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACpD,CACd,CAAC;IACJ,CAAC,CAAC;IAjBW,QAAA,oBAAoB,wBAiB/B","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { compoundButtonShorthandPropsCompat } from './useCompoundButton';\nimport type { 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 = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, compoundButtonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*loading && <slots.loader {...slotProps.loader} />*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {children}\n          <slots.secondaryContent {...slotProps.secondaryContent} />\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"file":"renderCompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAA0B;QACvD,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,sDAAkC,CAAC,EAA9E,KAAK,WAAA,EAAE,SAAS,eAA8D,CAAC;QAC/E,IAAA,QAAQ,GAA6B,KAAK,SAAlC,EAAE,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEnD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC9D,CAAC,QAAQ,IAAI,CACZ,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB;gBACnD,QAAQ;gBACT,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CACnC,CAC1B;YACA,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACpD,CACd,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,oBAAoB,wBAgB/B","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { compoundButtonShorthandPropsCompat } from './useCompoundButton';\nimport type { 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 = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, compoundButtonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {children}\n          <slots.secondaryContent {...slotProps.secondaryContent} />\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -5,6 +5,8 @@ import type { CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundB
  */
 export declare const compoundButtonShorthandPropsCompat: CompoundButtonShorthandPropsCompat[];
 /**
- * Given user props, returns the final state for a CompoundButton.
+ * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the CompoundButton component.
+ * @param ref - User provided ref to be passed to the CompoundButton component.
  */
 export declare const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => CompoundButtonState;

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

@@ -14,7 +14,9 @@ define(["require", "exports", "@fluentui/react-utilities", "../Button/useButtonS
         deepMerge: exports.compoundButtonShorthandPropsCompat,
     });
     /**
-     * Given user props, returns the final state for a CompoundButton.
+     * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
+     * @param props - User provided props to the CompoundButton component.
+     * @param ref - User provided ref to be passed to the CompoundButton component.
      */
     var useCompoundButton = function (props, ref, defaultProps) {
         var state = mergeProps({

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

@@ -1 +1 @@
-{"version":3,"file":"useCompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;IASA;;OAEG;IACU,QAAA,kCAAkC,GAAyC;QACtF,kBAAkB;QAClB,MAAM;QACN,kBAAkB;KACnB,CAAC;IAEF,IAAM,UAAU,GAAG,gCAAc,CAAsB;QACrD,SAAS,EAAE,0CAAkC;KAC9C,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,iBAAiB,GAAG,UAC/B,KAA0B,EAC1B,GAA2B,EAC3B,YAAkC;QAElC,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,EAAE,EAAE,QAAQ;YACZ,8BAA8B;YAC9B,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACpB,oCAAoC;YACpC,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;YAChD,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YAChC,iBAAiB;YACjB,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;SACf,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,0CAAkC,CAAC,EACvF,uCAAqB,CAAC,KAAK,EAAE,0CAAkC,CAAC,CACjE,CAAC;QAEF,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAzBW,QAAA,iBAAiB,qBAyB5B","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from '../Button/useButtonState';\nimport type {\n  CompoundButtonProps,\n  CompoundButtonShorthandPropsCompat,\n  CompoundButtonState,\n} from './CompoundButton.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const compoundButtonShorthandPropsCompat: CompoundButtonShorthandPropsCompat[] = [\n  'contentContainer',\n  'icon',\n  'secondaryContent',\n];\n\nconst mergeProps = makeMergeProps<CompoundButtonState>({\n  deepMerge: compoundButtonShorthandPropsCompat,\n});\n\n/**\n * Given user props, returns the final state for a CompoundButton.\n */\nexport const useCompoundButton = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: CompoundButtonProps,\n): CompoundButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots inherited from Button\n      icon: { as: 'span' },\n      // Slots exclusive to CompoundButton\n      contentContainer: { as: 'span', children: null },\n      secondaryContent: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, compoundButtonShorthandPropsCompat),\n    resolveShorthandProps(props, compoundButtonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useCompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;IASA;;OAEG;IACU,QAAA,kCAAkC,GAAyC;QACtF,kBAAkB;QAClB,MAAM;QACN,kBAAkB;KACnB,CAAC;IAEF,IAAM,UAAU,GAAG,gCAAc,CAAsB;QACrD,SAAS,EAAE,0CAAkC;KAC9C,CAAC,CAAC;IAEH;;;;OAIG;IACI,IAAM,iBAAiB,GAAG,UAC/B,KAA0B,EAC1B,GAA2B,EAC3B,YAAkC;QAElC,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,EAAE,EAAE,QAAQ;YACZ,8BAA8B;YAC9B,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACpB,oCAAoC;YACpC,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;YAChD,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YAChC,iBAAiB;YACjB,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;SACf,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,0CAAkC,CAAC,EACvF,uCAAqB,CAAC,KAAK,EAAE,0CAAkC,CAAC,CACjE,CAAC;QAEF,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAzBW,QAAA,iBAAiB,qBAyB5B","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from '../Button/useButtonState';\nimport type {\n  CompoundButtonProps,\n  CompoundButtonShorthandPropsCompat,\n  CompoundButtonState,\n} from './CompoundButton.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const compoundButtonShorthandPropsCompat: CompoundButtonShorthandPropsCompat[] = [\n  'contentContainer',\n  'icon',\n  'secondaryContent',\n];\n\nconst mergeProps = makeMergeProps<CompoundButtonState>({\n  deepMerge: compoundButtonShorthandPropsCompat,\n});\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 = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: CompoundButtonProps,\n): CompoundButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots inherited from Button\n      icon: { as: 'span' },\n      // Slots exclusive to CompoundButton\n      contentContainer: { as: 'span', children: null },\n      secondaryContent: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, compoundButtonShorthandPropsCompat),\n    resolveShorthandProps(props, compoundButtonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"useCompoundButtonStyles.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nconst CompoundButtonClassNames = {\n  secondaryContent: 'CompoundButton-secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.large,\n\n    height: 'auto',\n\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Pressed,\n      },\n    },\n  }),\n  small: theme => ({\n    padding: buttonSpacing.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  medium: theme => ({\n    padding: buttonSpacing.large,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    padding: buttonSpacing.larger,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  primary: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n  }),\n  subtle: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  transparent: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  disabled: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: buttonSpacing.small,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: buttonSpacing.medium,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  base: theme => ({\n    lineHeight: '100%',\n    marginTop: '4px',\n    fontWeight: theme.global.type.fontWeights.regular,\n  }),\n  small: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  medium: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  large: theme => ({\n    fontSize: theme.global.type.fontSizes.base[300],\n  }),\n});\n\nexport const useCompoundButtonStyles = (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  state.className = mergeClasses(\n    rootStyles.base,\n    rootStyles[state.size],\n    state.primary && rootStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n\n  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n  state.secondaryContent.className = mergeClasses(\n    CompoundButtonClassNames.secondaryContent,\n    secondaryContentStyles.base,\n    secondaryContentStyles[state.size],\n    state.secondaryContent.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useCompoundButtonStyles.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nconst CompoundButtonClassNames = {\n  secondaryContent: 'CompoundButton-secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.large,\n\n    height: 'auto',\n\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Pressed,\n      },\n    },\n  }),\n  small: theme => ({\n    padding: buttonSpacing.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  medium: theme => ({\n    padding: buttonSpacing.large,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    padding: buttonSpacing.larger,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  primary: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n  }),\n  subtle: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  transparent: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  disabled: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: buttonSpacing.small,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: buttonSpacing.medium,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  base: theme => ({\n    lineHeight: '100%',\n    marginTop: '4px',\n    fontWeight: theme.global.type.fontWeights.regular,\n  }),\n  small: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  medium: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  large: theme => ({\n    fontSize: theme.global.type.fontSizes.base[300],\n  }),\n});\n\nexport const useCompoundButtonStyles = (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  state.className = mergeClasses(\n    rootStyles.base,\n    rootStyles[state.size],\n    state.primary && rootStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n\n  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n  state.secondaryContent.className = mergeClasses(\n    CompoundButtonClassNames.secondaryContent,\n    secondaryContentStyles.base,\n    secondaryContentStyles[state.size],\n    state.secondaryContent.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"]}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { MenuTriggerChildProps } from '@fluentui/react-menu';
 import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partial<MenuTriggerChildProps> & {
+export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partial<Omit<MenuTriggerChildProps, 'ref'>> & {
     /**
      * Menu icon that indicates that this button has a menu that can be expanded.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { MenuTriggerChildProps } from '@fluentui/react-menu';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> &\n  Partial<MenuTriggerChildProps> & {\n    /**\n     * Menu icon that indicates that this button has a menu that can be expanded.\n     */\n    menuIcon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n  };\n\nexport type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';\n\nexport type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';\n\nexport interface MenuButtonState\n  extends Omit<ButtonState, 'iconPosition'>,\n    ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { MenuTriggerChildProps } from '@fluentui/react-menu';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> &\n  Partial<Omit<MenuTriggerChildProps, 'ref'>> & {\n    /**\n     * Menu icon that indicates that this button has a menu that can be expanded.\n     */\n    menuIcon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n  };\n\nexport type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';\n\nexport type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';\n\nexport interface MenuButtonState\n  extends Omit<ButtonState, 'iconPosition'>,\n    ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {}\n"]}

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

@@ -7,11 +7,11 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./
      */
     var renderMenuButton = function (state) {
         var _a = react_utilities_1.getSlotsCompat(state, useMenuButton_1.menuButtonShorthandPropsCompat), slots = _a.slots, slotProps = _a.slotProps;
-        var children = state.children, iconOnly = state.iconOnly;
+        var children = state.children, icon = state.icon, iconOnly = state.iconOnly;
         return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
             React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
             !iconOnly && children,
-            !iconOnly && React.createElement(slots.menuIcon, tslib_1.__assign({}, slotProps.menuIcon))));
+            (!iconOnly || !icon.children) && React.createElement(slots.menuIcon, tslib_1.__assign({}, slotProps.menuIcon))));
     };
     exports.renderMenuButton = renderMenuButton;
 });

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

@@ -1 +1 @@
-{"version":3,"file":"renderMenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,gBAAgB,GAAG,UAAC,KAAsB;QAC/C,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,8CAA8B,CAAC,EAA1E,KAAK,WAAA,EAAE,SAAS,eAA0D,CAAC;QAC3E,IAAA,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAErC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YACjC,CAAC,QAAQ,IAAI,QAAQ;YACrB,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CAC7C,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,gBAAgB,oBAW3B","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { menuButtonShorthandPropsCompat } from './useMenuButton';\nimport type { 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 = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, menuButtonShorthandPropsCompat);\n  const { children, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.icon {...slotProps.icon} />\n      {!iconOnly && children}\n      {!iconOnly && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"file":"renderMenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,gBAAgB,GAAG,UAAC,KAAsB;QAC/C,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,8CAA8B,CAAC,EAA1E,KAAK,WAAA,EAAE,SAAS,eAA0D,CAAC;QAC3E,IAAA,QAAQ,GAAqB,KAAK,SAA1B,EAAE,IAAI,GAAe,KAAK,KAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAE3C,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YACjC,CAAC,QAAQ,IAAI,QAAQ;YACrB,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CACjE,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,gBAAgB,oBAW3B","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { menuButtonShorthandPropsCompat } from './useMenuButton';\nimport type { 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 = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, menuButtonShorthandPropsCompat);\n  const { children, icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.icon {...slotProps.icon} />\n      {!iconOnly && children}\n      {(!iconOnly || !icon.children) && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -5,6 +5,8 @@ import type { MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonState }
  */
 export declare const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[];
 /**
- * Given user props, returns the final state for a MenuButton.
+ * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
  */
 export declare const useMenuButton: (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => MenuButtonState;

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

@@ -8,11 +8,11 @@ define(["require", "exports", "@fluentui/react-utilities", "./useMenuButtonState
     exports.menuButtonShorthandPropsCompat = ['icon', 'menuIcon'];
     var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.menuButtonShorthandPropsCompat });
     /**
-     * Given user props, returns the final state for a MenuButton.
+     * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.
+     * @param props - User provided props to the MenuButton component.
+     * @param ref - User provided ref to be passed to the MenuButton component.
      */
     var useMenuButton = function (props, ref, defaultProps) {
-        // Note: because menu button's template and slots are different, we can't reuse
-        // those, but the useMenuButtonState hook can reuse useButtonState.
         var state = mergeProps({
             ref: ref,
             as: 'button',

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

@@ -1 +1 @@
-{"version":3,"file":"useMenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButton.ts"],"names":[],"mappings":";;;;IAKA;;OAEG;IACU,QAAA,8BAA8B,GAAqC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAErG,IAAM,UAAU,GAAG,gCAAc,CAAkB,EAAE,SAAS,EAAE,sCAA8B,EAAE,CAAC,CAAC;IAElG;;OAEG;IACI,IAAM,aAAa,GAAG,UAAC,KAAsB,EAAE,GAA2B,EAAE,YAA8B;QAC/G,+EAA+E;QAC/E,mEAAmE;QACnE,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,EAAE,EAAE,QAAQ;YACZ,eAAe;YACf,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACpB,mBAAmB;YACnB,QAAQ,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACxB,iBAAiB;YACjB,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;SACf,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,sCAA8B,CAAC,EACnF,uCAAqB,CAAC,KAAK,EAAE,sCAA8B,CAAC,CAC1C,CAAC;QAErB,uCAAkB,CAAC,KAAK,CAAC,CAAC;QAE1B,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAtBW,QAAA,aAAa,iBAsBxB","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useMenuButtonState } from './useMenuButtonState';\nimport type { MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonState } from './MenuButton.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[] = ['icon', 'menuIcon'];\n\nconst mergeProps = makeMergeProps<MenuButtonState>({ deepMerge: menuButtonShorthandPropsCompat });\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n  // Note: because menu button's template and slots are different, we can't reuse\n  // those, but the useMenuButtonState hook can reuse useButtonState.\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Button slots\n      icon: { as: 'span' },\n      // MenuButton slots\n      menuIcon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, menuButtonShorthandPropsCompat),\n    resolveShorthandProps(props, menuButtonShorthandPropsCompat),\n  ) as MenuButtonState;\n\n  useMenuButtonState(state);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useMenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButton.ts"],"names":[],"mappings":";;;;IAKA;;OAEG;IACU,QAAA,8BAA8B,GAAqC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAErG,IAAM,UAAU,GAAG,gCAAc,CAAkB,EAAE,SAAS,EAAE,sCAA8B,EAAE,CAAC,CAAC;IAElG;;;;OAIG;IACI,IAAM,aAAa,GAAG,UAAC,KAAsB,EAAE,GAA2B,EAAE,YAA8B;QAC/G,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,EAAE,EAAE,QAAQ;YACZ,eAAe;YACf,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACpB,mBAAmB;YACnB,QAAQ,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACxB,iBAAiB;YACjB,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;SACf,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,sCAA8B,CAAC,EACnF,uCAAqB,CAAC,KAAK,EAAE,sCAA8B,CAAC,CAC7D,CAAC;QAEF,uCAAkB,CAAC,KAAK,CAAC,CAAC;QAE1B,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IApBW,QAAA,aAAa,iBAoBxB","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useMenuButtonState } from './useMenuButtonState';\nimport type { MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonState } from './MenuButton.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[] = ['icon', 'menuIcon'];\n\nconst mergeProps = makeMergeProps<MenuButtonState>({ deepMerge: menuButtonShorthandPropsCompat });\n\n/**\n * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Button slots\n      icon: { as: 'span' },\n      // MenuButton slots\n      menuIcon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, menuButtonShorthandPropsCompat),\n    resolveShorthandProps(props, menuButtonShorthandPropsCompat),\n  );\n\n  useMenuButtonState(state);\n\n  return state;\n};\n"]}

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

@@ -1,2 +1,7 @@
 import type { MenuButtonState } from './MenuButton.types';
+/**
+ * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any
+ * additional MenuButton specific processing.
+ * @param state - MenuButtonButton state to mutate.
+ */
 export declare const useMenuButtonState: (state: MenuButtonState) => MenuButtonState;

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

@@ -2,10 +2,16 @@ define(["require", "exports", "react", "@fluentui/react-icons", "../Button/useBu
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useMenuButtonState = void 0;
+    /**
+     * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any
+     * additional MenuButton specific processing.
+     * @param state - MenuButtonButton state to mutate.
+     */
     var useMenuButtonState = function (state) {
         // It behaves like a button.
         useButtonState_1.useButtonState(state);
-        var menuIcon = state.menuIcon, size = state.size;
+        var children = state.children, menuIcon = state.menuIcon, size = state.size;
+        state.iconOnly = !children;
         if (!menuIcon.children) {
             if (size === 'large') {
                 menuIcon.children = React.createElement(react_icons_1.ChevronDown24Regular, null);

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

@@ -1 +1 @@
-{"version":3,"file":"useMenuButtonState.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonState.tsx"],"names":[],"mappings":";;;;IAKO,IAAM,kBAAkB,GAAG,UAAC,KAAsB;QACvD,4BAA4B;QAC5B,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEd,IAAA,QAAQ,GAAW,KAAK,SAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;QACjC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;YACtB,IAAI,IAAI,KAAK,OAAO,EAAE;gBACpB,QAAQ,CAAC,QAAQ,GAAG,oBAAC,kCAAoB,OAAG,CAAC;aAC9C;iBAAM;gBACL,QAAQ,CAAC,QAAQ,GAAG,oBAAC,kCAAoB,OAAG,CAAC;aAC9C;SACF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAdW,QAAA,kBAAkB,sBAc7B","sourcesContent":["import * as React from 'react';\nimport { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';\nimport { useButtonState } from '../Button/useButtonState';\nimport type { MenuButtonState } from './MenuButton.types';\n\nexport const useMenuButtonState = (state: MenuButtonState): MenuButtonState => {\n  // It behaves like a button.\n  useButtonState(state);\n\n  const { menuIcon, size } = state;\n  if (!menuIcon.children) {\n    if (size === 'large') {\n      menuIcon.children = <ChevronDown24Regular />;\n    } else {\n      menuIcon.children = <ChevronDown20Regular />;\n    }\n  }\n\n  return state;\n};\n"]}
+{"version":3,"file":"useMenuButtonState.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonState.tsx"],"names":[],"mappings":";;;;IAKA;;;;OAIG;IACI,IAAM,kBAAkB,GAAG,UAAC,KAAsB;QACvD,4BAA4B;QAC5B,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEd,IAAA,QAAQ,GAAqB,KAAK,SAA1B,EAAE,QAAQ,GAAW,KAAK,SAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;QAC3C,KAAK,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAC;QAC3B,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;YACtB,IAAI,IAAI,KAAK,OAAO,EAAE;gBACpB,QAAQ,CAAC,QAAQ,GAAG,oBAAC,kCAAoB,OAAG,CAAC;aAC9C;iBAAM;gBACL,QAAQ,CAAC,QAAQ,GAAG,oBAAC,kCAAoB,OAAG,CAAC;aAC9C;SACF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAfW,QAAA,kBAAkB,sBAe7B","sourcesContent":["import * as React from 'react';\nimport { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';\nimport { useButtonState } from '../Button/useButtonState';\nimport type { MenuButtonState } from './MenuButton.types';\n\n/**\n * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any\n * additional MenuButton specific processing.\n * @param state - MenuButtonButton state to mutate.\n */\nexport const useMenuButtonState = (state: MenuButtonState): MenuButtonState => {\n  // It behaves like a button.\n  useButtonState(state);\n\n  const { children, menuIcon, size } = state;\n  state.iconOnly = !children;\n  if (!menuIcon.children) {\n    if (size === 'large') {\n      menuIcon.children = <ChevronDown24Regular />;\n    } else {\n      menuIcon.children = <ChevronDown20Regular />;\n    }\n  }\n\n  return state;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"useMenuButtonStyles.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":";;;;IAIA,IAAM,iBAAiB,GAAG,8BAAU,CAAC;QACnC,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAC;IAEI,IAAM,mBAAmB,GAAG,UAAC,KAAsB;QACxD,IAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;QAE3C,KAAK,CAAC,QAAQ,CAAC,SAAS,GAAG,gCAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QAE9F,iCAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IARW,QAAA,mBAAmB,uBAQ9B","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { MenuButtonState } from './MenuButton.types';\n\nconst useMenuIconStyles = makeStyles({\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useMenuButtonStyles = (state: MenuButtonState): MenuButtonState => {\n  const menuIconStyles = useMenuIconStyles();\n\n  state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);\n\n  useButtonStyles(state);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useMenuButtonStyles.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":";;;;IAIA,IAAM,iBAAiB,GAAG,8BAAU,CAAC;QACnC,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAC;IAEI,IAAM,mBAAmB,GAAG,UAAC,KAAsB;QACxD,IAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;QAE3C,KAAK,CAAC,QAAQ,CAAC,SAAS,GAAG,gCAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QAE9F,iCAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IARW,QAAA,mBAAmB,uBAQ9B","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { MenuButtonState } from './MenuButton.types';\n\nconst useMenuIconStyles = makeStyles({\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useMenuButtonStyles = (state: MenuButtonState): MenuButtonState => {\n  const menuIconStyles = useMenuIconStyles();\n\n  state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);\n\n  useButtonStyles(state);\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { SplitButtonProps } from './SplitButton.types';
+/**
+ * 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 declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,19 @@
+define(["require", "exports", "react", "../Button/index", "../MenuButton/index", "./renderSplitButton", "./useSplitButton", "./useSplitButtonStyles"], function (require, exports, React, index_1, index_2, renderSplitButton_1, useSplitButton_1, useSplitButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SplitButton = void 0;
+    /**
+     * 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.
+     */
+    exports.SplitButton = React.forwardRef(function (props, ref) {
+        var state = useSplitButton_1.useSplitButton(props, ref, {
+            button: { as: index_1.Button },
+            menuButton: { as: index_2.MenuButton },
+        });
+        useSplitButtonStyles_1.useSplitButtonStyles(state);
+        return renderSplitButton_1.renderSplitButton(state);
+    });
+    exports.SplitButton.displayName = 'SplitButton';
+});
+//# sourceMappingURL=SplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":";;;;IAQA;;;OAGG;IACU,QAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,+BAAc,CAAC,KAAK,EAAE,GAAG,EAAE;YACvC,MAAM,EAAE,EAAE,EAAE,EAAE,cAAM,EAAE;YACtB,UAAU,EAAE,EAAE,EAAE,EAAE,kBAAU,EAAE;SAC/B,CAAC,CAAC;QAEH,2CAAoB,CAAC,KAAK,CAAC,CAAC;QAE5B,OAAO,qCAAiB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { Button } from '../Button/index';\nimport { MenuButton } from '../MenuButton/index';\nimport { renderSplitButton } from './renderSplitButton';\nimport { useSplitButton } from './useSplitButton';\nimport { useSplitButtonStyles } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\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 = React.forwardRef<HTMLElement, SplitButtonProps>((props, ref) => {\n  const state = useSplitButton(props, ref, {\n    button: { as: Button },\n    menuButton: { as: MenuButton },\n  });\n\n  useSplitButtonStyles(state);\n\n  return renderSplitButton(state);\n});\n\nSplitButton.displayName = 'SplitButton';\n"]}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ButtonProps, ButtonShorthandPropsCompat } from '../Button/Button.types';
+import type { MenuButtonProps } from '../MenuButton/MenuButton.types';
+export interface SplitButtonProps extends Omit<ButtonProps, ButtonShorthandPropsCompat>, MenuButtonProps {
+    /**
+     * Button to perform primary action in SplitButton.
+     */
+    button?: ShorthandPropsCompat<ButtonProps>;
+    /**
+     * Button that opens menu with secondary actions in SplitButton.
+     */
+    menuButton?: ShorthandPropsCompat<MenuButtonProps>;
+    /**
+     * Ref to the Button element.
+     */
+    buttonRef?: React.Ref<HTMLElement>;
+    /**
+     * Ref to the MenuButton element.
+     */
+    menuButtonRef?: React.Ref<HTMLElement>;
+}
+export declare type SplitButtonShorthandPropsCompat = 'button' | 'menuButton';
+export declare type SplitButtonDefaultedProps = 'size';
+export interface SplitButtonState extends ComponentStateCompat<SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonDefaultedProps> {
+    /**
+     * Ref to the root element
+     */
+    ref: React.Ref<HTMLElement>;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.types.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonShorthandPropsCompat } from '../Button/Button.types';\nimport type { MenuButtonProps } from '../MenuButton/MenuButton.types';\n\nexport interface SplitButtonProps extends Omit<ButtonProps, ButtonShorthandPropsCompat>, MenuButtonProps {\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  button?: ShorthandPropsCompat<ButtonProps>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: ShorthandPropsCompat<MenuButtonProps>;\n\n  /**\n   * Ref to the Button element.\n   */\n  buttonRef?: React.Ref<HTMLElement>;\n\n  /**\n   * Ref to the MenuButton element.\n   */\n  menuButtonRef?: React.Ref<HTMLElement>;\n}\n\nexport type SplitButtonShorthandPropsCompat = 'button' | 'menuButton';\n\nexport type SplitButtonDefaultedProps = 'size';\n\nexport interface SplitButtonState\n  extends ComponentStateCompat<SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonDefaultedProps> {\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n}\n"]}

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

@@ -0,0 +1,5 @@
+export * from './SplitButton';
+export * from './SplitButton.types';
+export * from './renderSplitButton';
+export * from './useSplitButton';
+export { useSplitButtonStyles } from './useSplitButtonStyles';

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

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "./SplitButton", "./SplitButton.types", "./renderSplitButton", "./useSplitButton", "./useSplitButtonStyles"], function (require, exports, tslib_1, SplitButton_1, SplitButton_types_1, renderSplitButton_1, useSplitButton_1, useSplitButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSplitButtonStyles = void 0;
+    tslib_1.__exportStar(SplitButton_1, exports);
+    tslib_1.__exportStar(SplitButton_types_1, exports);
+    tslib_1.__exportStar(renderSplitButton_1, exports);
+    tslib_1.__exportStar(useSplitButton_1, exports);
+    Object.defineProperty(exports, "useSplitButtonStyles", { enumerable: true, get: function () { return useSplitButtonStyles_1.useSplitButtonStyles; } });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SplitButton/index.ts"],"names":[],"mappings":";;;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACxB,4HAAA,oBAAoB,OAAA","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { useSplitButtonStyles } from './useSplitButtonStyles';\n"]}

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

@@ -0,0 +1,5 @@
+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;

package/lib-amd/components/SplitButton/renderSplitButton.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useSplitButton"], function (require, exports, tslib_1, React, react_utilities_1, useSplitButton_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderSplitButton = void 0;
+    /**
+     * Renders a SplitButton component by passing the state defined props to the appropriate slots.
+     */
+    var renderSplitButton = function (state) {
+        var _a = react_utilities_1.getSlotsCompat(state, useSplitButton_1.splitButtonShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(slots.button, tslib_1.__assign({}, slotProps.button)),
+            React.createElement(slots.menuButton, tslib_1.__assign({}, slotProps.menuButton))));
+    };
+    exports.renderSplitButton = renderSplitButton;
+});
+//# sourceMappingURL=renderSplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderSplitButton.js","sourceRoot":"../src/","sources":["components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,iBAAiB,GAAG,UAAC,KAAuB;QACjD,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,0CAAyB,CAAC,EAArE,KAAK,WAAA,EAAE,SAAS,eAAqD,CAAC;QAE9E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI;YACtC,oBAAC,KAAK,CAAC,UAAU,uBAAK,SAAS,CAAC,UAAU,EAAI,CACnC,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,iBAAiB,qBAS5B","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { splitButtonShorthandProps } from './useSplitButton';\nimport type { 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 = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, splitButtonShorthandProps);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button} />\n      <slots.menuButton {...slotProps.menuButton} />\n    </slots.root>\n  );\n};\n"]}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonState } from './SplitButton.types';
+export declare const splitButtonShorthandProps: SplitButtonShorthandPropsCompat[];
+/**
+ * Given user props, defines default props for the SplitButton and returns processed state.
+ * @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<HTMLElement>, defaultProps?: SplitButtonProps | undefined) => SplitButtonState;

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

@@ -0,0 +1,55 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSplitButton = exports.splitButtonShorthandProps = void 0;
+    exports.splitButtonShorthandProps = ['button', 'menuButton'];
+    var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.splitButtonShorthandProps });
+    /**
+     * Given user props, defines default props for the SplitButton and returns processed state.
+     * @param props - User provided props to the SplitButton component.
+     * @param ref - User provided ref to be passed to the SplitButton component.
+     */
+    var useSplitButton = function (props, ref, defaultProps) {
+        var resolvedShorthandProps = react_utilities_1.resolveShorthandProps(props, exports.splitButtonShorthandProps);
+        var className = props.className;
+        var button = resolvedShorthandProps.button, buttonRef = resolvedShorthandProps.buttonRef, circular = resolvedShorthandProps.circular, disabled = resolvedShorthandProps.disabled, disabledFocusable = resolvedShorthandProps.disabledFocusable, menuButton = resolvedShorthandProps.menuButton, menuButtonRef = resolvedShorthandProps.menuButtonRef, outline = resolvedShorthandProps.outline, primary = resolvedShorthandProps.primary, _a = resolvedShorthandProps.size, size = _a === void 0 ? 'medium' : _a, subtle = resolvedShorthandProps.subtle, transparent = resolvedShorthandProps.transparent, userProps = tslib_1.__rest(resolvedShorthandProps, ["button", "buttonRef", "circular", "disabled", "disabledFocusable", "menuButton", "menuButtonRef", "outline", "primary", "size", "subtle", "transparent"]);
+        // TODO: To be resolved when moving to simplified prop merging
+        // const buttonInternalRef = React.useRef<HTMLElement | null>(null);
+        // const menuButtonInternalRef = React.useRef<HTMLElement | null>(null);
+        var state = mergeProps({
+            'aria-disabled': disabled,
+            as: 'div',
+            className: className,
+            ref: ref,
+            size: size,
+            button: tslib_1.__assign(tslib_1.__assign({ as: 'button', 
+                // TODO: To be resolved when moving to simplified prop merging
+                // ref: useMergedRefs(buttonRef, buttonInternalRef),
+                circular: circular,
+                disabled: disabled,
+                disabledFocusable: disabledFocusable,
+                outline: outline,
+                primary: primary,
+                size: size,
+                subtle: subtle,
+                transparent: transparent }, userProps), button),
+            menuButton: tslib_1.__assign({ as: 'button', 
+                // TODO: To be resolved when moving to simplified prop merging
+                // ref: useMergedRefs(menuButtonRef, menuButtonInternalRef),
+                circular: circular,
+                disabled: disabled,
+                disabledFocusable: disabledFocusable,
+                outline: outline,
+                primary: primary,
+                size: size,
+                subtle: subtle,
+                transparent: transparent }, menuButton),
+        }, 
+        // TODO: To be resolved when moving to simplified prop merging
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        defaultProps, resolvedShorthandProps);
+        return state;
+    };
+    exports.useSplitButton = useSplitButton;
+});
+//# sourceMappingURL=useSplitButton.js.map