How to use focus-lock - 10 common examples

const setObserveNode = useCallback((newObserved) => {
    if (observed.current !== newObserved) {
      observed.current = newObserved;
      setObserved(newObserved);
    }
  }, []);

  if (process.env.NODE_ENV !== 'production') {
    if (typeof allowTextSelection !== 'undefined') {
      // eslint-disable-next-line no-console
      console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');
    }
  }

  const lockProps = {
    [constants.FOCUS_DISABLED]: disabled && 'disabled',
    [constants.FOCUS_GROUP]: group,
    ...containerProps,
  };

  const hasLeadingGuards = noFocusGuards !== true;
  const hasTailingGuards = hasLeadingGuards && (noFocusGuards !== 'tail');

  return (
    
      {hasLeadingGuards && [
        <div style="{hiddenGuard}" tabindex="{disabled" data-focus-guard="">, // nearest focus guard
        <div style="{hiddenGuard}" tabindex="{disabled" data-focus-guard="">, // first tabbed element guard
      ]}
      </div></div>

if (observed.current !== newObserved) {
      observed.current = newObserved;
      setObserved(newObserved);
    }
  }, []);

  if (process.env.NODE_ENV !== 'production') {
    if (typeof allowTextSelection !== 'undefined') {
      // eslint-disable-next-line no-console
      console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');
    }
  }

  const lockProps = {
    [constants.FOCUS_DISABLED]: disabled && 'disabled',
    [constants.FOCUS_GROUP]: group,
    ...containerProps,
  };

  const hasLeadingGuards = noFocusGuards !== true;
  const hasTailingGuards = hasLeadingGuards && (noFocusGuards !== 'tail');

  return (
    
      {hasLeadingGuards && [
        <div style="{hiddenGuard}" tabindex="{disabled" data-focus-guard="">, // nearest focus guard
        <div style="{hiddenGuard}" tabindex="{disabled" data-focus-guard="">, // first tabbed element guard
      ]}
      </div></div>

(persistentFocus || focusWasOutsideWindow)
          || !isFreeFocus()
          || (!lastActiveFocus && autoFocus)
        ) {
          if (
            workingNode
            && !(
              focusInside(workingArea)
              || focusIsPortaledPair(activeElement, workingNode)
            )
          ) {
            if (document && !lastActiveFocus && activeElement && !autoFocus) {
              activeElement.blur();
              document.body.focus();
            } else {
              result = moveFocusInside(workingArea, lastActiveFocus);
              lastPortaledElement = {};
            }
          }
          focusWasOutsideWindow = false;
          lastActiveFocus = document && document.activeElement;
        }
      }

      if (document) {
        const newActiveElement = document && document.activeElement;
        const allNodes = getFocusabledIn(workingArea);
        const focusedItem = allNodes.find(({ node }) => node === newActiveElement);
        if (focusedItem) {
          // remove old focus
          allNodes
            .filter(({ guard, node }) => guard && node.dataset.focusAutoGuard)

if (document && !lastActiveFocus && activeElement && !autoFocus) {
              activeElement.blur();
              document.body.focus();
            } else {
              result = moveFocusInside(workingArea, lastActiveFocus);
              lastPortaledElement = {};
            }
          }
          focusWasOutsideWindow = false;
          lastActiveFocus = document && document.activeElement;
        }
      }

      if (document) {
        const newActiveElement = document && document.activeElement;
        const allNodes = getFocusabledIn(workingArea);
        const focusedItem = allNodes.find(({ node }) => node === newActiveElement);
        if (focusedItem) {
          // remove old focus
          allNodes
            .filter(({ guard, node }) => guard && node.dataset.focusAutoGuard)
            .forEach(({ node }) => node.removeAttribute('tabIndex'));

          const focusedIndex = allNodes.indexOf(focusedItem);
          autoGuard(focusedIndex, allNodes.length, +1, allNodes);
          autoGuard(focusedIndex, -1, -1, allNodes);
        }
      }
    }
  }
  return result;
};

const activateTrap = () => {
  let result = false;
  if (lastActiveTrap) {
    const observed = lastActiveTrap;
    if(!isFreeFocus()) {
      if (observed && !focusInside(observed)) {
        result = moveFocusInside(observed, lastActiveFocus);
      }
      lastActiveFocus = document.activeElement;
    }
  }
  return result;
};

if (workingNode) {
      const workingArea = [
        workingNode,
        ...shards.map(extractRef).filter(Boolean),
      ];

      if (!activeElement || focusWhitelisted(activeElement)) {
        if (
          (persistentFocus || focusWasOutsideWindow)
          || !isFreeFocus()
          || (!lastActiveFocus && autoFocus)
        ) {
          if (
            workingNode
            && !(
              focusInside(workingArea)
              || focusIsPortaledPair(activeElement, workingNode)
            )
          ) {
            if (document && !lastActiveFocus && activeElement && !autoFocus) {
              activeElement.blur();
              document.body.focus();
            } else {
              result = moveFocusInside(workingArea, lastActiveFocus);
              lastPortaledElement = {};
            }
          }
          focusWasOutsideWindow = false;
          lastActiveFocus = document && document.activeElement;
        }
      }

const activateTrap = () => {
  let result = false;
  if (lastActiveTrap) {
    const observed = lastActiveTrap;
    if(!isFreeFocus()) {
      if (observed && !focusInside(observed)) {
        result = moveFocusInside(observed, lastActiveFocus);
      }
      lastActiveFocus = document.activeElement;
    }
  }
  return result;
};

const isFreeFocus = () => focusOnBody() || focusIsHidden();

const isFreeFocus = () => focusOnBody() || focusIsHidden();

const FreeFocusInside = ({ children, className }) => (
  <div>
    {children}
  </div>
);