@payloadcms/ui 3.0.0-canary.96477cf → 3.0.0-canary.98e0119

package/dist/utilities/mergeListSearchAndWhere.js

@@ -0,0 +1,47 @@
+const isEmptyObject = obj => Object.keys(obj).length === 0;
+export const hoistQueryParamsToAnd = (currentWhere, incomingWhere) => {
+  if (isEmptyObject(incomingWhere)) {
+    return currentWhere;
+  }
+  if (isEmptyObject(currentWhere)) {
+    return incomingWhere;
+  }
+  if ('and' in currentWhere) {
+    currentWhere.and.push(incomingWhere);
+  } else if ('or' in currentWhere) {
+    currentWhere = {
+      and: [currentWhere, incomingWhere]
+    };
+  } else {
+    currentWhere = {
+      and: [currentWhere, incomingWhere]
+    };
+  }
+  return currentWhere;
+};
+export const mergeListSearchAndWhere = ({
+  collectionConfig,
+  search,
+  where
+}) => {
+  if (search) {
+    let copyOfWhere = {
+      ...(where || {})
+    };
+    const searchAsConditions = (collectionConfig.admin.listSearchableFields || [collectionConfig.admin?.useAsTitle || 'id']).map(fieldName => ({
+      [fieldName]: {
+        like: search
+      }
+    }));
+    if (searchAsConditions.length > 0) {
+      copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, {
+        or: searchAsConditions
+      });
+    }
+    if (!isEmptyObject(copyOfWhere)) {
+      where = copyOfWhere;
+    }
+  }
+  return where;
+};
+//# sourceMappingURL=mergeListSearchAndWhere.js.map

package/dist/utilities/mergeListSearchAndWhere.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeListSearchAndWhere.js","names":["isEmptyObject","obj","Object","keys","length","hoistQueryParamsToAnd","currentWhere","incomingWhere","and","push","mergeListSearchAndWhere","collectionConfig","search","where","copyOfWhere","searchAsConditions","admin","listSearchableFields","useAsTitle","map","fieldName","like","or"],"sources":["../../src/utilities/mergeListSearchAndWhere.ts"],"sourcesContent":["import type { ClientCollectionConfig, SanitizedCollectionConfig, Where } from 'payload'\n\nconst isEmptyObject = (obj: object) => Object.keys(obj).length === 0\n\nexport const hoistQueryParamsToAnd = (currentWhere: Where, incomingWhere: Where) => {\n  if (isEmptyObject(incomingWhere)) {\n    return currentWhere\n  }\n\n  if (isEmptyObject(currentWhere)) {\n    return incomingWhere\n  }\n\n  if ('and' in currentWhere) {\n    currentWhere.and.push(incomingWhere)\n  } else if ('or' in currentWhere) {\n    currentWhere = {\n      and: [currentWhere, incomingWhere],\n    }\n  } else {\n    currentWhere = {\n      and: [currentWhere, incomingWhere],\n    }\n  }\n\n  return currentWhere\n}\n\ntype Args = {\n  collectionConfig: ClientCollectionConfig | SanitizedCollectionConfig\n  search: string\n  where: Where\n}\n\nexport const mergeListSearchAndWhere = ({ collectionConfig, search, where }: Args): Where => {\n  if (search) {\n    let copyOfWhere = { ...(where || {}) }\n\n    const searchAsConditions = (\n      collectionConfig.admin.listSearchableFields || [collectionConfig.admin?.useAsTitle || 'id']\n    ).map((fieldName) => ({\n      [fieldName]: {\n        like: search,\n      },\n    }))\n\n    if (searchAsConditions.length > 0) {\n      copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, {\n        or: searchAsConditions,\n      })\n    }\n\n    if (!isEmptyObject(copyOfWhere)) {\n      where = copyOfWhere\n    }\n  }\n\n  return where\n}\n"],"mappings":"AAEA,MAAMA,aAAA,GAAiBC,GAAA,IAAgBC,MAAA,CAAOC,IAAI,CAACF,GAAA,EAAKG,MAAM,KAAK;AAEnE,OAAO,MAAMC,qBAAA,GAAwBA,CAACC,YAAA,EAAqBC,aAAA;EACzD,IAAIP,aAAA,CAAcO,aAAA,GAAgB;IAChC,OAAOD,YAAA;EACT;EAEA,IAAIN,aAAA,CAAcM,YAAA,GAAe;IAC/B,OAAOC,aAAA;EACT;EAEA,IAAI,SAASD,YAAA,EAAc;IACzBA,YAAA,CAAaE,GAAG,CAACC,IAAI,CAACF,aAAA;EACxB,OAAO,IAAI,QAAQD,YAAA,EAAc;IAC/BA,YAAA,GAAe;MACbE,GAAA,EAAK,CAACF,YAAA,EAAcC,aAAA;IACtB;EACF,OAAO;IACLD,YAAA,GAAe;MACbE,GAAA,EAAK,CAACF,YAAA,EAAcC,aAAA;IACtB;EACF;EAEA,OAAOD,YAAA;AACT;AAQA,OAAO,MAAMI,uBAAA,GAA0BA,CAAC;EAAEC,gBAAgB;EAAEC,MAAM;EAAEC;AAAK,CAAQ;EAC/E,IAAID,MAAA,EAAQ;IACV,IAAIE,WAAA,GAAc;MAAE,IAAID,KAAA,IAAS,CAAC,CAAC;IAAE;IAErC,MAAME,kBAAA,GAAqB,CACzBJ,gBAAA,CAAiBK,KAAK,CAACC,oBAAoB,IAAI,CAACN,gBAAA,CAAiBK,KAAK,EAAEE,UAAA,IAAc,KAAK,EAC3FC,GAAG,CAAEC,SAAA,KAAe;MACpB,CAACA,SAAA,GAAY;QACXC,IAAA,EAAMT;MACR;IACF;IAEA,IAAIG,kBAAA,CAAmBX,MAAM,GAAG,GAAG;MACjCU,WAAA,GAAcT,qBAAA,CAAsBS,WAAA,EAAa;QAC/CQ,EAAA,EAAIP;MACN;IACF;IAEA,IAAI,CAACf,aAAA,CAAcc,WAAA,GAAc;MAC/BD,KAAA,GAAQC,WAAA;IACV;EACF;EAEA,OAAOD,KAAA;AACT","ignoreList":[]}

package/dist/utilities/renderTable.d.ts

@@ -0,0 +1,24 @@
+import type { ClientCollectionConfig, CollectionConfig, Field, ImportMap, PaginatedDocs, Payload } from 'payload';
+import { type I18nClient } from '@payloadcms/translations';
+import type { Column } from '../exports/client/index.js';
+import type { ColumnPreferences } from '../providers/ListQuery/index.js';
+export declare const renderFilters: (fields: Field[], importMap: ImportMap) => Map<string, React.ReactNode>;
+export declare const renderTable: ({ collectionConfig, columnPreferences, columns: columnsFromArgs, customCellProps, docs, enableRowSelections, fields, i18n, payload, renderRowTypes, tableAppearance, useAsTitle, }: {
+    collectionConfig: ClientCollectionConfig;
+    columnPreferences: ColumnPreferences;
+    columns?: ColumnPreferences;
+    customCellProps?: Record<string, any>;
+    docs: PaginatedDocs["docs"];
+    drawerSlug?: string;
+    enableRowSelections: boolean;
+    fields: Field[];
+    i18n: I18nClient;
+    payload: Payload;
+    renderRowTypes?: boolean;
+    tableAppearance?: "condensed" | "default";
+    useAsTitle: CollectionConfig["admin"]["useAsTitle"];
+}) => {
+    columnState: Column[];
+    Table: React.ReactNode;
+};
+//# sourceMappingURL=renderTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTable.d.ts","sourceRoot":"","sources":["../../src/utilities/renderTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,aAAa,EACb,OAAO,EACR,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAG1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AASxE,eAAO,MAAM,aAAa,WAChB,KAAK,EAAE,aACJ,SAAS,KACnB,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAgB3B,CAAA;AAEH,eAAO,MAAM,WAAW,uLAarB;IACD,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACrC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IACzC,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CACpD,KAAG;IACF,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CAqCvB,CAAA"}

package/dist/utilities/renderTable.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { RenderServerComponent } from '../elements/RenderServerComponent/index.js';
+import { buildColumnState } from '../elements/TableColumns/buildColumnState.js';
+import { filterFields } from '../elements/TableColumns/filterFields.js';
+import { getInitialColumns } from '../elements/TableColumns/getInitialColumns.js';
+// eslint-disable-next-line payload/no-imports-from-exports-dir
+import { Pill, Table } from '../exports/client/index.js';
+export const renderFilters = (fields, importMap) => fields.reduce((acc, field) => {
+  if ('name' in field && field.admin?.components?.Filter) {
+    acc.set(field.name, /*#__PURE__*/_jsx(RenderServerComponent, {
+      Component: field.admin.components?.Filter,
+      importMap: importMap
+    }));
+  }
+  return acc;
+}, new Map());
+export const renderTable = ({
+  collectionConfig,
+  columnPreferences,
+  columns: columnsFromArgs,
+  customCellProps,
+  docs,
+  enableRowSelections,
+  fields,
+  i18n,
+  payload,
+  renderRowTypes,
+  tableAppearance,
+  useAsTitle
+}) => {
+  const columns = columnsFromArgs || getInitialColumns(filterFields(fields), useAsTitle, collectionConfig?.admin?.defaultColumns);
+  const columnState = buildColumnState({
+    beforeRows: renderRowTypes ? [{
+      accessor: 'collection',
+      active: true,
+      field: null,
+      Heading: i18n.t('version:type'),
+      renderedCells: docs.map((_, i) => /*#__PURE__*/_jsx(Pill, {
+        children: getTranslation(collectionConfig.labels.singular, i18n)
+      }, i))
+    }] : undefined,
+    collectionConfig,
+    columnPreferences,
+    columns,
+    enableRowSelections,
+    fields,
+    i18n,
+    // sortColumnProps,
+    customCellProps,
+    docs,
+    payload,
+    useAsTitle
+  });
+  return {
+    columnState,
+    Table: /*#__PURE__*/_jsx(Table, {
+      appearance: tableAppearance,
+      columns: columnState,
+      data: docs
+    })
+  };
+};
+//# sourceMappingURL=renderTable.js.map

package/dist/utilities/renderTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderTable.js","names":["getTranslation","RenderServerComponent","buildColumnState","filterFields","getInitialColumns","Pill","Table","renderFilters","fields","importMap","reduce","acc","field","admin","components","Filter","set","name","_jsx","Component","Map","renderTable","collectionConfig","columnPreferences","columns","columnsFromArgs","customCellProps","docs","enableRowSelections","i18n","payload","renderRowTypes","tableAppearance","useAsTitle","defaultColumns","columnState","beforeRows","accessor","active","Heading","t","renderedCells","map","_","i","labels","singular","undefined","appearance","data"],"sources":["../../src/utilities/renderTable.tsx"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  CollectionConfig,\n  Field,\n  ImportMap,\n  PaginatedDocs,\n  Payload,\n} from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir\nimport type { Column } from '../exports/client/index.js'\nimport type { ColumnPreferences } from '../providers/ListQuery/index.js'\n\nimport { RenderServerComponent } from '../elements/RenderServerComponent/index.js'\nimport { buildColumnState } from '../elements/TableColumns/buildColumnState.js'\nimport { filterFields } from '../elements/TableColumns/filterFields.js'\nimport { getInitialColumns } from '../elements/TableColumns/getInitialColumns.js'\n// eslint-disable-next-line payload/no-imports-from-exports-dir\nimport { Pill, Table } from '../exports/client/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 ('name' in field && field.admin?.components?.Filter) {\n        acc.set(\n          field.name,\n          <RenderServerComponent\n            Component={field.admin.components?.Filter}\n            importMap={importMap}\n          />,\n        )\n      }\n\n      return acc\n    },\n    new Map() as Map<string, React.ReactNode>,\n  )\n\nexport const renderTable = ({\n  collectionConfig,\n  columnPreferences,\n  columns: columnsFromArgs,\n  customCellProps,\n  docs,\n  enableRowSelections,\n  fields,\n  i18n,\n  payload,\n  renderRowTypes,\n  tableAppearance,\n  useAsTitle,\n}: {\n  collectionConfig: ClientCollectionConfig\n  columnPreferences: ColumnPreferences\n  columns?: ColumnPreferences\n  customCellProps?: Record<string, any>\n  docs: PaginatedDocs['docs']\n  drawerSlug?: string\n  enableRowSelections: boolean\n  fields: Field[]\n  i18n: I18nClient\n  payload: Payload\n  renderRowTypes?: boolean\n  tableAppearance?: 'condensed' | 'default'\n  useAsTitle: CollectionConfig['admin']['useAsTitle']\n}): {\n  columnState: Column[]\n  Table: React.ReactNode\n} => {\n  const columns =\n    columnsFromArgs ||\n    getInitialColumns(filterFields(fields), useAsTitle, collectionConfig?.admin?.defaultColumns)\n\n  const columnState = buildColumnState({\n    beforeRows: renderRowTypes\n      ? [\n          {\n            accessor: 'collection',\n            active: true,\n            field: null,\n            Heading: i18n.t('version:type'),\n            renderedCells: docs.map((_, i) => (\n              <Pill key={i}>{getTranslation(collectionConfig.labels.singular, i18n)}</Pill>\n            )),\n          },\n        ]\n      : undefined,\n    collectionConfig,\n    columnPreferences,\n    columns,\n    enableRowSelections,\n    fields,\n    i18n,\n    // sortColumnProps,\n    customCellProps,\n    docs,\n    payload,\n    useAsTitle,\n  })\n\n  return {\n    columnState,\n    Table: <Table appearance={tableAppearance} columns={columnState} data={docs} />,\n  }\n}\n"],"mappings":";AASA,SAASA,cAAc,QAAyB;AAMhD,SAASC,qBAAqB,QAAQ;AACtC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,YAAY,QAAQ;AAC7B,SAASC,iBAAiB,QAAQ;AAClC;AACA,SAASC,IAAI,EAAEC,KAAK,QAAQ;AAE5B,OAAO,MAAMC,aAAA,GAAgBA,CAC3BC,MAAA,EACAC,SAAA,KAEAD,MAAA,CAAOE,MAAM,CACX,CAACC,GAAA,EAAKC,KAAA;EACJ,IAAI,UAAUA,KAAA,IAASA,KAAA,CAAMC,KAAK,EAAEC,UAAA,EAAYC,MAAA,EAAQ;IACtDJ,GAAA,CAAIK,GAAG,CACLJ,KAAA,CAAMK,IAAI,eACVC,IAAA,CAACjB,qBAAA;MACCkB,SAAA,EAAWP,KAAA,CAAMC,KAAK,CAACC,UAAU,EAAEC,MAAA;MACnCN,SAAA,EAAWA;;EAGjB;EAEA,OAAOE,GAAA;AACT,GACA,IAAIS,GAAA;AAGR,OAAO,MAAMC,WAAA,GAAcA,CAAC;EAC1BC,gBAAgB;EAChBC,iBAAiB;EACjBC,OAAA,EAASC,eAAe;EACxBC,eAAe;EACfC,IAAI;EACJC,mBAAmB;EACnBpB,MAAM;EACNqB,IAAI;EACJC,OAAO;EACPC,cAAc;EACdC,eAAe;EACfC;AAAU,CAeX;EAIC,MAAMT,OAAA,GACJC,eAAA,IACArB,iBAAA,CAAkBD,YAAA,CAAaK,MAAA,GAASyB,UAAA,EAAYX,gBAAA,EAAkBT,KAAA,EAAOqB,cAAA;EAE/E,MAAMC,WAAA,GAAcjC,gBAAA,CAAiB;IACnCkC,UAAA,EAAYL,cAAA,GACR,CACE;MACEM,QAAA,EAAU;MACVC,MAAA,EAAQ;MACR1B,KAAA,EAAO;MACP2B,OAAA,EAASV,IAAA,CAAKW,CAAC,CAAC;MAChBC,aAAA,EAAed,IAAA,CAAKe,GAAG,CAAC,CAACC,CAAA,EAAGC,CAAA,kBAC1B1B,IAAA,CAACb,IAAA;kBAAcL,cAAA,CAAesB,gBAAA,CAAiBuB,MAAM,CAACC,QAAQ,EAAEjB,IAAA;SAArDe,CAAA;IAEf,EACD,GACDG,SAAA;IACJzB,gBAAA;IACAC,iBAAA;IACAC,OAAA;IACAI,mBAAA;IACApB,MAAA;IACAqB,IAAA;IACA;IACAH,eAAA;IACAC,IAAA;IACAG,OAAA;IACAG;EACF;EAEA,OAAO;IACLE,WAAA;IACA7B,KAAA,eAAOY,IAAA,CAACZ,KAAA;MAAM0C,UAAA,EAAYhB,eAAA;MAAiBR,OAAA,EAASW,WAAA;MAAac,IAAA,EAAMtB;;EACzE;AACF","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const APIKey: React.FC<{
+    readonly enabled: boolean;
+    readonly readOnly?: boolean;
+}>;
+//# sourceMappingURL=APIKey.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"APIKey.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/APIKey.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAgB3D,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAiHvF,CAAA"}

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

@@ -0,0 +1,123 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { text } from 'payload/shared';
+import React, { useEffect, useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { CopyToClipboard } from '../../../elements/CopyToClipboard/index.js';
+import { GenerateConfirmation } from '../../../elements/GenerateConfirmation/index.js';
+import { useFormFields } from '../../../forms/Form/context.js';
+import { useField } from '../../../forms/useField/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+const path = 'apiKey';
+const baseClass = 'api-key';
+const fieldBaseClass = 'field-type';
+export const APIKey = ({
+  enabled,
+  readOnly
+}) => {
+  const [initialAPIKey] = useState(uuidv4());
+  const [highlightedField, setHighlightedField] = useState(false);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    config
+  } = useConfig();
+  const {
+    collectionSlug
+  } = useDocumentInfo();
+  const apiKey = useFormFields(([fields]) => fields && fields[path] || null);
+  const apiKeyField = config.collections.find(collection => {
+    return collection.slug === collectionSlug;
+  })?.fields?.find(field => 'name' in field && field.name === 'apiKey');
+  const validate = val => text(val, {
+    name: 'apiKey',
+    type: 'text',
+    data: {},
+    maxLength: 48,
+    minLength: 24,
+    preferences: {
+      fields: {}
+    },
+    req: {
+      payload: {
+        config
+      },
+      t
+    },
+    siblingData: {}
+  });
+  const apiKeyValue = apiKey?.value;
+  const apiKeyLabel = useMemo(() => {
+    let label = 'API Key';
+    if (apiKeyField?.label) {
+      label = apiKeyField.label;
+    }
+    return getTranslation(label, i18n);
+  }, [apiKeyField, i18n]);
+  const APIKeyLabel = useMemo(() => /*#__PURE__*/_jsxs("div", {
+    className: `${baseClass}__label`,
+    children: [/*#__PURE__*/_jsx("span", {
+      children: apiKeyLabel
+    }), /*#__PURE__*/_jsx(CopyToClipboard, {
+      value: apiKeyValue
+    })]
+  }), [apiKeyLabel, apiKeyValue]);
+  const fieldType = useField({
+    path: 'apiKey',
+    validate
+  });
+  const highlightField = () => {
+    if (highlightedField) {
+      setHighlightedField(false);
+    }
+    setTimeout(() => {
+      setHighlightedField(true);
+    }, 1);
+  };
+  const {
+    setValue,
+    value
+  } = fieldType;
+  useEffect(() => {
+    if (!apiKeyValue && enabled) {
+      setValue(initialAPIKey);
+    }
+    if (!enabled && apiKeyValue) {
+      setValue(null);
+    }
+  }, [apiKeyValue, enabled, setValue, initialAPIKey]);
+  useEffect(() => {
+    if (highlightedField) {
+      setTimeout(() => {
+        setHighlightedField(false);
+      }, 10000);
+    }
+  }, [highlightedField]);
+  if (!enabled) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: [fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' '),
+      children: [APIKeyLabel, /*#__PURE__*/_jsx("input", {
+        "aria-label": apiKeyLabel,
+        className: highlightedField ? 'highlight' : undefined,
+        disabled: true,
+        id: "apiKey",
+        name: "apiKey",
+        type: "text",
+        value: value || ''
+      })]
+    }), !readOnly && /*#__PURE__*/_jsx(GenerateConfirmation, {
+      highlightField: highlightField,
+      setKey: () => setValue(uuidv4())
+    })]
+  });
+};
+//# sourceMappingURL=APIKey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"APIKey.js","names":["getTranslation","text","React","useEffect","useMemo","useState","v4","uuidv4","CopyToClipboard","GenerateConfirmation","useFormFields","useField","useConfig","useDocumentInfo","useTranslation","path","baseClass","fieldBaseClass","APIKey","enabled","readOnly","initialAPIKey","highlightedField","setHighlightedField","i18n","t","config","collectionSlug","apiKey","fields","apiKeyField","collections","find","collection","slug","field","name","validate","val","type","data","maxLength","minLength","preferences","req","payload","siblingData","apiKeyValue","value","apiKeyLabel","label","APIKeyLabel","_jsxs","className","_jsx","fieldType","highlightField","setTimeout","setValue","Fragment","filter","Boolean","join","undefined","disabled","id","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 { CopyToClipboard } from '../../../elements/CopyToClipboard/index.js'\nimport { GenerateConfirmation } from '../../../elements/GenerateConfirmation/index.js'\nimport { FieldLabel } from '../../../fields/FieldLabel/index.js'\nimport { useFormFields } from '../../../forms/Form/context.js'\nimport { useField } from '../../../forms/useField/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 { i18n, t } = useTranslation()\n  const { config } = useConfig()\n  const { collectionSlug } = useDocumentInfo()\n\n  const apiKey = useFormFields(([fields]) => (fields && fields[path]) || null)\n\n  const apiKeyField: TextFieldClient = config.collections\n    .find((collection) => {\n      return collection.slug === collectionSlug\n    })\n    ?.fields?.find((field) => 'name' in field && field.name === 'apiKey') as TextFieldClient\n\n  const validate = (val) =>\n    text(val, {\n      name: 'apiKey',\n      type: 'text',\n      data: {},\n      maxLength: 48,\n      minLength: 24,\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      <div className={`${baseClass}__label`}>\n        <span>{apiKeyLabel}</span>\n        <CopyToClipboard value={apiKeyValue as string} />\n      </div>\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        <input\n          aria-label={apiKeyLabel}\n          className={highlightedField ? 'highlight' : undefined}\n          disabled\n          id=\"apiKey\"\n          name=\"apiKey\"\n          type=\"text\"\n          value={(value as string) || ''}\n        />\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,eAAe,QAAQ;AAChC,SAASC,oBAAoB,QAAQ;AAErC,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,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,GAAGhB,QAAA,CAASE,MAAA;EACjC,MAAM,CAACe,gBAAA,EAAkBC,mBAAA,CAAoB,GAAGlB,QAAA,CAAS;EACzD,MAAM;IAAEmB,IAAI;IAAEC;EAAC,CAAE,GAAGX,cAAA;EACpB,MAAM;IAAEY;EAAM,CAAE,GAAGd,SAAA;EACnB,MAAM;IAAEe;EAAc,CAAE,GAAGd,eAAA;EAE3B,MAAMe,MAAA,GAASlB,aAAA,CAAc,CAAC,CAACmB,MAAA,CAAO,KAAKA,MAAC,IAAUA,MAAM,CAACd,IAAA,CAAK,IAAK;EAEvE,MAAMe,WAAA,GAA+BJ,MAAA,CAAOK,WAAW,CACpDC,IAAI,CAAEC,UAAA;IACL,OAAOA,UAAA,CAAWC,IAAI,KAAKP,cAAA;EAC7B,IACEE,MAAA,EAAQG,IAAA,CAAMG,KAAA,IAAU,UAAUA,KAAA,IAASA,KAAA,CAAMC,IAAI,KAAK;EAE9D,MAAMC,QAAA,GAAYC,GAAA,IAChBrC,IAAA,CAAKqC,GAAA,EAAK;IACRF,IAAA,EAAM;IACNG,IAAA,EAAM;IACNC,IAAA,EAAM,CAAC;IACPC,SAAA,EAAW;IACXC,SAAA,EAAW;IACXC,WAAA,EAAa;MAAEd,MAAA,EAAQ,CAAC;IAAE;IAC1Be,GAAA,EAAK;MACHC,OAAA,EAAS;QACPnB;MACF;MACAD;IACF;IACAqB,WAAA,EAAa,CAAC;EAChB;EAEF,MAAMC,WAAA,GAAcnB,MAAA,EAAQoB,KAAA;EAE5B,MAAMC,WAAA,GAAc7C,OAAA,CAAQ;IAC1B,IAAI8C,KAAA,GAAyC;IAE7C,IAAIpB,WAAA,EAAaoB,KAAA,EAAO;MACtBA,KAAA,GAAQpB,WAAA,CAAYoB,KAAK;IAC3B;IAEA,OAAOlD,cAAA,CAAekD,KAAA,EAAO1B,IAAA;EAC/B,GAAG,CAACM,WAAA,EAAaN,IAAA,CAAK;EAEtB,MAAM2B,WAAA,GAAc/C,OAAA,CAClB,mBACEgD,KAAA,CAAC;IAAIC,SAAA,EAAW,GAAGrC,SAAA,SAAkB;4BACnCsC,IAAA,CAAC;gBAAML;qBACPK,IAAA,CAAC9C,eAAA;MAAgBwC,KAAA,EAAOD;;MAG5B,CAACE,WAAA,EAAaF,WAAA,CAAY;EAG5B,MAAMQ,SAAA,GAAY5C,QAAA,CAAS;IACzBI,IAAA,EAAM;IACNsB;EACF;EAEA,MAAMmB,cAAA,GAAiBA,CAAA;IACrB,IAAIlC,gBAAA,EAAkB;MACpBC,mBAAA,CAAoB;IACtB;IACAkC,UAAA,CAAW;MACTlC,mBAAA,CAAoB;IACtB,GAAG;EACL;EAEA,MAAM;IAAEmC,QAAQ;IAAEV;EAAK,CAAE,GAAGO,SAAA;EAE5BpD,SAAA,CAAU;IACR,IAAI,CAAC4C,WAAA,IAAe5B,OAAA,EAAS;MAC3BuC,QAAA,CAASrC,aAAA;IACX;IACA,IAAI,CAACF,OAAA,IAAW4B,WAAA,EAAa;MAC3BW,QAAA,CAAS;IACX;EACF,GAAG,CAACX,WAAA,EAAa5B,OAAA,EAASuC,QAAA,EAAUrC,aAAA,CAAc;EAElDlB,SAAA,CAAU;IACR,IAAImB,gBAAA,EAAkB;MACpBmC,UAAA,CAAW;QACTlC,mBAAA,CAAoB;MACtB,GAAG;IACL;EACF,GAAG,CAACD,gBAAA,CAAiB;EAErB,IAAI,CAACH,OAAA,EAAS;IACZ,OAAO;EACT;EAEA,oBACEiC,KAAA,CAAClD,KAAA,CAAMyD,QAAQ;4BACbP,KAAA,CAAC;MAAIC,SAAA,EAAW,CAACpC,cAAA,EAAgB,WAAW,YAAY,CAAC2C,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;iBAC3EX,WAAA,E,aACDG,IAAA,CAAC;QACC,cAAYL,WAAA;QACZI,SAAA,EAAW/B,gBAAA,GAAmB,cAAcyC,SAAA;QAC5CC,QAAQ;QACRC,EAAA,EAAG;QACH7B,IAAA,EAAK;QACLG,IAAA,EAAK;QACLS,KAAA,EAAOA,KAAC,IAAoB;;QAG/B,CAAC5B,QAAA,iBACAkC,IAAA,CAAC7C,oBAAA;MAAqB+C,cAAA,EAAgBA,cAAA;MAAgBU,MAAA,EAAQA,CAAA,KAAMR,QAAA,CAASnD,MAAA;;;AAIrF","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAGxE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAavC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuNhC,CAAA"}

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

@@ -0,0 +1,339 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '../../../elements/Button/index.js';
+import { EmailAndUsernameFields } from '../../../elements/EmailAndUsername/index.js';
+import { CheckboxField } from '../../../fields/Checkbox/index.js';
+import { ConfirmPasswordField } from '../../../fields/ConfirmPassword/index.js';
+import { PasswordField } from '../../../fields/Password/index.js';
+import { useFormFields, useFormModified } from '../../../forms/Form/context.js';
+import { useAuth } from '../../../providers/Auth/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { APIKey } from './APIKey.js';
+import './index.scss';
+const baseClass = 'auth-fields';
+export const Auth = props => {
+  const $ = _c(58);
+  const {
+    className,
+    collectionSlug,
+    disableLocalStrategy,
+    email,
+    loginWithUsername,
+    operation,
+    readOnly,
+    requirePassword,
+    setSchemaPathSegments,
+    setValidateBeforeSubmit,
+    useAPIKey,
+    username,
+    verify
+  } = props;
+  const {
+    permissions
+  } = useAuth();
+  const [changingPassword, setChangingPassword] = useState(requirePassword);
+  const enableAPIKey = useFormFields(_temp);
+  const forceOpenChangePassword = useFormFields(_temp2);
+  const dispatchFields = useFormFields(_temp3);
+  const modified = useFormModified();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    docPermissions,
+    isInitializing
+  } = useDocumentInfo();
+  const {
+    config: t0
+  } = useConfig();
+  const {
+    routes: t1,
+    serverURL
+  } = t0;
+  const {
+    api
+  } = t1;
+  let t2;
+  bb0: {
+    const collection = permissions?.collections?.[collectionSlug];
+    if (collection) {
+      const unlock = "unlock" in collection ? collection.unlock : undefined;
+      if (unlock) {
+        t2 = unlock.permission;
+        break bb0;
+      }
+    }
+    t2 = false;
+  }
+  const hasPermissionToUnlock = t2;
+  const apiKeyReadOnly = readOnly || !docPermissions?.fields?.apiKey?.update?.permission;
+  const enableAPIKeyReadOnly = readOnly || !docPermissions?.fields?.enableAPIKey?.update?.permission;
+  const canReadApiKey = docPermissions?.fields?.apiKey?.read?.permission;
+  const canReadEnableAPIKey = docPermissions?.fields?.enableAPIKey?.read?.permission;
+  let t3;
+  if ($[0] !== setValidateBeforeSubmit || $[1] !== setSchemaPathSegments || $[2] !== collectionSlug || $[3] !== dispatchFields || $[4] !== t) {
+    t3 = showPasswordFields => {
+      if (showPasswordFields) {
+        setValidateBeforeSubmit(true);
+        setSchemaPathSegments([`_${collectionSlug}`, "auth"]);
+        dispatchFields({
+          type: "UPDATE",
+          errorMessage: t("validation:required"),
+          path: "password",
+          valid: false
+        });
+        dispatchFields({
+          type: "UPDATE",
+          errorMessage: t("validation:required"),
+          path: "confirm-password",
+          valid: false
+        });
+      } else {
+        setValidateBeforeSubmit(false);
+        setSchemaPathSegments([collectionSlug]);
+        dispatchFields({
+          type: "REMOVE",
+          path: "password"
+        });
+        dispatchFields({
+          type: "REMOVE",
+          path: "confirm-password"
+        });
+      }
+      setChangingPassword(showPasswordFields);
+    };
+    $[0] = setValidateBeforeSubmit;
+    $[1] = setSchemaPathSegments;
+    $[2] = collectionSlug;
+    $[3] = dispatchFields;
+    $[4] = t;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const handleChangePassword = t3;
+  let t4;
+  if ($[6] !== serverURL || $[7] !== api || $[8] !== collectionSlug || $[9] !== loginWithUsername || $[10] !== username || $[11] !== email || $[12] !== i18n.language || $[13] !== t) {
+    t4 = async () => {
+      const url = `${serverURL}${api}/${collectionSlug}/unlock`;
+      const response = await fetch(url, {
+        body: loginWithUsername && username ? JSON.stringify({
+          username
+        }) : JSON.stringify({
+          email
+        }),
+        credentials: "include",
+        headers: {
+          "Accept-Language": i18n.language,
+          "Content-Type": "application/json"
+        },
+        method: "post"
+      });
+      if (response.status === 200) {
+        toast.success(t("authentication:successfullyUnlocked"));
+      } else {
+        toast.error(t("authentication:failedToUnlock"));
+      }
+    };
+    $[6] = serverURL;
+    $[7] = api;
+    $[8] = collectionSlug;
+    $[9] = loginWithUsername;
+    $[10] = username;
+    $[11] = email;
+    $[12] = i18n.language;
+    $[13] = t;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  const unlock_0 = t4;
+  let t5;
+  let t6;
+  if ($[15] !== modified) {
+    t5 = () => {
+      if (!modified) {
+        setChangingPassword(false);
+      }
+    };
+    t6 = [modified];
+    $[15] = modified;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t5 = $[16];
+    t6 = $[17];
+  }
+  useEffect(t5, t6);
+  if (disableLocalStrategy && !useAPIKey) {
+    return null;
+  }
+  const disabled = readOnly || isInitializing;
+  const showPasswordFields_0 = changingPassword || forceOpenChangePassword;
+  let t7;
+  if ($[18] !== className) {
+    t7 = [baseClass, className].filter(Boolean);
+    $[18] = className;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  const t8 = t7.join(" ");
+  let t9;
+  if ($[20] !== disableLocalStrategy || $[21] !== docPermissions || $[22] !== loginWithUsername || $[23] !== operation || $[24] !== readOnly || $[25] !== t || $[26] !== showPasswordFields_0 || $[27] !== requirePassword || $[28] !== disabled || $[29] !== handleChangePassword || $[30] !== hasPermissionToUnlock || $[31] !== unlock_0 || $[32] !== useAPIKey || $[33] !== canReadEnableAPIKey || $[34] !== enableAPIKeyReadOnly || $[35] !== collectionSlug || $[36] !== canReadApiKey || $[37] !== enableAPIKey || $[38] !== apiKeyReadOnly || $[39] !== verify || $[40] !== t8) {
+    let t10;
+    if ($[42] !== useAPIKey || $[43] !== canReadEnableAPIKey || $[44] !== disabled || $[45] !== enableAPIKeyReadOnly || $[46] !== t || $[47] !== collectionSlug || $[48] !== canReadApiKey || $[49] !== enableAPIKey || $[50] !== apiKeyReadOnly) {
+      t10 = useAPIKey && _jsxs("div", {
+        className: `${baseClass}__api-key`,
+        children: [canReadEnableAPIKey && _jsx(CheckboxField, {
+          field: {
+            name: "enableAPIKey",
+            admin: {
+              disabled,
+              readOnly: enableAPIKeyReadOnly
+            },
+            label: t("authentication:enableAPIKey")
+          },
+          path: "enableAPIKey",
+          schemaPath: `${collectionSlug}.enableAPIKey`
+        }), canReadApiKey && _jsx(APIKey, {
+          enabled: !!enableAPIKey?.value,
+          readOnly: apiKeyReadOnly
+        })]
+      });
+      $[42] = useAPIKey;
+      $[43] = canReadEnableAPIKey;
+      $[44] = disabled;
+      $[45] = enableAPIKeyReadOnly;
+      $[46] = t;
+      $[47] = collectionSlug;
+      $[48] = canReadApiKey;
+      $[49] = enableAPIKey;
+      $[50] = apiKeyReadOnly;
+      $[51] = t10;
+    } else {
+      t10 = $[51];
+    }
+    let t11;
+    if ($[52] !== verify || $[53] !== disabled || $[54] !== readOnly || $[55] !== t || $[56] !== collectionSlug) {
+      t11 = verify && _jsx(CheckboxField, {
+        field: {
+          name: "_verified",
+          admin: {
+            disabled,
+            readOnly
+          },
+          label: t("authentication:verified")
+        },
+        path: "_verified",
+        schemaPath: `${collectionSlug}._verified`
+      });
+      $[52] = verify;
+      $[53] = disabled;
+      $[54] = readOnly;
+      $[55] = t;
+      $[56] = collectionSlug;
+      $[57] = t11;
+    } else {
+      t11 = $[57];
+    }
+    t9 = _jsxs("div", {
+      className: t8,
+      children: [!disableLocalStrategy && _jsxs(React.Fragment, {
+        children: [_jsx(EmailAndUsernameFields, {
+          loginWithUsername,
+          operation,
+          permissions: docPermissions?.fields,
+          readOnly,
+          t
+        }), (showPasswordFields_0 || requirePassword) && _jsxs("div", {
+          className: `${baseClass}__changing-password`,
+          children: [_jsx(PasswordField, {
+            autoComplete: "new-password",
+            field: {
+              name: "password",
+              admin: {
+                disabled
+              },
+              label: t("authentication:newPassword"),
+              required: true
+            },
+            indexPath: "",
+            parentPath: "",
+            parentSchemaPath: "",
+            path: "password",
+            schemaPath: "password"
+          }), _jsx(ConfirmPasswordField, {
+            disabled: readOnly
+          })]
+        }), _jsxs("div", {
+          className: `${baseClass}__controls`,
+          children: [showPasswordFields_0 && !requirePassword && _jsx(Button, {
+            buttonStyle: "secondary",
+            disabled,
+            onClick: () => handleChangePassword(false),
+            size: "medium",
+            children: t("general:cancel")
+          }), !showPasswordFields_0 && !requirePassword && _jsx(Button, {
+            buttonStyle: "secondary",
+            disabled,
+            id: "change-password",
+            onClick: () => handleChangePassword(true),
+            size: "medium",
+            children: t("authentication:changePassword")
+          }), operation === "update" && hasPermissionToUnlock && _jsx(Button, {
+            buttonStyle: "secondary",
+            disabled,
+            onClick: () => void unlock_0(),
+            size: "medium",
+            children: t("authentication:forceUnlock")
+          })]
+        })]
+      }), t10, t11]
+    });
+    $[20] = disableLocalStrategy;
+    $[21] = docPermissions;
+    $[22] = loginWithUsername;
+    $[23] = operation;
+    $[24] = readOnly;
+    $[25] = t;
+    $[26] = showPasswordFields_0;
+    $[27] = requirePassword;
+    $[28] = disabled;
+    $[29] = handleChangePassword;
+    $[30] = hasPermissionToUnlock;
+    $[31] = unlock_0;
+    $[32] = useAPIKey;
+    $[33] = canReadEnableAPIKey;
+    $[34] = enableAPIKeyReadOnly;
+    $[35] = collectionSlug;
+    $[36] = canReadApiKey;
+    $[37] = enableAPIKey;
+    $[38] = apiKeyReadOnly;
+    $[39] = verify;
+    $[40] = t8;
+    $[41] = t9;
+  } else {
+    t9 = $[41];
+  }
+  return t9;
+};
+function _temp(t0) {
+  const [fields] = t0;
+  return fields && fields?.enableAPIKey || null;
+}
+function _temp2(t0) {
+  const [fields_0] = t0;
+  return fields_0 && fields_0?.password || null;
+}
+function _temp3(reducer) {
+  return reducer[1];
+}
+//# sourceMappingURL=index.js.map