@aglyn/shared-ui-jsx 1.0.0-beta.143

package/src/lib/components/list-pagination.component.js

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+import TablePagination from "@mui/material/TablePagination";
+import { TABLE_PAGE_SIZE_OPTIONS, TABLE_ROWS_PER_PAGE_LABEL } from "../const/table-pagination.js";
+/**
+ * The footer under every paginated list, whatever is behind it.
+ *
+ * The console grew four pagination grammars — a MUI X `DataGrid` footer, a
+ * hand-rolled `TablePagination`, a bare Previous/Next button pair, and a
+ * "Load more" that only ever grew — so the same act took a different control
+ * depending on which list a reader was standing in, and two of the four
+ * offered no way to change the page size at all. This is the one control.
+ *
+ * ## Counting without a count
+ *
+ * A cursor feed cannot say how many rows exist without reading them, which is
+ * the cost pagination is there to avoid. MUI already models this: `count={-1}`
+ * renders "1–10 of more than 10" and leaves Next live.
+ *
+ * The trick is the LAST page, where the total stops being unknown — once no
+ * further page exists, `page × pageSize + rowCount` IS the total. Handing MUI
+ * the real number there is what disables Next, so the control needs no
+ * per-version knowledge of how to reach inside and disable that button. The
+ * count line also stops saying "more than" at exactly the point it would
+ * become a lie.
+ *
+ * `DataGrid` keeps its own footer — it renders one internally and cannot be
+ * given this — but it is fed the same options, default and label from
+ * `const/table-pagination`, so the two read identically.
+ */ export function ListPagination(props) {
+    const { page, pageSize, rowCount, onPageChange, onPageSizeChange, count, hasMore, labelDisplayedRows, pageSizeOptions, disabled } = props;
+    const resolvedCount = count != null ? count : hasMore ? -1 : page * pageSize + rowCount;
+    /*==========================================
+   * A MENU OVER STATE THIS FOOTER DOES NOT OWN.
+   *
+   * Without `onPageSizeChange` the size menu is inert — MUI renders the
+   * select and nothing happens when it is used. Worse on a list whose page
+   * size is dictated elsewhere: the staff Users list pages at the width
+   * Firebase Auth is asked for, which is not one of the shared options, so
+   * MUI had a value with no matching item and drew the control EMPTY. A
+   * blank select beside a row count reads as a broken page, and the one
+   * thing it could not do was be used.
+   *
+   * An empty options array is how MUI is told there is no choice to offer,
+   * so the control is absent rather than present and dead. A caller that
+   * genuinely wants a fixed menu still passes `pageSizeOptions` itself.
+   *=========================================*/ const resolvedOptions = pageSizeOptions != null ? pageSizeOptions : onPageSizeChange ? TABLE_PAGE_SIZE_OPTIONS : [];
+    return /*#__PURE__*/ _jsx(TablePagination, _extends({
+        // These footers sit under Stacks and Lists as often as under a Table,
+        // and a <td> outside a <table> is invalid markup the browser reparents.
+        component: "div",
+        count: resolvedCount,
+        page: page,
+        rowsPerPage: pageSize,
+        onPageChange: (_event, next)=>onPageChange(next),
+        onRowsPerPageChange: onPageSizeChange ? (event)=>{
+            // Back to the first page: page 4 of a 10-row list does not
+            // exist once the reader asks for 50 at a time, and MUI renders
+            // an out-of-range page as an empty list with no explanation.
+            onPageSizeChange(Number(event.target.value));
+            onPageChange(0);
+        } : undefined,
+        rowsPerPageOptions: resolvedOptions,
+        labelRowsPerPage: TABLE_ROWS_PER_PAGE_LABEL
+    }, labelDisplayedRows ? {
+        labelDisplayedRows
+    } : {}, {
+        disabled: disabled
+    }));
+}
+ListPagination.displayName = 'ListPagination';
+export default ListPagination;
+
+//# sourceMappingURL=list-pagination.component.js.map

package/src/lib/components/list-pagination.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/list-pagination.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport TablePagination from '@mui/material/TablePagination'\nimport type { TablePaginationProps } from '@mui/material/TablePagination'\nimport {\n  TABLE_PAGE_SIZE_OPTIONS,\n  TABLE_ROWS_PER_PAGE_LABEL,\n} from '../const/table-pagination'\n\nexport interface ListPaginationProps {\n  /** Zero-based, like MUI's own. */\n  page: number\n  pageSize: number\n  /** Rows rendered on the CURRENT page — not the collection's total. */\n  rowCount: number\n  onPageChange: (page: number) => void\n  /**\n   * Omit on a list whose page size is not the reader's to choose — the size\n   * menu is then not rendered at all. Most lists should pass it.\n   */\n  onPageSizeChange?: (pageSize: number) => void\n  /**\n   * The collection's total, when the caller genuinely knows it — a\n   * client-side list, or a server `count()`. Leave undefined for a cursor or\n   * growing-window feed, where nobody knows it without paying for it.\n   */\n  count?: number\n  /** Cursor/window feeds: whether a further page exists. */\n  hasMore?: boolean\n  /** Override the count line, e.g. the screens tree's \"top-level screens\". */\n  labelDisplayedRows?: TablePaginationProps['labelDisplayedRows']\n  pageSizeOptions?: number[]\n  disabled?: boolean\n}\n\n/**\n * The footer under every paginated list, whatever is behind it.\n *\n * The console grew four pagination grammars — a MUI X `DataGrid` footer, a\n * hand-rolled `TablePagination`, a bare Previous/Next button pair, and a\n * \"Load more\" that only ever grew — so the same act took a different control\n * depending on which list a reader was standing in, and two of the four\n * offered no way to change the page size at all. This is the one control.\n *\n * ## Counting without a count\n *\n * A cursor feed cannot say how many rows exist without reading them, which is\n * the cost pagination is there to avoid. MUI already models this: `count={-1}`\n * renders \"1–10 of more than 10\" and leaves Next live.\n *\n * The trick is the LAST page, where the total stops being unknown — once no\n * further page exists, `page × pageSize + rowCount` IS the total. Handing MUI\n * the real number there is what disables Next, so the control needs no\n * per-version knowledge of how to reach inside and disable that button. The\n * count line also stops saying \"more than\" at exactly the point it would\n * become a lie.\n *\n * `DataGrid` keeps its own footer — it renders one internally and cannot be\n * given this — but it is fed the same options, default and label from\n * `const/table-pagination`, so the two read identically.\n */\nexport function ListPagination(props: ListPaginationProps) {\n  const {\n    page,\n    pageSize,\n    rowCount,\n    onPageChange,\n    onPageSizeChange,\n    count,\n    hasMore,\n    labelDisplayedRows,\n    pageSizeOptions,\n    disabled,\n  } = props\n\n  const resolvedCount =\n    count ?? (hasMore ? -1 : page * pageSize + rowCount)\n\n  /*==========================================\n   * A MENU OVER STATE THIS FOOTER DOES NOT OWN.\n   *\n   * Without `onPageSizeChange` the size menu is inert — MUI renders the\n   * select and nothing happens when it is used. Worse on a list whose page\n   * size is dictated elsewhere: the staff Users list pages at the width\n   * Firebase Auth is asked for, which is not one of the shared options, so\n   * MUI had a value with no matching item and drew the control EMPTY. A\n   * blank select beside a row count reads as a broken page, and the one\n   * thing it could not do was be used.\n   *\n   * An empty options array is how MUI is told there is no choice to offer,\n   * so the control is absent rather than present and dead. A caller that\n   * genuinely wants a fixed menu still passes `pageSizeOptions` itself.\n   *=========================================*/\n  const resolvedOptions =\n    pageSizeOptions ??\n    (onPageSizeChange ? TABLE_PAGE_SIZE_OPTIONS : [])\n\n  return (\n    <TablePagination\n      // These footers sit under Stacks and Lists as often as under a Table,\n      // and a <td> outside a <table> is invalid markup the browser reparents.\n      component=\"div\"\n      count={resolvedCount}\n      page={page}\n      rowsPerPage={pageSize}\n      onPageChange={(_event, next) => onPageChange(next)}\n      onRowsPerPageChange={\n        onPageSizeChange\n          ? (event) => {\n              // Back to the first page: page 4 of a 10-row list does not\n              // exist once the reader asks for 50 at a time, and MUI renders\n              // an out-of-range page as an empty list with no explanation.\n              onPageSizeChange(Number(event.target.value))\n              onPageChange(0)\n            }\n          : undefined\n      }\n      rowsPerPageOptions={resolvedOptions}\n      labelRowsPerPage={TABLE_ROWS_PER_PAGE_LABEL}\n      {...(labelDisplayedRows ? { labelDisplayedRows } : {})}\n      disabled={disabled}\n    />\n  )\n}\nListPagination.displayName = 'ListPagination'\n\nexport default ListPagination\n"],"names":["TablePagination","TABLE_PAGE_SIZE_OPTIONS","TABLE_ROWS_PER_PAGE_LABEL","ListPagination","props","page","pageSize","rowCount","onPageChange","onPageSizeChange","count","hasMore","labelDisplayedRows","pageSizeOptions","disabled","resolvedCount","resolvedOptions","component","rowsPerPage","_event","next","onRowsPerPageChange","event","Number","target","value","undefined","rowsPerPageOptions","labelRowsPerPage","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,OAAOA,qBAAqB,gCAA+B;AAE3D,SACEC,uBAAuB,EACvBC,yBAAyB,QACpB,+BAA2B;AA4BlC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,gBAAgB,EAChBC,KAAK,EACLC,OAAO,EACPC,kBAAkB,EAClBC,eAAe,EACfC,QAAQ,EACT,GAAGV;IAEJ,MAAMW,gBACJL,gBAAAA,QAAUC,UAAU,CAAC,IAAIN,OAAOC,WAAWC;IAE7C;;;;;;;;;;;;;;6CAc2C,GAC3C,MAAMS,kBACJH,0BAAAA,kBACCJ,mBAAmBR,0BAA0B,EAAE;IAElD,qBACE,KAACD;QACC,sEAAsE;QACtE,wEAAwE;QACxEiB,WAAU;QACVP,OAAOK;QACPV,MAAMA;QACNa,aAAaZ;QACbE,cAAc,CAACW,QAAQC,OAASZ,aAAaY;QAC7CC,qBACEZ,mBACI,CAACa;YACC,2DAA2D;YAC3D,+DAA+D;YAC/D,6DAA6D;YAC7Db,iBAAiBc,OAAOD,MAAME,MAAM,CAACC,KAAK;YAC1CjB,aAAa;QACf,IACAkB;QAENC,oBAAoBX;QACpBY,kBAAkB1B;OACbU,qBAAqB;QAAEA;IAAmB,IAAI,CAAC;QACpDE,UAAUA;;AAGhB;AACAX,eAAe0B,WAAW,GAAG;AAE7B,eAAe1B,eAAc"}

package/src/lib/components/list-table.component.d.ts

@@ -0,0 +1,155 @@
+import { type DataTableProps } from './data-table.component';
+import type { GridColDef } from '@mui/x-data-grid';
+import type { ReactNode } from 'react';
+import { type RowActionsMenuItem } from './row-actions-menu.component';
+/**
+ * ONE row grammar for every artifact list (AGL-2501).
+ *
+ *
+ * They did. Three of the four are `DataTableComponent`, but each declared its
+ * own column set, its own action arrangement and its own row-click, and the
+ * fourth — screens — is a hand-rolled tree because it has to be: drag to
+ * reorder, expand to nest, no grid can do that. So "the same table" cannot
+ * literally be one component for all four, and pretending otherwise would mean
+ * either losing the hierarchy or bolting a tree onto a grid.
+ *
+ * What IS shared is the row GRAMMAR, and that is what actually differed on
+ * screen. Every artifact row now reads the same way:
+ *
+ * ```
+ *   [ drag · expand ]   name   id   description   updated   created   [ ⇗ ⋮ ]
+ *     screens only                                                  quick  menu
+ * ```
+ *
+ * - **The row opens the detail view.** Clicking anywhere that is not a control
+ *   navigates. It is the primary action on every one of these lists and it was
+ *   previously a link buried in one column.
+ * - **Rows are NOT selectable.** The grid lists shipped with selection on, so
+ *   a click both navigated AND tinted the row, and the footer counted "1 row
+ *   selected" for a selection nothing could act on. A selection with no bulk
+ *   action is a state the reader has to dismiss and cannot use.
+ * - **Exactly one quick action, then the menu.** Everything else moves behind
+ *   the overflow — a delete sitting inline is one mis-click from the row's own
+ *   open handler, which is the argument AGL-701 already made for components and
+ *   never carried to the rest.
+ *
+ * The quick action is the one thing worth a direct click on that kind of
+ * artifact: **Open live page** for a screen, **Preview** for anything that has
+ * no address of its own. It is the only per-kind variation in the trailing
+ * cluster, and it is chosen by the caller rather than inferred here.
+ *
+ * A screen is the only artifact of the four with a route the public can reach,
+ * so it is the only one whose quick action says "live". Layouts, components
+ * and templates render inside something else and have no address to open, so
+ * theirs is a **Preview** into the console's own canvas render.
+ *
+ * The quick action is ALSO the menu's first entry — see
+ * {@link quickActionMenuItem}. The icon alone is a glyph with a tooltip; the
+ * menu is where every action on the row is spelled out, and an action missing
+ * from it reads as an action the row does not have.
+ */
+/**
+ * The single trailing icon beside the overflow menu.
+ *
+ * Three shapes, because the destinations genuinely differ: an EXTERNAL live
+ * page (new tab), an IN-APP preview route, and a plain handler for the rare
+ * action that opens a dialog. `unavailableReason` is the fourth state and the
+ * one most easily got wrong — a screen with no single live page (a collection
+ * template renders under routes it does not own) must still show the control,
+ * disabled, saying why. Hiding it would read as the feature being absent.
+ */
+export interface ListQuickAction {
+    /** `mdi` icon path. */
+    icon: string;
+    /** Accessible name; also the tooltip when the action is unavailable. */
+    label: string;
+    /** A live, external URL — opened in a new tab. */
+    href?: string;
+    /** An in-app route — a normal client navigation. */
+    to?: string;
+    onClick?: () => void;
+    /**
+     * Why this row cannot use the action. Renders it DISABLED with the reason as
+     * its tooltip, rather than removing it — an absent control and an
+     * inapplicable one look identical, and only one of them is honest.
+     */
+    unavailableReason?: string;
+}
+export interface ListRowActionsProps {
+    /** The artifact's name — every control is labelled with it, because these
+     * Repeat once per row and "More actions" alone says nothing about which. */
+    label: string;
+    quick?: ListQuickAction | null;
+    items: RowActionsMenuItem[];
+}
+/** The trailing cluster: one quick action, then the overflow menu. */
+export declare function ListRowActions(props: ListRowActionsProps): import("react").JSX.Element;
+export declare namespace ListRowActions {
+    var displayName: string;
+}
+/** The field `listActionsColumn` draws, which a row click never opens through. */
+export declare const LIST_ACTIONS_FIELD = "actions";
+/**
+ * The trailing ACTIONS column, identical on every grid list.
+ *
+ * Deliberately NOT MUI's `type: 'actions'`. That type renders each
+ * `GridActionsCellItem` as its own icon and moves the ones marked `showInMenu`
+ * into a menu it owns — which is how the three lists ended up with two, three
+ * and five inline icons respectively, each a different width, and how the
+ * screens table (which cannot use it at all) grew a second implementation.
+ * One `renderCell` gives every list the same cluster and the same width.
+ */
+export declare function listActionsColumn(render: (row: any) => ReactNode, options?: {
+    width?: number;
+}): GridColDef;
+/**
+ * Row selection, opted into by a list that has something to DO with a
+ * selection (AGL-2595).
+ *
+ * Controlled, and in the caller's vocabulary — an array of `$id`s in, an
+ * array out — rather than MUI's own model. The grid's model is a
+ * `{ type, ids: Set }` whose `exclude` form appears the moment the header
+ * checkbox is ticked, and a caller that had to fold "everything except
+ * these" back into "these" would do it wrong on the page boundary; the
+ * table holds the rows and does the fold once, here.
+ */
+export interface ListTableSelection {
+    /** The `$id`s currently selected; ids not in `rows` are ignored. */
+    selected: readonly string[];
+    /** Every change, as the full new selection. */
+    onChange: (ids: string[]) => void;
+}
+export interface ListTableProps extends DataTableProps {
+    /** Row click → the artifact's detail view. */
+    onOpen?: (id: string, row: any) => void;
+    /**
+     * The toolbar's free-text search box.
+     *
+     * Defaults to shown where the GRID answers it, which is client filtering.
+     * Under `filterMode="server"` the grid applies no filter at all and the
+     * model goes to the caller, so the box defaults to hidden: a list whose
+     * handler reads only the column filter would otherwise offer a search that
+     * narrows nothing, which reads as "no match" rather than "not supported".
+     * Pass it on a server-filtered list whose handler reads `quickFilterValues`.
+     */
+    quickFilter?: boolean;
+    /**
+     * Present → a checkbox column and a controlled selection. Absent → the
+     * navigation-only grid every list had before, checkbox column and all.
+     * The row click keeps opening the record either way: a checkbox is the
+     * only thing that selects, so the two gestures cannot collide.
+     */
+    selectable?: ListTableSelection;
+}
+/**
+ * The grid every FLAT artifact list uses — layouts, components, templates.
+ *
+ * Screens is the deliberate exception and keeps its own tree; it adopts
+ * {@link ListRowActions} so the two still read alike, which is the part a
+ * reader actually compares.
+ */
+export declare function ListTable(props: ListTableProps): import("react").JSX.Element;
+export declare namespace ListTable {
+    var displayName: string;
+}
+export default ListTable;

package/src/lib/components/list-table.component.js

@@ -0,0 +1,369 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppLink } from "./app-link.js";
+import { MdiIcon } from "./mdi-icon/mdi-icon.js";
+import { DataTableComponent } from "./data-table.component.js";
+import { IconButton, Stack, Tooltip } from "@mui/material";
+import RowActionsMenu from "./row-actions-menu.component.js";
+import { TABLE_PAGE_SIZE_DEFAULT, TABLE_PAGE_SIZE_OPTIONS, TABLE_ROWS_PER_PAGE_LABEL } from "../const/table-pagination.js";
+/**
+ * The quick action, restated as the menu's first entry.
+ *
+ * The icon and the menu are two ways into ONE action, not two features: the
+ * icon is a bare glyph, so a reader who does not recognize it has the overflow
+ * as the place every action is named. Deriving the item from the same
+ * {@link ListQuickAction} is what keeps the two in step — availability,
+ * destination and the reason it is refused are read once and cannot drift.
+ */ function quickActionMenuItem(quick) {
+    var _quick_href;
+    return {
+        key: 'quick',
+        label: quick.label,
+        icon: /*#__PURE__*/ _jsx(MdiIcon, {
+            path: quick.icon,
+            size: 0.8
+        }),
+        // `href` is off-site and opens a new tab; `to` is an in-app route.
+        href: (_quick_href = quick.href) != null ? _quick_href : quick.to,
+        external: Boolean(quick.href),
+        onClick: quick.href || quick.to ? undefined : quick.onClick,
+        disabled: Boolean(quick.unavailableReason),
+        disabledReason: quick.unavailableReason
+    };
+}
+/** The trailing cluster: one quick action, then the overflow menu. */ export function ListRowActions(props) {
+    const { label, quick, items } = props;
+    const menuItems = quick ? [
+        quickActionMenuItem(quick),
+        ...items
+    ] : items;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 0.5,
+        /*
+        `height: '100%'` is what actually centres these (AGL-2501). A DataGrid
+        cell is a flex box, but `renderCell` content is auto-height inside it —
+        so at the taller `TABLE_ROW_HEIGHT` these icons ride at the top of the
+        row while the text beside them is centred. `alignItems` alone cannot
+        fix it: there is no spare height to distribute until the child claims
+        the row.
+      */ sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'flex-end'
+        },
+        // The row's own click opens the detail view; without this every control
+        // in here would navigate out from under the thing it just opened.
+        onClick: (event)=>event.stopPropagation(),
+        children: [
+            quick ? /*#__PURE__*/ _jsx(ListQuickButton, {
+                label: label,
+                action: quick
+            }) : null,
+            /*#__PURE__*/ _jsx(RowActionsMenu, {
+                label: label,
+                items: menuItems
+            })
+        ]
+    });
+}
+ListRowActions.displayName = 'ListRowActions';
+function ListQuickButton(props) {
+    const { label, action } = props;
+    const icon = /*#__PURE__*/ _jsx(MdiIcon, {
+        path: action.icon,
+        size: 0.8
+    });
+    const name = `${action.label} — ${label}`;
+    if (action.unavailableReason) {
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            title: action.unavailableReason,
+            children: /*#__PURE__*/ _jsx("span", {
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    size: "small",
+                    "aria-label": name,
+                    disabled: true,
+                    children: icon
+                })
+            })
+        });
+    }
+    if (action.href) {
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            title: action.label,
+            children: /*#__PURE__*/ _jsx(AppLink, {
+                componentVariant: "icon-button",
+                size: "small",
+                "aria-label": name,
+                href: action.href,
+                target: "_blank",
+                rel: "noreferrer",
+                children: icon
+            })
+        });
+    }
+    if (action.to) {
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            title: action.label,
+            children: /*#__PURE__*/ _jsx(AppLink, {
+                componentVariant: "icon-button",
+                size: "small",
+                "aria-label": name,
+                href: action.to,
+                children: icon
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(Tooltip, {
+        title: action.label,
+        children: /*#__PURE__*/ _jsx(IconButton, {
+            size: "small",
+            "aria-label": name,
+            onClick: action.onClick,
+            children: icon
+        })
+    });
+}
+/** The field `listActionsColumn` draws, which a row click never opens through. */ export const LIST_ACTIONS_FIELD = 'actions';
+/**
+ * The trailing ACTIONS column, identical on every grid list.
+ *
+ * Deliberately NOT MUI's `type: 'actions'`. That type renders each
+ * `GridActionsCellItem` as its own icon and moves the ones marked `showInMenu`
+ * into a menu it owns — which is how the three lists ended up with two, three
+ * and five inline icons respectively, each a different width, and how the
+ * screens table (which cannot use it at all) grew a second implementation.
+ * One `renderCell` gives every list the same cluster and the same width.
+ */ export function listActionsColumn(render, options = {}) {
+    var _options_width;
+    return {
+        field: LIST_ACTIONS_FIELD,
+        headerName: 'Actions',
+        width: (_options_width = options.width) != null ? _options_width : 110,
+        align: 'right',
+        headerAlign: 'right',
+        sortable: false,
+        filterable: false,
+        hideable: false,
+        disableColumnMenu: true,
+        renderCell: ({ row })=>render(row)
+    };
+}
+/**
+ * The grid every FLAT artifact list uses — layouts, components, templates.
+ *
+ * Screens is the deliberate exception and keeps its own tree; it adopts
+ * {@link ListRowActions} so the two still read alike, which is the part a
+ * reader actually compares.
+ */ export function ListTable(props) {
+    var _ref;
+    const { onOpen, sx, initialState, hideFooter, rows, selectable, quickFilter, slotProps } = props, rest = _object_without_properties_loose(props, [
+        "onOpen",
+        "sx",
+        "initialState",
+        "hideFooter",
+        "rows",
+        "selectable",
+        "quickFilter",
+        "slotProps"
+    ]);
+    const showQuickFilter = quickFilter != null ? quickFilter : rest.filterMode !== 'server';
+    /*==========================================
+   * SELECTION IS OPT-IN, AND NAVIGATION-ONLY IS THE DEFAULT.
+   *
+   * Without `selectable`, the three properties that make a row a NAVIGATION
+   * target rather than a selectable record: `disableRowSelectionOnClick`
+   * alone is not enough — it stops the click selecting, and leaves the
+   * checkbox column and the "n rows selected" footer behind.
+   *
+   * With it, the grid's model is built from the caller's id list on every
+   * render and folded back into one on every change. MUI's model since v8 is
+   * `{ type: 'include' | 'exclude', ids }`, and `exclude` is what the header
+   * checkbox produces — "everything but these" — so the fold has to consult
+   * the rows the grid was given, which is why it lives here and not in the
+   * caller. `disableRowSelectionOnClick` stays on in this branch too: a row
+   * click still opens the record, and only the checkbox selects.
+   *=========================================*/ const selection = selectable ? {
+        rowSelection: true,
+        checkboxSelection: true,
+        rowSelectionModel: {
+            type: 'include',
+            ids: new Set(selectable.selected)
+        },
+        onRowSelectionModelChange: (model)=>{
+            const all = (rows != null ? rows : []).map((row)=>String(row.$id));
+            selectable.onChange(model.type === 'include' ? all.filter((id)=>model.ids.has(id)) : all.filter((id)=>!model.ids.has(id)));
+        }
+    } : {
+        rowSelection: false,
+        checkboxSelection: false
+    };
+    /*==========================================
+   * A HIDDEN FOOTER STILL PAGED THE ROWS.
+   *
+   * `hideFooter` is how a caller says "something else owns the page" — a
+   * server-paged staff list, a cursor feed, a card whose `ListPagination`
+   * sits under the grid. It hides the CONTROL and nothing else: the free
+   * DataGrid always paginates, so the grid went on slicing at the shared
+   * default and rows eleven onward were drawn by nothing and reachable by
+   * nothing. The outer footer then described the rows it was HANDED, so it
+   * reported a page two rows longer than the one on screen and offered no
+   * way to see the difference.
+   *
+   * Eight lists pass `hideFooter`, and every one of them was losing rows past
+   * the tenth. It went unnoticed because a list has to hold more than ten
+   * rows to show a symptom, and most of these do not yet.
+   *
+   * So when the footer is hidden the grid takes ONE page as tall as the rows
+   * it was given. CONTROLLED rather than `initialState`, because a
+   * server-paged list hands over a different number of rows on every page and
+   * initial state is read once. A floor of one because MUI rejects a page
+   * size of zero, and an empty grid has nothing to slice anyway.
+   *=========================================*/ const rowCount = (_ref = rows == null ? void 0 : rows.length) != null ? _ref : 0;
+    const unpaged = hideFooter ? {
+        paginationModel: {
+            page: 0,
+            pageSize: Math.max(rowCount, 1)
+        },
+        // A controlled model with no handler logs a MUI warning, and the
+        // grid must not move off page zero in any case: the page is not
+        // this component's to change while somebody else owns the footer.
+        onPaginationModelChange: ()=>undefined,
+        // Keeps the size out of the "not preset in pageSizeOptions" warning.
+        // Nothing renders it — the footer carrying the menu is hidden.
+        pageSizeOptions: [
+            Math.max(rowCount, 1)
+        ]
+    } : {};
+    return /*#__PURE__*/ _jsx(DataTableComponent, _extends({
+        getRowId: (row)=>row.$id
+    }, selection, {
+        disableRowSelectionOnClick: true,
+        onRowClick: onOpen ? ({ id, row }, event)=>{
+            var _target_closest;
+            /*
+               * A press anywhere in the actions cell is aimed at the actions.
+               * `ListRowActions` stops its own clicks, but the cell is wider
+               * and taller than the cluster, and a press on the padding
+               * beside the menu would otherwise open the record from under
+               * the reader.
+               */ const target = event.target;
+            if (target == null ? void 0 : (_target_closest = target.closest) == null ? void 0 : _target_closest.call(target, `[data-field="${LIST_ACTIONS_FIELD}"]`)) return;
+            onOpen(String(id), row);
+        } : undefined,
+        /*
+       * The list GROWS; the PAGE scrolls.
+       *
+       * `DataTableComponent` gives its wrapper a fixed `height: 400`, which
+       * is right for a grid sitting in a pane of its own and wrong for a
+       * card in a column of cards: the table got its own scrollbar, the card
+       * stopped at 400px whatever it held, and the last row was cut through
+       * the middle. Two scroll regions on one page is the thing to avoid —
+       * a reader scrolling the page expects the page to move.
+       *
+       * `autoHeight` sizes the grid to its rows; clearing the wrapper's
+       * height is what lets the card follow it. Caller `sx` is spread after,
+       * so a list that genuinely wants a viewport can still take one.
+       */ autoHeight: true,
+        sx: [
+            {
+                height: 'auto'
+            },
+            {
+                '& .MuiDataGrid-row': {
+                    cursor: onOpen ? 'pointer' : 'default'
+                }
+            },
+            /*
+          A cell whose content is taller than one line sets the row's height,
+          and every OTHER cell then draws its content at the top of it — so a
+          two-line date column leaves the counts beside it riding high while
+          `ListRowActions`, which claims `height: '100%'` for itself, sits
+          centred. One row, three vertical positions.
+
+          Centring the cell itself fixes every column at once, including the
+          ones a caller renders with a bare `<Typography>`; `alignItems`
+          alone cannot, because an auto-height child has no spare height to
+          distribute until something claims the row. `justifyContent` is
+          deliberately not set here — a column's own `align` is what decides
+          its horizontal placement, and overriding it would silently undo
+          every right-aligned figure.
+         */ {
+                '& .MuiDataGrid-cell': {
+                    display: 'flex',
+                    alignItems: 'center'
+                }
+            },
+            ...Array.isArray(sx) ? sx : sx ? [
+                sx
+            ] : []
+        ],
+        /*
+       * The column menu can hide a column; only the toolbar can bring it
+       * back.
+       *
+       * Every column here is hideable, `Manage columns` lives in the toolbar,
+       * and the toolbar was off — so hiding the last column left a grid with
+       * no columns and no control that could restore one. Not a rare misuse
+       * either: the per-column menu offers `Hide column` on every column, and
+       * the way out was never on screen.
+       *
+       * The Actions column is the reason the grid was not left completely
+       * blank — `listActionsColumn` marks it `hideable: false` — and "one
+       * unhideable column" is not a recovery path.
+       */ showToolbar: true,
+        pagination: true,
+        // The console's ONE footer (AGL-2501): same options, same default, same
+        // label.
+        pageSizeOptions: TABLE_PAGE_SIZE_OPTIONS,
+        /*
+       * MERGED, not replaced. `initialState` used to ride in through `rest`,
+       * so a caller that set anything in it — a column visibility model, a
+       * sort — silently dropped the shared page size along with it. The two
+       * keys a caller is likely to set are spread individually so that a page
+       * size and a hidden column can coexist.
+       */ initialState: _extends({}, initialState, {
+            pagination: _extends({
+                paginationModel: {
+                    pageSize: TABLE_PAGE_SIZE_DEFAULT
+                }
+            }, initialState == null ? void 0 : initialState.pagination),
+            columns: _extends({}, initialState == null ? void 0 : initialState.columns)
+        }),
+        /*
+       * MERGED with the caller's, for the reason `initialState` is: a caller
+       * setting one slot's props must not drop the shared footer label or the
+       * search box's filter-mode default along with the object they live in.
+       */ slotProps: _extends({}, slotProps, {
+            toolbar: _extends({
+                showQuickFilter
+            }, slotProps == null ? void 0 : slotProps.toolbar),
+            pagination: _extends({
+                labelRowsPerPage: TABLE_ROWS_PER_PAGE_LABEL
+            }, slotProps == null ? void 0 : slotProps.pagination)
+        }),
+        rows: rows,
+        hideFooter: hideFooter
+    }, rest, unpaged));
+}
+ListTable.displayName = 'ListTable';
+export default ListTable;
+
+//# sourceMappingURL=list-table.component.js.map