twico-ui 1.36.0 → 1.37.0

package/dist/index.d.cts

@@ -1927,7 +1927,9 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** #339: let end-users build their own combined columns at runtime. Adds a **"Combine columns…"** item to
    *  each column's ⋮ menu that opens an editor to fold other columns' data into that column (they show in its
    *  cell and their own columns hide); layout (inline/stacked) + labels are configurable, and "Uncombine"
-   *  restores them. The result is the same as a declarative `column.combine` and persists via `stateKey`.
+   *  restores them. The result is like a declarative `column.combine` and persists via `stateKey` — except a
+   *  runtime combine also applies the source-join value + render over a target's own `valueGetter`/`renderCell`
+   *  (so a synthetic getter-backed column can still be a target), which a declarative `combine` defers to (#369).
    *  @default false */
   columnCombining?: boolean;
   /** Make all columns editable by default (double-click a cell to edit; per-column `editable` overrides). @default false */
@@ -2179,7 +2181,11 @@ interface DatatableColumn<T = any> {
    *  (label-prefixed when `labels`), while the **cell render** additionally applies each source column's
    *  `valueFormatter`. The combined value is synthetic, so the column is display-only (never inline-editable).
    *  Supplying your own `valueGetter` and/or `renderCell` overrides the derived one(s) independently —
-   *  override `valueGetter` alone and the cell shows that value (not the source-join). */
+   *  override `valueGetter` alone and the cell shows that value (not the source-join). **This precedence is
+   *  for a *declarative* `combine` only.** A *runtime* combine the user builds via `columnCombining` (the ⋮ →
+   *  "Combine columns…" editor) is an explicit action, so it applies the source-join value + render even when
+   *  the target column has its own `valueGetter`/`renderCell` — a synthetic getter-backed column can still be
+   *  a combine target (#369). Uncombining restores the column's own value/render. */
   combine?: string[] | { fields: string[]; layout?: "inline" | "stack"; separator?: string; labels?: boolean };
   /** Header label. @default field ("Actions" for actions columns) */
   headerName?: string;
@@ -2909,8 +2915,14 @@ interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
   footer?: React.ReactNode;
   /** `"full"` is a near-fullscreen panel (fills the viewport minus a small margin). @default "md" */
   size?: "sm" | "md" | "lg" | "full";
-  /** Keep the header + footer fixed and scroll only the body (for long content). @default false */
+  /** Keep the header + footer fixed and scroll only the body when content exceeds the viewport — so the
+   *  action buttons never scroll off-screen (#371). Set `false` for a panel that should scroll as one block
+   *  (rare; note a non-portaled child that deliberately overflows the panel would be clipped). @default true */
   scrollBody?: boolean;
+  /** Draw a rule between header/body and body/footer. Suppressed automatically where the region is empty
+   *  (no footer; a header with only a close button and no title/description). Set `false` for a panel that
+   *  should read as one continuous surface. @default true */
+  dividers?: boolean;
   /** Close when the backdrop is clicked. @default true */
   closeOnBackdrop?: boolean;
   children?: React.ReactNode;
@@ -2956,6 +2968,10 @@ interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
   height?: "sm" | "md" | "lg" | number | string;
   /** Close when the backdrop is clicked. @default true */
   closeOnBackdrop?: boolean;
+  /** Draw a rule between header/body and body/footer (matches `Dialog`). Suppressed automatically where the
+   *  region is empty (no footer; a header with only a close button and no title/description). Set `false` for a
+   *  panel that should read as one continuous surface. @default true */
+  dividers?: boolean;
   children?: React.ReactNode;
 }
 

package/dist/index.d.ts

@@ -1927,7 +1927,9 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** #339: let end-users build their own combined columns at runtime. Adds a **"Combine columns…"** item to
    *  each column's ⋮ menu that opens an editor to fold other columns' data into that column (they show in its
    *  cell and their own columns hide); layout (inline/stacked) + labels are configurable, and "Uncombine"
-   *  restores them. The result is the same as a declarative `column.combine` and persists via `stateKey`.
+   *  restores them. The result is like a declarative `column.combine` and persists via `stateKey` — except a
+   *  runtime combine also applies the source-join value + render over a target's own `valueGetter`/`renderCell`
+   *  (so a synthetic getter-backed column can still be a target), which a declarative `combine` defers to (#369).
    *  @default false */
   columnCombining?: boolean;
   /** Make all columns editable by default (double-click a cell to edit; per-column `editable` overrides). @default false */
@@ -2179,7 +2181,11 @@ interface DatatableColumn<T = any> {
    *  (label-prefixed when `labels`), while the **cell render** additionally applies each source column's
    *  `valueFormatter`. The combined value is synthetic, so the column is display-only (never inline-editable).
    *  Supplying your own `valueGetter` and/or `renderCell` overrides the derived one(s) independently —
-   *  override `valueGetter` alone and the cell shows that value (not the source-join). */
+   *  override `valueGetter` alone and the cell shows that value (not the source-join). **This precedence is
+   *  for a *declarative* `combine` only.** A *runtime* combine the user builds via `columnCombining` (the ⋮ →
+   *  "Combine columns…" editor) is an explicit action, so it applies the source-join value + render even when
+   *  the target column has its own `valueGetter`/`renderCell` — a synthetic getter-backed column can still be
+   *  a combine target (#369). Uncombining restores the column's own value/render. */
   combine?: string[] | { fields: string[]; layout?: "inline" | "stack"; separator?: string; labels?: boolean };
   /** Header label. @default field ("Actions" for actions columns) */
   headerName?: string;
@@ -2909,8 +2915,14 @@ interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
   footer?: React.ReactNode;
   /** `"full"` is a near-fullscreen panel (fills the viewport minus a small margin). @default "md" */
   size?: "sm" | "md" | "lg" | "full";
-  /** Keep the header + footer fixed and scroll only the body (for long content). @default false */
+  /** Keep the header + footer fixed and scroll only the body when content exceeds the viewport — so the
+   *  action buttons never scroll off-screen (#371). Set `false` for a panel that should scroll as one block
+   *  (rare; note a non-portaled child that deliberately overflows the panel would be clipped). @default true */
   scrollBody?: boolean;
+  /** Draw a rule between header/body and body/footer. Suppressed automatically where the region is empty
+   *  (no footer; a header with only a close button and no title/description). Set `false` for a panel that
+   *  should read as one continuous surface. @default true */
+  dividers?: boolean;
   /** Close when the backdrop is clicked. @default true */
   closeOnBackdrop?: boolean;
   children?: React.ReactNode;
@@ -2956,6 +2968,10 @@ interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
   height?: "sm" | "md" | "lg" | number | string;
   /** Close when the backdrop is clicked. @default true */
   closeOnBackdrop?: boolean;
+  /** Draw a rule between header/body and body/footer (matches `Dialog`). Suppressed automatically where the
+   *  region is empty (no footer; a header with only a close button and no title/description). Set `false` for a
+   *  panel that should read as one continuous surface. @default true */
+  dividers?: boolean;
   children?: React.ReactNode;
 }
 

package/dist/index.mjs

@@ -9360,7 +9360,7 @@ function Datatable({
       for (const c of columnsProp) if (c && c.field != null) byField[c.field] = c;
       return [DIFF_OP_COLUMN, ...columnsProp.map((c) => {
         const cfg = combineCfg(userCombine[c.field] || c.combine);
-        const base = cfg && !c.valueGetter ? { ...c, valueGetter: combineValueGetter(combineSrcCols(cfg, byField), cfg) } : c;
+        const base = cfg && (!!userCombine[c.field] || !c.valueGetter) ? { ...c, valueGetter: combineValueGetter(combineSrcCols(cfg, byField), cfg) } : c;
         return { ...base, renderCell: (val, row) => renderDiffCell(base, val, row) };
       })];
     },
@@ -9411,15 +9411,17 @@ function Datatable({
       const cfg = combineCfg(userCombine[c.field] || c.combine);
       if (!cfg) continue;
       const srcCols = combineSrcCols(cfg, byField);
+      const explicit = !!userCombine[c.field];
+      const useJoin = explicit || !c.valueGetter;
       out[i] = {
         ...c,
         editable: false,
         // the combined value is synthetic — inline editing would write to a phantom field
-        valueGetter: c.valueGetter || combineValueGetter(srcCols, cfg),
-        // Consumer renderCell wins. If they overrode only valueGetter, fall back to the DEFAULT cell render
-        // (renderCell: undefined) so the cell shows THEIR value — keeping display in sync with what
-        // sort/filter/search/export use — rather than the auto source-join. Otherwise render the combined cell.
-        renderCell: c.renderCell || (c.valueGetter ? void 0 : ((value, row) => renderCombined(srcCols, row, cfg)))
+        valueGetter: useJoin ? combineValueGetter(srcCols, cfg) : c.valueGetter,
+        // In diff mode the diff `columns` memo already wrapped renderCell in renderDiffCell (over the enriched
+        // combined value) — keep that wrapper, or an EXPLICIT combine's `!explicit` short-circuit would strip the
+        // diff arrows / old→new styling (#369 review). Declarative diff already preserved it (c.renderCell truthy).
+        renderCell: isDiff ? c.renderCell : !explicit && c.renderCell || (useJoin ? ((value, row) => renderCombined(srcCols, row, cfg)) : void 0)
       };
     }
     return out;
@@ -15410,6 +15412,10 @@ var DIALOG_CSS = `
 .twc-dialog__close svg { width: 18px; height: 18px; }
 .twc-dialog__body { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
 .twc-dialog__footer { display: flex; gap: var(--space-2); justify-content: flex-end; padding: 0 var(--space-5) var(--space-5); }
+/* #372: header/body and body/footer rules (on by default). Per-region data-divider so the rule is
+   suppressed when the region is empty (no footer; a header with only a close button and no title/description). */
+.twc-dialog__header[data-divider="true"] { padding-bottom: var(--space-4); border-bottom: var(--border-thin) solid var(--color-divider); }
+.twc-dialog__footer[data-divider="true"] { padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-divider); }
 `;
 function Dialog({
   open,
@@ -15419,7 +15425,8 @@ function Dialog({
   footer,
   children,
   size = "md",
-  scrollBody = false,
+  scrollBody = true,
+  dividers = true,
   closeOnBackdrop = true,
   className = "",
   ...rest
@@ -15460,7 +15467,7 @@ function Dialog({
   }, children: [
     __twcStyles,
     /* @__PURE__ */ jsxs("div", { ref: dialogRef, className: `twc-dialog ${className}`, "data-state": state, "data-size": size, "data-scroll-body": scrollBody ? "true" : void 0, role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? titleId : void 0, "aria-label": !title ? "Dialog" : void 0, "aria-describedby": description ? descId : void 0, ...rest, children: [
-      title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-dialog__header", children: [
+      title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-dialog__header", "data-divider": dividers && (title || description) && (children || footer) ? "true" : void 0, children: [
         /* @__PURE__ */ jsxs("div", { className: "twc-dialog__titles", children: [
           title ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__title", id: titleId, children: title }) : null,
           description ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__desc", id: descId, children: description }) : null
@@ -15468,7 +15475,7 @@ function Dialog({
         onClose ? /* @__PURE__ */ jsx("button", { className: "twc-dialog__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
       ] }) : null,
       children ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__body", children }) : null,
-      footer ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__footer", children: footer }) : null
+      footer ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__footer", "data-divider": dividers && children ? "true" : void 0, children: footer }) : null
     ] })
   ] });
   return renderPortal(overlay);
@@ -15568,7 +15575,11 @@ var DRAWER_CSS = `
 .twc-drawer__close:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-drawer__close svg { width: 18px; height: 18px; }
 .twc-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-5) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
-.twc-drawer__footer { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-4) var(--space-5); border-top: var(--border-thin) solid var(--color-divider); }
+.twc-drawer__footer { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-4) var(--space-5); }
+/* #372: header/footer rules (on by default), consistent with Dialog. Per-region data-divider so an empty
+   region grows no stray line (no footer; a header with only a close button and no title/description). */
+.twc-drawer__header[data-divider="true"] { border-bottom: var(--border-thin) solid var(--color-divider); }
+.twc-drawer__footer[data-divider="true"] { border-top: var(--border-thin) solid var(--color-divider); }
 @media (prefers-reduced-motion: reduce) {
   .twc-drawer__overlay[data-state], .twc-drawer[data-state] { animation-duration: 1ms; }
 }
@@ -15584,6 +15595,7 @@ function Drawer({
   width,
   height,
   closeOnBackdrop = true,
+  dividers = true,
   children,
   className = "",
   style,
@@ -15629,7 +15641,7 @@ function Drawer({
   }, children: [
     __twcStyles,
     /* @__PURE__ */ jsxs("div", { ref: panelRef, className: `twc-drawer ${className}`, "data-side": side, "data-state": state, role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? titleId : void 0, "aria-label": !title ? "Drawer" : void 0, "aria-describedby": description ? descId : void 0, style: { ...dim ? sizeVar : null, ...style }, ...rest, children: [
-      title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-drawer__header", children: [
+      title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-drawer__header", "data-divider": dividers && (title || description) ? "true" : void 0, children: [
         /* @__PURE__ */ jsxs("div", { className: "twc-drawer__titles", children: [
           title ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__title", id: titleId, children: title }) : null,
           description ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__desc", id: descId, children: description }) : null
@@ -15637,7 +15649,7 @@ function Drawer({
         onClose ? /* @__PURE__ */ jsx("button", { className: "twc-drawer__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
       ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "twc-drawer__body", children }),
-      footer ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__footer", children: footer }) : null
+      footer ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__footer", "data-divider": dividers ? "true" : void 0, children: footer }) : null
     ] })
   ] });
   return renderPortal(overlay);
@@ -16338,7 +16350,9 @@ var POPOVER_CSS = `
 .twc-popover__arrow { position: absolute; width: 11px; height: 11px; background: var(--color-surface-raised);
   border-left: var(--border-thin) solid var(--color-border); border-top: var(--border-thin) solid var(--color-border);
   transform: rotate(45deg); }
-.twc-popover__inner { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
+/* #373: cap the panel to the room place() measured and scroll INSIDE the inner (not the panel \u2014 the panel
+   must keep overflow visible so the absolutely-positioned arrow isn't clipped) so a tall panel's footer stays reachable. */
+.twc-popover__inner { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); overflow-y: auto; }
 .twc-popover__title { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-text); margin-bottom: 4px; }
 `;
 function Popover({
@@ -16400,7 +16414,7 @@ function Popover({
       l = Math.max(M, Math.min(l, vw - w - M));
       left = l;
       arrow = { left: Math.min(Math.max(r2.left + r2.width / 2 - l - 5.5, 10), w - 20), [flip ? "bottom" : "top"]: -6 };
-      return setPos({ top, bottom, left, width: w, flip, arrow });
+      return setPos({ top, bottom, left, width: w, flip, arrow, maxHeight: flip ? spaceAbove : spaceBelow });
     }
     const ph = popRef.current ? popRef.current.offsetHeight : 120;
     let onRight = placement === "right";
@@ -16412,7 +16426,7 @@ function Popover({
     const cy = r2.top + r2.height / 2;
     top = Math.max(M, Math.min(cy - ph / 2, vh - ph - M));
     arrow = { top: Math.min(Math.max(cy - top - 5.5, 8), ph - 18), [onRight ? "left" : "right"]: -6 };
-    setPos({ top, left, width: w, flip: false, arrow });
+    setPos({ top, left, width: w, flip: false, arrow, maxHeight: vh - 2 * M });
   }, [placement, align, width]);
   React51__default.useEffect(() => {
     if (!open) return;
@@ -16478,7 +16492,7 @@ function Popover({
       children: [
         __twcStyles,
         /* @__PURE__ */ jsx("span", { className: "twc-popover__arrow", style: pos.arrow, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("div", { className: "twc-popover__inner", children: [
+        /* @__PURE__ */ jsxs("div", { className: "twc-popover__inner", style: { maxHeight: pos.maxHeight }, children: [
           title ? /* @__PURE__ */ jsx("div", { className: "twc-popover__title", id: `${popId}-title`, children: title }) : null,
           children
         ] })