Component hooks: return only state, render function to be imported se…

…parately (#15486)

* Fixing button hooks to simply return the button state and not the state + render function.

* updating readme.

* Change files

* updating button changes.

* Updating avatar and badge to not return render method.

* Updating the compound button.

* Change files

* exporting renderButton.. oops!

* Updating typings.

* Update README.md

* More updates.

change/@fluentui-react-avatar-2020-10-13-12-47-23-fix-button-hooks.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Updating useStatus and useAvatar to return state only, exporting render functions separately.",
+  "packageName": "@fluentui/react-avatar",
+  "email": "dzearing@hotmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-13T19:47:23.741Z"
+}

change/@fluentui-react-button-2020-10-12-18-23-32-fix-button-hooks.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Updating button hooks to return state only; render function should be imported separately.",
+  "packageName": "@fluentui/react-button",
+  "email": "dzearing@hotmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-13T01:23:22.018Z"
+}

change/@fluentui-react-compose-2020-10-12-18-23-32-fix-button-hooks.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Updating the README example in compose/next.",
+  "packageName": "@fluentui/react-compose",
+  "email": "dzearing@hotmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-13T01:23:32.010Z"
+}

packages/react-avatar/src/components/Avatar/Avatar.tsx

@@ -6,11 +6,12 @@ import { useInlineTokens } from '@fluentui/react-theme-provider';
 import { useFocusRects, nullRender } from '@uifabric/utilities';
 import * as classes from './Avatar.scss';
 import { Badge } from '../Badge/Badge';
+import { renderAvatar } from './renderAvatar';
 
 const useAvatarClasses = makeClasses(classes);
 
 export const Avatar = React.forwardRef((props: AvatarProps, ref: React.Ref<HTMLElement>) => {
-  const { state, render } = useAvatar(props, ref, {
+  const state = useAvatar(props, ref, {
     badge: { as: props.badge ? Badge : nullRender },
   });
 
@@ -19,7 +20,7 @@ export const Avatar = React.forwardRef((props: AvatarProps, ref: React.Ref<HTMLE
   useFocusRects(state.ref);
   useInlineTokens(state, '--avatar');
 
-  return render(state);
+  return renderAvatar(state);
 });
 
 Avatar.displayName = 'Avatar';

packages/react-avatar/src/components/Avatar/index.ts

@@ -1,3 +1,4 @@
 export * from './Avatar.types';
-export * from './useAvatar';
 export * from './Avatar';
+export * from './renderAvatar';
+export * from './useAvatar';

packages/react-avatar/src/components/Avatar/renderAvatar.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-compose/lib/next/index';
+import { AvatarState } from './Avatar.types';
+import { avatarShorthandProps } from './useAvatar';
+
+export const renderAvatar = (state: AvatarState) => {
+  const { slots, slotProps } = getSlots(state, avatarShorthandProps);
+  return (
+    <slots.root {...slotProps.root}>
+      <slots.label {...slotProps.label} />
+      <slots.image {...slotProps.image} />
+      <slots.badge {...slotProps.badge} />
+    </slots.root>
+  );
+};

packages/react-avatar/src/components/Avatar/useAvatar.tsx

@@ -1,25 +1,13 @@
 import * as React from 'react';
-import { makeMergeProps, getSlots, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { AvatarProps, AvatarState, defaultAvatarSize } from './Avatar.types';
+import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index';
+import { AvatarProps, defaultAvatarSize } from './Avatar.types';
 import { calcAvatarStyleProps } from './calcAvatarStyleProps';
 import { useMergedRefs } from '@uifabric/react-hooks';
 import { getInitials as defaultGetInitials, nullRender } from '@uifabric/utilities';
 import { Image } from '../Image/index';
 import { ContactIcon as DefaultAvatarIcon } from '@fluentui/react-icons';
 
-const avatarShorthandProps: (keyof AvatarProps)[] = ['label', 'image', 'badge'];
-
-export const renderAvatar = (state: AvatarState) => {
-  const { slots, slotProps } = getSlots(state, avatarShorthandProps);
-
-  return (
-    <slots.root {...slotProps.root}>
-      <slots.label {...slotProps.label} />
-      <slots.image {...slotProps.image} />
-      <slots.badge {...slotProps.badge} />
-    </slots.root>
-  );
-};
+export const avatarShorthandProps: (keyof AvatarProps)[] = ['label', 'image', 'badge'];
 
 const mergeProps = makeMergeProps({ deepMerge: avatarShorthandProps });
 
@@ -63,5 +51,5 @@ export const useAvatar = (props: AvatarProps, ref: React.Ref<HTMLElement>, defau
     state.image = { as: nullRender };
   }
 
-  return { state, render: renderAvatar };
+  return state;
 };

packages/react-avatar/src/components/Badge/Badge.tsx

@@ -4,17 +4,18 @@ import { useInlineTokens } from '@fluentui/react-theme-provider';
 import { useBadge } from './useBadge';
 import { BadgeProps } from './Badge.types';
 import * as classes from './Badge.scss';
+import { renderBadge } from './renderBadge';
 
 // Create a hook to resolve classnames.
 export const useBadgeClasses = makeClasses(classes);
 
 export const Badge = React.forwardRef((props: BadgeProps, ref: React.Ref<HTMLElement>) => {
-  const { render, state } = useBadge(props, ref);
+  const state = useBadge(props, ref);
 
   useBadgeClasses(state);
   useInlineTokens(state, '--badge');
 
-  return render(state);
+  return renderBadge(state);
 });
 
 Badge.displayName = 'Badge';

packages/react-avatar/src/components/Badge/index.ts

@@ -1,3 +1,5 @@
 export * from './Badge.types';
-export * from './useBadge';
 export * from './Badge';
+export * from './renderBadge';
+export * from './useBadge';
+export * from './useBadge';

packages/react-avatar/src/components/Badge/renderBadge.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { BadgeState } from './Badge.types';
+import { getSlots } from '@fluentui/react-compose/lib/next/index';
+import { badgeShorthandProps } from './useBadge';
+
+export const renderBadge = (state: BadgeState) => {
+  const { slots, slotProps } = getSlots(state, badgeShorthandProps);
+  return (
+    <slots.root {...slotProps.root}>
+      <slots.icon {...slotProps.icon} />
+    </slots.root>
+  );
+};

packages/react-avatar/src/components/Badge/useBadge.tsx

@@ -1,20 +1,10 @@
 import * as React from 'react';
-import { BadgeProps, BadgeState } from './Badge.types';
-import { getSlots, resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index';
+import { BadgeProps } from './Badge.types';
+import { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index';
 import { useMergedRefs } from '@uifabric/react-hooks';
 
 export const badgeShorthandProps: (keyof BadgeProps)[] = ['icon'];
 
-export const renderBadge = (state: BadgeState) => {
-  const { slots, slotProps } = getSlots(state, badgeShorthandProps);
-
-  return (
-    <slots.root {...slotProps.root}>
-      <slots.icon {...slotProps.icon} />
-    </slots.root>
-  );
-};
-
 const mergeProps = makeMergeProps({ deepMerge: badgeShorthandProps });
 
 export const useBadge = (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps) => {
@@ -32,5 +22,5 @@ export const useBadge = (props: BadgeProps, ref: React.Ref<HTMLElement>, default
     },
   );
 
-  return { state, render: renderBadge };
+  return state;
 };

packages/react-avatar/src/components/Image/index.tsx

@@ -1,3 +1,4 @@
 export * from './Image.types';
-export * from './useImage';
 export * from './Image';
+export * from './renderImage';
+export * from './useImage';

packages/react-avatar/src/components/Image/renderImage.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ImageState } from './Image.types';
+import { getSlots } from '@fluentui/react-compose/lib/next/index';
+
+export const renderImage = (state: ImageState) => {
+  const { slots, slotProps } = getSlots(state);
+  return <slots.root {...slotProps.root} />;
+};

packages/react-avatar/src/components/Image/useImage.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { ImageProps, ImageState } from './Image.types';
-import { getSlots, makeMergeProps } from '@fluentui/react-compose/lib/next/index';
-
-export const renderImage = (state: ImageState) => {
-  const { slots, slotProps } = getSlots(state);
-
-  return <slots.root {...slotProps.root} />;
-};
+import { makeMergeProps } from '@fluentui/react-compose/lib/next/index';
+import { renderImage } from './renderImage';
 
 const mergeProps = makeMergeProps<ImageState>();
 

packages/react-button/etc/react-button.api.md

@@ -205,6 +205,22 @@ export interface MenuButtonState extends MenuButtonProps, Omit<ButtonState, 'ico
 // @public (undocumented)
 export type MenuButtonTokens = ButtonTokens;
 
+// @public
+const renderButton: (state: ButtonState) => JSX.Element;
+
+export { renderButton }
+
+export { renderButton as renderToggleButton }
+
+// @public
+export const renderCompoundButton: (state: CompoundButtonState) => JSX.Element;
+
+// @public
+export const renderMenuButton: (state: MenuButtonState) => JSX.Element;
+
+// @public
+export const renderSplitButton: (state: SplitButtonState) => JSX.Element;
+
 // @public (undocumented)
 export const SplitButton: React.ForwardRefExoticComponent<Pick<SplitButtonProps, string | number> & React.RefAttributes<HTMLElement>>;
 
@@ -241,10 +257,7 @@ export interface ToggleButtonState extends ToggleButtonProps {
 }
 
 // @public
-export const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => {
-    state: Record<string, any>;
-    render: (state: import("./Button.types").ButtonState) => JSX.Element;
-};
+export const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => Record<string, any>;
 
 // @public (undocumented)
 export const useButtonClasses: (state: ButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
@@ -256,10 +269,7 @@ export const useButtonState: (draftState: ButtonState) => void;
 export const useChecked: <TDraftState extends CheckedState>(draftState: TDraftState) => void;
 
 // @public
-export const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => {
-    state: Record<string, any>;
-    render: (state: import("./CompoundButton.types").CompoundButtonState) => JSX.Element;
-};
+export const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => Record<string, any>;
 
 // @public (undocumented)
 export const useCompoundButtonClasses: (state: CompoundButtonState) => void;
@@ -268,10 +278,7 @@ export const useCompoundButtonClasses: (state: CompoundButtonState) => void;
 export const useExpanded: <TDraftState extends ExpandedState>(draftState: TDraftState) => void;
 
 // @public
-export const useMenuButton: (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => {
-    state: MenuButtonState;
-    render: (state: MenuButtonState) => JSX.Element;
-};
+export const useMenuButton: (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => MenuButtonState;
 
 // @public (undocumented)
 export const useMenuButtonClasses: (state: MenuButtonState) => void;
@@ -280,19 +287,13 @@ export const useMenuButtonClasses: (state: MenuButtonState) => void;
 export const useMenuButtonState: (state: MenuButtonState) => void;
 
 // @public
-export const useSplitButton: (props: SplitButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: SplitButtonProps | undefined) => {
-    state: SplitButtonState;
-    render: (state: SplitButtonState) => JSX.Element;
-};
+export const useSplitButton: (props: SplitButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: SplitButtonProps | undefined) => SplitButtonState;
 
 // @public (undocumented)
 export const useSplitButtonClasses: (state: {}, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
 
 // @public (undocumented)
-export const useToggleButton: (props: ToggleButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => {
-    state: Record<string, any>;
-    render: (state: import("../Button").ButtonState) => JSX.Element;
-};
+export const useToggleButton: (props: ToggleButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState;
 
 // @public (undocumented)
 export const useToggleButtonBaseClasses: (state: ToggleButtonState, theme?: import("@fluentui/react-theme-provider").Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;

packages/react-button/src/components/Button/Button.tsx

@@ -3,17 +3,18 @@ import { useButton } from './useButton';
 import { ButtonProps } from './Button.types';
 import { useInlineTokens } from '@fluentui/react-theme-provider';
 import { useButtonClasses } from './useButtonClasses';
+import { renderButton } from './renderButton';
 
 /**
  * Define a styled Button, using the `useButton` hook.
  */
 export const Button = React.forwardRef<HTMLElement, ButtonProps>((props, ref) => {
-  const { render, state } = useButton(props, ref);
+  const state = useButton(props, ref);
 
   useButtonClasses(state);
   useInlineTokens(state, '--button');
 
-  return render(state);
+  return renderButton(state);
 });
 
 Button.displayName = 'Button';

packages/react-button/src/components/Button/index.ts

@@ -1,5 +1,6 @@
 export * from './Button.types';
-export * from './useButtonClasses';
+export * from './Button';
+export * from './renderButton';
 export * from './useButton';
+export * from './useButtonClasses';
 export * from './useButtonState';
-export * from './Button';

packages/react-button/src/components/Button/useButton.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index';
 import { ButtonProps } from './Button.types';
 import { useButtonState } from './useButtonState';
-import { renderButton } from './renderButton';
 
 /**
  * Consts listing which props are shorthand props.
@@ -33,5 +32,5 @@ export const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defau
 
   useButtonState(state);
 
-  return { state, render: renderButton };
+  return state;
 };

packages/react-button/src/components/CompoundButton/CompoundButton.tsx

@@ -3,17 +3,18 @@ import { useInlineTokens } from '@fluentui/react-theme-provider';
 import { CompoundButtonProps } from './CompoundButton.types';
 import { useCompoundButton } from './useCompoundButton';
 import { useCompoundButtonClasses } from './useCompoundButtonClasses';
+import { renderCompoundButton } from './renderCompoundButton';
 
 /**
  * Define a styled Button, using the `useCompoundButton` hook.
  */
 export const CompoundButton = React.forwardRef<HTMLElement, CompoundButtonProps>((props, ref) => {
-  const { render, state } = useCompoundButton(props, ref);
+  const state = useCompoundButton(props, ref);
 
   useCompoundButtonClasses(state);
   useInlineTokens(state, '--button');
 
-  return render(state);
+  return renderCompoundButton(state);
 });
 
 CompoundButton.displayName = 'CompoundButton';

packages/react-button/src/components/CompoundButton/index.ts

@@ -1,4 +1,5 @@
-export * from './CompoundButton';
 export * from './CompoundButton.types';
+export * from './CompoundButton';
+export * from './renderCompoundButton';
 export * from './useCompoundButton';
 export * from './useCompoundButtonClasses';

packages/react-button/src/components/CompoundButton/useCompoundButton.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index';
 import { CompoundButtonProps } from './CompoundButton.types';
 import { useButtonState } from '../Button/useButtonState';
-import { renderCompoundButton } from './renderCompoundButton';
 
 /**
  * Consts listing which props are shorthand props.
@@ -41,5 +40,5 @@ export const useCompoundButton = (
 
   useButtonState(state);
 
-  return { state, render: renderCompoundButton };
+  return state;
 };

packages/react-button/src/components/MenuButton/MenuButton.tsx

@@ -4,9 +4,10 @@ import { useInlineTokens } from '@fluentui/react-theme-provider';
 import { useMenuButton } from './useMenuButton';
 import { MenuButtonProps } from './MenuButton.types';
 import { useMenuButtonClasses } from './useMenuButtonClasses';
+import { renderMenuButton } from './renderMenuButton';
 
 export const MenuButton = React.forwardRef<HTMLElement, MenuButtonProps>((props, ref) => {
-  const { state, render } = useMenuButton(props, ref, {
+  const state = useMenuButton(props, ref, {
     menuIcon: { as: ChevronDownIcon },
   });
 
@@ -21,7 +22,7 @@ export const MenuButton = React.forwardRef<HTMLElement, MenuButtonProps>((props,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   useInlineTokens(state as any, '--button');
 
-  return render(state);
+  return renderMenuButton(state);
 });
 
 MenuButton.displayName = 'MenuButton';