@dnb/eufemia/components/aria-live/useAriaLive.js

DNB Eufemia Design System UI Library

"use client";

import { useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import { extendPropsWithContext } from "../../shared/component-helper.js";
const variantConfig = {
  text: {
    delay: 1000,
    atomic: true,
    showAnnouncement: false
  },
  content: {
    delay: -1,
    atomic: false,
    showAnnouncement: true
  }
};
const priorityConfig = {
  low: {
    politeness: 'polite'
  },
  high: {
    politeness: 'assertive'
  }
};
export default function useAriaLive(props) {
  const [announcement, setAnnouncement] = useState('');
  const timeoutRef = useRef(null);
  const {
    disabled = false,
    delay,
    atomic,
    politeness,
    relevant,
    className,
    children,
    showAnnouncement,
    variant,
    priority,
    ...rest
  } = extendPropsWithContext(props, variantConfig[props.variant || 'text'], priorityConfig[props.priority || 'low']);
  const showTextAnnouncement = delay > -1;
  useEffect(() => {
    if (showTextAnnouncement) {
      var _ref;
      setAnnouncement('');
      const isTest = process.env.NODE_ENV === 'test';
      const timer = setTimeout(() => {
        if (!disabled) {
          setAnnouncement(children);
        }
        clearTimeout(timeoutRef.current);
        timeoutRef.current = setTimeout(() => setAnnouncement(''), isTest ? 100 : delay + 1000);
      }, (_ref = isTest ? 0 : delay) !== null && _ref !== void 0 ? _ref : 1000);
      return () => {
        clearTimeout(timer);
        clearTimeout(timeoutRef.current);
      };
    }
  }, [delay, children, disabled, showTextAnnouncement]);
  return {
    'aria-live': disabled && !showTextAnnouncement ? 'off' : politeness,
    'aria-atomic': atomic,
    'aria-relevant': relevant,
    className: classnames('dnb-aria-live', className, !showAnnouncement && 'dnb-sr-only'),
    children: showTextAnnouncement ? announcement : children,
    ...rest
  };
}
//# sourceMappingURL=useAriaLive.js.map