@redsift/design-system 11.5.0-muiv5 → 11.6.0-alpha.0

package/_internal/useFocusRing.js

@@ -0,0 +1,669 @@
+import React__default, { useRef, useCallback, useEffect, useState } from 'react';
+import { a as _defineProperty } from './_rollupPluginBabelHelpers.js';
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// During SSR, React emits a warning when calling useLayoutEffect.
+// Since neither useLayoutEffect nor useEffect run on the server,
+// we can suppress this by replace it with a noop on the server.
+const useLayoutEffect = typeof document !== 'undefined' ? React__default.useLayoutEffect : () => {};
+
+const getOwnerDocument = el => {
+  var _el$ownerDocument;
+  return (_el$ownerDocument = el === null || el === void 0 ? void 0 : el.ownerDocument) !== null && _el$ownerDocument !== void 0 ? _el$ownerDocument : document;
+};
+const getOwnerWindow = el => {
+  if (el && 'window' in el && el.window === el) {
+    return el;
+  }
+  const doc = getOwnerDocument(el);
+  return doc.defaultView || window;
+};
+
+/* eslint-disable prefer-const */
+// @ts-nocheck
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+function testUserAgent(re) {
+  var _window$navigator$use;
+  if (typeof window === 'undefined' || window.navigator == null) {
+    return false;
+  }
+  return ((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.brands.some(brand => re.test(brand.brand))) || re.test(window.navigator.userAgent);
+}
+function testPlatform(re) {
+  var _window$navigator$use2;
+  return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use2 = window.navigator['userAgentData']) === null || _window$navigator$use2 === void 0 ? void 0 : _window$navigator$use2.platform) || window.navigator.platform) : false;
+}
+function cached(fn) {
+  if (process.env.NODE_ENV === 'test') {
+    return fn;
+  }
+  let res = null;
+  return () => {
+    if (res == null) {
+      res = fn();
+    }
+    return res;
+  };
+}
+const isMac = cached(function () {
+  return testPlatform(/^Mac/i);
+});
+const isIPhone = cached(function () {
+  return testPlatform(/^iPhone/i);
+});
+const isIPad = cached(function () {
+  return testPlatform(/^iPad/i) ||
+  // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  isMac() && navigator.maxTouchPoints > 1;
+});
+const isIOS = cached(function () {
+  return isIPhone() || isIPad();
+});
+cached(function () {
+  return isMac() || isIOS();
+});
+const isWebKit = cached(function () {
+  return testUserAgent(/AppleWebKit/i) && !isChrome();
+});
+const isChrome = cached(function () {
+  return testUserAgent(/Chrome/i);
+});
+const isAndroid = cached(function () {
+  return testUserAgent(/Android/i);
+});
+const isFirefox = cached(function () {
+  return testUserAgent(/Firefox/i);
+});
+
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+function useEffectEvent(fn) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  // @ts-ignore
+  return useCallback(function () {
+    const f = ref.current;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return f === null || f === void 0 ? void 0 : f(...args);
+  }, []);
+}
+
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Original licensing for the following method can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87
+
+// Keyboards, Assistive Technologies, and element.click() all produce a "virtual"
+// click event. This is a method of inferring such clicks. Every browser except
+// IE 11 only sets a zero value of "detail" for click events that are "virtual".
+// However, IE 11 uses a zero value for all click events. For IE 11 we rely on
+// the quirk that it produces click events that are of type PointerEvent, and
+// where only the "virtual" click lacks a pointerType field.
+
+function isVirtualClick(event) {
+  // JAWS/NVDA with Firefox.
+  if (event.mozInputSource === 0 && event.isTrusted) {
+    return true;
+  }
+
+  // Android TalkBack's detail value varies depending on the event listener providing the event so we have specific logic here instead
+  // If pointerType is defined, event is from a click listener. For events from mousedown listener, detail === 0 is a sufficient check
+  // to detect TalkBack virtual clicks.
+  if (isAndroid() && event.pointerType) {
+    return event.type === 'click' && event.buttons === 1;
+  }
+  return event.detail === 0 && !event.pointerType;
+}
+function isVirtualPointerEvent(event) {
+  // If the pointer size is zero, then we assume it's from a screen reader.
+  // Android TalkBack double tap will sometimes return a event with width and height of 1
+  // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
+  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
+  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
+  // Talkback double tap from Windows Firefox touch screen press
+  return !isAndroid() && event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse';
+}
+
+class SyntheticFocusEvent {
+  constructor(type, nativeEvent) {
+    _defineProperty(this, "nativeEvent", void 0);
+    _defineProperty(this, "target", void 0);
+    _defineProperty(this, "currentTarget", void 0);
+    _defineProperty(this, "relatedTarget", void 0);
+    _defineProperty(this, "bubbles", void 0);
+    _defineProperty(this, "cancelable", void 0);
+    _defineProperty(this, "defaultPrevented", void 0);
+    _defineProperty(this, "eventPhase", void 0);
+    _defineProperty(this, "isTrusted", void 0);
+    _defineProperty(this, "timeStamp", void 0);
+    _defineProperty(this, "type", void 0);
+    this.nativeEvent = nativeEvent;
+    this.target = nativeEvent.target;
+    this.currentTarget = nativeEvent.currentTarget;
+    this.relatedTarget = nativeEvent.relatedTarget;
+    this.bubbles = nativeEvent.bubbles;
+    this.cancelable = nativeEvent.cancelable;
+    this.defaultPrevented = nativeEvent.defaultPrevented;
+    this.eventPhase = nativeEvent.eventPhase;
+    this.isTrusted = nativeEvent.isTrusted;
+    this.timeStamp = nativeEvent.timeStamp;
+    this.type = type;
+  }
+  isDefaultPrevented() {
+    return this.nativeEvent.defaultPrevented;
+  }
+  preventDefault() {
+    this.defaultPrevented = true;
+    this.nativeEvent.preventDefault();
+  }
+  stopPropagation() {
+    this.nativeEvent.stopPropagation();
+    this.isPropagationStopped = () => true;
+  }
+  isPropagationStopped() {
+    return false;
+  }
+  persist() {}
+}
+function useSyntheticBlurEvent(onBlur) {
+  let stateRef = useRef({
+    isFocused: false,
+    observer: null
+  });
+
+  // Clean up MutationObserver on unmount. See below.
+  // eslint-disable-next-line arrow-body-style
+  useLayoutEffect(() => {
+    const state = stateRef.current;
+    return () => {
+      if (state.observer) {
+        state.observer.disconnect();
+        state.observer = null;
+      }
+    };
+  }, []);
+  let dispatchBlur = useEffectEvent(e => {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  });
+
+  // This function is called during a React onFocus event.
+  return useCallback(e => {
+    // React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
+    // Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
+    // MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
+    // For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
+    if (e.target instanceof HTMLButtonElement || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) {
+      stateRef.current.isFocused = true;
+      let target = e.target;
+      let onBlurHandler = e => {
+        stateRef.current.isFocused = false;
+        if (target.disabled) {
+          // For backward compatibility, dispatch a (fake) React synthetic event.
+          dispatchBlur(new SyntheticFocusEvent('blur', e));
+        }
+
+        // We no longer need the MutationObserver once the target is blurred.
+        if (stateRef.current.observer) {
+          stateRef.current.observer.disconnect();
+          stateRef.current.observer = null;
+        }
+      };
+      target.addEventListener('focusout', onBlurHandler, {
+        once: true
+      });
+      stateRef.current.observer = new MutationObserver(() => {
+        if (stateRef.current.isFocused && target.disabled) {
+          var _stateRef$current$obs;
+          (_stateRef$current$obs = stateRef.current.observer) === null || _stateRef$current$obs === void 0 ? void 0 : _stateRef$current$obs.disconnect();
+          let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
+          target.dispatchEvent(new FocusEvent('blur', {
+            relatedTarget: relatedTargetEl
+          }));
+          target.dispatchEvent(new FocusEvent('focusout', {
+            bubbles: true,
+            relatedTarget: relatedTargetEl
+          }));
+        }
+      });
+      stateRef.current.observer.observe(target, {
+        attributes: true,
+        attributeFilter: ['disabled']
+      });
+    }
+  }, [dispatchBlur]);
+}
+
+/* eslint-disable prefer-const */
+/**
+ * Handles focus events for the immediate target.
+ * Focus events on child elements will be ignored.
+ */
+function useFocus(props) {
+  let {
+    isDisabled,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    onFocusChange
+  } = props;
+  const onBlur = useCallback(e => {
+    if (e.target === e.currentTarget) {
+      if (onBlurProp) {
+        onBlurProp(e);
+      }
+      if (onFocusChange) {
+        onFocusChange(false);
+      }
+      return true;
+    }
+  }, [onBlurProp, onFocusChange]);
+  const onSyntheticFocus = useSyntheticBlurEvent(onBlur);
+  const onFocus = useCallback(e => {
+    // Double check that document.activeElement actually matches e.target in case a previously chained
+    // focus handler already moved focus somewhere else.
+
+    const ownerDocument = getOwnerDocument(e.target);
+    if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
+      if (onFocusProp) {
+        onFocusProp(e);
+      }
+      if (onFocusChange) {
+        onFocusChange(true);
+      }
+      onSyntheticFocus(e);
+    }
+  }, [onFocusChange, onFocusProp, onSyntheticFocus]);
+  return {
+    focusProps: {
+      onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
+      onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : undefined
+    }
+  };
+}
+
+/* eslint-disable prefer-const */
+let currentModality = null;
+let changeHandlers = new Set();
+let hasSetupGlobalListeners = new Map(); // We use a map here to support setting event listeners across multiple document objects.
+let hasEventBeforeFocus = false;
+let hasBlurredWindowRecently = false;
+
+// Only Tab or Esc keys will make focus visible on text input elements
+const FOCUS_VISIBLE_INPUT_KEYS = {
+  Tab: true,
+  Escape: true
+};
+function triggerChangeHandlers(modality, e) {
+  for (let handler of changeHandlers) {
+    handler(modality, e);
+  }
+}
+
+/**
+ * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
+ */
+function isValidKey(e) {
+  // Control and Shift keys trigger when navigating back to the tab with keyboard.
+  return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');
+}
+function handleKeyboardEvent(e) {
+  hasEventBeforeFocus = true;
+  if (isValidKey(e)) {
+    currentModality = 'keyboard';
+    triggerChangeHandlers('keyboard', e);
+  }
+}
+function handlePointerEvent(e) {
+  currentModality = 'pointer';
+  if (e.type === 'mousedown' || e.type === 'pointerdown') {
+    hasEventBeforeFocus = true;
+    triggerChangeHandlers('pointer', e);
+  }
+}
+function handleClickEvent(e) {
+  if (isVirtualClick(e)) {
+    hasEventBeforeFocus = true;
+    currentModality = 'virtual';
+  }
+}
+function handleFocusEvent(e) {
+  // Firefox fires two extra focus events when the user first clicks into an iframe:
+  // first on the window, then on the document. We ignore these events so they don't
+  // cause keyboard focus rings to appear.
+  if (e.target === window || e.target === document) {
+    return;
+  }
+
+  // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
+  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
+  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
+    currentModality = 'virtual';
+    triggerChangeHandlers('virtual', e);
+  }
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = false;
+}
+function handleWindowBlur() {
+  // When the window is blurred, reset state. This is necessary when tabbing out of the window,
+  // for example, since a subsequent focus event won't be fired.
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = true;
+}
+
+/**
+ * Setup global event listeners to control when keyboard focus style should be visible.
+ */
+function setupGlobalFocusEvents(element) {
+  if (typeof window === 'undefined' || hasSetupGlobalListeners.get(getOwnerWindow(element))) {
+    return;
+  }
+  const windowObject = getOwnerWindow(element);
+  const documentObject = getOwnerDocument(element);
+
+  // Programmatic focus() calls shouldn't affect the current input modality.
+  // However, we need to detect other cases when a focus event occurs without
+  // a preceding user event (e.g. screen reader focus). Overriding the focus
+  // method on HTMLElement.prototype is a bit hacky, but works.
+  let focus = windowObject.HTMLElement.prototype.focus;
+  windowObject.HTMLElement.prototype.focus = function () {
+    hasEventBeforeFocus = true;
+    focus.apply(this, arguments);
+  };
+  documentObject.addEventListener('keydown', handleKeyboardEvent, true);
+  documentObject.addEventListener('keyup', handleKeyboardEvent, true);
+  documentObject.addEventListener('click', handleClickEvent, true);
+
+  // Register focus events on the window so they are sure to happen
+  // before React's event listeners (registered on the document).
+  windowObject.addEventListener('focus', handleFocusEvent, true);
+  windowObject.addEventListener('blur', handleWindowBlur, false);
+  if (typeof PointerEvent !== 'undefined') {
+    documentObject.addEventListener('pointerdown', handlePointerEvent, true);
+    documentObject.addEventListener('pointermove', handlePointerEvent, true);
+    documentObject.addEventListener('pointerup', handlePointerEvent, true);
+  } else {
+    documentObject.addEventListener('mousedown', handlePointerEvent, true);
+    documentObject.addEventListener('mousemove', handlePointerEvent, true);
+    documentObject.addEventListener('mouseup', handlePointerEvent, true);
+  }
+
+  // Add unmount handler
+  windowObject.addEventListener('beforeunload', () => {
+    tearDownWindowFocusTracking(element);
+  }, {
+    once: true
+  });
+  hasSetupGlobalListeners.set(windowObject, {
+    focus
+  });
+}
+const tearDownWindowFocusTracking = (element, loadListener) => {
+  const windowObject = getOwnerWindow(element);
+  const documentObject = getOwnerDocument(element);
+  if (loadListener) {
+    documentObject.removeEventListener('DOMContentLoaded', loadListener);
+  }
+  if (!hasSetupGlobalListeners.has(windowObject)) {
+    return;
+  }
+  windowObject.HTMLElement.prototype.focus = hasSetupGlobalListeners.get(windowObject).focus;
+  documentObject.removeEventListener('keydown', handleKeyboardEvent, true);
+  documentObject.removeEventListener('keyup', handleKeyboardEvent, true);
+  documentObject.removeEventListener('click', handleClickEvent, true);
+  windowObject.removeEventListener('focus', handleFocusEvent, true);
+  windowObject.removeEventListener('blur', handleWindowBlur, false);
+  if (typeof PointerEvent !== 'undefined') {
+    documentObject.removeEventListener('pointerdown', handlePointerEvent, true);
+    documentObject.removeEventListener('pointermove', handlePointerEvent, true);
+    documentObject.removeEventListener('pointerup', handlePointerEvent, true);
+  } else {
+    documentObject.removeEventListener('mousedown', handlePointerEvent, true);
+    documentObject.removeEventListener('mousemove', handlePointerEvent, true);
+    documentObject.removeEventListener('mouseup', handlePointerEvent, true);
+  }
+  hasSetupGlobalListeners.delete(windowObject);
+};
+
+/**
+ * EXPERIMENTAL
+ * Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.
+ *
+ * Sometimes apps render portions of their tree into an iframe. In this case, we cannot accurately track if the focus
+ * is visible because we cannot see interactions inside the iframe. If you have this in your application's architecture,
+ * then this function will attach event listeners inside the iframe. You should call `addWindowFocusTracking` with an
+ * element from inside the window you wish to add. We'll retrieve the relevant elements based on that.
+ * Note, you do not need to call this for the default window, as we call it for you.
+ *
+ * When you are ready to stop listening, but you do not wish to unmount the iframe, you may call the cleanup function
+ * returned by `addWindowFocusTracking`. Otherwise, when you unmount the iframe, all listeners and state will be cleaned
+ * up automatically for you.
+ *
+ * @param element @default document.body - The element provided will be used to get the window to add.
+ * @returns A function to remove the event listeners and cleanup the state.
+ */
+function addWindowFocusTracking(element) {
+  const documentObject = getOwnerDocument(element);
+  let loadListener;
+  if (documentObject.readyState !== 'loading') {
+    setupGlobalFocusEvents(element);
+  } else {
+    loadListener = () => {
+      setupGlobalFocusEvents(element);
+    };
+    documentObject.addEventListener('DOMContentLoaded', loadListener);
+  }
+  return () => tearDownWindowFocusTracking(element, loadListener);
+}
+
+// Server-side rendering does not have the document object defined
+// eslint-disable-next-line no-restricted-globals
+if (typeof document !== 'undefined') {
+  addWindowFocusTracking();
+}
+
+/**
+ * If true, keyboard focus is visible.
+ */
+function isFocusVisible() {
+  return currentModality !== 'pointer';
+}
+function getInteractionModality() {
+  return currentModality;
+}
+function setInteractionModality(modality) {
+  currentModality = modality;
+  triggerChangeHandlers(modality, null);
+}
+const nonTextInputTypes = new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset']);
+
+/**
+ * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that
+ * focus visible style can be properly set.
+ */
+function isKeyboardFocusEvent(isTextInput, modality, e) {
+  var _e$target;
+  const IHTMLInputElement = typeof window !== 'undefined' ? getOwnerWindow(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement;
+  const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement;
+  const IHTMLElement = typeof window !== 'undefined' ? getOwnerWindow(e === null || e === void 0 ? void 0 : e.target).HTMLElement : HTMLElement;
+  const IKeyboardEvent = typeof window !== 'undefined' ? getOwnerWindow(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
+  isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLInputElement && !nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable);
+  return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
+}
+
+/**
+ * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
+ */
+function useFocusVisibleListener(fn, deps, opts) {
+  setupGlobalFocusEvents();
+  useEffect(() => {
+    let handler = (modality, e) => {
+      if (!isKeyboardFocusEvent(!!(opts !== null && opts !== void 0 && opts.isTextInput), modality, e)) {
+        return;
+      }
+      fn(isFocusVisible());
+    };
+    changeHandlers.add(handler);
+    return () => {
+      changeHandlers.delete(handler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}
+
+/* eslint-disable prefer-const */
+/**
+ * Handles focus events for the target and its descendants.
+ */
+function useFocusWithin(props) {
+  let {
+    isDisabled,
+    onBlurWithin,
+    onFocusWithin,
+    onFocusWithinChange
+  } = props;
+  let state = useRef({
+    isFocusWithin: false
+  });
+  let onBlur = useCallback(e => {
+    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
+    // when moving focus inside the element. Only trigger if the currentTarget doesn't
+    // include the relatedTarget (where focus is moving).
+    if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
+      state.current.isFocusWithin = false;
+      if (onBlurWithin) {
+        onBlurWithin(e);
+      }
+      if (onFocusWithinChange) {
+        onFocusWithinChange(false);
+      }
+    }
+  }, [onBlurWithin, onFocusWithinChange, state]);
+  let onSyntheticFocus = useSyntheticBlurEvent(onBlur);
+  let onFocus = useCallback(e => {
+    // Double check that document.activeElement actually matches e.target in case a previously chained
+    // focus handler already moved focus somewhere else.
+    if (!state.current.isFocusWithin && document.activeElement === e.target) {
+      if (onFocusWithin) {
+        onFocusWithin(e);
+      }
+      if (onFocusWithinChange) {
+        onFocusWithinChange(true);
+      }
+      state.current.isFocusWithin = true;
+      onSyntheticFocus(e);
+    }
+  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus]);
+  if (isDisabled) {
+    return {
+      focusWithinProps: {
+        // These should not have been null, that would conflict in mergeProps
+        onFocus: undefined,
+        onBlur: undefined
+      }
+    };
+  }
+  return {
+    focusWithinProps: {
+      onFocus,
+      onBlur
+    }
+  };
+}
+
+/* eslint-disable prefer-const */
+/**
+ * Determines whether a focus ring should be shown to indicate keyboard focus.
+ * Focus rings are visible only when the user is interacting with a keyboard,
+ * not with a mouse, touch, or other input methods.
+ */
+function useFocusRing() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let {
+    autoFocus = false,
+    isTextInput,
+    within
+  } = props;
+  let state = useRef({
+    isFocused: false,
+    isFocusVisible: autoFocus || isFocusVisible()
+  });
+  let [isFocused, setFocused] = useState(false);
+  let [isFocusVisibleState, setFocusVisible] = useState(() => state.current.isFocused && state.current.isFocusVisible);
+  let updateState = useCallback(() => setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
+  let onFocusChange = useCallback(isFocused => {
+    state.current.isFocused = isFocused;
+    setFocused(isFocused);
+    updateState();
+  }, [updateState]);
+  useFocusVisibleListener(isFocusVisible => {
+    state.current.isFocusVisible = isFocusVisible;
+    updateState();
+  }, [], {
+    isTextInput
+  });
+  let {
+    focusProps
+  } = useFocus({
+    isDisabled: within,
+    onFocusChange
+  });
+  let {
+    focusWithinProps
+  } = useFocusWithin({
+    isDisabled: !within,
+    onFocusWithinChange: onFocusChange
+  });
+  return {
+    isFocused,
+    isFocusVisible: isFocusVisibleState,
+    focusProps: within ? focusWithinProps : focusProps
+  };
+}
+
+export { useFocusWithin as a, useLayoutEffect as b, isMac as c, isWebKit as d, isIPad as e, useEffectEvent as f, isIOS as g, getOwnerDocument as h, isFirefox as i, isVirtualPointerEvent as j, isVirtualClick as k, getOwnerWindow as l, getInteractionModality as m, useFocus as n, isIPhone as o, isAndroid as p, setInteractionModality as s, useFocusRing as u };
+//# sourceMappingURL=useFocusRing.js.map