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

Ariakit React core

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

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



var _DX5OUXRCcjs = require('../__chunks/DX5OUXRC.cjs');
require('../__chunks/2XVCJUVB.cjs');
require('../__chunks/QM74NV6D.cjs');
require('../__chunks/EOGOO37X.cjs');
require('../__chunks/HAR6UDZU.cjs');
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.tsx
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "button";
var useTab = _SQLDFLTEcjs.createHook.call(void 0, function useTab2({
  store,
  getItem: getItemProp,
  ...props
}) {
  var _a;
  const context = _BESHUAW7cjs.useTabScopedContext.call(void 0, );
  store = store || context;
  _misc.invariant.call(void 0, 
    store,
    process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
  );
  const defaultId = _4KGS3DOWcjs.useId.call(void 0, );
  const id = props.id || defaultId;
  const dimmed = _misc.disabledFromProps.call(void 0, props);
  const getItem = _react.useCallback.call(void 0, 
    (item) => {
      const nextItem = { ...item, dimmed };
      if (getItemProp) {
        return getItemProp(nextItem);
      }
      return nextItem;
    },
    [dimmed, getItemProp]
  );
  const onClickProp = props.onClick;
  const onClick = _4KGS3DOWcjs.useEvent.call(void 0, (event) => {
    onClickProp == null ? void 0 : onClickProp(event);
    if (event.defaultPrevented) return;
    store == null ? void 0 : store.setSelectedId(id);
  });
  const panelId = _RDNUVX4Vcjs.useStoreState.call(void 0, 
    store.panels,
    (state) => {
      var _a2;
      return (_a2 = state.items.find((item) => item.tabId === id)) == null ? void 0 : _a2.id;
    }
  );
  const shouldRegisterItem = defaultId ? props.shouldRegisterItem : false;
  const isActive = _RDNUVX4Vcjs.useStoreState.call(void 0, 
    store,
    (state) => !!id && state.activeId === id
  );
  const selected = _RDNUVX4Vcjs.useStoreState.call(void 0, 
    store,
    (state) => !!id && state.selectedId === id
  );
  const hasActiveItem = _RDNUVX4Vcjs.useStoreState.call(void 0, 
    store,
    (state) => !!store.item(state.activeId)
  );
  const canRegisterComposedItem = isActive || selected && !hasActiveItem;
  const accessibleWhenDisabled = selected || ((_a = props.accessibleWhenDisabled) != null ? _a : true);
  const isWithinVirtualFocusComposite = _RDNUVX4Vcjs.useStoreState.call(void 0, 
    store.combobox || store.composite,
    "virtualFocus"
  );
  if (isWithinVirtualFocusComposite) {
    props = {
      ...props,
      tabIndex: -1
    };
  }
  props = {
    role: "tab",
    "aria-selected": selected,
    "aria-controls": panelId || void 0,
    ...props,
    id,
    onClick
  };
  if (store.composite) {
    const defaultProps = {
      id,
      accessibleWhenDisabled,
      store: store.composite,
      shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem,
      rowId: props.rowId,
      render: props.render
    };
    props = {
      ...props,
      render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
        _DX5OUXRCcjs.CompositeItem,
        {
          ...defaultProps,
          render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DX5OUXRCcjs.CompositeItem, { ...defaultProps, store: store.combobox }) : defaultProps.render
        }
      )
    };
  }
  props = _DX5OUXRCcjs.useCompositeItem.call(void 0, {
    store,
    ...props,
    accessibleWhenDisabled,
    getItem,
    shouldRegisterItem
  });
  return props;
});
var Tab = _SQLDFLTEcjs.memo.call(void 0, 
  _SQLDFLTEcjs.forwardRef.call(void 0, function Tab2(props) {
    const htmlProps = useTab(props);
    return _SQLDFLTEcjs.createElement.call(void 0, TagName, htmlProps);
  })
);



exports.Tab = Tab; exports.useTab = useTab;