'use strict';

var clsx = require('clsx');
var React = require('react');
var useEffectEvent = require('../common/hooks/useEffectEvent.js');
var jsxRuntime = require('react/jsx-runtime');

const noop = () => {};
const Tab = /*#__PURE__*/React.forwardRef(function Tab({
  children,
  id,
  disabled,
  panelId,
  selected,
  onKeyDown,
  onClick,
  style,
  focusTab = noop
}, reference) {
  const handleFocusTab = useEffectEvent.useEffectEvent(focusTab);
  const firstUpdate = React.useRef(true);
  React.useEffect(function checkFocus() {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }
    if (selected) {
      handleFocusTab();
    }
  }, [handleFocusTab, selected]);
  return /*#__PURE__*/jsxRuntime.jsx("li", {
    ref: reference,
    className: clsx.clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
      'tabs__tab--selected': selected,
      clickable: !disabled,
      disabled
    }),
    role: "tab",
    id: id,
    "aria-selected": selected ? 'true' : 'false',
    "aria-disabled": disabled ? 'true' : 'false',
    "aria-controls": disabled ? undefined : panelId,
    tabIndex: 0,
    style: style,
    onKeyDown: disabled ? undefined : onKeyDown,
    onClick: onClick,
    children: /*#__PURE__*/jsxRuntime.jsx("span", {
      className: "tabs__tab__content",
      children: children
    })
  });
});

module.exports = Tab;
//# sourceMappingURL=Tab.js.map
