@fluentui/react-button - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Mon, 08 Jun 2020 12:31:39 GMT",
+      "date": "Thu, 11 Jun 2020 12:32:07 GMT",
+      "tag": "@fluentui/react-button_v0.2.1",
+      "version": "0.2.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Updating typings to conform with react-compose changes.",
+            "author": "[e-mail]",
+            "commit": "8b0ffa8c39c7fe298596253b205134f9c9f8c3b5",
+            "package": "@fluentui/react-button"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 08 Jun 2020 12:34:34 GMT",
       "tag": "@fluentui/react-button_v0.2.0",
@@ -8,0 +23,0 @@ "version": "0.2.0",

CHANGELOG.md

 # Change Log - @fluentui/react-button
 
-This log was last generated on Mon, 08 Jun 2020 12:31:39 GMT and should not be manually modified.
+This log was last generated on Thu, 11 Jun 2020 12:32:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.2.1)
+
+Thu, 11 Jun 2020 12:32:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.2.0..@fluentui/react-button_v0.2.1)
+
+### Patches
+
+- Updating typings to conform with react-compose changes. ([PR #13521](https://github.com/microsoft/fluentui/pull/13521) by [e-mail])
+
 ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.2.0)
 
-Mon, 08 Jun 2020 12:31:39 GMT 
+Mon, 08 Jun 2020 12:34:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.1.13..@fluentui/react-button_v0.2.0)
@@ -11,0 +20,0 @@

lib-amd/components/Button/Button.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./ButtonBase", "@fluentui/react-compose", "./Button.scss"], function (require, exports, ButtonBase_1, react_compose_1, classes) {
+define(["require", "exports", "@fluentui/react-compose", "./ButtonBase", "./Button.scss"], function (require, exports, react_compose_1, ButtonBase_1, classes) {
     "use strict";
@@ -3,0 +3,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,4 +0,4 @@
-export declare const root = "root_55274d44";
-export declare const icon = "icon_55274d44";
-export declare const content = "content_55274d44";
-export declare const loader = "loader_55274d44";
+export declare const root = "root_fdb5c5ab";
+export declare const icon = "icon_fdb5c5ab";
+export declare const content = "content_fdb5c5ab";
+export declare const loader = "loader_fdb5c5ab";

lib-amd/components/Button/Button.scss.js

 define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    load_themed_styles_1.loadStyles([{ "rawString": ":root{--button-size-smallest:24px;--button-size-smaller:24px;--button-size-small:24px;--button-size-regular:32px;--button-size-large:40px;--button-size-larger:48px;--button-size-largest:64px;--button-padding:0 24px;--button-height:var(--button-size-regular);--button-minWidth:96px;--button-maxWidth:280px;--button-borderRadius:3px;--button-contentGap:10px;--button-iconSize:16px;--button-borderRadius:2px;--button-borderWidth:1px;--button-boxShadow:0px 2px 4px -0.75px rgba(0, 0, 0, 0.1);--button-boxShadow-disabled:none;--button-transform-pressed:scale(0.95);--button-transition:transform 0.1s linear;--button-fontFamily:'Segoe UI','Helvetica Neue','Apple Color Emoji','Segoe UI Emoji',Helvetica,Arial,sans-serif;--button-fontSize:14px;--button-fontWeight:600;--button-fill:white;--button-fill-hovered:rgb(237, 235, 233);--button-fill-focused:var(--button-fill);--button-fill-pressed:rgb(225, 223, 221);--button-fill-disabled:var(--button-fill-hovered);--button-text:rgb(44, 38, 33);--button-text-hovered:var(--button-text);--button-text-focused:var(--button-text);--button-text-pressed:var(--button-text);--button-text-disabled:rgb(200, 198, 196);--button-borderColor:rgb(225, 223, 221);--button-borderColor-disabled:transparent;--button-icon:inherit;--button-icon-hovered:var(--button-icon);--button-icon-pressed:var(--button-icon);--button-icon-focused:var(--button-icon);--button-icon-disabled:var(--button-text-disabled);--accent-fill:rgb(98, 100, 167);--accent-fill-hovered:rgb(88, 90, 150);--accent-fill-focused:var(--accent-fill);--accent-fill-pressed:rgb(70, 71, 117);--accent-fill-disabled:var(--accent-hovered);--accent-text:white;--accent-text-hovered:var(--accent-text);--accent-text-focused:var(--accent-text);--accent-text-pressed:var(--accent-text);--accent-text-disabled:rgb(200, 198, 196);--accent-borderColor:transparent;--accent-icon:inherit;--accent-icon-hovered:var(--accent-icon);--accent-icon-pressed:var(--accent-icon);--accent-icon-focused:var(--accent-icon);--accent-icon-disabled:var(--accent-text-disabled)}.root_55274d44{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--button-fill);border-color:var(--button-borderColor);border-radius:var(--button-borderRadius);border-width:var(--button-borderWidth);-webkit-box-shadow:var(--button-boxShadow);box-shadow:var(--button-boxShadow);color:var(--button-text);height:var(--button-height);padding:var(--button-padding);-webkit-transition:var(--button-transition);transition:var(--button-transition);white-space:var(--button-whiteSpace,nowrap)}.root_55274d44._primary_55274d44{--button-fill:var(--accent-fill);--button-fill-hovered:var(--accent-fill-hovered);--button-fill-pressed:var(--accent-fill-pressed);--button-text:var(--accent-text);--button-text-hovered:var(--accent-text-hovered);--button-text-pressed:var(--accent-text-pressed);--button-borderColor:var(--accent-borderColor);--button-icon:var(--accent-icon);--button-icon-hovered:var(--accent-icon-hovered);--button-icon-pressed:var(--accent-icon-pressed)}.root_55274d44._iconOnly_55274d44{width:var(--button-height);--button-padding:0}.root_55274d44._circular_55274d44{--button-borderRadius:50000px;--button-minWidth:var(--button-height)}.root_55274d44._fluid_55274d44{width:100%;max-width:100%}.root_55274d44._size_smallest_55274d44{--button-height:var(--button-size-smallest)}.root_55274d44._size_smaller_55274d44{--button-height:var(--button-size-smaller)}.root_55274d44._size_small_55274d44{--button-height:var(--button-size-small)}.root_55274d44._size_large_55274d44{--button-height:var(--button-size-large)}.root_55274d44._size_larger_55274d44{--button-height:var(--button-size-larger)}.root_55274d44._size_largest_55274d44{--button-height:var(--button-size-largest)}.root_55274d44._disabled_55274d44{pointer-events:none;background-color:var(--button-fill-disabled);color:var(--button-text-disabled);border-color:var(--button-borderColor-disabled);-webkit-box-shadow:var(--button-boxShadow-disabled);box-shadow:var(--button-boxShadow-disabled)}.root_55274d44._disabled_55274d44.icon_55274d44{color:var(--button-icon-disabled,var(--button-text-disabled))}.content_55274d44{font-family:var(--button-fontFamily);font-size:var(--button-fontSize);font-weight:var(--button-fontWeight)}.icon_55274d44{color:var(--button-icon);display:inline-block;width:var(--button-iconSize);height:var(--button-iconSize)}.root_55274d44>:not(:first-child){margin-left:var(--button-contentGap)}.root_55274d44:hover{background-color:var(--button-fill-hovered,var(--button-fill));color:var(--button-text-hovered,var(--button-text));border-color:var(--button-borderColor-hovered,var(--button-borderColor));-webkit-box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow));box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow))}.root_55274d44:hover .icon_55274d44{color:var(--button-icon-hovered,var(--button-text-hovered))}.root_55274d44:active{background-color:var(--button-fill-pressed,var(--button-fill-hovered));color:var(--button-text-pressed,var(--button-text-hovered));border-color:var(--button-borderColor-pressed,var(--button-borderColor-hovered,var(--button-borderColor)));-webkit-box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));-webkit-transform:var(--button-transform-pressed);transform:var(--button-transform-pressed);-webkit-transition:var(--button-transition-pressed);transition:var(--button-transition-pressed)}.root_55274d44:active .icon_55274d44{color:var(--button-icon-pressed,var(--button-text-pressed))}.root_55274d44:focus::after{position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;content:'';-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--button-borderRadius);-webkit-box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;border:var(--button-focusedWidth,2px) solid var(--button-focused,var(--accent-fill))}:export{root:root_55274d44;icon:icon_55274d44;content:content_55274d44;loader:loader_55274d44}" }]);
-    exports.root = "root_55274d44";
-    exports.icon = "icon_55274d44";
-    exports.content = "content_55274d44";
-    exports.loader = "loader_55274d44";
+    load_themed_styles_1.loadStyles([{ "rawString": ":root{--button-size-smallest:24px;--button-size-smaller:24px;--button-size-small:24px;--button-size-regular:32px;--button-size-large:40px;--button-size-larger:48px;--button-size-largest:64px;--button-padding:0 24px;--button-height:var(--button-size-regular);--button-minWidth:96px;--button-maxWidth:280px;--button-borderRadius:3px;--button-contentGap:10px;--button-iconSize:16px;--button-borderRadius:2px;--button-borderWidth:1px;--button-boxShadow:0px 2px 4px -0.75px rgba(0, 0, 0, 0.1);--button-boxShadow-disabled:none;--button-transform-pressed:scale(0.95);--button-transition:transform 0.1s linear;--button-fontFamily:'Segoe UI','Helvetica Neue','Apple Color Emoji','Segoe UI Emoji',Helvetica,Arial,sans-serif;--button-fontSize:14px;--button-fontWeight:600;--button-fill:white;--button-fill-hovered:rgb(237, 235, 233);--button-fill-focused:var(--button-fill);--button-fill-pressed:rgb(225, 223, 221);--button-fill-disabled:var(--button-fill-hovered);--button-text:rgb(44, 38, 33);--button-text-hovered:var(--button-text);--button-text-focused:var(--button-text);--button-text-pressed:var(--button-text);--button-text-disabled:rgb(200, 198, 196);--button-borderColor:rgb(225, 223, 221);--button-borderColor-disabled:transparent;--button-icon:inherit;--button-icon-hovered:var(--button-icon);--button-icon-pressed:var(--button-icon);--button-icon-focused:var(--button-icon);--button-icon-disabled:var(--button-text-disabled);--accent-fill:rgb(98, 100, 167);--accent-fill-hovered:rgb(88, 90, 150);--accent-fill-focused:var(--accent-fill);--accent-fill-pressed:rgb(70, 71, 117);--accent-fill-disabled:var(--accent-hovered);--accent-text:white;--accent-text-hovered:var(--accent-text);--accent-text-focused:var(--accent-text);--accent-text-pressed:var(--accent-text);--accent-text-disabled:rgb(200, 198, 196);--accent-borderColor:transparent;--accent-icon:inherit;--accent-icon-hovered:var(--accent-icon);--accent-icon-pressed:var(--accent-icon);--accent-icon-focused:var(--accent-icon);--accent-icon-disabled:var(--accent-text-disabled)}.root_fdb5c5ab{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--button-fill);border-color:var(--button-borderColor);border-radius:var(--button-borderRadius);border-width:var(--button-borderWidth);-webkit-box-shadow:var(--button-boxShadow);box-shadow:var(--button-boxShadow);color:var(--button-text);height:var(--button-height);padding:var(--button-padding);-webkit-transition:var(--button-transition);transition:var(--button-transition);white-space:var(--button-whiteSpace,nowrap)}.root_fdb5c5ab._primary_fdb5c5ab{--button-fill:var(--accent-fill);--button-fill-hovered:var(--accent-fill-hovered);--button-fill-pressed:var(--accent-fill-pressed);--button-text:var(--accent-text);--button-text-hovered:var(--accent-text-hovered);--button-text-pressed:var(--accent-text-pressed);--button-borderColor:var(--accent-borderColor);--button-icon:var(--accent-icon);--button-icon-hovered:var(--accent-icon-hovered);--button-icon-pressed:var(--accent-icon-pressed)}.root_fdb5c5ab._iconOnly_fdb5c5ab{width:var(--button-height);--button-padding:0}.root_fdb5c5ab._circular_fdb5c5ab{--button-borderRadius:50000px;--button-minWidth:var(--button-height)}.root_fdb5c5ab._fluid_fdb5c5ab{width:100%;max-width:100%}.root_fdb5c5ab._size_smallest_fdb5c5ab{--button-height:var(--button-size-smallest)}.root_fdb5c5ab._size_smaller_fdb5c5ab{--button-height:var(--button-size-smaller)}.root_fdb5c5ab._size_small_fdb5c5ab{--button-height:var(--button-size-small)}.root_fdb5c5ab._size_large_fdb5c5ab{--button-height:var(--button-size-large)}.root_fdb5c5ab._size_larger_fdb5c5ab{--button-height:var(--button-size-larger)}.root_fdb5c5ab._size_largest_fdb5c5ab{--button-height:var(--button-size-largest)}.root_fdb5c5ab._disabled_fdb5c5ab{pointer-events:none;background-color:var(--button-fill-disabled);color:var(--button-text-disabled);border-color:var(--button-borderColor-disabled);-webkit-box-shadow:var(--button-boxShadow-disabled);box-shadow:var(--button-boxShadow-disabled)}.root_fdb5c5ab._disabled_fdb5c5ab.icon_fdb5c5ab{color:var(--button-icon-disabled,var(--button-text-disabled))}.content_fdb5c5ab{font-family:var(--button-fontFamily);font-size:var(--button-fontSize);font-weight:var(--button-fontWeight)}.icon_fdb5c5ab{color:var(--button-icon);display:inline-block;width:var(--button-iconSize);height:var(--button-iconSize)}.root_fdb5c5ab>:not(:first-child){margin-left:var(--button-contentGap)}.root_fdb5c5ab:hover{background-color:var(--button-fill-hovered,var(--button-fill));color:var(--button-text-hovered,var(--button-text));border-color:var(--button-borderColor-hovered,var(--button-borderColor));-webkit-box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow));box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow))}.root_fdb5c5ab:hover .icon_fdb5c5ab{color:var(--button-icon-hovered,var(--button-text-hovered))}.root_fdb5c5ab:active{background-color:var(--button-fill-pressed,var(--button-fill-hovered));color:var(--button-text-pressed,var(--button-text-hovered));border-color:var(--button-borderColor-pressed,var(--button-borderColor-hovered,var(--button-borderColor)));-webkit-box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));-webkit-transform:var(--button-transform-pressed);transform:var(--button-transform-pressed);-webkit-transition:var(--button-transition-pressed);transition:var(--button-transition-pressed)}.root_fdb5c5ab:active .icon_fdb5c5ab{color:var(--button-icon-pressed,var(--button-text-pressed))}.root_fdb5c5ab:focus::after{position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;content:'';-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--button-borderRadius);-webkit-box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;border:var(--button-focusedWidth,2px) solid var(--button-focused,var(--accent-fill))}:export{root:root_fdb5c5ab;icon:icon_fdb5c5ab;content:content_fdb5c5ab;loader:loader_fdb5c5ab}" }]);
+    exports.root = "root_fdb5c5ab";
+    exports.icon = "icon_fdb5c5ab";
+    exports.content = "content_fdb5c5ab";
+    exports.loader = "loader_fdb5c5ab";
 });
 //# sourceMappingURL=Button.scss.js.map

lib-amd/components/Button/Button.stories.scss.d.ts

@@ -1,2 +0,2 @@
-export declare const hStack = "hStack_e16f74c0";
-export declare const vStack = "vStack_e16f74c0";
+export declare const hStack = "hStack_9515c94e";
+export declare const vStack = "vStack_9515c94e";

lib-amd/components/Button/Button.stories.scss.js

 define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    load_themed_styles_1.loadStyles([{ "rawString": ".hStack_e16f74c0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.hStack_e16f74c0>:not(:first-child){margin-left:var(--gap,8px)}.vStack_e16f74c0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.vStack_e16f74c0>:not(:first-child){margin-top:var(--gap,8px)}:export{hStack:hStack_e16f74c0;vStack:vStack_e16f74c0}" }]);
-    exports.hStack = "hStack_e16f74c0";
-    exports.vStack = "vStack_e16f74c0";
+    load_themed_styles_1.loadStyles([{ "rawString": ".hStack_9515c94e{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.hStack_9515c94e>:not(:first-child){margin-left:var(--gap,8px)}.vStack_9515c94e{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.vStack_9515c94e>:not(:first-child){margin-top:var(--gap,8px)}:export{hStack:hStack_9515c94e;vStack:vStack_9515c94e}" }]);
+    exports.hStack = "hStack_9515c94e";
+    exports.vStack = "vStack_9515c94e";
 });
 //# sourceMappingURL=Button.stories.scss.js.map

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

@@ -50,2 +50,4 @@ import * as React from 'react';
 }
+export interface ButtonState extends ButtonProps {
+}
 export interface ButtonSlots {
@@ -52,0 +54,0 @@ icon: React.ElementType;

lib-amd/components/Button/ButtonBase.js

 define(["require", "exports", "tslib", "react", "@fluentui/react-compose", "./useButton"], function (require, exports, tslib_1, React, react_compose_1, useButton_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.ButtonBase = react_compose_1.compose(function (props, ref, composeOptions) {
-        var _a = useButton_1.useButton(props, composeOptions), slots = _a.slots, slotProps = _a.slotProps;
+    exports.ButtonBase = react_compose_1.compose(function (props, ref, options) {
+        var state = options.state;
+        var _a = react_compose_1.mergeProps(state, options), slots = _a.slots, slotProps = _a.slotProps;
         return (React.createElement(slots.root, tslib_1.__assign({ ref: ref }, slotProps.root),
@@ -12,7 +13,2 @@ props.loading && React.createElement(slots.loader, tslib_1.__assign({}, slotProps.loader)),
     }, {
-        slots: {
-            icon: 'span',
-            content: 'span',
-            loader: 'span',
-        },
         displayName: 'ButtonBase',
@@ -33,2 +29,8 @@ handledProps: [
         ],
+        slots: {
+            icon: 'span',
+            content: 'span',
+            loader: 'span',
+        },
+        state: useButton_1.useButton,
     });
@@ -35,0 +37,0 @@ exports.ButtonBase.defaultProps = {

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

@@ -1,8 +0,6 @@
-import { ButtonProps } from './Button.types';
-import { ComposePreparedOptions } from '@fluentui/react-compose';
+import { ButtonProps, ButtonState } from './Button.types';
 /**
- * The useButton hook processes the Button component props and returns
- * state, slots, and slotProps for consumption by the component.
+ * The useButton hook processes the Button component props and returns state.
  * @param props
  */
-export declare const useButton: (props: ButtonProps, options: ComposePreparedOptions<{}, {}>) => import("@fluentui/react-compose/lib/mergeProps").MergePropsResult<ButtonProps>;
+export declare const useButton: (props: ButtonProps) => ButtonState;

lib-amd/components/Button/useButton.js

@@ -1,13 +0,10 @@
-define(["require", "exports", "@fluentui/react-compose"], function (require, exports, react_compose_1) {
+define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     /**
-     * The useButton hook processes the Button component props and returns
-     * state, slots, and slotProps for consumption by the component.
+     * The useButton hook processes the Button component props and returns state.
      * @param props
      */
-    exports.useButton = function (props, options) {
-        return react_compose_1.mergeProps(props, options);
-    };
+    exports.useButton = function (props) { return props; };
 });
 //# sourceMappingURL=useButton.js.map

lib-amd/index.d.ts

 import './version';
-export * from './components/Button/Button.types';
-export * from './components/Button/ButtonBase';
-export * from './components/Button/useButton';
-export * from './components/Button/Button';
+export * from './Button';
+export * from './ToggleButton';

lib-amd/index.js

@@ -1,8 +0,7 @@
-define(["require", "exports", "tslib", "./components/Button/ButtonBase", "./components/Button/useButton", "./components/Button/Button", "./version"], function (require, exports, tslib_1, ButtonBase_1, useButton_1, Button_1) {
+define(["require", "exports", "tslib", "./Button", "./ToggleButton", "./version"], function (require, exports, tslib_1, Button_1, ToggleButton_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(ButtonBase_1, exports);
-    tslib_1.__exportStar(useButton_1, exports);
     tslib_1.__exportStar(Button_1, exports);
+    tslib_1.__exportStar(ToggleButton_1, exports);
 });
 //# sourceMappingURL=index.js.map

lib-amd/version.js

 define(["require", "exports", "@uifabric/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@fluentui/react-button', '0.2.0');
+    set_version_1.setVersion('@fluentui/react-button', '0.2.1');
 });
 //# sourceMappingURL=version.js.map

lib-commonjs/components/Button/Button.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_compose_1 = require("@fluentui/react-compose");
 var ButtonBase_1 = require("./ButtonBase");
-var react_compose_1 = require("@fluentui/react-compose");
 var classes = require("./Button.scss");
@@ -6,0 +6,0 @@ exports.Button = react_compose_1.compose(ButtonBase_1.ButtonBase, {

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

@@ -1,4 +0,4 @@
-export declare const root = "root_55274d44";
-export declare const icon = "icon_55274d44";
-export declare const content = "content_55274d44";
-export declare const loader = "loader_55274d44";
+export declare const root = "root_fdb5c5ab";
+export declare const icon = "icon_fdb5c5ab";
+export declare const content = "content_fdb5c5ab";
+export declare const loader = "loader_fdb5c5ab";

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

@@ -5,7 +5,7 @@ "use strict";
 var load_themed_styles_1 = require("@microsoft/load-themed-styles");
-load_themed_styles_1.loadStyles([{ "rawString": ":root{--button-size-smallest:24px;--button-size-smaller:24px;--button-size-small:24px;--button-size-regular:32px;--button-size-large:40px;--button-size-larger:48px;--button-size-largest:64px;--button-padding:0 24px;--button-height:var(--button-size-regular);--button-minWidth:96px;--button-maxWidth:280px;--button-borderRadius:3px;--button-contentGap:10px;--button-iconSize:16px;--button-borderRadius:2px;--button-borderWidth:1px;--button-boxShadow:0px 2px 4px -0.75px rgba(0, 0, 0, 0.1);--button-boxShadow-disabled:none;--button-transform-pressed:scale(0.95);--button-transition:transform 0.1s linear;--button-fontFamily:'Segoe UI','Helvetica Neue','Apple Color Emoji','Segoe UI Emoji',Helvetica,Arial,sans-serif;--button-fontSize:14px;--button-fontWeight:600;--button-fill:white;--button-fill-hovered:rgb(237, 235, 233);--button-fill-focused:var(--button-fill);--button-fill-pressed:rgb(225, 223, 221);--button-fill-disabled:var(--button-fill-hovered);--button-text:rgb(44, 38, 33);--button-text-hovered:var(--button-text);--button-text-focused:var(--button-text);--button-text-pressed:var(--button-text);--button-text-disabled:rgb(200, 198, 196);--button-borderColor:rgb(225, 223, 221);--button-borderColor-disabled:transparent;--button-icon:inherit;--button-icon-hovered:var(--button-icon);--button-icon-pressed:var(--button-icon);--button-icon-focused:var(--button-icon);--button-icon-disabled:var(--button-text-disabled);--accent-fill:rgb(98, 100, 167);--accent-fill-hovered:rgb(88, 90, 150);--accent-fill-focused:var(--accent-fill);--accent-fill-pressed:rgb(70, 71, 117);--accent-fill-disabled:var(--accent-hovered);--accent-text:white;--accent-text-hovered:var(--accent-text);--accent-text-focused:var(--accent-text);--accent-text-pressed:var(--accent-text);--accent-text-disabled:rgb(200, 198, 196);--accent-borderColor:transparent;--accent-icon:inherit;--accent-icon-hovered:var(--accent-icon);--accent-icon-pressed:var(--accent-icon);--accent-icon-focused:var(--accent-icon);--accent-icon-disabled:var(--accent-text-disabled)}.root_55274d44{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--button-fill);border-color:var(--button-borderColor);border-radius:var(--button-borderRadius);border-width:var(--button-borderWidth);-webkit-box-shadow:var(--button-boxShadow);box-shadow:var(--button-boxShadow);color:var(--button-text);height:var(--button-height);padding:var(--button-padding);-webkit-transition:var(--button-transition);transition:var(--button-transition);white-space:var(--button-whiteSpace,nowrap)}.root_55274d44._primary_55274d44{--button-fill:var(--accent-fill);--button-fill-hovered:var(--accent-fill-hovered);--button-fill-pressed:var(--accent-fill-pressed);--button-text:var(--accent-text);--button-text-hovered:var(--accent-text-hovered);--button-text-pressed:var(--accent-text-pressed);--button-borderColor:var(--accent-borderColor);--button-icon:var(--accent-icon);--button-icon-hovered:var(--accent-icon-hovered);--button-icon-pressed:var(--accent-icon-pressed)}.root_55274d44._iconOnly_55274d44{width:var(--button-height);--button-padding:0}.root_55274d44._circular_55274d44{--button-borderRadius:50000px;--button-minWidth:var(--button-height)}.root_55274d44._fluid_55274d44{width:100%;max-width:100%}.root_55274d44._size_smallest_55274d44{--button-height:var(--button-size-smallest)}.root_55274d44._size_smaller_55274d44{--button-height:var(--button-size-smaller)}.root_55274d44._size_small_55274d44{--button-height:var(--button-size-small)}.root_55274d44._size_large_55274d44{--button-height:var(--button-size-large)}.root_55274d44._size_larger_55274d44{--button-height:var(--button-size-larger)}.root_55274d44._size_largest_55274d44{--button-height:var(--button-size-largest)}.root_55274d44._disabled_55274d44{pointer-events:none;background-color:var(--button-fill-disabled);color:var(--button-text-disabled);border-color:var(--button-borderColor-disabled);-webkit-box-shadow:var(--button-boxShadow-disabled);box-shadow:var(--button-boxShadow-disabled)}.root_55274d44._disabled_55274d44.icon_55274d44{color:var(--button-icon-disabled,var(--button-text-disabled))}.content_55274d44{font-family:var(--button-fontFamily);font-size:var(--button-fontSize);font-weight:var(--button-fontWeight)}.icon_55274d44{color:var(--button-icon);display:inline-block;width:var(--button-iconSize);height:var(--button-iconSize)}.root_55274d44>:not(:first-child){margin-left:var(--button-contentGap)}.root_55274d44:hover{background-color:var(--button-fill-hovered,var(--button-fill));color:var(--button-text-hovered,var(--button-text));border-color:var(--button-borderColor-hovered,var(--button-borderColor));-webkit-box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow));box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow))}.root_55274d44:hover .icon_55274d44{color:var(--button-icon-hovered,var(--button-text-hovered))}.root_55274d44:active{background-color:var(--button-fill-pressed,var(--button-fill-hovered));color:var(--button-text-pressed,var(--button-text-hovered));border-color:var(--button-borderColor-pressed,var(--button-borderColor-hovered,var(--button-borderColor)));-webkit-box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));-webkit-transform:var(--button-transform-pressed);transform:var(--button-transform-pressed);-webkit-transition:var(--button-transition-pressed);transition:var(--button-transition-pressed)}.root_55274d44:active .icon_55274d44{color:var(--button-icon-pressed,var(--button-text-pressed))}.root_55274d44:focus::after{position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;content:'';-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--button-borderRadius);-webkit-box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;border:var(--button-focusedWidth,2px) solid var(--button-focused,var(--accent-fill))}:export{root:root_55274d44;icon:icon_55274d44;content:content_55274d44;loader:loader_55274d44}" }]);
-exports.root = "root_55274d44";
-exports.icon = "icon_55274d44";
-exports.content = "content_55274d44";
-exports.loader = "loader_55274d44";
+load_themed_styles_1.loadStyles([{ "rawString": ":root{--button-size-smallest:24px;--button-size-smaller:24px;--button-size-small:24px;--button-size-regular:32px;--button-size-large:40px;--button-size-larger:48px;--button-size-largest:64px;--button-padding:0 24px;--button-height:var(--button-size-regular);--button-minWidth:96px;--button-maxWidth:280px;--button-borderRadius:3px;--button-contentGap:10px;--button-iconSize:16px;--button-borderRadius:2px;--button-borderWidth:1px;--button-boxShadow:0px 2px 4px -0.75px rgba(0, 0, 0, 0.1);--button-boxShadow-disabled:none;--button-transform-pressed:scale(0.95);--button-transition:transform 0.1s linear;--button-fontFamily:'Segoe UI','Helvetica Neue','Apple Color Emoji','Segoe UI Emoji',Helvetica,Arial,sans-serif;--button-fontSize:14px;--button-fontWeight:600;--button-fill:white;--button-fill-hovered:rgb(237, 235, 233);--button-fill-focused:var(--button-fill);--button-fill-pressed:rgb(225, 223, 221);--button-fill-disabled:var(--button-fill-hovered);--button-text:rgb(44, 38, 33);--button-text-hovered:var(--button-text);--button-text-focused:var(--button-text);--button-text-pressed:var(--button-text);--button-text-disabled:rgb(200, 198, 196);--button-borderColor:rgb(225, 223, 221);--button-borderColor-disabled:transparent;--button-icon:inherit;--button-icon-hovered:var(--button-icon);--button-icon-pressed:var(--button-icon);--button-icon-focused:var(--button-icon);--button-icon-disabled:var(--button-text-disabled);--accent-fill:rgb(98, 100, 167);--accent-fill-hovered:rgb(88, 90, 150);--accent-fill-focused:var(--accent-fill);--accent-fill-pressed:rgb(70, 71, 117);--accent-fill-disabled:var(--accent-hovered);--accent-text:white;--accent-text-hovered:var(--accent-text);--accent-text-focused:var(--accent-text);--accent-text-pressed:var(--accent-text);--accent-text-disabled:rgb(200, 198, 196);--accent-borderColor:transparent;--accent-icon:inherit;--accent-icon-hovered:var(--accent-icon);--accent-icon-pressed:var(--accent-icon);--accent-icon-focused:var(--accent-icon);--accent-icon-disabled:var(--accent-text-disabled)}.root_fdb5c5ab{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--button-fill);border-color:var(--button-borderColor);border-radius:var(--button-borderRadius);border-width:var(--button-borderWidth);-webkit-box-shadow:var(--button-boxShadow);box-shadow:var(--button-boxShadow);color:var(--button-text);height:var(--button-height);padding:var(--button-padding);-webkit-transition:var(--button-transition);transition:var(--button-transition);white-space:var(--button-whiteSpace,nowrap)}.root_fdb5c5ab._primary_fdb5c5ab{--button-fill:var(--accent-fill);--button-fill-hovered:var(--accent-fill-hovered);--button-fill-pressed:var(--accent-fill-pressed);--button-text:var(--accent-text);--button-text-hovered:var(--accent-text-hovered);--button-text-pressed:var(--accent-text-pressed);--button-borderColor:var(--accent-borderColor);--button-icon:var(--accent-icon);--button-icon-hovered:var(--accent-icon-hovered);--button-icon-pressed:var(--accent-icon-pressed)}.root_fdb5c5ab._iconOnly_fdb5c5ab{width:var(--button-height);--button-padding:0}.root_fdb5c5ab._circular_fdb5c5ab{--button-borderRadius:50000px;--button-minWidth:var(--button-height)}.root_fdb5c5ab._fluid_fdb5c5ab{width:100%;max-width:100%}.root_fdb5c5ab._size_smallest_fdb5c5ab{--button-height:var(--button-size-smallest)}.root_fdb5c5ab._size_smaller_fdb5c5ab{--button-height:var(--button-size-smaller)}.root_fdb5c5ab._size_small_fdb5c5ab{--button-height:var(--button-size-small)}.root_fdb5c5ab._size_large_fdb5c5ab{--button-height:var(--button-size-large)}.root_fdb5c5ab._size_larger_fdb5c5ab{--button-height:var(--button-size-larger)}.root_fdb5c5ab._size_largest_fdb5c5ab{--button-height:var(--button-size-largest)}.root_fdb5c5ab._disabled_fdb5c5ab{pointer-events:none;background-color:var(--button-fill-disabled);color:var(--button-text-disabled);border-color:var(--button-borderColor-disabled);-webkit-box-shadow:var(--button-boxShadow-disabled);box-shadow:var(--button-boxShadow-disabled)}.root_fdb5c5ab._disabled_fdb5c5ab.icon_fdb5c5ab{color:var(--button-icon-disabled,var(--button-text-disabled))}.content_fdb5c5ab{font-family:var(--button-fontFamily);font-size:var(--button-fontSize);font-weight:var(--button-fontWeight)}.icon_fdb5c5ab{color:var(--button-icon);display:inline-block;width:var(--button-iconSize);height:var(--button-iconSize)}.root_fdb5c5ab>:not(:first-child){margin-left:var(--button-contentGap)}.root_fdb5c5ab:hover{background-color:var(--button-fill-hovered,var(--button-fill));color:var(--button-text-hovered,var(--button-text));border-color:var(--button-borderColor-hovered,var(--button-borderColor));-webkit-box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow));box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow))}.root_fdb5c5ab:hover .icon_fdb5c5ab{color:var(--button-icon-hovered,var(--button-text-hovered))}.root_fdb5c5ab:active{background-color:var(--button-fill-pressed,var(--button-fill-hovered));color:var(--button-text-pressed,var(--button-text-hovered));border-color:var(--button-borderColor-pressed,var(--button-borderColor-hovered,var(--button-borderColor)));-webkit-box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));-webkit-transform:var(--button-transform-pressed);transform:var(--button-transform-pressed);-webkit-transition:var(--button-transition-pressed);transition:var(--button-transition-pressed)}.root_fdb5c5ab:active .icon_fdb5c5ab{color:var(--button-icon-pressed,var(--button-text-pressed))}.root_fdb5c5ab:focus::after{position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;content:'';-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--button-borderRadius);-webkit-box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;border:var(--button-focusedWidth,2px) solid var(--button-focused,var(--accent-fill))}:export{root:root_fdb5c5ab;icon:icon_fdb5c5ab;content:content_fdb5c5ab;loader:loader_fdb5c5ab}" }]);
+exports.root = "root_fdb5c5ab";
+exports.icon = "icon_fdb5c5ab";
+exports.content = "content_fdb5c5ab";
+exports.loader = "loader_fdb5c5ab";
 //# sourceMappingURL=Button.scss.js.map

lib-commonjs/components/Button/Button.stories.scss.d.ts

@@ -1,2 +0,2 @@
-export declare const hStack = "hStack_e16f74c0";
-export declare const vStack = "vStack_e16f74c0";
+export declare const hStack = "hStack_9515c94e";
+export declare const vStack = "vStack_9515c94e";

lib-commonjs/components/Button/Button.stories.scss.js

@@ -5,5 +5,5 @@ "use strict";
 var load_themed_styles_1 = require("@microsoft/load-themed-styles");
-load_themed_styles_1.loadStyles([{ "rawString": ".hStack_e16f74c0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.hStack_e16f74c0>:not(:first-child){margin-left:var(--gap,8px)}.vStack_e16f74c0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.vStack_e16f74c0>:not(:first-child){margin-top:var(--gap,8px)}:export{hStack:hStack_e16f74c0;vStack:vStack_e16f74c0}" }]);
-exports.hStack = "hStack_e16f74c0";
-exports.vStack = "vStack_e16f74c0";
+load_themed_styles_1.loadStyles([{ "rawString": ".hStack_9515c94e{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.hStack_9515c94e>:not(:first-child){margin-left:var(--gap,8px)}.vStack_9515c94e{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.vStack_9515c94e>:not(:first-child){margin-top:var(--gap,8px)}:export{hStack:hStack_9515c94e;vStack:vStack_9515c94e}" }]);
+exports.hStack = "hStack_9515c94e";
+exports.vStack = "vStack_9515c94e";
 //# sourceMappingURL=Button.stories.scss.js.map

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

@@ -50,2 +50,4 @@ import * as React from 'react';
 }
+export interface ButtonState extends ButtonProps {
+}
 export interface ButtonSlots {
@@ -52,0 +54,0 @@ icon: React.ElementType;

lib-commonjs/components/Button/ButtonBase.js

@@ -7,4 +7,5 @@ "use strict";
 var useButton_1 = require("./useButton");
-exports.ButtonBase = react_compose_1.compose(function (props, ref, composeOptions) {
-    var _a = useButton_1.useButton(props, composeOptions), slots = _a.slots, slotProps = _a.slotProps;
+exports.ButtonBase = react_compose_1.compose(function (props, ref, options) {
+    var state = options.state;
+    var _a = react_compose_1.mergeProps(state, options), slots = _a.slots, slotProps = _a.slotProps;
     return (React.createElement(slots.root, tslib_1.__assign({ ref: ref }, slotProps.root),
@@ -16,7 +17,2 @@ props.loading && React.createElement(slots.loader, tslib_1.__assign({}, slotProps.loader)),
 }, {
-    slots: {
-        icon: 'span',
-        content: 'span',
-        loader: 'span',
-    },
     displayName: 'ButtonBase',
@@ -37,2 +33,8 @@ handledProps: [
     ],
+    slots: {
+        icon: 'span',
+        content: 'span',
+        loader: 'span',
+    },
+    state: useButton_1.useButton,
 });
@@ -39,0 +41,0 @@ exports.ButtonBase.defaultProps = {

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

@@ -1,8 +0,6 @@
-import { ButtonProps } from './Button.types';
-import { ComposePreparedOptions } from '@fluentui/react-compose';
+import { ButtonProps, ButtonState } from './Button.types';
 /**
- * The useButton hook processes the Button component props and returns
- * state, slots, and slotProps for consumption by the component.
+ * The useButton hook processes the Button component props and returns state.
  * @param props
  */
-export declare const useButton: (props: ButtonProps, options: ComposePreparedOptions<{}, {}>) => import("@fluentui/react-compose/lib/mergeProps").MergePropsResult<ButtonProps>;
+export declare const useButton: (props: ButtonProps) => ButtonState;

lib-commonjs/components/Button/useButton.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_compose_1 = require("@fluentui/react-compose");
 /**
- * The useButton hook processes the Button component props and returns
- * state, slots, and slotProps for consumption by the component.
+ * The useButton hook processes the Button component props and returns state.
  * @param props
  */
-exports.useButton = function (props, options) {
-    return react_compose_1.mergeProps(props, options);
-};
+exports.useButton = function (props) { return props; };
 //# sourceMappingURL=useButton.js.map

lib-commonjs/index.d.ts

 import './version';
-export * from './components/Button/Button.types';
-export * from './components/Button/ButtonBase';
-export * from './components/Button/useButton';
-export * from './components/Button/Button';
+export * from './Button';
+export * from './ToggleButton';

lib-commonjs/index.js

@@ -5,5 +5,4 @@ "use strict";
 require("./version");
-tslib_1.__exportStar(require("./components/Button/ButtonBase"), exports);
-tslib_1.__exportStar(require("./components/Button/useButton"), exports);
-tslib_1.__exportStar(require("./components/Button/Button"), exports);
+tslib_1.__exportStar(require("./Button"), exports);
+tslib_1.__exportStar(require("./ToggleButton"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/version.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// @fluentui/react-button@0.2.0
+// @fluentui/react-button@0.2.1
 // Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.
 var set_version_1 = require("@uifabric/set-version");
-set_version_1.setVersion('@fluentui/react-button', '0.2.0');
+set_version_1.setVersion('@fluentui/react-button', '0.2.1');
 //# sourceMappingURL=version.js.map

lib/components/Button/Button.js

@@ -0,3 +1,3 @@
+import { compose, createClassResolver } from '@fluentui/react-compose';
 import { ButtonBase } from './ButtonBase';
-import { compose, createClassResolver } from '@fluentui/react-compose';
 import * as classes from './Button.scss';
@@ -4,0 +4,0 @@ export var Button = compose(ButtonBase, {

lib/components/Button/Button.scss.d.ts

@@ -1,4 +0,4 @@
-export declare const root = "root_55274d44";
-export declare const icon = "icon_55274d44";
-export declare const content = "content_55274d44";
-export declare const loader = "loader_55274d44";
+export declare const root = "root_fdb5c5ab";
+export declare const icon = "icon_fdb5c5ab";
+export declare const content = "content_fdb5c5ab";
+export declare const loader = "loader_fdb5c5ab";

lib/components/Button/Button.scss.js

 /* tslint:disable */
 import { loadStyles } from '@microsoft/load-themed-styles';
-loadStyles([{ "rawString": ":root{--button-size-smallest:24px;--button-size-smaller:24px;--button-size-small:24px;--button-size-regular:32px;--button-size-large:40px;--button-size-larger:48px;--button-size-largest:64px;--button-padding:0 24px;--button-height:var(--button-size-regular);--button-minWidth:96px;--button-maxWidth:280px;--button-borderRadius:3px;--button-contentGap:10px;--button-iconSize:16px;--button-borderRadius:2px;--button-borderWidth:1px;--button-boxShadow:0px 2px 4px -0.75px rgba(0, 0, 0, 0.1);--button-boxShadow-disabled:none;--button-transform-pressed:scale(0.95);--button-transition:transform 0.1s linear;--button-fontFamily:'Segoe UI','Helvetica Neue','Apple Color Emoji','Segoe UI Emoji',Helvetica,Arial,sans-serif;--button-fontSize:14px;--button-fontWeight:600;--button-fill:white;--button-fill-hovered:rgb(237, 235, 233);--button-fill-focused:var(--button-fill);--button-fill-pressed:rgb(225, 223, 221);--button-fill-disabled:var(--button-fill-hovered);--button-text:rgb(44, 38, 33);--button-text-hovered:var(--button-text);--button-text-focused:var(--button-text);--button-text-pressed:var(--button-text);--button-text-disabled:rgb(200, 198, 196);--button-borderColor:rgb(225, 223, 221);--button-borderColor-disabled:transparent;--button-icon:inherit;--button-icon-hovered:var(--button-icon);--button-icon-pressed:var(--button-icon);--button-icon-focused:var(--button-icon);--button-icon-disabled:var(--button-text-disabled);--accent-fill:rgb(98, 100, 167);--accent-fill-hovered:rgb(88, 90, 150);--accent-fill-focused:var(--accent-fill);--accent-fill-pressed:rgb(70, 71, 117);--accent-fill-disabled:var(--accent-hovered);--accent-text:white;--accent-text-hovered:var(--accent-text);--accent-text-focused:var(--accent-text);--accent-text-pressed:var(--accent-text);--accent-text-disabled:rgb(200, 198, 196);--accent-borderColor:transparent;--accent-icon:inherit;--accent-icon-hovered:var(--accent-icon);--accent-icon-pressed:var(--accent-icon);--accent-icon-focused:var(--accent-icon);--accent-icon-disabled:var(--accent-text-disabled)}.root_55274d44{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--button-fill);border-color:var(--button-borderColor);border-radius:var(--button-borderRadius);border-width:var(--button-borderWidth);-webkit-box-shadow:var(--button-boxShadow);box-shadow:var(--button-boxShadow);color:var(--button-text);height:var(--button-height);padding:var(--button-padding);-webkit-transition:var(--button-transition);transition:var(--button-transition);white-space:var(--button-whiteSpace,nowrap)}.root_55274d44._primary_55274d44{--button-fill:var(--accent-fill);--button-fill-hovered:var(--accent-fill-hovered);--button-fill-pressed:var(--accent-fill-pressed);--button-text:var(--accent-text);--button-text-hovered:var(--accent-text-hovered);--button-text-pressed:var(--accent-text-pressed);--button-borderColor:var(--accent-borderColor);--button-icon:var(--accent-icon);--button-icon-hovered:var(--accent-icon-hovered);--button-icon-pressed:var(--accent-icon-pressed)}.root_55274d44._iconOnly_55274d44{width:var(--button-height);--button-padding:0}.root_55274d44._circular_55274d44{--button-borderRadius:50000px;--button-minWidth:var(--button-height)}.root_55274d44._fluid_55274d44{width:100%;max-width:100%}.root_55274d44._size_smallest_55274d44{--button-height:var(--button-size-smallest)}.root_55274d44._size_smaller_55274d44{--button-height:var(--button-size-smaller)}.root_55274d44._size_small_55274d44{--button-height:var(--button-size-small)}.root_55274d44._size_large_55274d44{--button-height:var(--button-size-large)}.root_55274d44._size_larger_55274d44{--button-height:var(--button-size-larger)}.root_55274d44._size_largest_55274d44{--button-height:var(--button-size-largest)}.root_55274d44._disabled_55274d44{pointer-events:none;background-color:var(--button-fill-disabled);color:var(--button-text-disabled);border-color:var(--button-borderColor-disabled);-webkit-box-shadow:var(--button-boxShadow-disabled);box-shadow:var(--button-boxShadow-disabled)}.root_55274d44._disabled_55274d44.icon_55274d44{color:var(--button-icon-disabled,var(--button-text-disabled))}.content_55274d44{font-family:var(--button-fontFamily);font-size:var(--button-fontSize);font-weight:var(--button-fontWeight)}.icon_55274d44{color:var(--button-icon);display:inline-block;width:var(--button-iconSize);height:var(--button-iconSize)}.root_55274d44>:not(:first-child){margin-left:var(--button-contentGap)}.root_55274d44:hover{background-color:var(--button-fill-hovered,var(--button-fill));color:var(--button-text-hovered,var(--button-text));border-color:var(--button-borderColor-hovered,var(--button-borderColor));-webkit-box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow));box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow))}.root_55274d44:hover .icon_55274d44{color:var(--button-icon-hovered,var(--button-text-hovered))}.root_55274d44:active{background-color:var(--button-fill-pressed,var(--button-fill-hovered));color:var(--button-text-pressed,var(--button-text-hovered));border-color:var(--button-borderColor-pressed,var(--button-borderColor-hovered,var(--button-borderColor)));-webkit-box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));-webkit-transform:var(--button-transform-pressed);transform:var(--button-transform-pressed);-webkit-transition:var(--button-transition-pressed);transition:var(--button-transition-pressed)}.root_55274d44:active .icon_55274d44{color:var(--button-icon-pressed,var(--button-text-pressed))}.root_55274d44:focus::after{position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;content:'';-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--button-borderRadius);-webkit-box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;border:var(--button-focusedWidth,2px) solid var(--button-focused,var(--accent-fill))}:export{root:root_55274d44;icon:icon_55274d44;content:content_55274d44;loader:loader_55274d44}" }]);
-export var root = "root_55274d44";
-export var icon = "icon_55274d44";
-export var content = "content_55274d44";
-export var loader = "loader_55274d44";
+loadStyles([{ "rawString": ":root{--button-size-smallest:24px;--button-size-smaller:24px;--button-size-small:24px;--button-size-regular:32px;--button-size-large:40px;--button-size-larger:48px;--button-size-largest:64px;--button-padding:0 24px;--button-height:var(--button-size-regular);--button-minWidth:96px;--button-maxWidth:280px;--button-borderRadius:3px;--button-contentGap:10px;--button-iconSize:16px;--button-borderRadius:2px;--button-borderWidth:1px;--button-boxShadow:0px 2px 4px -0.75px rgba(0, 0, 0, 0.1);--button-boxShadow-disabled:none;--button-transform-pressed:scale(0.95);--button-transition:transform 0.1s linear;--button-fontFamily:'Segoe UI','Helvetica Neue','Apple Color Emoji','Segoe UI Emoji',Helvetica,Arial,sans-serif;--button-fontSize:14px;--button-fontWeight:600;--button-fill:white;--button-fill-hovered:rgb(237, 235, 233);--button-fill-focused:var(--button-fill);--button-fill-pressed:rgb(225, 223, 221);--button-fill-disabled:var(--button-fill-hovered);--button-text:rgb(44, 38, 33);--button-text-hovered:var(--button-text);--button-text-focused:var(--button-text);--button-text-pressed:var(--button-text);--button-text-disabled:rgb(200, 198, 196);--button-borderColor:rgb(225, 223, 221);--button-borderColor-disabled:transparent;--button-icon:inherit;--button-icon-hovered:var(--button-icon);--button-icon-pressed:var(--button-icon);--button-icon-focused:var(--button-icon);--button-icon-disabled:var(--button-text-disabled);--accent-fill:rgb(98, 100, 167);--accent-fill-hovered:rgb(88, 90, 150);--accent-fill-focused:var(--accent-fill);--accent-fill-pressed:rgb(70, 71, 117);--accent-fill-disabled:var(--accent-hovered);--accent-text:white;--accent-text-hovered:var(--accent-text);--accent-text-focused:var(--accent-text);--accent-text-pressed:var(--accent-text);--accent-text-disabled:rgb(200, 198, 196);--accent-borderColor:transparent;--accent-icon:inherit;--accent-icon-hovered:var(--accent-icon);--accent-icon-pressed:var(--accent-icon);--accent-icon-focused:var(--accent-icon);--accent-icon-disabled:var(--accent-text-disabled)}.root_fdb5c5ab{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--button-fill);border-color:var(--button-borderColor);border-radius:var(--button-borderRadius);border-width:var(--button-borderWidth);-webkit-box-shadow:var(--button-boxShadow);box-shadow:var(--button-boxShadow);color:var(--button-text);height:var(--button-height);padding:var(--button-padding);-webkit-transition:var(--button-transition);transition:var(--button-transition);white-space:var(--button-whiteSpace,nowrap)}.root_fdb5c5ab._primary_fdb5c5ab{--button-fill:var(--accent-fill);--button-fill-hovered:var(--accent-fill-hovered);--button-fill-pressed:var(--accent-fill-pressed);--button-text:var(--accent-text);--button-text-hovered:var(--accent-text-hovered);--button-text-pressed:var(--accent-text-pressed);--button-borderColor:var(--accent-borderColor);--button-icon:var(--accent-icon);--button-icon-hovered:var(--accent-icon-hovered);--button-icon-pressed:var(--accent-icon-pressed)}.root_fdb5c5ab._iconOnly_fdb5c5ab{width:var(--button-height);--button-padding:0}.root_fdb5c5ab._circular_fdb5c5ab{--button-borderRadius:50000px;--button-minWidth:var(--button-height)}.root_fdb5c5ab._fluid_fdb5c5ab{width:100%;max-width:100%}.root_fdb5c5ab._size_smallest_fdb5c5ab{--button-height:var(--button-size-smallest)}.root_fdb5c5ab._size_smaller_fdb5c5ab{--button-height:var(--button-size-smaller)}.root_fdb5c5ab._size_small_fdb5c5ab{--button-height:var(--button-size-small)}.root_fdb5c5ab._size_large_fdb5c5ab{--button-height:var(--button-size-large)}.root_fdb5c5ab._size_larger_fdb5c5ab{--button-height:var(--button-size-larger)}.root_fdb5c5ab._size_largest_fdb5c5ab{--button-height:var(--button-size-largest)}.root_fdb5c5ab._disabled_fdb5c5ab{pointer-events:none;background-color:var(--button-fill-disabled);color:var(--button-text-disabled);border-color:var(--button-borderColor-disabled);-webkit-box-shadow:var(--button-boxShadow-disabled);box-shadow:var(--button-boxShadow-disabled)}.root_fdb5c5ab._disabled_fdb5c5ab.icon_fdb5c5ab{color:var(--button-icon-disabled,var(--button-text-disabled))}.content_fdb5c5ab{font-family:var(--button-fontFamily);font-size:var(--button-fontSize);font-weight:var(--button-fontWeight)}.icon_fdb5c5ab{color:var(--button-icon);display:inline-block;width:var(--button-iconSize);height:var(--button-iconSize)}.root_fdb5c5ab>:not(:first-child){margin-left:var(--button-contentGap)}.root_fdb5c5ab:hover{background-color:var(--button-fill-hovered,var(--button-fill));color:var(--button-text-hovered,var(--button-text));border-color:var(--button-borderColor-hovered,var(--button-borderColor));-webkit-box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow));box-shadow:var(--button-boxShadow-hovered,var(--button-boxShadow))}.root_fdb5c5ab:hover .icon_fdb5c5ab{color:var(--button-icon-hovered,var(--button-text-hovered))}.root_fdb5c5ab:active{background-color:var(--button-fill-pressed,var(--button-fill-hovered));color:var(--button-text-pressed,var(--button-text-hovered));border-color:var(--button-borderColor-pressed,var(--button-borderColor-hovered,var(--button-borderColor)));-webkit-box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));box-shadow:var(--button-boxShadow-pressed,var(--button-boxShadow-hovered,var(--button-boxShadow)));-webkit-transform:var(--button-transform-pressed);transform:var(--button-transform-pressed);-webkit-transition:var(--button-transition-pressed);transition:var(--button-transition-pressed)}.root_fdb5c5ab:active .icon_fdb5c5ab{color:var(--button-icon-pressed,var(--button-text-pressed))}.root_fdb5c5ab:focus::after{position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;content:'';-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--button-borderRadius);-webkit-box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;box-shadow:0 0 0 var(--button-focusedInnerWidth,1px) var(--button-focusedInner,var(--accent-text)) inset;border:var(--button-focusedWidth,2px) solid var(--button-focused,var(--accent-fill))}:export{root:root_fdb5c5ab;icon:icon_fdb5c5ab;content:content_fdb5c5ab;loader:loader_fdb5c5ab}" }]);
+export var root = "root_fdb5c5ab";
+export var icon = "icon_fdb5c5ab";
+export var content = "content_fdb5c5ab";
+export var loader = "loader_fdb5c5ab";
 //# sourceMappingURL=Button.scss.js.map

lib/components/Button/Button.stories.scss.d.ts

@@ -1,2 +0,2 @@
-export declare const hStack = "hStack_e16f74c0";
-export declare const vStack = "vStack_e16f74c0";
+export declare const hStack = "hStack_9515c94e";
+export declare const vStack = "vStack_9515c94e";

lib/components/Button/Button.stories.scss.js

 /* tslint:disable */
 import { loadStyles } from '@microsoft/load-themed-styles';
-loadStyles([{ "rawString": ".hStack_e16f74c0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.hStack_e16f74c0>:not(:first-child){margin-left:var(--gap,8px)}.vStack_e16f74c0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.vStack_e16f74c0>:not(:first-child){margin-top:var(--gap,8px)}:export{hStack:hStack_e16f74c0;vStack:vStack_e16f74c0}" }]);
-export var hStack = "hStack_e16f74c0";
-export var vStack = "vStack_e16f74c0";
+loadStyles([{ "rawString": ".hStack_9515c94e{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.hStack_9515c94e>:not(:first-child){margin-left:var(--gap,8px)}.vStack_9515c94e{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.vStack_9515c94e>:not(:first-child){margin-top:var(--gap,8px)}:export{hStack:hStack_9515c94e;vStack:vStack_9515c94e}" }]);
+export var hStack = "hStack_9515c94e";
+export var vStack = "vStack_9515c94e";
 //# sourceMappingURL=Button.stories.scss.js.map

lib/components/Button/Button.types.d.ts

@@ -50,2 +50,4 @@ import * as React from 'react';
 }
+export interface ButtonState extends ButtonProps {
+}
 export interface ButtonSlots {
@@ -52,0 +54,0 @@ icon: React.ElementType;

lib/components/Button/ButtonBase.js

 import { __assign } from "tslib";
 import * as React from 'react';
-import { compose } from '@fluentui/react-compose';
+import { compose, mergeProps } from '@fluentui/react-compose';
 import { useButton } from './useButton';
-export var ButtonBase = compose(function (props, ref, composeOptions) {
-    var _a = useButton(props, composeOptions), slots = _a.slots, slotProps = _a.slotProps;
+export var ButtonBase = compose(function (props, ref, options) {
+    var state = options.state;
+    var _a = mergeProps(state, options), slots = _a.slots, slotProps = _a.slotProps;
     return (React.createElement(slots.root, __assign({ ref: ref }, slotProps.root),
@@ -13,7 +14,2 @@ props.loading && React.createElement(slots.loader, __assign({}, slotProps.loader)),
 }, {
-    slots: {
-        icon: 'span',
-        content: 'span',
-        loader: 'span',
-    },
     displayName: 'ButtonBase',
@@ -34,2 +30,8 @@ handledProps: [
     ],
+    slots: {
+        icon: 'span',
+        content: 'span',
+        loader: 'span',
+    },
+    state: useButton,
 });
@@ -36,0 +38,0 @@ ButtonBase.defaultProps = {

lib/components/Button/useButton.d.ts

@@ -1,8 +0,6 @@
-import { ButtonProps } from './Button.types';
-import { ComposePreparedOptions } from '@fluentui/react-compose';
+import { ButtonProps, ButtonState } from './Button.types';
 /**
- * The useButton hook processes the Button component props and returns
- * state, slots, and slotProps for consumption by the component.
+ * The useButton hook processes the Button component props and returns state.
  * @param props
  */
-export declare const useButton: (props: ButtonProps, options: ComposePreparedOptions<{}, {}>) => import("@fluentui/react-compose/lib/mergeProps").MergePropsResult<ButtonProps>;
+export declare const useButton: (props: ButtonProps) => ButtonState;

lib/components/Button/useButton.js

@@ -1,10 +0,6 @@
-import { mergeProps } from '@fluentui/react-compose';
 /**
- * The useButton hook processes the Button component props and returns
- * state, slots, and slotProps for consumption by the component.
+ * The useButton hook processes the Button component props and returns state.
  * @param props
  */
-export var useButton = function (props, options) {
-    return mergeProps(props, options);
-};
+export var useButton = function (props) { return props; };
 //# sourceMappingURL=useButton.js.map

lib/index.d.ts

 import './version';
-export * from './components/Button/Button.types';
-export * from './components/Button/ButtonBase';
-export * from './components/Button/useButton';
-export * from './components/Button/Button';
+export * from './Button';
+export * from './ToggleButton';

lib/index.js

 import './version';
-export * from './components/Button/ButtonBase';
-export * from './components/Button/useButton';
-export * from './components/Button/Button';
+export * from './Button';
+export * from './ToggleButton';
 //# sourceMappingURL=index.js.map

lib/version.js

@@ -1,5 +0,5 @@
-// @fluentui/react-button@0.2.0
+// @fluentui/react-button@0.2.1
 // Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.
 import { setVersion } from '@uifabric/set-version';
-setVersion('@fluentui/react-button', '0.2.0');
+setVersion('@fluentui/react-button', '0.2.1');
 //# sourceMappingURL=version.js.map

package.json

 {
   "name": "@fluentui/react-button",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Fluent UI React Button component.",
@@ -49,3 +49,3 @@ "main": "lib-commonjs/index.js",
     "@uifabric/set-version": "^7.0.13",
-    "@fluentui/react-compose": "^0.9.0",
+    "@fluentui/react-compose": "^0.10.0",
     "@uifabric/react-hooks": "^7.4.5",
@@ -52,0 +52,0 @@ "@uifabric/utilities": "^7.20.3",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

230077

increased by74.83%

Number of package files

190

increased by91.92%

Lines of code

1525

increased by61.21%

Worsened metrics

Number of low quality alerts

4

increased by33.33%

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• + Added@fluentui/react-compose@0.10.0(transitive)

• - Removed@fluentui/react-compose@0.9.0(transitive)

• Updated@fluentui/react-compose@^0.10.0