@fluentui/react-button 9.0.0-alpha.85 → 9.0.0-alpha.89

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,IAAM,qBAAqB,GAAG;AAC5B,EAAA,MAAM,EAAE,oBADoB;AAE5B,EAAA,UAAU,EAAE;AAFgB,CAA9B;;AAKA,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAgGO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAChB,MAAM,CAAC,IADS,EAEhB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAFN,EAGhB,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAHR,EAIhB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UAJP,EAKhB,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,eALZ,EAMhB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YANT,EAOhB,KAAK,CAAC,SAPU,CAAlB;;AAUA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,mBAAA,CAAA,YAAA,CAAa,qBAAqB,CAAC,MAAnC,EAA2C,KAAK,CAAC,MAAN,CAAa,SAAxD,CAAzB;AACD;;AAED,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,mBAAA,CAAA,YAAA,CAAa,qBAAqB,CAAC,UAAnC,EAA+C,KAAK,CAAC,UAAN,CAAiB,SAAhE,CAA7B;AACD;;AAED,SAAO,KAAP;AACD,CAtBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport type { SplitButtonState } from './SplitButton.types';\n\nconst SplitButtonClassNames = {\n  button: 'SplitButton-button',\n  menuButton: 'SplitButton-menuButton',\n};\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n  }),\n  rootBlock: {\n    width: '100%',\n  },\n  rootPrimary: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n      },\n    },\n  }),\n  rootSubtle: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n  }),\n  rootTransparent: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n  }),\n  rootDisabled: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      },\n    },\n  }),\n});\n\nexport const useSplitButtonStyles = (state: SplitButtonState): SplitButtonState => {\n  const styles = useStyles();\n\n  state.className = mergeClasses(\n    styles.root,\n    state.block && styles.rootBlock,\n    state.primary && styles.rootPrimary,\n    state.subtle && styles.rootSubtle,\n    state.transparent && styles.rootTransparent,\n    state.disabled && styles.rootDisabled,\n    state.className,\n  );\n\n  if (state.button) {\n    state.button.className = mergeClasses(SplitButtonClassNames.button, state.button.className);\n  }\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, state.menuButton.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToggleButton/ToggleButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { ToggleButtonProps } from './ToggleButton.types';
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;

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

@@ -1,6 +1,6 @@
 import type { ComponentStateCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface ToggleButtonProps extends ButtonProps {
+export declare type ToggleButtonProps = ButtonProps & {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * Mutually exclusive to `defaultChecked`.
@@ -15,8 +15,7 @@ export interface ToggleButtonProps extends ButtonProps {
      * @default false
      */
     defaultChecked?: boolean;
-}
+};
 export declare type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;
 export declare type ToggleButtonDefaultedProps = ButtonDefaultedProps;
-export interface ToggleButtonState extends ButtonState, ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {
-}
+export declare type ToggleButtonState = ButtonState & ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;

package/lib-commonjs/components/ToggleButton/useChecked.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-export interface CheckedState {
+export declare type CheckedState = {
     checked?: boolean;
     defaultChecked?: boolean;
     onClick?: React.DOMAttributes<HTMLElement>['onClick'];
     role?: string;
     'aria-checked'?: React.AriaAttributes['aria-pressed'];
     'aria-pressed'?: React.AriaAttributes['aria-pressed'];
-}
+};
 /**
  * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
  * @param state - state to read and augment.

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

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAYA;;;AAGG;;;AACI,IAAM,UAAU,GAAG,UAA8B,KAA9B,EAA2C;AAC3D,MAAA,OAAO,GAAoC,KAAK,CAAzC,OAAP;AAAA,MAAS,OAAO,GAA2B,KAAK,CAAhC,OAAhB;AAAA,MAAkB,cAAc,GAAW,KAAK,CAAhB,cAAhC;AAAA,MAAkC,IAAI,GAAK,KAAK,CAAV,IAAtC;;AACF,MAAA,EAAA,GAAkC,iBAAA,CAAA,oBAAA,CAAqB,OAArB,EAA8B,cAA9B,CAAlC;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B,CAF6D,CAInE;;;AACA,EAAA,KAAK,CAAC,OAAN,GAAgB,YAAhB,CALmE,CAOnE;;AACA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,EAAA,KAAK,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,CAAL,GAA8D,CAAC,CAAC,YAAhE;AAEA,EAAA,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,WAAN,CACd,UAAC,EAAD,EAAoD;AAClD,QAAI,OAAJ,EAAa;AACX,MAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,IAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,GAXa,EAYd,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZc,CAAhB;AAcD,CA1BM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport interface CheckedState {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n}\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAYA;;;AAGG;;;AACI,IAAM,UAAU,GAAG,UAA8B,KAA9B,EAA2C;AAC3D,MAAA,OAAO,GAAoC,KAAK,CAAzC,OAAP;AAAA,MAAS,OAAO,GAA2B,KAAK,CAAhC,OAAhB;AAAA,MAAkB,cAAc,GAAW,KAAK,CAAhB,cAAhC;AAAA,MAAkC,IAAI,GAAK,KAAK,CAAV,IAAtC;;AACF,MAAA,EAAA,GAAkC,iBAAA,CAAA,oBAAA,CAAqB,OAArB,EAA8B,cAA9B,CAAlC;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B,CAF6D,CAInE;;;AACA,EAAA,KAAK,CAAC,OAAN,GAAgB,YAAhB,CALmE,CAOnE;;AACA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,EAAA,KAAK,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,CAAL,GAA8D,CAAC,CAAC,YAAhE;AAEA,EAAA,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,WAAN,CACd,UAAC,EAAD,EAAoD;AAClD,QAAI,OAAJ,EAAa;AACX,MAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,IAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,GAXa,EAYd,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZc,CAAhB;AAcD,CA1BM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport type CheckedState = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n};\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';
 /**
- * Given user props, returns the final state for a ToggleButton.
+ * 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 declare const useToggleButton: (props: ToggleButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState;

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

@@ -9,7 +9,10 @@ var useButton_1 = /*#__PURE__*/require("../Button/useButton");
 
 var useChecked_1 = /*#__PURE__*/require("./useChecked");
 /**
- * Given user props, returns the final state for a ToggleButton.
+ * 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.
  */
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,eAAe,GAAG,UAC7B,KAD6B,EAE7B,GAF6B,EAG7B,YAH6B,EAGG;AAEhC,MAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,EAAsB,YAAtB,CAAd;AAEA,EAAA,YAAA,CAAA,UAAA,CAAW,KAAX;AAEA,SAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourcesContent":["import * as React from 'react';\nimport { useButton } from '../Button/useButton';\nimport { useChecked } from './useChecked';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, returns the final state for a ToggleButton.\n */\nexport const useToggleButton = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: ToggleButtonProps,\n) => {\n  const state = useButton(props, ref, defaultProps);\n\n  useChecked(state as ToggleButtonProps);\n\n  return state as ToggleButtonState;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAGA;;;;;AAKG;;;AACI,IAAM,eAAe,GAAG,UAC7B,KAD6B,EAE7B,GAF6B,EAG7B,YAH6B,EAGG;AAEhC,MAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,EAAsB,YAAtB,CAAd;AAEA,EAAA,YAAA,CAAA,UAAA,CAAW,KAAX;AAEA,SAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourcesContent":["import * as React from 'react';\nimport { useButton } from '../Button/useButton';\nimport { useChecked } from './useChecked';\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 = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: ToggleButtonProps,\n) => {\n  const state = useButton(props, ref, defaultProps);\n\n  useChecked(state as ToggleButtonProps);\n\n  return state as ToggleButtonState;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,IAAM,aAAa,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA4IO,IAAM,qBAAqB,GAAG,UAAC,KAAD,EAAyB;AAC5D,MAAM,UAAU,GAAG,aAAa,EAAhC;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAChB,KAAK,CAAC,OAAN,IAAiB,UAAU,CAAC,OADZ,EAEhB,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAvB,IAAkC,UAAU,CAAC,cAF7B,EAGhB,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAvB,IAAkC,UAAU,CAAC,cAH7B,EAIhB,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,MAAvB,IAAiC,UAAU,CAAC,aAJ5B,EAKhB,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,WAAvB,IAAsC,UAAU,CAAC,kBALjC,EAMhB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,UAAU,CAAC,QAN1C,EAOhB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,OAArD,IAAgE,UAAU,CAAC,eAP3D,EAQhB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,MAArD,IAA+D,UAAU,CAAC,cAR1D,EAShB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,WAArD,IAAoE,UAAU,CAAC,mBAT/D,EAUhB,KAAK,CAAC,SAVU,CAAlB;AAaA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nconst useRootStyles = makeStyles({\n  checked: theme => ({\n    background: theme.alias.color.neutral.neutralBackground1Selected,\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderWidth: theme.global.strokeWidth.thin,\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\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  }),\n  checkedOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  checkedPrimary: theme => ({\n    background: theme.alias.color.neutral.brandBackgroundSelected,\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  checkedSubtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\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  checkedTransparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\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    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\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  }),\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\nexport const useToggleButtonStyles = (state: ToggleButtonState): ToggleButtonState => {\n  const rootStyles = useRootStyles();\n\n  state.className = mergeClasses(\n    state.checked && rootStyles.checked,\n    state.checked && state.outline && rootStyles.checkedOutline,\n    state.checked && state.primary && rootStyles.checkedPrimary,\n    state.checked && state.subtle && rootStyles.checkedSubtle,\n    state.checked && state.transparent && rootStyles.checkedTransparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\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.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,IAAM,aAAa,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA4IO,IAAM,qBAAqB,GAAG,UAAC,KAAD,EAAyB;AAC5D,MAAM,UAAU,GAAG,aAAa,EAAhC;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAChB,KAAK,CAAC,OAAN,IAAiB,UAAU,CAAC,OADZ,EAEhB,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAvB,IAAkC,UAAU,CAAC,cAF7B,EAGhB,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAvB,IAAkC,UAAU,CAAC,cAH7B,EAIhB,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,MAAvB,IAAiC,UAAU,CAAC,aAJ5B,EAKhB,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,WAAvB,IAAsC,UAAU,CAAC,kBALjC,EAMhB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,UAAU,CAAC,QAN1C,EAOhB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,OAArD,IAAgE,UAAU,CAAC,eAP3D,EAQhB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,MAArD,IAA+D,UAAU,CAAC,cAR1D,EAShB,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,WAArD,IAAoE,UAAU,CAAC,mBAT/D,EAUhB,KAAK,CAAC,SAVU,CAAlB;AAaA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nconst useRootStyles = makeStyles({\n  checked: theme => ({\n    background: theme.alias.color.neutral.neutralBackground1Selected,\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderWidth: theme.global.strokeWidth.thin,\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\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  }),\n  checkedOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  checkedPrimary: theme => ({\n    background: theme.alias.color.neutral.brandBackgroundSelected,\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  checkedSubtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\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  checkedTransparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\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    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\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  }),\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\nexport const useToggleButtonStyles = (state: ToggleButtonState): ToggleButtonState => {\n  const rootStyles = useRootStyles();\n\n  state.className = mergeClasses(\n    state.checked && rootStyles.checked,\n    state.checked && state.outline && rootStyles.checkedOutline,\n    state.checked && state.primary && rootStyles.checkedPrimary,\n    state.checked && state.subtle && rootStyles.checkedSubtle,\n    state.checked && state.transparent && rootStyles.checkedTransparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\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.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Button';
 export * from './CompoundButton';
 export * from './MenuButton';
+export * from './SplitButton';
 export * from './ToggleButton';

package/lib-commonjs/index.js

@@ -12,5 +12,7 @@ tslib_1.__exportStar(require("./CompoundButton"), exports);
 
 tslib_1.__exportStar(require("./MenuButton"), exports);
 
+tslib_1.__exportStar(require("./SplitButton"), exports);
+
 tslib_1.__exportStar(require("./ToggleButton"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './ToggleButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './SplitButton';\nexport * from './ToggleButton';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "9.0.0-alpha.85",
+  "version": "9.0.0-alpha.89",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,12 +26,12 @@
   },
   "devDependencies": {
     "@fluentui/a11y-testing": "^0.1.0",
-    "@fluentui/babel-make-styles": "9.0.0-alpha.47",
-    "@fluentui/eslint-plugin": "^1.4.1",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.40",
-    "@fluentui/react-conformance": "^0.5.0",
-    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.9",
-    "@fluentui/react-menu": "9.0.0-alpha.76",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.51",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.44",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.13",
+    "@fluentui/react-menu": "9.0.0-alpha.80",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -47,9 +47,9 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "9.0.0-alpha.3",
     "@fluentui/react-icons": "^1.1.136",
-    "@fluentui/react-make-styles": "9.0.0-alpha.65",
-    "@fluentui/react-tabster": "9.0.0-alpha.59",
-    "@fluentui/react-utilities": "9.0.0-alpha.47",
+    "@fluentui/react-make-styles": "9.0.0-alpha.69",
+    "@fluentui/react-tabster": "9.0.0-alpha.63",
+    "@fluentui/react-utilities": "9.0.0-alpha.49",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {