@payloadcms/ui 3.0.0-canary.fb81f02 → 3.0.0

package/dist/elements/TableColumns/index.js

@@ -1,141 +1,203 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useCallback, useContext, useState } from 'react';
-import { useComponentMap } from '../../providers/ComponentMap/index.js';
+import React, { createContext, useCallback, useContext } from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
-import { buildColumnState } from './buildColumnState.js';
-import { filterFields } from './filterFields.js';
-import { getInitialColumns } from './getInitialColumns.js';
-export const TableColumnContext = /*#__PURE__*/ createContext({});
-export const useTableColumns = ()=>useContext(TableColumnContext);
-export const TableColumnsProvider = ({ cellProps, children, collectionSlug, enableRowSelections = false, listPreferences, preferenceKey })=>{
-    const config = useConfig();
-    const { componentMap } = useComponentMap();
-    const { fieldMap } = componentMap.collections[collectionSlug];
-    const collectionConfig = config.collections.find((collectionConfig)=>collectionConfig.slug === collectionSlug);
-    const { admin: { defaultColumns, useAsTitle } } = collectionConfig;
-    const prevCollection = React.useRef(collectionSlug);
-    const { getPreference, setPreference } = usePreferences();
-    const [initialColumns] = useState(()=>getInitialColumns(filterFields(fieldMap), useAsTitle, defaultColumns));
-    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
-                }
-            };
+import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
+import { abortAndIgnore } from '../../utilities/abortAndIgnore.js';
+export const TableColumnContext = /*#__PURE__*/createContext({});
+export const useTableColumns = () => {
+  return useContext(TableColumnContext);
+};
+// strip out Heading, Label, and renderedCells properties, they cannot be sent to the server
+const sanitizeColumns = columns => {
+  return columns.map(({
+    accessor,
+    active
+  }) => ({
+    accessor,
+    active
+  }));
+};
+export const TableColumnsProvider = ({
+  children,
+  collectionSlug,
+  columnState,
+  docs,
+  enableRowSelections,
+  LinkedCellOverride,
+  listPreferences,
+  preferenceKey,
+  renderRowTypes,
+  setTable,
+  sortColumnProps,
+  tableAppearance
+}) => {
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    getTableState
+  } = useServerFunctions();
+  const {
+    admin: {
+      defaultColumns,
+      useAsTitle
+    } = {},
+    fields
+  } = getEntityConfig({
+    collectionSlug
+  });
+  const prevCollection = React.useRef(collectionSlug);
+  const {
+    getPreference,
+    setPreference
+  } = usePreferences();
+  const [tableColumns, setTableColumns] = React.useState(columnState);
+  const tableStateControllerRef = React.useRef(null);
+  const moveColumn = useCallback(async args => {
+    abortAndIgnore(tableStateControllerRef.current);
+    const {
+      fromIndex,
+      toIndex
+    } = args;
+    const withMovedColumn = [...tableColumns];
+    const [columnToMove] = withMovedColumn.splice(fromIndex, 1);
+    withMovedColumn.splice(toIndex, 0, columnToMove);
+    setTableColumns(withMovedColumn);
+    const controller = new AbortController();
+    tableStateControllerRef.current = controller;
+    const result = await getTableState({
+      collectionSlug,
+      columns: sanitizeColumns(withMovedColumn),
+      docs,
+      enableRowSelections,
+      renderRowTypes,
+      signal: controller.signal,
+      tableAppearance
+    });
+    if (result) {
+      setTableColumns(result.state);
+      setTable(result.Table);
+    }
+  }, [tableColumns, collectionSlug, docs, getTableState, setTable, enableRowSelections, renderRowTypes, tableAppearance]);
+  const toggleColumn = useCallback(async column => {
+    abortAndIgnore(tableStateControllerRef.current);
+    const {
+      newColumnState,
+      toggledColumns
+    } = tableColumns.reduce((acc, col) => {
+      if (col.accessor === column) {
+        acc.newColumnState.push({
+          ...col,
+          accessor: col.accessor,
+          active: !col.active
         });
-        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
-            };
+        acc.toggledColumns.push({
+          accessor: col.accessor,
+          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)
-            };
+      } else {
+        acc.newColumnState.push(col);
+        acc.toggledColumns.push({
+          accessor: col.accessor,
+          active: col.active
         });
-        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) {
-                    setTableColumns(buildColumnState({
-                        cellProps,
-                        columnPreferences: currentPreferences?.columns,
-                        columns: initialColumns,
-                        enableRowSelections: true,
-                        fieldMap,
-                        useAsTitle
-                    }));
-                }
-            }
-        };
-        void sync();
-    }, [
-        preferenceKey,
-        getPreference,
-        collectionSlug,
-        fieldMap,
-        cellProps,
-        defaultColumns,
-        useAsTitle,
-        listPreferences,
-        initialColumns
-    ]);
-    return /*#__PURE__*/ _jsx(TableColumnContext.Provider, {
-        value: {
-            columns: tableColumns,
-            moveColumn,
-            setActiveColumns,
-            toggleColumn
-        },
-        children: children
+      }
+      return acc;
+    }, {
+      newColumnState: [],
+      toggledColumns: []
+    });
+    setTableColumns(newColumnState);
+    const controller_0 = new AbortController();
+    tableStateControllerRef.current = controller_0;
+    const result_0 = await getTableState({
+      collectionSlug,
+      columns: toggledColumns,
+      docs,
+      enableRowSelections,
+      renderRowTypes,
+      signal: controller_0.signal,
+      tableAppearance
     });
+    if (result_0) {
+      setTableColumns(result_0.state);
+      setTable(result_0.Table);
+    }
+  }, [tableColumns, getTableState, setTable, collectionSlug, docs, enableRowSelections, renderRowTypes, tableAppearance]);
+  const setActiveColumns = React.useCallback(async activeColumnAccessors => {
+    const activeColumns = tableColumns.map(col_0 => {
+      return {
+        accessor: col_0.accessor,
+        active: activeColumnAccessors.includes(col_0.accessor)
+      };
+    }).toSorted((first, second) => {
+      const indexOfFirst = activeColumnAccessors.indexOf(first.accessor);
+      const indexOfSecond = activeColumnAccessors.indexOf(second.accessor);
+      if (indexOfFirst === -1 || indexOfSecond === -1) {
+        return 0;
+      }
+      return indexOfFirst > indexOfSecond ? 1 : -1;
+    });
+    const {
+      state: columnState_0,
+      Table
+    } = await getTableState({
+      collectionSlug,
+      columns: activeColumns,
+      docs,
+      enableRowSelections,
+      renderRowTypes,
+      tableAppearance
+    });
+    setTableColumns(columnState_0);
+    setTable(Table);
+  }, [tableColumns, getTableState, setTable, collectionSlug, docs, enableRowSelections, renderRowTypes, tableAppearance]);
+  const resetColumnsState = React.useCallback(async () => {
+    await setActiveColumns(defaultColumns);
+  }, [defaultColumns, setActiveColumns]);
+  // //////////////////////////////////////////////
+  // 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) {
+          // setTableColumns()
+          // buildColumnState({
+          //   beforeRows,
+          //   columnPreferences: currentPreferences?.columns,
+          //   columns: initialColumns,
+          //   enableRowSelections,
+          //   fields,
+          //   sortColumnProps,
+          //   useAsTitle,
+          // }),
+        }
+      }
+    };
+    void sync();
+  }, [preferenceKey, getPreference, collectionSlug, fields, defaultColumns, useAsTitle, listPreferences, enableRowSelections, sortColumnProps]);
+  React.useEffect(() => {
+    return () => {
+      abortAndIgnore(tableStateControllerRef.current);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(TableColumnContext.Provider, {
+    value: {
+      columns: tableColumns,
+      LinkedCellOverride,
+      moveColumn,
+      resetColumnsState,
+      setActiveColumns,
+      toggleColumn
+    },
+    children: children
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"index.js","names":["React","createContext","useCallback","useContext","useConfig","usePreferences","useServerFunctions","abortAndIgnore","TableColumnContext","useTableColumns","sanitizeColumns","columns","map","accessor","active","TableColumnsProvider","children","collectionSlug","columnState","docs","enableRowSelections","LinkedCellOverride","listPreferences","preferenceKey","renderRowTypes","setTable","sortColumnProps","tableAppearance","getEntityConfig","getTableState","admin","defaultColumns","useAsTitle","fields","prevCollection","useRef","getPreference","setPreference","tableColumns","setTableColumns","useState","tableStateControllerRef","moveColumn","args","current","fromIndex","toIndex","withMovedColumn","columnToMove","splice","controller","AbortController","result","signal","state","Table","toggleColumn","column","newColumnState","toggledColumns","reduce","acc","col","push","setActiveColumns","activeColumnAccessors","activeColumns","includes","toSorted","first","second","indexOfFirst","indexOf","indexOfSecond","resetColumnsState","useEffect","sync","collectionHasChanged","currentPreferences","_jsx","Provider","value"],"sources":["../../../src/elements/TableColumns/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, SanitizedCollectionConfig } from 'payload'\n\nimport React, { createContext, useCallback, useContext } from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListQuery/index.js'\nimport type { SortColumnProps } from '../SortColumn/index.js'\nimport type { Column } from '../Table/index.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { abortAndIgnore } from '../../utilities/abortAndIgnore.js'\n\nexport interface ITableColumns {\n  columns: Column[]\n  LinkedCellOverride?: React.ReactNode\n  moveColumn: (args: { fromIndex: number; toIndex: number }) => Promise<void>\n  resetColumnsState: () => Promise<void>\n  setActiveColumns: (columns: string[]) => Promise<void>\n  toggleColumn: (column: string) => Promise<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  readonly children: React.ReactNode\n  readonly collectionSlug: string\n  readonly columnState: Column[]\n  readonly docs: any[]\n  readonly enableRowSelections?: boolean\n  readonly LinkedCellOverride?: React.ReactNode\n  readonly listPreferences?: ListPreferences\n  readonly preferenceKey: string\n  readonly renderRowTypes?: boolean\n  readonly setTable: (Table: React.ReactNode) => void\n  readonly sortColumnProps?: Partial<SortColumnProps>\n  readonly tableAppearance?: 'condensed' | 'default'\n}\n\n// strip out Heading, Label, and renderedCells properties, they cannot be sent to the server\nconst sanitizeColumns = (columns: Column[]) => {\n  return columns.map(({ accessor, active }) => ({\n    accessor,\n    active,\n  }))\n}\n\nexport const TableColumnsProvider: React.FC<Props> = ({\n  children,\n  collectionSlug,\n  columnState,\n  docs,\n  enableRowSelections,\n  LinkedCellOverride,\n  listPreferences,\n  preferenceKey,\n  renderRowTypes,\n  setTable,\n  sortColumnProps,\n  tableAppearance,\n}) => {\n  const { getEntityConfig } = useConfig()\n\n  const { getTableState } = useServerFunctions()\n\n  const { admin: { defaultColumns, useAsTitle } = {}, fields } = getEntityConfig({\n    collectionSlug,\n  }) as ClientCollectionConfig\n\n  const prevCollection = React.useRef<SanitizedCollectionConfig['slug']>(collectionSlug)\n  const { getPreference, setPreference } = usePreferences()\n\n  const [tableColumns, setTableColumns] = React.useState(columnState)\n  const tableStateControllerRef = React.useRef<AbortController>(null)\n\n  const moveColumn = useCallback(\n    async (args: { fromIndex: number; toIndex: number }) => {\n      abortAndIgnore(tableStateControllerRef.current)\n\n      const { fromIndex, toIndex } = args\n      const withMovedColumn = [...tableColumns]\n      const [columnToMove] = withMovedColumn.splice(fromIndex, 1)\n      withMovedColumn.splice(toIndex, 0, columnToMove)\n\n      setTableColumns(withMovedColumn)\n\n      const controller = new AbortController()\n      tableStateControllerRef.current = controller\n\n      const result = await getTableState({\n        collectionSlug,\n        columns: sanitizeColumns(withMovedColumn),\n        docs,\n        enableRowSelections,\n        renderRowTypes,\n        signal: controller.signal,\n        tableAppearance,\n      })\n\n      if (result) {\n        setTableColumns(result.state)\n        setTable(result.Table)\n      }\n    },\n    [\n      tableColumns,\n      collectionSlug,\n      docs,\n      getTableState,\n      setTable,\n      enableRowSelections,\n      renderRowTypes,\n      tableAppearance,\n    ],\n  )\n\n  const toggleColumn = useCallback(\n    async (column: string) => {\n      abortAndIgnore(tableStateControllerRef.current)\n\n      const { newColumnState, toggledColumns } = tableColumns.reduce<{\n        newColumnState: Column[]\n        toggledColumns: Pick<Column, 'accessor' | 'active'>[]\n      }>(\n        (acc, col) => {\n          if (col.accessor === column) {\n            acc.newColumnState.push({\n              ...col,\n              accessor: col.accessor,\n              active: !col.active,\n            })\n            acc.toggledColumns.push({\n              accessor: col.accessor,\n              active: !col.active,\n            })\n          } else {\n            acc.newColumnState.push(col)\n            acc.toggledColumns.push({\n              accessor: col.accessor,\n              active: col.active,\n            })\n          }\n\n          return acc\n        },\n        { newColumnState: [], toggledColumns: [] },\n      )\n\n      setTableColumns(newColumnState)\n\n      const controller = new AbortController()\n      tableStateControllerRef.current = controller\n\n      const result = await getTableState({\n        collectionSlug,\n        columns: toggledColumns,\n        docs,\n        enableRowSelections,\n        renderRowTypes,\n        signal: controller.signal,\n        tableAppearance,\n      })\n\n      if (result) {\n        setTableColumns(result.state)\n        setTable(result.Table)\n      }\n    },\n    [\n      tableColumns,\n      getTableState,\n      setTable,\n      collectionSlug,\n      docs,\n      enableRowSelections,\n      renderRowTypes,\n      tableAppearance,\n    ],\n  )\n\n  const setActiveColumns = React.useCallback(\n    async (activeColumnAccessors: string[]) => {\n      const activeColumns: Pick<Column, 'accessor' | 'active'>[] = tableColumns\n        .map((col) => {\n          return {\n            accessor: col.accessor,\n            active: activeColumnAccessors.includes(col.accessor),\n          }\n        })\n        .toSorted((first, second) => {\n          const indexOfFirst = activeColumnAccessors.indexOf(first.accessor)\n          const indexOfSecond = activeColumnAccessors.indexOf(second.accessor)\n\n          if (indexOfFirst === -1 || indexOfSecond === -1) {\n            return 0\n          }\n\n          return indexOfFirst > indexOfSecond ? 1 : -1\n        })\n\n      const { state: columnState, Table } = await getTableState({\n        collectionSlug,\n        columns: activeColumns,\n        docs,\n        enableRowSelections,\n        renderRowTypes,\n        tableAppearance,\n      })\n\n      setTableColumns(columnState)\n      setTable(Table)\n    },\n    [\n      tableColumns,\n      getTableState,\n      setTable,\n      collectionSlug,\n      docs,\n      enableRowSelections,\n      renderRowTypes,\n      tableAppearance,\n    ],\n  )\n\n  const resetColumnsState = React.useCallback(async () => {\n    await setActiveColumns(defaultColumns)\n  }, [defaultColumns, setActiveColumns])\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\n        prevCollection.current = collectionSlug\n\n        if (currentPreferences?.columns) {\n          // setTableColumns()\n          // buildColumnState({\n          //   beforeRows,\n          //   columnPreferences: currentPreferences?.columns,\n          //   columns: initialColumns,\n          //   enableRowSelections,\n          //   fields,\n          //   sortColumnProps,\n          //   useAsTitle,\n          // }),\n        }\n      }\n    }\n\n    void sync()\n  }, [\n    preferenceKey,\n    getPreference,\n    collectionSlug,\n    fields,\n    defaultColumns,\n    useAsTitle,\n    listPreferences,\n    enableRowSelections,\n    sortColumnProps,\n  ])\n\n  React.useEffect(() => {\n    return () => {\n      abortAndIgnore(tableStateControllerRef.current)\n    }\n  }, [])\n\n  return (\n    <TableColumnContext.Provider\n      value={{\n        columns: tableColumns,\n        LinkedCellOverride,\n        moveColumn,\n        resetColumnsState,\n        setActiveColumns,\n        toggleColumn,\n      }}\n    >\n      {children}\n    </TableColumnContext.Provider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+/**
+ * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas
+ */
+export declare const createThumbnail: (file: File) => Promise<string>;
+//# sourceMappingURL=createThumbnail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,IAAI,KAAG,OAAO,CAAC,MAAM,CAgD1D,CAAA"}

package/dist/elements/Thumbnail/createThumbnail.js

@@ -0,0 +1,50 @@
+/**
+ * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas
+ */export const createThumbnail = file => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = URL.createObjectURL(file) // Use Object URL directly
+    ;
+    img.onload = () => {
+      const maxDimension = 280;
+      let drawHeight, drawWidth;
+      // Calculate aspect ratio
+      const aspectRatio = img.width / img.height;
+      // Determine dimensions to fit within maxDimension while maintaining aspect ratio
+      if (aspectRatio > 1) {
+        // Image is wider than tall
+        drawWidth = maxDimension;
+        drawHeight = maxDimension / aspectRatio;
+      } else {
+        // Image is taller than wide, or square
+        drawWidth = maxDimension * aspectRatio;
+        drawHeight = maxDimension;
+      }
+      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas
+      ;
+      const ctx = canvas.getContext('2d');
+      // Draw the image onto the OffscreenCanvas with calculated dimensions
+      ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
+      // Convert the OffscreenCanvas to a Blob and free up memory
+      canvas.convertToBlob({
+        type: 'image/jpeg',
+        quality: 0.25
+      }).then(blob => {
+        URL.revokeObjectURL(img.src) // Release the Object URL
+        ;
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result) // Resolve as data URL
+        ;
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      }).catch(reject);
+    };
+    img.onerror = error => {
+      URL.revokeObjectURL(img.src) // Release Object URL on error
+      ;
+      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+      reject(error);
+    };
+  });
+};
+//# sourceMappingURL=createThumbnail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createThumbnail.js","names":["createThumbnail","file","Promise","resolve","reject","img","Image","src","URL","createObjectURL","onload","maxDimension","drawHeight","drawWidth","aspectRatio","width","height","canvas","OffscreenCanvas","ctx","getContext","drawImage","convertToBlob","type","quality","then","blob","revokeObjectURL","reader","FileReader","result","onerror","readAsDataURL","catch","error"],"sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"sourcesContent":["/**\n * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas\n */\nexport const createThumbnail = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const img = new Image()\n    img.src = URL.createObjectURL(file) // Use Object URL directly\n\n    img.onload = () => {\n      const maxDimension = 280\n      let drawHeight: number, drawWidth: number\n\n      // Calculate aspect ratio\n      const aspectRatio = img.width / img.height\n\n      // Determine dimensions to fit within maxDimension while maintaining aspect ratio\n      if (aspectRatio > 1) {\n        // Image is wider than tall\n        drawWidth = maxDimension\n        drawHeight = maxDimension / aspectRatio\n      } else {\n        // Image is taller than wide, or square\n        drawWidth = maxDimension * aspectRatio\n        drawHeight = maxDimension\n      }\n\n      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas\n      const ctx = canvas.getContext('2d')\n\n      // Draw the image onto the OffscreenCanvas with calculated dimensions\n      ctx.drawImage(img, 0, 0, drawWidth, drawHeight)\n\n      // Convert the OffscreenCanvas to a Blob and free up memory\n      canvas\n        .convertToBlob({ type: 'image/jpeg', quality: 0.25 })\n        .then((blob) => {\n          URL.revokeObjectURL(img.src) // Release the Object URL\n          const reader = new FileReader()\n          reader.onload = () => resolve(reader.result as string) // Resolve as data URL\n          reader.onerror = reject\n          reader.readAsDataURL(blob)\n        })\n        .catch(reject)\n    }\n\n    img.onerror = (error) => {\n      URL.revokeObjectURL(img.src) // Release Object URL on error\n      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors\n      reject(error)\n    }\n  })\n}\n"],"mappings":"AAAA;;GAGA,OAAO,MAAMA,eAAA,GAAmBC,IAAA;EAC9B,OAAO,IAAIC,OAAA,CAAQ,CAACC,OAAA,EAASC,MAAA;IAC3B,MAAMC,GAAA,GAAM,IAAIC,KAAA;IAChBD,GAAA,CAAIE,GAAG,GAAGC,GAAA,CAAIC,eAAe,CAACR,IAAA,EAAM;IAAA;IAEpCI,GAAA,CAAIK,MAAM,GAAG;MACX,MAAMC,YAAA,GAAe;MACrB,IAAIC,UAAA,EAAoBC,SAAA;MAExB;MACA,MAAMC,WAAA,GAAcT,GAAA,CAAIU,KAAK,GAAGV,GAAA,CAAIW,MAAM;MAE1C;MACA,IAAIF,WAAA,GAAc,GAAG;QACnB;QACAD,SAAA,GAAYF,YAAA;QACZC,UAAA,GAAaD,YAAA,GAAeG,WAAA;MAC9B,OAAO;QACL;QACAD,SAAA,GAAYF,YAAA,GAAeG,WAAA;QAC3BF,UAAA,GAAaD,YAAA;MACf;MAEA,MAAMM,MAAA,GAAS,IAAIC,eAAA,CAAgBL,SAAA,EAAWD,UAAA,EAAY;MAAA;MAC1D,MAAMO,GAAA,GAAMF,MAAA,CAAOG,UAAU,CAAC;MAE9B;MACAD,GAAA,CAAIE,SAAS,CAAChB,GAAA,EAAK,GAAG,GAAGQ,SAAA,EAAWD,UAAA;MAEpC;MACAK,MAAA,CACGK,aAAa,CAAC;QAAEC,IAAA,EAAM;QAAcC,OAAA,EAAS;MAAK,GAClDC,IAAI,CAAEC,IAAA;QACLlB,GAAA,CAAImB,eAAe,CAACtB,GAAA,CAAIE,GAAG,EAAE;QAAA;QAC7B,MAAMqB,MAAA,GAAS,IAAIC,UAAA;QACnBD,MAAA,CAAOlB,MAAM,GAAG,MAAMP,OAAA,CAAQyB,MAAA,CAAOE,MAAM,EAAY;QAAA;QACvDF,MAAA,CAAOG,OAAO,GAAG3B,MAAA;QACjBwB,MAAA,CAAOI,aAAa,CAACN,IAAA;MACvB,GACCO,KAAK,CAAC7B,MAAA;IACX;IAEAC,GAAA,CAAI0B,OAAO,GAAIG,KAAA;MACb1B,GAAA,CAAImB,eAAe,CAACtB,GAAA,CAAIE,GAAG,EAAE;MAAA;MAC7B;MACAH,MAAA,CAAO8B,KAAA;IACT;EACF;AACF","ignoreList":[]}

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

@@ -10,11 +10,15 @@ export type ThumbnailProps = {
     size?: 'expand' | 'large' | 'medium' | 'small';
     uploadConfig?: SanitizedCollectionConfig['upload'];
 };
-export declare const useThumbnailContext: () => {
-    className: string;
-    filename: string;
-    size: string;
-    src: string;
-};
 export declare const Thumbnail: React.FC<ThumbnailProps>;
+type ThumbnailComponentProps = {
+    readonly alt?: string;
+    readonly className?: string;
+    readonly filename: string;
+    readonly fileSrc: string;
+    readonly imageCacheTag?: string;
+    readonly size?: 'expand' | 'large' | 'medium' | 'small';
+};
+export declare function ThumbnailComponent(props: ThumbnailComponentProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

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,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"}
+{"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;AAMxD,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;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmC9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxD,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAgChE"}