@intility/bifrost-react/dist/components/Tabs/Tabs.Item.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import classNames from "classnames";
import { forwardRef, useContext, useLayoutEffect } from "react";
import { createPortal } from "react-dom";
import useUniqueId from "../../hooks/useUniqueId.js";
import TabsContext from "./TabsContext.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const TabsItem = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(44);
  let activeProp;
  let children;
  let className;
  let content;
  let contentProps;
  let onClick;
  let padding;
  let props;
  let t1;
  let t2;
  let t3;
  if ($[0] !== t0) {
    ({
      active: activeProp,
      onClick,
      children,
      content,
      contentProps,
      padding,
      className,
      disabled: t1,
      noPadding: t2,
      eager: t3,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = activeProp;
    $[2] = children;
    $[3] = className;
    $[4] = content;
    $[5] = contentProps;
    $[6] = onClick;
    $[7] = padding;
    $[8] = props;
    $[9] = t1;
    $[10] = t2;
    $[11] = t3;
  } else {
    activeProp = $[1];
    children = $[2];
    className = $[3];
    content = $[4];
    contentProps = $[5];
    onClick = $[6];
    padding = $[7];
    props = $[8];
    t1 = $[9];
    t2 = $[10];
    t3 = $[11];
  }
  const disabled = t1 === undefined ? false : t1;
  const noPadding = t2 === undefined ? false : t2;
  const eager = t3 === undefined ? false : t3;
  const id = useUniqueId();
  const {
    portal,
    active,
    setActive
  } = useContext(TabsContext);
  const isActive = activeProp ?? (!disabled && active === id);
  let t4;
  let t5;
  if ($[12] !== active || $[13] !== disabled || $[14] !== id || $[15] !== setActive) {
    t4 = () => {
      if (active === null && !disabled) {
        setActive(prevActive => prevActive ?? id);
      }
    };
    t5 = [active, disabled, id, setActive];
    $[12] = active;
    $[13] = disabled;
    $[14] = id;
    $[15] = setActive;
    $[16] = t4;
    $[17] = t5;
  } else {
    t4 = $[16];
    t5 = $[17];
  }
  useLayoutEffect(t4, t5);
  let t6;
  if ($[18] !== className || $[19] !== disabled || $[20] !== isActive) {
    t6 = classNames("bf-tab", className, {
      "bf-tab-active": isActive,
      "bf-tab-disabled": disabled
    });
    $[18] = className;
    $[19] = disabled;
    $[20] = isActive;
    $[21] = t6;
  } else {
    t6 = $[21];
  }
  let t7;
  if ($[22] !== id || $[23] !== onClick || $[24] !== setActive) {
    t7 = onClick ?? (() => setActive(id));
    $[22] = id;
    $[23] = onClick;
    $[24] = setActive;
    $[25] = t7;
  } else {
    t7 = $[25];
  }
  let t8;
  if ($[26] !== children || $[27] !== disabled || $[28] !== props || $[29] !== ref || $[30] !== t6 || $[31] !== t7) {
    t8 = /*#__PURE__*/_jsx("button", {
      type: "button",
      ...props,
      disabled: disabled,
      className: t6,
      onClick: t7,
      ref: ref,
      children: children
    });
    $[26] = children;
    $[27] = disabled;
    $[28] = props;
    $[29] = ref;
    $[30] = t6;
    $[31] = t7;
    $[32] = t8;
  } else {
    t8 = $[32];
  }
  let t9;
  if ($[33] !== content || $[34] !== contentProps || $[35] !== eager || $[36] !== isActive || $[37] !== noPadding || $[38] !== padding || $[39] !== portal) {
    t9 = (isActive || eager) && portal && /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
      hidden: !isActive,
      ...contentProps,
      className: classNames({
        "bf-page-padding": !noPadding && padding === undefined
      }, contentProps?.className),
      style: {
        padding,
        ...contentProps?.style
      },
      children: content
    }), portal);
    $[33] = content;
    $[34] = contentProps;
    $[35] = eager;
    $[36] = isActive;
    $[37] = noPadding;
    $[38] = padding;
    $[39] = portal;
    $[40] = t9;
  } else {
    t9 = $[40];
  }
  let t10;
  if ($[41] !== t8 || $[42] !== t9) {
    t10 = /*#__PURE__*/_jsxs(_Fragment, {
      children: [t8, t9]
    });
    $[41] = t8;
    $[42] = t9;
    $[43] = t10;
  } else {
    t10 = $[43];
  }
  return t10;
});
TabsItem.displayName = "Tabs.Item";
export default TabsItem;