@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { ToggleButtonProps } from './ToggleButton.types';
-export declare const useToggleButton: (props: ToggleButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => {
-    state: Record<string, any>;
-    render: (state: import("../Button").ButtonState) => JSX.Element;
-};
+import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';
+/**
+ * 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: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;

package/lib/components/ToggleButton/useToggleButton.js

@@ -1,8 +1,50 @@
+import { __assign, __rest } from "tslib";
+import { useControllableState } from '@fluentui/react-utilities';
+import * as React from 'react';
 import { useButton } from '../Button/useButton';
-import { useChecked } from './useChecked';
-export var useToggleButton = function (props, ref, defaultProps) {
-    var buttonDefinition = useButton(props, ref, defaultProps);
-    useChecked(buttonDefinition.state);
-    return buttonDefinition;
+/**
+ * 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 var useToggleButton = function (_a, ref) {
+  var _b;
+
+  var checked = _a.checked,
+      defaultChecked = _a.defaultChecked,
+      props = __rest(_a, ["checked", "defaultChecked"]);
+
+  var buttonState = useButton(props, ref);
+  var _c = buttonState.root,
+      role = _c.role,
+      onClick = _c.onClick;
+
+  var _d = useControllableState({
+    state: checked,
+    defaultState: defaultChecked,
+    initialState: false
+  }),
+      checkedValue = _d[0],
+      setCheckedValue = _d[1];
+
+  var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
+  return __assign(__assign({}, buttonState), {
+    // State calculated from a set of props
+    checked: checkedValue,
+    // Slots definition
+    root: __assign(__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))
+  });
 };
 //# sourceMappingURL=useToggleButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useToggleButton.js","sourceRoot":"../src/","sources":["components/ToggleButton/useToggleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,KAAwB,EACxB,GAA2B,EAC3B,YAAgC;IAEhC,IAAM,gBAAgB,GAAG,SAAS,CAAC,KAAK,EAAE,GAAG,EAAE,YAAY,CAAC,CAAC;IAE7D,UAAU,CAAC,gBAAgB,CAAC,KAA0B,CAAC,CAAC;IAExD,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useButton } from '../Button/useButton';\nimport { ToggleButtonProps } from './ToggleButton.types';\nimport { useChecked } from './useChecked';\n\nexport const useToggleButton = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: ToggleButtonProps,\n) => {\n  const buttonDefinition = useButton(props, ref, defaultProps);\n\n  useChecked(buttonDefinition.state as ToggleButtonProps);\n\n  return buttonDefinition;\n};\n"]}
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,qBAA1B;AAGA;;;;;AAKG;;AACH,OAAO,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,MAAA,CAAA,EAAA,EAAnC,CAAA,SAAA,EAAA,gBAAA,CAAmC,CAAjC;;AAGF,MAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;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,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAAtD;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,QAAA,CAAA,QAAA,CAAA,EAAA,EAEK,WAFL,CAAA,EAEgB;AAEd;AACA,IAAA,OAAO,EAAE,YAHK;AAKd;AACA,IAAA,IAAI,EAAA,QAAA,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","sourceRoot":""}

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

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

package/lib/components/ToggleButton/useToggleButtonStyles.js

@@ -0,0 +1,190 @@
+import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { useButtonStyles } from '../Button/useButtonStyles';
+
+var useCheckedStyles = /*#__PURE__*/__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__*/__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;}"]
+});
+
+export 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 = 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(state);
+  return state;
+};
+//# sourceMappingURL=useToggleButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,eAAT,QAAgC,2BAAhC;;AAGA,IAAM,gBAAgB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;;AAiEA,OAAO,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,YAAY,EACjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAFQ,EAGjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CAHL,EAKjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IANjB,EAOjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAP9B,EASjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAVsB,CAAnC;AAaA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAtBM","sourceRoot":""}

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import './version';
 export * from './Button';
 export * from './CompoundButton';
 export * from './MenuButton';

package/lib/index.js

@@ -1,4 +1,3 @@
-import './version';
 export * from './Button';
 export * from './CompoundButton';
 export * from './MenuButton';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAC;AAEnB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC","sourcesContent":["import './version';\n\nexport * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './SplitButton';\nexport * from './ToggleButton';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib-commonjs/Button.js

@@ -1,5 +1,10 @@
 "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("./components/Button/index"), exports);
 //# sourceMappingURL=Button.js.map

package/lib-commonjs/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"../src/","sources":["Button.ts"],"names":[],"mappings":";;;AAAA,oEAA0C","sourcesContent":["export * from './components/Button/index';\n"]}
+{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/CompoundButton.js

@@ -1,5 +1,10 @@
 "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("./components/CompoundButton/index"), exports);
 //# sourceMappingURL=CompoundButton.js.map

package/lib-commonjs/CompoundButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompoundButton.js","sourceRoot":"../src/","sources":["CompoundButton.ts"],"names":[],"mappings":";;;AAAA,4EAAkD","sourcesContent":["export * from './components/CompoundButton/index';\n"]}
+{"version":3,"sources":["../src/CompoundButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/MenuButton.js

@@ -1,5 +1,10 @@
 "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("./components/MenuButton/index"), exports);
 //# sourceMappingURL=MenuButton.js.map

package/lib-commonjs/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"../src/","sources":["MenuButton.ts"],"names":[],"mappings":";;;AAAA,wEAA8C","sourcesContent":["export * from './components/MenuButton/index';\n"]}
+{"version":3,"sources":["../src/MenuButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/SplitButton.js

@@ -1,5 +1,10 @@
 "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("./components/SplitButton/index"), exports);
 //# sourceMappingURL=SplitButton.js.map

package/lib-commonjs/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.js","sourceRoot":"../src/","sources":["SplitButton.ts"],"names":[],"mappings":";;;AAAA,yEAA+C","sourcesContent":["export * from './components/SplitButton/index';\n"]}
+{"version":3,"sources":["../src/SplitButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/ToggleButton.js

@@ -1,5 +1,10 @@
 "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("./components/ToggleButton/index"), exports);
 //# sourceMappingURL=ToggleButton.js.map

package/lib-commonjs/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sourceRoot":"../src/","sources":["ToggleButton.ts"],"names":[],"mappings":";;;AAAA,0EAAgD","sourcesContent":["export * from './components/ToggleButton/index';\n"]}
+{"version":3,"sources":["../src/ToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

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

@@ -1,2 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>): void;
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib-commonjs/common/isConformant.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;AAAA,iEAAoG;AAEpG,SAAgB,YAAY,CAAC,QAAoD;IAC/E,IAAM,cAAc,GAAG;QACrB,aAAa,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;QACxD,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AAPD,oCAOC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>) {\n  const defaultOptions = {\n    disabledTests: ['has-docblock', 'kebab-aria-attributes'],\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,EAAiB,uBAAjB,CAH4C;AAI3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAZD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}

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

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { ButtonProps } from './Button.types';
+import type { ButtonProps } from './Button.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled Button, using the `useButton` hook.
- * {@docCategory Button}
+ * Buttons give people a way to trigger an action.
  */
-export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, string | number> & React.RefAttributes<HTMLElement>>;
+export declare const Button: ForwardRefComponent<ButtonProps>;

package/lib-commonjs/components/Button/Button.js

@@ -1,18 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var useButton_1 = require("./useButton");
-var react_theme_provider_1 = require("@fluentui/react-theme-provider");
-var useButtonClasses_1 = require("./useButtonClasses");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+
+var React = /*#__PURE__*/require("react");
+
+var renderButton_1 = /*#__PURE__*/require("./renderButton");
+
+var useButton_1 = /*#__PURE__*/require("./useButton");
+
+var useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
 /**
- * Define a styled Button, using the `useButton` hook.
- * {@docCategory Button}
+ * Buttons give people a way to trigger an action.
  */
-exports.Button = React.forwardRef(function (props, ref) {
-    var _a = useButton_1.useButton(props, ref), render = _a.render, state = _a.state;
-    useButtonClasses_1.useButtonClasses(state);
-    react_theme_provider_1.useInlineTokens(state, '--button');
-    return render(state);
+
+
+exports.Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useButton_1.useButton(props, ref);
+  useButtonStyles_1.useButtonStyles(state);
+  return renderButton_1.renderButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 exports.Button.displayName = 'Button';
 //# sourceMappingURL=Button.js.map

package/lib-commonjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"../src/","sources":["components/Button/Button.tsx"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,yCAAwC;AAExC,uEAAiE;AACjE,uDAAsD;AAEtD;;;GAGG;AACU,QAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAA2B,UAAC,KAAK,EAAE,GAAG;IACpE,IAAA,sCAAyC,EAAvC,kBAAM,EAAE,gBAA+B,CAAC;IAEhD,mCAAgB,CAAC,KAAK,CAAC,CAAC;IACxB,sCAAe,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEnC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { useButton } from './useButton';\nimport { ButtonProps } from './Button.types';\nimport { useInlineTokens } from '@fluentui/react-theme-provider';\nimport { useButtonClasses } from './useButtonClasses';\n\n/**\n * Define a styled Button, using the `useButton` hook.\n * {@docCategory Button}\n */\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>((props, ref) => {\n  const { render, state } = useButton(props, ref);\n\n  useButtonClasses(state);\n  useInlineTokens(state, '--button');\n\n  return render(state);\n});\n\nButton.displayName = 'Button';\n"]}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAAd;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,cAAA,CAAA,YAAA,CAAa,KAAb,CAAP,CALkF,CAMlF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}