@godxjp/ui 18.11.0 → 18.11.1

package/dist/components/data-display/data-table.d.ts

@@ -41,7 +41,10 @@ interface DataTableProps<T> {
     onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
     /**
      * Manual (server) flags. Default `false` so the simple `data`+`columns` case
-     * sorts / filters / paginates in-browser with no extra wiring. Set the
+     * sorts / filters in-browser with no extra wiring. Client pagination slices
+     * rows ONLY when engaged — a numbered `<DataTable.Pagination>` child is
+     * composed, or `pagination`/`onPaginationChange` is supplied; a plain table
+     * with neither renders every row (no silent 10-row cap, gh#270). Set the
      * relevant flag `true` and drive the matching state from your query for
      * server-side sort / filter / pagination.
      */

package/dist/components/data-display/data-table.js

@@ -178,6 +178,10 @@ function DataTable({
     }
   };
   const tanstackColumns = React.useMemo(() => toTanstackColumns(columns), [columns]);
+  const hasNumberedPager = React.Children.toArray(children).some(
+    (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Pagination" && typeof c.props.onChange !== "function"
+  );
+  const paginationEngaged = manualPagination || controlledPagination !== void 0 || onPaginationChange !== void 0 || hasNumberedPager;
   const table = useReactTable({
     data,
     columns: tanstackColumns,
@@ -185,7 +189,7 @@ function DataTable({
     getCoreRowModel: getCoreRowModel(),
     ...manualSorting ? {} : { getSortedRowModel: getSortedRowModel() },
     ...manualFiltering ? {} : { getFilteredRowModel: getFilteredRowModel() },
-    ...manualPagination ? {} : { getPaginationRowModel: getPaginationRowModel() },
+    ...manualPagination || !paginationEngaged ? {} : { getPaginationRowModel: getPaginationRowModel() },
     manualSorting,
     manualFiltering,
     manualPagination,
@@ -419,6 +423,26 @@ DataTable.Content = function DataTableContent() {
       );
     }
   }, [missingHeaderNames]);
+  const scrollRef = React.useRef(null);
+  const [hasOverflowEnd, setHasOverflowEnd] = React.useState(false);
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const update = () => {
+      const overflowing = el.scrollWidth - el.clientWidth > 1;
+      const atEnd = Math.abs(el.scrollLeft) + el.clientWidth >= el.scrollWidth - 1;
+      setHasOverflowEnd(overflowing && !atEnd);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    if (el.firstElementChild) observer.observe(el.firstElementChild);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, []);
   const activeSort = sort ?? sortingStateToSort(table.getState().sorting);
   const isControlledSort = sort !== void 0 || !!onSortChange;
   const onHeaderClick = (col) => {
@@ -440,7 +464,12 @@ DataTable.Content = function DataTableContent() {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("ui-data-table-scroll", hasPinEnd && "ui-data-table-has-pin-end"),
+      ref: scrollRef,
+      className: cn(
+        "ui-data-table-scroll",
+        hasPinEnd && "ui-data-table-has-pin-end",
+        hasOverflowEnd && "ui-data-table-has-overflow-end"
+      ),
       "aria-busy": loading,
       tabIndex: presetAttr ? void 0 : 0,
       children: /* @__PURE__ */ jsx(

package/dist/styles/alert-layout.css

@@ -9,7 +9,7 @@
     align-items: flex-start;
     gap: var(--alert-space-gap);
     width: 100%;
-    border-radius: var(--radius-md);
+    border-radius: var(--alert-radius);
     border-width: 1px;
     padding: var(--alert-space-inset);
     font-size: var(--font-size-base);

package/dist/styles/shell-layout.css

@@ -77,6 +77,17 @@
     background-color: var(--app-shell-main-background);
   }
 
+  /* `.app-main` carries tabindex="0" (axe scrollable-region-focusable, dbad118), so keyboard
+   * focus can land on the region — without a rule here the USER-AGENT default outline (blue
+   * in Chrome) wraps the whole content area. Use the design-system ring instead; INSET because
+   * `.app-main` is the shell's clip boundary (`contain: paint`) and an outset shadow would be
+   * clipped by the grid. Never remove the indicator outright — the region is focusable and
+   * must show focus (WCAG 2.4.7, gh#271). */
+  .app-main:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+  }
+
   .app-footer {
     grid-area: footer;
     border-top: 1px solid hsl(var(--border));

package/dist/styles/table-layout.css

@@ -169,6 +169,11 @@
     padding-inline: var(--space-page-active-x);
   }
 
+  /* Scroll-hint fade — a SCROLL affordance, so it only shows while the region
+   * actually overflows and is not scrolled to the inline-end. The component
+   * measures the scroll box and stamps `.ui-data-table-has-overflow-end`
+   * (gh#267 — the fade used to render unconditionally, washing out the last
+   * column of tables that never scroll). */
   .ui-data-table-scroll::after {
     content: "";
     position: absolute;
@@ -178,9 +183,15 @@
     z-index: 20;
     width: 1.75rem;
     pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms ease;
     background: linear-gradient(to left, hsl(var(--background) / 0.88), transparent);
   }
 
+  .ui-data-table-has-overflow-end::after {
+    opacity: 1;
+  }
+
   [data-slot="card-content"][data-flush] .ui-data-table-scroll {
     margin-inline: 0;
     padding-inline: 0;

package/dist/tokens/components/feedback.css

@@ -21,6 +21,10 @@
   --dialog-space-inset: var(--dialog-space-y) var(--dialog-space-x);
   --dialog-space-gap: var(--space-stack-md);
   --dialog-close-space-offset: var(--space-4);
+  /* Alert corner radius (gh#268 — rule #45): a full-width Alert often sits in the
+   * same page column as a Card (--card-radius); a service aligns them by
+   * overriding this once. Default keeps the historical --radius-md. */
+  --alert-radius: var(--radius-md);
   --alert-space-inset: var(--space-section-active);
   --alert-space-gap: var(--space-inline-md);
   --alert-inner-space-gap: var(--space-stack-sm);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.11.0",
-  "godxUiMcp": "18.11.0",
+  "version": "18.11.1",
+  "godxUiMcp": "18.11.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",