@primer/react/lib-esm/internal/components/LiveRegion.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import React from 'react';
import { jsx } from 'react/jsx-runtime';
import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';

const LiveRegionContext = /*#__PURE__*/React.createContext(null);
function useLiveRegion() {
  const context = React.useContext(LiveRegionContext);
  if (!context) {
    throw new Error("useLiveRegion() must be used within a <LiveRegion>");
  }
  return context;
}
function LiveRegion(t0) {
  const $ = c(5);
  const {
    children
  } = t0;
  const [message, setMessage] = React.useState("");
  let t1;
  let t2;
  if ($[0] !== message) {
    t2 = {
      announce: setMessage,
      message
    };
    $[0] = message;
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  t1 = t2;
  const value = t1;
  let t3;
  if ($[2] !== children || $[3] !== value) {
    t3 = /*#__PURE__*/jsx(LiveRegionContext.Provider, {
      value: value,
      children: children
    });
    $[2] = children;
    $[3] = value;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  return t3;
}
function LiveRegionOutlet() {
  const $ = c(2);
  const liveRegion = useLiveRegion();
  let t0;
  if ($[0] !== liveRegion.message) {
    t0 = /*#__PURE__*/jsx(VisuallyHidden, {
      role: "status",
      "aria-live": "polite",
      "aria-atomic": true,
      children: liveRegion.message
    });
    $[0] = liveRegion.message;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
}
function Message(t0) {
  const $ = c(8);
  const {
    value
  } = t0;
  const liveRegion = useLiveRegion();
  const savedLiveRegion = React.useRef(liveRegion);
  const committedRef = React.useRef(false);
  let t1;
  let t2;
  if ($[0] !== liveRegion) {
    t1 = () => {
      savedLiveRegion.current = liveRegion;
    };
    t2 = [liveRegion];
    $[0] = liveRegion;
    $[1] = t1;
    $[2] = t2;
  } else {
    t1 = $[1];
    t2 = $[2];
  }
  React.useEffect(t1, t2);
  let t3;
  let t4;
  if ($[3] !== value) {
    t3 = () => {
      if (committedRef.current !== true) {
        return;
      }
      const timeoutId = setTimeout(() => {
        savedLiveRegion.current.announce(value);
      }, 750);
      return () => {
        clearTimeout(timeoutId);
      };
    };
    t4 = [value];
    $[3] = value;
    $[4] = t3;
    $[5] = t4;
  } else {
    t3 = $[4];
    t4 = $[5];
  }
  React.useEffect(t3, t4);
  let t5;
  let t6;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = () => {
      committedRef.current = true;
      return () => {
        committedRef.current = false;
      };
    };
    t6 = [];
    $[6] = t5;
    $[7] = t6;
  } else {
    t5 = $[6];
    t6 = $[7];
  }
  React.useEffect(t5, t6);
  return null;
}

export { LiveRegion, LiveRegionOutlet, Message, useLiveRegion };