botframework-webchat-component 4.18.2 → 4.19.0

package/src/providers/LiveRegionTwin/LiveRegionTwinComposer.tsx

@@ -1,172 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import type { FC, PropsWithChildren } from 'react';
-
-import LiveRegionTwinContainer from './private/LiveRegionTwinContainer';
-import LiveRegionTwinContext from './private/Context';
-import useValueRef from '../../hooks/internal/useValueRef';
-
-import type { StaticElement, StaticElementEntry } from './private/types';
-
-const { usePonyfill } = hooks;
-
-const DEFAULT_ARIA_LIVE = 'polite';
-const DEFAULT_FADE_AFTER = 1000;
-
-type LiveRegionTwinComposerProps = PropsWithChildren<{
-  /** Optional "aria-label" attribute for the live region twin container. */
-  'aria-label'?: string;
-
-  /** "aria-live" attribute for the live region twin container, defaults to `'polite'`. */
-  'aria-live'?: 'assertive' | 'polite';
-
-  /** Optional "aria-roledescription" attribute for the live region twin container. */
-  'aria-roledescription'?: string;
-
-  /** Optional "className" attribute for the live region twin container. */
-  className?: string;
-
-  /**
-   * Static elements will fade out after this timeout value specified in milliseconds, defaults to `1000`.
-   *
-   * When lowering this value, make sure screen reader can continue to pick up new static elements before fading out.
-   *
-   * If this prop is updated, it will be reflected in next queueing elements.
-   */
-  fadeAfter?: number;
-
-  /** Optional "role" attribute for the live region twin container. */
-  role?: string;
-
-  /** Optional "className" attribute for static text element. */
-  textElementClassName?: string;
-}>;
-
-/**
- * Live region twin is an UI component for queueing texts or elements to the screen reader using
- * a container element with `aria-live` attribute set.
- *
- * After the text is rendered and queued, it will be removed to reduce burden on the DOM tree.
- * Currently, we assume the assistive technologies should pick up the text within 1 second of rendering.
- * This value is configurable.
- *
- * By default, the live region is visible. If is is not desirable, the caller can use `className` prop to
- * hide its visuals.
- */
-const LiveRegionTwinComposer: FC<LiveRegionTwinComposerProps> = ({
-  'aria-label': ariaLabel,
-  'aria-live': ariaLive = DEFAULT_ARIA_LIVE,
-  'aria-roledescription': ariaRoleDescription,
-  children,
-  className,
-  fadeAfter = DEFAULT_FADE_AFTER,
-  role,
-  textElementClassName
-}) => {
-  const [{ clearTimeout, setTimeout }] = usePonyfill();
-  const [staticElementEntries, setStaticElementEntries] = useState<StaticElementEntry[]>([]);
-  const fadeAfterRef = useValueRef(fadeAfter);
-  const markAllAsRenderedTimeoutIdRef = useRef<any>();
-  const nextKeyRef = useRef<number>(1);
-
-  const staticElementEntriesRef = useValueRef(staticElementEntries);
-
-  // This function is called by an effect hook `useMarkAllAsRenderedEffect`, it must be designed with converging in mind.
-  // To prevent infinite render loop, after multiple calls to this function, it should eventually no-op.
-  const markAllAsRendered = useCallback<() => void>(() => {
-    if (!staticElementEntriesRef.current.length) {
-      // Nothing to remove.
-      return;
-    }
-
-    // When removing each element one-by-one based on an individual timeout, Narrator would narrate them twice occasionally.
-    // Possibly it think some elements that is not removed during the current cycle, are new elements and queued them twice.
-    // Thus, we are removing all at once to prevent bugs in Narrator.
-    markAllAsRenderedTimeoutIdRef.current && clearTimeout(markAllAsRenderedTimeoutIdRef.current);
-
-    markAllAsRenderedTimeoutIdRef.current = setTimeout(() => {
-      // We are playing safe by using value ref to check its length here.
-      // If we are certain that `setStaticElements(emptyArray => emptyArray)` is a no-op,
-      // we could replace it with just the setter function.
-      staticElementEntriesRef.current.length && setStaticElementEntries([]);
-    }, fadeAfterRef.current);
-  }, [
-    clearTimeout,
-    fadeAfterRef,
-    markAllAsRenderedTimeoutIdRef,
-    setStaticElementEntries,
-    setTimeout,
-    staticElementEntriesRef
-  ]);
-
-  // When this component is unmounting, make sure all future `setTimeout` are cleared and should not be fired.
-  useEffect(
-    () => () => markAllAsRenderedTimeoutIdRef.current && clearTimeout(markAllAsRenderedTimeoutIdRef.current),
-    [clearTimeout, markAllAsRenderedTimeoutIdRef]
-  );
-
-  const queueStaticElement = useCallback<(staticElement: StaticElement) => void>(
-    (element: StaticElement): void => {
-      const key = nextKeyRef.current;
-
-      nextKeyRef.current = nextKeyRef.current + 1;
-
-      setStaticElementEntries(entries => [...entries, { element, key }]);
-    },
-    [nextKeyRef, setStaticElementEntries]
-  );
-
-  const staticElementEntriesState = useMemo<readonly [readonly StaticElementEntry[]]>(
-    () => Object.freeze([Object.freeze(staticElementEntries)]) as readonly [readonly StaticElementEntry[]],
-    [staticElementEntries]
-  );
-
-  const context = useMemo(
-    () => ({
-      markAllAsRendered,
-      queueStaticElement,
-      staticElementEntriesState
-    }),
-    [markAllAsRendered, queueStaticElement, staticElementEntriesState]
-  );
-
-  return (
-    <LiveRegionTwinContext.Provider value={context}>
-      <LiveRegionTwinContainer
-        aria-label={ariaLabel}
-        aria-live={ariaLive}
-        aria-roledescription={ariaRoleDescription}
-        className={className}
-        role={role}
-        textElementClassName={textElementClassName}
-      />
-      {children}
-    </LiveRegionTwinContext.Provider>
-  );
-};
-
-LiveRegionTwinComposer.defaultProps = {
-  'aria-label': undefined,
-  'aria-live': DEFAULT_ARIA_LIVE,
-  'aria-roledescription': undefined,
-  children: undefined,
-  className: undefined,
-  fadeAfter: DEFAULT_FADE_AFTER,
-  role: undefined,
-  textElementClassName: undefined
-};
-
-LiveRegionTwinComposer.propTypes = {
-  'aria-label': PropTypes.string,
-  'aria-live': PropTypes.oneOf(['assertive', 'polite']),
-  'aria-roledescription': PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string,
-  fadeAfter: PropTypes.number,
-  role: PropTypes.string,
-  textElementClassName: PropTypes.string
-};
-
-export default LiveRegionTwinComposer;

package/src/providers/LiveRegionTwin/private/Context.ts

@@ -1,15 +0,0 @@
-import { createContext } from 'react';
-
-import type { StaticElement, StaticElementEntry } from './types';
-
-type LiveRegionTwinContextType = {
-  markAllAsRendered: () => void;
-  queueStaticElement: (element: StaticElement) => void;
-  staticElementEntriesState: readonly [readonly StaticElementEntry[]];
-};
-
-const LiveRegionTwinContext = createContext<LiveRegionTwinContextType>(undefined);
-
-export default LiveRegionTwinContext;
-
-export type { LiveRegionTwinContextType };