botframework-webchat-component 4.18.1 → 4.19.0

package/src/decorator/private/WebChatDecorator.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable prefer-arrow-callback */
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import {
+  createActivityBorderMiddleware,
+  DecoratorComposer,
+  type DecoratorMiddleware
+} from 'botframework-webchat-api/decorator.js';
+import React, { Fragment, memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import DecoratorStylesheet from '../stylesheet/DecoratorStylesheet';
+import BorderFlair from './BorderFlair';
+import BorderLoader from './BorderLoader';
+
+const middleware: readonly DecoratorMiddleware[] = Object.freeze([
+  createActivityBorderMiddleware(function FluentBorderFlair({ request, Next, ...props }) {
+    if (request.modality.has('audio') && request.from === 'bot') {
+      return (
+        <BorderFlair showFlair={true}>
+          <Next {...props} />
+        </BorderFlair>
+      );
+    }
+    return <Next {...props} />;
+  }),
+  createActivityBorderMiddleware(function BorderFlairDecorator({ request, Next, ...props }) {
+    return (
+      <BorderFlair showFlair={props.showFlair ?? request.livestreamingState === 'completing'}>
+        <Next {...props} showFlair={false} />
+      </BorderFlair>
+    );
+  }),
+  createActivityBorderMiddleware(function BorderLoaderDecorator({ request, Next, ...props }) {
+    return (
+      <BorderLoader showLoader={props.showLoader ?? request.livestreamingState === 'preparing'}>
+        <Next {...props} showLoader={false} />
+      </BorderLoader>
+    );
+  })
+]);
+
+const webChatDecoratorPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    nonce: optional(string())
+  }),
+  readonly()
+);
+
+type WebChatDecoratorProps = InferInput<typeof webChatDecoratorPropsSchema>;
+
+function WebChatDecorator(props: WebChatDecoratorProps) {
+  const { children, nonce } = validateProps(webChatDecoratorPropsSchema, props);
+
+  return (
+    <Fragment>
+      <DecoratorStylesheet nonce={nonce} />
+      <DecoratorComposer middleware={middleware}>{children}</DecoratorComposer>
+    </Fragment>
+  );
+}
+
+export default memo(WebChatDecorator);
+export { webChatDecoratorPropsSchema, type WebChatDecoratorProps };

package/src/decorator/stylesheet/DecoratorStylesheet.tsx

@@ -0,0 +1,33 @@
+// TODO: [P2] This component can be replaced by `bindProps`.
+import { InjectStyleElements } from '@msinternal/botframework-webchat-styles/react';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyleOptions } from 'botframework-webchat-api/hook.js';
+import React, { memo, type FunctionComponent } from 'react';
+import { never, object, optional, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';
+
+import createDecoratorStyleElements from './createDecoratorStyleElements';
+
+const decoratorStylesheetPropsSchema = pipe(
+  object({
+    children: optional(never()),
+    nonce: undefinedable(string())
+  }),
+  readonly()
+);
+
+type DecoratorStylesheetProps = InferInput<typeof decoratorStylesheetPropsSchema>;
+
+const styleElements = createDecoratorStyleElements('component/decorator');
+
+function DecoratorStylesheet(props: DecoratorStylesheetProps) {
+  const { nonce } = validateProps(decoratorStylesheetPropsSchema, props);
+
+  const [{ stylesRoot }] = useStyleOptions();
+
+  return <InjectStyleElements at={stylesRoot} nonce={nonce} styleElements={styleElements} />;
+}
+
+DecoratorStylesheet.displayName = 'DecoratorStylesheet';
+
+export default memo(DecoratorStylesheet as FunctionComponent<DecoratorStylesheetProps>);
+export { decoratorStylesheetPropsSchema, type DecoratorStylesheetProps };

package/src/decorator/stylesheet/createDecoratorStyleElements.ts

@@ -0,0 +1,8 @@
+import { makeCreateStyles } from '@msinternal/botframework-webchat-styles';
+
+const decoratorStyleContent = '@--DECORATOR-STYLES-CONTENT--@';
+
+const createDecoratorStyleElements = makeCreateStyles(decoratorStyleContent);
+
+export default createDecoratorStyleElements;
+export { decoratorStyleContent };

package/src/env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@msinternal/botframework-webchat-styles/env" />
+
+// For adding things to `globalThis`, TypeScript need `var`, not `const` or `let`.
+/* eslint-disable no-var */
+declare global {
+  var WEB_CHAT_BUILD_INFO_BUILD_TOOL: string | undefined;
+  var WEB_CHAT_BUILD_INFO_MODULE_FORMAT: string | undefined;
+  var WEB_CHAT_BUILD_INFO_VERSION: string | undefined;
+}
+
+export {};

package/src/hooks/RenderMarkdown.module.css

@@ -0,0 +1,102 @@
+:global(.webchat) .render-markdown {
+  display: contents;
+
+  /* Adaptive Cards context styles */
+  &.render-markdown--adaptive-cards > *:first-child {
+    margin-block-start: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+
+  &.render-markdown--adaptive-cards > *:last-child {
+    margin-block-end: 0;
+  }
+
+  /* Message activity context styles */
+  &.render-markdown--message-activity > *:first-child {
+    margin-block-start: 0;
+  }
+
+  &.render-markdown--message-activity > *:last-child {
+    margin-block-end: 0;
+  }
+
+  /* External link icon */
+  :global(.render-markdown__external-link-icon) {
+    background-image: var(--webchat__icon-url--external-link);
+    height: 0.75em;
+    margin-inline-start: 0.25em;
+  }
+
+  /* Citation button */
+  :global(.render-markdown__citation) {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    display: inline-block;
+    font-family: unset;
+    font-size: unset;
+    overflow: hidden;
+    padding: 0;
+    text-decoration: underline;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    white-space: nowrap;
+
+    @media (forced-colors: active) {
+      color: LinkText;
+    }
+
+    @media not (forced-colors: active) {
+      color: var(--webchat__color--accent);
+    }
+  }
+
+  /* Pure identifier styles */
+  :global(.render-markdown__pure-identifier) {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    white-space: nowrap;
+
+    &::before {
+      content: '[';
+    }
+
+    &::after {
+      content: ']';
+    }
+  }
+
+  /* Math block styles */
+  [data-math-type='block'] {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-block-end: -4px;
+    outline-offset: 2px;
+    overflow-x: auto;
+    overflow-y: clip;
+    padding-block-end: 4px;
+    scrollbar-width: thin;
+  }
+
+  span[data-math-type='block'] {
+    display: inline-flex;
+  }
+
+  /* Math inline styles */
+  [data-math-type='inline'] {
+    align-items: center;
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  /* Math content wrapper */
+  :is([data-math-type='block'], [data-math-type='inline']) > span {
+    display: contents;
+  }
+}

package/src/hooks/index.ts

@@ -1,3 +1,5 @@
+import { useTransformHTMLContent } from '../providers/HTMLContentTransformCOR/index';
+import useShouldReduceMotion from '../providers/ReducedMotion/useShouldReduceMotion';
 import useDictateAbortable from './useDictateAbortable';
 import useFocus from './useFocus';
 import useMakeThumbnail from './useMakeThumbnail';
@@ -40,9 +42,11 @@ export {
   useSendFiles,
   // We are overwriting the `useSendMessage` hook from bf-wc-api and adding thumbnailing support.
   useSendMessage,
+  useShouldReduceMotion,
   useStyleSet,
   useTextBoxSubmit,
   useTextBoxValue,
+  useTransformHTMLContent,
   useTypingIndicatorVisible,
   useWebSpeechPonyfill
 };

package/src/hooks/internal/UITracker.js

@@ -24,7 +24,7 @@ const Tracker = () => {
     trackDimension('prop:speechSynthesis', !!speechSynthesisCapability + '');
   }, [trackDimension, speechRecognitionCapability, speechSynthesisCapability]);
 
-  return false;
+  return null;
 };
 
 export default Tracker;

package/src/hooks/internal/WebChatUIContext.ts

@@ -3,7 +3,25 @@ import { createContext, type MutableRefObject } from 'react';
 import { type FocusTranscriptInit } from '../../types/internal/FocusTranscriptInit';
 
 export type ContextType = {
-  focusTranscriptCallbacksRef: MutableRefObject<((init: FocusTranscriptInit) => Promise<void>)[]>;
+  focusTranscriptCallbacksRef: MutableRefObject<((init?: FocusTranscriptInit | undefined) => Promise<void>)[]>;
+  nonce: string | undefined;
+
+  // TODO: [P0] Infer the following types.
+  dictateAbortable: any;
+  dispatchScrollPosition: any;
+  dispatchTranscriptFocusByActivityKey: any;
+  internalMarkdownItState: [any];
+  internalRenderMarkdownInline: any;
+  numTranscriptFocusObservers: any;
+  observeScrollPosition: any;
+  observeTranscriptFocus: any;
+  renderMarkdown: any;
+  scrollToCallbacksRef: any;
+  scrollToEndCallbacksRef: any;
+  setDictateAbortable: any;
+  styleSet: any;
+  suggestedActionsAccessKey: any;
+  webSpeechPonyfill: any;
 };
 
 const context = createContext<ContextType>(undefined as ContextType);

package/src/hooks/internal/codeHighlighter/index.ts

@@ -0,0 +1,3 @@
+export { CodeHighlighterComposer, useCodeHighlighter, type HighlightCodeFn } from './private/CodeHighlighterComposer';
+
+export { defaultHighlightCode } from './private/defaultHighlightCode';

package/src/hooks/internal/codeHighlighter/private/CodeHighlighterComposer.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, memo } from 'react';
+
+import createCodeHighlighterComposer from './createCodeHighlighterComposer';
+import { defaultHighlightCode } from './defaultHighlightCode';
+
+export type HighlightCodeFn = (
+  code: string,
+  language?: string | undefined,
+  options?:
+    | {
+        theme: string;
+      }
+    | undefined
+) => string | DocumentFragment;
+
+export type CodeHighlighterContextType = {
+  highlightCode: HighlightCodeFn;
+};
+
+const CodeHighlighterContext = createContext<CodeHighlighterContextType>(
+  Object.freeze({
+    highlightCode: defaultHighlightCode
+  })
+);
+
+export function useCodeHighlighter() {
+  return useContext(CodeHighlighterContext).highlightCode;
+}
+
+export const CodeHighlighterComposer = memo(createCodeHighlighterComposer(CodeHighlighterContext));
+
+CodeHighlighterComposer.displayName = 'CodeHighlighterComposer';

package/src/hooks/internal/codeHighlighter/private/createCodeHighlighterComposer.tsx

@@ -0,0 +1,32 @@
+import React, { type ReactNode, useCallback, useMemo } from 'react';
+
+import { useCodeHighlighter, type CodeHighlighterContextType, type HighlightCodeFn } from './CodeHighlighterComposer';
+
+const createCodeHighlighterComposer =
+  ({ Provider }: React.Context<CodeHighlighterContextType>) =>
+  ({ children, highlightCode }: Readonly<{ children: ReactNode; highlightCode: HighlightCodeFn }>) => {
+    const previousCodeHighlighter = useCodeHighlighter();
+
+    const safeHighlightCode = useCallback<HighlightCodeFn>(
+      (...args) => {
+        try {
+          return highlightCode(...args);
+        } catch (error) {
+          console.warn(`botframework-webchat: Failed to highlight code using ${highlightCode.name}`, error);
+          return previousCodeHighlighter(...args);
+        }
+      },
+      [highlightCode, previousCodeHighlighter]
+    );
+
+    const CodeHighlighterContextValue = useMemo(
+      () => ({
+        highlightCode: safeHighlightCode
+      }),
+      [safeHighlightCode]
+    );
+
+    return <Provider value={CodeHighlighterContextValue}>{children}</Provider>;
+  };
+
+export default createCodeHighlighterComposer;

package/src/hooks/internal/codeHighlighter/private/defaultHighlightCode.tsx

@@ -0,0 +1,22 @@
+import type { HighlightCodeFn } from './CodeHighlighterComposer';
+
+export const defaultHighlightCode: HighlightCodeFn = (source, language) => {
+  try {
+    const fragment = document.createDocumentFragment();
+    const pre = document.createElement('pre');
+    const code = document.createElement('code');
+
+    code.textContent = source;
+
+    // Follow commonmark convention
+    language && code.classList.add(`language-${language}`);
+
+    pre.append(code);
+    fragment.append(pre);
+
+    return fragment;
+  } catch (error) {
+    console.warn(`botframework-webchat: Failed to display code`, error);
+    return '<pre></pre>';
+  }
+};

package/src/hooks/internal/createWaitUntilable.spec.ts

@@ -1,3 +1,5 @@
+/// <reference types="jest" />
+
 import createWaitUntilable, { type WaitUntilable } from './createWaitUntilable';
 
 type Deferred<T> = {
@@ -36,7 +38,7 @@ describe('with no waitUntil()', () => {
 });
 
 describe('With a single waitUntil()', () => {
-  let event: WaitUntilable<{}>;
+  let event: WaitUntilable<any>;
   let getPromise: () => Promise<void>;
   let promise: Promise<void>;
   let deferred: Deferred<void>;
@@ -59,7 +61,7 @@ describe('With a single waitUntil()', () => {
 });
 
 describe('With nested waitUntil()', () => {
-  let event: WaitUntilable<{}>;
+  let event: WaitUntilable<any>;
   let getPromise: () => Promise<void>;
   let promise: Promise<void>;
   let deferred1: Deferred<void>;

package/src/hooks/internal/createWaitUntilable.ts

@@ -1,6 +1,6 @@
 export type WaitUntilable<T> = T & { waitUntil: (promise: Promise<void>) => void };
 
-export default function createWaitUntilable<T extends object>(
+export default function createWaitUntilable<T extends Record<any, any>>(
   object: T
 ): readonly [WaitUntilable<T>, () => Promise<void>] {
   const allPromises: Promise<void>[] = [];

package/src/hooks/internal/private/createOnEventShim.spec.ts

@@ -1,3 +1,5 @@
+/// <reference types="jest" />
+
 import createOnEventShim from './createOnEventShim';
 
 describe('A shimmed event target', () => {

package/src/hooks/internal/styleToEmotionObject/index.ts

@@ -0,0 +1 @@
+export { useStyleToEmotionObject, StyleToEmotionObjectComposer } from './private/StyleToEmotionObjectComposer';

package/src/hooks/internal/styleToEmotionObject/private/StyleToEmotionObjectComposer.tsx

@@ -0,0 +1,20 @@
+import { createContext, createRef, type RefObject, useContext, memo } from 'react';
+import createStyleToEmotionObjectComposer from './createStyleToEmotionObjectComposer';
+
+export type StyleToEmotionObjectContextType = RefObject<(...args: unknown[]) => string>;
+
+const styleToEmotionObjectContext = createContext<StyleToEmotionObjectContextType>(
+  new Proxy(createRef(), {
+    get() {
+      throw new Error('StyleToEmotionObjectContext was used without StyleToEmotionObjectComposer');
+    }
+  })
+);
+
+export function useStyleToEmotionObject() {
+  return useContext(styleToEmotionObjectContext).current;
+}
+
+export const StyleToEmotionObjectComposer = memo(createStyleToEmotionObjectComposer(styleToEmotionObjectContext));
+
+StyleToEmotionObjectComposer.displayName = 'StyleToEmotionObjectComposer';

package/src/hooks/internal/styleToEmotionObject/private/createStyleToEmotionObjectComposer.tsx

@@ -0,0 +1,22 @@
+import React, { type ReactNode, useCallback } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import useEmotion from '../../useEmotion';
+import { type StyleToEmotionObjectContextType } from './StyleToEmotionObjectComposer';
+import { hooks } from 'botframework-webchat-api';
+
+const { useStyleOptions } = hooks;
+
+const createStyleToEmotionObjectComposer =
+  ({ Provider }: React.Context<StyleToEmotionObjectContextType>) =>
+  ({ children, nonce }: Readonly<{ children: ReactNode; nonce: string }>) => {
+    const [{ stylesRoot }] = useStyleOptions();
+
+    const emotion = useEmotion(nonce, stylesRoot);
+    const styleToEmotionObject = useCallback(style => emotion.css(style), [emotion]);
+
+    const styleToEmotionObjectRef = useRefFrom(styleToEmotionObject);
+
+    return <Provider value={styleToEmotionObjectRef}>{styleToEmotionObject && children}</Provider>;
+  };
+
+export default createStyleToEmotionObjectComposer;

package/src/hooks/internal/useEmotion.ts

@@ -0,0 +1,37 @@
+import createEmotion from '@emotion/css/create-instance';
+import { useEffect, useMemo } from 'react';
+import createCSSKey from '../../Utils/createCSSKey';
+
+const sharedEmotionInstances = [];
+
+export default function useEmotion(nonce?: string, container?: Node) {
+  const emotion = useMemo(() => {
+    const sharedEmotion = sharedEmotionInstances.find(
+      ({ sheet }) => sheet.nonce === nonce && sheet.container === container
+    );
+    const emotion = sharedEmotion ?? createEmotion({ container, key: `webchat--css-${createCSSKey()}`, nonce });
+
+    sharedEmotionInstances.push(emotion);
+
+    return emotion;
+  }, [container, nonce]);
+
+  useEffect(
+    () => () => {
+      const index = sharedEmotionInstances.lastIndexOf(emotion);
+
+      // Reduce ref count for the specific emotion instance.
+      ~index && sharedEmotionInstances.splice(index, 1);
+
+      if (!sharedEmotionInstances.includes(emotion) && emotion.sheet?.tags) {
+        // No more hooks use this emotion object, we can clean up the container for stuff we added.
+        for (const child of emotion.sheet.tags) {
+          child.remove();
+        }
+      }
+    },
+    [emotion]
+  );
+
+  return emotion;
+}

package/src/hooks/internal/useFeedbackActions.ts

@@ -0,0 +1,120 @@
+import { getOrgSchemaMessage, WebChatActivity } from 'botframework-webchat-core';
+import { OrgSchemaAction, orgSchemaActionSchema } from 'botframework-webchat-core/org-schema.js';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { parse } from 'valibot';
+import dereferenceBlankNodes from '../../Utils/JSONLinkedData/dereferenceBlankNodes';
+
+export default function useFeedbackActions(initialActivity: WebChatActivity): {
+  actions: readonly OrgSchemaAction[];
+  isCompleted: boolean;
+  markActionAsCompleted: (target: OrgSchemaAction) => void;
+  markActionAsSelected: (target: OrgSchemaAction) => void;
+  selectedAction: OrgSchemaAction;
+} {
+  // We can react to activity changes by throwing away our currentFeedbackActions, but saving some code for now.
+  useEffect(() => {
+    console.warn(
+      'botframework-webchat: useFeedbackActions() is skipping changes made to the activity.',
+      initialActivity
+    );
+  }, [initialActivity]);
+
+  const [actions, setActions] = useState<readonly OrgSchemaAction[]>(() => {
+    try {
+      const graph = dereferenceBlankNodes(initialActivity.entities || []);
+      const messageThing = getOrgSchemaMessage(graph);
+
+      const reactActions = Object.freeze(
+        messageThing?.potentialAction.filter(
+          ({ '@type': type }) => type.includes('LikeAction') || type.includes('DislikeAction')
+        )
+      );
+
+      if (reactActions.length) {
+        return reactActions;
+      }
+
+      const voteActions = Object.freeze(
+        graph
+          .filter(({ type }) => type === 'https://schema.org/VoteAction')
+          .map(action => parse(orgSchemaActionSchema, action))
+      );
+
+      if (voteActions.length) {
+        return voteActions;
+      }
+    } catch {
+      // Intentionally left blank.
+    }
+
+    return Object.freeze([]);
+  });
+
+  const isCompleted = useMemo<boolean>(
+    () => actions.some(action => action.actionStatus[0] === 'CompletedActionStatus'),
+    [actions]
+  );
+
+  const isCompletedRef = useRefFrom(isCompleted);
+
+  const markActionAsSelected = useCallback(
+    (target: OrgSchemaAction) => {
+      if (isCompletedRef.current) {
+        return console.warn(
+          'botframework-webchat internal: useFeedbackActions().markActionAsSelected() must not be called after feedback is completed, ignoring the call.'
+        );
+      }
+
+      setActions(actions =>
+        Object.freeze(
+          actions.map(action =>
+            action === target
+              ? Object.freeze({ ...action, actionStatus: ['ActiveActionStatus'] } satisfies OrgSchemaAction)
+              : action.actionStatus[0] === 'ActiveActionStatus'
+                ? Object.freeze({ ...action, actionStatus: ['PotentialActionStatus'] } satisfies OrgSchemaAction)
+                : action
+          )
+        )
+      );
+    },
+    [isCompletedRef, setActions]
+  );
+
+  const markActionAsCompleted = useCallback(
+    (target: OrgSchemaAction) => {
+      if (isCompletedRef.current) {
+        return console.warn(
+          'botframework-webchat internal: useFeedbackActions().markActionAsCompleted() must not be called after feedback is completed, ignoring the call.'
+        );
+      }
+
+      setActions(actions =>
+        Object.freeze(
+          actions.map(action =>
+            action === target
+              ? Object.freeze({ ...action, actionStatus: ['CompletedActionStatus'] } satisfies OrgSchemaAction)
+              : action
+          )
+        )
+      );
+    },
+    [isCompletedRef, setActions]
+  );
+
+  const selectedAction = useMemo(
+    () =>
+      actions.find(
+        ({ actionStatus }) => actionStatus[0] === 'ActiveActionStatus' || actionStatus[0] === 'CompletedActionStatus'
+      ),
+    [actions]
+  );
+
+  return {
+    actions,
+    isCompleted,
+    markActionAsCompleted,
+    markActionAsSelected,
+    selectedAction
+  };
+}

package/src/hooks/internal/useForceRenderAtInterval.ts

@@ -1,11 +1,11 @@
 import { hooks } from 'botframework-webchat-api';
-import { useCallback, useState } from 'react';
 import random from 'math-random';
+import { useCallback, useState } from 'react';
 
 import useTimer from './useTimer';
 
-import type { Dispatch, SetStateAction } from 'react';
 import type { GlobalScopePonyfill } from 'botframework-webchat-core';
+import type { Dispatch, SetStateAction } from 'react';
 
 const { usePonyfill } = hooks;
 
@@ -16,8 +16,8 @@ const { usePonyfill } = hooks;
 
 // False positive: we are using `Date` as a type.
 // eslint-disable-next-line no-restricted-globals
-function nextTimer(origin: Date | number | string, interval: number, { Date }: GlobalScopePonyfill): number {
-  const time = new Date(origin).getTime();
+function nextTimer(origin: Date, interval: number, { Date }: GlobalScopePonyfill): number {
+  const time = origin.getTime();
   const now = Date.now();
 
   return time > now ? time : now + interval - ((now - time) % interval);
@@ -26,9 +26,9 @@ function nextTimer(origin: Date | number | string, interval: number, { Date }: G
 export default function useForceRenderAtInterval(
   // False positive: we are using `Date` as a type.
   // eslint-disable-next-line no-restricted-globals
-  origin: Date | number | string,
+  origin: Date,
   interval: number,
-  fn: () => void
+  fn?: (() => void) | undefined
 ): [number, Dispatch<SetStateAction<number>>] {
   const [ponyfill] = usePonyfill();
   const [timer, setTimer] = useState<number>(nextTimer(origin, interval, ponyfill));

package/src/hooks/internal/useMemoized.spec.jsx

@@ -1,7 +1,7 @@
-/** @jest-environment jsdom */
-/* eslint-disable react/prop-types */
-/* eslint-disable no-undef */
+/** @jest-environment @happy-dom/jest-environment */
+
 /* eslint no-magic-numbers: "off" */
+
 import React from 'react';
 import { render } from 'react-dom';
 import { act } from 'react-dom/test-utils';