@adecore/ui 0.31.11 → 0.32.0

package/dist/tabs/parts.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Children, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { ChevronDown, X } from 'lucide-react';
@@ -7,12 +7,16 @@ import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.js';
 import { formatNumber } from '../format/number.js';
-import { Icon } from '../Icon.js';
-import { IconButton } from '../IconButton.js';
-import { MenuItem, MenuPopup, MenuRoot, MenuTrigger } from '../menu/parts.js';
-import { Pill } from '../Pill.js';
+import { Icon } from "../Icon.js";
+import { IconButton } from "../IconButton.js";
+import { MenuItem, MenuPopup, MenuRoot, MenuTrigger } from "../menu/parts.js";
+import { Pill } from "../Pill.js";
 import { shownTabs } from './overflow.js';
-const SelectionContext = createContext({ value: undefined, select: () => { } });
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SelectionContext = createContext({
+  value: undefined,
+  select: () => {}
+});
 /* Whether a part is drawn in the menu of tabs that do not fit, where a count goes to the end of its row. */
 const InMenuContext = createContext(false);
 /* The underline sits over the strip's border rather than above it, without a negative margin that would make the strip scroll. */
@@ -24,29 +28,124 @@ const PILL = 'relative flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap
 const PILL_MORE = clsx(PILL, 'ml-auto data-[popup-open]:bg-surface-active data-[popup-open]:text-text');
 const VariantContext = createContext('line');
 const STYLES = {
-    line: { strip: 'gap-4 border-b border-border', list: 'items-end gap-4', row: 'gap-4', tab: TAB, more: MORE },
-    pill: { strip: 'gap-1', list: 'items-center gap-1', row: 'gap-1', tab: PILL, more: PILL_MORE }
+  line: {
+    strip: 'gap-4 border-b border-border',
+    list: 'items-end gap-4',
+    row: 'gap-4',
+    tab: TAB,
+    more: MORE
+  },
+  pill: {
+    strip: 'gap-1',
+    list: 'items-center gap-1',
+    row: 'gap-1',
+    tab: PILL,
+    more: PILL_MORE
+  }
 };
 /* Holds the picked tab itself, uncontrolled or not, so a tab picked from the menu of the strip changes it too. */
-export function TabsRoot({ value, defaultValue = 0, onValueChange, ...props }) {
-    const [own, setOwn] = useState(defaultValue);
-    const controlled = value !== undefined;
-    const current = controlled ? value : own;
-    // The latest handler without a new context for every render of a parent that writes it inline.
-    const latest = useRef(onValueChange);
-    useLayoutEffect(() => {
-        latest.current = onValueChange;
+export function TabsRoot(t0) {
+  const $ = _c(21);
+  let onValueChange;
+  let props;
+  let t1;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      value,
+      defaultValue: t1,
+      onValueChange,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = onValueChange;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = value;
+  } else {
+    onValueChange = $[1];
+    props = $[2];
+    t1 = $[3];
+    value = $[4];
+  }
+  const defaultValue = t1 === undefined ? 0 : t1;
+  const [own, setOwn] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : own;
+  const latest = useRef(onValueChange);
+  let t2;
+  if ($[5] !== onValueChange) {
+    t2 = () => {
+      latest.current = onValueChange;
+    };
+    $[5] = onValueChange;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  useLayoutEffect(t2);
+  let t3;
+  if ($[7] !== controlled) {
+    t3 = next => {
+      if (!controlled) {
+        setOwn(next);
+      }
+      latest.current?.(next);
+    };
+    $[7] = controlled;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const select = t3;
+  let t4;
+  if ($[9] !== current || $[10] !== select) {
+    t4 = {
+      value: current,
+      select
+    };
+    $[9] = current;
+    $[10] = select;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const selection = t4;
+  let t5;
+  if ($[12] !== selection) {
+    t5 = next_0 => selection.select(next_0);
+    $[12] = selection;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== current || $[15] !== props || $[16] !== t5) {
+    t6 = /*#__PURE__*/_jsx(BaseTabs.Root, {
+      value: current,
+      onValueChange: t5,
+      ...props
     });
-    const selection = useMemo(() => {
-        const select = (next) => {
-            if (!controlled) {
-                setOwn(next);
-            }
-            latest.current?.(next);
-        };
-        return { value: current, select };
-    }, [controlled, current]);
-    return (_jsx(SelectionContext, { value: selection, children: _jsx(BaseTabs.Root, { value: current, onValueChange: (next) => selection.select(next), ...props }) }));
+    $[14] = current;
+    $[15] = props;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== selection || $[19] !== t6) {
+    t7 = /*#__PURE__*/_jsx(SelectionContext, {
+      value: selection,
+      children: t6
+    });
+    $[18] = selection;
+    $[19] = t6;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  return t7;
 }
 const sameIndices = (left, right) => left !== null && left.length === right.length && left.every((index, at) => index === right[at]);
 /*
@@ -54,158 +153,673 @@ const sameIndices = (left, right) => left !== null && left.length === right.leng
  * in a row nobody sees, so the strip knows what fits before it draws. The tabs are the direct children,
  * since the menu repeats what a tab holds.
  */
-export function TabsList({ className, children, start, end, after, variant = 'line', overflow = 'menu', ...props }) {
-    const style = STYLES[variant];
-    const { t } = useTranslation('ui');
-    const { value, select } = useContext(SelectionContext);
-    const strip = useRef(null);
-    const measure = useRef(null);
-    const head = useRef(null);
-    const tail = useRef(null);
-    const beside = useRef(null);
-    const list = useRef(null);
-    const scrolls = overflow === 'scroll';
-    // Which edges of a scrolling row still hide a tab, where it fades out.
-    const [edges, setEdges] = useState({ start: false, end: false });
-    // Null until the first measure, which runs before the first paint.
-    const [shown, setShown] = useState(null);
-    const tabs = Children.toArray(children).filter((child) => isValidElement(child) && child.type === TabsTab);
-    const kept = tabs.flatMap((tab, index) => (tab.props.value === value || tab.props.pinned === true ? [index] : []));
-    useLayoutEffect(() => {
-        const host = strip.current;
-        const row = measure.current;
-        if (scrolls || !host || !row) {
-            return;
+export function TabsList(t0) {
+  const $ = _c(48);
+  let after;
+  let children;
+  let className;
+  let end;
+  let props;
+  let start;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      className,
+      children,
+      start,
+      end,
+      after,
+      variant: t1,
+      overflow: t2,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = after;
+    $[2] = children;
+    $[3] = className;
+    $[4] = end;
+    $[5] = props;
+    $[6] = start;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    after = $[1];
+    children = $[2];
+    className = $[3];
+    end = $[4];
+    props = $[5];
+    start = $[6];
+    t1 = $[7];
+    t2 = $[8];
+  }
+  const variant = t1 === undefined ? "line" : t1;
+  const overflow = t2 === undefined ? "menu" : t2;
+  const style = STYLES[variant];
+  const {
+    t
+  } = useTranslation("ui");
+  const {
+    value,
+    select
+  } = useContext(SelectionContext);
+  const strip = useRef(null);
+  const measure = useRef(null);
+  const head = useRef(null);
+  const tail = useRef(null);
+  const beside = useRef(null);
+  const list = useRef(null);
+  const scrolls = overflow === "scroll";
+  let t3;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      start: false,
+      end: false
+    };
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const [edges, setEdges] = useState(t3);
+  const [shown, setShown] = useState(null);
+  const tabs = Children.toArray(children).filter(_temp);
+  let t4;
+  if ($[10] !== value) {
+    t4 = (tab, index) => tab.props.value === value || tab.props.pinned === true ? [index] : [];
+    $[10] = value;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const kept = tabs.flatMap(t4);
+  useLayoutEffect(() => {
+    const host = strip.current;
+    const row = measure.current;
+    if (scrolls || !host || !row) {
+      return;
+    }
+    const fit = () => {
+      const style_0 = getComputedStyle(host);
+      const gap = parseFloat(style_0.columnGap) || 0;
+      const taken = [head.current, beside.current, tail.current].reduce((sum, part) => part === null ? sum : sum + part.getBoundingClientRect().width + gap, 0);
+      const room = host.clientWidth - parseFloat(style_0.paddingLeft) - parseFloat(style_0.paddingRight) - taken;
+      const cells = [...row.children].map(_temp2);
+      const more = cells.pop() ?? 0;
+      const next = shownTabs(cells, room, parseFloat(getComputedStyle(row).columnGap) || 0, more, kept);
+      setShown(current => sameIndices(current, next) ? current : next);
+    };
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(host);
+    observer.observe(row);
+    for (const part_0 of [head.current, beside.current, tail.current]) {
+      if (part_0 !== null) {
+        observer.observe(part_0);
+      }
+    }
+    return () => observer.disconnect();
+  });
+  let t5;
+  if ($[12] !== scrolls) {
+    t5 = () => {
+      const row_0 = list.current;
+      const tab_0 = row_0?.querySelector("[aria-selected=\"true\"]");
+      if (!scrolls || !row_0 || !tab_0) {
+        return;
+      }
+      const strip_0 = row_0.getBoundingClientRect();
+      const picked = tab_0.getBoundingClientRect();
+      if (picked.left < strip_0.left) {
+        row_0.scrollLeft = row_0.scrollLeft - (strip_0.left - picked.left);
+      } else {
+        if (picked.right > strip_0.right) {
+          row_0.scrollLeft = row_0.scrollLeft + (picked.right - strip_0.right);
         }
-        const fit = () => {
-            const style = getComputedStyle(host);
-            const gap = parseFloat(style.columnGap) || 0;
-            const taken = [head.current, beside.current, tail.current].reduce((sum, part) => (part === null ? sum : sum + part.getBoundingClientRect().width + gap), 0);
-            const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - taken;
-            const cells = [...row.children].map((cell) => cell.getBoundingClientRect().width);
-            const more = cells.pop() ?? 0;
-            const next = shownTabs(cells, room, parseFloat(getComputedStyle(row).columnGap) || 0, more, kept);
-            setShown((current) => (sameIndices(current, next) ? current : next));
-        };
-        fit();
-        const observer = new ResizeObserver(fit);
-        observer.observe(host);
-        observer.observe(row);
-        for (const part of [head.current, beside.current, tail.current]) {
-            if (part !== null) {
-                observer.observe(part);
-            }
+      }
+    };
+    $[12] = scrolls;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== scrolls || $[15] !== value) {
+    t6 = [scrolls, value];
+    $[14] = scrolls;
+    $[15] = value;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[17] !== scrolls) {
+    t7 = () => {
+      const row_1 = list.current;
+      if (!scrolls || !row_1) {
+        return;
+      }
+      const measure_0 = () => {
+        const start_0 = row_1.scrollLeft > 0;
+        const end_0 = row_1.scrollLeft + row_1.clientWidth < row_1.scrollWidth - 1;
+        setEdges(current_0 => current_0.start === start_0 && current_0.end === end_0 ? current_0 : {
+          start: start_0,
+          end: end_0
+        });
+      };
+      measure_0();
+      row_1.addEventListener("scroll", measure_0, {
+        passive: true
+      });
+      const observer_0 = new ResizeObserver(measure_0);
+      observer_0.observe(row_1);
+      for (const tab_1 of row_1.children) {
+        observer_0.observe(tab_1);
+      }
+      return () => {
+        row_1.removeEventListener("scroll", measure_0);
+        observer_0.disconnect();
+      };
+    };
+    $[17] = scrolls;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  useEffect(t7);
+  let t8;
+  let t9;
+  if ($[19] !== scrolls) {
+    t8 = () => {
+      const row_2 = list.current;
+      if (!scrolls || !row_2) {
+        return;
+      }
+      const onWheel = event => {
+        if (!event.deltaX && event.deltaY) {
+          row_2.scrollLeft = row_2.scrollLeft + event.deltaY;
         }
-        return () => observer.disconnect();
+      };
+      row_2.addEventListener("wheel", onWheel, {
+        passive: true
+      });
+      return () => row_2.removeEventListener("wheel", onWheel);
+    };
+    t9 = [scrolls];
+    $[19] = scrolls;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t8 = $[20];
+    t9 = $[21];
+  }
+  useEffect(t8, t9);
+  const visible = shown === null ? tabs : shown.map(index_0 => tabs[index_0]);
+  const hidden = shown === null ? [] : tabs.filter((_, index_1) => !shown.includes(index_1));
+  let t10;
+  if ($[22] !== t) {
+    t10 = t("tabs.more");
+    $[22] = t;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronDown,
+      size: 14
     });
-    // A picked tab that scrolled out of sight comes back into it, wherever it was picked from. Only the strip
-    // moves: `scrollIntoView` would scroll every ancestor too, such as a thread that holds a block of tabs.
-    useEffect(() => {
-        const row = list.current;
-        const tab = row?.querySelector('[aria-selected="true"]');
-        if (!scrolls || !row || !tab) {
-            return;
-        }
-        const strip = row.getBoundingClientRect();
-        const picked = tab.getBoundingClientRect();
-        if (picked.left < strip.left) {
-            row.scrollLeft -= strip.left - picked.left;
-        }
-        else if (picked.right > strip.right) {
-            row.scrollLeft += picked.right - strip.right;
-        }
-    }, [scrolls, value]);
-    useEffect(() => {
-        const row = list.current;
-        if (!scrolls || !row) {
-            return;
-        }
-        const measure = () => {
-            const start = row.scrollLeft > 0;
-            const end = row.scrollLeft + row.clientWidth < row.scrollWidth - 1;
-            setEdges((current) => (current.start === start && current.end === end ? current : { start, end }));
-        };
-        measure();
-        row.addEventListener('scroll', measure, { passive: true });
-        const observer = new ResizeObserver(measure);
-        observer.observe(row);
-        for (const tab of row.children) {
-            observer.observe(tab);
-        }
-        return () => {
-            row.removeEventListener('scroll', measure);
-            observer.disconnect();
-        };
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  let t12;
+  if ($[25] !== t10) {
+    t12 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t10, t11]
     });
-    // A mouse wheel only turns vertically, and on a row that scrolls sideways that is the way it should turn.
-    useEffect(() => {
-        const row = list.current;
-        if (!scrolls || !row) {
-            return;
-        }
-        const onWheel = (event) => {
-            if (!event.deltaX && event.deltaY) {
-                row.scrollLeft += event.deltaY;
-            }
-        };
-        row.addEventListener('wheel', onWheel, { passive: true });
-        return () => row.removeEventListener('wheel', onWheel);
-    }, [scrolls]);
-    const visible = shown === null ? tabs : shown.map((index) => tabs[index]);
-    const hidden = shown === null ? [] : tabs.filter((_, index) => !shown.includes(index));
-    const more = (_jsxs(_Fragment, { children: [t('tabs.more'), _jsx(Icon, { icon: ChevronDown, size: 14 })] }));
-    return (_jsx(VariantContext, { value: variant, children: _jsxs("div", { ref: strip, className: clsx('relative flex items-center', style.strip, className), children: [start !== undefined && start !== null && (_jsx("div", { ref: head, className: "flex shrink-0 items-center gap-1", children: start })), _jsx(BaseTabs.List, { ref: list, className: clsx('flex min-w-0', style.list, scrolls && 'tabs-scroll scroll-fade-x'), "data-fade-start": scrolls && edges.start ? '' : undefined, "data-fade-end": scrolls && edges.end ? '' : undefined, ...props, children: visible }), hidden.length > 0 && (_jsxs(MenuRoot, { children: [_jsx(MenuTrigger, { className: style.more, children: more }), _jsx(MenuPopup, { align: "end", className: "min-w-48", children: _jsx(InMenuContext, { value: true, children: hidden.map((tab) => (_jsx(MenuItem, { disabled: tab.props.disabled, onClick: () => select(tab.props.value), children: tab.props.children }, tab.key))) }) })] })), after !== undefined && after !== null && (_jsx("div", { ref: beside, className: "flex shrink-0 items-center gap-1", children: after })), end !== undefined && end !== null && (_jsx("div", { ref: tail, className: clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto'), children: end })), !scrolls && (_jsxs("div", { ref: measure, "aria-hidden": true, inert: true, className: clsx('pointer-events-none invisible absolute top-0 left-0 flex', style.row), children: [tabs.map((tab) => (_jsxs("span", { className: style.tab, children: [tab.props.children, tab.props.onClose !== undefined && tab.props.pinned !== true && _jsx("span", { className: "size-5 shrink-0" })] }, tab.key))), _jsx("span", { className: style.more, children: more })] }))] }) }));
+    $[25] = t10;
+    $[26] = t12;
+  } else {
+    t12 = $[26];
+  }
+  const more_0 = t12;
+  let t13;
+  if ($[27] !== className || $[28] !== style.strip) {
+    t13 = clsx("relative flex items-center", style.strip, className);
+    $[27] = className;
+    $[28] = style.strip;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  const t14 = scrolls && "tabs-scroll scroll-fade-x";
+  let t15;
+  if ($[30] !== style.list || $[31] !== t14) {
+    t15 = clsx("flex min-w-0", style.list, t14);
+    $[30] = style.list;
+    $[31] = t14;
+    $[32] = t15;
+  } else {
+    t15 = $[32];
+  }
+  let t16;
+  if ($[33] !== after || $[34] !== beside) {
+    t16 = after !== undefined && after !== null && /*#__PURE__*/_jsx("div", {
+      ref: beside,
+      className: "flex shrink-0 items-center gap-1",
+      children: after
+    });
+    $[33] = after;
+    $[34] = beside;
+    $[35] = t16;
+  } else {
+    t16 = $[35];
+  }
+  let t17;
+  if ($[36] !== end || $[37] !== hidden || $[38] !== tail) {
+    t17 = end !== undefined && end !== null && /*#__PURE__*/_jsx("div", {
+      ref: tail,
+      className: clsx("flex shrink-0 items-center gap-1", hidden.length === 0 && "ml-auto"),
+      children: end
+    });
+    $[36] = end;
+    $[37] = hidden;
+    $[38] = tail;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+  let t18;
+  if ($[40] !== measure || $[41] !== more_0 || $[42] !== scrolls || $[43] !== style.more || $[44] !== style.row || $[45] !== style.tab || $[46] !== tabs) {
+    t18 = !scrolls && /*#__PURE__*/_jsxs("div", {
+      ref: measure,
+      "aria-hidden": true,
+      inert: true,
+      className: clsx("pointer-events-none invisible absolute top-0 left-0 flex", style.row),
+      children: [tabs.map(tab_3 => /*#__PURE__*/_jsxs("span", {
+        className: style.tab,
+        children: [tab_3.props.children, tab_3.props.onClose !== undefined && tab_3.props.pinned !== true && /*#__PURE__*/_jsx("span", {
+          className: "size-5 shrink-0"
+        })]
+      }, tab_3.key)), /*#__PURE__*/_jsx("span", {
+        className: style.more,
+        children: more_0
+      })]
+    });
+    $[40] = measure;
+    $[41] = more_0;
+    $[42] = scrolls;
+    $[43] = style.more;
+    $[44] = style.row;
+    $[45] = style.tab;
+    $[46] = tabs;
+    $[47] = t18;
+  } else {
+    t18 = $[47];
+  }
+  return /*#__PURE__*/_jsx(VariantContext, {
+    value: variant,
+    children: /*#__PURE__*/_jsxs("div", {
+      ref: strip,
+      className: t13,
+      children: [start !== undefined && start !== null && /*#__PURE__*/_jsx("div", {
+        ref: head,
+        className: "flex shrink-0 items-center gap-1",
+        children: start
+      }), /*#__PURE__*/_jsx(BaseTabs.List, {
+        ref: list,
+        className: t15,
+        "data-fade-start": scrolls && edges.start ? "" : undefined,
+        "data-fade-end": scrolls && edges.end ? "" : undefined,
+        ...props,
+        children: visible
+      }), hidden.length > 0 && /*#__PURE__*/_jsxs(MenuRoot, {
+        children: [/*#__PURE__*/_jsx(MenuTrigger, {
+          className: style.more,
+          children: more_0
+        }), /*#__PURE__*/_jsx(MenuPopup, {
+          align: "end",
+          className: "min-w-48",
+          children: /*#__PURE__*/_jsx(InMenuContext, {
+            value: true,
+            children: hidden.map(tab_2 => /*#__PURE__*/_jsx(MenuItem, {
+              disabled: tab_2.props.disabled,
+              onClick: () => select(tab_2.props.value),
+              children: tab_2.props.children
+            }, tab_2.key))
+          })
+        })]
+      }), t16, t17, t18]
+    })
+  });
 }
 /* The close button stays out of the tab order, so a closable tab is still one stop; the keys close it from the tab itself. */
-export function TabsTab({ className, onClose, pinned = false, children, ...props }) {
-    const { t } = useTranslation('ui');
-    const tab = STYLES[useContext(VariantContext)].tab;
-    if (pinned) {
-        return (_jsx(BaseTabs.Tab, { className: withClass(tab, className), "data-pinned": "", ...props, children: children }));
+function _temp2(cell) {
+  return cell.getBoundingClientRect().width;
+}
+function _temp(child) {
+  return isValidElement(child) && child.type === TabsTab;
+}
+export function TabsTab(t0) {
+  const $ = _c(52);
+  let children;
+  let className;
+  let onClose;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      onClose,
+      pinned: t1,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = onClose;
+    $[4] = props;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    onClose = $[3];
+    props = $[4];
+    t1 = $[5];
+  }
+  const pinned = t1 === undefined ? false : t1;
+  const {
+    t
+  } = useTranslation("ui");
+  const tab = STYLES[useContext(VariantContext)].tab;
+  if (pinned) {
+    let t2;
+    if ($[6] !== className || $[7] !== tab) {
+      t2 = withClass(tab, className);
+      $[6] = className;
+      $[7] = tab;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
     }
-    if (onClose === undefined) {
-        return (_jsx(BaseTabs.Tab, { className: withClass(tab, className), ...props, children: children }));
+    let t3;
+    if ($[9] !== children || $[10] !== props || $[11] !== t2) {
+      t3 = /*#__PURE__*/_jsx(BaseTabs.Tab, {
+        className: t2,
+        "data-pinned": "",
+        ...props,
+        children: children
+      });
+      $[9] = children;
+      $[10] = props;
+      $[11] = t2;
+      $[12] = t3;
+    } else {
+      t3 = $[12];
     }
-    const { onKeyDown, onAuxClick, onMouseDown, ...rest } = props;
-    const handleKeyDown = (e) => {
-        onKeyDown?.(e);
-        if (!e.defaultPrevented && e.target === e.currentTarget && (e.key === 'Delete' || e.key === 'Backspace')) {
-            e.preventDefault();
-            onClose();
-        }
+    return t3;
+  }
+  if (onClose === undefined) {
+    let t2;
+    if ($[13] !== className || $[14] !== tab) {
+      t2 = withClass(tab, className);
+      $[13] = className;
+      $[14] = tab;
+      $[15] = t2;
+    } else {
+      t2 = $[15];
+    }
+    let t3;
+    if ($[16] !== children || $[17] !== props || $[18] !== t2) {
+      t3 = /*#__PURE__*/_jsx(BaseTabs.Tab, {
+        className: t2,
+        ...props,
+        children: children
+      });
+      $[16] = children;
+      $[17] = props;
+      $[18] = t2;
+      $[19] = t3;
+    } else {
+      t3 = $[19];
+    }
+    return t3;
+  }
+  let onAuxClick;
+  let onKeyDown;
+  let onMouseDown;
+  let rest;
+  if ($[20] !== props) {
+    ({
+      onKeyDown,
+      onAuxClick,
+      onMouseDown,
+      ...rest
+    } = props);
+    $[20] = props;
+    $[21] = onAuxClick;
+    $[22] = onKeyDown;
+    $[23] = onMouseDown;
+    $[24] = rest;
+  } else {
+    onAuxClick = $[21];
+    onKeyDown = $[22];
+    onMouseDown = $[23];
+    rest = $[24];
+  }
+  let t2;
+  if ($[25] !== onClose || $[26] !== onKeyDown) {
+    t2 = e => {
+      onKeyDown?.(e);
+      if (!e.defaultPrevented && e.target === e.currentTarget && (e.key === "Delete" || e.key === "Backspace")) {
+        e.preventDefault();
+        onClose();
+      }
     };
-    // A middle press starts autoscroll on some platforms; the release is what closes.
-    const handleMouseDown = (e) => {
-        onMouseDown?.(e);
-        if (e.button === 1) {
-            e.preventDefault();
-        }
+    $[25] = onClose;
+    $[26] = onKeyDown;
+    $[27] = t2;
+  } else {
+    t2 = $[27];
+  }
+  const handleKeyDown = t2;
+  let t3;
+  if ($[28] !== onMouseDown) {
+    t3 = e_0 => {
+      onMouseDown?.(e_0);
+      if (e_0.button === 1) {
+        e_0.preventDefault();
+      }
     };
-    const handleAuxClick = (e) => {
-        onAuxClick?.(e);
-        if (!e.defaultPrevented && e.button === 1) {
-            e.preventDefault();
-            onClose();
-        }
+    $[28] = onMouseDown;
+    $[29] = t3;
+  } else {
+    t3 = $[29];
+  }
+  const handleMouseDown = t3;
+  let t4;
+  if ($[30] !== onAuxClick || $[31] !== onClose) {
+    t4 = e_1 => {
+      onAuxClick?.(e_1);
+      if (!e_1.defaultPrevented && e_1.button === 1) {
+        e_1.preventDefault();
+        onClose();
+      }
+    };
+    $[30] = onAuxClick;
+    $[31] = onClose;
+    $[32] = t4;
+  } else {
+    t4 = $[32];
+  }
+  const handleAuxClick = t4;
+  let t5;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /*#__PURE__*/_jsx("div", {});
+    $[33] = t5;
+  } else {
+    t5 = $[33];
+  }
+  let t6;
+  if ($[34] !== className || $[35] !== tab) {
+    t6 = withClass(tab, className);
+    $[34] = className;
+    $[35] = tab;
+    $[36] = t6;
+  } else {
+    t6 = $[36];
+  }
+  let t7;
+  if ($[37] !== t) {
+    t7 = t("tabs.close");
+    $[37] = t;
+    $[38] = t7;
+  } else {
+    t7 = $[38];
+  }
+  let t8;
+  if ($[39] !== onClose) {
+    t8 = e_2 => {
+      e_2.stopPropagation();
+      onClose();
     };
-    return (_jsxs(BaseTabs.Tab, { nativeButton: false, render: _jsx("div", {}), className: withClass(tab, className), onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onAuxClick: handleAuxClick, ...rest, children: [children, _jsx(IconButton, { icon: X, size: "2xs", label: t('tabs.close'), tabIndex: -1, onClick: (e) => {
-                    e.stopPropagation();
-                    onClose();
-                } })] }));
+    $[39] = onClose;
+    $[40] = t8;
+  } else {
+    t8 = $[40];
+  }
+  let t9;
+  if ($[41] !== t7 || $[42] !== t8) {
+    t9 = /*#__PURE__*/_jsx(IconButton, {
+      icon: X,
+      size: "2xs",
+      label: t7,
+      tabIndex: -1,
+      onClick: t8
+    });
+    $[41] = t7;
+    $[42] = t8;
+    $[43] = t9;
+  } else {
+    t9 = $[43];
+  }
+  let t10;
+  if ($[44] !== children || $[45] !== handleAuxClick || $[46] !== handleKeyDown || $[47] !== handleMouseDown || $[48] !== rest || $[49] !== t6 || $[50] !== t9) {
+    t10 = /*#__PURE__*/_jsxs(BaseTabs.Tab, {
+      nativeButton: false,
+      render: t5,
+      className: t6,
+      onKeyDown: handleKeyDown,
+      onMouseDown: handleMouseDown,
+      onAuxClick: handleAuxClick,
+      ...rest,
+      children: [children, t9]
+    });
+    $[44] = children;
+    $[45] = handleAuxClick;
+    $[46] = handleKeyDown;
+    $[47] = handleMouseDown;
+    $[48] = rest;
+    $[49] = t6;
+    $[50] = t9;
+    $[51] = t10;
+  } else {
+    t10 = $[51];
+  }
+  return t10;
 }
 export const TabsPanel = BaseTabs.Panel;
 /* How much a tab holds, after its label. Nothing at zero: an empty view needs no number to say so. */
-export function TabsCount({ value, render, className, ref, ...props }) {
-    const inMenu = useContext(InMenuContext);
-    const element = useRender({
-        render,
-        ref,
-        defaultTagName: 'span',
-        props: {
-            ...props,
-            children: _jsx(Pill, { className: "tabular-nums", children: formatNumber(value) }),
-            className: clsx('inline-flex shrink-0', inMenu && 'ml-auto', className)
-        }
+export function TabsCount(t0) {
+  const $ = _c(21);
+  let className;
+  let props;
+  let ref;
+  let render;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      value,
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+    $[5] = value;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+    value = $[5];
+  }
+  const inMenu = useContext(InMenuContext);
+  let t1;
+  if ($[6] !== value) {
+    t1 = formatNumber(value);
+    $[6] = value;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Pill, {
+      className: "tabular-nums",
+      children: t1
     });
-    return value === 0 ? null : element;
-}
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const t3 = inMenu && "ml-auto";
+  let t4;
+  if ($[10] !== className || $[11] !== t3) {
+    t4 = clsx("inline-flex shrink-0", t3, className);
+    $[10] = className;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== props || $[14] !== t2 || $[15] !== t4) {
+    t5 = {
+      ...props,
+      children: t2,
+      className: t4
+    };
+    $[13] = props;
+    $[14] = t2;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== ref || $[18] !== render || $[19] !== t5) {
+    t6 = {
+      render,
+      ref,
+      defaultTagName: "span",
+      props: t5
+    };
+    $[17] = ref;
+    $[18] = render;
+    $[19] = t5;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  const element = useRender(t6);
+  return value === 0 ? null : element;
+}