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

Ariakit React core

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





var _MIBORXQWcjs = require('./MIBORXQW.cjs');



var _D6FV6EYScjs = require('./D6FV6EYS.cjs');


var _YUGKYIYYcjs = require('./YUGKYIYY.cjs');




var _WULEED4Qcjs = require('./WULEED4Q.cjs');







var _OZM4QA2Vcjs = require('./OZM4QA2V.cjs');




var _7EQBAZ46cjs = require('./7EQBAZ46.cjs');

// src/composite/composite.tsx
var _array = require('@ariakit/core/utils/array');
var _dom = require('@ariakit/core/utils/dom');




var _events = require('@ariakit/core/utils/events');
var _focus = require('@ariakit/core/utils/focus');
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "div";
function isGrid(items) {
  return items.some((item) => !!item.rowId);
}
function isPrintableKey(event) {
  const target = event.target;
  if (target && !_dom.isTextField.call(void 0, target)) return false;
  return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
}
function isModifierKey(event) {
  return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta";
}
function useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) {
  return _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
    var _a;
    onKeyboardEvent == null ? void 0 : onKeyboardEvent(event);
    if (event.defaultPrevented) return;
    if (event.isPropagationStopped()) return;
    if (!_events.isSelfTarget.call(void 0, event)) return;
    if (isModifierKey(event)) return;
    if (isPrintableKey(event)) return;
    const state = store.getState();
    const activeElement = (_a = _MIBORXQWcjs.getEnabledItem.call(void 0, store, state.activeId)) == null ? void 0 : _a.element;
    if (!activeElement) return;
    const _b = event, { view } = _b, eventInit = _7EQBAZ46cjs.__objRest.call(void 0, _b, ["view"]);
    const previousElement = previousElementRef == null ? void 0 : previousElementRef.current;
    if (activeElement !== previousElement) {
      activeElement.focus();
    }
    if (!_events.fireKeyboardEvent.call(void 0, activeElement, event.type, eventInit)) {
      event.preventDefault();
    }
    if (event.currentTarget.contains(activeElement)) {
      event.stopPropagation();
    }
  });
}
function findFirstEnabledItemInTheLastRow(items) {
  return _MIBORXQWcjs.findFirstEnabledItem.call(void 0, 
    _array.flatten2DArray.call(void 0, _array.reverseArray.call(void 0, _MIBORXQWcjs.groupItemsByRows.call(void 0, items)))
  );
}
function useScheduleFocus(store) {
  const [scheduled, setScheduled] = _react.useState.call(void 0, false);
  const schedule = _react.useCallback.call(void 0, () => setScheduled(true), []);
  const activeItem = store.useState(
    (state) => _MIBORXQWcjs.getEnabledItem.call(void 0, store, state.activeId)
  );
  _react.useEffect.call(void 0, () => {
    const activeElement = activeItem == null ? void 0 : activeItem.element;
    if (!scheduled) return;
    if (!activeElement) return;
    setScheduled(false);
    activeElement.focus({ preventScroll: true });
  }, [activeItem, scheduled]);
  return schedule;
}
var useComposite = _WULEED4Qcjs.createHook.call(void 0, 
  function useComposite2(_a) {
    var _b = _a, {
      store,
      composite = true,
      focusOnMove = composite,
      moveOnKeyPress = true
    } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
      "store",
      "composite",
      "focusOnMove",
      "moveOnKeyPress"
    ]);
    const context = _D6FV6EYScjs.useCompositeProviderContext.call(void 0, );
    store = store || context;
    _misc.invariant.call(void 0, 
      store,
      process.env.NODE_ENV !== "production" && "Composite must receive a `store` prop or be wrapped in a CompositeProvider component."
    );
    const ref = _react.useRef.call(void 0, null);
    const previousElementRef = _react.useRef.call(void 0, null);
    const scheduleFocus = useScheduleFocus(store);
    const moves = store.useState("moves");
    const [, setBaseElement] = _OZM4QA2Vcjs.useTransactionState.call(void 0, 
      composite ? store.setBaseElement : null
    );
    _react.useEffect.call(void 0, () => {
      var _a2;
      if (!store) return;
      if (!moves) return;
      if (!composite) return;
      if (!focusOnMove) return;
      const { activeId: activeId2 } = store.getState();
      const itemElement = (_a2 = _MIBORXQWcjs.getEnabledItem.call(void 0, store, activeId2)) == null ? void 0 : _a2.element;
      if (!itemElement) return;
      _focus.focusIntoView.call(void 0, itemElement);
    }, [store, moves, composite, focusOnMove]);
    _OZM4QA2Vcjs.useSafeLayoutEffect.call(void 0, () => {
      if (!store) return;
      if (!moves) return;
      if (!composite) return;
      const { baseElement, activeId: activeId2 } = store.getState();
      const isSelfAcive = activeId2 === null;
      if (!isSelfAcive) return;
      if (!baseElement) return;
      const previousElement = previousElementRef.current;
      previousElementRef.current = null;
      if (previousElement) {
        _events.fireBlurEvent.call(void 0, previousElement, { relatedTarget: baseElement });
      }
      if (!_focus.hasFocus.call(void 0, baseElement)) {
        baseElement.focus();
      }
    }, [store, moves, composite]);
    const activeId = store.useState("activeId");
    const virtualFocus = store.useState("virtualFocus");
    _OZM4QA2Vcjs.useSafeLayoutEffect.call(void 0, () => {
      var _a2;
      if (!store) return;
      if (!composite) return;
      if (!virtualFocus) return;
      const previousElement = previousElementRef.current;
      previousElementRef.current = null;
      if (!previousElement) return;
      const activeElement = (_a2 = _MIBORXQWcjs.getEnabledItem.call(void 0, store, activeId)) == null ? void 0 : _a2.element;
      const relatedTarget = activeElement || _dom.getActiveElement.call(void 0, previousElement);
      if (relatedTarget === previousElement) return;
      _events.fireBlurEvent.call(void 0, previousElement, { relatedTarget });
    }, [store, activeId, virtualFocus, composite]);
    const onKeyDownCapture = useKeyboardEventProxy(
      store,
      props.onKeyDownCapture,
      previousElementRef
    );
    const onKeyUpCapture = useKeyboardEventProxy(
      store,
      props.onKeyUpCapture,
      previousElementRef
    );
    const onFocusCaptureProp = props.onFocusCapture;
    const onFocusCapture = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
      onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
      if (event.defaultPrevented) return;
      if (!store) return;
      const { virtualFocus: virtualFocus2 } = store.getState();
      if (!virtualFocus2) return;
      const previousActiveElement = event.relatedTarget;
      const isSilentlyFocused = _MIBORXQWcjs.silentlyFocused.call(void 0, event.currentTarget);
      if (_events.isSelfTarget.call(void 0, event) && isSilentlyFocused) {
        event.stopPropagation();
        previousElementRef.current = previousActiveElement;
      }
    });
    const onFocusProp = props.onFocus;
    const onFocus = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
      onFocusProp == null ? void 0 : onFocusProp(event);
      if (event.defaultPrevented) return;
      if (!composite) return;
      if (!store) return;
      const { relatedTarget } = event;
      const { virtualFocus: virtualFocus2 } = store.getState();
      if (virtualFocus2) {
        if (_events.isSelfTarget.call(void 0, event) && !_MIBORXQWcjs.isItem.call(void 0, store, relatedTarget)) {
          queueMicrotask(scheduleFocus);
        }
      } else if (_events.isSelfTarget.call(void 0, event)) {
        store.setActiveId(null);
      }
    });
    const onBlurCaptureProp = props.onBlurCapture;
    const onBlurCapture = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
      var _a2;
      onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
      if (event.defaultPrevented) return;
      if (!store) return;
      const { virtualFocus: virtualFocus2, activeId: activeId2 } = store.getState();
      if (!virtualFocus2) return;
      const activeElement = (_a2 = _MIBORXQWcjs.getEnabledItem.call(void 0, store, activeId2)) == null ? void 0 : _a2.element;
      const nextActiveElement = event.relatedTarget;
      const nextActiveElementIsItem = _MIBORXQWcjs.isItem.call(void 0, store, nextActiveElement);
      const previousElement = previousElementRef.current;
      previousElementRef.current = null;
      if (_events.isSelfTarget.call(void 0, event) && nextActiveElementIsItem) {
        if (nextActiveElement === activeElement) {
          if (previousElement && previousElement !== nextActiveElement) {
            _events.fireBlurEvent.call(void 0, previousElement, event);
          }
        } else if (activeElement) {
          _events.fireBlurEvent.call(void 0, activeElement, event);
        } else if (previousElement) {
          _events.fireBlurEvent.call(void 0, previousElement, event);
        }
        event.stopPropagation();
      } else {
        const targetIsItem = _MIBORXQWcjs.isItem.call(void 0, store, event.target);
        if (!targetIsItem && activeElement) {
          _events.fireBlurEvent.call(void 0, activeElement, event);
        }
      }
    });
    const onKeyDownProp = props.onKeyDown;
    const moveOnKeyPressProp = _OZM4QA2Vcjs.useBooleanEvent.call(void 0, moveOnKeyPress);
    const onKeyDown = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
      var _a2;
      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
      if (event.nativeEvent.isComposing) return;
      if (event.defaultPrevented) return;
      if (!store) return;
      if (!_events.isSelfTarget.call(void 0, event)) return;
      const { orientation, renderedItems, activeId: activeId2 } = store.getState();
      const activeItem = _MIBORXQWcjs.getEnabledItem.call(void 0, store, activeId2);
      if ((_a2 = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a2.isConnected) return;
      const isVertical = orientation !== "horizontal";
      const isHorizontal = orientation !== "vertical";
      const grid = isGrid(renderedItems);
      const isHorizontalKey = event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End";
      if (isHorizontalKey && _dom.isTextField.call(void 0, event.currentTarget)) return;
      const up = () => {
        if (grid) {
          const item = findFirstEnabledItemInTheLastRow(renderedItems);
          return item == null ? void 0 : item.id;
        }
        return store == null ? void 0 : store.last();
      };
      const keyMap = {
        ArrowUp: (grid || isVertical) && up,
        ArrowRight: (grid || isHorizontal) && store.first,
        ArrowDown: (grid || isVertical) && store.first,
        ArrowLeft: (grid || isHorizontal) && store.last,
        Home: store.first,
        End: store.last,
        PageUp: store.first,
        PageDown: store.last
      };
      const action = keyMap[event.key];
      if (action) {
        const id = action();
        if (id !== void 0) {
          if (!moveOnKeyPressProp(event)) return;
          event.preventDefault();
          store.move(id);
        }
      }
    });
    props = _OZM4QA2Vcjs.useWrapElement.call(void 0, 
      props,
      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _D6FV6EYScjs.CompositeContextProvider, { value: store, children: element }),
      [store]
    );
    const activeDescendant = store.useState((state) => {
      var _a2;
      if (!store) return;
      if (!composite) return;
      if (!state.virtualFocus) return;
      return (_a2 = _MIBORXQWcjs.getEnabledItem.call(void 0, store, state.activeId)) == null ? void 0 : _a2.id;
    });
    props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
      "aria-activedescendant": activeDescendant
    }, props), {
      ref: _OZM4QA2Vcjs.useMergeRefs.call(void 0, ref, setBaseElement, props.ref),
      onKeyDownCapture,
      onKeyUpCapture,
      onFocusCapture,
      onFocus,
      onBlurCapture,
      onKeyDown
    });
    const focusable = store.useState(
      (state) => composite && (state.virtualFocus || state.activeId === null)
    );
    props = _YUGKYIYYcjs.useFocusable.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { focusable }, props));
    return props;
  }
);
var Composite = _WULEED4Qcjs.forwardRef.call(void 0, function Composite2(props) {
  const htmlProps = useComposite(props);
  return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps);
});




exports.useComposite = useComposite; exports.Composite = Composite;