@payloadcms/ui 3.0.0-canary.23fcb9e → 3.0.0-canary.28c161d

package/dist/elements/Table/index.js

@@ -4,44 +4,55 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 export * from './TableCellProvider/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useTableColumns } from '../TableColumns/index.js';
-import { TableCellProvider } from './TableCellProvider/index.js';
 import './index.scss';
+import { RenderCell } from './RenderCell.js';
+import { TableCellProvider } from './TableCellProvider/index.js';
 export { TableCellProvider };
 const baseClass = 'table';
 export const Table = t0 => {
-  const $ = _c(6);
+  const $ = _c(10);
   const {
+    appearance,
     columns: columnsFromProps,
     customCellContext,
     data
   } = t0;
   const {
+    cellProps,
     columns: columnsFromContext
   } = useTableColumns();
   const columns = columnsFromProps || columnsFromContext;
   let t1;
   let t2;
-  if ($[0] !== columns || $[1] !== data || $[2] !== customCellContext) {
+  if ($[0] !== columns || $[1] !== appearance || $[2] !== data || $[3] !== cellProps || $[4] !== customCellContext) {
     t2 = Symbol.for("react.early_return_sentinel");
     bb0: {
       const activeColumns = columns?.filter(_temp);
       if (!activeColumns || activeColumns.length === 0) {
         let t3;
-        if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+        if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
           t3 = _jsx("div", {
             children: "No columns selected"
           });
-          $[5] = t3;
+          $[7] = t3;
         } else {
-          t3 = $[5];
+          t3 = $[7];
         }
         t2 = t3;
         break bb0;
       }
+      const t3 = appearance && `${baseClass}--appearance-${appearance}`;
+      let t4;
+      if ($[8] !== t3) {
+        t4 = [baseClass, t3].filter(Boolean);
+        $[8] = t3;
+        $[9] = t4;
+      } else {
+        t4 = $[9];
+      }
       t1 = _jsx("div", {
-        className: baseClass,
+        className: t4.join(" "),
         children: _jsxs("table", {
           cellPadding: "0",
           cellSpacing: "0",
@@ -52,35 +63,34 @@ export const Table = t0 => {
           }), _jsx("tbody", {
             children: data && data.map((row, rowIndex) => _jsx("tr", {
               className: `row-${rowIndex + 1}`,
-              children: activeColumns.map((col_1, colIndex) => _jsx("td", {
-                className: `cell-${col_1.accessor}`,
-                children: _jsx(TableCellProvider, {
-                  cellData: row[col_1.accessor],
-                  cellProps: col_1?.cellProps,
-                  columnIndex: colIndex,
+              children: activeColumns.map((col_1, colIndex) => {
+                const isLink = colIndex === 0 && col_1.accessor !== "_select" || colIndex === 1 && activeColumns[0]?.accessor === "_select";
+                return _jsx(RenderCell, {
+                  cellProps: {
+                    link: isLink,
+                    ...cellProps?.[colIndex]
+                  },
+                  col: col_1,
+                  colIndex,
                   customCellContext,
-                  rowData: row,
-                  children: _jsx(RenderComponent, {
-                    clientProps: {
-                      ...col_1?.cellProps
-                    },
-                    mappedComponent: col_1.components.Cell
-                  })
-                })
-              }, colIndex))
+                  row
+                }, colIndex);
+              })
             }, rowIndex))
           })]
         })
       });
     }
     $[0] = columns;
-    $[1] = data;
-    $[2] = customCellContext;
-    $[3] = t1;
-    $[4] = t2;
+    $[1] = appearance;
+    $[2] = data;
+    $[3] = cellProps;
+    $[4] = customCellContext;
+    $[5] = t1;
+    $[6] = t2;
   } else {
-    t1 = $[3];
-    t2 = $[4];
+    t1 = $[5];
+    t2 = $[6];
   }
   if (t2 !== Symbol.for("react.early_return_sentinel")) {
     return t2;
@@ -93,7 +103,7 @@ function _temp(col) {
 function _temp2(col_0, i) {
   return _jsx("th", {
     id: `heading-${col_0.accessor}`,
-    children: col_0.components.Heading
+    children: col_0.Heading
   }, i);
 }
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","RenderComponent","useTableColumns","TableCellProvider","baseClass","Table","t0","$","columns","columnsFromProps","customCellContext","data","columnsFromContext","t1","t2","Symbol","for","activeColumns","filter","_temp","length","t3","_jsx","children","className","_jsxs","cellPadding","cellSpacing","map","_temp2","row","rowIndex","col_1","colIndex","col","accessor","cellData","cellProps","columnIndex","rowData","clientProps","mappedComponent","components","Cell","active","col_0","i","id","Heading"],"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, ClientField, MappedComponent } from 'payload'\n\nimport React from 'react'\n\nexport * from './TableCellProvider/index.js'\n\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport { TableCellProvider } from './TableCellProvider/index.js'\nimport './index.scss'\n\nexport { TableCellProvider }\n\nconst baseClass = 'table'\n\nexport type Column = {\n  readonly Label: React.ReactNode\n  readonly accessor: string\n  readonly active: boolean\n  readonly cellProps?: Partial<CellComponentProps>\n  readonly components: {\n    Cell: MappedComponent\n    Heading: React.ReactNode\n  }\n}\n\nexport type Props = {\n  readonly columns?: Column[]\n  readonly customCellContext?: Record<string, unknown>\n  readonly data: Record<string, unknown>[]\n  readonly fields: ClientField[]\n}\n\nexport const Table: React.FC<Props> = ({ columns: columnsFromProps, customCellContext, data }) => {\n  const { columns: columnsFromContext } = useTableColumns()\n\n  const columns = columnsFromProps || columnsFromContext\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (!activeColumns || activeColumns.length === 0) {\n    return <div>No columns selected</div>\n  }\n\n  return (\n    <div className={baseClass}>\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        <thead>\n          <tr>\n            {activeColumns.map((col, i) => (\n              <th id={`heading-${col.accessor}`} key={i}>\n                {col.components.Heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data &&\n            data.map((row, rowIndex) => (\n              <tr className={`row-${rowIndex + 1}`} key={rowIndex}>\n                {activeColumns.map((col, colIndex) => {\n                  return (\n                    <td className={`cell-${col.accessor}`} key={colIndex}>\n                      <TableCellProvider\n                        cellData={row[col.accessor]}\n                        cellProps={col?.cellProps}\n                        columnIndex={colIndex}\n                        customCellContext={customCellContext}\n                        rowData={row}\n                      >\n                        <RenderComponent\n                          clientProps={{ ...col?.cellProps }}\n                          mappedComponent={col.components.Cell}\n                        />\n                      </TableCellProvider>\n                    </td>\n                  )\n                })}\n              </tr>\n            ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,cAAc;AAEd,SAASC,eAAe,QAAQ;AAChC,SAASC,eAAe,QAAQ;AAChC,SAASC,iBAAiB,QAAQ;AAClC,OAAO;AAEP,SAASA,iBAAiB;AAE1B,MAAMC,SAAA,GAAY;AAoBlB,OAAO,MAAMC,KAAA,GAAyBC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,OAAA,EAAAC,gBAAA;IAAAC,iBAAA;IAAAC;EAAA,IAAAL,EAAsD;EAC3F;IAAAE,OAAA,EAAAI;EAAA,IAAwCV,eAAA;EAExC,MAAAM,OAAA,GAAgBC,gBAAA,IAAoBG,kBAAA;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAP,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAI,IAAA,IAAAJ,CAAA,QAAAG,iBAAA;IAK3BI,EAAA,GAAAC,MAAA,CAAAC,GAAA,8B;;MAHT,MAAAC,aAAA,GAAsBT,OAAA,EAAAU,MAAA,CAAAC,KAAA;MAA8B,IAEhD,CAACF,aAAA,IAAiBA,aAAA,CAAAG,MAAA,MAAyB;QAAA,IAAAC,EAAA;QAAA,IAAAd,CAAA,QAAAQ,MAAA,CAAAC,GAAA;UACtCK,EAAA,GAAAC,IAAA,CAAC;YAAAC,QAAA,EAAI;UAAA,C;;;;;QAALT,EAAA,GAAAO,E;;;MAIPR,EAAA,GAAAS,IAAA,CAAC;QAAAE,SAAA,EAAApB,SAAA;QAAAmB,QAAA,EACCE,KAAA,CAAC;UAAAC,WAAA,EAAkB;UAAAC,WAAA,EAAgB;UAAAJ,QAAA,GACjCD,IAAA,CAAC;YAAAC,QAAA,EACCD,IAAA,CAAC;cAAAC,QAAA,EACEN,aAAA,CAAAW,GAAA,CAAAC,MACyC;YAAA,C;cAM9CP,IAAA,CAAC;YAAAC,QAAA,EACEZ,IAAA,IACCA,IAAA,CAAAiB,GAAA,EAAAE,GAAA,EAAAC,QAAA,KACET,IAAA,CAAC;cAAAE,SAAA,EAAc,OAAOO,QAAA,IAAW,EAAG;cAAAR,QAAA,EACjCN,aAAA,CAAAW,GAAA,EAAAI,KAAA,EAAAC,QAAA,KAEGX,IAAA,CAAC;gBAAAE,SAAA,EAAc,QAAQU,KAAA,CAAAC,QAAA,EAAc;gBAAAZ,QAAA,EACnCD,IAAA,CAAAnB,iBAAA;kBAAAiC,QAAA,EACYN,GAAG,CAACI,KAAA,CAAAC,QAAA;kBAAAE,SAAA,EACHH,KAAA,EAAAG,SAAA;kBAAAC,WAAA,EACEL,QAAA;kBAAAvB,iBAAA;kBAAA6B,OAAA,EAEJT,GAAA;kBAAAP,QAAA,EAETD,IAAA,CAAArB,eAAA;oBAAAuC,WAAA;sBAAA,GACoBN,KAAA,EAAAG;oBAAA;oBAAAI,eAAA,EACDP,KAAA,CAAAQ,UAAA,CAAAC;kBAAA,C;;iBAVqBV,QAAA,CAehD;YAAA,GAlByCF,QAAA;UAAA,C;;;;;;;;;;;;;;;;SAdrDlB,E;CAuCJ;AAnDsC,SAAAM,MAAAe,GAAA;EAAA,OAKWA,GAAA,EAAAU,MAAA;AAAA;AALX,SAAAf,OAAAgB,KAAA,EAAAC,CAAA;EAAA,OAiBxBxB,IAAA,CAAC;IAAAyB,EAAA,EAAO,WAAWb,KAAA,CAAAC,QAAA,EAAc;IAAAZ,QAAA,EAC9BW,KAAA,CAAAQ,UAAA,CAAAM;EAAA,GADqCF,CAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useTableColumns","RenderCell","TableCellProvider","baseClass","Table","t0","$","appearance","columns","columnsFromProps","customCellContext","data","cellProps","columnsFromContext","t1","t2","Symbol","for","activeColumns","filter","_temp","length","t3","_jsx","children","t4","Boolean","className","join","_jsxs","cellPadding","cellSpacing","map","_temp2","row","rowIndex","col_1","colIndex","isLink","col","accessor","link","active","col_0","i","id","Heading"],"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, ClientField } from 'payload'\n\nimport React from 'react'\n\nexport * from './TableCellProvider/index.js'\n\nimport { useTableColumns } from '../TableColumns/index.js'\nimport './index.scss'\nimport { RenderCell } from './RenderCell.js'\nimport { TableCellProvider } from './TableCellProvider/index.js'\n\nexport { TableCellProvider }\n\nconst baseClass = 'table'\n\nexport type Column = {\n  readonly accessor: string\n  readonly active: boolean\n  readonly cellProps?: Partial<CellComponentProps>\n  readonly Heading: React.ReactNode\n}\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly columns?: Column[]\n  readonly customCellContext?: Record<string, unknown>\n  readonly data: Record<string, unknown>[]\n  readonly fields: ClientField[]\n}\n\nexport const Table: React.FC<Props> = ({\n  appearance,\n  columns: columnsFromProps,\n  customCellContext,\n  data,\n}) => {\n  const { cellProps, columns: columnsFromContext } = useTableColumns()\n\n  const columns = columnsFromProps || columnsFromContext\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (!activeColumns || activeColumns.length === 0) {\n    return <div>No columns selected</div>\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        <thead>\n          <tr>\n            {activeColumns.map((col, i) => (\n              <th id={`heading-${col.accessor}`} key={i}>\n                {col.Heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data &&\n            data.map((row, rowIndex) => (\n              <tr className={`row-${rowIndex + 1}`} key={rowIndex}>\n                {activeColumns.map((col, colIndex) => {\n                  const isLink =\n                    (colIndex === 0 && col.accessor !== '_select') ||\n                    (colIndex === 1 && activeColumns[0]?.accessor === '_select')\n\n                  return (\n                    <RenderCell\n                      cellProps={{\n                        link: isLink,\n                        ...cellProps?.[colIndex],\n                      }}\n                      col={col}\n                      colIndex={colIndex}\n                      customCellContext={customCellContext}\n                      key={colIndex}\n                      row={row}\n                    />\n                  )\n                })}\n              </tr>\n            ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/index.scss

@@ -5,6 +5,10 @@
   overflow: auto;
   max-width: 100%;
 
+  table {
+    min-width: 100%;
+  }
+
   thead {
     color: var(--theme-elevation-400);
 
@@ -19,6 +23,7 @@
 
   th,
   td {
+    vertical-align: top;
     padding: base(0.8) base(0.6);
     min-width: 150px;
 
@@ -45,6 +50,51 @@
     outline-offset: var(--accessibility-outline-offset);
   }
 
+  &--appearance-condensed {
+    thead {
+      th:first-child {
+        border-top-left-radius: $style-radius-s;
+      }
+
+      th:last-child {
+        border-top-right-radius: $style-radius-s;
+      }
+
+      background: var(--theme-elevation-50);
+    }
+
+    tbody {
+      tr {
+        &:nth-child(odd) {
+          background: transparent;
+          border-radius: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      padding: base(0.3) base(0.3);
+
+      &:first-child {
+        padding-inline-start: base(0.6);
+      }
+
+      &:last-child {
+        padding-inline-end: base(0.6);
+      }
+    }
+
+    th {
+      padding: base(0.3);
+    }
+
+    tr td,
+    th {
+      border: 0.5px solid var(--theme-elevation-100);
+    }
+  }
+
   @include mid-break {
     th,
     td {

package/dist/elements/TableColumns/buildColumnState.d.ts

@@ -1,12 +1,15 @@
-import type { CellComponentProps, ClientField, SanitizedCollectionConfig } from 'payload';
+import type { ClientField, SanitizedCollectionConfig } from 'payload';
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js';
+import type { SortColumnProps } from '../SortColumn/index.js';
 import type { Column } from '../Table/index.js';
 type Args = {
-    cellProps: Partial<CellComponentProps>[];
+    beforeRows?: Column[];
     columnPreferences: ColumnPreferences;
     columns?: ColumnPreferences;
     enableRowSelections: boolean;
+    enableRowTypes?: boolean;
     fields: ClientField[];
+    sortColumnProps?: Partial<SortColumnProps>;
     useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle'];
 };
 export declare const buildColumnState: (args: Args) => Column[];

package/dist/elements/TableColumns/buildColumnState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildColumnState.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,kBAAkB,EAClB,WAAW,EACX,yBAAyB,EAE1B,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAS/C,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAA;IACxC,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,IAAI,KAAG,MAAM,EA2InD,CAAA"}
+{"version":3,"file":"buildColumnState.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAIlF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAS/C,KAAK,IAAI,GAAG;IACV,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IAC1C,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,IAAI,KAAG,MAAM,EA4JnD,CAAA"}

package/dist/elements/TableColumns/buildColumnState.js

@@ -10,11 +10,12 @@ import { SortColumn } from '../SortColumn/index.js';
 import { DefaultCell } from '../Table/DefaultCell/index.js';
 export const buildColumnState = args => {
   const {
-    cellProps,
+    beforeRows,
     columnPreferences,
     columns,
     enableRowSelections,
     fields,
+    sortColumnProps,
     useAsTitle
   } = args;
   let sortedFieldMap = flattenFieldMap(fields);
@@ -37,9 +38,15 @@ export const buildColumnState = args => {
     sortedFieldMap = sortedFieldMap.sort((a, b) => {
       const aIndex = sortTo.findIndex(column => 'name' in a && column.accessor === a.name);
       const bIndex = sortTo.findIndex(column => 'name' in b && column.accessor === b.name);
-      if (aIndex === -1 && bIndex === -1) return 0;
-      if (aIndex === -1) return 1;
-      if (bIndex === -1) return -1;
+      if (aIndex === -1 && bIndex === -1) {
+        return 0;
+      }
+      if (aIndex === -1) {
+        return 1;
+      }
+      if (bIndex === -1) {
+        return -1;
+      }
       return aIndex - bIndex;
     });
   }
@@ -57,43 +64,43 @@ export const buildColumnState = args => {
     if (active && !activeColumnsIndices.includes(index)) {
       activeColumnsIndices.push(index);
     }
-    const isFirstActiveColumn = activeColumnsIndices[0] === index;
     const CustomLabelToRender = field && 'admin' in field && 'components' in field.admin && 'Label' in field.admin.components && field.admin.components.Label !== undefined // let it return `null`
     ? field.admin.components.Label : undefined;
     const Label = /*#__PURE__*/_jsx(FieldLabel, {
-      Label: CustomLabelToRender,
       field: field,
-      label: 'label' in field ? field.label : undefined,
+      Label: CustomLabelToRender,
       unstyled: true
     });
     const fieldAffectsDataSubFields = field && field.type && (field.type === 'array' || field.type === 'group' || field.type === 'blocks');
     const Heading = /*#__PURE__*/_jsx(SortColumn, {
-      Label: Label,
       disable: fieldAffectsDataSubFields || field?._isPresentational || undefined,
+      Label: Label,
       label: 'label' in field ? field.label : undefined,
-      name: 'name' in field ? field.name : undefined
+      name: 'name' in field ? field.name : undefined,
+      ...(sortColumnProps || {})
     });
     if (field) {
       const column = {
-        Label,
         accessor: 'name' in field ? field.name : undefined,
         active,
         cellProps: {
           field: {
             ...(field || {}),
-            ...(cellProps?.[index]?.field || {})
-          },
-          ...cellProps?.[index],
-          link: isFirstActiveColumn
+            admin: {
+              ...(field.admin || {}),
+              components: {
+                ...(field.admin?.components || {}),
+                Cell: field.admin?.components?.Cell || {
+                  type: 'client',
+                  Component: DefaultCell,
+                  RenderedComponent: null
+                },
+                Label
+              }
+            }
+          }
         },
-        components: {
-          Cell: field.admin?.components?.Cell || {
-            type: 'client',
-            Component: DefaultCell,
-            RenderedComponent: null
-          },
-          Heading
-        }
+        Heading
       };
       acc.push(column);
     }
@@ -101,19 +108,28 @@ export const buildColumnState = args => {
   }, []);
   if (enableRowSelections) {
     sorted.unshift({
-      Label: null,
       accessor: '_select',
       active: true,
-      components: {
-        Cell: {
-          type: 'client',
-          Component: null,
-          RenderedComponent: /*#__PURE__*/_jsx(SelectRow, {})
-        },
-        Heading: /*#__PURE__*/_jsx(SelectAll, {})
-      }
+      cellProps: {
+        field: {
+          admin: {
+            components: {
+              Cell: {
+                type: 'client',
+                Component: null,
+                RenderedComponent: /*#__PURE__*/_jsx(SelectRow, {})
+              },
+              Label: null
+            }
+          }
+        }
+      },
+      Heading: /*#__PURE__*/_jsx(SelectAll, {})
     });
   }
+  if (beforeRows) {
+    sorted.unshift(...beforeRows);
+  }
   return sorted;
 };
 //# sourceMappingURL=buildColumnState.js.map

package/dist/elements/TableColumns/buildColumnState.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildColumnState.js","names":["React","FieldLabel","flattenFieldMap","SelectAll","SelectRow","SortColumn","DefaultCell","buildColumnState","args","cellProps","columnPreferences","columns","enableRowSelections","fields","useAsTitle","sortedFieldMap","idFieldIndex","findIndex","field","name","idField","splice","unshift","useAsTitleFieldIndex","useAsTitleField","sortTo","sort","a","b","aIndex","column","accessor","bIndex","activeColumnsIndices","sorted","reduce","acc","index","columnPreference","find","preference","active","Array","isArray","length","includes","push","isFirstActiveColumn","CustomLabelToRender","admin","components","Label","undefined","_jsx","label","unstyled","fieldAffectsDataSubFields","type","Heading","disable","_isPresentational","link","Cell","Component","RenderedComponent"],"sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"sourcesContent":["'use client'\nimport type {\n  CellComponentProps,\n  ClientField,\n  SanitizedCollectionConfig,\n  StaticLabel,\n} from 'payload'\n\nimport React from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { Column } from '../Table/index.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { flattenFieldMap } from '../../utilities/flattenFieldMap.js'\nimport { SelectAll } from '../SelectAll/index.js'\nimport { SelectRow } from '../SelectRow/index.js'\nimport { SortColumn } from '../SortColumn/index.js'\nimport { DefaultCell } from '../Table/DefaultCell/index.js'\n\ntype Args = {\n  cellProps: Partial<CellComponentProps>[]\n  columnPreferences: ColumnPreferences\n  columns?: ColumnPreferences\n  enableRowSelections: boolean\n  fields: ClientField[]\n  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const buildColumnState = (args: Args): Column[] => {\n  const { cellProps, columnPreferences, columns, enableRowSelections, fields, useAsTitle } = args\n\n  let sortedFieldMap = flattenFieldMap(fields)\n\n  // place the `ID` field first, if it exists\n  // do the same for the `useAsTitle` field with precedence over the `ID` field\n  // then sort the rest of the fields based on the `defaultColumns` or `columnPreferences`\n  const idFieldIndex = sortedFieldMap.findIndex((field) => 'name' in field && field.name === 'id')\n\n  if (idFieldIndex > -1) {\n    const idField = sortedFieldMap.splice(idFieldIndex, 1)[0]\n    sortedFieldMap.unshift(idField)\n  }\n\n  const useAsTitleFieldIndex = useAsTitle\n    ? sortedFieldMap.findIndex((field) => 'name' in field && field.name === useAsTitle)\n    : -1\n\n  if (useAsTitleFieldIndex > -1) {\n    const useAsTitleField = sortedFieldMap.splice(useAsTitleFieldIndex, 1)[0]\n    sortedFieldMap.unshift(useAsTitleField)\n  }\n\n  const sortTo = columnPreferences || columns\n\n  if (sortTo) {\n    // sort the fields to the order of `defaultColumns` or `columnPreferences`\n    sortedFieldMap = sortedFieldMap.sort((a, b) => {\n      const aIndex = sortTo.findIndex((column) => 'name' in a && column.accessor === a.name)\n      const bIndex = sortTo.findIndex((column) => 'name' in b && column.accessor === b.name)\n      if (aIndex === -1 && bIndex === -1) return 0\n      if (aIndex === -1) return 1\n      if (bIndex === -1) return -1\n      return aIndex - bIndex\n    })\n  }\n\n  const activeColumnsIndices = []\n\n  const sorted: Column[] = sortedFieldMap.reduce((acc, field, index) => {\n    const columnPreference = columnPreferences?.find(\n      (preference) => 'name' in field && preference.accessor === field.name,\n    )\n\n    let active = false\n\n    if (columnPreference) {\n      active = columnPreference.active\n    } else if (columns && Array.isArray(columns) && columns.length > 0) {\n      active = columns.find((column) => 'name' in field && column.accessor === field.name)?.active\n    } else if (activeColumnsIndices.length < 4) {\n      active = true\n    }\n\n    if (active && !activeColumnsIndices.includes(index)) {\n      activeColumnsIndices.push(index)\n    }\n\n    const isFirstActiveColumn = activeColumnsIndices[0] === index\n\n    const CustomLabelToRender =\n      field &&\n      'admin' in field &&\n      'components' in field.admin &&\n      'Label' in field.admin.components &&\n      field.admin.components.Label !== undefined // let it return `null`\n        ? field.admin.components.Label\n        : undefined\n\n    const Label = (\n      <FieldLabel\n        Label={CustomLabelToRender}\n        field={field}\n        label={'label' in field ? (field.label as StaticLabel) : undefined}\n        unstyled\n      />\n    )\n\n    const fieldAffectsDataSubFields =\n      field &&\n      field.type &&\n      (field.type === 'array' || field.type === 'group' || field.type === 'blocks')\n\n    const Heading = (\n      <SortColumn\n        Label={Label}\n        disable={fieldAffectsDataSubFields || field?._isPresentational || undefined}\n        label={'label' in field ? (field.label as StaticLabel) : undefined}\n        name={'name' in field ? field.name : undefined}\n      />\n    )\n\n    if (field) {\n      const column: Column = {\n        Label,\n        accessor: 'name' in field ? field.name : undefined,\n        active,\n        cellProps: {\n          field: {\n            ...(field || ({} as ClientField)),\n            ...(cellProps?.[index]?.field || ({} as ClientField)),\n          } as ClientField,\n          ...cellProps?.[index],\n          link: isFirstActiveColumn,\n        },\n        components: {\n          Cell: field.admin?.components?.Cell || {\n            type: 'client',\n            Component: DefaultCell,\n            RenderedComponent: null,\n          },\n          Heading,\n        },\n      }\n\n      acc.push(column)\n    }\n\n    return acc\n  }, [])\n\n  if (enableRowSelections) {\n    sorted.unshift({\n      Label: null,\n      accessor: '_select',\n      active: true,\n      components: {\n        Cell: {\n          type: 'client',\n          Component: null,\n          RenderedComponent: <SelectRow />,\n        },\n        Heading: <SelectAll />,\n      },\n    })\n  }\n\n  return sorted\n}\n"],"mappings":"AAAA;;;AAQA,OAAOA,KAAA,MAAW;AAKlB,SAASC,UAAU,QAAQ;AAC3B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,UAAU,QAAQ;AAC3B,SAASC,WAAW,QAAQ;AAW5B,OAAO,MAAMC,gBAAA,GAAoBC,IAAA;EAC/B,MAAM;IAAEC,SAAS;IAAEC,iBAAiB;IAAEC,OAAO;IAAEC,mBAAmB;IAAEC,MAAM;IAAEC;EAAU,CAAE,GAAGN,IAAA;EAE3F,IAAIO,cAAA,GAAiBb,eAAA,CAAgBW,MAAA;EAErC;EACA;EACA;EACA,MAAMG,YAAA,GAAeD,cAAA,CAAeE,SAAS,CAAEC,KAAA,IAAU,UAAUA,KAAA,IAASA,KAAA,CAAMC,IAAI,KAAK;EAE3F,IAAIH,YAAA,GAAe,CAAC,GAAG;IACrB,MAAMI,OAAA,GAAUL,cAAA,CAAeM,MAAM,CAACL,YAAA,EAAc,EAAE,CAAC,EAAE;IACzDD,cAAA,CAAeO,OAAO,CAACF,OAAA;EACzB;EAEA,MAAMG,oBAAA,GAAuBT,UAAA,GACzBC,cAAA,CAAeE,SAAS,CAAEC,KAAA,IAAU,UAAUA,KAAA,IAASA,KAAA,CAAMC,IAAI,KAAKL,UAAA,IACtE,CAAC;EAEL,IAAIS,oBAAA,GAAuB,CAAC,GAAG;IAC7B,MAAMC,eAAA,GAAkBT,cAAA,CAAeM,MAAM,CAACE,oBAAA,EAAsB,EAAE,CAAC,EAAE;IACzER,cAAA,CAAeO,OAAO,CAACE,eAAA;EACzB;EAEA,MAAMC,MAAA,GAASf,iBAAA,IAAqBC,OAAA;EAEpC,IAAIc,MAAA,EAAQ;IACV;IACAV,cAAA,GAAiBA,cAAA,CAAeW,IAAI,CAAC,CAACC,CAAA,EAAGC,CAAA;MACvC,MAAMC,MAAA,GAASJ,MAAA,CAAOR,SAAS,CAAEa,MAAA,IAAW,UAAUH,CAAA,IAAKG,MAAA,CAAOC,QAAQ,KAAKJ,CAAA,CAAER,IAAI;MACrF,MAAMa,MAAA,GAASP,MAAA,CAAOR,SAAS,CAAEa,MAAA,IAAW,UAAUF,CAAA,IAAKE,MAAA,CAAOC,QAAQ,KAAKH,CAAA,CAAET,IAAI;MACrF,IAAIU,MAAA,KAAW,CAAC,KAAKG,MAAA,KAAW,CAAC,GAAG,OAAO;MAC3C,IAAIH,MAAA,KAAW,CAAC,GAAG,OAAO;MAC1B,IAAIG,MAAA,KAAW,CAAC,GAAG,OAAO,CAAC;MAC3B,OAAOH,MAAA,GAASG,MAAA;IAClB;EACF;EAEA,MAAMC,oBAAA,GAAuB,EAAE;EAE/B,MAAMC,MAAA,GAAmBnB,cAAA,CAAeoB,MAAM,CAAC,CAACC,GAAA,EAAKlB,KAAA,EAAOmB,KAAA;IAC1D,MAAMC,gBAAA,GAAmB5B,iBAAA,EAAmB6B,IAAA,CACzCC,UAAA,IAAe,UAAUtB,KAAA,IAASsB,UAAA,CAAWT,QAAQ,KAAKb,KAAA,CAAMC,IAAI;IAGvE,IAAIsB,MAAA,GAAS;IAEb,IAAIH,gBAAA,EAAkB;MACpBG,MAAA,GAASH,gBAAA,CAAiBG,MAAM;IAClC,OAAO,IAAI9B,OAAA,IAAW+B,KAAA,CAAMC,OAAO,CAAChC,OAAA,KAAYA,OAAA,CAAQiC,MAAM,GAAG,GAAG;MAClEH,MAAA,GAAS9B,OAAA,CAAQ4B,IAAI,CAAET,MAAA,IAAW,UAAUZ,KAAA,IAASY,MAAA,CAAOC,QAAQ,KAAKb,KAAA,CAAMC,IAAI,GAAGsB,MAAA;IACxF,OAAO,IAAIR,oBAAA,CAAqBW,MAAM,GAAG,GAAG;MAC1CH,MAAA,GAAS;IACX;IAEA,IAAIA,MAAA,IAAU,CAACR,oBAAA,CAAqBY,QAAQ,CAACR,KAAA,GAAQ;MACnDJ,oBAAA,CAAqBa,IAAI,CAACT,KAAA;IAC5B;IAEA,MAAMU,mBAAA,GAAsBd,oBAAoB,CAAC,EAAE,KAAKI,KAAA;IAExD,MAAMW,mBAAA,GACJ9B,KAAA,IACA,WAAWA,KAAA,IACX,gBAAgBA,KAAA,CAAM+B,KAAK,IAC3B,WAAW/B,KAAA,CAAM+B,KAAK,CAACC,UAAU,IACjChC,KAAA,CAAM+B,KAAK,CAACC,UAAU,CAACC,KAAK,KAAKC,SAAA,CAAU;IAAA,EACvClC,KAAA,CAAM+B,KAAK,CAACC,UAAU,CAACC,KAAK,GAC5BC,SAAA;IAEN,MAAMD,KAAA,gBACJE,IAAA,CAACpD,UAAA;MACCkD,KAAA,EAAOH,mBAAA;MACP9B,KAAA,EAAOA,KAAA;MACPoC,KAAA,EAAO,WAAWpC,KAAA,GAASA,KAAA,CAAMoC,KAAK,GAAmBF,SAAA;MACzDG,QAAQ;;IAIZ,MAAMC,yBAAA,GACJtC,KAAA,IACAA,KAAA,CAAMuC,IAAI,KACTvC,KAAA,CAAMuC,IAAI,KAAK,WAAWvC,KAAA,CAAMuC,IAAI,KAAK,WAAWvC,KAAA,CAAMuC,IAAI,KAAK,QAAO;IAE7E,MAAMC,OAAA,gBACJL,IAAA,CAAChD,UAAA;MACC8C,KAAA,EAAOA,KAAA;MACPQ,OAAA,EAASH,yBAAA,IAA6BtC,KAAA,EAAO0C,iBAAA,IAAqBR,SAAA;MAClEE,KAAA,EAAO,WAAWpC,KAAA,GAASA,KAAA,CAAMoC,KAAK,GAAmBF,SAAA;MACzDjC,IAAA,EAAM,UAAUD,KAAA,GAAQA,KAAA,CAAMC,IAAI,GAAGiC;;IAIzC,IAAIlC,KAAA,EAAO;MACT,MAAMY,MAAA,GAAiB;QACrBqB,KAAA;QACApB,QAAA,EAAU,UAAUb,KAAA,GAAQA,KAAA,CAAMC,IAAI,GAAGiC,SAAA;QACzCX,MAAA;QACAhC,SAAA,EAAW;UACTS,KAAA,EAAO;YACL,IAAIA,KAAA,IAAU,CAAC,CAAiB;YAChC,IAAIT,SAAA,GAAY4B,KAAA,CAAM,EAAEnB,KAAA,IAAU,CAAC,CAAiB;UACtD;UACA,GAAGT,SAAA,GAAY4B,KAAA,CAAM;UACrBwB,IAAA,EAAMd;QACR;QACAG,UAAA,EAAY;UACVY,IAAA,EAAM5C,KAAA,CAAM+B,KAAK,EAAEC,UAAA,EAAYY,IAAA,IAAQ;YACrCL,IAAA,EAAM;YACNM,SAAA,EAAWzD,WAAA;YACX0D,iBAAA,EAAmB;UACrB;UACAN;QACF;MACF;MAEAtB,GAAA,CAAIU,IAAI,CAAChB,MAAA;IACX;IAEA,OAAOM,GAAA;EACT,GAAG,EAAE;EAEL,IAAIxB,mBAAA,EAAqB;IACvBsB,MAAA,CAAOZ,OAAO,CAAC;MACb6B,KAAA,EAAO;MACPpB,QAAA,EAAU;MACVU,MAAA,EAAQ;MACRS,UAAA,EAAY;QACVY,IAAA,EAAM;UACJL,IAAA,EAAM;UACNM,SAAA,EAAW;UACXC,iBAAA,eAAmBX,IAAA,CAACjD,SAAA;QACtB;QACAsD,OAAA,eAASL,IAAA,CAAClD,SAAA;MACZ;IACF;EACF;EAEA,OAAO+B,MAAA;AACT","ignoreList":[]}
+{"version":3,"file":"buildColumnState.js","names":["React","FieldLabel","flattenFieldMap","SelectAll","SelectRow","SortColumn","DefaultCell","buildColumnState","args","beforeRows","columnPreferences","columns","enableRowSelections","fields","sortColumnProps","useAsTitle","sortedFieldMap","idFieldIndex","findIndex","field","name","idField","splice","unshift","useAsTitleFieldIndex","useAsTitleField","sortTo","sort","a","b","aIndex","column","accessor","bIndex","activeColumnsIndices","sorted","reduce","acc","index","columnPreference","find","preference","active","Array","isArray","length","includes","push","CustomLabelToRender","admin","components","Label","undefined","_jsx","unstyled","fieldAffectsDataSubFields","type","Heading","disable","_isPresentational","label","cellProps","Cell","Component","RenderedComponent"],"sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport React from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { SortColumnProps } from '../SortColumn/index.js'\nimport type { Column } from '../Table/index.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { flattenFieldMap } from '../../utilities/flattenFieldMap.js'\nimport { SelectAll } from '../SelectAll/index.js'\nimport { SelectRow } from '../SelectRow/index.js'\nimport { SortColumn } from '../SortColumn/index.js'\nimport { DefaultCell } from '../Table/DefaultCell/index.js'\n\ntype Args = {\n  beforeRows?: Column[]\n  columnPreferences: ColumnPreferences\n  columns?: ColumnPreferences\n  enableRowSelections: boolean\n  enableRowTypes?: boolean\n  fields: ClientField[]\n  sortColumnProps?: Partial<SortColumnProps>\n  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const buildColumnState = (args: Args): Column[] => {\n  const {\n    beforeRows,\n    columnPreferences,\n    columns,\n    enableRowSelections,\n    fields,\n    sortColumnProps,\n    useAsTitle,\n  } = args\n\n  let sortedFieldMap = flattenFieldMap(fields)\n\n  // place the `ID` field first, if it exists\n  // do the same for the `useAsTitle` field with precedence over the `ID` field\n  // then sort the rest of the fields based on the `defaultColumns` or `columnPreferences`\n  const idFieldIndex = sortedFieldMap.findIndex((field) => 'name' in field && field.name === 'id')\n\n  if (idFieldIndex > -1) {\n    const idField = sortedFieldMap.splice(idFieldIndex, 1)[0]\n    sortedFieldMap.unshift(idField)\n  }\n\n  const useAsTitleFieldIndex = useAsTitle\n    ? sortedFieldMap.findIndex((field) => 'name' in field && field.name === useAsTitle)\n    : -1\n\n  if (useAsTitleFieldIndex > -1) {\n    const useAsTitleField = sortedFieldMap.splice(useAsTitleFieldIndex, 1)[0]\n    sortedFieldMap.unshift(useAsTitleField)\n  }\n\n  const sortTo = columnPreferences || columns\n\n  if (sortTo) {\n    // sort the fields to the order of `defaultColumns` or `columnPreferences`\n    sortedFieldMap = sortedFieldMap.sort((a, b) => {\n      const aIndex = sortTo.findIndex((column) => 'name' in a && column.accessor === a.name)\n      const bIndex = sortTo.findIndex((column) => 'name' in b && column.accessor === b.name)\n      if (aIndex === -1 && bIndex === -1) {\n        return 0\n      }\n      if (aIndex === -1) {\n        return 1\n      }\n      if (bIndex === -1) {\n        return -1\n      }\n      return aIndex - bIndex\n    })\n  }\n\n  const activeColumnsIndices = []\n\n  const sorted: Column[] = sortedFieldMap.reduce((acc, field, index) => {\n    const columnPreference = columnPreferences?.find(\n      (preference) => 'name' in field && preference.accessor === field.name,\n    )\n\n    let active = false\n\n    if (columnPreference) {\n      active = columnPreference.active\n    } else if (columns && Array.isArray(columns) && columns.length > 0) {\n      active = columns.find((column) => 'name' in field && column.accessor === field.name)?.active\n    } else if (activeColumnsIndices.length < 4) {\n      active = true\n    }\n\n    if (active && !activeColumnsIndices.includes(index)) {\n      activeColumnsIndices.push(index)\n    }\n\n    const CustomLabelToRender =\n      field &&\n      'admin' in field &&\n      'components' in field.admin &&\n      'Label' in field.admin.components &&\n      field.admin.components.Label !== undefined // let it return `null`\n        ? field.admin.components.Label\n        : undefined\n\n    const Label = <FieldLabel field={field} Label={CustomLabelToRender} unstyled />\n\n    const fieldAffectsDataSubFields =\n      field &&\n      field.type &&\n      (field.type === 'array' || field.type === 'group' || field.type === 'blocks')\n\n    const Heading = (\n      <SortColumn\n        disable={fieldAffectsDataSubFields || field?._isPresentational || undefined}\n        Label={Label}\n        label={'label' in field ? (field.label as StaticLabel) : undefined}\n        name={'name' in field ? field.name : undefined}\n        {...(sortColumnProps || {})}\n      />\n    )\n\n    if (field) {\n      const column: Column = {\n        accessor: 'name' in field ? field.name : undefined,\n        active,\n        cellProps: {\n          field: {\n            ...(field || ({} as ClientField)),\n            admin: {\n              ...(field.admin || {}),\n              components: {\n                ...(field.admin?.components || {}),\n                Cell: field.admin?.components?.Cell || {\n                  type: 'client',\n                  Component: DefaultCell,\n                  RenderedComponent: null,\n                },\n                Label,\n              },\n            },\n          } as ClientField,\n        },\n        Heading,\n      }\n\n      acc.push(column)\n    }\n\n    return acc\n  }, [])\n\n  if (enableRowSelections) {\n    sorted.unshift({\n      accessor: '_select',\n      active: true,\n      cellProps: {\n        field: {\n          admin: {\n            components: {\n              Cell: {\n                type: 'client',\n                Component: null,\n                RenderedComponent: <SelectRow />,\n              },\n              Label: null,\n            },\n          },\n        } as ClientField,\n      },\n      Heading: <SelectAll />,\n    })\n  }\n\n  if (beforeRows) {\n    sorted.unshift(...beforeRows)\n  }\n\n  return sorted\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAMlB,SAASC,UAAU,QAAQ;AAC3B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,UAAU,QAAQ;AAC3B,SAASC,WAAW,QAAQ;AAa5B,OAAO,MAAMC,gBAAA,GAAoBC,IAAA;EAC/B,MAAM;IACJC,UAAU;IACVC,iBAAiB;IACjBC,OAAO;IACPC,mBAAmB;IACnBC,MAAM;IACNC,eAAe;IACfC;EAAU,CACX,GAAGP,IAAA;EAEJ,IAAIQ,cAAA,GAAiBd,eAAA,CAAgBW,MAAA;EAErC;EACA;EACA;EACA,MAAMI,YAAA,GAAeD,cAAA,CAAeE,SAAS,CAAEC,KAAA,IAAU,UAAUA,KAAA,IAASA,KAAA,CAAMC,IAAI,KAAK;EAE3F,IAAIH,YAAA,GAAe,CAAC,GAAG;IACrB,MAAMI,OAAA,GAAUL,cAAA,CAAeM,MAAM,CAACL,YAAA,EAAc,EAAE,CAAC,EAAE;IACzDD,cAAA,CAAeO,OAAO,CAACF,OAAA;EACzB;EAEA,MAAMG,oBAAA,GAAuBT,UAAA,GACzBC,cAAA,CAAeE,SAAS,CAAEC,KAAA,IAAU,UAAUA,KAAA,IAASA,KAAA,CAAMC,IAAI,KAAKL,UAAA,IACtE,CAAC;EAEL,IAAIS,oBAAA,GAAuB,CAAC,GAAG;IAC7B,MAAMC,eAAA,GAAkBT,cAAA,CAAeM,MAAM,CAACE,oBAAA,EAAsB,EAAE,CAAC,EAAE;IACzER,cAAA,CAAeO,OAAO,CAACE,eAAA;EACzB;EAEA,MAAMC,MAAA,GAAShB,iBAAA,IAAqBC,OAAA;EAEpC,IAAIe,MAAA,EAAQ;IACV;IACAV,cAAA,GAAiBA,cAAA,CAAeW,IAAI,CAAC,CAACC,CAAA,EAAGC,CAAA;MACvC,MAAMC,MAAA,GAASJ,MAAA,CAAOR,SAAS,CAAEa,MAAA,IAAW,UAAUH,CAAA,IAAKG,MAAA,CAAOC,QAAQ,KAAKJ,CAAA,CAAER,IAAI;MACrF,MAAMa,MAAA,GAASP,MAAA,CAAOR,SAAS,CAAEa,MAAA,IAAW,UAAUF,CAAA,IAAKE,MAAA,CAAOC,QAAQ,KAAKH,CAAA,CAAET,IAAI;MACrF,IAAIU,MAAA,KAAW,CAAC,KAAKG,MAAA,KAAW,CAAC,GAAG;QAClC,OAAO;MACT;MACA,IAAIH,MAAA,KAAW,CAAC,GAAG;QACjB,OAAO;MACT;MACA,IAAIG,MAAA,KAAW,CAAC,GAAG;QACjB,OAAO,CAAC;MACV;MACA,OAAOH,MAAA,GAASG,MAAA;IAClB;EACF;EAEA,MAAMC,oBAAA,GAAuB,EAAE;EAE/B,MAAMC,MAAA,GAAmBnB,cAAA,CAAeoB,MAAM,CAAC,CAACC,GAAA,EAAKlB,KAAA,EAAOmB,KAAA;IAC1D,MAAMC,gBAAA,GAAmB7B,iBAAA,EAAmB8B,IAAA,CACzCC,UAAA,IAAe,UAAUtB,KAAA,IAASsB,UAAA,CAAWT,QAAQ,KAAKb,KAAA,CAAMC,IAAI;IAGvE,IAAIsB,MAAA,GAAS;IAEb,IAAIH,gBAAA,EAAkB;MACpBG,MAAA,GAASH,gBAAA,CAAiBG,MAAM;IAClC,OAAO,IAAI/B,OAAA,IAAWgC,KAAA,CAAMC,OAAO,CAACjC,OAAA,KAAYA,OAAA,CAAQkC,MAAM,GAAG,GAAG;MAClEH,MAAA,GAAS/B,OAAA,CAAQ6B,IAAI,CAAET,MAAA,IAAW,UAAUZ,KAAA,IAASY,MAAA,CAAOC,QAAQ,KAAKb,KAAA,CAAMC,IAAI,GAAGsB,MAAA;IACxF,OAAO,IAAIR,oBAAA,CAAqBW,MAAM,GAAG,GAAG;MAC1CH,MAAA,GAAS;IACX;IAEA,IAAIA,MAAA,IAAU,CAACR,oBAAA,CAAqBY,QAAQ,CAACR,KAAA,GAAQ;MACnDJ,oBAAA,CAAqBa,IAAI,CAACT,KAAA;IAC5B;IAEA,MAAMU,mBAAA,GACJ7B,KAAA,IACA,WAAWA,KAAA,IACX,gBAAgBA,KAAA,CAAM8B,KAAK,IAC3B,WAAW9B,KAAA,CAAM8B,KAAK,CAACC,UAAU,IACjC/B,KAAA,CAAM8B,KAAK,CAACC,UAAU,CAACC,KAAK,KAAKC,SAAA,CAAU;IAAA,EACvCjC,KAAA,CAAM8B,KAAK,CAACC,UAAU,CAACC,KAAK,GAC5BC,SAAA;IAEN,MAAMD,KAAA,gBAAQE,IAAA,CAACpD,UAAA;MAAWkB,KAAA,EAAOA,KAAA;MAAOgC,KAAA,EAAOH,mBAAA;MAAqBM,QAAQ;;IAE5E,MAAMC,yBAAA,GACJpC,KAAA,IACAA,KAAA,CAAMqC,IAAI,KACTrC,KAAA,CAAMqC,IAAI,KAAK,WAAWrC,KAAA,CAAMqC,IAAI,KAAK,WAAWrC,KAAA,CAAMqC,IAAI,KAAK,QAAO;IAE7E,MAAMC,OAAA,gBACJJ,IAAA,CAAChD,UAAA;MACCqD,OAAA,EAASH,yBAAA,IAA6BpC,KAAA,EAAOwC,iBAAA,IAAqBP,SAAA;MAClED,KAAA,EAAOA,KAAA;MACPS,KAAA,EAAO,WAAWzC,KAAA,GAASA,KAAA,CAAMyC,KAAK,GAAmBR,SAAA;MACzDhC,IAAA,EAAM,UAAUD,KAAA,GAAQA,KAAA,CAAMC,IAAI,GAAGgC,SAAA;MACpC,IAAItC,eAAA,IAAmB,CAAC,CAAC;;IAI9B,IAAIK,KAAA,EAAO;MACT,MAAMY,MAAA,GAAiB;QACrBC,QAAA,EAAU,UAAUb,KAAA,GAAQA,KAAA,CAAMC,IAAI,GAAGgC,SAAA;QACzCV,MAAA;QACAmB,SAAA,EAAW;UACT1C,KAAA,EAAO;YACL,IAAIA,KAAA,IAAU,CAAC,CAAiB;YAChC8B,KAAA,EAAO;cACL,IAAI9B,KAAA,CAAM8B,KAAK,IAAI,CAAC,CAAC;cACrBC,UAAA,EAAY;gBACV,IAAI/B,KAAA,CAAM8B,KAAK,EAAEC,UAAA,IAAc,CAAC,CAAC;gBACjCY,IAAA,EAAM3C,KAAA,CAAM8B,KAAK,EAAEC,UAAA,EAAYY,IAAA,IAAQ;kBACrCN,IAAA,EAAM;kBACNO,SAAA,EAAWzD,WAAA;kBACX0D,iBAAA,EAAmB;gBACrB;gBACAb;cACF;YACF;UACF;QACF;QACAM;MACF;MAEApB,GAAA,CAAIU,IAAI,CAAChB,MAAA;IACX;IAEA,OAAOM,GAAA;EACT,GAAG,EAAE;EAEL,IAAIzB,mBAAA,EAAqB;IACvBuB,MAAA,CAAOZ,OAAO,CAAC;MACbS,QAAA,EAAU;MACVU,MAAA,EAAQ;MACRmB,SAAA,EAAW;QACT1C,KAAA,EAAO;UACL8B,KAAA,EAAO;YACLC,UAAA,EAAY;cACVY,IAAA,EAAM;gBACJN,IAAA,EAAM;gBACNO,SAAA,EAAW;gBACXC,iBAAA,eAAmBX,IAAA,CAACjD,SAAA;cACtB;cACA+C,KAAA,EAAO;YACT;UACF;QACF;MACF;MACAM,OAAA,eAASJ,IAAA,CAAClD,SAAA;IACZ;EACF;EAEA,IAAIM,UAAA,EAAY;IACd0B,MAAA,CAAOZ,OAAO,IAAId,UAAA;EACpB;EAEA,OAAO0B,MAAA;AACT","ignoreList":[]}

package/dist/elements/TableColumns/index.d.ts

@@ -1,13 +1,16 @@
 import type { CellComponentProps } from 'payload';
 import React from 'react';
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js';
+import type { SortColumnProps } from '../SortColumn/index.js';
 import type { Column } from '../Table/index.js';
 export interface ITableColumns {
+    cellProps?: Partial<CellComponentProps>[];
     columns: Column[];
     moveColumn: (args: {
         fromIndex: number;
         toIndex: number;
     }) => void;
+    resetColumnsState: () => void;
     setActiveColumns: (columns: string[]) => void;
     toggleColumn: (column: string) => void;
 }
@@ -17,12 +20,14 @@ export type ListPreferences = {
     columns: ColumnPreferences;
 };
 type Props = {
+    readonly beforeRows?: Column[];
     readonly cellProps?: Partial<CellComponentProps>[];
     readonly children: React.ReactNode;
     readonly collectionSlug: string;
     readonly enableRowSelections?: boolean;
     readonly listPreferences?: ListPreferences;
     readonly preferenceKey: string;
+    readonly sortColumnProps?: Partial<SortColumnProps>;
 };
 export declare const TableColumnsProvider: React.FC<Props>;
 export {};

package/dist/elements/TableColumns/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAA6B,MAAM,SAAS,CAAA;AAE5E,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAQ/C,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAClE,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC7C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,eAAO,MAAM,kBAAkB,8BAAoD,CAAA;AAEnF,eAAO,MAAM,eAAe,QAAO,aAA+C,CAAA;AAElF,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,iBAAiB,CAAA;CAC3B,CAAA;AAED,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAA;IAClD,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAA;IAC1C,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;CAC/B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8KhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAA6B,MAAM,SAAS,CAAA;AAE5E,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAQ/C,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAA;IACzC,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAClE,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC7C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,eAAO,MAAM,kBAAkB,8BAAoD,CAAA;AAEnF,eAAO,MAAM,eAAe,QAAO,aAA+C,CAAA;AAElF,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,iBAAiB,CAAA;CAC3B,CAAA;AAED,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAA;IAClD,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAA;IAC1C,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CACpD,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6KhD,CAAA"}