@rackbops/ui-react 0.2.32 → 0.2.34

package/dist/DataTable.d.ts

@@ -6,6 +6,16 @@ export interface DataTableColumn<T> {
     render: (row: T) => ReactNode;
     /** Right-aligns the cell (rb-num, matching the existing numeric-column class). */
     numeric?: boolean;
+    /** CSS width for the column (`"20%"`, `"12rem"`), rendered as `<col style="width: ...">` in a
+     * `<colgroup>` ahead of `<thead>`. Declaring a width on any column also puts the table in
+     * `table-layout: fixed`, so the widths are honoured and stay identical across table instances
+     * instead of each auto-sizing from its own content (kenzen#70). Columns without a width share
+     * the remaining space. An empty string is treated as no width, not a zero-width column.
+     * Combined with `sticky`, `table-layout: fixed` also stops the table from growing past its
+     * scroll wrapper, so content that needed horizontal scrolling under `sticky` alone will instead
+     * wrap once a width is declared (no theme sets `white-space: nowrap` or hides overflow on a
+     * cell, so it never clips) -- pick column widths wide enough for their content. */
+    width?: string;
     /** Omit to make the column unsortable. Returning a number sorts numerically; a string sorts
      * lexicographically (case-insensitive). */
     sortValue?: (row: T) => string | number;

package/dist/DataTable.js

@@ -82,7 +82,10 @@ export function DataTable({ columns, rows, rowKey, groupBy, groupOrder, defaultS
             });
         })()
         : [{ label: null, rows: sortRows(rows, columns, sort) }];
-    const table = (_jsxs("table", { className: "rb-table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column) => {
+    // Truthy, not `!== undefined`: an explicitly empty width ("") is "no width", not a
+    // zero-width column, so it must not flip the table into fixed layout on its own.
+    const hasWidths = columns.some((c) => c.width);
+    const table = (_jsxs("table", { className: "rb-table", style: hasWidths ? { tableLayout: "fixed" } : undefined, children: [hasWidths && (_jsx("colgroup", { children: columns.map((column) => (_jsx("col", { style: { width: column.width } }, column.key))) })), _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => {
                         const isSorted = sort?.key === column.key;
                         // `aria-sort` claims a table-wide order; grouping only sorts within each group, so
                         // asserting it there would tell a screen-reader user something false.

package/dist/Tabs.d.ts

@@ -1,12 +1,26 @@
 import { type HTMLAttributes, type ReactNode, type RefAttributes } from "react";
 export interface TabItem {
+    /** Unique among this tablist's items -- a duplicate id renders two "selected" tabs at once,
+     * breaking the "exactly one tab is always selected" guarantee below. */
     id: string;
     label: ReactNode;
     content: ReactNode;
 }
-export interface TabsProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">, RefAttributes<HTMLDivElement> {
     items: TabItem[];
-    /** Initially active tab id; defaults to the first item. */
+    /** Uncontrolled mode: the initially active tab id; defaults to the first item. Ignored when
+     * `activeId` is set. */
     defaultId?: string;
+    /** Controlled mode, mirroring NavRail's `activeId`: the active tab id, owned by the caller.
+     * When set the component keeps no selection state of its own -- `onChange` reports what the
+     * user picked and the parent re-renders with the new id (so it can live in a router or URL).
+     * An id matching no item selects the first tab, so exactly one tab is always selected.
+     * Switching between controlled and uncontrolled across the component's lifetime is not
+     * supported: the internal selection kept for uncontrolled mode is frozen (not updated) while
+     * `activeId` is set, so removing `activeId` later reverts to whatever it was last. */
+    activeId?: string;
+    /** Called with the id the user selected (click, arrow keys, Home/End) in both modes; in
+     * uncontrolled mode the internal selection also updates. */
+    onChange?: (id: string) => void;
 }
 export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/Tabs.js

@@ -1,15 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useRef, useState, } from "react";
 import { cx } from "./cx.js";
-export const Tabs = forwardRef(function Tabs({ items, defaultId, className, ...rest }, ref) {
+export const Tabs = forwardRef(function Tabs({ items, defaultId, activeId: activeIdProp, onChange, className, ...rest }, ref) {
     const base = useId();
-    const [active, setActive] = useState(defaultId ?? items[0]?.id);
-    // Fall back to the first tab if `active` names no item, so exactly one tab is
-    // always selected (a defaultId that matches nothing still highlights a tab).
-    const activeId = items.some((t) => t.id === active) ? active : items[0]?.id;
+    const [internal, setInternal] = useState(defaultId ?? items[0]?.id);
+    const controlled = activeIdProp !== undefined;
+    const requested = controlled ? activeIdProp : internal;
+    // Fall back to the first tab if `requested` names no item, so exactly one tab is
+    // always selected (a defaultId or activeId that matches nothing still highlights a tab).
+    const activeId = items.some((t) => t.id === requested) ? requested : items[0]?.id;
+    const select = (id) => {
+        if (!controlled)
+            setInternal(id);
+        onChange?.(id);
+    };
     const tabRefs = useRef([]);
     const onKeyDown = (e) => {
-        const i = items.findIndex((t) => t.id === activeId);
+        // Index from the tab that received the event, not from `activeId`: a keydown is delivered
+        // to document.activeElement, and this handler is bound to the <button> itself, so
+        // e.currentTarget IS the focused tab on every press, the first included -- regardless of
+        // whether selection and focus currently agree. A controlled parent that commits the new
+        // activeId asynchronously (a router transition, a debounce) would otherwise leave `activeId`
+        // unchanged between keystrokes, so every consecutive press would recompute the same "next"
+        // tab from the same stale index instead of advancing (#169 review round 1, MAJOR finding).
+        const i = tabRefs.current.indexOf(e.currentTarget);
         let next = i;
         if (e.key === "ArrowRight" || e.key === "ArrowDown")
             next = (i + 1) % items.length;
@@ -22,7 +36,10 @@ export const Tabs = forwardRef(function Tabs({ items, defaultId, className, ...r
         else
             return;
         e.preventDefault();
-        setActive(items[next]?.id);
+        // Safe: onKeyDown only fires from a rendered tab button, so items is non-empty and next is
+        // always a valid index into it (arithmetic above is mod items.length, or an explicit 0 /
+        // items.length - 1 for Home/End).
+        select(items[next].id);
         // Move focus with the selection — the whole point of the roving tabindex.
         tabRefs.current[next]?.focus();
     };
@@ -30,7 +47,7 @@ export const Tabs = forwardRef(function Tabs({ items, defaultId, className, ...r
                     const selected = t.id === activeId;
                     return (_jsx("button", { ref: (el) => {
                             tabRefs.current[idx] = el;
-                        }, type: "button", role: "tab", id: `${base}-tab-${t.id}`, "aria-selected": selected, "aria-controls": `${base}-panel-${t.id}`, tabIndex: selected ? 0 : -1, className: cx("rb-tab", selected && "rb-tab--active"), onClick: () => setActive(t.id), onKeyDown: onKeyDown, children: t.label }, t.id));
+                        }, type: "button", role: "tab", id: `${base}-tab-${t.id}`, "aria-selected": selected, "aria-controls": `${base}-panel-${t.id}`, tabIndex: selected ? 0 : -1, className: cx("rb-tab", selected && "rb-tab--active"), onClick: () => select(t.id), onKeyDown: onKeyDown, children: t.label }, t.id));
                 }) }), items.map((t) => {
                 const selected = t.id === activeId;
                 return (_jsx("div", { className: "rb-tabpanel", role: "tabpanel", id: `${base}-panel-${t.id}`, "aria-labelledby": `${base}-tab-${t.id}`, hidden: !selected, tabIndex: 0, children: t.content }, t.id));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "description": "React components styled by @rackbops/styles rackbops themes.",
   "license": "MIT",
   "repository": {