DismissButton based on Button

Author: compulim

packages/api-middleware/src/PolymiddlewareComposer.tsx

@@ -15,12 +15,12 @@ import {
 } from 'valibot';
 
 import { ActivityPolymiddlewareProvider, extractActivityEnhancer } from './activityPolymiddleware';
+import { ButtonPolymiddlewareProvider, extractButtonEnhancer } from './buttonPolymiddleware';
 import {
   ChatLauncherButtonPolymiddlewareProvider,
   extractChatLauncherButtonEnhancer
 } from './chatLauncherButtonPolymiddleware';
 import { ErrorBoxPolymiddlewareProvider, extractErrorBoxEnhancer } from './errorBoxPolymiddleware';
-import { IconButtonPolymiddlewareProvider, extractIconButtonEnhancer } from './iconButtonPolymiddleware';
 import { PopoverPolymiddlewareProvider, extractPopoverEnhancer } from './popoverPolymiddleware';
 import { Polymiddleware } from './types/Polymiddleware';
 
@@ -55,6 +55,21 @@ function PolymiddlewareComposer(props: PolymiddlewareComposerProps) {
 
   const activityPolymiddleware = useMemo(() => activityEnhancers.map(enhancer => () => enhancer), [activityEnhancers]);
 
+  const buttonEnhancers = useMemoWithPrevious<ReturnType<typeof extractButtonEnhancer>>(
+    (prevButtonEnhancers = []) => {
+      const buttonEnhancers = extractButtonEnhancer(polymiddleware);
+
+      // Checks for array equality, return previous version if nothing has changed.
+      return prevButtonEnhancers.length === buttonEnhancers.length &&
+        buttonEnhancers.every((middleware, index) => Object.is(middleware, prevButtonEnhancers.at(index)))
+        ? prevButtonEnhancers
+        : buttonEnhancers;
+    },
+    [polymiddleware]
+  );
+
+  const buttonPolymiddleware = useMemo(() => buttonEnhancers.map(enhancer => () => enhancer), [buttonEnhancers]);
+
   const chatLauncherButtonEnhancers = useMemoWithPrevious<ReturnType<typeof extractChatLauncherButtonEnhancer>>(
     (prevChatLauncherButtonEnhancers = []) => {
       const chatLauncherButtonEnhancers = extractChatLauncherButtonEnhancer(polymiddleware);
@@ -90,24 +105,6 @@ function PolymiddlewareComposer(props: PolymiddlewareComposerProps) {
 
   const errorBoxPolymiddleware = useMemo(() => errorBoxEnhancers.map(enhancer => () => enhancer), [errorBoxEnhancers]);
 
-  const iconButtonEnhancers = useMemoWithPrevious<ReturnType<typeof extractIconButtonEnhancer>>(
-    (prevIconButtonEnhancers = []) => {
-      const iconButtonEnhancers = extractIconButtonEnhancer(polymiddleware);
-
-      // Checks for array equality, return previous version if nothing has changed.
-      return prevIconButtonEnhancers.length === iconButtonEnhancers.length &&
-        iconButtonEnhancers.every((middleware, index) => Object.is(middleware, prevIconButtonEnhancers.at(index)))
-        ? prevIconButtonEnhancers
-        : iconButtonEnhancers;
-    },
-    [polymiddleware]
-  );
-
-  const iconButtonPolymiddleware = useMemo(
-    () => iconButtonEnhancers.map(enhancer => () => enhancer),
-    [iconButtonEnhancers]
-  );
-
   const popoverEnhancers = useMemoWithPrevious<ReturnType<typeof extractPopoverEnhancer>>(
     (prevPopoverEnhancers = []) => {
       const popoverEnhancers = extractPopoverEnhancer(polymiddleware);
@@ -134,13 +131,13 @@ function PolymiddlewareComposer(props: PolymiddlewareComposerProps) {
 
   return (
     <ActivityPolymiddlewareProvider middleware={activityPolymiddleware}>
-      <ChatLauncherButtonPolymiddlewareProvider middleware={chatLauncherButtonPolymiddleware}>
-        <ErrorBoxPolymiddlewareProvider middleware={errorBoxPolymiddleware}>
-          <IconButtonPolymiddlewareProvider middleware={iconButtonPolymiddleware}>
+      <ButtonPolymiddlewareProvider middleware={buttonPolymiddleware}>
+        <ChatLauncherButtonPolymiddlewareProvider middleware={chatLauncherButtonPolymiddleware}>
+          <ErrorBoxPolymiddlewareProvider middleware={errorBoxPolymiddleware}>
             <PopoverPolymiddlewareProvider middleware={popoverPolymiddleware}>{children}</PopoverPolymiddlewareProvider>
-          </IconButtonPolymiddlewareProvider>
-        </ErrorBoxPolymiddlewareProvider>
-      </ChatLauncherButtonPolymiddlewareProvider>
+          </ErrorBoxPolymiddlewareProvider>
+        </ChatLauncherButtonPolymiddlewareProvider>
+      </ButtonPolymiddlewareProvider>
     </ActivityPolymiddlewareProvider>
   );
 }

packages/api-middleware/src/buttonPolymiddleware.tsx

@@ -0,0 +1,126 @@
+import { forwardedRef, reactNode, refObject, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import React, { forwardRef, memo, useMemo, type ForwardedRef, type ReactNode, type RefObject } from 'react';
+import { function_, object, optional, picklist, pipe, readonly, string, type InferInput } from 'valibot';
+
+import createErrorBoundaryMiddleware from './private/createErrorBoundaryMiddleware';
+import templatePolymiddleware, {
+  type InferHandler,
+  type InferHandlerResult,
+  type InferMiddleware,
+  type InferProps,
+  type InferProviderProps,
+  type InferRenderer,
+  type InferRequest
+} from './private/templatePolymiddleware';
+
+const {
+  createMiddleware: createButtonPolymiddleware,
+  extractEnhancer: extractButtonEnhancer,
+  Provider,
+  Proxy,
+  reactComponent: buttonComponent,
+  useBuildRenderCallback: useBuildRenderButtonCallback
+} = templatePolymiddleware<
+  {
+    readonly appearance?: 'elevated' | 'flat' | undefined;
+    readonly size?: 'hero' | 'normal' | undefined;
+  },
+  {
+    readonly children?: ReactNode | undefined;
+    readonly className?: string | undefined;
+    readonly forwardedRef?: ForwardedRef<HTMLElement> | undefined;
+    readonly onClick?: (() => void) | undefined;
+    readonly popoverTargetAction?: 'hide' | 'show' | 'toggle' | undefined;
+    readonly popoverTargetRef?: RefObject<Element> | undefined;
+  }
+>('Button');
+
+type ButtonPolymiddleware = InferMiddleware<typeof Provider>;
+type ButtonPolymiddlewareHandler = InferHandler<typeof Provider>;
+type ButtonPolymiddlewareHandlerResult = InferHandlerResult<typeof Provider>;
+type ButtonPolymiddlewareProps = InferProps<typeof Provider>;
+type ButtonPolymiddlewareRenderer = InferRenderer<typeof Provider>;
+type ButtonPolymiddlewareRequest = InferRequest<typeof Provider>;
+type ButtonPolymiddlewareProviderProps = InferProviderProps<typeof Provider>;
+
+const buttonPolymiddlewareProxyPropsSchema = pipe(
+  object({
+    appearance: optional(picklist(['elevated', 'flat'])),
+    children: optional(reactNode()),
+    className: optional(string()),
+    forwardedRef: optional(forwardedRef<HTMLElement>()),
+    onClick: optional(function_()),
+    popoverTargetAction: optional(picklist(['hide', 'show', 'toggle'])),
+    popoverTargetRef: optional(refObject<Element>()),
+    size: optional(picklist(['hero', 'normal']))
+  }),
+  readonly()
+);
+
+type ButtonPolymiddlewareProxyProps = Readonly<InferInput<typeof buttonPolymiddlewareProxyPropsSchema>>;
+
+// A friendlier version than the organic <Proxy>.
+const ButtonPolymiddlewareProxy = memo(
+  forwardRef(function ButtonPolymiddlewareProxy(props: ButtonPolymiddlewareProxyProps, ref: ForwardedRef<HTMLElement>) {
+    const { appearance, children, className, onClick, popoverTargetAction, popoverTargetRef, size } = validateProps(
+      buttonPolymiddlewareProxyPropsSchema,
+      props
+    );
+
+    const request = useMemo(() => Object.freeze({ appearance, size }), [appearance, size]);
+
+    return (
+      <Proxy
+        className={className}
+        forwardedRef={ref}
+        onClick={onClick}
+        popoverTargetAction={popoverTargetAction}
+        popoverTargetRef={popoverTargetRef}
+        request={request}
+      >
+        {children}
+      </Proxy>
+    );
+  })
+);
+
+const ButtonPolymiddlewareProvider = memo(function ButtonPolymiddlewareProvider({
+  children,
+  middleware
+}: ButtonPolymiddlewareProviderProps) {
+  // Decorates middleware with <ErrorBoundary>.
+  const middlewareWithErrorBoundary = useMemo(
+    () =>
+      Object.freeze([
+        // TODO: [P1] Should we simplify this middleware signature and allow error boundary middleware to run on every type of middleware?
+        //            (init: any) => next => (request: undefined) => reactComponentForAll()
+        //            We can't do it today because we have sanity check that prevent `reactComponent()` from different middleware cross-polluting each other.
+        createErrorBoundaryMiddleware({
+          createMiddleware: createButtonPolymiddleware,
+          reactComponent: buttonComponent,
+          where: 'Button polymiddleware'
+        }),
+        ...middleware
+      ]),
+    [middleware]
+  );
+
+  return <Provider middleware={middlewareWithErrorBoundary}>{children}</Provider>;
+});
+
+export {
+  buttonComponent,
+  ButtonPolymiddlewareProvider,
+  ButtonPolymiddlewareProxy,
+  createButtonPolymiddleware,
+  extractButtonEnhancer,
+  useBuildRenderButtonCallback,
+  type ButtonPolymiddleware,
+  type ButtonPolymiddlewareHandler,
+  type ButtonPolymiddlewareHandlerResult,
+  type ButtonPolymiddlewareProps,
+  type ButtonPolymiddlewareProviderProps,
+  type ButtonPolymiddlewareProxyProps,
+  type ButtonPolymiddlewareRenderer,
+  type ButtonPolymiddlewareRequest
+};

packages/api-middleware/src/iconButtonPolymiddleware.tsx

@@ -12,6 +12,20 @@ export {
   type ActivityPolymiddlewareRequest
 } from './activityPolymiddleware';
 
+export {
+  buttonComponent,
+  ButtonPolymiddlewareProxy,
+  createButtonPolymiddleware,
+  useBuildRenderButtonCallback,
+  type ButtonPolymiddleware,
+  type ButtonPolymiddlewareHandler,
+  type ButtonPolymiddlewareHandlerResult,
+  type ButtonPolymiddlewareProps,
+  type ButtonPolymiddlewareProxyProps,
+  type ButtonPolymiddlewareRenderer,
+  type ButtonPolymiddlewareRequest
+} from './buttonPolymiddleware';
+
 export {
   chatLauncherButtonComponent,
   ChatLauncherButtonPolymiddlewareProxy,
@@ -40,20 +54,6 @@ export {
   type ErrorBoxPolymiddlewareRequest
 } from './errorBoxPolymiddleware';
 
-export {
-  createIconButtonPolymiddleware,
-  iconButtonComponent,
-  IconButtonPolymiddlewareProxy,
-  useBuildRenderIconButtonCallback,
-  type IconButtonPolymiddleware,
-  type IconButtonPolymiddlewareHandler,
-  type IconButtonPolymiddlewareHandlerResult,
-  type IconButtonPolymiddlewareProps,
-  type IconButtonPolymiddlewareProxyProps,
-  type IconButtonPolymiddlewareRenderer,
-  type IconButtonPolymiddlewareRequest
-} from './iconButtonPolymiddleware';
-
 export {
   createPopoverPolymiddleware,
   popoverComponent,

packages/api-middleware/src/index.ts

@@ -1,12 +1,12 @@
 import { type ActivityPolymiddleware } from '../activityPolymiddleware';
+import { type ButtonPolymiddleware } from '../buttonPolymiddleware';
 import { type ChatLauncherButtonPolymiddleware } from '../chatLauncherButtonPolymiddleware';
 import { type ErrorBoxPolymiddleware } from '../errorBoxPolymiddleware';
-import { type IconButtonPolymiddleware } from '../iconButtonPolymiddleware';
 import { type PopoverPolymiddleware } from '../popoverPolymiddleware';
 
 export type Polymiddleware =
   | ActivityPolymiddleware
+  | ButtonPolymiddleware
   | ChatLauncherButtonPolymiddleware
   | ErrorBoxPolymiddleware
-  | IconButtonPolymiddleware
   | PopoverPolymiddleware;