@payloadcms/ui 3.0.0-beta.7 → 3.0.0-canary.03427d3

package/dist/elements/TableColumns/index.js

@@ -1,10 +1,10 @@
 'use client';
-import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+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({});
@@ -15,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
+                    }));
                 }
             }
         };
@@ -67,75 +127,15 @@ 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__*/ React.createElement(TableColumnContext.Provider, {
+    return /*#__PURE__*/ _jsx(TableColumnContext.Provider, {
         value: {
             columns: tableColumns,
-            dispatchTableColumns,
             moveColumn,
             setActiveColumns,
             toggleColumn
-        }
-    }, children);
+        },
+        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 { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,5 +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';
@@ -11,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,
@@ -34,14 +36,19 @@ export const Thumbnail = (props)=>{
     }, [
         fileSrc
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames
-    }, fileExists === undefined && /*#__PURE__*/ React.createElement(ShimmerEffect, {
-        height: "100%"
-    }), fileExists && /*#__PURE__*/ React.createElement("img", {
-        alt: filename,
-        src: fileSrc
-    }), fileExists === false && /*#__PURE__*/ React.createElement(File, null));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classNames,
+        children: [
+            fileExists === undefined && /*#__PURE__*/ _jsx(ShimmerEffect, {
+                height: "100%"
+            }),
+            fileExists && /*#__PURE__*/ _jsx("img", {
+                alt: filename,
+                src: `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`
+            }),
+            fileExists === false && /*#__PURE__*/ _jsx(File, {})
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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,oBAACY;QAAIrB,WAAWc;OACbJ,eAAeG,2BAAa,oBAAChB;QAAcyB,QAAO;QAClDZ,4BAAc,oBAACO;QAAIM,KAAKtB;QAAoBE,KAAKM;QACjDC,eAAe,uBAAS,oBAACd;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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,4 +1,4 @@
-import type { SanitizedCollectionConfig, TypeWithID } from 'payload/types';
+import type { SanitizedCollectionConfig, TypeWithID } from 'payload';
 import React from 'react';
 import './index.scss';
 export type ThumbnailCardProps = {

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":"AAAA,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,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"}

package/dist/elements/ThumbnailCard/index.js

@@ -1,7 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { formatDocTitle } from '../../utilities/formatDocTitle.js';
+import './index.scss';
 const baseClass = 'thumbnail-card';
 export const ThumbnailCard = (props)=>{
     const { alignLabel, className, collection, doc, label: labelFromProps, onClick, thumbnail } = props;
@@ -23,16 +26,22 @@ export const ThumbnailCard = (props)=>{
             i18n
         });
     }
-    return /*#__PURE__*/ React.createElement("button", {
+    return /*#__PURE__*/ _jsxs("button", {
         className: classes,
         onClick: onClick,
         title: title,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__thumbnail`
-    }, thumbnail), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__label`
-    }, title));
+        type: "button",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__thumbnail`,
+                children: thumbnail
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__label`,
+                children: title
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["import type { SanitizedCollectionConfig, TypeWithID } from 'payload/types'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle.js'\nimport './index.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: SanitizedCollectionConfig\n  doc?: TypeWithID & { filename?: string }\n  label?: string\n  onClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    label: labelFromProps,\n    onClick,\n    thumbnail,\n  } = props\n\n  const config = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button className={classes} onClick={onClick} title={title} type=\"button\">\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"names":["React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","classes","filter","Boolean","join","title","collectionConfig","data","dateFormat","admin","fallback","filename","button","type","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,oCAAmC;AAclE,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,GAAG,EACHC,OAAOC,cAAc,EACrBC,OAAO,EACPC,SAAS,EACV,GAAGR;IAEJ,MAAMS,SAASd;IAEf,MAAM,EAAEe,IAAI,EAAE,GAAGd;IAEjB,MAAMe,UAAU;QACdb;QACAI;QACA,OAAOK,YAAY,cAAc,CAAC,EAAET,UAAU,cAAc,CAAC;QAC7DG,cAAc,CAAC,EAAEH,UAAU,cAAc,EAAEG,WAAW,CAAC;KACxD,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIC,QAAQT;IAEZ,IAAI,CAACS,OAAO;QACVA,QAAQlB,eAAe;YACrBmB,kBAAkBb;YAClBc,MAAMb;YACNc,YAAYT,OAAOU,KAAK,CAACD,UAAU;YACnCE,UAAUhB,KAAKiB;YACfX;QACF;IACF;IAEA,qBACE,oBAACY;QAAOpB,WAAWS;QAASJ,SAASA;QAASQ,OAAOA;QAAOQ,MAAK;qBAC/D,oBAACC;QAAItB,WAAW,CAAC,EAAEJ,UAAU,WAAW,CAAC;OAAGU,0BAC5C,oBAACgB;QAAItB,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;OAAGiB;AAG9C,EAAC"}
+{"version":3,"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle.js'\nimport './index.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: SanitizedCollectionConfig\n  doc?: TypeWithID & { filename?: string }\n  label?: string\n  onClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    label: labelFromProps,\n    onClick,\n    thumbnail,\n  } = props\n\n  const config = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button className={classes} onClick={onClick} title={title} type=\"button\">\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"names":["React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","classes","filter","Boolean","join","title","collectionConfig","data","dateFormat","admin","fallback","filename","button","type","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,oCAAmC;AAClE,OAAO,eAAc;AAarB,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,GAAG,EACHC,OAAOC,cAAc,EACrBC,OAAO,EACPC,SAAS,EACV,GAAGR;IAEJ,MAAMS,SAASd;IAEf,MAAM,EAAEe,IAAI,EAAE,GAAGd;IAEjB,MAAMe,UAAU;QACdb;QACAI;QACA,OAAOK,YAAY,cAAc,CAAC,EAAET,UAAU,cAAc,CAAC;QAC7DG,cAAc,CAAC,EAAEH,UAAU,cAAc,EAAEG,WAAW,CAAC;KACxD,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIC,QAAQT;IAEZ,IAAI,CAACS,OAAO;QACVA,QAAQlB,eAAe;YACrBmB,kBAAkBb;YAClBc,MAAMb;YACNc,YAAYT,OAAOU,KAAK,CAACD,UAAU;YACnCE,UAAUhB,KAAKiB;YACfX;QACF;IACF;IAEA,qBACE,MAACY;QAAOpB,WAAWS;QAASJ,SAASA;QAASQ,OAAOA;QAAOQ,MAAK;;0BAC/D,KAACC;gBAAItB,WAAW,CAAC,EAAEJ,UAAU,WAAW,CAAC;0BAAGU;;0BAC5C,KAACgB;gBAAItB,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;0BAAGiB;;;;AAG9C,EAAC"}

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

@@ -2,11 +2,15 @@ import React from 'react';
 import './index.scss';
 export type Props = {
     alignCaret?: 'center' | 'left' | 'right';
-    boundingRef?: React.RefObject<HTMLElement>;
+    boundingRef?: React.RefObject<HTMLElement | null>;
     children: React.ReactNode;
     className?: string;
     delay?: number;
     show?: boolean;
+    /**
+     * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
+     */
+    staticPositioning?: boolean;
 };
 export declare const Tooltip: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuEnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8EnC,CAAA"}

package/dist/elements/Tooltip/index.js

@@ -1,8 +1,10 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
+import './index.scss';
 export const Tooltip = (props)=>{
-    const { alignCaret = 'center', boundingRef, children, className, delay = 350, show: showFromProps = true } = props;
+    const { alignCaret = 'center', boundingRef, children, className, delay = 350, show: showFromProps = true, staticPositioning = false } = props;
     const [show, setShow] = React.useState(showFromProps);
     const [position, setPosition] = React.useState('top');
     const getTitleAttribute = (content)=>typeof content === 'string' ? content : '';
@@ -10,7 +12,7 @@ export const Tooltip = (props)=>{
         root: boundingRef?.current || null,
         rootMargin: '-145px 0px 0px 100px',
         threshold: 0
-    });
+    }, staticPositioning);
     useEffect(()=>{
         let timerId;
         // do not use the delay on transition-out
@@ -29,34 +31,48 @@ export const Tooltip = (props)=>{
         delay
     ]);
     useEffect(()=>{
+        if (staticPositioning) return;
         setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom');
     }, [
-        intersectionEntry
+        intersectionEntry,
+        staticPositioning
     ]);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("aside", {
-        "aria-hidden": "true",
-        className: [
-            'tooltip',
-            className,
-            `tooltip--caret-${alignCaret}`,
-            'tooltip--position-top'
-        ].filter(Boolean).join(' '),
-        ref: ref,
-        title: getTitleAttribute(children)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "tooltip-content"
-    }, children)), /*#__PURE__*/ React.createElement("aside", {
-        className: [
-            'tooltip',
-            className,
-            show && 'tooltip--show',
-            `tooltip--caret-${alignCaret}`,
-            `tooltip--position-${position}`
-        ].filter(Boolean).join(' '),
-        title: getTitleAttribute(children)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "tooltip-content"
-    }, children)));
+    // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            !staticPositioning && /*#__PURE__*/ _jsx("aside", {
+                "aria-hidden": "true",
+                className: [
+                    'tooltip',
+                    className,
+                    `tooltip--caret-${alignCaret}`,
+                    'tooltip--position-top'
+                ].filter(Boolean).join(' '),
+                ref: ref,
+                style: {
+                    opacity: '0'
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "tooltip-content",
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ _jsx("aside", {
+                className: [
+                    'tooltip',
+                    className,
+                    show && 'tooltip--show',
+                    `tooltip--caret-${alignCaret}`,
+                    `tooltip--position-${position}`
+                ].filter(Boolean).join(' '),
+                title: getTitleAttribute(children),
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "tooltip-content",
+                    children: children
+                })
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  show?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 350,\n    show: showFromProps = true,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-145px 0px 0px 100px',\n    threshold: 0,\n  })\n\n  useEffect(() => {\n    let timerId: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerId = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerId) clearTimeout(timerId)\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry])\n\n  return (\n    <React.Fragment>\n      <aside\n        aria-hidden=\"true\"\n        className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n          .filter(Boolean)\n          .join(' ')}\n        ref={ref}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","show","showFromProps","setShow","useState","position","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerId","setTimeout","clearTimeout","isIntersecting","Fragment","aside","aria-hidden","filter","Boolean","join","title","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,YAAY,QAAQ,8BAA6B;AAY1D,OAAO,MAAMC,UAA2B,CAACC;IACvC,MAAM,EACJC,aAAa,QAAQ,EACrBC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,QAAQ,GAAG,EACXC,MAAMC,gBAAgB,IAAI,EAC3B,GAAGP;IAEJ,MAAM,CAACM,MAAME,QAAQ,GAAGZ,MAAMa,QAAQ,CAACF;IACvC,MAAM,CAACG,UAAUC,YAAY,GAAGf,MAAMa,QAAQ,CAAmB;IAEjE,MAAMG,oBAAoB,CAACC,UAAa,OAAOA,YAAY,WAAWA,UAAU;IAEhF,MAAM,CAACC,KAAKC,kBAAkB,GAAGjB,aAAa;QAC5CkB,MAAMd,aAAae,WAAW;QAC9BC,YAAY;QACZC,WAAW;IACb;IAEAtB,UAAU;QACR,IAAIuB;QAEJ,yCAAyC;QACzC,IAAIf,SAASE,eAAe;YAC1Ba,UAAUC,WAAW;gBACnBb,QAAQD;YACV,GAAGF;QACL,OAAO;YACLG,QAAQD;QACV;QAEA,OAAO;YACL,IAAIa,SAASE,aAAaF;QAC5B;IACF,GAAG;QAACb;QAAeF;KAAM;IAEzBR,UAAU;QACRc,YAAYI,mBAAmBQ,iBAAiB,QAAQ;IAC1D,GAAG;QAACR;KAAkB;IAEtB,qBACE,oBAACnB,MAAM4B,QAAQ,sBACb,oBAACC;QACCC,eAAY;QACZtB,WAAW;YAAC;YAAWA;YAAW,CAAC,eAAe,EAAEH,WAAW,CAAC;YAAE;SAAwB,CACvF0B,MAAM,CAACC,SACPC,IAAI,CAAC;QACRf,KAAKA;QACLgB,OAAOlB,kBAAkBT;qBAEzB,oBAAC4B;QAAI3B,WAAU;OAAmBD,0BAGpC,oBAACsB;QACCrB,WAAW;YACT;YACAA;YACAE,QAAQ;YACR,CAAC,eAAe,EAAEL,WAAW,CAAC;YAC9B,CAAC,kBAAkB,EAAES,SAAS,CAAC;SAChC,CACEiB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,OAAOlB,kBAAkBT;qBAEzB,oBAAC4B;QAAI3B,WAAU;OAAmBD;AAI1C,EAAC"}
+{"version":3,"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 350,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerId: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerId = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerId) clearTimeout(timerId)\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) return\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","show","showFromProps","staticPositioning","setShow","useState","position","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerId","setTimeout","clearTimeout","isIntersecting","Fragment","aside","aria-hidden","filter","Boolean","join","style","opacity","div","title"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,YAAY,QAAQ,8BAA6B;AAC1D,OAAO,eAAc;AAerB,OAAO,MAAMC,UAA2B,CAACC;IACvC,MAAM,EACJC,aAAa,QAAQ,EACrBC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,QAAQ,GAAG,EACXC,MAAMC,gBAAgB,IAAI,EAC1BC,oBAAoB,KAAK,EAC1B,GAAGR;IAEJ,MAAM,CAACM,MAAMG,QAAQ,GAAGb,MAAMc,QAAQ,CAACH;IACvC,MAAM,CAACI,UAAUC,YAAY,GAAGhB,MAAMc,QAAQ,CAAmB;IAEjE,MAAMG,oBAAoB,CAACC,UAAa,OAAOA,YAAY,WAAWA,UAAU;IAEhF,MAAM,CAACC,KAAKC,kBAAkB,GAAGlB,aAC/B;QACEmB,MAAMf,aAAagB,WAAW;QAC9BC,YAAY;QACZC,WAAW;IACb,GACAZ;IAGFX,UAAU;QACR,IAAIwB;QAEJ,yCAAyC;QACzC,IAAIhB,SAASE,eAAe;YAC1Bc,UAAUC,WAAW;gBACnBb,QAAQF;YACV,GAAGF;QACL,OAAO;YACLI,QAAQF;QACV;QAEA,OAAO;YACL,IAAIc,SAASE,aAAaF;QAC5B;IACF,GAAG;QAACd;QAAeF;KAAM;IAEzBR,UAAU;QACR,IAAIW,mBAAmB;QACvBI,YAAYI,mBAAmBQ,iBAAiB,QAAQ;IAC1D,GAAG;QAACR;QAAmBR;KAAkB;IAEzC,mMAAmM;IACnM,qBACE,MAACZ,MAAM6B,QAAQ;;YACZ,CAACjB,mCACA,KAACkB;gBACCC,eAAY;gBACZvB,WAAW;oBAAC;oBAAWA;oBAAW,CAAC,eAAe,EAAEH,WAAW,CAAC;oBAAE;iBAAwB,CACvF2B,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRf,KAAKA;gBACLgB,OAAO;oBAAEC,SAAS;gBAAI;0BAEtB,cAAA,KAACC;oBAAI7B,WAAU;8BAAmBD;;;0BAGtC,KAACuB;gBACCtB,WAAW;oBACT;oBACAA;oBACAE,QAAQ;oBACR,CAAC,eAAe,EAAEL,WAAW,CAAC;oBAC9B,CAAC,kBAAkB,EAAEU,SAAS,CAAC;iBAChC,CACEiB,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRI,OAAOrB,kBAAkBV;0BAEzB,cAAA,KAAC8B;oBAAI7B,WAAU;8BAAmBD;;;;;AAI1C,EAAC"}

package/dist/elements/Tooltip/index.scss

@@ -6,7 +6,7 @@
   opacity: 0;
   background-color: var(--theme-elevation-800);
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   left: 50%;
   padding: base(0.2) base(0.4);
   color: var(--theme-elevation-0);
@@ -53,7 +53,7 @@
   }
 
   &--position-top {
-    bottom: 100%;
+    top: calc(var(--base) * -0.6 - 13px);
     transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
 
     &::after {
@@ -63,7 +63,7 @@
   }
 
   &--position-bottom {
-    top: 100%;
+    bottom: calc(var(--base) * -0.6 - 13px);
     transform: translate3d(-50%, var(--caret-size), 0);
 
     &::after {
@@ -84,16 +84,16 @@
 }
 
 html[data-theme='light'] {
-  .tooltip {
+  .tooltip:not(.field-error) {
     background-color: var(--theme-elevation-100);
     color: var(--theme-elevation-1000);
+  }
 
-    &--position-top:after {
-      border-top-color: var(--theme-elevation-100);
-    }
+  .tooltip--position-top:not(.field-error):after {
+    border-top-color: var(--theme-elevation-100);
+  }
 
-    &--position-bottom:after {
-      border-bottom-color: var(--theme-elevation-100);
-    }
+  .tooltip--position-bottom:not(.field-error):after {
+    border-bottom-color: var(--theme-elevation-100);
   }
 }