@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.35482da

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

@@ -1,4 +1,6 @@
 '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';
@@ -15,111 +17,128 @@ 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 [showKey, setShowKey] = useState(false);
-    const { i18n, t } = useTranslation();
-    const { config, getEntityConfig } = useConfig();
-    const { collectionSlug } = useDocumentInfo();
-    const apiKey = useFormFields(([fields])=>fields && fields[path] || null);
-    const apiKeyField = getEntityConfig({
-        collectionSlug
-    })?.fields?.find((field)=>'name' in field && field.name === 'apiKey');
-    const validate = (val)=>text(val, {
-            name: 'apiKey',
-            type: 'text',
-            blockData: {},
-            data: {},
-            event: 'onChange',
-            maxLength: 48,
-            minLength: 24,
-            path: [
-                'apiKey'
-            ],
-            preferences: {
-                fields: {}
-            },
-            req: {
-                payload: {
-                    config
-                },
-                t
-            },
-            siblingData: {}
-        });
-    const apiKeyValue = apiKey?.value;
-    const apiKeyLabel = useMemo(()=>{
-        let label1 = 'API Key';
-        if (apiKeyField?.label) {
-            label1 = apiKeyField.label;
-        }
-        return getTranslation(label1, i18n);
-    }, [
-        apiKeyField,
-        i18n
-    ]);
-    const APIKeyLabel = useMemo(()=><label className={`${baseClass}__label field-label`} htmlFor="apiKey">
-        <span>{apiKeyLabel}</span>
-        <CopyToClipboard value={apiKeyValue}/>
-      </label>, [
-        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;
+export const APIKey = ({
+  enabled,
+  readOnly
+}) => {
+  const [initialAPIKey] = useState(uuidv4());
+  const [highlightedField, setHighlightedField] = useState(false);
+  const [showKey, setShowKey] = useState(false);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    collectionSlug
+  } = useDocumentInfo();
+  const apiKey = useFormFields(([fields]) => fields && fields[path] || null);
+  const apiKeyField = getEntityConfig({
+    collectionSlug
+  })?.fields?.find(field => 'name' in field && field.name === 'apiKey');
+  const validate = val => text(val, {
+    name: 'apiKey',
+    type: 'text',
+    blockData: {},
+    data: {},
+    event: 'onChange',
+    maxLength: 48,
+    minLength: 24,
+    path: ['apiKey'],
+    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("label", {
+    className: `${baseClass}__label field-label`,
+    htmlFor: "apiKey",
+    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);
     }
-    return <React.Fragment>
-      <div className={[
-        fieldBaseClass,
-        'api-key',
-        'read-only'
-    ].filter(Boolean).join(' ')}>
-        {APIKeyLabel}
-        <div className={`${baseClass}__input-wrap`}>
-          <input aria-label={apiKeyLabel} className={highlightedField ? 'highlight' : undefined} disabled id="apiKey" name="apiKey" type={showKey ? 'text' : 'password'} value={value || ''}/>
-          <div className={`${baseClass}__toggle-button-wrap`}>
-            <Button buttonStyle="none" className={`${baseClass}__toggle-button`} icon={<EyeIcon active={showKey}/>} onClick={()=>setShowKey((prev)=>!prev)}/>
-          </div>
-        </div>
-      </div>
-      {!readOnly && <GenerateConfirmation highlightField={highlightField} setKey={()=>setValue(uuidv4())}/>}
-    </React.Fragment>;
+    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__*/_jsxs("div", {
+        className: `${baseClass}__input-wrap`,
+        children: [/*#__PURE__*/_jsx("input", {
+          "aria-label": apiKeyLabel,
+          className: highlightedField ? 'highlight' : undefined,
+          disabled: true,
+          id: "apiKey",
+          name: "apiKey",
+          type: showKey ? 'text' : 'password',
+          value: value || ''
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__toggle-button-wrap`,
+          children: /*#__PURE__*/_jsx(Button, {
+            buttonStyle: "none",
+            className: `${baseClass}__toggle-button`,
+            icon: /*#__PURE__*/_jsx(EyeIcon, {
+              active: showKey
+            }),
+            onClick: () => setShowKey(prev => !prev)
+          })
+        })]
+      })]
+    }), !readOnly && /*#__PURE__*/_jsx(GenerateConfirmation, {
+      highlightField: highlightField,
+      setKey: () => setValue(uuidv4())
+    })]
+  });
 };
-
 //# sourceMappingURL=APIKey.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"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","className","htmlFor","span","fieldType","highlightField","setTimeout","setValue","Fragment","div","filter","Boolean","join","input","aria-label","undefined","disabled","id","buttonStyle","icon","active","onClick","prev","setKey"],"mappings":"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"}
+{"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":"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","ignoreList":[]}