@ariakit/react-core/cjs/__chunks/BB34VMZX.cjs

Ariakit React core

"use strict";Object.defineProperty(exports, "__esModule", {value: true});

var _T3QB4FR3cjs = require('./T3QB4FR3.cjs');




var _SQLDFLTEcjs = require('./SQLDFLTE.cjs');





var _4KGS3DOWcjs = require('./4KGS3DOW.cjs');

// src/focusable/focusable.tsx





var _events = require('@ariakit/core/utils/events');
var _focus = require('@ariakit/core/utils/focus');



var _misc = require('@ariakit/core/utils/misc');
var _platform = require('@ariakit/core/utils/platform');
var _react = require('react');
var TagName = "div";
var accessibleWhenDisabledSymbol = /* @__PURE__ */ Symbol("accessibleWhenDisabled");
var isSafariBrowser = _platform.isSafari.call(void 0, );
var alwaysFocusVisibleInputTypes = [
  "text",
  "search",
  "url",
  "tel",
  "email",
  "password",
  "number",
  "date",
  "month",
  "week",
  "time",
  "datetime",
  "datetime-local"
];
function isAlwaysFocusVisible(element) {
  const { tagName, readOnly, type } = element;
  if (tagName === "TEXTAREA" && !readOnly) return true;
  if (tagName === "SELECT" && !readOnly) return true;
  if (tagName === "INPUT" && !readOnly) {
    return alwaysFocusVisibleInputTypes.includes(type);
  }
  if (element.isContentEditable) return true;
  const role = element.getAttribute("role");
  if (role === "combobox" && element.dataset.name) {
    return true;
  }
  return false;
}
function isNativeTabbable(tagName) {
  if (!tagName) return true;
  return tagName === "button" || tagName === "summary" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
}
function supportsDisabledAttribute(tagName) {
  if (!tagName) return true;
  return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea";
}
var buttonInputTypes = [
  "button",
  "color",
  "file",
  "image",
  "reset",
  "submit"
];
function needsSafariTabIndex(tagName, inputType) {
  if (tagName === "button") return true;
  if (tagName === "input" && inputType) {
    if (inputType === "checkbox" || inputType === "radio") return true;
    return buttonInputTypes.includes(inputType);
  }
  return false;
}
function getTabIndex({
  focusable,
  trulyDisabled,
  nativeTabbable,
  supportsDisabled,
  safariTabIndex,
  tabIndexProp
}) {
  if (!focusable) return tabIndexProp;
  if (trulyDisabled) {
    if (nativeTabbable && !supportsDisabled) {
      return -1;
    }
    return;
  }
  if (nativeTabbable) {
    if (safariTabIndex && tabIndexProp == null) {
      return 0;
    }
    return tabIndexProp;
  }
  return tabIndexProp != null ? tabIndexProp : 0;
}
function useDisableEvent(onEvent, disabled) {
  return _4KGS3DOWcjs.useEvent.call(void 0, (event) => {
    onEvent == null ? void 0 : onEvent(event);
    if (event.defaultPrevented) return;
    if (disabled) {
      event.stopPropagation();
      event.preventDefault();
    }
  });
}
var hasInstalledGlobalEventListeners = false;
var isKeyboardModality = true;
function onGlobalMouseDown(event) {
  const target = event.target;
  if (target && "hasAttribute" in target) {
    if (!target.hasAttribute("data-focus-visible")) {
      isKeyboardModality = false;
    }
  }
}
function onGlobalKeyDown(event) {
  if (event.metaKey) return;
  if (event.ctrlKey) return;
  if (event.altKey) return;
  isKeyboardModality = true;
}
var useFocusable = _SQLDFLTEcjs.createHook.call(void 0, 
  function useFocusable2({
    focusable = true,
    accessibleWhenDisabled,
    autoFocus,
    onFocusVisible,
    ...props
  }) {
    const ref = _react.useRef.call(void 0, null);
    const [parentAccessibleWhenDisabled, metadataProps] = _4KGS3DOWcjs.useMetadataProps.call(void 0, 
      props,
      accessibleWhenDisabledSymbol,
      accessibleWhenDisabled
    );
    accessibleWhenDisabled != null ? accessibleWhenDisabled : accessibleWhenDisabled = parentAccessibleWhenDisabled;
    _react.useEffect.call(void 0, () => {
      if (!focusable) return;
      if (hasInstalledGlobalEventListeners) return;
      _events.addGlobalEventListener.call(void 0, "mousedown", onGlobalMouseDown, true);
      _events.addGlobalEventListener.call(void 0, "keydown", onGlobalKeyDown, true);
      hasInstalledGlobalEventListeners = true;
    }, [focusable]);
    const disabled = focusable && _misc.disabledFromProps.call(void 0, props);
    const trulyDisabled = disabled && !accessibleWhenDisabled;
    const [focusVisible, setFocusVisible] = _react.useState.call(void 0, false);
    _react.useEffect.call(void 0, () => {
      if (!focusable) return;
      if (trulyDisabled && focusVisible) {
        setFocusVisible(false);
      }
    }, [focusable, trulyDisabled, focusVisible]);
    _react.useEffect.call(void 0, () => {
      if (!focusable) return;
      if (!focusVisible) return;
      const element = ref.current;
      if (!element) return;
      if (typeof IntersectionObserver === "undefined") return;
      const observer = new IntersectionObserver(() => {
        if (!_focus.isFocusable.call(void 0, element)) {
          setFocusVisible(false);
        }
      });
      observer.observe(element);
      return () => observer.disconnect();
    }, [focusable, focusVisible]);
    const onKeyPressCapture = useDisableEvent(
      props.onKeyPressCapture,
      disabled
    );
    const onMouseDownCapture = useDisableEvent(
      props.onMouseDownCapture,
      disabled
    );
    const onClickCapture = useDisableEvent(props.onClickCapture, disabled);
    const handleFocusVisible = (event, currentTarget) => {
      if (currentTarget) {
        event.currentTarget = currentTarget;
      }
      if (!focusable) return;
      const element = event.currentTarget;
      if (!element) return;
      if (!_focus.hasFocus.call(void 0, element)) return;
      onFocusVisible == null ? void 0 : onFocusVisible(event);
      if (event.defaultPrevented) return;
      element.dataset.focusVisible = "true";
      setFocusVisible(true);
    };
    const onKeyDownCaptureProp = props.onKeyDownCapture;
    const onKeyDownCapture = _4KGS3DOWcjs.useEvent.call(void 0, (event) => {
      onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
      if (event.defaultPrevented) return;
      if (!focusable) return;
      if (focusVisible) return;
      if (event.metaKey) return;
      if (event.altKey) return;
      if (event.ctrlKey) return;
      if (!_events.isSelfTarget.call(void 0, event)) return;
      const element = event.currentTarget;
      const applyFocusVisible = () => handleFocusVisible(event, element);
      _events.queueBeforeEvent.call(void 0, element, "focusout", applyFocusVisible);
    });
    const onFocusCaptureProp = props.onFocusCapture;
    const onFocusCapture = _4KGS3DOWcjs.useEvent.call(void 0, (event) => {
      onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
      if (event.defaultPrevented) return;
      if (!focusable) return;
      if (!_events.isSelfTarget.call(void 0, event)) {
        setFocusVisible(false);
        return;
      }
      const element = event.currentTarget;
      const applyFocusVisible = () => handleFocusVisible(event, element);
      if (isKeyboardModality || isAlwaysFocusVisible(event.target)) {
        _events.queueBeforeEvent.call(void 0, event.target, "focusout", applyFocusVisible);
      } else {
        setFocusVisible(false);
      }
    });
    const onBlurProp = props.onBlur;
    const onBlur = _4KGS3DOWcjs.useEvent.call(void 0, (event) => {
      onBlurProp == null ? void 0 : onBlurProp(event);
      if (!focusable) return;
      if (!_events.isFocusEventOutside.call(void 0, event)) return;
      event.currentTarget.removeAttribute("data-focus-visible");
      setFocusVisible(false);
    });
    const autoFocusOnShow = _react.useContext.call(void 0, _T3QB4FR3cjs.FocusableContext);
    const autoFocusRef = _4KGS3DOWcjs.useEvent.call(void 0, (element) => {
      if (!focusable) return;
      if (!autoFocus) return;
      if (!element) return;
      if (!autoFocusOnShow) return;
      queueMicrotask(() => {
        if (_focus.hasFocus.call(void 0, element)) return;
        if (!_focus.isFocusable.call(void 0, element)) return;
        element.focus();
      });
    });
    const tagName = _4KGS3DOWcjs.useTagName.call(void 0, ref);
    const nativeTabbable = focusable && isNativeTabbable(tagName);
    const supportsDisabled = focusable && supportsDisabledAttribute(tagName);
    const [safariTabIndex, setSafariTabIndex] = _react.useState.call(void 0, false);
    if (isSafariBrowser) {
      _react.useEffect.call(void 0, () => {
        if (!focusable) return;
        const element = ref.current;
        if (!element) return;
        const tag = element.tagName.toLowerCase();
        const type = element.type;
        setSafariTabIndex(needsSafariTabIndex(tag, type));
      }, [focusable]);
    }
    const styleProp = props.style;
    const style = _react.useMemo.call(void 0, () => {
      if (trulyDisabled) {
        return { pointerEvents: "none", ...styleProp };
      }
      return styleProp;
    }, [trulyDisabled, styleProp]);
    props = {
      "data-focus-visible": focusable && focusVisible || void 0,
      "data-autofocus": autoFocus || void 0,
      "aria-disabled": disabled || void 0,
      ...props,
      ...metadataProps,
      ref: _4KGS3DOWcjs.useMergeRefs.call(void 0, ref, autoFocusRef, props.ref),
      style,
      tabIndex: getTabIndex({
        focusable,
        trulyDisabled,
        nativeTabbable,
        supportsDisabled,
        safariTabIndex,
        tabIndexProp: props.tabIndex
      }),
      disabled: supportsDisabled && trulyDisabled ? true : void 0,
      // TODO: Test Focusable contentEditable.
      contentEditable: disabled ? void 0 : props.contentEditable,
      onKeyPressCapture,
      onClickCapture,
      onMouseDownCapture,
      onKeyDownCapture,
      onFocusCapture,
      onBlur
    };
    return _misc.removeUndefinedValues.call(void 0, props);
  }
);
var Focusable = _SQLDFLTEcjs.forwardRef.call(void 0, function Focusable2(props) {
  const htmlProps = useFocusable(props);
  return _SQLDFLTEcjs.createElement.call(void 0, TagName, htmlProps);
});




exports.useFocusable = useFocusable; exports.Focusable = Focusable;