@fluentui/react-button 9.0.0-alpha.10 → 9.0.0-alpha.100

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToggleButton = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var React = /*#__PURE__*/require("react");
+
+var useButton_1 = /*#__PURE__*/require("../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.
+ */
+
+
+var useToggleButton = function (_a, ref) {
+  var _b;
+
+  var checked = _a.checked,
+      defaultChecked = _a.defaultChecked,
+      props = tslib_1.__rest(_a, ["checked", "defaultChecked"]);
+
+  var buttonState = useButton_1.useButton(props, ref);
+  var _c = buttonState.root,
+      role = _c.role,
+      onClick = _c.onClick;
+
+  var _d = react_utilities_1.useControllableState({
+    state: checked,
+    defaultState: defaultChecked,
+    initialState: false
+  }),
+      checkedValue = _d[0],
+      setCheckedValue = _d[1];
+
+  var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
+  return tslib_1.__assign(tslib_1.__assign({}, buttonState), {
+    // State calculated from a set of props
+    checked: checkedValue,
+    // Slots definition
+    root: tslib_1.__assign(tslib_1.__assign({}, buttonState.root), (_b = {}, _b[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue, _b.onClick = React.useCallback(function (ev) {
+      if (onClick) {
+        onClick(ev);
+
+        if (ev.defaultPrevented) {
+          return;
+        }
+      }
+
+      setCheckedValue(!checkedValue);
+    }, [checkedValue, setCheckedValue, onClick]), _b))
+  });
+};
+
+exports.useToggleButton = useToggleButton;
+//# sourceMappingURL=useToggleButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,IAAM,eAAe,GAAG,UAC7B,EAD6B,EAE7B,GAF6B,EAEwB;;;AADnD,MAAA,OAAO,GAAA,EAAA,CAAA,OAAP;AAAA,MAAS,cAAc,GAAA,EAAA,CAAA,cAAvB;AAAA,MAA4B,KAAK,GAAA,OAAA,CAAA,MAAA,CAAA,EAAA,EAAnC,CAAA,SAAA,EAAA,gBAAA,CAAmC,CAAjC;;AAGF,MAAM,WAAW,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAApB;AACM,MAAA,EAAA,GAAoB,WAAW,CAAC,IAAhC;AAAA,MAAE,IAAI,GAAA,EAAA,CAAA,IAAN;AAAA,MAAQ,OAAO,GAAA,EAAA,CAAA,OAAf;;AAEA,MAAA,EAAA,GAAkC,iBAAA,CAAA,oBAAA,CAAqB;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAArB,CAAlC;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B;;AAMN,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAA,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAEK,WAFL,CAAA,EAEgB;AAEd;AACA,IAAA,OAAO,EAAE,YAHK;AAKd;AACA,IAAA,IAAI,EAAA,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EACC,WAAW,CAAC,IADb,CAAA,GACiB,EAAA,GAAA,EAAA,EAAA,EAAA,CAClB,kBAAkB,GAAG,cAAH,GAAoB,cADpB,CAAA,GACqC,CAAC,CAAC,YADvC,EAEnB,EAAA,CAAA,OAAA,GAAS,KAAK,CAAC,WAAN,CACP,UAAA,EAAA,EAAE;AACA,UAAI,OAAJ,EAAa;AACX,QAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,YAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,MAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,KAXM,EAYP,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZO,CAFU,EAelB,EAhBC;AANU,GAFhB,CAAA;AA2BD,CA1CM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}

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

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

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

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToggleButtonStyles = void 0;
+
+var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+var useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
+
+var useCheckedStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "ayd6f0": "fg85c1j",
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "sj55zd": "f19n0e5",
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "v4pbla": "f56u8ty",
+    "Bgoe8wy": "fvcxoqz",
+    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
+    "oetu4i": "f1xlaoq0",
+    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
+    "Bi91k9c": "fax3udt",
+    "vv34bc": "fzgy25m",
+    "B6oc9vd": "fvs00aa",
+    "ak43y8": ["f1assf6x", "f4ruux4"],
+    "wmxk5l": "fumykes",
+    "B50zh58": ["f4ruux4", "f1assf6x"],
+    "lj723h": "f1r2dosr"
+  },
+  "outline": {
+    "ayd6f0": "f6r4cvw",
+    "v4pbla": "f62j56f",
+    "vv34bc": "flt377r"
+  },
+  "primary": {
+    "ayd6f0": "fvinvdn",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "f1phragk",
+    "v4pbla": "f1fitrdm",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f1rq72xc",
+    "vv34bc": "f4ihffn",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f18otbis"
+  },
+  "subtle": {
+    "ayd6f0": "f1n839y3",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "f1qj7y59",
+    "v4pbla": "f4wzgrt",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f139oj5f",
+    "vv34bc": "f1be4e1d",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f19au66r"
+  },
+  "transparent": {
+    "ayd6f0": "f6r4cvw",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "f1qj7y59",
+    "v4pbla": "f62j56f",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f139oj5f",
+    "vv34bc": "flt377r",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f19au66r"
+  }
+}, {
+  "d": [".fg85c1j{background:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f6r4cvw{background:var(--colorTransparentBackgroundSelected);}", ".fvinvdn{background:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f1n839y3{background:var(--colorSubtleBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
+  "h": [".f56u8ty:hover{background:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".f62j56f:hover{background:var(--colorTransparentBackgroundHover);}", ".f1fitrdm:hover{background:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f4wzgrt:hover{background:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
+  "a": [".fzgy25m:active{background:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".f4ihffn:active{background:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1be4e1d:active{background:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
+});
+
+var useDisabledStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "ayd6f0": "fqst6tg",
+    "g2u3we": "f1jj8ep1",
+    "h3c5rm": ["f15xbau", "fy0fskl"],
+    "B9xav0g": "f4ikngz",
+    "zhjwy3": ["fy0fskl", "f15xbau"],
+    "sj55zd": "f1s2aq7o",
+    "v4pbla": "f1nil5o8",
+    "Bgoe8wy": "f12mpcsy",
+    "Bwzppfd": ["f1gwvigk", "f18rmfxp"],
+    "oetu4i": "f1jnshp0",
+    "gg5e9n": ["f18rmfxp", "f1gwvigk"],
+    "Bi91k9c": "fvgxktp",
+    "vv34bc": "fkqx3al",
+    "B6oc9vd": "fdi4vxw",
+    "ak43y8": ["f4ryxzl", "fkdgpbx"],
+    "wmxk5l": "fcmhn06",
+    "B50zh58": ["fkdgpbx", "f4ryxzl"],
+    "lj723h": "f19wldhg"
+  },
+  "outline": {},
+  "primary": {
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  },
+  "subtle": {
+    "ayd6f0": "f1k2sg7s",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "v4pbla": "f1vc35iv",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "vv34bc": "f17oliv9",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  },
+  "transparent": {
+    "ayd6f0": "f1k2sg7s",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "v4pbla": "f1vc35iv",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "vv34bc": "f17oliv9",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  }
+}, {
+  "d": [".fqst6tg{background:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1k2sg7s{background:none;}"],
+  "h": [".f1nil5o8:hover{background:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1vc35iv:hover{background:none;}"],
+  "a": [".fkqx3al:active{background:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f17oliv9:active{background:none;}"]
+});
+
+var useToggleButtonStyles = function (state) {
+  var checkedStyles = useCheckedStyles();
+  var disabledStyles = useDisabledStyles();
+  var appearance = state.appearance,
+      checked = state.checked,
+      disabled = state.disabled,
+      disabledFocusable = state.disabledFocusable;
+  state.root.className = react_make_styles_1.mergeClasses( // Checked styles
+  checked && checkedStyles.base, appearance && checked && checkedStyles[appearance], // Disabled styles
+  (disabled || disabledFocusable) && disabledStyles.base, appearance && (disabled || disabledFocusable) && disabledStyles[appearance], // User provided class name
+  state.root.className);
+  useButtonStyles_1.useButtonStyles(state);
+  return state;
+};
+
+exports.useToggleButtonStyles = useToggleButtonStyles;
+//# sourceMappingURL=useToggleButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,IAAM,gBAAgB,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,EAAzB;;AAuFA,IAAM,iBAAiB,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,EAA1B;;AAiEO,IAAM,qBAAqB,GAAG,UAAC,KAAD,EAAyB;AAC5D,MAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEQ,MAAA,UAAU,GAA2C,KAAK,CAAhD,UAAV;AAAA,MAAY,OAAO,GAAkC,KAAK,CAAvC,OAAnB;AAAA,MAAqB,QAAQ,GAAwB,KAAK,CAA7B,QAA7B;AAAA,MAA+B,iBAAiB,GAAK,KAAK,CAAV,iBAAhD;AAER,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,EACrB;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAFJ,EAGrB,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CAHjB,EAKrB;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IAN7B,EAOrB,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAP1C,EASrB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAVU,CAAvB;AAaA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,KAAP;AACD,CAtBM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourceRoot":""}

package/lib-commonjs/index.d.ts

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

package/lib-commonjs/index.js

@@ -1,5 +1,18 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./Button"), exports);
+
+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,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB","sourcesContent":["export * from './Button';\n"]}
+{"version":3,"sources":["../src/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","sourceRoot":""}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@fluentui/react-button",
-  "version": "9.0.0-alpha.10",
+  "version": "9.0.0-alpha.100",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
@@ -12,20 +13,25 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start": "yarn storybook",
+    "test": "jest",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/packages/react-button/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/a11y-testing": "^0.1.0",
-    "@fluentui/common-styles": "^1.0.2",
-    "@fluentui/eslint-plugin": "^1.0.1",
-    "@fluentui/react-conformance": "^0.2.3",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.59",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.52",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.21",
+    "@fluentui/react-menu": "9.0.0-alpha.91",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -35,16 +41,17 @@
     "enzyme": "~3.10.0",
     "enzyme-adapter-react-16": "^1.15.0",
     "react": "16.8.6",
-    "react-app-polyfill": "~1.0.1",
     "react-dom": "16.8.6",
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/keyboard-key": "^0.2.14",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.10",
-    "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-utilities": "^9.0.0-alpha.8",
-    "tslib": "^1.10.0"
+    "@fluentui/keyboard-keys": "9.0.0-alpha.5",
+    "@fluentui/react-aria": "9.0.0-alpha.44",
+    "@fluentui/react-icons": "^1.1.140",
+    "@fluentui/react-make-styles": "9.0.0-alpha.77",
+    "@fluentui/react-tabster": "9.0.0-alpha.72",
+    "@fluentui/react-utilities": "9.0.0-alpha.56",
+    "tslib": "^2.1.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <18.0.0",

package/config/api-extractor.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
-}

package/config/pre-copy.json

@@ -1,9 +0,0 @@
-{
-  "copyTo": {
-    "dist/demo": [
-      "@fluentui/react-docsite-components/index.html",
-      "react/umd/react.development.js",
-      "react-dom/umd/react-dom.development.js"
-    ]
-  }
-}

package/config/tests.js

@@ -1,6 +0,0 @@
-/** Jest test setup file. */
-const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-// Configure enzyme.
-configure({ adapter: new Adapter() });

package/etc/react-button.api.md

@@ -1,104 +0,0 @@
-## API Report File for "@fluentui/react-button"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
-import * as React from 'react';
-import { ShorthandProps } from '@fluentui/react-utilities';
-
-// @public
-export const Button: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentProps & React.ButtonHTMLAttributes<HTMLElement> & {
-    icon?: import("@fluentui/react-utilities").ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    disabled?: boolean | undefined;
-    iconOnly?: boolean | undefined;
-    iconPosition?: "after" | "before" | undefined;
-    primary?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-} & React.RefAttributes<HTMLElement>>;
-
-// @public (undocumented)
-export type ButtonProps = ComponentProps & React.ButtonHTMLAttributes<HTMLElement> & {
-    icon?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    disabled?: boolean;
-    iconOnly?: boolean;
-    iconPosition?: 'before' | 'after';
-    primary?: boolean;
-    size?: 'small' | 'large';
-};
-
-// @public
-export const buttonShorthandProps: string[];
-
-// @public (undocumented)
-export interface ButtonState extends ButtonProps {
-    // (undocumented)
-    children?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    // (undocumented)
-    icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    // (undocumented)
-    ref: React.RefObject<HTMLButtonElement>;
-}
-
-// @public (undocumented)
-export type ButtonStyleSelectors = {
-    disabled?: boolean;
-    iconOnly?: boolean;
-    primary?: boolean;
-    size?: string;
-};
-
-// @public (undocumented)
-export type ButtonTokens = {
-    height: string;
-    paddingX: string;
-    paddingY: string;
-    minWidth: string;
-    maxWidth: string;
-    fontSize: string;
-    fontWeight: number;
-    lineHeight: string;
-    iconWidth: string;
-    iconHeight: string;
-    iconSpacing: string;
-    color: string;
-    content2Color: string;
-    background: string;
-    backgroundHover: string;
-    backgroundPressed: string;
-    backgroundActive: string;
-    borderColor: string;
-    borderColorHover: string;
-    borderColorActive: string;
-    borderWidth: string;
-    borderRadius: string;
-    shadow: string;
-    shadowPressed: string;
-};
-
-// @public (undocumented)
-export type ButtonVariants = 'base' | 'disabled' | 'iconOnly' | 'primary' | 'small' | 'large' | 'primaryDisabled' | 'iconOnlySmall' | 'iconOnlyLarge';
-
-// @public (undocumented)
-export type ButtonVariantTokens = {
-    [variant in ButtonVariants]: Partial<ButtonTokens>;
-};
-
-// @public
-export const renderButton: (state: ButtonState) => JSX.Element;
-
-// @public
-export const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;
-
-// @public
-export const useButtonState: (draftState: ButtonState) => void;
-
-// @public (undocumented)
-export const useButtonStyles: (state: ButtonState, selectors: ButtonStyleSelectors) => void;
-
-
-// (No @packageDocumentation comment for this package)
-
-```

package/just.config.ts

@@ -1,3 +0,0 @@
-import { preset } from '@fluentui/scripts';
-
-preset();

package/lib/components/Button/useButtonState.d.ts

@@ -1,6 +0,0 @@
-import { ButtonState } from './Button.types';
-/**
- * The useButton hook processes the Button draft state.
- * @param draftState - Button draft state to mutate.
- */
-export declare const useButtonState: (draftState: ButtonState) => void;

package/lib/components/Button/useButtonState.js

@@ -1,45 +0,0 @@
-import { getCode, EnterKey, SpacebarKey } from '@fluentui/keyboard-key';
-/**
- * The useButton hook processes the Button draft state.
- * @param draftState - Button draft state to mutate.
- */
-export var useButtonState = function (draftState) {
-    if (draftState.as !== 'button') {
-        draftState.role = 'button';
-        if (draftState.as !== 'a') {
-            var onClickCallback_1 = draftState.onClick, onKeyDownCallback_1 = draftState.onKeyDown;
-            draftState.tabIndex = 0;
-            draftState.onKeyDown = function (ev) {
-                if (onKeyDownCallback_1) {
-                    onKeyDownCallback_1(ev);
-                }
-                var keyCode = getCode(ev);
-                if (!ev.defaultPrevented && onClickCallback_1 && (keyCode === EnterKey || keyCode === SpacebarKey)) {
-                    // Translate the keydown enter/space to a click.
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ev.target.click();
-                }
-            };
-        }
-    }
-    // Disallow click and keyboard events when component is disabled and eat events when disabledFocusable is set to true.
-    var disabled = draftState.disabled, /* disabledFocusable, */ onKeyDown = draftState.onKeyDown;
-    if (disabled) {
-        draftState.onClick = undefined;
-    }
-    draftState.onKeyDown = function (ev) {
-        var _a;
-        var keyCode = getCode(ev);
-        if (disabled && (keyCode === EnterKey || keyCode === SpacebarKey)) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-        else {
-            (_a = onKeyDown) === null || _a === void 0 ? void 0 : _a(ev);
-        }
-    };
-    draftState['aria-disabled'] = disabled /* || disabledFocusable*/;
-    draftState.disabled = draftState.as === 'button' ? disabled /* && !disabledFocusable */ : undefined;
-};
-//# sourceMappingURL=useButtonState.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGxE;;;GAGG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,UAAuB;IACpD,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE;QAC9B,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;QAE3B,IAAI,UAAU,CAAC,EAAE,KAAK,GAAG,EAAE;YACjB,IAAA,sCAAwB,EAAE,0CAA4B,CAAgB;YAE9E,UAAU,CAAC,QAAQ,GAAG,CAAC,CAAC;YAExB,UAAU,CAAC,SAAS,GAAG,UAAC,EAAoC;gBAC1D,IAAI,mBAAiB,EAAE;oBACrB,mBAAiB,CAAC,EAAE,CAAC,CAAC;iBACvB;gBAED,IAAM,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;gBAC5B,IAAI,CAAC,EAAE,CAAC,gBAAgB,IAAI,iBAAe,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,WAAW,CAAC,EAAE;oBAChG,gDAAgD;oBAChD,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;oBAEpB,EAAE,CAAC,MAAsB,CAAC,KAAK,EAAE,CAAC;iBACpC;YACH,CAAC,CAAC;SACH;KACF;IAED,sHAAsH;IAC9G,IAAA,8BAAQ,EAAE,wBAAwB,CAAC,gCAAS,CAAgB;IACpE,IAAI,QAAQ,EAAE;QACZ,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC;KAChC;IACD,UAAU,CAAC,SAAS,GAAG,UAAC,EAAoC;;QAC1D,IAAM,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;QAC5B,IAAI,QAAQ,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,WAAW,CAAC,EAAE;YACjE,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;SACtB;aAAM;YACL,MAAA,SAAS,0CAAG,EAAE,EAAE;SACjB;IACH,CAAC,CAAC;IAEF,UAAU,CAAC,eAAe,CAAC,GAAG,QAAQ,CAAC,yBAAyB,CAAC;IACjE,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS,CAAC;AACtG,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getCode, EnterKey, SpacebarKey } from '@fluentui/keyboard-key';\nimport { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param draftState - Button draft state to mutate.\n */\nexport const useButtonState = (draftState: ButtonState) => {\n  if (draftState.as !== 'button') {\n    draftState.role = 'button';\n\n    if (draftState.as !== 'a') {\n      const { onClick: onClickCallback, onKeyDown: onKeyDownCallback } = draftState;\n\n      draftState.tabIndex = 0;\n\n      draftState.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n        if (onKeyDownCallback) {\n          onKeyDownCallback(ev);\n        }\n\n        const keyCode = getCode(ev);\n        if (!ev.defaultPrevented && onClickCallback && (keyCode === EnterKey || keyCode === SpacebarKey)) {\n          // Translate the keydown enter/space to a click.\n          ev.preventDefault();\n          ev.stopPropagation();\n\n          (ev.target as HTMLElement).click();\n        }\n      };\n    }\n  }\n\n  // Disallow click and keyboard events when component is disabled and eat events when disabledFocusable is set to true.\n  const { disabled, /* disabledFocusable, */ onKeyDown } = draftState;\n  if (disabled) {\n    draftState.onClick = undefined;\n  }\n  draftState.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const keyCode = getCode(ev);\n    if (disabled && (keyCode === EnterKey || keyCode === SpacebarKey)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  draftState['aria-disabled'] = disabled /* || disabledFocusable*/;\n  draftState.disabled = draftState.as === 'button' ? disabled /* && !disabledFocusable */ : undefined;\n};\n"]}

package/lib-amd/Button.d.ts

@@ -1 +0,0 @@
-export * from './components/Button/index';

package/lib-amd/Button.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/Button/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=Button.js.map

package/lib-amd/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"../src/","sources":["Button.tsx"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Button/index';\n"]}

package/lib-amd/common/isConformant.d.ts

@@ -1,2 +0,0 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>): void;

package/lib-amd/common/isConformant.js

@@ -1,14 +0,0 @@
-define(["require", "exports", "@fluentui/react-conformance"], function (require, exports, react_conformance_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    function isConformant(testInfo) {
-        var defaultOptions = {
-            asPropHandlesRef: true,
-            componentPath: module.parent.filename.replace('.test', ''),
-            disabledTests: ['has-docblock', 'kebab-aria-attributes'],
-        };
-        react_conformance_1.isConformant(defaultOptions, testInfo);
-    }
-    exports.isConformant = isConformant;
-});
-//# sourceMappingURL=isConformant.js.map

package/lib-amd/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;IAEA,SAAgB,YAAY,CAAC,QAAoD;QAC/E,IAAM,cAAc,GAAG;YACrB,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5D,aAAa,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;SACzD,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IARD,oCAQC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>) {\n  const defaultOptions = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    disabledTests: ['has-docblock', 'kebab-aria-attributes'],\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-/**
- * Define a styled Button, using the `useButton` hook.
- * {@docCategory Button}
- */
-export declare const Button: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentProps & React.ButtonHTMLAttributes<HTMLElement> & {
-    icon?: import("@fluentui/react-utilities").ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-    disabled?: boolean | undefined;
-    iconOnly?: boolean | undefined;
-    iconPosition?: "after" | "before" | undefined;
-    primary?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-} & React.RefAttributes<HTMLElement>>;