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

package/lib-commonjs/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-commonjs/components/SplitButton/SplitButton.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/components/SplitButton/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSplitButtonStyles = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./SplitButton"), exports);
+
+tslib_1.__exportStar(require("./SplitButton.types"), exports);
+
+tslib_1.__exportStar(require("./renderSplitButton"), exports);
+
+tslib_1.__exportStar(require("./useSplitButton"), exports);
+
+var useSplitButtonStyles_1 = /*#__PURE__*/require("./useSplitButtonStyles");
+
+Object.defineProperty(exports, "useSplitButtonStyles", {
+  enumerable: true,
+  get: function () {
+    return useSplitButtonStyles_1.useSplitButtonStyles;
+  }
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SplitButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { useSplitButtonStyles } from './useSplitButtonStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/components/SplitButton/renderSplitButton.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderSplitButton = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var useSplitButton_1 = /*#__PURE__*/require("./useSplitButton");
+/**
+ * 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-commonjs/components/SplitButton/renderSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACjD,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,gBAAA,CAAA,yBAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","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"],"sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/components/SplitButton/useSplitButton.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSplitButton = exports.splitButtonShorthandProps = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+exports.splitButtonShorthandProps = ['button', 'menuButton'];
+var mergeProps = /*#__PURE__*/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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport type { SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonShorthandProps: SplitButtonShorthandPropsCompat[] = ['button', 'menuButton'];\n\nconst mergeProps = makeMergeProps<SplitButtonState>({ deepMerge: splitButtonShorthandProps });\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 = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: SplitButtonProps,\n): SplitButtonState => {\n  const resolvedShorthandProps = resolveShorthandProps(props, splitButtonShorthandProps);\n  const { className } = props;\n  const {\n    button,\n    buttonRef,\n    circular,\n    disabled,\n    disabledFocusable,\n    menuButton,\n    menuButtonRef,\n    outline,\n    primary,\n    size = 'medium',\n    subtle,\n    transparent,\n    ...userProps\n  } = resolvedShorthandProps;\n\n  // TODO: To be resolved when moving to simplified prop merging\n  // const buttonInternalRef = React.useRef<HTMLElement | null>(null);\n  // const menuButtonInternalRef = React.useRef<HTMLElement | null>(null);\n\n  const state = mergeProps(\n    {\n      'aria-disabled': disabled,\n      as: 'div',\n      className,\n      ref,\n      size,\n\n      button: {\n        as: 'button',\n        // TODO: To be resolved when moving to simplified prop merging\n        // ref: useMergedRefs(buttonRef, buttonInternalRef),\n        circular,\n        disabled,\n        disabledFocusable,\n        outline,\n        primary,\n        size,\n        subtle,\n        transparent,\n        ...userProps,\n        ...button,\n      },\n\n      menuButton: {\n        as: 'button',\n        // TODO: To be resolved when moving to simplified prop merging\n        // ref: useMergedRefs(menuButtonRef, menuButtonInternalRef),\n        circular,\n        disabled,\n        disabledFocusable,\n        outline,\n        primary,\n        size,\n        subtle,\n        transparent,\n        ...menuButton,\n      },\n    },\n    // TODO: To be resolved when moving to simplified prop merging\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    defaultProps as any,\n    resolvedShorthandProps,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSplitButtonStyles = void 0;
+
+var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+var SplitButtonClassNames = {
+  button: 'SplitButton-button',
+  menuButton: 'SplitButton-menuButton'
+};
+
+var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "root": {
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "fsxf2b5",
+    "qhf8xq": "f10pi13n",
+    "x85veo": ["f1ne4dir", "f1ybi2by"],
+    "Btvcf1s": ["f1breevy", "f1tvski9"],
+    "bajz6s": ["fnux5s6", "f5nfhee"],
+    "Bzqncq": ["f19wc9x7", "f5bevrs"],
+    "Flt4rd": ["f1wefiyg", "f1leuqsa"]
+  },
+  "rootBlock": {
+    "a9b677": "fly5x3f"
+  },
+  "rootPrimary": {
+    "hr16oo": ["f1l8fiow", "f1lkg7w5"],
+    "B5d1tlv": ["f1pm7n2k", "f1xkm9yf"],
+    "Bqs20fh": ["f1lzlrrr", "fhewniv"]
+  },
+  "rootSubtle": {
+    "hr16oo": ["ffnz80u", "fubjfjv"],
+    "B5d1tlv": ["f1ev4hyt", "fgg37q7"],
+    "Bqs20fh": ["f12yns5v", "fo742o6"]
+  },
+  "rootTransparent": {
+    "hr16oo": ["ffnz80u", "fubjfjv"],
+    "B5d1tlv": ["f1ev4hyt", "fgg37q7"],
+    "Bqs20fh": ["f12yns5v", "fo742o6"]
+  },
+  "rootDisabled": {
+    "hr16oo": ["f11d5dl6", "fdl3b3o"],
+    "B5d1tlv": ["f2uuk1a", "f13ik0bv"],
+    "Bqs20fh": ["f47hzam", "f1ui3wts"]
+  }
+}, {
+  "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;}", ".f1ne4dir .SplitButton-button{border-top-right-radius:0;}", ".f1ybi2by .SplitButton-button{border-top-left-radius:0;}", ".f1breevy .SplitButton-button{border-bottom-right-radius:0;}", ".f1tvski9 .SplitButton-button{border-bottom-left-radius:0;}", ".fnux5s6 .SplitButton-menuButton{border-left-width:0;}", ".f5nfhee .SplitButton-menuButton{border-right-width:0;}", ".f19wc9x7 .SplitButton-menuButton{border-top-left-radius:0;}", ".f5bevrs .SplitButton-menuButton{border-top-right-radius:0;}", ".f1wefiyg .SplitButton-menuButton{border-bottom-left-radius:0;}", ".f1leuqsa .SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".f1l8fiow .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".f1lkg7w5 .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".ffnz80u .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".fubjfjv .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".f11d5dl6 .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".fdl3b3o .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}"],
+  "h": [".f1pm7n2k:hover .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".f1xkm9yf:hover .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".f1ev4hyt:hover .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".fgg37q7:hover .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".f2uuk1a:hover .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".f13ik0bv:hover .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}"],
+  "a": [".f1lzlrrr:active .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".fhewniv:active .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".f12yns5v:active .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".fo742o6:active .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".f47hzam:active .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".f1ui3wts:active .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}"]
+});
+
+var useSplitButtonStyles = function (state) {
+  var styles = useStyles();
+  state.className = react_make_styles_1.mergeClasses(styles.root, state.block && styles.rootBlock, state.primary && styles.rootPrimary, state.subtle && styles.rootSubtle, state.transparent && styles.rootTransparent, state.disabled && styles.rootDisabled, state.className);
+
+  if (state.button) {
+    state.button.className = react_make_styles_1.mergeClasses(SplitButtonClassNames.button, state.button.className);
+  }
+
+  if (state.menuButton) {
+    state.menuButton.className = react_make_styles_1.mergeClasses(SplitButtonClassNames.menuButton, state.menuButton.className);
+  }
+
+  return state;
+};
+
+exports.useSplitButtonStyles = useSplitButtonStyles;
+//# sourceMappingURL=useSplitButtonStyles.js.map

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/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.87",
+  "version": "9.0.0-alpha.88",
   "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.49",
-    "@fluentui/eslint-plugin": "^1.4.1",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.42",
-    "@fluentui/react-conformance": "^0.5.0",
-    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.11",
-    "@fluentui/react-menu": "9.0.0-alpha.78",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.50",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.43",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.12",
+    "@fluentui/react-menu": "9.0.0-alpha.79",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -47,8 +47,8 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "9.0.0-alpha.3",
     "@fluentui/react-icons": "^1.1.136",
-    "@fluentui/react-make-styles": "9.0.0-alpha.67",
-    "@fluentui/react-tabster": "9.0.0-alpha.61",
+    "@fluentui/react-make-styles": "9.0.0-alpha.68",
+    "@fluentui/react-tabster": "9.0.0-alpha.62",
     "@fluentui/react-utilities": "9.0.0-alpha.49",
     "tslib": "^2.1.0"
   },