@adecore/ui 0.25.9 → 0.26.1

package/dist/tabs/overflow.d.ts

@@ -1 +1 @@
-export declare const shownTabs: (widths: readonly number[], room: number, gap: number, more: number, picked: number) => number[];
+export declare const shownTabs: (widths: readonly number[], room: number, gap: number, more: number, kept: readonly number[]) => number[];

package/dist/tabs/overflow.js

@@ -1,10 +1,10 @@
 /*
  * The tabs a strip shows, by index, given the width of every tab, the room the strip has, the gap
  * between two tabs and the width of the button that opens the rest. Everything fits, or the tabs fit
- * from the start up to the button. The picked tab is never left to the menu: it takes the place of
- * the last ones that no longer fit beside it.
+ * from the start up to the button. The kept tabs (the picked one, the pinned ones) are never left to
+ * the menu: they take the place of the last ones that no longer fit beside them.
  */
-export const shownTabs = (widths, room, gap, more, picked) => {
+export const shownTabs = (widths, room, gap, more, kept) => {
     const span = (indices) => indices.reduce((sum, index) => sum + widths[index], 0) + gap * Math.max(0, indices.length - 1);
     const all = widths.map((_, index) => index);
     // Half a pixel of slack, since a measured width is fractional and the room is not.
@@ -12,18 +12,16 @@ export const shownTabs = (widths, room, gap, more, picked) => {
         return all;
     }
     const limit = room - more - gap + 0.5;
+    const held = all.filter((index) => kept.includes(index));
     const shown = [];
     for (const index of all) {
-        if (span([...shown, index]) > limit) {
+        if (held.includes(index)) {
+            continue;
+        }
+        if (span([...held, ...shown, index]) > limit) {
             break;
         }
         shown.push(index);
     }
-    if (picked < 0 || picked >= widths.length || shown.includes(picked)) {
-        return shown;
-    }
-    while (shown.length > 0 && span([...shown, picked]) > limit) {
-        shown.pop();
-    }
-    return [...shown, picked];
+    return [...held, ...shown].sort((left, right) => left - right);
 };

package/dist/tabs/parts.d.ts

@@ -19,8 +19,9 @@ export declare function TabsList({ className, children, start, end, after, varia
 type TabProps = ComponentProps<typeof BaseTabs.Tab>;
 export type TabsTabProps = TabProps & {
     onClose?(): void;
+    pinned?: boolean;
 };
-export declare function TabsTab({ className, onClose, children, ...props }: TabsTabProps): import("react").JSX.Element;
+export declare function TabsTab({ className, onClose, pinned, children, ...props }: TabsTabProps): import("react").JSX.Element;
 export declare const TabsPanel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type TabsCountProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
     value: number;

package/dist/tabs/parts.js

@@ -70,7 +70,7 @@ export function TabsList({ className, children, start, end, after, variant = 'li
     // 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 picked = tabs.findIndex((tab) => tab.props.value === value);
+    const kept = tabs.flatMap((tab, index) => (tab.props.value === value || tab.props.pinned === true ? [index] : []));
     useLayoutEffect(() => {
         const host = strip.current;
         const row = measure.current;
@@ -84,7 +84,7 @@ export function TabsList({ className, children, start, end, after, variant = 'li
             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, picked);
+            const next = shownTabs(cells, room, parseFloat(getComputedStyle(row).columnGap) || 0, more, kept);
             setShown((current) => (sameIndices(current, next) ? current : next));
         };
         fit();
@@ -143,12 +143,15 @@ export function TabsList({ className, children, start, end, after, variant = 'li
     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 && _jsx("span", { className: "size-5 shrink-0" })] }, tab.key))), _jsx("span", { className: style.more, children: more })] }))] }) }));
+    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 })] }))] }) }));
 }
 /* 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, children, ...props }) {
+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 }));
+    }
     if (onClose === undefined) {
         return (_jsx(BaseTabs.Tab, { className: withClass(tab, className), ...props, children: children }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.25.9",
+  "version": "0.26.1",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/tabs/overflow.ts

@@ -1,10 +1,10 @@
 /*
  * The tabs a strip shows, by index, given the width of every tab, the room the strip has, the gap
  * between two tabs and the width of the button that opens the rest. Everything fits, or the tabs fit
- * from the start up to the button. The picked tab is never left to the menu: it takes the place of
- * the last ones that no longer fit beside it.
+ * from the start up to the button. The kept tabs (the picked one, the pinned ones) are never left to
+ * the menu: they take the place of the last ones that no longer fit beside them.
  */
-export const shownTabs = (widths: readonly number[], room: number, gap: number, more: number, picked: number): number[] => {
+export const shownTabs = (widths: readonly number[], room: number, gap: number, more: number, kept: readonly number[]): number[] => {
     const span = (indices: readonly number[]): number => indices.reduce((sum, index) => sum + widths[index]!, 0) + gap * Math.max(0, indices.length - 1);
     const all = widths.map((_, index) => index);
     // Half a pixel of slack, since a measured width is fractional and the room is not.
@@ -12,18 +12,16 @@ export const shownTabs = (widths: readonly number[], room: number, gap: number,
         return all;
     }
     const limit = room - more - gap + 0.5;
+    const held = all.filter((index) => kept.includes(index));
     const shown: number[] = [];
     for (const index of all) {
-        if (span([...shown, index]) > limit) {
+        if (held.includes(index)) {
+            continue;
+        }
+        if (span([...held, ...shown, index]) > limit) {
             break;
         }
         shown.push(index);
     }
-    if (picked < 0 || picked >= widths.length || shown.includes(picked)) {
-        return shown;
-    }
-    while (shown.length > 0 && span([...shown, picked]) > limit) {
-        shown.pop();
-    }
-    return [...shown, picked];
+    return [...held, ...shown].sort((left, right) => left - right);
 };

package/src/tabs/parts.tsx

@@ -130,7 +130,7 @@ export function TabsList({ className, children, start, end, after, variant = 'li
     const tabs = Children.toArray(children).filter(
         (child): child is ReactElement<ComponentProps<typeof TabsTab>> => isValidElement(child) && child.type === TabsTab
     );
-    const picked = tabs.findIndex((tab) => tab.props.value === value);
+    const kept = tabs.flatMap((tab, index) => (tab.props.value === value || tab.props.pinned === true ? [index] : []));
 
     useLayoutEffect(() => {
         const host = strip.current;
@@ -148,7 +148,7 @@ export function TabsList({ className, children, start, end, after, variant = 'li
             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, picked);
+            const next = shownTabs(cells, room, parseFloat(getComputedStyle(row).columnGap) || 0, more, kept);
             setShown((current) => (sameIndices(current, next) ? current : next));
         };
         fit();
@@ -263,7 +263,7 @@ export function TabsList({ className, children, start, end, after, variant = 'li
                         {tabs.map((tab) => (
                             <span key={tab.key} className={style.tab}>
                                 {tab.props.children}
-                                {tab.props.onClose !== undefined && <span className="size-5 shrink-0" />}
+                                {tab.props.onClose !== undefined && tab.props.pinned !== true && <span className="size-5 shrink-0" />}
                             </span>
                         ))}
                         <span className={style.more}>{more}</span>
@@ -279,13 +279,23 @@ type TabProps = ComponentProps<typeof BaseTabs.Tab>;
 export type TabsTabProps = TabProps & {
     /* Makes the tab closable: a close button in it, a middle click, and Delete or Backspace while the tab has focus. */
     onClose?(): void;
+    /* Keeps the tab in the strip, never in the menu, and leaves it unclosable even with `onClose`. */
+    pinned?: boolean;
 };
 
 /* 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, children, ...props }: TabsTabProps) {
+export function TabsTab({ className, onClose, pinned = false, children, ...props }: TabsTabProps) {
     const { t } = useTranslation('ui');
     const tab = STYLES[useContext(VariantContext)].tab;
 
+    if (pinned) {
+        return (
+            <BaseTabs.Tab className={withClass(tab, className)} data-pinned="" {...props}>
+                {children}
+            </BaseTabs.Tab>
+        );
+    }
+
     if (onClose === undefined) {
         return (
             <BaseTabs.Tab className={withClass(tab, className)} {...props}>