@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.2

package/dist/elements/DocumentDrawer/DrawerHeader/index.js

@@ -1,124 +1,185 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { getTranslation } from '@payloadcms/translations';
+import { hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useModal } from '../../../elements/Modal/index.js';
 import { RenderTitle } from '../../../elements/RenderTitle/index.js';
 import { useFormModified } from '../../../forms/Form/index.js';
 import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
-import { useDocumentTitle } from '../../../providers/DocumentTitle/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
+import { formatDate, formatTimeToNow } from '../../../utilities/formatDocTitle/formatDateTitle.js';
+import { Autosave } from '../../Autosave/index.js';
 import { Button } from '../../Button/index.js';
-import { IDLabel } from '../../IDLabel/index.js';
 import { LeaveWithoutSavingModal } from '../../LeaveWithoutSaving/index.js';
+import { Locked } from '../../Locked/index.js';
+import { RenderCustomComponent } from '../../RenderCustomComponent/index.js';
+import { Status } from '../../Status/index.js';
 import { documentDrawerBaseClass } from '../index.js';
 import './index.css';
 const leaveWithoutSavingModalSlug = 'leave-without-saving-doc-drawer';
-export const DocumentDrawerHeader = t0 => {
-  const $ = _c(15);
-  const {
-    AfterHeader,
-    drawerSlug,
-    showDocumentID: t1
-  } = t0;
-  const showDocumentID = t1 === undefined ? true : t1;
+export const DocumentDrawerHeader = ({
+  actions,
+  AfterHeader,
+  BeforeDocumentMeta,
+  drawerSlug,
+  readOnlyForIncomingUser,
+  renderTitleAsLink = true,
+  Status: CustomStatus,
+  user
+}) => {
   const {
     closeModal,
     openModal
   } = useModal();
   const {
+    i18n,
     t
   } = useTranslation();
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
   const isModified = useFormModified();
-  let t2;
-  if ($[0] !== closeModal || $[1] !== drawerSlug || $[2] !== isModified || $[3] !== openModal) {
-    t2 = () => {
-      if (isModified) {
-        openModal(leaveWithoutSavingModalSlug);
-      } else {
-        closeModal(drawerSlug);
-      }
-    };
-    $[0] = closeModal;
-    $[1] = drawerSlug;
-    $[2] = isModified;
-    $[3] = openModal;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  const handleOnClose = t2;
-  let t3;
-  if ($[5] !== AfterHeader || $[6] !== closeModal || $[7] !== drawerSlug || $[8] !== handleOnClose || $[9] !== showDocumentID || $[10] !== t) {
-    let t4;
-    if ($[12] !== closeModal || $[13] !== drawerSlug) {
-      t4 = () => closeModal(drawerSlug);
-      $[12] = closeModal;
-      $[13] = drawerSlug;
-      $[14] = t4;
+  const {
+    id,
+    collectionSlug,
+    data,
+    globalSlug,
+    hasSavePermission,
+    isEditing,
+    isTrashed
+  } = useDocumentInfo();
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const globalConfig = getEntityConfig({
+    globalSlug
+  });
+  const collectionHasDraftsEnabled = hasDraftsEnabled(collectionConfig);
+  const globalHasDraftsEnabled = hasDraftsEnabled(globalConfig);
+  const autosaveEnabled = hasAutosaveEnabled(collectionConfig) || hasAutosaveEnabled(globalConfig);
+  const unsavedDraftWithValidations = !id && collectionConfig?.versions?.drafts && collectionConfig.versions?.drafts.validate;
+  const showStatus = (collectionHasDraftsEnabled || globalHasDraftsEnabled) && (Boolean(globalConfig) || Boolean(collectionConfig) && isEditing);
+  const showAutosave = (collectionHasDraftsEnabled || globalHasDraftsEnabled) && hasSavePermission && autosaveEnabled && !unsavedDraftWithValidations && !isTrashed;
+  const singularLabel = getTranslation(collectionConfig?.labels?.singular ?? globalConfig?.label ?? t('general:document'), i18n);
+  const headerLabel = id ? `${t('general:editing')} ${singularLabel}` : t('general:creatingNewLabel', {
+    label: singularLabel
+  });
+  const updatedAt = data?.updatedAt;
+  const createdAt = data?.createdAt;
+  const {
+    admin: {
+      dateFormat
+    }
+  } = config;
+  const [relativeTime, setRelativeTime] = useState('');
+  const [formattedUpdatedAt, setFormattedUpdatedAt] = useState('');
+  const [formattedCreatedAt, setFormattedCreatedAt] = useState('');
+  const i18nRef = useRef(i18n);
+  i18nRef.current = i18n;
+  useEffect(() => {
+    const date = updatedAt || createdAt;
+    if (!date) {
+      setRelativeTime('');
+      return;
+    }
+    const update = () => setRelativeTime(formatTimeToNow({
+      date,
+      i18n: i18nRef.current
+    }));
+    update();
+    const interval = setInterval(update, 60000);
+    return () => clearInterval(interval);
+  }, [updatedAt, createdAt]);
+  useEffect(() => {
+    if (updatedAt) {
+      setFormattedUpdatedAt(formatDate({
+        date: updatedAt,
+        i18n,
+        pattern: dateFormat
+      }));
+    }
+    if (createdAt) {
+      setFormattedCreatedAt(formatDate({
+        date: createdAt,
+        i18n,
+        pattern: dateFormat
+      }));
+    }
+  }, [updatedAt, createdAt, i18n, dateFormat]);
+  const showUpdatedAt = Boolean(collectionConfig?.timestamps && isEditing && (updatedAt || createdAt));
+  const handleOnClose = useCallback(() => {
+    if (isModified) {
+      openModal(leaveWithoutSavingModalSlug);
     } else {
-      t4 = $[14];
+      closeModal(drawerSlug);
     }
-    t3 = _jsxs("div", {
-      className: `${documentDrawerBaseClass}__header`,
-      children: [_jsxs("div", {
+  }, [isModified, openModal, closeModal, drawerSlug]);
+  const showLockedMetaIcon = user && readOnlyForIncomingUser;
+  return /*#__PURE__*/_jsxs("div", {
+    className: `${documentDrawerBaseClass}__header`,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${documentDrawerBaseClass}__header-bar`,
+      children: [/*#__PURE__*/_jsxs("div", {
         className: `${documentDrawerBaseClass}__header-content`,
-        children: [_jsx(Button, {
-          "aria-label": t("general:close"),
+        children: [/*#__PURE__*/_jsx(Button, {
+          "aria-label": t('general:close'),
           buttonStyle: "ghost",
           className: `${documentDrawerBaseClass}__header-close`,
-          icon: _jsx(ChevronIcon, {
+          icon: /*#__PURE__*/_jsx(ChevronIcon, {
             direction: "left",
             size: 24
           }),
           onClick: handleOnClose
-        }), _jsx("h2", {
+        }), /*#__PURE__*/_jsx("span", {
           className: `${documentDrawerBaseClass}__header-text`,
-          children: _jsx(RenderTitle, {
-            element: "span"
-          })
+          children: headerLabel
         })]
-      }), showDocumentID && _jsx(DocumentID, {}), AfterHeader ? _jsx("div", {
+      }), actions ? /*#__PURE__*/_jsx("div", {
+        className: `${documentDrawerBaseClass}__header-actions`,
+        children: actions
+      }) : null]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${documentDrawerBaseClass}__title-bar`,
+      children: [/*#__PURE__*/_jsx(RenderTitle, {
+        className: `${documentDrawerBaseClass}__title`,
+        element: "h2",
+        renderAsLink: renderTitleAsLink
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${documentDrawerBaseClass}__meta`,
+        children: [Boolean(showLockedMetaIcon || BeforeDocumentMeta) && /*#__PURE__*/_jsxs("div", {
+          className: `${documentDrawerBaseClass}__before-meta`,
+          children: [showLockedMetaIcon && /*#__PURE__*/_jsx(Locked, {
+            className: `${documentDrawerBaseClass}__locked-controls`,
+            user: user
+          }), BeforeDocumentMeta]
+        }), showStatus ? /*#__PURE__*/_jsx(RenderCustomComponent, {
+          CustomComponent: CustomStatus,
+          Fallback: /*#__PURE__*/_jsx(Status, {})
+        }) : null, showUpdatedAt ? /*#__PURE__*/_jsx("span", {
+          className: `${documentDrawerBaseClass}__updated-at`,
+          title: formattedUpdatedAt || formattedCreatedAt || undefined,
+          children: relativeTime ? t(isTrashed ? 'general:deletedAgo' : 'general:updatedAgo', {
+            distance: relativeTime
+          }) : `${t('general:loading')}...`
+        }) : null, showAutosave ? /*#__PURE__*/_jsx(Autosave, {
+          collection: collectionConfig,
+          global: globalConfig,
+          id: id,
+          publishedDocUpdatedAt: data?.createdAt
+        }) : null]
+      }), AfterHeader ? /*#__PURE__*/_jsx("div", {
         className: `${documentDrawerBaseClass}__after-header`,
         children: AfterHeader
-      }) : null, _jsx(LeaveWithoutSavingModal, {
-        modalSlug: leaveWithoutSavingModalSlug,
-        onConfirm: t4
-      })]
-    });
-    $[5] = AfterHeader;
-    $[6] = closeModal;
-    $[7] = drawerSlug;
-    $[8] = handleOnClose;
-    $[9] = showDocumentID;
-    $[10] = t;
-    $[11] = t3;
-  } else {
-    t3 = $[11];
-  }
-  return t3;
-};
-const DocumentID = () => {
-  const $ = _c(3);
-  const {
-    id
-  } = useDocumentInfo();
-  const {
-    title
-  } = useDocumentTitle();
-  let t0;
-  if ($[0] !== id || $[1] !== title) {
-    t0 = id && id !== title ? _jsx(IDLabel, {
-      id: id.toString()
-    }) : null;
-    $[0] = id;
-    $[1] = title;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  return t0;
+      }) : null]
+    }), /*#__PURE__*/_jsx(LeaveWithoutSavingModal, {
+      modalSlug: leaveWithoutSavingModalSlug,
+      onConfirm: () => closeModal(drawerSlug)
+    })]
+  });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/DocumentDrawer/DrawerHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useCallback","useModal","RenderTitle","useFormModified","ChevronIcon","useDocumentInfo","useDocumentTitle","useTranslation","Button","IDLabel","LeaveWithoutSavingModal","documentDrawerBaseClass","leaveWithoutSavingModalSlug","DocumentDrawerHeader","t0","$","AfterHeader","drawerSlug","showDocumentID","t1","undefined","closeModal","openModal","t","isModified","t2","handleOnClose","t3","t4","_jsxs","className","children","_jsx","buttonStyle","icon","direction","size","element","DocumentID","modalSlug","onConfirm","id","title","toString"],"sources":["../../../../src/elements/DocumentDrawer/DrawerHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback } from 'react'\n\nimport { useModal } from '../../../elements/Modal/index.js'\nimport { RenderTitle } from '../../../elements/RenderTitle/index.js'\nimport { useFormModified } from '../../../forms/Form/index.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useDocumentTitle } from '../../../providers/DocumentTitle/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { IDLabel } from '../../IDLabel/index.js'\nimport { LeaveWithoutSavingModal } from '../../LeaveWithoutSaving/index.js'\nimport { documentDrawerBaseClass } from '../index.js'\nimport './index.css'\n\nconst leaveWithoutSavingModalSlug = 'leave-without-saving-doc-drawer'\n\nexport const DocumentDrawerHeader: React.FC<{\n  AfterHeader?: React.ReactNode\n  drawerSlug: string\n  showDocumentID?: boolean\n}> = ({ AfterHeader, drawerSlug, showDocumentID = true }) => {\n  const { closeModal, openModal } = useModal()\n  const { t } = useTranslation()\n  const isModified = useFormModified()\n\n  const handleOnClose = useCallback(() => {\n    if (isModified) {\n      openModal(leaveWithoutSavingModalSlug)\n    } else {\n      closeModal(drawerSlug)\n    }\n  }, [isModified, openModal, closeModal, drawerSlug])\n\n  return (\n    <div className={`${documentDrawerBaseClass}__header`}>\n      <div className={`${documentDrawerBaseClass}__header-content`}>\n        <Button\n          aria-label={t('general:close')}\n          buttonStyle=\"ghost\"\n          className={`${documentDrawerBaseClass}__header-close`}\n          icon={<ChevronIcon direction=\"left\" size={24} />}\n          onClick={handleOnClose}\n        />\n        <h2 className={`${documentDrawerBaseClass}__header-text`}>\n          {<RenderTitle element=\"span\" />}\n        </h2>\n      </div>\n      {showDocumentID && <DocumentID />}\n      {AfterHeader ? (\n        <div className={`${documentDrawerBaseClass}__after-header`}>{AfterHeader}</div>\n      ) : null}\n\n      <LeaveWithoutSavingModal\n        modalSlug={leaveWithoutSavingModalSlug}\n        onConfirm={() => closeModal(drawerSlug)}\n      />\n    </div>\n  )\n}\n\nconst DocumentID: React.FC = () => {\n  const { id } = useDocumentInfo()\n  const { title } = useDocumentTitle()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","hasAutosaveEnabled","hasDraftsEnabled","useCallback","useEffect","useRef","useState","useModal","RenderTitle","useFormModified","ChevronIcon","useConfig","useDocumentInfo","useTranslation","formatDate","formatTimeToNow","Autosave","Button","LeaveWithoutSavingModal","Locked","RenderCustomComponent","Status","documentDrawerBaseClass","leaveWithoutSavingModalSlug","DocumentDrawerHeader","actions","AfterHeader","BeforeDocumentMeta","drawerSlug","readOnlyForIncomingUser","renderTitleAsLink","CustomStatus","user","closeModal","openModal","i18n","t","config","getEntityConfig","isModified","id","collectionSlug","data","globalSlug","hasSavePermission","isEditing","isTrashed","collectionConfig","globalConfig","collectionHasDraftsEnabled","globalHasDraftsEnabled","autosaveEnabled","unsavedDraftWithValidations","versions","drafts","validate","showStatus","Boolean","showAutosave","singularLabel","labels","singular","label","headerLabel","updatedAt","createdAt","admin","dateFormat","relativeTime","setRelativeTime","formattedUpdatedAt","setFormattedUpdatedAt","formattedCreatedAt","setFormattedCreatedAt","i18nRef","current","date","update","interval","setInterval","clearInterval","pattern","showUpdatedAt","timestamps","handleOnClose","showLockedMetaIcon","_jsxs","className","_jsx","buttonStyle","icon","direction","size","onClick","element","renderAsLink","CustomComponent","Fallback","title","undefined","distance","collection","global","publishedDocUpdatedAt","modalSlug","onConfirm"],"sources":["../../../../src/elements/DocumentDrawer/DrawerHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientUser } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useModal } from '../../../elements/Modal/index.js'\nimport { RenderTitle } from '../../../elements/RenderTitle/index.js'\nimport { useFormModified } from '../../../forms/Form/index.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { formatDate, formatTimeToNow } from '../../../utilities/formatDocTitle/formatDateTitle.js'\nimport { Autosave } from '../../Autosave/index.js'\nimport { Button } from '../../Button/index.js'\nimport { LeaveWithoutSavingModal } from '../../LeaveWithoutSaving/index.js'\nimport { Locked } from '../../Locked/index.js'\nimport { RenderCustomComponent } from '../../RenderCustomComponent/index.js'\nimport { Status } from '../../Status/index.js'\nimport { documentDrawerBaseClass } from '../index.js'\nimport './index.css'\n\nconst leaveWithoutSavingModalSlug = 'leave-without-saving-doc-drawer'\n\nexport const DocumentDrawerHeader: React.FC<{\n  actions?: React.ReactNode\n  AfterHeader?: React.ReactNode\n  BeforeDocumentMeta?: React.ReactNode\n  drawerSlug: string\n  readOnlyForIncomingUser?: boolean\n  renderTitleAsLink?: boolean\n  Status?: React.ReactNode\n  user?: ClientUser\n}> = ({\n  actions,\n  AfterHeader,\n  BeforeDocumentMeta,\n  drawerSlug,\n  readOnlyForIncomingUser,\n  renderTitleAsLink = true,\n  Status: CustomStatus,\n  user,\n}) => {\n  const { closeModal, openModal } = useModal()\n  const { i18n, t } = useTranslation()\n  const { config, getEntityConfig } = useConfig()\n  const isModified = useFormModified()\n  const { id, collectionSlug, data, globalSlug, hasSavePermission, isEditing, isTrashed } =\n    useDocumentInfo()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const globalConfig = getEntityConfig({ globalSlug })\n\n  const collectionHasDraftsEnabled = hasDraftsEnabled(collectionConfig)\n  const globalHasDraftsEnabled = hasDraftsEnabled(globalConfig)\n  const autosaveEnabled = hasAutosaveEnabled(collectionConfig) || hasAutosaveEnabled(globalConfig)\n\n  const unsavedDraftWithValidations =\n    !id && collectionConfig?.versions?.drafts && collectionConfig.versions?.drafts.validate\n\n  const showStatus =\n    (collectionHasDraftsEnabled || globalHasDraftsEnabled) &&\n    (Boolean(globalConfig) || (Boolean(collectionConfig) && isEditing))\n\n  const showAutosave =\n    (collectionHasDraftsEnabled || globalHasDraftsEnabled) &&\n    hasSavePermission &&\n    autosaveEnabled &&\n    !unsavedDraftWithValidations &&\n    !isTrashed\n\n  const singularLabel = getTranslation(\n    collectionConfig?.labels?.singular ?? globalConfig?.label ?? t('general:document'),\n    i18n,\n  )\n\n  const headerLabel = id\n    ? `${t('general:editing')} ${singularLabel}`\n    : t('general:creatingNewLabel', { label: singularLabel })\n\n  const updatedAt = data?.updatedAt\n  const createdAt = data?.createdAt\n\n  const {\n    admin: { dateFormat },\n  } = config\n\n  const [relativeTime, setRelativeTime] = useState<string>('')\n  const [formattedUpdatedAt, setFormattedUpdatedAt] = useState<string>('')\n  const [formattedCreatedAt, setFormattedCreatedAt] = useState<string>('')\n\n  const i18nRef = useRef(i18n)\n  i18nRef.current = i18n\n\n  useEffect(() => {\n    const date = updatedAt || createdAt\n\n    if (!date) {\n      setRelativeTime('')\n      return\n    }\n\n    const update = () => setRelativeTime(formatTimeToNow({ date, i18n: i18nRef.current }))\n\n    update()\n    const interval = setInterval(update, 60000)\n    return () => clearInterval(interval)\n  }, [updatedAt, createdAt])\n\n  useEffect(() => {\n    if (updatedAt) {\n      setFormattedUpdatedAt(formatDate({ date: updatedAt, i18n, pattern: dateFormat }))\n    }\n    if (createdAt) {\n      setFormattedCreatedAt(formatDate({ date: createdAt, i18n, pattern: dateFormat }))\n    }\n  }, [updatedAt, createdAt, i18n, dateFormat])\n\n  const showUpdatedAt = Boolean(\n    collectionConfig?.timestamps && isEditing && (updatedAt || createdAt),\n  )\n\n  const handleOnClose = useCallback(() => {\n    if (isModified) {\n      openModal(leaveWithoutSavingModalSlug)\n    } else {\n      closeModal(drawerSlug)\n    }\n  }, [isModified, openModal, closeModal, drawerSlug])\n\n  const showLockedMetaIcon = user && readOnlyForIncomingUser\n\n  return (\n    <div className={`${documentDrawerBaseClass}__header`}>\n      <div className={`${documentDrawerBaseClass}__header-bar`}>\n        <div className={`${documentDrawerBaseClass}__header-content`}>\n          <Button\n            aria-label={t('general:close')}\n            buttonStyle=\"ghost\"\n            className={`${documentDrawerBaseClass}__header-close`}\n            icon={<ChevronIcon direction=\"left\" size={24} />}\n            onClick={handleOnClose}\n          />\n          <span className={`${documentDrawerBaseClass}__header-text`}>{headerLabel}</span>\n        </div>\n        {actions ? (\n          <div className={`${documentDrawerBaseClass}__header-actions`}>{actions}</div>\n        ) : null}\n      </div>\n\n      <div className={`${documentDrawerBaseClass}__title-bar`}>\n        <RenderTitle\n          className={`${documentDrawerBaseClass}__title`}\n          element=\"h2\"\n          renderAsLink={renderTitleAsLink}\n        />\n        <div className={`${documentDrawerBaseClass}__meta`}>\n          {Boolean(showLockedMetaIcon || BeforeDocumentMeta) && (\n            <div className={`${documentDrawerBaseClass}__before-meta`}>\n              {showLockedMetaIcon && (\n                <Locked className={`${documentDrawerBaseClass}__locked-controls`} user={user} />\n              )}\n              {BeforeDocumentMeta}\n            </div>\n          )}\n          {showStatus ? (\n            <RenderCustomComponent CustomComponent={CustomStatus} Fallback={<Status />} />\n          ) : null}\n          {showUpdatedAt ? (\n            <span\n              className={`${documentDrawerBaseClass}__updated-at`}\n              title={formattedUpdatedAt || formattedCreatedAt || undefined}\n            >\n              {relativeTime\n                ? t(isTrashed ? 'general:deletedAgo' : 'general:updatedAgo', {\n                    distance: relativeTime,\n                  })\n                : `${t('general:loading')}...`}\n            </span>\n          ) : null}\n          {showAutosave ? (\n            <Autosave\n              collection={collectionConfig}\n              global={globalConfig}\n              id={id}\n              publishedDocUpdatedAt={data?.createdAt}\n            />\n          ) : null}\n        </div>\n        {AfterHeader ? (\n          <div className={`${documentDrawerBaseClass}__after-header`}>{AfterHeader}</div>\n        ) : null}\n      </div>\n\n      <LeaveWithoutSavingModal\n        modalSlug={leaveWithoutSavingModalSlug}\n        onConfirm={() => closeModal(drawerSlug)}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DocumentDrawer/types.d.ts

@@ -38,6 +38,7 @@ export type DocumentTogglerProps = {
     readonly extraButtonProps?: Record<string, any>;
     readonly onClick?: () => void;
     readonly operation: Operation;
+    readonly tooltip?: string;
 } & Readonly<HTMLAttributes<HTMLButtonElement>>;
 export type UseDocumentDrawerContext = {
     closeDrawer: () => void;

package/dist/elements/DocumentDrawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"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"}

package/dist/elements/DocumentDrawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type { Data, DefaultDocumentIDType, FormState, Operation } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { Props as DrawerProps } from '../Drawer/types.js'\nimport type { DocumentDrawerContextProps } from './Provider.js'\n\nexport type DocumentDrawerProps = {\n  readonly AfterFields?: React.ReactNode\n  /**\n   * The slug of the collection to which the document belongs.\n   */\n  readonly collectionSlug: string\n  readonly disableActions?: boolean\n  readonly drawerSlug?: string\n  /**\n   * The ID of the document to be edited.\n   * When provided, will be fetched and displayed in the drawer.\n   * If omitted, will render the \"create new\" view for the given collection.\n   */\n  readonly id?: DefaultDocumentIDType | null\n  readonly initialData?: Data\n  /**\n   * @deprecated\n   */\n  readonly initialState?: FormState\n  readonly overrideEntityVisibility?: boolean\n  readonly redirectAfterCreate?: boolean\n  readonly redirectAfterDelete?: boolean\n  readonly redirectAfterDuplicate?: boolean\n  readonly redirectAfterRestore?: boolean\n} & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> &\n  Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly extraButtonProps?: Record<string, any>\n  readonly onClick?: () => void\n  readonly operation: Operation\n} & Readonly<HTMLAttributes<HTMLButtonElement>>\n\nexport type UseDocumentDrawerContext = {\n  closeDrawer: () => void\n  drawerDepth: number\n  drawerSlug: string\n  isDrawerOpen: boolean\n  openDrawer: () => void\n  toggleDrawer: () => void\n}\n\nexport type UseDocumentDrawer = (\n  args: {\n    /**\n     * Optional custom drawer slug. If provided, this will be used instead of auto-generating one.\n     * Useful for ensuring stable slugs in contexts where component remounting can cause issues.\n     */\n    drawerSlug?: string\n  } & Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>,\n) => [\n  // drawer\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentDrawerProps, 'collectionSlug' | 'operation'>\n  >,\n  // toggler\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentTogglerProps, 'collectionSlug' | 'operation'>\n  >,\n  // context\n  UseDocumentDrawerContext,\n]\n"],"mappings":"AAuDA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type { Data, DefaultDocumentIDType, FormState, Operation } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { Props as DrawerProps } from '../Drawer/types.js'\nimport type { DocumentDrawerContextProps } from './Provider.js'\n\nexport type DocumentDrawerProps = {\n  readonly AfterFields?: React.ReactNode\n  /**\n   * The slug of the collection to which the document belongs.\n   */\n  readonly collectionSlug: string\n  readonly disableActions?: boolean\n  readonly drawerSlug?: string\n  /**\n   * The ID of the document to be edited.\n   * When provided, will be fetched and displayed in the drawer.\n   * If omitted, will render the \"create new\" view for the given collection.\n   */\n  readonly id?: DefaultDocumentIDType | null\n  readonly initialData?: Data\n  /**\n   * @deprecated\n   */\n  readonly initialState?: FormState\n  readonly overrideEntityVisibility?: boolean\n  readonly redirectAfterCreate?: boolean\n  readonly redirectAfterDelete?: boolean\n  readonly redirectAfterDuplicate?: boolean\n  readonly redirectAfterRestore?: boolean\n} & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> &\n  Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly extraButtonProps?: Record<string, any>\n  readonly onClick?: () => void\n  readonly operation: Operation\n  readonly tooltip?: string\n} & Readonly<HTMLAttributes<HTMLButtonElement>>\n\nexport type UseDocumentDrawerContext = {\n  closeDrawer: () => void\n  drawerDepth: number\n  drawerSlug: string\n  isDrawerOpen: boolean\n  openDrawer: () => void\n  toggleDrawer: () => void\n}\n\nexport type UseDocumentDrawer = (\n  args: {\n    /**\n     * Optional custom drawer slug. If provided, this will be used instead of auto-generating one.\n     * Useful for ensuring stable slugs in contexts where component remounting can cause issues.\n     */\n    drawerSlug?: string\n  } & Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>,\n) => [\n  // drawer\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentDrawerProps, 'collectionSlug' | 'operation'>\n  >,\n  // toggler\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentTogglerProps, 'collectionSlug' | 'operation'>\n  >,\n  // context\n  UseDocumentDrawerContext,\n]\n"],"mappings":"AAwDA","ignoreList":[]}

package/dist/elements/DocumentFields/index.css

@@ -94,7 +94,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacer-3);
-    padding-top: var(--spacer-5);
+    padding-top: var(--spacer-4);
     padding-left: var(--gutter-h);
     padding-right: var(--gutter-h);
     padding-bottom: var(--spacing-view-bottom);
@@ -192,7 +192,66 @@
     }
   }
 
+  /* Inside a drawer, collapse the sidebar based on the drawer container width
+     rather than the viewport. Sidebars show when the drawer is >= 768px wide. */
+  @container drawer (max-width: 768px) {
+    .document-fields--has-sidebar .document-fields__main {
+      width: 100%;
+    }
+
+    [dir='ltr'] .document-fields--has-sidebar .document-fields__edit {
+      border-right: 0;
+    }
+
+    [dir='rtl'] .document-fields--has-sidebar .document-fields__edit {
+      border-left: 0;
+    }
+
+    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
+      margin-right: calc(var(--gutter-h) * -1);
+    }
+
+    .document-fields {
+      display: block;
+    }
+
+    .document-fields__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    .document-fields__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+      min-width: initial;
+      border-left: 0;
+    }
+
+    .document-fields__form {
+      display: block;
+    }
+
+    .document-fields__sidebar-fields {
+      padding-top: 0;
+      padding-bottom: 0;
+      gap: var(--spacer-2);
+    }
+
+    .document-fields__sidebar {
+      padding-bottom: calc(var(--spacer-5) * 2);
+      overflow: visible;
+    }
+  }
+
+  /* When shown inside a drawer (container >= 768px), keep a minimum sidebar width of 320px. */
+  @container drawer (min-width: 768px) {
+    .document-fields--has-sidebar .document-fields__sidebar-wrap {
+      min-width: 320px;
+    }
+  }
+
   .drawer .document-fields__edit {
-    padding: var(--spacer-2-5);
+    padding: var(--gutter-h);
   }
 }

package/dist/elements/DocumentLocked/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .document-locked__updated-at {
+    margin-top: var(--spacer-2);
+  }
+}

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

@@ -1,5 +1,6 @@
 import type { ClientUser } from 'payload';
 import React from 'react';
+import './index.css';
 export declare const DocumentLocked: React.FC<{
     handleGoBack: () => void;
     isActive: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentLocked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAoB,MAAM,OAAO,CAAA;AAyBxC,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;CACpC,CAoEA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentLocked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,OAAO,KAAoB,MAAM,OAAO,CAAA;AAexC,OAAO,aAAa,CAAA;AAkBpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;CACpC,CAkDA,CAAA"}