@payloadcms/ui 3.0.0-canary.ee6d727 → 3.0.0-canary.f13d413

package/dist/elements/Table/index.js

@@ -4,6 +4,7 @@ import React from 'react';
 export * from './TableCellProvider/index.js';
 import { useTableColumns } from '../TableColumns/index.js';
 import { TableCellProvider } from './TableCellProvider/index.js';
+import './index.scss';
 export { TableCellProvider };
 const baseClass = 'table';
 export const Table = ({ columns: columnsFromProps, customCellContext, data })=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, FieldBase } from 'payload/types'\n\nimport React from 'react'\n\nexport * from './TableCellProvider/index.js'\n\nimport type { FieldTypes } from 'payload/config'\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\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  Label: React.ReactNode\n  accessor: string\n  active: boolean\n  admin?: FieldBase['admin']\n  cellProps?: Partial<CellComponentProps>\n  components: {\n    Cell: React.ReactNode\n    Heading: React.ReactNode\n  }\n  name: FieldBase['name']\n  type: keyof FieldTypes\n}\n\nexport type Props = {\n  columns?: Column[]\n  customCellContext?: Record<string, unknown>\n  data: Record<string, unknown>[]\n  fieldMap: FieldMap\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                        {col.components.Cell}\n                      </TableCellProvider>\n                    </td>\n                  )\n                })}\n              </tr>\n            ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"names":["React","useTableColumns","TableCellProvider","baseClass","Table","columns","columnsFromProps","customCellContext","data","columnsFromContext","activeColumns","filter","col","active","length","div","className","table","cellPadding","cellSpacing","thead","tr","map","i","th","id","accessor","components","Heading","tbody","row","rowIndex","colIndex","td","cellData","cellProps","columnIndex","rowData","Cell"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,cAAc,+BAA8B;AAM5C,SAASC,eAAe,QAAQ,2BAA0B;AAC1D,SAASC,iBAAiB,QAAQ,+BAA8B;AAGhE,SAASA,iBAAiB,GAAE;AAE5B,MAAMC,YAAY;AAuBlB,OAAO,MAAMC,QAAyB,CAAC,EAAEC,SAASC,gBAAgB,EAAEC,iBAAiB,EAAEC,IAAI,EAAE;IAC3F,MAAM,EAAEH,SAASI,kBAAkB,EAAE,GAAGR;IAExC,MAAMI,UAAUC,oBAAoBG;IAEpC,MAAMC,gBAAgBL,SAASM,OAAO,CAACC,MAAQA,KAAKC;IAEpD,IAAI,CAACH,iBAAiBA,cAAcI,MAAM,KAAK,GAAG;QAChD,qBAAO,KAACC;sBAAI;;IACd;IAEA,qBACE,KAACA;QAAIC,WAAWb;kBACd,cAAA,MAACc;YAAMC,aAAY;YAAIC,aAAY;;8BACjC,KAACC;8BACC,cAAA,KAACC;kCACEX,cAAcY,GAAG,CAAC,CAACV,KAAKW,kBACvB,KAACC;gCAAGC,IAAI,CAAC,QAAQ,EAAEb,IAAIc,QAAQ,CAAC,CAAC;0CAC9Bd,IAAIe,UAAU,CAACC,OAAO;+BADeL;;;8BAM9C,KAACM;8BACErB,QACCA,KAAKc,GAAG,CAAC,CAACQ,KAAKC,yBACb,KAACV;4BAAGL,WAAW,CAAC,IAAI,EAAEe,WAAW,EAAE,CAAC;sCACjCrB,cAAcY,GAAG,CAAC,CAACV,KAAKoB;gCACvB,qBACE,KAACC;oCAAGjB,WAAW,CAAC,KAAK,EAAEJ,IAAIc,QAAQ,CAAC,CAAC;8CACnC,cAAA,KAACxB;wCACCgC,UAAUJ,GAAG,CAAClB,IAAIc,QAAQ,CAAC;wCAC3BS,WAAWvB,KAAKuB;wCAChBC,aAAaJ;wCACbzB,mBAAmBA;wCACnB8B,SAASP;kDAERlB,IAAIe,UAAU,CAACW,IAAI;;mCARoBN;4BAYhD;2BAfyCD;;;;;AAsBzD,EAAC"}
+{"version":3,"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, FieldBase, FieldMap, FieldTypes } from 'payload'\n\nimport React from 'react'\n\nexport * from './TableCellProvider/index.js'\n\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  Label: React.ReactNode\n  accessor: string\n  active: boolean\n  admin?: FieldBase['admin']\n  cellProps?: Partial<CellComponentProps>\n  components: {\n    Cell: React.ReactNode\n    Heading: React.ReactNode\n  }\n  name: FieldBase['name']\n  type: keyof FieldTypes\n}\n\nexport type Props = {\n  columns?: Column[]\n  customCellContext?: Record<string, unknown>\n  data: Record<string, unknown>[]\n  fieldMap: FieldMap\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                        {col.components.Cell}\n                      </TableCellProvider>\n                    </td>\n                  )\n                })}\n              </tr>\n            ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"names":["React","useTableColumns","TableCellProvider","baseClass","Table","columns","columnsFromProps","customCellContext","data","columnsFromContext","activeColumns","filter","col","active","length","div","className","table","cellPadding","cellSpacing","thead","tr","map","i","th","id","accessor","components","Heading","tbody","row","rowIndex","colIndex","td","cellData","cellProps","columnIndex","rowData","Cell"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,cAAc,+BAA8B;AAE5C,SAASC,eAAe,QAAQ,2BAA0B;AAC1D,SAASC,iBAAiB,QAAQ,+BAA8B;AAChE,OAAO,eAAc;AAErB,SAASA,iBAAiB,GAAE;AAE5B,MAAMC,YAAY;AAuBlB,OAAO,MAAMC,QAAyB,CAAC,EAAEC,SAASC,gBAAgB,EAAEC,iBAAiB,EAAEC,IAAI,EAAE;IAC3F,MAAM,EAAEH,SAASI,kBAAkB,EAAE,GAAGR;IAExC,MAAMI,UAAUC,oBAAoBG;IAEpC,MAAMC,gBAAgBL,SAASM,OAAO,CAACC,MAAQA,KAAKC;IAEpD,IAAI,CAACH,iBAAiBA,cAAcI,MAAM,KAAK,GAAG;QAChD,qBAAO,KAACC;sBAAI;;IACd;IAEA,qBACE,KAACA;QAAIC,WAAWb;kBACd,cAAA,MAACc;YAAMC,aAAY;YAAIC,aAAY;;8BACjC,KAACC;8BACC,cAAA,KAACC;kCACEX,cAAcY,GAAG,CAAC,CAACV,KAAKW,kBACvB,KAACC;gCAAGC,IAAI,CAAC,QAAQ,EAAEb,IAAIc,QAAQ,CAAC,CAAC;0CAC9Bd,IAAIe,UAAU,CAACC,OAAO;+BADeL;;;8BAM9C,KAACM;8BACErB,QACCA,KAAKc,GAAG,CAAC,CAACQ,KAAKC,yBACb,KAACV;4BAAGL,WAAW,CAAC,IAAI,EAAEe,WAAW,EAAE,CAAC;sCACjCrB,cAAcY,GAAG,CAAC,CAACV,KAAKoB;gCACvB,qBACE,KAACC;oCAAGjB,WAAW,CAAC,KAAK,EAAEJ,IAAIc,QAAQ,CAAC,CAAC;8CACnC,cAAA,KAACxB;wCACCgC,UAAUJ,GAAG,CAAClB,IAAIc,QAAQ,CAAC;wCAC3BS,WAAWvB,KAAKuB;wCAChBC,aAAaJ;wCACbzB,mBAAmBA;wCACnB8B,SAASP;kDAERlB,IAAIe,UAAU,CAACW,IAAI;;mCARoBN;4BAYhD;2BAfyCD;;;;;AAsBzD,EAAC"}

package/dist/elements/Table/index.scss

@@ -19,14 +19,23 @@
 
   th,
   td {
-    padding: base(0.75);
+    padding: base(0.8) base(0.6);
     min-width: 150px;
+
+    &:first-child {
+      padding-inline-start: base(0.8);
+    }
+
+    &:last-child {
+      padding-inline-end: base(0.8);
+    }
   }
 
   tbody {
     tr {
       &:nth-child(odd) {
         background: var(--theme-elevation-50);
+        border-radius: $style-radius-s;
       }
     }
   }

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

@@ -1,5 +1,4 @@
-import { type CellComponentProps, type SanitizedCollectionConfig } from 'payload/types';
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { CellComponentProps, FieldMap, SanitizedCollectionConfig } from 'payload';
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js';
 import type { Column } from '../Table/index.js';
 type Args = {

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,EAAE,KAAK,kBAAkB,EAAE,KAAK,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAGvF,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,yDAAyD,CAAA;AACpG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAW/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,QAAQ,EAAE,QAAQ,CAAA;IAClB,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA;AACD,eAAO,MAAM,gBAAgB,SAAU,IAAI,KAAG,MAAM,EAuJnD,CAAA"}
+{"version":3,"file":"buildColumnState.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAe,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAInG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAW/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,QAAQ,EAAE,QAAQ,CAAA;IAClB,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA;AACD,eAAO,MAAM,gBAAgB,SAAU,IAAI,KAAG,MAAM,EAuJnD,CAAA"}

package/dist/elements/TableColumns/buildColumnState.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { FieldLabel } from '../../forms/FieldLabel/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { flattenFieldMap } from '../../utilities/flattenFieldMap.js';
 import { SelectAll } from '../SelectAll/index.js';
 import { SelectRow } from '../SelectRow/index.js';
@@ -62,10 +62,10 @@ export const buildColumnState = (args)=>{
             ...field.fieldComponentProps?.labelProps || {},
             unstyled: true
         });
+        const fieldAffectsDataSubFields = field && field.type && (field.type === 'array' || field.type === 'group' || field.type === 'blocks');
         const Heading = /*#__PURE__*/ _jsx(SortColumn, {
             Label: Label,
-            disable: 'disableSort' in field && Boolean(field.disableSort) || fieldIsPresentationalOnly(field) || undefined,
-            // eslint-disable-next-line react/jsx-no-duplicate-props
+            disable: fieldAffectsDataSubFields || fieldIsPresentationalOnly(field) || undefined,
             label: 'fieldComponentProps' in field && 'label' in field.fieldComponentProps ? field.fieldComponentProps.label : undefined,
             name: 'name' in field ? field.name : undefined
         });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"sourcesContent":["'use client'\nimport { type CellComponentProps, type SanitizedCollectionConfig } from 'payload/types'\nimport React from 'react'\n\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { Column } from '../Table/index.js'\n\nimport { FieldLabel } from '../../forms/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\nconst fieldIsPresentationalOnly = (field: MappedField): boolean => field.type === 'ui'\n\ntype Args = {\n  cellProps: Partial<CellComponentProps>[]\n  columnPreferences: ColumnPreferences\n  columns?: ColumnPreferences\n  enableRowSelections: boolean\n  fieldMap: FieldMap\n  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\nexport const buildColumnState = (args: Args): Column[] => {\n  const { cellProps, columnPreferences, columns, enableRowSelections, fieldMap, useAsTitle } = args\n\n  let sortedFieldMap = flattenFieldMap(fieldMap)\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) => 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) => 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 = 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) => 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 name = 'name' in field ? field.name : undefined\n\n    const Cell =\n      field.CustomCell !== undefined ? (\n        field.CustomCell\n      ) : (\n        <DefaultCell {...field.cellComponentProps} />\n      )\n\n    const CustomLabelToRender =\n      field &&\n      'fieldComponentProps' in field &&\n      'CustomLabel' in field.fieldComponentProps &&\n      field.fieldComponentProps.CustomLabel !== undefined\n        ? field.fieldComponentProps.CustomLabel\n        : undefined\n\n    const Label = (\n      <FieldLabel\n        CustomLabel={CustomLabelToRender}\n        label={field.fieldComponentProps?.label}\n        {...(field.fieldComponentProps?.labelProps || {})}\n        unstyled\n      />\n    )\n\n    const Heading = (\n      <SortColumn\n        Label={Label}\n        disable={\n          ('disableSort' in field && Boolean(field.disableSort)) ||\n          fieldIsPresentationalOnly(field) ||\n          undefined\n        }\n        // eslint-disable-next-line react/jsx-no-duplicate-props\n        label={\n          'fieldComponentProps' in field && 'label' in field.fieldComponentProps\n            ? field.fieldComponentProps.label\n            : undefined\n        }\n        name={'name' in field ? field.name : undefined}\n      />\n    )\n\n    if (field) {\n      const column: Column = {\n        name,\n        type: field.type,\n        Label,\n        accessor: name,\n        active,\n        admin: {\n          disableListColumn: field.disableListColumn,\n          disableListFilter: field.disableListFilter,\n        },\n        cellProps: {\n          ...field.cellComponentProps,\n          ...cellProps?.[index],\n          link: isFirstActiveColumn,\n          relationTo:\n            field.type === 'relationship' && 'relationTo' in field.fieldComponentProps\n              ? field.fieldComponentProps.relationTo\n              : undefined,\n        },\n        components: {\n          Cell,\n          Heading,\n        },\n      }\n\n      acc.push(column)\n    }\n\n    return acc\n  }, [])\n\n  if (enableRowSelections) {\n    sorted.unshift({\n      name: '',\n      accessor: '_select',\n      active: true,\n      components: {\n        Cell: <SelectRow />,\n        Heading: <SelectAll />,\n      },\n      label: null,\n    })\n  }\n\n  return sorted\n}\n"],"names":["React","FieldLabel","flattenFieldMap","SelectAll","SelectRow","SortColumn","DefaultCell","fieldIsPresentationalOnly","field","type","buildColumnState","args","cellProps","columnPreferences","columns","enableRowSelections","fieldMap","useAsTitle","sortedFieldMap","idFieldIndex","findIndex","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","undefined","Cell","CustomCell","cellComponentProps","CustomLabelToRender","fieldComponentProps","CustomLabel","Label","label","labelProps","unstyled","Heading","disable","Boolean","disableSort","admin","disableListColumn","disableListFilter","link","relationTo","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, FieldMap, MappedField, SanitizedCollectionConfig } 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\nconst fieldIsPresentationalOnly = (field: MappedField): boolean => field.type === 'ui'\n\ntype Args = {\n  cellProps: Partial<CellComponentProps>[]\n  columnPreferences: ColumnPreferences\n  columns?: ColumnPreferences\n  enableRowSelections: boolean\n  fieldMap: FieldMap\n  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\nexport const buildColumnState = (args: Args): Column[] => {\n  const { cellProps, columnPreferences, columns, enableRowSelections, fieldMap, useAsTitle } = args\n\n  let sortedFieldMap = flattenFieldMap(fieldMap)\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) => 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) => 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 = 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) => 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 name = 'name' in field ? field.name : undefined\n\n    const Cell =\n      field.CustomCell !== undefined ? (\n        field.CustomCell\n      ) : (\n        <DefaultCell {...field.cellComponentProps} />\n      )\n\n    const CustomLabelToRender =\n      field &&\n      'fieldComponentProps' in field &&\n      'CustomLabel' in field.fieldComponentProps &&\n      field.fieldComponentProps.CustomLabel !== undefined\n        ? field.fieldComponentProps.CustomLabel\n        : undefined\n\n    const Label = (\n      <FieldLabel\n        CustomLabel={CustomLabelToRender}\n        label={field.fieldComponentProps?.label}\n        {...(field.fieldComponentProps?.labelProps || {})}\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 || fieldIsPresentationalOnly(field) || undefined}\n        label={\n          'fieldComponentProps' in field && 'label' in field.fieldComponentProps\n            ? field.fieldComponentProps.label\n            : undefined\n        }\n        name={'name' in field ? field.name : undefined}\n      />\n    )\n\n    if (field) {\n      const column: Column = {\n        name,\n        type: field.type,\n        Label,\n        accessor: name,\n        active,\n        admin: {\n          disableListColumn: field.disableListColumn,\n          disableListFilter: field.disableListFilter,\n        },\n        cellProps: {\n          ...field.cellComponentProps,\n          ...cellProps?.[index],\n          link: isFirstActiveColumn,\n          relationTo:\n            field.type === 'relationship' && 'relationTo' in field.fieldComponentProps\n              ? field.fieldComponentProps.relationTo\n              : undefined,\n        },\n        components: {\n          Cell,\n          Heading,\n        },\n      }\n\n      acc.push(column)\n    }\n\n    return acc\n  }, [])\n\n  if (enableRowSelections) {\n    sorted.unshift({\n      name: '',\n      accessor: '_select',\n      active: true,\n      components: {\n        Cell: <SelectRow />,\n        Heading: <SelectAll />,\n      },\n      label: null,\n    })\n  }\n\n  return sorted\n}\n"],"names":["React","FieldLabel","flattenFieldMap","SelectAll","SelectRow","SortColumn","DefaultCell","fieldIsPresentationalOnly","field","type","buildColumnState","args","cellProps","columnPreferences","columns","enableRowSelections","fieldMap","useAsTitle","sortedFieldMap","idFieldIndex","findIndex","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","undefined","Cell","CustomCell","cellComponentProps","CustomLabelToRender","fieldComponentProps","CustomLabel","Label","label","labelProps","unstyled","fieldAffectsDataSubFields","Heading","disable","admin","disableListColumn","disableListFilter","link","relationTo","components"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { FieldMap } from 'payload';
 export declare const filterFields: (fieldMap: FieldMap) => FieldMap;
 //# sourceMappingURL=filterFields.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"filterFields.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/filterFields.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,yDAAyD,CAAA;AAIpG,eAAO,MAAM,YAAY,kCA2BxB,CAAA"}
+{"version":3,"file":"filterFields.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/filterFields.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,SAAS,CAAA;AAIpD,eAAO,MAAM,YAAY,aAAc,QAAQ,KAAG,QA2BjD,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/TableColumns/filterFields.tsx"],"sourcesContent":["'use client'\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\n// 1. Skips fields that are hidden, disabled, or presentational-only (i.e. `ui` fields)\n// 2. Maps through top-level `tabs` fields and filters out the same\nexport const filterFields = (fieldMap: FieldMap): FieldMap => {\n  const shouldSkipField = (field: MappedField): boolean =>\n    (field.type !== 'ui' && field.disabled === true) || field?.disableListColumn === true\n\n  const fields: FieldMap = fieldMap.reduce((formatted, field) => {\n    if (shouldSkipField(field)) {\n      return formatted\n    }\n\n    const formattedField: MappedField =\n      field.type === 'tabs' && 'tabs' in field.fieldComponentProps\n        ? {\n            ...field,\n            fieldComponentProps: {\n              ...field.fieldComponentProps,\n              tabs: field.fieldComponentProps.tabs.map((tab) => ({\n                ...tab,\n                fieldMap: tab.fieldMap.filter((tabField) => !shouldSkipField(tabField)),\n              })),\n            },\n          }\n        : field\n\n    return [...formatted, formattedField]\n  }, [])\n\n  return fields\n}\n"],"names":["filterFields","fieldMap","shouldSkipField","field","type","disabled","disableListColumn","fields","reduce","formatted","formattedField","fieldComponentProps","tabs","map","tab","filter","tabField"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,uFAAuF;AACvF,mEAAmE;AACnE,OAAO,MAAMA,eAAe,CAACC;IAC3B,MAAMC,kBAAkB,CAACC,QACvB,AAACA,MAAMC,IAAI,KAAK,QAAQD,MAAME,QAAQ,KAAK,QAASF,OAAOG,sBAAsB;IAEnF,MAAMC,SAAmBN,SAASO,MAAM,CAAC,CAACC,WAAWN;QACnD,IAAID,gBAAgBC,QAAQ;YAC1B,OAAOM;QACT;QAEA,MAAMC,iBACJP,MAAMC,IAAI,KAAK,UAAU,UAAUD,MAAMQ,mBAAmB,GACxD;YACE,GAAGR,KAAK;YACRQ,qBAAqB;gBACnB,GAAGR,MAAMQ,mBAAmB;gBAC5BC,MAAMT,MAAMQ,mBAAmB,CAACC,IAAI,CAACC,GAAG,CAAC,CAACC,MAAS,CAAA;wBACjD,GAAGA,GAAG;wBACNb,UAAUa,IAAIb,QAAQ,CAACc,MAAM,CAAC,CAACC,WAAa,CAACd,gBAAgBc;oBAC/D,CAAA;YACF;QACF,IACAb;QAEN,OAAO;eAAIM;YAAWC;SAAe;IACvC,GAAG,EAAE;IAEL,OAAOH;AACT,EAAC"}
+{"version":3,"sources":["../../../src/elements/TableColumns/filterFields.tsx"],"sourcesContent":["'use client'\nimport type { FieldMap, MappedField } from 'payload'\n\n// 1. Skips fields that are hidden, disabled, or presentational-only (i.e. `ui` fields)\n// 2. Maps through top-level `tabs` fields and filters out the same\nexport const filterFields = (fieldMap: FieldMap): FieldMap => {\n  const shouldSkipField = (field: MappedField): boolean =>\n    (field.type !== 'ui' && field.disabled === true) || field?.disableListColumn === true\n\n  const fields: FieldMap = fieldMap.reduce((formatted, field) => {\n    if (shouldSkipField(field)) {\n      return formatted\n    }\n\n    const formattedField: MappedField =\n      field.type === 'tabs' && 'tabs' in field.fieldComponentProps\n        ? {\n            ...field,\n            fieldComponentProps: {\n              ...field.fieldComponentProps,\n              tabs: field.fieldComponentProps.tabs.map((tab) => ({\n                ...tab,\n                fieldMap: tab.fieldMap.filter((tabField) => !shouldSkipField(tabField)),\n              })),\n            },\n          }\n        : field\n\n    return [...formatted, formattedField]\n  }, [])\n\n  return fields\n}\n"],"names":["filterFields","fieldMap","shouldSkipField","field","type","disabled","disableListColumn","fields","reduce","formatted","formattedField","fieldComponentProps","tabs","map","tab","filter","tabField"],"mappings":"AAAA;AAGA,uFAAuF;AACvF,mEAAmE;AACnE,OAAO,MAAMA,eAAe,CAACC;IAC3B,MAAMC,kBAAkB,CAACC,QACvB,AAACA,MAAMC,IAAI,KAAK,QAAQD,MAAME,QAAQ,KAAK,QAASF,OAAOG,sBAAsB;IAEnF,MAAMC,SAAmBN,SAASO,MAAM,CAAC,CAACC,WAAWN;QACnD,IAAID,gBAAgBC,QAAQ;YAC1B,OAAOM;QACT;QAEA,MAAMC,iBACJP,MAAMC,IAAI,KAAK,UAAU,UAAUD,MAAMQ,mBAAmB,GACxD;YACE,GAAGR,KAAK;YACRQ,qBAAqB;gBACnB,GAAGR,MAAMQ,mBAAmB;gBAC5BC,MAAMT,MAAMQ,mBAAmB,CAACC,IAAI,CAACC,GAAG,CAAC,CAACC,MAAS,CAAA;wBACjD,GAAGA,GAAG;wBACNb,UAAUa,IAAIb,QAAQ,CAACc,MAAM,CAAC,CAACC,WAAa,CAACd,gBAAgBc;oBAC/D,CAAA;YACF;QACF,IACAb;QAEN,OAAO;eAAIM;YAAWC;SAAe;IACvC,GAAG,EAAE;IAEL,OAAOH;AACT,EAAC"}

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

@@ -1,4 +1,4 @@
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { FieldMap, MappedField } from 'payload';
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js';
 export declare function fieldAffectsData(field: MappedField): boolean;
 export declare const getInitialColumns: (fieldMap: FieldMap, useAsTitle: string, defaultColumns: string[]) => ColumnPreferences;

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

@@ -1 +1 @@
-{"version":3,"file":"getInitialColumns.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/getInitialColumns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,yDAAyD,CAAA;AACpG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAE1E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAE5D;AA4BD,eAAO,MAAM,iBAAiB,mCAEhB,MAAM,kBACF,MAAM,EAAE,sBAqBzB,CAAA"}
+{"version":3,"file":"getInitialColumns.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/getInitialColumns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAE1E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAE5D;AA4BD,eAAO,MAAM,iBAAiB,aAClB,QAAQ,cACN,MAAM,kBACF,MAAM,EAAE,KACvB,iBAoBF,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/TableColumns/getInitialColumns.ts"],"sourcesContent":["import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\n\nexport function fieldAffectsData(field: MappedField): boolean {\n  return 'name' in field && field.type !== 'ui'\n}\n\nconst getRemainingColumns = (fieldMap: FieldMap, useAsTitle: string): ColumnPreferences =>\n  fieldMap.reduce((remaining, field) => {\n    if (fieldAffectsData(field) && field.name === useAsTitle) {\n      return remaining\n    }\n\n    if (!fieldAffectsData(field) && 'fieldMap' in field.fieldComponentProps) {\n      return [...remaining, ...getRemainingColumns(field.fieldComponentProps.fieldMap, useAsTitle)]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {\n      return [\n        ...remaining,\n        ...field.fieldComponentProps.tabs.reduce(\n          (tabFieldColumns, tab) => [\n            ...tabFieldColumns,\n            ...('name' in tab ? [tab.name] : getRemainingColumns(tab.fieldMap, useAsTitle)),\n          ],\n          [],\n        ),\n      ]\n    }\n\n    return [...remaining, field.name]\n  }, [])\n\nexport const getInitialColumns = (\n  fieldMap: FieldMap,\n  useAsTitle: string,\n  defaultColumns: string[],\n): ColumnPreferences => {\n  let initialColumns = []\n\n  if (Array.isArray(defaultColumns) && defaultColumns.length >= 1) {\n    initialColumns = defaultColumns\n  } else {\n    if (useAsTitle) {\n      initialColumns.push(useAsTitle)\n    }\n\n    const remainingColumns = getRemainingColumns(fieldMap, useAsTitle)\n\n    initialColumns = initialColumns.concat(remainingColumns)\n    initialColumns = initialColumns.slice(0, 4)\n  }\n\n  return initialColumns.map((column) => ({\n    accessor: column,\n    active: true,\n  }))\n}\n"],"names":["fieldAffectsData","field","type","getRemainingColumns","fieldMap","useAsTitle","reduce","remaining","name","fieldComponentProps","tabs","tabFieldColumns","tab","getInitialColumns","defaultColumns","initialColumns","Array","isArray","length","push","remainingColumns","concat","slice","map","column","accessor","active"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,OAAO,SAASA,iBAAiBC,KAAkB;IACjD,OAAO,UAAUA,SAASA,MAAMC,IAAI,KAAK;AAC3C;AAEA,MAAMC,sBAAsB,CAACC,UAAoBC,aAC/CD,SAASE,MAAM,CAAC,CAACC,WAAWN;QAC1B,IAAID,iBAAiBC,UAAUA,MAAMO,IAAI,KAAKH,YAAY;YACxD,OAAOE;QACT;QAEA,IAAI,CAACP,iBAAiBC,UAAU,cAAcA,MAAMQ,mBAAmB,EAAE;YACvE,OAAO;mBAAIF;mBAAcJ,oBAAoBF,MAAMQ,mBAAmB,CAACL,QAAQ,EAAEC;aAAY;QAC/F;QAEA,IAAIJ,MAAMC,IAAI,KAAK,UAAU,UAAUD,MAAMQ,mBAAmB,EAAE;YAChE,OAAO;mBACFF;mBACAN,MAAMQ,mBAAmB,CAACC,IAAI,CAACJ,MAAM,CACtC,CAACK,iBAAiBC,MAAQ;2BACrBD;2BACC,UAAUC,MAAM;4BAACA,IAAIJ,IAAI;yBAAC,GAAGL,oBAAoBS,IAAIR,QAAQ,EAAEC;qBACpE,EACD,EAAE;aAEL;QACH;QAEA,OAAO;eAAIE;YAAWN,MAAMO,IAAI;SAAC;IACnC,GAAG,EAAE;AAEP,OAAO,MAAMK,oBAAoB,CAC/BT,UACAC,YACAS;IAEA,IAAIC,iBAAiB,EAAE;IAEvB,IAAIC,MAAMC,OAAO,CAACH,mBAAmBA,eAAeI,MAAM,IAAI,GAAG;QAC/DH,iBAAiBD;IACnB,OAAO;QACL,IAAIT,YAAY;YACdU,eAAeI,IAAI,CAACd;QACtB;QAEA,MAAMe,mBAAmBjB,oBAAoBC,UAAUC;QAEvDU,iBAAiBA,eAAeM,MAAM,CAACD;QACvCL,iBAAiBA,eAAeO,KAAK,CAAC,GAAG;IAC3C;IAEA,OAAOP,eAAeQ,GAAG,CAAC,CAACC,SAAY,CAAA;YACrCC,UAAUD;YACVE,QAAQ;QACV,CAAA;AACF,EAAC"}
+{"version":3,"sources":["../../../src/elements/TableColumns/getInitialColumns.ts"],"sourcesContent":["import type { FieldMap, MappedField } from 'payload'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\n\nexport function fieldAffectsData(field: MappedField): boolean {\n  return 'name' in field && field.type !== 'ui'\n}\n\nconst getRemainingColumns = (fieldMap: FieldMap, useAsTitle: string): ColumnPreferences =>\n  fieldMap.reduce((remaining, field) => {\n    if (fieldAffectsData(field) && field.name === useAsTitle) {\n      return remaining\n    }\n\n    if (!fieldAffectsData(field) && 'fieldMap' in field.fieldComponentProps) {\n      return [...remaining, ...getRemainingColumns(field.fieldComponentProps.fieldMap, useAsTitle)]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {\n      return [\n        ...remaining,\n        ...field.fieldComponentProps.tabs.reduce(\n          (tabFieldColumns, tab) => [\n            ...tabFieldColumns,\n            ...('name' in tab ? [tab.name] : getRemainingColumns(tab.fieldMap, useAsTitle)),\n          ],\n          [],\n        ),\n      ]\n    }\n\n    return [...remaining, field.name]\n  }, [])\n\nexport const getInitialColumns = (\n  fieldMap: FieldMap,\n  useAsTitle: string,\n  defaultColumns: string[],\n): ColumnPreferences => {\n  let initialColumns = []\n\n  if (Array.isArray(defaultColumns) && defaultColumns.length >= 1) {\n    initialColumns = defaultColumns\n  } else {\n    if (useAsTitle) {\n      initialColumns.push(useAsTitle)\n    }\n\n    const remainingColumns = getRemainingColumns(fieldMap, useAsTitle)\n\n    initialColumns = initialColumns.concat(remainingColumns)\n    initialColumns = initialColumns.slice(0, 4)\n  }\n\n  return initialColumns.map((column) => ({\n    accessor: column,\n    active: true,\n  }))\n}\n"],"names":["fieldAffectsData","field","type","getRemainingColumns","fieldMap","useAsTitle","reduce","remaining","name","fieldComponentProps","tabs","tabFieldColumns","tab","getInitialColumns","defaultColumns","initialColumns","Array","isArray","length","push","remainingColumns","concat","slice","map","column","accessor","active"],"mappings":"AAIA,OAAO,SAASA,iBAAiBC,KAAkB;IACjD,OAAO,UAAUA,SAASA,MAAMC,IAAI,KAAK;AAC3C;AAEA,MAAMC,sBAAsB,CAACC,UAAoBC,aAC/CD,SAASE,MAAM,CAAC,CAACC,WAAWN;QAC1B,IAAID,iBAAiBC,UAAUA,MAAMO,IAAI,KAAKH,YAAY;YACxD,OAAOE;QACT;QAEA,IAAI,CAACP,iBAAiBC,UAAU,cAAcA,MAAMQ,mBAAmB,EAAE;YACvE,OAAO;mBAAIF;mBAAcJ,oBAAoBF,MAAMQ,mBAAmB,CAACL,QAAQ,EAAEC;aAAY;QAC/F;QAEA,IAAIJ,MAAMC,IAAI,KAAK,UAAU,UAAUD,MAAMQ,mBAAmB,EAAE;YAChE,OAAO;mBACFF;mBACAN,MAAMQ,mBAAmB,CAACC,IAAI,CAACJ,MAAM,CACtC,CAACK,iBAAiBC,MAAQ;2BACrBD;2BACC,UAAUC,MAAM;4BAACA,IAAIJ,IAAI;yBAAC,GAAGL,oBAAoBS,IAAIR,QAAQ,EAAEC;qBACpE,EACD,EAAE;aAEL;QACH;QAEA,OAAO;eAAIE;YAAWN,MAAMO,IAAI;SAAC;IACnC,GAAG,EAAE;AAEP,OAAO,MAAMK,oBAAoB,CAC/BT,UACAC,YACAS;IAEA,IAAIC,iBAAiB,EAAE;IAEvB,IAAIC,MAAMC,OAAO,CAACH,mBAAmBA,eAAeI,MAAM,IAAI,GAAG;QAC/DH,iBAAiBD;IACnB,OAAO;QACL,IAAIT,YAAY;YACdU,eAAeI,IAAI,CAACd;QACtB;QAEA,MAAMe,mBAAmBjB,oBAAoBC,UAAUC;QAEvDU,iBAAiBA,eAAeM,MAAM,CAACD;QACvCL,iBAAiBA,eAAeO,KAAK,CAAC,GAAG;IAC3C;IAEA,OAAOP,eAAeQ,GAAG,CAAC,CAACC,SAAY,CAAA;YACrCC,UAAUD;YACVE,QAAQ;QACV,CAAA;AACF,EAAC"}

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

@@ -1,11 +1,9 @@
-import type { CellComponentProps } from 'payload/types';
+import type { CellComponentProps } from 'payload';
 import React from 'react';
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js';
 import type { Column } from '../Table/index.js';
-import type { Action } from './columnReducer.js';
 export interface ITableColumns {
     columns: Column[];
-    dispatchTableColumns: React.Dispatch<Action>;
     moveColumn: (args: {
         fromIndex: number;
         toIndex: number;

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":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAEvD,OAAO,KAQN,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAUhD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC5C,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,SAAS,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAA;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmKhD,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,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAS/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,SAAS,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAA;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0KhD,CAAA"}

package/dist/elements/TableColumns/index.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 import { useComponentMap } from '../../providers/ComponentMap/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
 import { buildColumnState } from './buildColumnState.js';
-import { columnReducer } from './columnReducer.js';
 import { filterFields } from './filterFields.js';
 import { getInitialColumns } from './getInitialColumns.js';
 export const TableColumnContext = /*#__PURE__*/ createContext({});
@@ -16,43 +15,103 @@ export const TableColumnsProvider = ({ cellProps, children, collectionSlug, enab
     const { fieldMap } = componentMap.collections[collectionSlug];
     const collectionConfig = config.collections.find((collectionConfig)=>collectionConfig.slug === collectionSlug);
     const { admin: { defaultColumns, useAsTitle } } = collectionConfig;
-    const prevCollection = useRef(collectionSlug);
-    const hasInitialized = useRef(false);
+    const prevCollection = React.useRef(collectionSlug);
     const { getPreference, setPreference } = usePreferences();
     const [initialColumns] = useState(()=>getInitialColumns(filterFields(fieldMap), useAsTitle, defaultColumns));
-    const [tableColumns, dispatchTableColumns] = useReducer(columnReducer, {}, ()=>{
-        return buildColumnState({
+    const [tableColumns, setTableColumns] = React.useState(()=>buildColumnState({
             cellProps,
             columnPreferences: listPreferences?.columns,
             columns: initialColumns,
             enableRowSelections,
             fieldMap,
             useAsTitle
+        }));
+    const updateColumnPreferences = React.useCallback((newColumns)=>{
+        const columns = newColumns.map((c)=>({
+                accessor: c?.accessor,
+                active: c?.active
+            }));
+        void setPreference(preferenceKey, {
+            columns
+        }, true);
+    }, [
+        preferenceKey,
+        setPreference
+    ]);
+    const reassignLinkColumn = (columns)=>{
+        let foundFirstActive = false;
+        const newColumns = columns.map((col)=>{
+            const linkColumn = col.active && !foundFirstActive && col.accessor !== '_select';
+            if (linkColumn) foundFirstActive = true;
+            return {
+                ...col,
+                cellProps: {
+                    ...col.cellProps,
+                    link: linkColumn
+                }
+            };
         });
-    });
-    // /////////////////////////////////////
-    // Get preferences on collection change
-    // /////////////////////////////////////
-    useEffect(()=>{
+        return newColumns;
+    };
+    const moveColumn = useCallback((args)=>{
+        const { fromIndex, toIndex } = args;
+        const withMovedColumn = [
+            ...tableColumns
+        ];
+        const [columnToMove] = withMovedColumn.splice(fromIndex, 1);
+        withMovedColumn.splice(toIndex, 0, columnToMove);
+        const newColumns = reassignLinkColumn(withMovedColumn);
+        setTableColumns(newColumns);
+        updateColumnPreferences(newColumns);
+    }, [
+        tableColumns,
+        updateColumnPreferences
+    ]);
+    const toggleColumn = useCallback((column)=>{
+        const toggledColumns = tableColumns.map((col)=>{
+            return {
+                ...col,
+                active: col?.name === column ? !col.active : col.active
+            };
+        });
+        const newColumns = reassignLinkColumn(toggledColumns);
+        setTableColumns(newColumns);
+        updateColumnPreferences(newColumns);
+    }, [
+        tableColumns,
+        updateColumnPreferences
+    ]);
+    const setActiveColumns = React.useCallback((activeColumnAccessors)=>{
+        const activeColumns = tableColumns.map((col)=>{
+            return {
+                ...col,
+                active: activeColumnAccessors.includes(col.accessor)
+            };
+        });
+        const newColumns = reassignLinkColumn(activeColumns);
+        updateColumnPreferences(newColumns);
+    }, [
+        tableColumns,
+        updateColumnPreferences
+    ]);
+    // //////////////////////////////////////////////
+    // Get preferences on collection change (drawers)
+    // //////////////////////////////////////////////
+    React.useEffect(()=>{
         const sync = async ()=>{
             const collectionHasChanged = prevCollection.current !== collectionSlug;
             if (collectionHasChanged || !listPreferences) {
                 const currentPreferences = await getPreference(preferenceKey);
                 prevCollection.current = collectionSlug;
                 if (currentPreferences?.columns) {
-                    dispatchTableColumns({
-                        type: 'set',
-                        payload: {
-                            columns: buildColumnState({
-                                cellProps,
-                                columnPreferences: currentPreferences?.columns,
-                                columns: initialColumns,
-                                enableRowSelections: true,
-                                fieldMap,
-                                useAsTitle
-                            })
-                        }
-                    });
+                    setTableColumns(buildColumnState({
+                        cellProps,
+                        columnPreferences: currentPreferences?.columns,
+                        columns: initialColumns,
+                        enableRowSelections: true,
+                        fieldMap,
+                        useAsTitle
+                    }));
                 }
             }
         };
@@ -68,70 +127,9 @@ export const TableColumnsProvider = ({ cellProps, children, collectionSlug, enab
         listPreferences,
         initialColumns
     ]);
-    // /////////////////////////////////////
-    // Set preferences on column change
-    // /////////////////////////////////////
-    useEffect(()=>{
-        if (!hasInitialized.current) {
-            hasInitialized.current = true;
-            return;
-        }
-        const columns = tableColumns.map((c)=>({
-                accessor: c?.accessor,
-                active: c?.active
-            }));
-        void setPreference(preferenceKey, {
-            columns
-        }, true);
-    }, [
-        tableColumns,
-        preferenceKey,
-        setPreference
-    ]);
-    const setActiveColumns = useCallback((columns)=>{
-    // dispatchTableColumns({
-    //   type: 'set',
-    //   payload: {
-    //     // onSelect,
-    //     cellProps,
-    //     collection: { ...collectionConfig, fields: formatFields(collectionConfig) },
-    //     columns: columns.map((column) => ({
-    //       accessor: column,
-    //       active: true,
-    //     })),
-    //     i18n,
-    //   },
-    // })
-    }, [
-        collectionConfig,
-        cellProps
-    ]);
-    const moveColumn = useCallback((args)=>{
-        const { fromIndex, toIndex } = args;
-        dispatchTableColumns({
-            type: 'move',
-            payload: {
-                fromIndex,
-                toIndex
-            }
-        });
-    }, [
-        dispatchTableColumns
-    ]);
-    const toggleColumn = useCallback((column)=>{
-        dispatchTableColumns({
-            type: 'toggle',
-            payload: {
-                column
-            }
-        });
-    }, [
-        dispatchTableColumns
-    ]);
     return /*#__PURE__*/ _jsx(TableColumnContext.Provider, {
         value: {
             columns: tableColumns,
-            dispatchTableColumns,
             moveColumn,
             setActiveColumns,
             toggleColumn

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/TableColumns/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload/types'\nimport type { CellComponentProps } from 'payload/types'\n\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { Column } from '../Table/index.js'\nimport type { Action } from './columnReducer.js'\n\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { buildColumnState } from './buildColumnState.js'\nimport { columnReducer } from './columnReducer.js'\nimport { filterFields } from './filterFields.js'\nimport { getInitialColumns } from './getInitialColumns.js'\n\nexport interface ITableColumns {\n  columns: Column[]\n  dispatchTableColumns: React.Dispatch<Action>\n  moveColumn: (args: { fromIndex: number; toIndex: number }) => void\n  setActiveColumns: (columns: string[]) => void\n  toggleColumn: (column: string) => void\n}\n\nexport const TableColumnContext = createContext<ITableColumns>({} as ITableColumns)\n\nexport const useTableColumns = (): ITableColumns => useContext(TableColumnContext)\n\nexport type ListPreferences = {\n  columns: ColumnPreferences\n}\n\ntype Props = {\n  cellProps?: Partial<CellComponentProps>[]\n  children: React.ReactNode\n  collectionSlug: string\n  enableRowSelections?: boolean\n  listPreferences?: ListPreferences\n  preferenceKey: string\n}\n\nexport const TableColumnsProvider: React.FC<Props> = ({\n  cellProps,\n  children,\n  collectionSlug,\n  enableRowSelections = false,\n  listPreferences,\n  preferenceKey,\n}) => {\n  const config = useConfig()\n\n  const { componentMap } = useComponentMap()\n\n  const { fieldMap } = componentMap.collections[collectionSlug]\n\n  const collectionConfig = config.collections.find(\n    (collectionConfig) => collectionConfig.slug === collectionSlug,\n  )\n\n  const {\n    admin: { defaultColumns, useAsTitle },\n  } = collectionConfig\n\n  const prevCollection = useRef<SanitizedCollectionConfig['slug']>(collectionSlug)\n  const hasInitialized = useRef(false)\n  const { getPreference, setPreference } = usePreferences()\n\n  const [initialColumns] = useState<ColumnPreferences>(() =>\n    getInitialColumns(filterFields(fieldMap), useAsTitle, defaultColumns),\n  )\n\n  const [tableColumns, dispatchTableColumns] = useReducer(columnReducer, {}, () => {\n    return buildColumnState({\n      cellProps,\n      columnPreferences: listPreferences?.columns,\n      columns: initialColumns,\n      enableRowSelections,\n      fieldMap,\n      useAsTitle,\n    })\n  })\n\n  // /////////////////////////////////////\n  // Get preferences on collection change\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    const sync = async () => {\n      const collectionHasChanged = prevCollection.current !== collectionSlug\n\n      if (collectionHasChanged || !listPreferences) {\n        const currentPreferences = await getPreference<{\n          columns: ColumnPreferences\n        }>(preferenceKey)\n        prevCollection.current = collectionSlug\n\n        if (currentPreferences?.columns) {\n          dispatchTableColumns({\n            type: 'set',\n            payload: {\n              columns: buildColumnState({\n                cellProps,\n                columnPreferences: currentPreferences?.columns,\n                columns: initialColumns,\n                enableRowSelections: true,\n                fieldMap,\n                useAsTitle,\n              }),\n            },\n          })\n        }\n      }\n    }\n\n    void sync()\n  }, [\n    preferenceKey,\n    getPreference,\n    collectionSlug,\n    fieldMap,\n    cellProps,\n    defaultColumns,\n    useAsTitle,\n    listPreferences,\n    initialColumns,\n  ])\n\n  // /////////////////////////////////////\n  // Set preferences on column change\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    if (!hasInitialized.current) {\n      hasInitialized.current = true\n      return\n    }\n\n    const columns = tableColumns.map((c) => ({\n      accessor: c?.accessor,\n      active: c?.active,\n    }))\n\n    void setPreference(preferenceKey, { columns }, true)\n  }, [tableColumns, preferenceKey, setPreference])\n\n  const setActiveColumns = useCallback(\n    (columns: string[]) => {\n      // dispatchTableColumns({\n      //   type: 'set',\n      //   payload: {\n      //     // onSelect,\n      //     cellProps,\n      //     collection: { ...collectionConfig, fields: formatFields(collectionConfig) },\n      //     columns: columns.map((column) => ({\n      //       accessor: column,\n      //       active: true,\n      //     })),\n      //     i18n,\n      //   },\n      // })\n    },\n    [collectionConfig, cellProps],\n  )\n\n  const moveColumn = useCallback(\n    (args: { fromIndex: number; toIndex: number }) => {\n      const { fromIndex, toIndex } = args\n\n      dispatchTableColumns({\n        type: 'move',\n        payload: {\n          fromIndex,\n          toIndex,\n        },\n      })\n    },\n    [dispatchTableColumns],\n  )\n\n  const toggleColumn = useCallback(\n    (column: string) => {\n      dispatchTableColumns({\n        type: 'toggle',\n        payload: {\n          column,\n        },\n      })\n    },\n    [dispatchTableColumns],\n  )\n\n  return (\n    <TableColumnContext.Provider\n      value={{\n        columns: tableColumns,\n        dispatchTableColumns,\n        moveColumn,\n        setActiveColumns,\n        toggleColumn,\n      }}\n    >\n      {children}\n    </TableColumnContext.Provider>\n  )\n}\n"],"names":["React","createContext","useCallback","useContext","useEffect","useReducer","useRef","useState","useComponentMap","useConfig","usePreferences","buildColumnState","columnReducer","filterFields","getInitialColumns","TableColumnContext","useTableColumns","TableColumnsProvider","cellProps","children","collectionSlug","enableRowSelections","listPreferences","preferenceKey","config","componentMap","fieldMap","collections","collectionConfig","find","slug","admin","defaultColumns","useAsTitle","prevCollection","hasInitialized","getPreference","setPreference","initialColumns","tableColumns","dispatchTableColumns","columnPreferences","columns","sync","collectionHasChanged","current","currentPreferences","type","payload","map","c","accessor","active","setActiveColumns","moveColumn","args","fromIndex","toIndex","toggleColumn","column","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/TableColumns/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, SanitizedCollectionConfig } from 'payload'\n\nimport React, { createContext, useCallback, useContext, useState } from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { Column } from '../Table/index.js'\n\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { buildColumnState } from './buildColumnState.js'\nimport { filterFields } from './filterFields.js'\nimport { getInitialColumns } from './getInitialColumns.js'\n\nexport interface ITableColumns {\n  columns: Column[]\n  moveColumn: (args: { fromIndex: number; toIndex: number }) => void\n  setActiveColumns: (columns: string[]) => void\n  toggleColumn: (column: string) => void\n}\n\nexport const TableColumnContext = createContext<ITableColumns>({} as ITableColumns)\n\nexport const useTableColumns = (): ITableColumns => useContext(TableColumnContext)\n\nexport type ListPreferences = {\n  columns: ColumnPreferences\n}\n\ntype Props = {\n  cellProps?: Partial<CellComponentProps>[]\n  children: React.ReactNode\n  collectionSlug: string\n  enableRowSelections?: boolean\n  listPreferences?: ListPreferences\n  preferenceKey: string\n}\n\nexport const TableColumnsProvider: React.FC<Props> = ({\n  cellProps,\n  children,\n  collectionSlug,\n  enableRowSelections = false,\n  listPreferences,\n  preferenceKey,\n}) => {\n  const config = useConfig()\n\n  const { componentMap } = useComponentMap()\n\n  const { fieldMap } = componentMap.collections[collectionSlug]\n\n  const collectionConfig = config.collections.find(\n    (collectionConfig) => collectionConfig.slug === collectionSlug,\n  )\n\n  const {\n    admin: { defaultColumns, useAsTitle },\n  } = collectionConfig\n\n  const prevCollection = React.useRef<SanitizedCollectionConfig['slug']>(collectionSlug)\n  const { getPreference, setPreference } = usePreferences()\n\n  const [initialColumns] = useState<ColumnPreferences>(() =>\n    getInitialColumns(filterFields(fieldMap), useAsTitle, defaultColumns),\n  )\n\n  const [tableColumns, setTableColumns] = React.useState(() =>\n    buildColumnState({\n      cellProps,\n      columnPreferences: listPreferences?.columns,\n      columns: initialColumns,\n      enableRowSelections,\n      fieldMap,\n      useAsTitle,\n    }),\n  )\n\n  const updateColumnPreferences = React.useCallback(\n    (newColumns: Column[]) => {\n      const columns = newColumns.map((c) => ({\n        accessor: c?.accessor,\n        active: c?.active,\n      }))\n\n      void setPreference(preferenceKey, { columns }, true)\n    },\n    [preferenceKey, setPreference],\n  )\n\n  const reassignLinkColumn = (columns: Column[]): Column[] => {\n    let foundFirstActive = false\n    const newColumns = columns.map((col) => {\n      const linkColumn = col.active && !foundFirstActive && col.accessor !== '_select'\n      if (linkColumn) foundFirstActive = true\n\n      return {\n        ...col,\n        cellProps: {\n          ...col.cellProps,\n          link: linkColumn,\n        },\n      }\n    })\n\n    return newColumns\n  }\n\n  const moveColumn = useCallback(\n    (args: { fromIndex: number; toIndex: number }) => {\n      const { fromIndex, toIndex } = args\n\n      const withMovedColumn = [...tableColumns]\n      const [columnToMove] = withMovedColumn.splice(fromIndex, 1)\n      withMovedColumn.splice(toIndex, 0, columnToMove)\n\n      const newColumns = reassignLinkColumn(withMovedColumn)\n      setTableColumns(newColumns)\n      updateColumnPreferences(newColumns)\n    },\n    [tableColumns, updateColumnPreferences],\n  )\n\n  const toggleColumn = useCallback(\n    (column: string) => {\n      const toggledColumns = tableColumns.map((col) => {\n        return {\n          ...col,\n          active: col?.name === column ? !col.active : col.active,\n        }\n      })\n\n      const newColumns = reassignLinkColumn(toggledColumns)\n      setTableColumns(newColumns)\n      updateColumnPreferences(newColumns)\n    },\n    [tableColumns, updateColumnPreferences],\n  )\n\n  const setActiveColumns = React.useCallback(\n    (activeColumnAccessors) => {\n      const activeColumns = tableColumns.map((col) => {\n        return {\n          ...col,\n          active: activeColumnAccessors.includes(col.accessor),\n        }\n      })\n\n      const newColumns = reassignLinkColumn(activeColumns)\n      updateColumnPreferences(newColumns)\n    },\n    [tableColumns, updateColumnPreferences],\n  )\n\n  // //////////////////////////////////////////////\n  // Get preferences on collection change (drawers)\n  // //////////////////////////////////////////////\n\n  React.useEffect(() => {\n    const sync = async () => {\n      const collectionHasChanged = prevCollection.current !== collectionSlug\n\n      if (collectionHasChanged || !listPreferences) {\n        const currentPreferences = await getPreference<{\n          columns: ColumnPreferences\n        }>(preferenceKey)\n        prevCollection.current = collectionSlug\n\n        if (currentPreferences?.columns) {\n          setTableColumns(\n            buildColumnState({\n              cellProps,\n              columnPreferences: currentPreferences?.columns,\n              columns: initialColumns,\n              enableRowSelections: true,\n              fieldMap,\n              useAsTitle,\n            }),\n          )\n        }\n      }\n    }\n\n    void sync()\n  }, [\n    preferenceKey,\n    getPreference,\n    collectionSlug,\n    fieldMap,\n    cellProps,\n    defaultColumns,\n    useAsTitle,\n    listPreferences,\n    initialColumns,\n  ])\n\n  return (\n    <TableColumnContext.Provider\n      value={{\n        columns: tableColumns,\n        moveColumn,\n        setActiveColumns,\n        toggleColumn,\n      }}\n    >\n      {children}\n    </TableColumnContext.Provider>\n  )\n}\n"],"names":["React","createContext","useCallback","useContext","useState","useComponentMap","useConfig","usePreferences","buildColumnState","filterFields","getInitialColumns","TableColumnContext","useTableColumns","TableColumnsProvider","cellProps","children","collectionSlug","enableRowSelections","listPreferences","preferenceKey","config","componentMap","fieldMap","collections","collectionConfig","find","slug","admin","defaultColumns","useAsTitle","prevCollection","useRef","getPreference","setPreference","initialColumns","tableColumns","setTableColumns","columnPreferences","columns","updateColumnPreferences","newColumns","map","c","accessor","active","reassignLinkColumn","foundFirstActive","col","linkColumn","link","moveColumn","args","fromIndex","toIndex","withMovedColumn","columnToMove","splice","toggleColumn","column","toggledColumns","name","setActiveColumns","activeColumnAccessors","activeColumns","includes","useEffect","sync","collectionHasChanged","current","currentPreferences","Provider","value"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.scss';
-import type { SanitizedCollectionConfig } from 'payload/types';
+import type { SanitizedCollectionConfig } from 'payload';
 export type ThumbnailProps = {
     className?: string;
     collectionSlug?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAK9D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AASD,eAAO,MAAM,mBAAmB;;;;;CAA2C,CAAA;AAE3E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6B9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AASD,eAAO,MAAM,mBAAmB;;;;;CAA2C,CAAA;AAE3E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkC9C,CAAA"}

package/dist/elements/Thumbnail/index.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
@@ -12,7 +13,7 @@ const ThumbnailContext = /*#__PURE__*/ React.createContext({
 });
 export const useThumbnailContext = ()=>React.useContext(ThumbnailContext);
 export const Thumbnail = (props)=>{
-    const { className = '', doc: { filename } = {}, fileSrc, size } = props;
+    const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props;
     const [fileExists, setFileExists] = React.useState(undefined);
     const classNames = [
         baseClass,
@@ -43,7 +44,7 @@ export const Thumbnail = (props)=>{
             }),
             fileExists && /*#__PURE__*/ _jsx("img", {
                 alt: filename,
-                src: fileSrc
+                src: `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`
             }),
             fileExists === false && /*#__PURE__*/ _jsx(File, {})
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload/types'\n\nimport { File } from '../../graphics/File/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nconst ThumbnailContext = React.createContext({\n  className: '',\n  filename: '',\n  size: 'medium',\n  src: '',\n})\n\nexport const useThumbnailContext = () => React.useContext(ThumbnailContext)\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} src={fileSrc} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"names":["React","baseClass","File","ShimmerEffect","ThumbnailContext","createContext","className","filename","size","src","useThumbnailContext","useContext","Thumbnail","props","doc","fileSrc","fileExists","setFileExists","useState","undefined","classNames","join","useEffect","img","Image","onload","onerror","div","height","alt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAIlB,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,aAAa,QAAQ,4BAA2B;AAYzD,MAAMC,iCAAmBJ,MAAMK,aAAa,CAAC;IAC3CC,WAAW;IACXC,UAAU;IACVC,MAAM;IACNC,KAAK;AACP;AAEA,OAAO,MAAMC,sBAAsB,IAAMV,MAAMW,UAAU,CAACP,kBAAiB;AAE3E,OAAO,MAAMQ,YAAsC,CAACC;IAClD,MAAM,EAAEP,YAAY,EAAE,EAAEQ,KAAK,EAAEP,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAEQ,OAAO,EAAEP,IAAI,EAAE,GAAGK;IAClE,MAAM,CAACG,YAAYC,cAAc,GAAGjB,MAAMkB,QAAQ,CAACC;IAEnD,MAAMC,aAAa;QAACnB;QAAW,CAAC,EAAEA,UAAU,OAAO,EAAEO,QAAQ,SAAS,CAAC;QAAEF;KAAU,CAACe,IAAI,CAAC;IAEzFrB,MAAMsB,SAAS,CAAC;QACd,IAAI,CAACP,SAAS;YACZE,cAAc;YACd;QACF;QAEA,MAAMM,MAAM,IAAIC;QAChBD,IAAId,GAAG,GAAGM;QACVQ,IAAIE,MAAM,GAAG;YACXR,cAAc;QAChB;QACAM,IAAIG,OAAO,GAAG;YACZT,cAAc;QAChB;IACF,GAAG;QAACF;KAAQ;IAEZ,qBACE,MAACY;QAAIrB,WAAWc;;YACbJ,eAAeG,2BAAa,KAAChB;gBAAcyB,QAAO;;YAClDZ,4BAAc,KAACO;gBAAIM,KAAKtB;gBAAoBE,KAAKM;;YACjDC,eAAe,uBAAS,KAACd;;;AAGhC,EAAC"}
+{"version":3,"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nconst ThumbnailContext = React.createContext({\n  className: '',\n  filename: '',\n  size: 'medium',\n  src: '',\n})\n\nexport const useThumbnailContext = () => React.useContext(ThumbnailContext)\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img\n          alt={filename as string}\n          src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}\n        />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"names":["React","baseClass","File","ShimmerEffect","ThumbnailContext","createContext","className","filename","size","src","useThumbnailContext","useContext","Thumbnail","props","doc","fileSrc","imageCacheTag","fileExists","setFileExists","useState","undefined","classNames","join","useEffect","img","Image","onload","onerror","div","height","alt"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAIlB,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,aAAa,QAAQ,4BAA2B;AAYzD,MAAMC,iCAAmBJ,MAAMK,aAAa,CAAC;IAC3CC,WAAW;IACXC,UAAU;IACVC,MAAM;IACNC,KAAK;AACP;AAEA,OAAO,MAAMC,sBAAsB,IAAMV,MAAMW,UAAU,CAACP,kBAAiB;AAE3E,OAAO,MAAMQ,YAAsC,CAACC;IAClD,MAAM,EAAEP,YAAY,EAAE,EAAEQ,KAAK,EAAEP,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAEQ,OAAO,EAAEC,aAAa,EAAER,IAAI,EAAE,GAAGK;IACjF,MAAM,CAACI,YAAYC,cAAc,GAAGlB,MAAMmB,QAAQ,CAACC;IAEnD,MAAMC,aAAa;QAACpB;QAAW,CAAC,EAAEA,UAAU,OAAO,EAAEO,QAAQ,SAAS,CAAC;QAAEF;KAAU,CAACgB,IAAI,CAAC;IAEzFtB,MAAMuB,SAAS,CAAC;QACd,IAAI,CAACR,SAAS;YACZG,cAAc;YACd;QACF;QAEA,MAAMM,MAAM,IAAIC;QAChBD,IAAIf,GAAG,GAAGM;QACVS,IAAIE,MAAM,GAAG;YACXR,cAAc;QAChB;QACAM,IAAIG,OAAO,GAAG;YACZT,cAAc;QAChB;IACF,GAAG;QAACH;KAAQ;IAEZ,qBACE,MAACa;QAAItB,WAAWe;;YACbJ,eAAeG,2BAAa,KAACjB;gBAAc0B,QAAO;;YAClDZ,4BACC,KAACO;gBACCM,KAAKvB;gBACLE,KAAK,CAAC,EAAEM,QAAQ,EAAEC,gBAAgB,CAAC,CAAC,EAAEA,cAAc,CAAC,GAAG,GAAG,CAAC;;YAG/DC,eAAe,uBAAS,KAACf;;;AAGhC,EAAC"}

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

@@ -1,13 +1,13 @@
-import type { SanitizedCollectionConfig, TypeWithID } from 'payload/types';
+import type { SanitizedCollectionConfig, TypeWithID } from 'payload';
 import React from 'react';
 import './index.scss';
 export type ThumbnailCardProps = {
     alignLabel?: 'center' | 'left';
     className?: string;
     collection?: SanitizedCollectionConfig;
-    doc?: TypeWithID & {
+    doc?: {
         filename?: string;
-    };
+    } & TypeWithID;
     label?: string;
     onClick?: () => void;
     onKeyDown?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,yBAAyB,CAAA;IACtC,GAAG,CAAC,EAAE,UAAU,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0CtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,yBAAyB,CAAA;IACtC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0CtD,CAAA"}