component: componetize transcript focus

Author: OEvgeny

packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css

@@ -0,0 +1,100 @@
+/* Focus area container */
+
+:global(.webchat) .transcript-focus-area {
+  outline: 0;
+  display: grid;
+  grid-template-areas: 'content';
+
+  .transcript-focus-area__indicator,
+  .transcript-focus-area__transcript-indicator {
+    box-sizing: border-box;
+    font-size: 0;
+    pointer-events: none;
+    grid-area: content;
+    min-height: 0;
+  }
+
+  .transcript-focus-area__root,
+  .transcript-focus-area__content-root {
+    grid-area: content;
+    min-height: 0;
+  }
+
+  .transcript-focus-area__content-root {
+    padding-top: calc(var(--webchat__padding--regular) / 2);
+  }
+
+  &:focus .transcript-focus-area__content--focused > .transcript-focus-area__indicator {
+    border-color: var(--webchat__color--transcript-activity-visual-keyboard-indicator);
+    border-style: var(--webchat__border-style--transcript-activity-visual-keyboard-indicator);
+    border-width: var(--webchat__border-width--transcript-activity-visual-keyboard-indicator);
+    height: calc(100% - var(--webchat__padding--regular) / 2);
+    margin: 0 calc(var(--webchat__padding--regular) / 2);
+    width: calc(100% - var(--webchat__padding--regular));
+  }
+
+  &:focus-visible .transcript-focus-area__transcript-indicator,
+  .transcript-focus-area__terminator:focus-visible + .transcript-focus-area__transcript-indicator {
+    border-color: var(--webchat__border-color--transcript-visual-keyboard-indicator);
+    border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator);
+    border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator);
+  }
+
+  .transcript-focus-area__content {
+    display: grid;
+    grid-template-areas: 'content';
+
+    &:first-child {
+      margin-top: calc(var(--webchat__padding--regular) / 2);
+    }
+
+    &:not(:first-child) {
+      margin-top: calc(var(--webchat__padding--regular) / -2);
+    }
+  }
+
+  /* When the content is focused as active descendant, scrollIntoView() will scroll this invisible div into view. */
+  .transcript-focus-area__content-active-descendant {
+    margin-top: calc(var(--webchat__padding--regular) / -2);
+    padding-bottom: calc(var(--webchat__padding--regular) / 2);
+    /* The bounding box is expanded to both top and bottom to scroll focus indicator into view. */
+    /* We should ignore clicks to make sure this expansion don't register click as focus. */
+    /* Otherwise, when clicking on the very bottom edge of the activity, it will focus on next activity instead. */
+    pointer-events: none;
+    width: 100%;
+    grid-area: content;
+    min-height: 0;
+  }
+
+  .transcript-focus-area__content-body:not(:empty) {
+    padding-bottom: var(--webchat__padding--regular);
+  }
+
+  .transcript-focus-area__terminator {
+    width: 100%;
+    display: grid;
+    grid-template-areas: 'content';
+  }
+
+  .transcript-focus-area__terminator-body {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    grid-area: content;
+    min-height: 0;
+  }
+
+  .transcript-focus-area__terminator:not(:focus) .transcript-focus-area__terminator-body {
+    display: none;
+  }
+
+  .transcript-focus-area__terminator-text {
+    background: var(--webchat__background--transcript-terminator);
+    border-radius: var(--webchat__border-radius--transcript-terminator);
+    color: var(--webchat__color--transcript-terminator);
+    font-family: var(--webchat__font--primary);
+    font-size: var(--webchat__font-size--transcript-terminator);
+    margin: calc(var(--webchat__padding--regular) / 2);
+    padding: calc(var(--webchat__padding--regular) / 2);
+  }
+}

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusArea.tsx

@@ -0,0 +1,26 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+import TranscriptFocusIndicator from './TranscriptFocusIndicator';
+
+type TranscriptFocusAreaProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusArea = forwardRef<HTMLDivElement, TranscriptFocusAreaProps>(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <div {...props} className={cx(classNames['transcript-focus-area'], className)} ref={ref}>
+        <div className={classNames['transcript-focus-area__root']}>{children}</div>
+        <TranscriptFocusIndicator type="transcript" />
+      </div>
+    );
+  }
+);
+
+TranscriptFocusArea.displayName = 'TranscriptFocusArea';
+
+export default TranscriptFocusArea;
+export { type TranscriptFocusAreaProps };

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusContent.tsx

@@ -0,0 +1,38 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+import TranscriptFocusIndicator from './TranscriptFocusIndicator';
+
+type TranscriptFocusContentProps = HTMLAttributes<HTMLDivElement> &
+  Readonly<{
+    tag?: React.ElementType;
+    focused?: boolean;
+  }>;
+
+const TranscriptFocusContent = forwardRef<HTMLDivElement, TranscriptFocusContentProps>(
+  ({ className, children, tag: Tag = 'div', focused = false, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <Tag
+        {...props}
+        className={cx(
+          classNames['transcript-focus-area__content'],
+          { [classNames['transcript-focus-area__content--focused']]: focused },
+          className
+        )}
+        ref={ref}
+      >
+        <div className={classNames['transcript-focus-area__content-root']}>{children}</div>
+        <TranscriptFocusIndicator />
+      </Tag>
+    );
+  }
+);
+
+TranscriptFocusContent.displayName = 'TranscriptFocusContent';
+
+export default TranscriptFocusContent;
+export { type TranscriptFocusContentProps };

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusContentActiveDescendant.tsx

@@ -0,0 +1,26 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusContentActiveDescendantProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusContentActiveDescendant = forwardRef<HTMLDivElement, TranscriptFocusContentActiveDescendantProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <div
+        {...props}
+        className={cx(classNames['transcript-focus-area__content-active-descendant'], className)}
+        ref={ref}
+      />
+    );
+  }
+);
+
+TranscriptFocusContentActiveDescendant.displayName = 'TranscriptFocusContentActiveDescendant';
+
+export default TranscriptFocusContentActiveDescendant;
+export { type TranscriptFocusContentActiveDescendantProps };

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusContentBody.tsx

@@ -0,0 +1,20 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusContentBodyProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusContentBody = forwardRef<HTMLDivElement, TranscriptFocusContentBodyProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return <div {...props} className={cx(classNames['transcript-focus-area__content-body'], className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusContentBody.displayName = 'TranscriptFocusContentBody';
+
+export default TranscriptFocusContentBody;
+export { type TranscriptFocusContentBodyProps };

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusIndicator.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable react/require-default-props */
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusIndicatorProps = HTMLAttributes<HTMLDivElement> &
+  Readonly<{
+    type?: 'content' | 'transcript';
+  }>;
+
+const TranscriptFocusIndicator = forwardRef<HTMLDivElement, TranscriptFocusIndicatorProps>(
+  ({ className, type = 'content', ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    const indicatorClass =
+      type === 'content'
+        ? classNames['transcript-focus-area__indicator']
+        : classNames['transcript-focus-area__transcript-indicator'];
+
+    return <div {...props} className={cx(indicatorClass, className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusIndicator.displayName = 'TranscriptFocusIndicator';
+
+export default TranscriptFocusIndicator;
+export { type TranscriptFocusIndicatorProps };

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusTerminator.tsx

@@ -0,0 +1,42 @@
+import { hooks } from 'botframework-webchat-api';
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+import useUniqueId from '../../hooks/internal/useUniqueId';
+
+type TranscriptFocusTerminatorProps = HTMLAttributes<HTMLDivElement>;
+
+const { useLocalizer } = hooks;
+
+const TranscriptFocusTerminator = forwardRef<HTMLDivElement, TranscriptFocusTerminatorProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+    const localize = useLocalizer();
+    const terminatorText = localize('TRANSCRIPT_TERMINATOR_TEXT');
+    const terminatorLabelId = useUniqueId('webchat__basic-transcript__terminator-label');
+
+    return (
+      <div
+        {...props}
+        aria-labelledby={terminatorLabelId}
+        className={cx(classNames['transcript-focus-area__terminator'], className)}
+        ref={ref}
+      >
+        <div className={cx(classNames['transcript-focus-area__terminator-body'])}>
+          {/* `id` is required for `aria-labelledby` */}
+          {/* eslint-disable-next-line react/forbid-dom-props */}
+          <div className={cx(classNames['transcript-focus-area__terminator-text'])} id={terminatorLabelId}>
+            {terminatorText}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+TranscriptFocusTerminator.displayName = 'TranscriptFocusTerminator';
+
+export default TranscriptFocusTerminator;
+export { type TranscriptFocusTerminatorProps };

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusTerminatorBody.tsx

@@ -0,0 +1,20 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusTerminatorBodyProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusTerminatorBody = forwardRef<HTMLDivElement, TranscriptFocusTerminatorBodyProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return <div {...props} className={cx(classNames['transcript-focus-area__terminator-body'], className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusTerminatorBody.displayName = 'TranscriptFocusTerminatorBody';
+
+export default TranscriptFocusTerminatorBody;
+export { type TranscriptFocusTerminatorBodyProps };

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusTerminatorText.tsx

@@ -0,0 +1,20 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusTerminatorTextProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusTerminatorText = forwardRef<HTMLDivElement, TranscriptFocusTerminatorTextProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return <div {...props} className={cx(classNames['transcript-focus-area__terminator-text'], className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusTerminatorText.displayName = 'TranscriptFocusTerminatorText';
+
+export default TranscriptFocusTerminatorText;
+export { type TranscriptFocusTerminatorTextProps };

packages/component/src/Transcript/TranscriptFocus/index.ts

@@ -0,0 +1,20 @@
+export { default as TranscriptFocusArea, type TranscriptFocusAreaProps } from './TranscriptFocusArea';
+export { default as TranscriptFocusContent, type TranscriptFocusContentProps } from './TranscriptFocusContent';
+export {
+  default as TranscriptFocusContentActiveDescendant,
+  type TranscriptFocusContentActiveDescendantProps
+} from './TranscriptFocusContentActiveDescendant';
+export {
+  default as TranscriptFocusContentBody,
+  type TranscriptFocusContentBodyProps
+} from './TranscriptFocusContentBody';
+export { default as TranscriptFocusIndicator, type TranscriptFocusIndicatorProps } from './TranscriptFocusIndicator';
+export { default as TranscriptFocusTerminator, type TranscriptFocusTerminatorProps } from './TranscriptFocusTerminator';
+export {
+  default as TranscriptFocusTerminatorBody,
+  type TranscriptFocusTerminatorBodyProps
+} from './TranscriptFocusTerminatorBody';
+export {
+  default as TranscriptFocusTerminatorText,
+  type TranscriptFocusTerminatorTextProps
+} from './TranscriptFocusTerminatorText';