@fluentui/react-button 0.0.0-nightly-20220302-0405.1

package/lib-commonjs/ToggleButton.js.map

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

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

@@ -0,0 +1,6 @@
+import type { ButtonProps } from './Button.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * Buttons give people a way to trigger an action.
+ */
+export declare const Button: ForwardRefComponent<ButtonProps>;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const renderButton_1 = /*#__PURE__*/require("./renderButton");
+
+const useButton_1 = /*#__PURE__*/require("./useButton");
+
+const useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
+/**
+ * Buttons give people a way to trigger an action.
+ */
+
+
+exports.Button = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useButton_1.useButton_unstable(props, ref);
+  useButtonStyles_1.useButtonStyles_unstable(state);
+  return renderButton_1.renderButton_unstable(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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CALsF,CAMtF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,62 @@
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type ButtonSlots = {
+    /**
+     * Root of the component that renders as either a `<button>` tag or an `<a>` tag.
+     */
+    root: Slot<ARIAButtonSlotProps>;
+    /**
+     * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
+     */
+    icon?: Slot<'span'>;
+};
+export declare type ButtonCommons = {
+    /**
+     * A button can have its content and borders styled for greater emphasis or to be subtle.
+     * - 'primary': Emphasizes the button as a primary action.
+     * - 'outline': Removes background styling.
+     * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     * - 'transparent': Removes background and border styling.
+     */
+    appearance?: 'primary' | 'outline' | 'subtle' | 'transparent';
+    /**
+     * A button can fill the width of its container.
+     * @default false
+     */
+    block: boolean;
+    /**
+     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
+     * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
+     * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
+     * @default false
+     */
+    disabledFocusable: boolean;
+    /**
+     * A button can show that it cannot be interacted with.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * A button can format its icon to appear before or after its content.
+     * @default 'before'
+     */
+    iconPosition?: 'before' | 'after';
+    /**
+     * A button can be rounded, circular, or square.
+     * @default 'rounded'
+     */
+    shape: 'rounded' | 'circular' | 'square';
+    /**
+     * A button supports different sizes.
+     * @default 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
+};
+export declare type ButtonProps = ComponentProps<ButtonSlots> & Partial<ButtonCommons>;
+export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
+    /**
+     * A button can contain only an icon.
+     * @default false
+     */
+    iconOnly: boolean;
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+export * from './Button';
+export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
+export * from './renderButton';
+export * from './useButton';
+export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButtonStyles_unstable = exports.buttonClassName = void 0;
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./Button"), exports);
+
+tslib_1.__exportStar(require("./renderButton"), exports);
+
+tslib_1.__exportStar(require("./useButton"), exports);
+
+var useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
+
+Object.defineProperty(exports, "buttonClassName", {
+  enumerable: true,
+  get: function () {
+    return useButtonStyles_1.buttonClassName;
+  }
+});
+Object.defineProperty(exports, "useButtonStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return useButtonStyles_1.useButtonStyles_unstable;
+  }
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,5 @@
+import type { ButtonState } from './Button.types';
+/**
+ * Renders a Button component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderButton_unstable: (state: ButtonState) => JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderButton_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Renders a Button component by passing the state defined props to the appropriate slots.
+ */
+
+
+const renderButton_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  const {
+    iconOnly,
+    iconPosition
+  } = state;
+  return React.createElement(slots.root, { ...slotProps.root
+  }, iconPosition !== 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }));
+};
+
+exports.renderButton_unstable = renderButton_unstable;
+//# sourceMappingURL=renderButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH7C,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { ButtonProps, ButtonState } from './Button.types';
+/**
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */
+export declare const useButton_unstable: (props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButton_unstable = void 0;
+
+const react_aria_1 = /*#__PURE__*/require("@fluentui/react-aria");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */
+
+
+const useButton_unstable = (props, ref) => {
+  const {
+    appearance,
+    as,
+    block = false,
+    disabled = false,
+    disabledFocusable = false,
+    icon,
+    iconPosition = 'before',
+    shape = 'rounded',
+    size = 'medium'
+  } = props;
+  const iconShorthand = react_utilities_1.resolveShorthand(icon);
+  return {
+    // Props passed at the top-level
+    appearance,
+    block,
+    disabled,
+    disabledFocusable,
+    iconPosition,
+    shape,
+    size,
+    // State calculated from a set of props
+    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+    // Slots definition
+    components: {
+      root: 'button',
+      icon: 'span'
+    },
+    root: react_utilities_1.getNativeElementProps(as || 'button', react_aria_1.useARIAButton(props, {
+      required: true,
+      defaultProps: {
+        // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>
+        ref: ref,
+        type: 'button' // This is added because the default for type is 'submit'
+
+      }
+    })),
+    icon: iconShorthand
+  };
+};
+
+exports.useButton_unstable = useButton_unstable;
+//# sourceMappingURL=useButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,KAAK,GAAG,SARJ;AASJ,IAAA,IAAI,GAAG;AATH,MAUF,KAVJ;AAWA,QAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAmC,KAAnC,EAA0C;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA1C,CAFI,CAnBD;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAjDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const {\n    appearance,\n    as,\n    block = false,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    block,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as || 'button',\n      useARIAButton<ARIAButtonSlotProps>(props, {\n        required: true,\n        defaultProps: {\n          // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>\n          ref: ref as React.Ref<HTMLButtonElement>,\n          type: 'button', // This is added because the default for type is 'submit'\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,3 @@
+import type { ButtonState } from './Button.types';
+export declare const buttonClassName = "fui-Button";
+export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;