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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Button/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Button.types';\nexport * from './Button';\nexport * from './renderButton';\nexport * from './useButton';\nexport { useButtonStyles } from './useButtonStyles';\nexport * from './useButtonState';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -1,5 +1,5 @@
-import { ButtonState } from './Button.types';
+import type { ButtonState } from './Button.types';
 /**
- * Define the render function. Given the state of a button, renders it.
+ * Renders a Button component by passing the state defined props to the appropriate slots.
  */
 export declare const renderButton: (state: ButtonState) => JSX.Element;

package/lib/components/Button/renderButton.js

@@ -1,16 +1,17 @@
 import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { buttonShorthandProps } from './useButton';
 /**
- * Define the render function. Given the state of a button, renders it.
+ * Renders a Button component by passing the state defined props to the appropriate slots.
  */
+
 export var renderButton = function (state) {
-    var _a = getSlots(state, buttonShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    var /*loading,*/ iconPosition = state.iconPosition, iconOnly = state.iconOnly;
-    return (React.createElement(slots.root, __assign({}, slotProps.root),
-        iconPosition !== 'after' && React.createElement(slots.icon, __assign({}, slotProps.icon)),
-        !iconOnly && React.createElement(slots.children, __assign({}, slotProps.children)),
-        iconPosition === 'after' && React.createElement(slots.icon, __assign({}, slotProps.icon))));
+  var _a = getSlots(state, ['root', 'icon']),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  var iconOnly = state.iconOnly,
+      iconPosition = state.iconPosition;
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), iconPosition !== 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), !iconOnly && state.root.children, iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
 };
 //# sourceMappingURL=renderButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderButton.js","sourceRoot":"../src/","sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAkB;IACvC,IAAA,0CAA4D,EAA1D,gBAAK,EAAE,wBAAmD,CAAC;IAC9C,IAAb,YAAY,CAAC,iCAAY,EAAE,yBAAQ,CAAW;IAEtD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI;QAE3B,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,EAAI;QAC9D,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,eAAK,SAAS,CAAC,QAAQ,EAAI;QACvD,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,EAAI,CACpD,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ButtonState } from './Button.types';\nimport { buttonShorthandProps } from './useButton';\n\n/**\n * Define the render function. Given the state of a button, renders it.\n */\nexport const renderButton = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots(state, buttonShorthandProps);\n  const { /*loading,*/ iconPosition, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*{loading && <slots.loader {...slotProps.loader} />}*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && <slots.children {...slotProps.children} />}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,QAAQ,CAAc,KAAd,EAAqB,CAAC,MAAD,EAAS,MAAT,CAArB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAR;AAAA,MAAU,YAAY,GAAK,KAAK,CAAV,YAAtB;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAH/B,CADF;AAOD,CAXM","sourceRoot":""}

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { ButtonProps, ButtonState } from './Button.types';
+import type { ButtonProps, ButtonState } from './Button.types';
 /**
- * Consts listing which props are shorthand props.
+ * 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 buttonShorthandProps: string[];
-/**
- * Given user props, returns state and render function for a Button.
- */
-export declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;
+export declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;

package/lib/components/Button/useButton.js

@@ -1,27 +1,53 @@
-import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
-import { useButtonState } from './useButtonState';
+import { useARIAButton } from '@fluentui/react-aria';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
- * Consts listing which props are shorthand props.
+ * 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 var buttonShorthandProps = ['icon', 'children'];
-var mergeProps = makeMergeProps({ deepMerge: buttonShorthandProps });
-/**
- * Given user props, returns state and render function for a Button.
- */
-export var useButton = function (props, ref, defaultProps) {
-    // Ensure that the `ref` prop can be used by other things (like useFocusRects) to refer to the root.
-    // NOTE: We are assuming refs should not mutate to undefined. Either they are passed or not.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var resolvedRef = ref || React.useRef();
-    var state = mergeProps({
-        ref: resolvedRef,
-        as: 'button',
-        icon: { as: 'span' },
-        content: { as: 'span', children: props.children },
-        loader: { as: 'span' },
-    }, defaultProps, resolveShorthandProps(props, buttonShorthandProps));
-    useButtonState(state);
-    return state;
+
+export var useButton = function (props, ref) {
+  var appearance = props.appearance,
+      as = props.as,
+      _a = props.block,
+      block = _a === void 0 ? false : _a,
+      _b = props.disabled,
+      disabled = _b === void 0 ? false : _b,
+      _c = props.disabledFocusable,
+      disabledFocusable = _c === void 0 ? false : _c,
+      icon = props.icon,
+      _d = props.iconPosition,
+      iconPosition = _d === void 0 ? 'before' : _d,
+      _e = props.shape,
+      shape = _e === void 0 ? 'rounded' : _e,
+      _f = props.size,
+      size = _f === void 0 ? 'medium' : _f;
+  var iconShorthand = resolveShorthand(icon);
+  return {
+    // Props passed at the top-level
+    appearance: appearance,
+    block: block,
+    disabled: disabled,
+    disabledFocusable: disabledFocusable,
+    iconPosition: iconPosition,
+    shape: shape,
+    size: 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: getNativeElementProps(as || 'button', useARIAButton(props, {
+      required: true,
+      defaultProps: {
+        // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>
+        ref: ref,
+        type: 'button'
+      }
+    })),
+    icon: iconShorthand
+  };
 };
 //# sourceMappingURL=useButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useButton.js","sourceRoot":"../src/","sources":["components/Button/useButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;GAEG;AACH,MAAM,CAAC,IAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAEzD,IAAM,UAAU,GAAG,cAAc,CAAc,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAkB,EAAE,GAA2B,EAAE,YAA0B;IACnG,oGAAoG;IACpG,4FAA4F;IAC5F,sDAAsD;IACtD,IAAM,WAAW,GAAG,GAAG,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;IAC1C,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,WAAW;QAChB,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;QACpB,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;QACjD,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;KACvB,EACD,YAAY,EACZ,qBAAqB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CACnD,CAAC;IAEF,cAAc,CAAC,KAAK,CAAC,CAAC;IAEtB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonState } from './Button.types';\nimport { useButtonState } from './useButtonState';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandProps = ['icon', 'children'];\n\nconst mergeProps = makeMergeProps<ButtonState>({ deepMerge: buttonShorthandProps });\n\n/**\n * Given user props, returns state and render function for a Button.\n */\nexport const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps): ButtonState => {\n  // Ensure that the `ref` prop can be used by other things (like useFocusRects) to refer to the root.\n  // NOTE: We are assuming refs should not mutate to undefined. Either they are passed or not.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const resolvedRef = ref || React.useRef();\n  const state = mergeProps(\n    {\n      ref: resolvedRef,\n      as: 'button',\n      icon: { as: 'span' },\n      content: { as: 'span', children: props.children },\n      loader: { as: 'span' },\n    },\n    defaultProps,\n    resolveShorthandProps(props, buttonShorthandProps),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"]}
+{"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAA0E;AAE/F,MAAA,UAAU,GASR,KAAK,CATG,UAAV;AAAA,MACA,EAAE,GAQA,KAAK,CARL,EADF;AAAA,MAEA,EAAA,GAOE,KAAK,CAPM,KAFb;AAAA,MAEA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAFb;AAAA,MAGA,EAAA,GAME,KAAK,CANS,QAHhB;AAAA,MAGA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAHhB;AAAA,MAIA,EAAA,GAKE,KAAK,CALkB,iBAJzB;AAAA,MAIA,iBAAiB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAJzB;AAAA,MAKA,IAAI,GAIF,KAAK,CAJH,IALJ;AAAA,MAMA,EAAA,GAGE,KAAK,CAHgB,YANvB;AAAA,MAMA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EANvB;AAAA,MAOA,EAAA,GAEE,KAAK,CAFU,KAPjB;AAAA,MAOA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAH,GAAY,EAPjB;AAAA,MAQA,EAAA,GACE,KAAK,CADQ,IARf;AAAA,MAQA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EARf;AAUF,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,SAAO;AACL;AACA,IAAA,UAAU,EAAA,UAFL;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,QAAQ,EAAA,QAJH;AAKL,IAAA,iBAAiB,EAAA,iBALZ;AAML,IAAA,YAAY,EAAA,YANP;AAOL,IAAA,KAAK,EAAA,KAPA;AAQL,IAAA,IAAI,EAAA,IARC;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,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAC,KAAD,EAAQ;AACnB,MAAA,QAAQ,EAAE,IADS;AAEnB,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE;AAHM;AAFK,KAAR,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CA9CM","sourceRoot":""}

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

@@ -1,4 +1,10 @@
-import { ButtonState, ButtonStyleSelectors, ButtonVariantTokens } from './Button.types';
-import { Theme } from '@fluentui/react-theme';
-export declare const makeButtonTokens: (theme: Theme) => ButtonVariantTokens;
-export declare const useButtonStyles: (state: ButtonState, selectors: ButtonStyleSelectors) => void;
+import type { ButtonState } from './Button.types';
+export declare const buttonSpacing: {
+    smallest: string;
+    smaller: string;
+    small: string;
+    medium: string;
+    large: string;
+    larger: string;
+};
+export declare const useButtonStyles: (state: ButtonState) => ButtonState;