@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5f0cd13

package/dist/utilities/renderTable.js

@@ -3,6 +3,7 @@ import { getTranslation } from '@payloadcms/translations';
 import { fieldAffectsData, fieldIsHiddenOrDisabled } from 'payload/shared';
 import React from 'react';
 import { RenderServerComponent } from '../elements/RenderServerComponent/index.js';
+import { TableSectionContent, TableSectionHeader, TableSectionRoot } from '../elements/TableSection/index.js';
 import { GroupByHeader, GroupByPageControls, OrderableTable, Pill, SelectAll, SelectionProvider, SelectRow, SortHeader, SortRow, Table } from '../exports/client/index.js';
 import { filterFieldsWithPermissions } from '../providers/TableColumns/buildColumnState/filterFieldsWithPermissions.js';
 import { buildColumnState } from '../providers/TableColumns/buildColumnState/index.js';
@@ -38,11 +39,12 @@ export const renderTable = ({
   query,
   renderRowTypes,
   req,
+  showHeading,
   tableAppearance,
   useAsTitle,
   viewType
 }) => {
-  // Ensure that columns passed as args comply with the field config, i.e. `hidden`, `disableListColumn`, etc.
+  // Ensure that columns passed as args comply with the field config, i.e. `hidden`, `disabled.column`, etc.
   let columnState;
   let clientFields = clientCollectionConfig?.fields || [];
   let serverFields = collectionConfig?.fields || [];
@@ -145,24 +147,29 @@ export const renderTable = ({
     return {
       columnState,
       // key is required since Next.js 15.2.0 to prevent React key error
-      Table: /*#__PURE__*/_jsx("div", {
+      Table: /*#__PURE__*/_jsx(TableSectionRoot, {
         className: ['table-wrap', groupByValue !== undefined && `table-wrap--group-by`].filter(Boolean).join(' '),
+        "data-group-id": groupByValue,
         children: /*#__PURE__*/_jsxs(SelectionProvider, {
           docs: data?.docs || [],
           totalDocs: data?.totalDocs || 0,
-          children: [/*#__PURE__*/_jsx(GroupByHeader, {
-            collectionConfig: clientCollectionConfig,
-            groupByFieldPath: groupByFieldPath,
-            groupByValue: groupByValue,
-            heading: heading
-          }), /*#__PURE__*/_jsx(Table, {
-            appearance: tableAppearance,
-            columns: columnsToUse,
-            data: data?.docs || []
-          }), /*#__PURE__*/_jsx(GroupByPageControls, {
-            collectionConfig: clientCollectionConfig,
-            data: data,
-            groupByValue: groupByValue
+          children: [/*#__PURE__*/_jsxs(TableSectionHeader, {
+            heading: heading,
+            children: [/*#__PURE__*/_jsx(GroupByHeader, {
+              collectionConfig: clientCollectionConfig,
+              groupByFieldPath: groupByFieldPath,
+              groupByValue: groupByValue,
+              heading: heading
+            }), /*#__PURE__*/_jsx(GroupByPageControls, {
+              data: data,
+              groupByValue: groupByValue
+            })]
+          }), /*#__PURE__*/_jsx(TableSectionContent, {
+            children: /*#__PURE__*/_jsx(Table, {
+              appearance: tableAppearance,
+              columns: columnsToUse,
+              data: data?.docs || []
+            })
           })]
         })
       }, key)
@@ -172,17 +179,24 @@ export const renderTable = ({
     return {
       columnState,
       // key is required since Next.js 15.2.0 to prevent React key error
-      Table: /*#__PURE__*/_jsx("div", {
+      Table: /*#__PURE__*/_jsxs(TableSectionRoot, {
         className: "table-wrap",
-        children: /*#__PURE__*/_jsx(Table, {
-          appearance: tableAppearance,
-          columns: columnsToUse,
-          data: data?.docs || []
-        })
+        children: [showHeading && heading && /*#__PURE__*/_jsx(TableSectionHeader, {
+          children: /*#__PURE__*/_jsx("h4", {
+            children: heading
+          })
+        }), /*#__PURE__*/_jsx(TableSectionContent, {
+          children: /*#__PURE__*/_jsx(Table, {
+            appearance: tableAppearance,
+            columns: columnsToUse,
+            data: data?.docs || []
+          })
+        })]
       }, key)
     };
   }
-  columnsToUse.unshift({
+  // Insert after _select column (index 1) so order is: _select, _dragHandle, ...rest
+  columnsToUse.splice(enableRowSelections ? 1 : 0, 0, {
     accessor: '_dragHandle',
     active: true,
     field: {
@@ -197,13 +211,15 @@ export const renderTable = ({
   return {
     columnState,
     // key is required since Next.js 15.2.0 to prevent React key error
-    Table: /*#__PURE__*/_jsx("div", {
+    Table: /*#__PURE__*/_jsx(TableSectionRoot, {
       className: "table-wrap",
-      children: /*#__PURE__*/_jsx(OrderableTable, {
-        appearance: tableAppearance,
-        collection: clientCollectionConfig,
-        columns: columnsToUse,
-        data: data?.docs || []
+      children: /*#__PURE__*/_jsx(TableSectionContent, {
+        children: /*#__PURE__*/_jsx(OrderableTable, {
+          appearance: tableAppearance,
+          collection: clientCollectionConfig,
+          columns: columnsToUse,
+          data: data?.docs || []
+        })
       })
     }, key)
   };

package/dist/utilities/renderTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTable.js","names":["getTranslation","fieldAffectsData","fieldIsHiddenOrDisabled","React","RenderServerComponent","GroupByHeader","GroupByPageControls","OrderableTable","Pill","SelectAll","SelectionProvider","SelectRow","SortHeader","SortRow","Table","filterFieldsWithPermissions","buildColumnState","renderFilters","fields","importMap","reduce","acc","field","admin","components","Filter","set","name","Component","Map","renderTable","clientCollectionConfig","clientConfig","collectionConfig","collections","columns","customCellProps","data","enableRowSelections","fieldPermissions","groupByFieldPath","groupByValue","heading","i18n","key","orderableFieldName","payload","query","renderRowTypes","req","tableAppearance","useAsTitle","viewType","columnState","clientFields","serverFields","isPolymorphic","isGroupingBy","Boolean","groupBy","collection","find","each","slug","some","push","serverCollectionConfig","config","sharedArgs","collectionSlug","undefined","dataType","docs","columnsToUse","unshift","accessor","active","disabled","hidden","Heading","t","renderedCells","map","doc","i","_jsx","size","relationTo","labels","singular","_","rowData","className","filter","join","_jsxs","totalDocs","appearance"],"sources":["../../src/utilities/renderTable.tsx"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  ClientConfig,\n  ClientField,\n  CollectionConfig,\n  Column,\n  ColumnPreference,\n  Field,\n  ImportMap,\n  ListQuery,\n  PaginatedDocs,\n  Payload,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedFieldsPermissions,\n  ViewTypes,\n} from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport { fieldAffectsData, fieldIsHiddenOrDisabled } from 'payload/shared'\nimport React from 'react'\n\nimport type { BuildColumnStateArgs } from '../providers/TableColumns/buildColumnState/index.js'\n\nimport { RenderServerComponent } from '../elements/RenderServerComponent/index.js'\nimport {\n  GroupByHeader,\n  GroupByPageControls,\n  OrderableTable,\n  Pill,\n  SelectAll,\n  SelectionProvider,\n  SelectRow,\n  SortHeader,\n  SortRow,\n  Table,\n  // eslint-disable-next-line payload/no-imports-from-exports-dir -- these MUST reference the exports dir: https://github.com/payloadcms/payload/issues/12002#issuecomment-2791493587\n} from '../exports/client/index.js'\nimport { filterFieldsWithPermissions } from '../providers/TableColumns/buildColumnState/filterFieldsWithPermissions.js'\nimport { buildColumnState } from '../providers/TableColumns/buildColumnState/index.js'\n\nexport const renderFilters = (\n  fields: Field[],\n  importMap: ImportMap,\n): Map<string, React.ReactNode> =>\n  fields.reduce(\n    (acc, field) => {\n      if (fieldIsHiddenOrDisabled(field)) {\n        return acc\n      }\n\n      if ('name' in field && field.admin?.components?.Filter) {\n        acc.set(\n          field.name,\n          RenderServerComponent({\n            Component: field.admin.components?.Filter,\n            importMap,\n          }),\n        )\n      }\n\n      return acc\n    },\n    new Map() as Map<string, React.ReactNode>,\n  )\n\nexport const renderTable = ({\n  clientCollectionConfig,\n  clientConfig,\n  collectionConfig,\n  collections,\n  columns,\n  customCellProps,\n  data,\n  enableRowSelections,\n  fieldPermissions,\n  groupByFieldPath,\n  groupByValue,\n  heading,\n  i18n,\n  key = 'table',\n  orderableFieldName,\n  payload,\n  query,\n  renderRowTypes,\n  req,\n  tableAppearance,\n  useAsTitle,\n  viewType,\n}: {\n  clientCollectionConfig?: ClientCollectionConfig\n  clientConfig?: ClientConfig\n  collectionConfig?: SanitizedCollectionConfig\n  collections?: string[]\n  columns: ColumnPreference[]\n  customCellProps?: Record<string, unknown>\n  data?: PaginatedDocs | undefined\n  drawerSlug?: string\n  enableRowSelections: boolean\n  fieldPermissions?: SanitizedFieldsPermissions\n  groupByFieldPath?: string\n  groupByValue?: string\n  heading?: string\n  i18n: I18nClient\n  key?: string\n  orderableFieldName: string\n  payload: Payload\n  query?: ListQuery\n  renderRowTypes?: boolean\n  req?: PayloadRequest\n  tableAppearance?: 'condensed' | 'default'\n  useAsTitle: CollectionConfig['admin']['useAsTitle']\n  viewType?: ViewTypes\n}): {\n  columnState: Column[]\n  Table: React.ReactNode\n} => {\n  // Ensure that columns passed as args comply with the field config, i.e. `hidden`, `disableListColumn`, etc.\n\n  let columnState: Column[]\n  let clientFields: ClientField[] = clientCollectionConfig?.fields || []\n  let serverFields: Field[] = collectionConfig?.fields || []\n  const isPolymorphic = collections\n\n  const isGroupingBy = Boolean(collectionConfig?.admin?.groupBy && query?.groupBy)\n\n  if (isPolymorphic) {\n    clientFields = []\n    serverFields = []\n\n    for (const collection of collections) {\n      const clientCollectionConfig = clientConfig.collections.find(\n        (each) => each.slug === collection,\n      )\n\n      for (const field of filterFieldsWithPermissions({\n        fieldPermissions,\n        fields: clientCollectionConfig.fields,\n      })) {\n        if (fieldAffectsData(field)) {\n          if (clientFields.some((each) => fieldAffectsData(each) && each.name === field.name)) {\n            continue\n          }\n        }\n\n        clientFields.push(field)\n      }\n\n      const serverCollectionConfig = payload.collections[collection].config\n\n      for (const field of filterFieldsWithPermissions<Field>({\n        fieldPermissions,\n        fields: serverCollectionConfig.fields,\n      })) {\n        if (fieldAffectsData(field)) {\n          if (serverFields.some((each) => fieldAffectsData(each) && each.name === field.name)) {\n            continue\n          }\n        }\n\n        serverFields.push(field)\n      }\n    }\n  }\n\n  const sharedArgs: Pick<\n    BuildColumnStateArgs,\n    | 'clientFields'\n    | 'columns'\n    | 'customCellProps'\n    | 'enableRowSelections'\n    | 'fieldPermissions'\n    | 'i18n'\n    | 'payload'\n    | 'req'\n    | 'serverFields'\n    | 'useAsTitle'\n    | 'viewType'\n  > = {\n    clientFields,\n    columns,\n    enableRowSelections,\n    fieldPermissions,\n    i18n,\n    // sortColumnProps,\n    customCellProps,\n    payload,\n    req,\n    serverFields,\n    useAsTitle,\n    viewType,\n  }\n\n  if (isPolymorphic) {\n    columnState = buildColumnState({\n      ...sharedArgs,\n      collectionSlug: undefined,\n      dataType: 'polymorphic',\n      docs: data?.docs || [],\n    })\n  } else {\n    columnState = buildColumnState({\n      ...sharedArgs,\n      collectionSlug: clientCollectionConfig.slug,\n      dataType: 'monomorphic',\n      docs: data?.docs || [],\n    })\n  }\n\n  const columnsToUse = [...columnState]\n\n  if (renderRowTypes) {\n    columnsToUse.unshift({\n      accessor: 'collection',\n      active: true,\n      field: {\n        admin: {\n          disabled: true,\n        },\n        hidden: true,\n      },\n      Heading: i18n.t('version:type'),\n      renderedCells: (data?.docs || []).map((doc, i) => (\n        <Pill key={i} size=\"small\">\n          {getTranslation(\n            collections\n              ? payload.collections[doc.relationTo].config.labels.singular\n              : clientCollectionConfig.labels.singular,\n            i18n,\n          )}\n        </Pill>\n      )),\n    } as Column)\n  }\n\n  if (enableRowSelections) {\n    columnsToUse.unshift({\n      accessor: '_select',\n      active: true,\n      field: {\n        admin: {\n          disabled: true,\n        },\n        hidden: true,\n      },\n      Heading: <SelectAll />,\n      renderedCells: (data?.docs || []).map((_, i) => (\n        <SelectRow key={i} rowData={data?.docs[i]} />\n      )),\n    } as Column)\n  }\n\n  if (isGroupingBy) {\n    return {\n      columnState,\n      // key is required since Next.js 15.2.0 to prevent React key error\n      Table: (\n        <div\n          className={['table-wrap', groupByValue !== undefined && `table-wrap--group-by`]\n            .filter(Boolean)\n            .join(' ')}\n          key={key}\n        >\n          <SelectionProvider docs={data?.docs || []} totalDocs={data?.totalDocs || 0}>\n            <GroupByHeader\n              collectionConfig={clientCollectionConfig}\n              groupByFieldPath={groupByFieldPath}\n              groupByValue={groupByValue}\n              heading={heading}\n            />\n            <Table appearance={tableAppearance} columns={columnsToUse} data={data?.docs || []} />\n            <GroupByPageControls\n              collectionConfig={clientCollectionConfig}\n              data={data}\n              groupByValue={groupByValue}\n            />\n          </SelectionProvider>\n        </div>\n      ),\n    }\n  }\n\n  if (!orderableFieldName) {\n    return {\n      columnState,\n      // key is required since Next.js 15.2.0 to prevent React key error\n      Table: (\n        <div className=\"table-wrap\" key={key}>\n          <Table appearance={tableAppearance} columns={columnsToUse} data={data?.docs || []} />\n        </div>\n      ),\n    }\n  }\n\n  columnsToUse.unshift({\n    accessor: '_dragHandle',\n    active: true,\n    field: {\n      admin: {\n        disabled: true,\n      },\n      hidden: true,\n    },\n    Heading: <SortHeader />,\n    renderedCells: (data?.docs || []).map((_, i) => <SortRow key={i} />),\n  } as Column)\n\n  return {\n    columnState,\n    // key is required since Next.js 15.2.0 to prevent React key error\n    Table: (\n      <div className=\"table-wrap\" key={key}>\n        <OrderableTable\n          appearance={tableAppearance}\n          collection={clientCollectionConfig}\n          columns={columnsToUse}\n          data={data?.docs || []}\n        />\n      </div>\n    ),\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderTable.js","names":["getTranslation","fieldAffectsData","fieldIsHiddenOrDisabled","React","RenderServerComponent","TableSectionContent","TableSectionHeader","TableSectionRoot","GroupByHeader","GroupByPageControls","OrderableTable","Pill","SelectAll","SelectionProvider","SelectRow","SortHeader","SortRow","Table","filterFieldsWithPermissions","buildColumnState","renderFilters","fields","importMap","reduce","acc","field","admin","components","Filter","set","name","Component","Map","renderTable","clientCollectionConfig","clientConfig","collectionConfig","collections","columns","customCellProps","data","enableRowSelections","fieldPermissions","groupByFieldPath","groupByValue","heading","i18n","key","orderableFieldName","payload","query","renderRowTypes","req","showHeading","tableAppearance","useAsTitle","viewType","columnState","clientFields","serverFields","isPolymorphic","isGroupingBy","Boolean","groupBy","collection","find","each","slug","some","push","serverCollectionConfig","config","sharedArgs","collectionSlug","undefined","dataType","docs","columnsToUse","unshift","accessor","active","disabled","hidden","Heading","t","renderedCells","map","doc","i","_jsx","size","relationTo","labels","singular","_","rowData","className","filter","join","_jsxs","totalDocs","appearance","splice"],"sources":["../../src/utilities/renderTable.tsx"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  ClientConfig,\n  ClientField,\n  CollectionConfig,\n  Column,\n  ColumnPreference,\n  Field,\n  ImportMap,\n  ListQuery,\n  PaginatedDocs,\n  Payload,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedFieldsPermissions,\n  ViewTypes,\n} from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport { fieldAffectsData, fieldIsHiddenOrDisabled } from 'payload/shared'\nimport React from 'react'\n\nimport type { BuildColumnStateArgs } from '../providers/TableColumns/buildColumnState/index.js'\n\nimport { RenderServerComponent } from '../elements/RenderServerComponent/index.js'\nimport {\n  TableSectionContent,\n  TableSectionHeader,\n  TableSectionRoot,\n} from '../elements/TableSection/index.js'\nimport {\n  GroupByHeader,\n  GroupByPageControls,\n  OrderableTable,\n  Pill,\n  SelectAll,\n  SelectionProvider,\n  SelectRow,\n  SortHeader,\n  SortRow,\n  Table,\n  // eslint-disable-next-line payload/no-imports-from-exports-dir -- these MUST reference the exports dir: https://github.com/payloadcms/payload/issues/12002#issuecomment-2791493587\n} from '../exports/client/index.js'\nimport { filterFieldsWithPermissions } from '../providers/TableColumns/buildColumnState/filterFieldsWithPermissions.js'\nimport { buildColumnState } from '../providers/TableColumns/buildColumnState/index.js'\n\nexport const renderFilters = (\n  fields: Field[],\n  importMap: ImportMap,\n): Map<string, React.ReactNode> =>\n  fields.reduce(\n    (acc, field) => {\n      if (fieldIsHiddenOrDisabled(field)) {\n        return acc\n      }\n\n      if ('name' in field && field.admin?.components?.Filter) {\n        acc.set(\n          field.name,\n          RenderServerComponent({\n            Component: field.admin.components?.Filter,\n            importMap,\n          }),\n        )\n      }\n\n      return acc\n    },\n    new Map() as Map<string, React.ReactNode>,\n  )\n\nexport const renderTable = ({\n  clientCollectionConfig,\n  clientConfig,\n  collectionConfig,\n  collections,\n  columns,\n  customCellProps,\n  data,\n  enableRowSelections,\n  fieldPermissions,\n  groupByFieldPath,\n  groupByValue,\n  heading,\n  i18n,\n  key = 'table',\n  orderableFieldName,\n  payload,\n  query,\n  renderRowTypes,\n  req,\n  showHeading,\n  tableAppearance,\n  useAsTitle,\n  viewType,\n}: {\n  clientCollectionConfig?: ClientCollectionConfig\n  clientConfig?: ClientConfig\n  collectionConfig?: SanitizedCollectionConfig\n  collections?: string[]\n  columns: ColumnPreference[]\n  customCellProps?: Record<string, unknown>\n  data?: PaginatedDocs | undefined\n  drawerSlug?: string\n  enableRowSelections: boolean\n  fieldPermissions?: SanitizedFieldsPermissions\n  groupByFieldPath?: string\n  groupByValue?: string\n  heading?: string\n  i18n: I18nClient\n  key?: string\n  orderableFieldName: string\n  payload: Payload\n  query?: ListQuery\n  renderRowTypes?: boolean\n  req?: PayloadRequest\n  /** Show heading without requiring full groupBy context */\n  showHeading?: boolean\n  tableAppearance?: 'condensed' | 'default'\n  useAsTitle: CollectionConfig['admin']['useAsTitle']\n  viewType?: ViewTypes\n}): {\n  columnState: Column[]\n  Table: React.ReactNode\n} => {\n  // Ensure that columns passed as args comply with the field config, i.e. `hidden`, `disabled.column`, etc.\n\n  let columnState: Column[]\n  let clientFields: ClientField[] = clientCollectionConfig?.fields || []\n  let serverFields: Field[] = collectionConfig?.fields || []\n  const isPolymorphic = collections\n\n  const isGroupingBy = Boolean(collectionConfig?.admin?.groupBy && query?.groupBy)\n\n  if (isPolymorphic) {\n    clientFields = []\n    serverFields = []\n\n    for (const collection of collections) {\n      const clientCollectionConfig = clientConfig.collections.find(\n        (each) => each.slug === collection,\n      )\n\n      for (const field of filterFieldsWithPermissions({\n        fieldPermissions,\n        fields: clientCollectionConfig.fields,\n      })) {\n        if (fieldAffectsData(field)) {\n          if (clientFields.some((each) => fieldAffectsData(each) && each.name === field.name)) {\n            continue\n          }\n        }\n\n        clientFields.push(field)\n      }\n\n      const serverCollectionConfig = payload.collections[collection].config\n\n      for (const field of filterFieldsWithPermissions<Field>({\n        fieldPermissions,\n        fields: serverCollectionConfig.fields,\n      })) {\n        if (fieldAffectsData(field)) {\n          if (serverFields.some((each) => fieldAffectsData(each) && each.name === field.name)) {\n            continue\n          }\n        }\n\n        serverFields.push(field)\n      }\n    }\n  }\n\n  const sharedArgs: Pick<\n    BuildColumnStateArgs,\n    | 'clientFields'\n    | 'columns'\n    | 'customCellProps'\n    | 'enableRowSelections'\n    | 'fieldPermissions'\n    | 'i18n'\n    | 'payload'\n    | 'req'\n    | 'serverFields'\n    | 'useAsTitle'\n    | 'viewType'\n  > = {\n    clientFields,\n    columns,\n    enableRowSelections,\n    fieldPermissions,\n    i18n,\n    // sortColumnProps,\n    customCellProps,\n    payload,\n    req,\n    serverFields,\n    useAsTitle,\n    viewType,\n  }\n\n  if (isPolymorphic) {\n    columnState = buildColumnState({\n      ...sharedArgs,\n      collectionSlug: undefined,\n      dataType: 'polymorphic',\n      docs: data?.docs || [],\n    })\n  } else {\n    columnState = buildColumnState({\n      ...sharedArgs,\n      collectionSlug: clientCollectionConfig.slug,\n      dataType: 'monomorphic',\n      docs: data?.docs || [],\n    })\n  }\n\n  const columnsToUse = [...columnState]\n\n  if (renderRowTypes) {\n    columnsToUse.unshift({\n      accessor: 'collection',\n      active: true,\n      field: {\n        admin: {\n          disabled: true,\n        },\n        hidden: true,\n      },\n      Heading: i18n.t('version:type'),\n      renderedCells: (data?.docs || []).map((doc, i) => (\n        <Pill key={i} size=\"small\">\n          {getTranslation(\n            collections\n              ? payload.collections[doc.relationTo].config.labels.singular\n              : clientCollectionConfig.labels.singular,\n            i18n,\n          )}\n        </Pill>\n      )),\n    } as Column)\n  }\n\n  if (enableRowSelections) {\n    columnsToUse.unshift({\n      accessor: '_select',\n      active: true,\n      field: {\n        admin: {\n          disabled: true,\n        },\n        hidden: true,\n      },\n      Heading: <SelectAll />,\n      renderedCells: (data?.docs || []).map((_, i) => (\n        <SelectRow key={i} rowData={data?.docs[i]} />\n      )),\n    } as Column)\n  }\n\n  if (isGroupingBy) {\n    return {\n      columnState,\n      // key is required since Next.js 15.2.0 to prevent React key error\n      Table: (\n        <TableSectionRoot\n          className={['table-wrap', groupByValue !== undefined && `table-wrap--group-by`]\n            .filter(Boolean)\n            .join(' ')}\n          data-group-id={groupByValue}\n          key={key}\n        >\n          <SelectionProvider docs={data?.docs || []} totalDocs={data?.totalDocs || 0}>\n            <TableSectionHeader heading={heading}>\n              <GroupByHeader\n                collectionConfig={clientCollectionConfig}\n                groupByFieldPath={groupByFieldPath}\n                groupByValue={groupByValue}\n                heading={heading}\n              />\n              <GroupByPageControls data={data} groupByValue={groupByValue} />\n            </TableSectionHeader>\n            <TableSectionContent>\n              <Table appearance={tableAppearance} columns={columnsToUse} data={data?.docs || []} />\n            </TableSectionContent>\n          </SelectionProvider>\n        </TableSectionRoot>\n      ),\n    }\n  }\n\n  if (!orderableFieldName) {\n    return {\n      columnState,\n      // key is required since Next.js 15.2.0 to prevent React key error\n      Table: (\n        <TableSectionRoot className=\"table-wrap\" key={key}>\n          {showHeading && heading && (\n            <TableSectionHeader>\n              <h4>{heading}</h4>\n            </TableSectionHeader>\n          )}\n          <TableSectionContent>\n            <Table appearance={tableAppearance} columns={columnsToUse} data={data?.docs || []} />\n          </TableSectionContent>\n        </TableSectionRoot>\n      ),\n    }\n  }\n\n  // Insert after _select column (index 1) so order is: _select, _dragHandle, ...rest\n  columnsToUse.splice(enableRowSelections ? 1 : 0, 0, {\n    accessor: '_dragHandle',\n    active: true,\n    field: {\n      admin: {\n        disabled: true,\n      },\n      hidden: true,\n    },\n    Heading: <SortHeader />,\n    renderedCells: (data?.docs || []).map((_, i) => <SortRow key={i} />),\n  } as Column)\n\n  return {\n    columnState,\n    // key is required since Next.js 15.2.0 to prevent React key error\n    Table: (\n      <TableSectionRoot className=\"table-wrap\" key={key}>\n        <TableSectionContent>\n          <OrderableTable\n            appearance={tableAppearance}\n            collection={clientCollectionConfig}\n            columns={columnsToUse}\n            data={data?.docs || []}\n          />\n        </TableSectionContent>\n      </TableSectionRoot>\n    ),\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/utilities/resolveFilterOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveFilterOptions.d.ts","sourceRoot":"","sources":["../../src/utilities/resolveFilterOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEvF,eAAO,MAAM,oBAAoB,kBAChB,aAAa,WACnB;IAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,KAClF,OAAO,CAAC,qBAAqB,CA4B/B,CAAA"}
+{"version":3,"file":"resolveFilterOptions.d.ts","sourceRoot":"","sources":["../../src/utilities/resolveFilterOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEvF,eAAO,MAAM,oBAAoB,GAC/B,eAAe,aAAa,EAC5B,SAAS;IAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,KAClF,OAAO,CAAC,qBAAqB,CA4B/B,CAAA"}

package/dist/utilities/sanitizeFilterOptionsQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitizeFilterOptionsQuery.d.ts","sourceRoot":"","sources":["../../src/utilities/sanitizeFilterOptionsQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,eAAO,MAAM,0BAA0B,UAAW,KAAK,KAAG,KAqBzD,CAAA"}
+{"version":3,"file":"sanitizeFilterOptionsQuery.d.ts","sourceRoot":"","sources":["../../src/utilities/sanitizeFilterOptionsQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,eAAO,MAAM,0BAA0B,GAAI,OAAO,KAAK,KAAG,KAqBzD,CAAA"}

package/dist/utilities/scrollToID.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scrollToID.d.ts","sourceRoot":"","sources":["../../src/utilities/scrollToID.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,IAUvC,CAAA"}
+{"version":3,"file":"scrollToID.d.ts","sourceRoot":"","sources":["../../src/utilities/scrollToID.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,IAAI,MAAM,KAAG,IAUvC,CAAA"}

package/dist/utilities/setsAreEqual.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setsAreEqual.d.ts","sourceRoot":"","sources":["../../src/utilities/setsAreEqual.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,YAEvD,CAAA"}
+{"version":3,"file":"setsAreEqual.d.ts","sourceRoot":"","sources":["../../src/utilities/setsAreEqual.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,YAEvD,CAAA"}

package/dist/utilities/traverseForLocalizedFields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"traverseForLocalizedFields.d.ts","sourceRoot":"","sources":["../../src/utilities/traverseForLocalizedFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEjD,eAAO,MAAM,0BAA0B,WAAY,WAAW,EAAE,GAAG,KAAK,EAAE,KAAG,OA0C5E,CAAA"}
+{"version":3,"file":"traverseForLocalizedFields.d.ts","sourceRoot":"","sources":["../../src/utilities/traverseForLocalizedFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEjD,eAAO,MAAM,0BAA0B,GAAI,QAAQ,WAAW,EAAE,GAAG,KAAK,EAAE,KAAG,OA0C5E,CAAA"}

package/dist/utilities/upsertPreferences.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"upsertPreferences.d.ts","sourceRoot":"","sources":["../../src/utilities/upsertPreferences.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAO7E,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,EAAE,EAAE,qBAAqB,GAAG,SAAS,CAAA;IACrC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;CACtB,CAAA;AAED,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,GAAG,SAAS,KAAK,CAAC,CAAA;AAQ5E,eAAO,MAAM,cAAc,GAClB,CAAC,OACD,MAAM,WACF,OAAO,UACR,qBAAqB,YACnB,MAAM,KACf,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CA+B5B,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAU,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,oDAK/E;IACD,WAAW,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,CAAC,CAAA;IACnF,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,cAAc,CAAA;IACnB,KAAK,EAAE,CAAC,CAAA;CACT,KAAG,OAAO,CAAC,CAAC,CA0DZ,CAAA"}
+{"version":3,"file":"upsertPreferences.d.ts","sourceRoot":"","sources":["../../src/utilities/upsertPreferences.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAO7E,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,EAAE,EAAE,qBAAqB,GAAG,SAAS,CAAA;IACrC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;CACtB,CAAA;AAED,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,GAAG,SAAS,KAAK,CAAC,CAAA;AAQ5E,eAAO,MAAM,cAAc,GAClB,CAAC,OACD,MAAM,WACF,OAAO,UACR,qBAAqB,YACnB,MAAM,KACf,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CA+B5B,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAU,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,EAAE,kDAKjF;IACD,WAAW,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,CAAC,CAAA;IACnF,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,cAAc,CAAA;IACnB,KAAK,EAAE,CAAC,CAAA;CACT,KAAG,OAAO,CAAC,CAAC,CA0DZ,CAAA"}

package/dist/views/Edit/Auth/APIKey.js

@@ -126,10 +126,11 @@ export const APIKey = ({
         }), /*#__PURE__*/_jsx("div", {
           className: `${baseClass}__toggle-button-wrap`,
           children: /*#__PURE__*/_jsx(Button, {
-            buttonStyle: "none",
+            buttonStyle: "ghost",
             className: `${baseClass}__toggle-button`,
             icon: /*#__PURE__*/_jsx(EyeIcon, {
-              active: showKey
+              active: showKey,
+              size: 24
             }),
             onClick: () => setShowKey(prev => !prev)
           })

package/dist/views/Edit/Auth/APIKey.js.map

@@ -1 +1 @@
-{"version":3,"file":"APIKey.js","names":["getTranslation","text","React","useEffect","useMemo","useState","v4","uuidv4","Button","CopyToClipboard","GenerateConfirmation","useFormFields","useField","EyeIcon","useConfig","useDocumentInfo","useTranslation","path","baseClass","fieldBaseClass","APIKey","enabled","readOnly","initialAPIKey","highlightedField","setHighlightedField","showKey","setShowKey","i18n","t","config","getEntityConfig","collectionSlug","apiKey","fields","apiKeyField","find","field","name","validate","val","type","blockData","data","event","maxLength","minLength","preferences","req","payload","siblingData","apiKeyValue","value","apiKeyLabel","label","APIKeyLabel","_jsxs","className","htmlFor","_jsx","fieldType","highlightField","setTimeout","setValue","Fragment","filter","Boolean","join","undefined","disabled","id","buttonStyle","icon","active","onClick","prev","setKey"],"sources":["../../../../src/views/Edit/Auth/APIKey.tsx"],"sourcesContent":["'use client'\nimport type { PayloadRequest, TextFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { text } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { CopyToClipboard } from '../../../elements/CopyToClipboard/index.js'\nimport { GenerateConfirmation } from '../../../elements/GenerateConfirmation/index.js'\nimport { useFormFields } from '../../../forms/Form/context.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nconst path = 'apiKey'\nconst baseClass = 'api-key'\nconst fieldBaseClass = 'field-type'\n\nexport const APIKey: React.FC<{ readonly enabled: boolean; readonly readOnly?: boolean }> = ({\n  enabled,\n  readOnly,\n}) => {\n  const [initialAPIKey] = useState(uuidv4())\n  const [highlightedField, setHighlightedField] = useState(false)\n  const [showKey, setShowKey] = useState(false)\n  const { i18n, t } = useTranslation()\n  const { config, getEntityConfig } = useConfig()\n  const { collectionSlug } = useDocumentInfo()\n\n  const apiKey = useFormFields(([fields]) => (fields && fields[path]) || null)\n\n  const apiKeyField: TextFieldClient = getEntityConfig({ collectionSlug })?.fields?.find(\n    (field) => 'name' in field && field.name === 'apiKey',\n  ) as TextFieldClient\n\n  const validate = (val) =>\n    text(val, {\n      name: 'apiKey',\n      type: 'text',\n      blockData: {},\n      data: {},\n      event: 'onChange',\n      maxLength: 48,\n      minLength: 24,\n      path: ['apiKey'],\n      preferences: { fields: {} },\n      req: {\n        payload: {\n          config,\n        },\n        t,\n      } as unknown as PayloadRequest,\n      siblingData: {},\n    })\n\n  const apiKeyValue = apiKey?.value\n\n  const apiKeyLabel = useMemo(() => {\n    let label: Record<string, string> | string = 'API Key'\n\n    if (apiKeyField?.label) {\n      label = apiKeyField.label\n    }\n\n    return getTranslation(label, i18n)\n  }, [apiKeyField, i18n])\n\n  const APIKeyLabel = useMemo(\n    () => (\n      <label className={`${baseClass}__label field-label`} htmlFor=\"apiKey\">\n        <span>{apiKeyLabel}</span>\n        <CopyToClipboard value={apiKeyValue as string} />\n      </label>\n    ),\n    [apiKeyLabel, apiKeyValue],\n  )\n\n  const fieldType = useField({\n    path: 'apiKey',\n    validate,\n  })\n\n  const highlightField = () => {\n    if (highlightedField) {\n      setHighlightedField(false)\n    }\n    setTimeout(() => {\n      setHighlightedField(true)\n    }, 1)\n  }\n\n  const { setValue, value } = fieldType\n\n  useEffect(() => {\n    if (!apiKeyValue && enabled) {\n      setValue(initialAPIKey)\n    }\n    if (!enabled && apiKeyValue) {\n      setValue(null)\n    }\n  }, [apiKeyValue, enabled, setValue, initialAPIKey])\n\n  useEffect(() => {\n    if (highlightedField) {\n      setTimeout(() => {\n        setHighlightedField(false)\n      }, 10000)\n    }\n  }, [highlightedField])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>\n        {APIKeyLabel}\n        <div className={`${baseClass}__input-wrap`}>\n          <input\n            aria-label={apiKeyLabel}\n            className={highlightedField ? 'highlight' : undefined}\n            disabled\n            id=\"apiKey\"\n            name=\"apiKey\"\n            type={showKey ? 'text' : 'password'}\n            value={(value as string) || ''}\n          />\n          <div className={`${baseClass}__toggle-button-wrap`}>\n            <Button\n              buttonStyle=\"none\"\n              className={`${baseClass}__toggle-button`}\n              icon={<EyeIcon active={showKey} />}\n              onClick={() => setShowKey((prev) => !prev)}\n            />\n          </div>\n        </div>\n      </div>\n      {!readOnly && (\n        <GenerateConfirmation highlightField={highlightField} setKey={() => setValue(uuidv4())} />\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,SAASC,IAAI,QAAQ;AACrB,OAAOC,KAAA,IAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ;AACpD,SAASC,EAAA,IAAMC,MAAM,QAAQ;AAE7B,SAASC,MAAM,QAAQ;AACvB,SAASC,eAAe,QAAQ;AAChC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,OAAO,QAAQ;AACxB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAE/B,MAAMC,IAAA,GAAO;AACb,MAAMC,SAAA,GAAY;AAClB,MAAMC,cAAA,GAAiB;AAEvB,OAAO,MAAMC,MAAA,GAA+EA,CAAC;EAC3FC,OAAO;EACPC;AAAQ,CACT;EACC,MAAM,CAACC,aAAA,CAAc,GAAGlB,QAAA,CAASE,MAAA;EACjC,MAAM,CAACiB,gBAAA,EAAkBC,mBAAA,CAAoB,GAAGpB,QAAA,CAAS;EACzD,MAAM,CAACqB,OAAA,EAASC,UAAA,CAAW,GAAGtB,QAAA,CAAS;EACvC,MAAM;IAAEuB,IAAI;IAAEC;EAAC,CAAE,GAAGb,cAAA;EACpB,MAAM;IAAEc,MAAM;IAAEC;EAAe,CAAE,GAAGjB,SAAA;EACpC,MAAM;IAAEkB;EAAc,CAAE,GAAGjB,eAAA;EAE3B,MAAMkB,MAAA,GAAStB,aAAA,CAAc,CAAC,CAACuB,MAAA,CAAO,KAAKA,MAAC,IAAUA,MAAM,CAACjB,IAAA,CAAK,IAAK;EAEvE,MAAMkB,WAAA,GAA+BJ,eAAA,CAAgB;IAAEC;EAAe,IAAIE,MAAA,EAAQE,IAAA,CAC/EC,KAAA,IAAU,UAAUA,KAAA,IAASA,KAAA,CAAMC,IAAI,KAAK;EAG/C,MAAMC,QAAA,GAAYC,GAAA,IAChBvC,IAAA,CAAKuC,GAAA,EAAK;IACRF,IAAA,EAAM;IACNG,IAAA,EAAM;IACNC,SAAA,EAAW,CAAC;IACZC,IAAA,EAAM,CAAC;IACPC,KAAA,EAAO;IACPC,SAAA,EAAW;IACXC,SAAA,EAAW;IACX7B,IAAA,EAAM,CAAC,SAAS;IAChB8B,WAAA,EAAa;MAAEb,MAAA,EAAQ,CAAC;IAAE;IAC1Bc,GAAA,EAAK;MACHC,OAAA,EAAS;QACPnB;MACF;MACAD;IACF;IACAqB,WAAA,EAAa,CAAC;EAChB;EAEF,MAAMC,WAAA,GAAclB,MAAA,EAAQmB,KAAA;EAE5B,MAAMC,WAAA,GAAcjD,OAAA,CAAQ;IAC1B,IAAIkD,KAAA,GAAyC;IAE7C,IAAInB,WAAA,EAAamB,KAAA,EAAO;MACtBA,KAAA,GAAQnB,WAAA,CAAYmB,KAAK;IAC3B;IAEA,OAAOtD,cAAA,CAAesD,KAAA,EAAO1B,IAAA;EAC/B,GAAG,CAACO,WAAA,EAAaP,IAAA,CAAK;EAEtB,MAAM2B,WAAA,GAAcnD,OAAA,CAClB,mBACEoD,KAAA,CAAC;IAAMC,SAAA,EAAW,GAAGvC,SAAA,qBAA8B;IAAEwC,OAAA,EAAQ;4BAC3DC,IAAA,CAAC;gBAAMN;qBACPM,IAAA,CAAClD,eAAA;MAAgB2C,KAAA,EAAOD;;MAG5B,CAACE,WAAA,EAAaF,WAAA,CAAY;EAG5B,MAAMS,SAAA,GAAYhD,QAAA,CAAS;IACzBK,IAAA,EAAM;IACNsB;EACF;EAEA,MAAMsB,cAAA,GAAiBA,CAAA;IACrB,IAAIrC,gBAAA,EAAkB;MACpBC,mBAAA,CAAoB;IACtB;IACAqC,UAAA,CAAW;MACTrC,mBAAA,CAAoB;IACtB,GAAG;EACL;EAEA,MAAM;IAAEsC,QAAQ;IAAEX;EAAK,CAAE,GAAGQ,SAAA;EAE5BzD,SAAA,CAAU;IACR,IAAI,CAACgD,WAAA,IAAe9B,OAAA,EAAS;MAC3B0C,QAAA,CAASxC,aAAA;IACX;IACA,IAAI,CAACF,OAAA,IAAW8B,WAAA,EAAa;MAC3BY,QAAA,CAAS;IACX;EACF,GAAG,CAACZ,WAAA,EAAa9B,OAAA,EAAS0C,QAAA,EAAUxC,aAAA,CAAc;EAElDpB,SAAA,CAAU;IACR,IAAIqB,gBAAA,EAAkB;MACpBsC,UAAA,CAAW;QACTrC,mBAAA,CAAoB;MACtB,GAAG;IACL;EACF,GAAG,CAACD,gBAAA,CAAiB;EAErB,IAAI,CAACH,OAAA,EAAS;IACZ,OAAO;EACT;EAEA,oBACEmC,KAAA,CAACtD,KAAA,CAAM8D,QAAQ;4BACbR,KAAA,CAAC;MAAIC,SAAA,EAAW,CAACtC,cAAA,EAAgB,WAAW,YAAY,CAAC8C,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;iBAC3EZ,WAAA,E,aACDC,KAAA,CAAC;QAAIC,SAAA,EAAW,GAAGvC,SAAA,cAAuB;gCACxCyC,IAAA,CAAC;UACC,cAAYN,WAAA;UACZI,SAAA,EAAWjC,gBAAA,GAAmB,cAAc4C,SAAA;UAC5CC,QAAQ;UACRC,EAAA,EAAG;UACHhC,IAAA,EAAK;UACLG,IAAA,EAAMf,OAAA,GAAU,SAAS;UACzB0B,KAAA,EAAOA,KAAC,IAAoB;yBAE9BO,IAAA,CAAC;UAAIF,SAAA,EAAW,GAAGvC,SAAA,sBAA+B;oBAChD,aAAAyC,IAAA,CAACnD,MAAA;YACC+D,WAAA,EAAY;YACZd,SAAA,EAAW,GAAGvC,SAAA,iBAA0B;YACxCsD,IAAA,eAAMb,IAAA,CAAC9C,OAAA;cAAQ4D,MAAA,EAAQ/C;;YACvBgD,OAAA,EAASA,CAAA,KAAM/C,UAAA,CAAYgD,IAAA,IAAS,CAACA,IAAA;;;;QAK5C,CAACrD,QAAA,iBACAqC,IAAA,CAACjD,oBAAA;MAAqBmD,cAAA,EAAgBA,cAAA;MAAgBe,MAAA,EAAQA,CAAA,KAAMb,QAAA,CAASxD,MAAA;;;AAIrF","ignoreList":[]}
+{"version":3,"file":"APIKey.js","names":["getTranslation","text","React","useEffect","useMemo","useState","v4","uuidv4","Button","CopyToClipboard","GenerateConfirmation","useFormFields","useField","EyeIcon","useConfig","useDocumentInfo","useTranslation","path","baseClass","fieldBaseClass","APIKey","enabled","readOnly","initialAPIKey","highlightedField","setHighlightedField","showKey","setShowKey","i18n","t","config","getEntityConfig","collectionSlug","apiKey","fields","apiKeyField","find","field","name","validate","val","type","blockData","data","event","maxLength","minLength","preferences","req","payload","siblingData","apiKeyValue","value","apiKeyLabel","label","APIKeyLabel","_jsxs","className","htmlFor","_jsx","fieldType","highlightField","setTimeout","setValue","Fragment","filter","Boolean","join","undefined","disabled","id","buttonStyle","icon","active","size","onClick","prev","setKey"],"sources":["../../../../src/views/Edit/Auth/APIKey.tsx"],"sourcesContent":["'use client'\nimport type { PayloadRequest, TextFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { text } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { CopyToClipboard } from '../../../elements/CopyToClipboard/index.js'\nimport { GenerateConfirmation } from '../../../elements/GenerateConfirmation/index.js'\nimport { useFormFields } from '../../../forms/Form/context.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nconst path = 'apiKey'\nconst baseClass = 'api-key'\nconst fieldBaseClass = 'field-type'\n\nexport const APIKey: React.FC<{ readonly enabled: boolean; readonly readOnly?: boolean }> = ({\n  enabled,\n  readOnly,\n}) => {\n  const [initialAPIKey] = useState(uuidv4())\n  const [highlightedField, setHighlightedField] = useState(false)\n  const [showKey, setShowKey] = useState(false)\n  const { i18n, t } = useTranslation()\n  const { config, getEntityConfig } = useConfig()\n  const { collectionSlug } = useDocumentInfo()\n\n  const apiKey = useFormFields(([fields]) => (fields && fields[path]) || null)\n\n  const apiKeyField: TextFieldClient = getEntityConfig({ collectionSlug })?.fields?.find(\n    (field) => 'name' in field && field.name === 'apiKey',\n  ) as TextFieldClient\n\n  const validate = (val) =>\n    text(val, {\n      name: 'apiKey',\n      type: 'text',\n      blockData: {},\n      data: {},\n      event: 'onChange',\n      maxLength: 48,\n      minLength: 24,\n      path: ['apiKey'],\n      preferences: { fields: {} },\n      req: {\n        payload: {\n          config,\n        },\n        t,\n      } as unknown as PayloadRequest,\n      siblingData: {},\n    })\n\n  const apiKeyValue = apiKey?.value\n\n  const apiKeyLabel = useMemo(() => {\n    let label: Record<string, string> | string = 'API Key'\n\n    if (apiKeyField?.label) {\n      label = apiKeyField.label\n    }\n\n    return getTranslation(label, i18n)\n  }, [apiKeyField, i18n])\n\n  const APIKeyLabel = useMemo(\n    () => (\n      <label className={`${baseClass}__label field-label`} htmlFor=\"apiKey\">\n        <span>{apiKeyLabel}</span>\n        <CopyToClipboard value={apiKeyValue as string} />\n      </label>\n    ),\n    [apiKeyLabel, apiKeyValue],\n  )\n\n  const fieldType = useField({\n    path: 'apiKey',\n    validate,\n  })\n\n  const highlightField = () => {\n    if (highlightedField) {\n      setHighlightedField(false)\n    }\n    setTimeout(() => {\n      setHighlightedField(true)\n    }, 1)\n  }\n\n  const { setValue, value } = fieldType\n\n  useEffect(() => {\n    if (!apiKeyValue && enabled) {\n      setValue(initialAPIKey)\n    }\n    if (!enabled && apiKeyValue) {\n      setValue(null)\n    }\n  }, [apiKeyValue, enabled, setValue, initialAPIKey])\n\n  useEffect(() => {\n    if (highlightedField) {\n      setTimeout(() => {\n        setHighlightedField(false)\n      }, 10000)\n    }\n  }, [highlightedField])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>\n        {APIKeyLabel}\n        <div className={`${baseClass}__input-wrap`}>\n          <input\n            aria-label={apiKeyLabel}\n            className={highlightedField ? 'highlight' : undefined}\n            disabled\n            id=\"apiKey\"\n            name=\"apiKey\"\n            type={showKey ? 'text' : 'password'}\n            value={(value as string) || ''}\n          />\n          <div className={`${baseClass}__toggle-button-wrap`}>\n            <Button\n              buttonStyle=\"ghost\"\n              className={`${baseClass}__toggle-button`}\n              icon={<EyeIcon active={showKey} size={24} />}\n              onClick={() => setShowKey((prev) => !prev)}\n            />\n          </div>\n        </div>\n      </div>\n      {!readOnly && (\n        <GenerateConfirmation highlightField={highlightField} setKey={() => setValue(uuidv4())} />\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Edit/Auth/index.css

@@ -0,0 +1,138 @@
+@layer payload-default {
+  .auth-fields,
+  .auth-fields__body,
+  .auth-fields__api-key,
+  .auth-fields__changing-password {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+  }
+
+  .auth-fields {
+    margin-bottom: var(--spacer-3);
+  }
+
+  .auth-fields__card {
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg);
+    overflow: clip;
+  }
+
+  .auth-fields__header,
+  .auth-fields__controls {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacer-2));
+    flex-wrap: wrap;
+  }
+
+  .auth-fields__header {
+    justify-content: space-between;
+    padding: var(--spacer-2) var(--spacer-3);
+    background: var(--color-bg-secondary);
+    box-shadow: inset 0 calc(var(--stroke-width-small) * -1) 0 var(--color-border);
+  }
+
+  .auth-fields__title {
+    margin: 0;
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+  }
+
+  .auth-fields__body {
+    padding: var(--spacer-3);
+  }
+
+  .auth-fields__body > .field-type.checkbox {
+    min-height: var(--spacer-4);
+    justify-content: center;
+  }
+
+  .auth-fields__body > .field-type.checkbox label.field-label,
+  .auth-fields__api-key > .field-type.checkbox label.field-label {
+    font-weight: var(--text-body-medium-font-weight);
+  }
+
+  .auth-fields .btn {
+    margin: 0;
+  }
+
+  .auth-fields__controls .btn.btn--style-secondary {
+    background: transparent;
+  }
+
+  .auth-fields .field-type.api-key input,
+  .auth-fields .api-key__toggle-button {
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .auth-fields .field-type.api-key input {
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--color-text);
+    height: auto;
+    min-width: 0;
+    min-height: unset;
+    outline: none;
+    padding: 0 var(--spacer-2);
+    padding-inline-end: calc(var(--spacer-4) + var(--spacer-3));
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  .auth-fields .api-key__input-wrap {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--radius-medium);
+    min-height: var(--spacer-5);
+  }
+
+  .auth-fields .api-key__input-wrap:focus-within {
+    border-color: var(--color-border-selected);
+  }
+
+  .auth-fields .api-key__toggle-button-wrap {
+    position: absolute;
+    top: 50%;
+    right: calc(var(--spacer-2) - 5px); /* 8px input padding - 5px icon viewBox internal padding */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-50%);
+  }
+
+  .auth-fields .api-key__toggle-button {
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    border: none;
+    color: var(--color-icon-secondary);
+    margin: 0;
+    padding: 0;
+  }
+
+  .auth-fields .api-key__toggle-button:hover {
+    color: var(--color-icon);
+  }
+
+  .auth-fields .api-key__toggle-button.btn--style-ghost:hover:not(.btn--disabled),
+  .auth-fields .api-key__toggle-button.btn--style-ghost:active:not(.btn--disabled) {
+    background-color: transparent;
+  }
+
+  .auth-fields__api-key > .btn.btn--style-secondary {
+    align-self: flex-start;
+  }
+}

package/dist/views/Edit/Auth/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { Props } from './types.js';
-import './index.scss';
+import './index.css';
 export declare const Auth: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/views/Edit/Auth/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAGlF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAWvC,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuRhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAGlF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAWvC,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0ShC,CAAA"}