@ariakit/react-core/cjs/tab/tab-panel.cjs

Ariakit React core

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


var _BESHUAW7cjs = require('../__chunks/BESHUAW7.cjs');


var _DRXSFB5Ocjs = require('../__chunks/DRXSFB5O.cjs');


var _XRHNSFIKcjs = require('../__chunks/XRHNSFIK.cjs');


var _QM74NV6Dcjs = require('../__chunks/QM74NV6D.cjs');
require('../__chunks/WDV6EJ2U.cjs');
require('../__chunks/VFNUZFXS.cjs');
require('../__chunks/EOGOO37X.cjs');


var _BB34VMZXcjs = require('../__chunks/BB34VMZX.cjs');
require('../__chunks/T3QB4FR3.cjs');


var _RDNUVX4Vcjs = require('../__chunks/RDNUVX4V.cjs');
require('../__chunks/ZYZTL3IQ.cjs');




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






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

// src/tab/tab-panel.tsx
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";
var useTabPanel = _SQLDFLTEcjs.createHook.call(void 0, 
  function useTabPanel2({
    store,
    unmountOnHide,
    tabId: tabIdProp,
    getItem: getItemProp,
    scrollRestoration,
    scrollElement,
    ...props
  }) {
    const context = _BESHUAW7cjs.useTabProviderContext.call(void 0, );
    store = store || context;
    _misc.invariant.call(void 0, 
      store,
      process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
    );
    const ref = _react.useRef.call(void 0, null);
    const id = _4KGS3DOWcjs.useId.call(void 0, props.id);
    const tabId = _RDNUVX4Vcjs.useStoreState.call(void 0, 
      store.panels,
      () => {
        var _a;
        return tabIdProp || ((_a = store == null ? void 0 : store.panels.item(id)) == null ? void 0 : _a.tabId);
      }
    );
    const open = _RDNUVX4Vcjs.useStoreState.call(void 0, 
      store,
      (state) => !!tabId && state.selectedId === tabId
    );
    const disclosure = _XRHNSFIKcjs.useDisclosureStore.call(void 0, { open });
    const mounted = _RDNUVX4Vcjs.useStoreState.call(void 0, disclosure, "mounted");
    const scrollPositionRef = _react.useRef.call(void 0, 
      /* @__PURE__ */ new Map()
    );
    const getScrollElement = _4KGS3DOWcjs.useEvent.call(void 0, () => {
      const panelElement = ref.current;
      if (!panelElement) return null;
      if (!scrollElement) return panelElement;
      if (typeof scrollElement === "function") {
        return scrollElement(panelElement);
      }
      if ("current" in scrollElement) {
        return scrollElement.current;
      }
      return scrollElement;
    });
    _react.useEffect.call(void 0, () => {
      var _a, _b;
      if (!scrollRestoration) return;
      if (!mounted) return;
      const element = getScrollElement();
      if (!element) return;
      if (scrollRestoration === "reset") {
        element.scroll(0, 0);
        return;
      }
      if (!tabId) return;
      const position = scrollPositionRef.current.get(tabId);
      element.scroll((_a = position == null ? void 0 : position.x) != null ? _a : 0, (_b = position == null ? void 0 : position.y) != null ? _b : 0);
      const onScroll = () => {
        scrollPositionRef.current.set(tabId, {
          x: element.scrollLeft,
          y: element.scrollTop
        });
      };
      element.addEventListener("scroll", onScroll);
      return () => {
        element.removeEventListener("scroll", onScroll);
      };
    }, [scrollRestoration, mounted, tabId, getScrollElement, store]);
    const [hasTabbableChildren, setHasTabbableChildren] = _react.useState.call(void 0, false);
    _4KGS3DOWcjs.useSafeLayoutEffect.call(void 0, () => {
      if (!mounted) return;
      const element = ref.current;
      if (!element) return;
      setHasTabbableChildren(!!_focus.getAllTabbableIn.call(void 0, element).length);
    }, [mounted]);
    const getItem = _react.useCallback.call(void 0, 
      (item) => {
        const nextItem = { ...item, id: id || item.id, tabId: tabIdProp };
        if (getItemProp) {
          return getItemProp(nextItem);
        }
        return nextItem;
      },
      [id, tabIdProp, getItemProp]
    );
    const onKeyDownProp = props.onKeyDown;
    const onKeyDown = _4KGS3DOWcjs.useEvent.call(void 0, (event) => {
      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
      if (event.defaultPrevented) return;
      if (!(store == null ? void 0 : store.composite)) return;
      const keyMap = {
        ArrowLeft: store.previous,
        ArrowRight: store.next,
        Home: store.first,
        End: store.last
      };
      const action = keyMap[event.key];
      if (!action) return;
      const { selectedId } = store.getState();
      const nextId = action({ activeId: selectedId });
      if (!nextId) return;
      event.preventDefault();
      store.move(nextId);
    });
    props = _4KGS3DOWcjs.useWrapElement.call(void 0, 
      props,
      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BESHUAW7cjs.TabScopedContextProvider, { value: store, children: element }),
      [store]
    );
    props = {
      role: "tabpanel",
      "aria-labelledby": props["aria-label"] != null ? void 0 : tabId || void 0,
      ...props,
      id,
      children: unmountOnHide && !mounted ? null : props.children,
      ref: _4KGS3DOWcjs.useMergeRefs.call(void 0, ref, props.ref),
      onKeyDown
    };
    props = _BB34VMZXcjs.useFocusable.call(void 0, {
      // If the tab panel is rendered as part of another composite widget such
      // as combobox, it should not be focusable.
      focusable: !store.composite && !hasTabbableChildren,
      ...props
    });
    props = _DRXSFB5Ocjs.useDisclosureContent.call(void 0, { store: disclosure, ...props });
    props = _QM74NV6Dcjs.useCollectionItem.call(void 0, { store: store.panels, ...props, getItem });
    return props;
  }
);
var TabPanel = _SQLDFLTEcjs.forwardRef.call(void 0, function TabPanel2(props) {
  const htmlProps = useTabPanel(props);
  return _SQLDFLTEcjs.createElement.call(void 0, TagName, htmlProps);
});



exports.TabPanel = TabPanel; exports.useTabPanel = useTabPanel;