botframework-webchat-fluent-theme 4.17.0-main.20240411.647b269 → 4.17.0-main.20240416.4ff01ae

package/src/components/suggestedActions/AccessibleButton.tsx

@@ -0,0 +1,59 @@
+import React, { MouseEventHandler, ReactNode, forwardRef, memo, useRef } from 'react';
+
+const preventDefaultHandler: MouseEventHandler<HTMLButtonElement> = event => event.preventDefault();
+
+type AccessibleButtonProps = Readonly<{
+  className?: string | undefined;
+  'aria-hidden'?: boolean;
+  children?: ReactNode;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+  type: 'button';
+}>;
+
+// Differences between <button> and <AccessibleButton>:
+// - Disable behavior
+//   - When the widget is disabled
+//     - Set "aria-disabled" attribute to "true"
+//     - Set "readonly" attribute
+//     - Set "tabIndex" to -1
+//     - Remove "onClick" handler
+//   - Why this is needed
+//     - Browser compatibility: when the widget is disabled, different browser send focus to different places
+//     - When the widget become disabled, it's reasonable to keep the focus on the same widget for an extended period of time
+//       - When the user presses TAB after the current widget is disabled, it should jump to the next non-disabled widget
+
+// Developers using this accessible widget will need to:
+// - Style the disabled widget themselves, using CSS query `:disabled, [aria-disabled="true"] {}`
+// - Modify all code that check disabled through "disabled" attribute to use aria-disabled="true" instead
+//   - aria-disabled="true" is the source of truth
+// - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
+
+const AccessibleButton = forwardRef<HTMLButtonElement, AccessibleButtonProps>(
+  ({ 'aria-hidden': ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+
+    const ref = forwardedRef || targetRef;
+
+    return (
+      <button
+        aria-disabled={disabled ? 'true' : 'false'}
+        aria-hidden={ariaHidden}
+        onClick={disabled ? preventDefaultHandler : onClick}
+        ref={ref}
+        tabIndex={tabIndex}
+        {...(disabled && {
+          'aria-disabled': 'true',
+          tabIndex: -1
+        })}
+        {...props}
+        type="button"
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+export default memo(AccessibleButton);

package/src/components/suggestedActions/SuggestedAction.module.css

@@ -0,0 +1,34 @@
+:global(.webchat-fluent) .suggested-action {
+  align-items: center;
+  background: transparent;
+  border-radius: 8px;
+  border: 1px solid var(--webchat-colorBrandStroke2);
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  gap: 4px;
+  padding: 4px 8px 4px;
+  text-align: start;
+  transition: all .15s ease-out;
+
+  @media (hover: hover) {
+    &:not([aria-disabled="true"]):hover {
+      background-color: var(--webchat-colorBrandBackground2Hover);
+      color: var(--webchat-colorBrandForeground2Hover)
+    }
+  }
+  &:not([aria-disabled="true"]):active {
+    background-color: var(--webchat-colorBrandBackground2Pressed);
+    color: var(--webchat-colorBrandForeground2Pressed)
+  }
+  &[aria-disabled="true"] {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+    cursor: not-allowed
+  }
+}
+
+:global(.webchat-fluent) .suggested-action__image {
+  font-size: 12px;
+  height: 1em;
+  width: 1em;
+}

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -0,0 +1,87 @@
+import { hooks } from 'botframework-webchat-component';
+import { type DirectLineCardAction } from 'botframework-webchat-core';
+import cx from 'classnames';
+import React, { MouseEventHandler, memo, useCallback, useRef } from 'react';
+import styles from './SuggestedAction.module.css';
+import { useStyles } from '../../styles';
+import AccessibleButton from './AccessibleButton';
+
+const { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks;
+
+type SuggestedActionProps = Readonly<{
+  buttonText: string | undefined;
+  className?: string | undefined;
+  displayText?: string | undefined;
+  image?: string | undefined;
+  imageAlt?: string | undefined;
+  itemIndex: number;
+  text?: string | undefined;
+  type?:
+    | 'call'
+    | 'downloadFile'
+    | 'imBack'
+    | 'messageBack'
+    | 'openUrl'
+    | 'playAudio'
+    | 'playVideo'
+    | 'postBack'
+    | 'showImage'
+    | 'signin';
+  value?: any;
+}>;
+
+function SuggestedAction({
+  buttonText,
+  className,
+  displayText,
+  image,
+  imageAlt,
+  text,
+  type,
+  value
+}: SuggestedActionProps) {
+  const [_, setSuggestedActions] = useSuggestedActions();
+  const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
+  const [disabled] = useDisabled();
+  const focus = useFocus();
+  const focusRef = useRef<HTMLButtonElement>(null);
+  const performCardAction = usePerformCardAction();
+  const classNames = useStyles(styles);
+  const scrollToEnd = useScrollToEnd();
+
+  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    ({ target }) => {
+      (async function () {
+        // We need to focus to the send box before we are performing this card action.
+        // The will make sure the focus is always on Web Chat.
+        // Otherwise, the focus may momentarily send to `document.body` and screen reader will be confused.
+        await focus('sendBoxWithoutKeyboard');
+
+        // TODO: [P3] #XXX We should not destruct DirectLineCardAction into React props and pass them in. It makes typings difficult.
+        //       Instead, we should pass a "cardAction" props.
+        performCardAction({ displayText, text, type, value } as DirectLineCardAction, { target });
+
+        // Since "openUrl" action do not submit, the suggested action buttons do not hide after click.
+        type === 'openUrl' && setSuggestedActions([]);
+
+        scrollToEnd();
+      })();
+    },
+    [displayText, focus, performCardAction, scrollToEnd, setSuggestedActions, text, type, value]
+  );
+
+  return (
+    <AccessibleButton
+      className={cx(classNames['suggested-action'], suggestedActionStyleSet + '', (className || '') + '')}
+      disabled={disabled}
+      onClick={handleClick}
+      ref={focusRef}
+      type="button"
+    >
+      {image && <img alt={imageAlt} className={classNames['suggested-action__image']} src={image} />}
+      <span>{buttonText}</span>
+    </AccessibleButton>
+  );
+}
+
+export default memo(SuggestedAction);

package/src/components/suggestedActions/index.module.css

@@ -0,0 +1,23 @@
+
+:global(.webchat-fluent) .suggested-actions {
+  align-items: flex-end;
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &:not(:empty) {
+    padding-block-end: 8px;
+    padding-inline-start: 4px
+  }
+
+  &.suggested-actions--flow {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  &.suggested-actions--stacked {
+    flex-direction: column
+  }
+}

package/src/components/suggestedActions/index.tsx

@@ -0,0 +1,98 @@
+import { hooks } from 'botframework-webchat-component';
+import cx from 'classnames';
+import React, { memo, type ReactNode } from 'react';
+import SuggestedAction from './SuggestedAction';
+import computeSuggestedActionText from './private/computeSuggestedActionText';
+import styles from './index.module.css';
+import { useStyles } from '../../styles';
+
+const { useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
+
+function SuggestedActionStackedOrFlowContainer(
+  props: Readonly<{
+    'aria-label'?: string | undefined;
+    children?: ReactNode | undefined;
+    className?: string | undefined;
+  }>
+) {
+  const [{ suggestedActionLayout }] = useStyleOptions();
+  const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
+  const classNames = useStyles(styles);
+
+  return (
+    <div
+      aria-label={props['aria-label']}
+      aria-live="polite"
+      aria-orientation="vertical"
+      className={cx(
+        classNames['suggested-actions'],
+        suggestedActionsStyleSet + '',
+        {
+          [classNames['suggested-actions--flow']]: suggestedActionLayout === 'flow',
+          [classNames['suggested-actions--stacked']]: suggestedActionLayout !== 'flow'
+        },
+        props.className
+      )}
+      role="toolbar"
+    >
+      {!!props.children && !!React.Children.count(props.children) && props.children}
+    </div>
+  );
+}
+
+function SuggestedActions() {
+  const classNames = useStyles(styles);
+  const localize = useLocalizer();
+  const [suggestedActions] = useSuggestedActions();
+  const children = suggestedActions.map((cardAction, index) => {
+    const { displayText, image, imageAltText, text, type, value } = cardAction as {
+      displayText?: string;
+      image?: string;
+      imageAltText?: string;
+      text?: string;
+      type:
+        | 'call'
+        | 'downloadFile'
+        | 'imBack'
+        | 'messageBack'
+        | 'openUrl'
+        | 'playAudio'
+        | 'playVideo'
+        | 'postBack'
+        | 'showImage'
+        | 'signin';
+      value?: { [key: string]: any } | string;
+    };
+
+    if (!suggestedActions?.length) {
+      return null;
+    }
+
+    return (
+      <SuggestedAction
+        buttonText={computeSuggestedActionText(cardAction)}
+        displayText={displayText}
+        image={image}
+        // Image alt text should use `imageAltText` field and fallback to `text` field.
+        // https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#image-alt-text
+        imageAlt={image && (imageAltText || text)}
+        itemIndex={index}
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        text={text}
+        type={type}
+        value={value}
+      />
+    );
+  });
+  return (
+    <SuggestedActionStackedOrFlowContainer
+      aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}
+      className={classNames['suggested-actions']}
+    >
+      {children}
+    </SuggestedActionStackedOrFlowContainer>
+  );
+}
+
+export default memo(SuggestedActions);

package/src/components/suggestedActions/private/computeSuggestedActionText.ts

@@ -0,0 +1,21 @@
+import type { DirectLineCardAction } from 'botframework-webchat-core';
+
+// Please refer to this article to find out how to compute the "button text" for suggested action.
+// https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#card-action
+export default function computeSuggestedActionText(cardAction: DirectLineCardAction) {
+  // "CardAction" must contains at least image or title.
+  const { title } = cardAction as { title?: string };
+  const { type, value } = cardAction;
+
+  if (type === 'messageBack') {
+    return title || cardAction.displayText;
+  } else if (title) {
+    return title;
+  } else if (typeof value === 'string') {
+    return value;
+  }
+
+  return JSON.stringify(value);
+}
+
+// TODO: [P1] This is copied from botframework-webchat-component. Think about what we should do to eliminate duplications.

package/src/components/telephoneKeypad/Provider.tsx

@@ -0,0 +1,22 @@
+import React, { memo, useMemo, useState, type ReactNode } from 'react';
+
+import Context from './private/Context';
+
+type Props = Readonly<{ children?: ReactNode | undefined }>;
+
+const Provider = memo(({ children }: Props) => {
+  const [shown, setShown] = useState(false);
+
+  const context = useMemo(
+    () =>
+      Object.freeze({
+        setShown,
+        shown
+      }),
+    [setShown, shown]
+  );
+
+  return <Context.Provider value={context}>{children}</Context.Provider>;
+});
+
+export default Provider;

package/src/components/telephoneKeypad/Surrogate.tsx

@@ -0,0 +1,13 @@
+import React, { memo } from 'react';
+
+import type { PropsOf } from '../../types/PropsOf';
+import TelephoneKeypad from './private/TelephoneKeypad';
+import useShown from './useShown';
+
+type Props = PropsOf<typeof TelephoneKeypad>;
+
+const TelephoneKeypadSurrogate = memo((props: Props) => (useShown()[0] ? <TelephoneKeypad {...props} /> : false));
+
+TelephoneKeypadSurrogate.displayName = 'TelephoneKeypad.Surrogate';
+
+export default TelephoneKeypadSurrogate;

package/src/components/telephoneKeypad/index.ts

@@ -0,0 +1,6 @@
+import TelephoneKeypadProvider from './Provider';
+import TelephoneKeypadSurrogate from './Surrogate';
+import { type DTMF } from './types';
+import useTelephoneKeypadShown from './useShown';
+
+export { TelephoneKeypadProvider, TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF };

package/src/components/telephoneKeypad/private/Button.module.css

@@ -0,0 +1,62 @@
+
+:global(.webchat-fluent) .telephone-keypad__button {
+  -webkit-user-select: none;
+  align-items: center;
+  appearance: none;
+  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */
+  background-color: White;
+  border-radius: 100%;
+
+  /* Whitelabel styles */
+  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */
+  /* color: inherit; */
+
+  border: solid 1px var(--webchat-colorNeutralStroke1);
+  color: var(--webchat-colorGray200);
+  font-weight: var(--webchat-fontWeightSemibold);
+
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 60px;
+  opacity: 0.7;
+  padding: 0;
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  width: 60px;
+
+  &:hover {
+    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */
+    background-color: var(--webchat-colorGray30)
+  }
+}
+
+:global(.webchat-fluent) .telephone-keypad__button__ruby {
+  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */
+  color: var(--webchat-colorGray190);
+  font-size: 10px;
+}
+
+:global(.webchat-fluent) .telephone-keypad__button__text {
+  font-size: 24px;
+  margin-top: 8px;
+}
+
+:global(.webchat-fluent) .telephone-keypad--horizontal {
+  & .telephone-keypad__button {
+    height: 32px;
+    justify-content: center;
+    margin: 8px 4px;
+    width: 32px;
+  };
+
+  .telephone-keypad__button__ruby {
+    display: none;
+  }
+
+  & .telephone-keypad__button__text {
+    font-size: 20px;
+    margin-top: 0;
+  }
+}

package/src/components/telephoneKeypad/private/Button.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef, memo, useCallback, type Ref } from 'react';
+
+import { useRefFrom } from 'use-ref-from';
+
+import { type DTMF } from '../types';
+
+import styles from './Button.module.css';
+import { useStyles } from '../../../styles';
+
+type Props = Readonly<{
+  button: DTMF;
+  ['data-testid']?: string | undefined;
+  onClick?: (() => void) | undefined;
+  ruby?: string | undefined;
+}>;
+
+const Button = memo(
+  // As we are all TypeScript, internal components do not need propTypes.
+  // eslint-disable-next-line react/prop-types
+  forwardRef(({ button, 'data-testid': dataTestId, onClick, ruby }: Props, ref: Ref<HTMLButtonElement>) => {
+    const classNames = useStyles(styles);
+    const onClickRef = useRefFrom(onClick);
+
+    const handleClick = useCallback(() => onClickRef.current?.(), [onClickRef]);
+
+    return (
+      <button
+        className={classNames['telephone-keypad__button']}
+        data-testid={dataTestId}
+        onClick={handleClick}
+        ref={ref}
+        type="button"
+      >
+        <span className={classNames['telephone-keypad__button__text']}>
+          {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
+        </span>
+        {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}
+      </button>
+    );
+  })
+);
+
+Button.displayName = 'TelephoneKeypad.Button';
+
+export default Button;

package/src/components/telephoneKeypad/private/Context.ts

@@ -0,0 +1,18 @@
+import { createContext, type Dispatch, type SetStateAction } from 'react';
+
+type ContextType = Readonly<{
+  setShown: Dispatch<SetStateAction<boolean>>;
+  shown: boolean;
+}>;
+
+const Context = createContext<ContextType>(
+  new Proxy({} as ContextType, {
+    get() {
+      throw new Error('botframework-webchat: This hook can only used under its corresponding <Provider>.');
+    }
+  })
+);
+
+Context.displayName = 'TelephoneKeypad.Context';
+
+export default Context;

package/src/components/telephoneKeypad/private/TelephoneKeypad.module.css

@@ -0,0 +1,30 @@
+
+:global(.webchat-fluent) .telephone-keypad {
+  /* Commented out whitelabel styles for now. */
+  /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */
+  /* borderRadius: '8px 8px 0px 0px; */
+  /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */
+
+  align-items: center;
+  background: var(--webchat-colorNeutralBackground1);
+  /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */
+  border: none;
+  border-radius: var(--webchat-borderRadiusXLarge);
+  /* boxShadow: var(--shadow16); */
+  display: flex;
+  flex-direction: column;
+  font-family: var(--webchat-fontFamilyBase);
+  justify-content: center;
+  /* margin: var(--spacingHorizontalMNudge)' */
+}
+
+:global(.webchat-fluent) .telephone-keypad__box {
+  box-sizing: border-box;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  justify-items: center;
+  padding: 16px;
+  width: 100%;
+}

package/src/components/telephoneKeypad/private/TelephoneKeypad.tsx

@@ -0,0 +1,137 @@
+import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import Button from './Button';
+// import HorizontalDialPadController from './HorizontalDialPadController';
+import testIds from '../../../testIds';
+import { type DTMF } from '../types';
+import useShown from '../useShown';
+import styles from './TelephoneKeypad.module.css';
+import { useStyles } from '../../../styles';
+
+type Props = Readonly<{
+  autoFocus?: boolean | undefined;
+  isHorizontal: boolean;
+  onButtonClick: (button: DTMF) => void;
+}>;
+
+const Orientation = memo(
+  ({ children, isHorizontal }: Readonly<{ children?: ReactNode | undefined; isHorizontal: boolean }>) => {
+    const classNames = useStyles(styles);
+
+    return isHorizontal ? (
+      // <HorizontalDialPadController>{children}</HorizontalDialPadController>
+      false
+    ) : (
+      <div className={classNames['telephone-keypad__box']}>{children}</div>
+    );
+  }
+);
+
+Orientation.displayName = 'TelephoneKeypad:Orientation';
+
+const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props) => {
+  const autoFocusRef = useRefFrom(autoFocus);
+  const classNames = useStyles(styles);
+  const firstButtonRef = useRef<HTMLButtonElement>(null);
+  const onButtonClickRef = useRefFrom(onButtonClick);
+  const [, setShown] = useShown();
+
+  const handleButton1Click = useCallback(() => onButtonClickRef.current?.('1'), [onButtonClickRef]);
+  const handleButton2Click = useCallback(() => onButtonClickRef.current?.('2'), [onButtonClickRef]);
+  const handleButton3Click = useCallback(() => onButtonClickRef.current?.('3'), [onButtonClickRef]);
+  const handleButton4Click = useCallback(() => onButtonClickRef.current?.('4'), [onButtonClickRef]);
+  const handleButton5Click = useCallback(() => onButtonClickRef.current?.('5'), [onButtonClickRef]);
+  const handleButton6Click = useCallback(() => onButtonClickRef.current?.('6'), [onButtonClickRef]);
+  const handleButton7Click = useCallback(() => onButtonClickRef.current?.('7'), [onButtonClickRef]);
+  const handleButton8Click = useCallback(() => onButtonClickRef.current?.('8'), [onButtonClickRef]);
+  const handleButton9Click = useCallback(() => onButtonClickRef.current?.('9'), [onButtonClickRef]);
+  const handleButton0Click = useCallback(() => onButtonClickRef.current?.('0'), [onButtonClickRef]);
+  const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('star'), [onButtonClickRef]);
+  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('pound'), [onButtonClickRef]);
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+    event => {
+      if (event.key === 'Escape') {
+        // TODO: Should send focus to the send box.
+        setShown(false);
+      }
+    },
+    [setShown]
+  );
+
+  useEffect(() => {
+    autoFocusRef.current && firstButtonRef.current?.focus();
+  }, [autoFocusRef, firstButtonRef]);
+
+  return (
+    <div className={classNames['telephone-keypad']} onKeyDown={handleKeyDown}>
+      <Orientation isHorizontal={isHorizontal}>
+        <Button
+          button="1"
+          data-testid={testIds.sendBoxTelephoneKeypadButton1}
+          onClick={handleButton1Click}
+          ref={firstButtonRef}
+        />
+        <Button
+          button="2"
+          data-testid={testIds.sendBoxTelephoneKeypadButton2}
+          onClick={handleButton2Click}
+          ruby="ABC"
+        />
+        <Button
+          button="3"
+          data-testid={testIds.sendBoxTelephoneKeypadButton3}
+          onClick={handleButton3Click}
+          ruby="DEF"
+        />
+        <Button
+          button="4"
+          data-testid={testIds.sendBoxTelephoneKeypadButton4}
+          onClick={handleButton4Click}
+          ruby="GHI"
+        />
+        <Button
+          button="5"
+          data-testid={testIds.sendBoxTelephoneKeypadButton5}
+          onClick={handleButton5Click}
+          ruby="JKL"
+        />
+        <Button
+          button="6"
+          data-testid={testIds.sendBoxTelephoneKeypadButton6}
+          onClick={handleButton6Click}
+          ruby="MNO"
+        />
+        <Button
+          button="7"
+          data-testid={testIds.sendBoxTelephoneKeypadButton7}
+          onClick={handleButton7Click}
+          ruby="PQRS"
+        />
+        <Button
+          button="8"
+          data-testid={testIds.sendBoxTelephoneKeypadButton8}
+          onClick={handleButton8Click}
+          ruby="TUV"
+        />
+        <Button
+          button="9"
+          data-testid={testIds.sendBoxTelephoneKeypadButton9}
+          onClick={handleButton9Click}
+          ruby="WXYZ"
+        />
+        <Button button="star" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
+        <Button button="0" data-testid={testIds.sendBoxTelephoneKeypadButton0} onClick={handleButton0Click} ruby="+" />
+        <Button
+          button="pound"
+          data-testid={testIds.sendBoxTelephoneKeypadButtonPound}
+          onClick={handleButtonPoundClick}
+        />
+      </Orientation>
+    </div>
+  );
+});
+
+TelephoneKeypad.displayName = 'TelephoneKeypad';
+
+export default TelephoneKeypad;

package/src/components/telephoneKeypad/types.ts

@@ -0,0 +1 @@
+export type DTMF = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0' | 'star' | 'pound';

package/src/components/telephoneKeypad/useShown.ts

@@ -0,0 +1,9 @@
+import { useContext, useMemo, type Dispatch, type SetStateAction } from 'react';
+
+import Context from './private/Context';
+
+export default function useShown(): readonly [boolean, Dispatch<SetStateAction<boolean>>] {
+  const { setShown, shown } = useContext(Context);
+
+  return useMemo(() => Object.freeze([shown, setShown]), [shown, setShown]);
+}