@fluentui/react-button 0.0.0-nightly-20230502-0418.1 → 0.0.0-nightly-20230504-0417.1

package/lib/components/SplitButton/useSplitButton.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { Button } from '../Button/Button';
+import { MenuButton } from '../MenuButton/MenuButton';
+/**
+ * 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 const useSplitButton_unstable = (props, ref) => {
+  const {
+    appearance = 'secondary',
+    children,
+    disabled = false,
+    disabledFocusable = false,
+    icon,
+    iconPosition = 'before',
+    menuButton,
+    menuIcon,
+    primaryActionButton,
+    shape = 'rounded',
+    size = 'medium'
+  } = props;
+  const baseId = useId('splitButton-');
+  const menuButtonShorthand = resolveShorthand(menuButton, {
+    defaultProps: {
+      appearance,
+      disabled,
+      disabledFocusable,
+      menuIcon,
+      shape,
+      size
+    },
+    required: true
+  });
+  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
+    defaultProps: {
+      appearance,
+      children,
+      disabled,
+      disabledFocusable,
+      icon,
+      iconPosition,
+      id: baseId + '__primaryActionButton',
+      shape,
+      size
+    },
+    required: true
+  });
+  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
+  // by the user.
+  if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
+    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
+  }
+  return {
+    // Props passed at the top-level
+    appearance,
+    disabled,
+    disabledFocusable,
+    iconPosition,
+    shape,
+    size,
+    // Slots definition
+    components: {
+      root: 'div',
+      menuButton: MenuButton,
+      primaryActionButton: Button
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    menuButton: menuButtonShorthand,
+    primaryActionButton: primaryActionButtonShorthand
+  };
+};
+//# sourceMappingURL=useSplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","menuButtonShorthand","defaultProps","required","primaryActionButtonShorthand","id","components","root"],"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = resolveShorthand(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n  // by the user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      menuButton: MenuButton,\n      primaryActionButton: Button,\n    },\n\n    root: getNativeElementProps('div', { ref, ...props }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAC/D,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,QAAQ;AAG3B;;;;;AAKA,OAAO,MAAMC,uBAAA,GAA0BA,CACrCC,KAAA,EACAC,GAAA,KACqB;EACrB,MAAM;IACJC,UAAA,GAAa;IACbC,QAAA;IACAC,QAAA,GAAW,KAAK;IAChBC,iBAAA,GAAoB,KAAK;IACzBC,IAAA;IACAC,YAAA,GAAe;IACfC,UAAA;IACAC,QAAA;IACAC,mBAAA;IACAC,KAAA,GAAQ;IACRC,IAAA,GAAO;EAAQ,CAChB,GAAGZ,KAAA;EAEJ,MAAMa,MAAA,GAASjB,KAAA,CAAM;EAErB,MAAMkB,mBAAA,GAAsBnB,gBAAA,CAAiBa,UAAA,EAAY;IACvDO,YAAA,EAAc;MACZb,UAAA;MACAE,QAAA;MACAC,iBAAA;MACAI,QAAA;MACAE,KAAA;MACAC;IACF;IACAI,QAAA,EAAU;EACZ;EAEA,MAAMC,4BAAA,GAA+BtB,gBAAA,CAAiBe,mBAAA,EAAqB;IACzEK,YAAA,EAAc;MACZb,UAAA;MACAC,QAAA;MACAC,QAAA;MACAC,iBAAA;MACAC,IAAA;MACAC,YAAA;MACAW,EAAA,EAAIL,MAAA,GAAS;MACbF,KAAA;MACAC;IACF;IACAI,QAAA,EAAU;EACZ;EAEA;EACA;EACA,IACEF,mBAAA,IACAG,4BAAA,IACA,CAACH,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;IACAA,mBAAmB,CAAC,kBAAkB,GAAGG,4BAAA,CAA6BC,EAAE;EAC1E;EAEA,OAAO;IACL;IACAhB,UAAA;IACAE,QAAA;IACAC,iBAAA;IACAE,YAAA;IACAI,KAAA;IACAC,IAAA;IAEA;IACAO,UAAA,EAAY;MACVC,IAAA,EAAM;MACNZ,UAAA,EAAYV,UAAA;MACZY,mBAAA,EAAqBb;IACvB;IAEAuB,IAAA,EAAM1B,qBAAA,CAAsB,OAAO;MAAEO,GAAA;MAAK,GAAGD;IAAM;IACnDQ,UAAA,EAAYM,mBAAA;IACZJ,mBAAA,EAAqBO;EACvB;AACF"}

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

@@ -0,0 +1,108 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const splitButtonClassNames = {
+  root: 'fui-SplitButton',
+  menuButton: 'fui-SplitButton__menuButton',
+  primaryActionButton: 'fui-SplitButton__primaryActionButton'
+};
+const useFocusStyles = /*#__PURE__*/__styles({
+  primaryActionButton: {
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B6xbmo0: ["f1x37qnr", "f1um7c6d"],
+    kdpuga: ["fn4c73s", "f6pwzcr"]
+  },
+  menuButton: {
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    lbo84a: ["frrbwxo", "f1rgcpbv"],
+    dm238s: ["f1um7c6d", "f1x37qnr"],
+    Bw81rd7: ["f6pwzcr", "fn4c73s"]
+  }
+}, {
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
+  d: [".f1x37qnr[data-fui-focus-visible]{border-top-right-radius:0;}", ".f1um7c6d[data-fui-focus-visible]{border-top-left-radius:0;}", ".fn4c73s[data-fui-focus-visible]{border-bottom-right-radius:0;}", ".f6pwzcr[data-fui-focus-visible]{border-bottom-left-radius:0;}", ".frrbwxo[data-fui-focus-visible]{border-left-width:0;}", ".f1rgcpbv[data-fui-focus-visible]{border-right-width:0;}"]
+});
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "ftuwxu6",
+    Brf1p80: "fsxf2b5",
+    qhf8xq: "f10pi13n",
+    ha4doy: "fmrv4ls",
+    kn2xc0: ["f14uur2j", "fc1btbj"],
+    Bs76p8a: ["fye5tvs", "fc597qq"],
+    cuxpm9: ["f1e8brtx", "fr36rk3"],
+    Biffepf: ["fxp12j1", "f1m6nt2y"],
+    Defnvf: ["fr7y8no", "f1dn0c6m"],
+    z0pv9t: "f1hvqvul"
+  },
+  outline: {},
+  primary: {
+    B1l9wao: ["f117mkrt", "f6ic349"],
+    lcnrd8: ["f10mpf6u", "f1bt8jlh"],
+    Brbpp8k: ["f1c28ih9", "fku5vw4"],
+    Bcsxniv: ["ff0tx2l", "fnrj3rw"],
+    tl7e51: ["f3jppgx", "f1m2s8ie"],
+    mba178: ["f96h41g", "fdxf0pi"]
+  },
+  secondary: {},
+  subtle: {
+    B1l9wao: ["fbw67pg", "fcas6k2"],
+    lcnrd8: ["fn44ryq", "fwhhltr"],
+    Brbpp8k: ["f1xppm0p", "fkfp127"]
+  },
+  transparent: {
+    B1l9wao: ["fbw67pg", "fcas6k2"],
+    lcnrd8: ["fn44ryq", "fwhhltr"],
+    Brbpp8k: ["f1xppm0p", "fkfp127"]
+  },
+  circular: {},
+  rounded: {},
+  square: {},
+  disabled: {
+    B1l9wao: ["f10xrnr8", "f15nylwb"],
+    lcnrd8: ["f11fwhjz", "f18vtcsx"],
+    Brbpp8k: ["f31btwb", "fzgm9gq"]
+  },
+  disabledHighContrast: {
+    Bcsxniv: ["fj2q5vi", "f13tct40"],
+    tl7e51: ["fb2mzc7", "f179dhpp"],
+    mba178: ["f1ma39qa", "f1nzpdru"]
+  }
+}, {
+  d: [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}", ".f117mkrt .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f6ic349 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".fbw67pg .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1);}", ".fcas6k2 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  h: [".f10mpf6u:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f1bt8jlh:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1c28ih9:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".fku5vw4:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fwhhltr:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xppm0p:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Pressed);}", ".fkfp127:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  m: [["@media (forced-colors: active){.ff0tx2l .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}.fnrj3rw .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3jppgx:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.f1m2s8ie:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f96h41g:hover:active .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.fdxf0pi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ma39qa:hover:active .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f1nzpdru:hover:active .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+export const useSplitButtonStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const {
+    appearance,
+    disabled,
+    disabledFocusable
+  } = state;
+  state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
+  if (state.menuButton) {
+    state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+  }
+  if (state.primaryActionButton) {
+    state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useSplitButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","Brovlpu","B486eqv","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","f","i","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["../../../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: 0,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,+BAA+B,QAAQ;AAChD,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,mBAAA,EAAqB;AACvB;AAEA,MAAMC,cAAA,gBAAiBR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,UAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EAWvB;AAEA,MAAMC,aAAA,gBAAgBnB,QAAA;EAAAoB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA8ItB;AAEA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,UAAA,GAAahC,aAAA;EACnB,MAAMiC,WAAA,GAAc5C,cAAA;EAEpB,MAAM;IAAE6C,UAAA;IAAYR,QAAA;IAAUS;EAAiB,CAAE,GAAGJ,KAAA;EAEpDA,KAAA,CAAM7C,IAAI,CAACkD,SAAS,GAAGtD,YAAA,CACrBG,qBAAA,CAAsBC,IAAI,EAC1B8C,UAAA,CAAW/B,IAAI,EACfiC,UAAA,IAAcF,UAAU,CAACE,UAAA,CAAW,EACpC,CAACR,QAAA,IAAYS,iBAAgB,KAAMH,UAAA,CAAWN,QAAQ,EACtD,CAACA,QAAA,IAAYS,iBAAgB,KAAMH,UAAA,CAAWL,oBAAoB,EAClEI,KAAA,CAAM7C,IAAI,CAACkD,SAAS;EAGtB,IAAIL,KAAA,CAAM5C,UAAU,EAAE;IACpB4C,KAAA,CAAM5C,UAAU,CAACiD,SAAS,GAAGtD,YAAA,CAC3BG,qBAAA,CAAsBE,UAAU,EAChC8C,WAAA,CAAY9C,UAAU,EACtB4C,KAAA,CAAM5C,UAAU,CAACiD,SAAS;EAE9B;EAEA,IAAIL,KAAA,CAAM3C,mBAAmB,EAAE;IAC7B2C,KAAA,CAAM3C,mBAAmB,CAACgD,SAAS,GAAGtD,YAAA,CACpCG,qBAAA,CAAsBG,mBAAmB,EACzC6C,WAAA,CAAY7C,mBAAmB,EAC/B2C,KAAA,CAAM3C,mBAAmB,CAACgD,SAAS;EAEvC;EAEA,OAAOL,KAAA;AACT"}

package/lib/components/ToggleButton/ToggleButton.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,wBAAwB,QAAQ;AACzC,SAASC,8BAA8B,QAAQ;AAG/C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,YAAA,gBAAuDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnG,MAAMC,KAAA,GAAQP,wBAAA,CAAyBK,KAAA,EAAOC,GAAA;EAE9CL,8BAAA,CAA+BM,KAAA;EAE/BL,2BAAA,CAA4B,kCAAkCK,KAAA;EAE9D,OAAOR,2BAAA,CAA4BQ,KAAA;EACnC;AACF;;AAEAJ,YAAA,CAAaK,WAAW,GAAG"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ToggleButton.types.js.map

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

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

package/lib/components/ToggleButton/index.js

@@ -0,0 +1,6 @@
+export * from './ToggleButton';
+export * from './ToggleButton.types';
+export * from './renderToggleButton';
+export * from './useToggleButton';
+export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["toggleButtonClassNames","useToggleButtonStyles_unstable"],"sources":["../../../src/components/ToggleButton/index.ts"],"sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,sBAAsB,EAAEC,8BAA8B,QAAQ"}

package/lib/components/ToggleButton/renderToggleButton.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["renderButton_unstable","renderToggleButton_unstable"],"sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"mappings":"AAAA,SAASA,qBAAA,IAAyBC,2BAA2B,QAAQ"}

package/lib/components/ToggleButton/useToggleButton.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useToggleState } from '../../utils/useToggleState';
+import { useButton_unstable } from '../Button/useButton';
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */
+export const useToggleButton_unstable = (props, ref) => {
+  const buttonState = useButton_unstable(props, ref);
+  return useToggleState(props, buttonState);
+};
+//# sourceMappingURL=useToggleButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AAGnC;;;;;;AAMA,OAAO,MAAMC,wBAAA,GAA2BA,CACtCC,KAAA,EACAC,GAAA,KACsB;EACtB,MAAMC,WAAA,GAAcJ,kBAAA,CAAmBE,KAAA,EAAOC,GAAA;EAE9C,OAAOJ,cAAA,CAAeG,KAAA,EAAOE,WAAA;AAC/B"}