@payloadcms/ui 3.0.0-canary.d894ac7 → 3.0.0-canary.e198dc5

package/dist/elements/DocumentControls/index.scss

@@ -1,229 +1,239 @@
 @import '../../scss/styles.scss';
 
-.doc-controls {
-  @include blur-bg-light;
-  position: sticky;
-  top: 0;
-  width: 100%;
-  z-index: 5;
-  display: flex;
-  align-items: center;
-
-  &__divider {
-    content: '';
-    display: block;
-    position: absolute;
-    height: 1px;
-    background: var(--theme-elevation-100);
+@layer payload-default {
+  .doc-controls {
+    @include blur-bg-light;
+    position: sticky;
+    top: 0;
     width: 100%;
-    left: 0;
-    top: 100%;
-  }
-
-  &__wrapper {
-    position: relative;
-    width: 100%;
-    display: flex;
-    align-items: space-between;
-    gap: var(--base);
-    padding-bottom: 1px;
-    z-index: 4;
-    height: var(--doc-controls-height);
-  }
-
-  &__content {
+    z-index: 5;
     display: flex;
     align-items: center;
-    flex-grow: 1;
-    overflow: hidden;
-    padding: base(0.8) 0;
-  }
 
-  &__meta {
-    flex-grow: 1;
-    display: flex;
-    list-style: none;
-    padding: 0;
-    gap: var(--base);
-    margin: 0;
-    width: 100%;
-
-    & button {
-      margin: 0;
+    &__divider {
+      content: '';
+      display: block;
+      position: absolute;
+      height: 1px;
+      background: var(--theme-elevation-100);
+      width: 100%;
+      left: 0;
+      top: 100%;
     }
-  }
 
-  &__list-item {
-    display: flex;
-    align-items: center;
-    margin: 0;
-  }
+    &__wrapper {
+      position: relative;
+      width: 100%;
+      display: flex;
+      align-items: space-between;
+      gap: var(--base);
+      padding-bottom: 1px;
+      z-index: 4;
+      height: var(--doc-controls-height);
+    }
 
-  &__value-wrap {
-    overflow: hidden;
-  }
+    &__content {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      overflow: hidden;
+      padding: base(0.8) 0;
+    }
 
-  &__value {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 0;
-    font-weight: 600;
-    line-height: base(1.2);
-  }
+    &__meta {
+      flex-grow: 1;
+      display: flex;
+      list-style: none;
+      padding: 0;
+      gap: var(--base);
+      margin: 0;
+      width: 100%;
 
-  &__label {
-    color: var(--theme-elevation-500);
-    white-space: nowrap;
-    margin: 0;
-  }
+      & button {
+        margin: 0;
+      }
+    }
 
-  &__controls-wrapper {
-    --controls-gap: calc(var(--base) / 2);
-    --dot-button-width: calc(var(--base) * 2);
-    display: flex;
-    align-items: center;
-    margin: 0;
-    gap: var(--controls-gap);
-    position: relative;
-  }
+    &__locked-controls.locked {
+      position: unset;
 
-  &__controls {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    gap: calc(var(--base) / 2);
+      .tooltip {
+        top: calc(var(--base) * -0.5);
+      }
+    }
 
-    button {
+    &__list-item {
+      display: flex;
+      align-items: center;
       margin: 0;
+    }
+
+    &__value-wrap {
+      overflow: hidden;
+    }
+
+    &__value {
+      overflow: hidden;
+      text-overflow: ellipsis;
       white-space: nowrap;
+      margin: 0;
+      font-weight: 600;
+      line-height: base(1.2);
     }
-  }
 
-  &__dots {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 2px;
-    border: 1px solid var(--theme-elevation-100);
-    border-radius: $style-radius-m;
-    height: calc(var(--base) * 1.6);
-    width: calc(var(--base) * 1.6);
+    &__label {
+      color: var(--theme-elevation-500);
+      white-space: nowrap;
+      margin: 0;
+    }
 
-    &:hover {
-      border: 1px solid var(--theme-elevation-500);
-      background-color: var(--theme-elevation-100);
+    &__controls-wrapper {
+      --controls-gap: calc(var(--base) / 2);
+      --dot-button-width: calc(var(--base) * 2);
+      display: flex;
+      align-items: center;
+      margin: 0;
+      gap: var(--controls-gap);
+      position: relative;
     }
 
-    > div {
-      width: 3px;
-      height: 3px;
-      border-radius: 100%;
-      background-color: currentColor;
+    &__controls {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      gap: calc(var(--base) / 2);
+
+      button {
+        margin: 0;
+        white-space: nowrap;
+      }
     }
-  }
 
-  &__popup {
-    position: relative;
-  }
+    &__dots {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 2px;
+      border: 1px solid var(--theme-elevation-100);
+      border-radius: $style-radius-m;
+      height: calc(var(--base) * 1.6);
+      width: calc(var(--base) * 1.6);
 
-  .popup--active {
-    .doc-controls {
-      &__dots {
+      &:hover {
         border: 1px solid var(--theme-elevation-500);
         background-color: var(--theme-elevation-100);
       }
-    }
-  }
-
-  .popup__trigger-wrap {
-    display: flex;
-  }
 
-  @include mid-break {
-    // On mobile, only stick the controls to the top
-    // The timestamps and meta can scroll past
-    // The same container needs to the sticky, though
-    // So we use a static height with a negative top equal to the meta height plus top padding
-    top: base(-2.8);
-    padding-right: 0;
-    padding-left: 0;
+      > div {
+        width: 3px;
+        height: 3px;
+        border-radius: 100%;
+        background-color: currentColor;
+      }
+    }
 
-    &__wrapper {
-      flex-direction: column;
-      gap: 0;
-      height: unset;
+    &__popup {
+      position: relative;
     }
 
-    &__content {
-      width: 100%;
-      overflow: auto;
-      padding-inline: base(2);
-      // this container has a fixed height
-      // this means the scrollbar (when present) overlaps the content
-      &::-webkit-scrollbar {
-        display: none;
+    .popup--active {
+      .doc-controls {
+        &__dots {
+          border: 1px solid var(--theme-elevation-500);
+          background-color: var(--theme-elevation-100);
+        }
       }
     }
 
-    &__meta {
-      width: auto;
-      gap: calc(var(--base) / 2);
+    .popup__trigger-wrap {
+      display: flex;
+    }
 
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0;
-        width: base(0.8);
-        height: var(--base);
-        background: linear-gradient(to right, transparent, var(--theme-bg));
-        flex-shrink: 0;
-        z-index: 1111;
-        pointer-events: none;
+    @include mid-break {
+      // On mobile, only stick the controls to the top
+      // The timestamps and meta can scroll past
+      // The same container needs to the sticky, though
+      // So we use a static height with a negative top equal to the meta height plus top padding
+      top: base(-2.8);
+      padding-right: 0;
+      padding-left: 0;
+
+      &__wrapper {
+        flex-direction: column;
+        gap: 0;
+        height: unset;
       }
-    }
 
-    &__controls-wrapper {
-      background-color: var(--theme-bg);
-      width: 100%;
-      transform: translate3d(0, 0, 0);
-      padding-right: var(--gutter-h);
-      justify-content: space-between;
-      height: var(--doc-controls-height);
-      border-top: 1px solid var(--theme-elevation-100);
-    }
+      &__content {
+        width: 100%;
+        overflow: auto;
+        padding-inline: base(2);
+        // this container has a fixed height
+        // this means the scrollbar (when present) overlaps the content
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
 
-    &__controls {
-      padding-left: var(--gutter-h);
-      overflow: auto;
+      &__meta {
+        width: auto;
+        gap: calc(var(--base) / 2);
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          right: 0;
+          width: base(0.8);
+          height: var(--base);
+          background: linear-gradient(to right, transparent, var(--theme-bg));
+          flex-shrink: 0;
+          z-index: 1111;
+          pointer-events: none;
+        }
+      }
 
-      // do not show scrollbar because the parent container has a static height
-      // this container has a gradient overlay as visual indication of `overflow: scroll`
-      &::-webkit-scrollbar {
-        display: none;
+      &__controls-wrapper {
+        background-color: var(--theme-bg);
+        width: 100%;
+        transform: translate3d(0, 0, 0);
+        padding-right: var(--gutter-h);
+        justify-content: space-between;
+        height: var(--doc-controls-height);
+        border-top: 1px solid var(--theme-elevation-100);
       }
 
-      &::after {
-        content: '';
-        display: block;
-        position: sticky;
-        right: 0;
-        width: calc(var(--base) * 2);
-        height: calc(var(--base) * 1.5);
-        background: linear-gradient(to right, transparent, var(--theme-bg));
-        flex-shrink: 0;
-        z-index: 1111;
-        pointer-events: none;
+      &__controls {
+        padding-left: var(--gutter-h);
+        overflow: auto;
+
+        // do not show scrollbar because the parent container has a static height
+        // this container has a gradient overlay as visual indication of `overflow: scroll`
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        &::after {
+          content: '';
+          display: block;
+          position: sticky;
+          right: 0;
+          width: calc(var(--base) * 2);
+          height: calc(var(--base) * 1.5);
+          background: linear-gradient(to right, transparent, var(--theme-bg));
+          flex-shrink: 0;
+          z-index: 1111;
+          pointer-events: none;
+        }
       }
     }
-  }
 
-  @include small-break {
-    &__content {
-      padding-inline: base(0.8);
+    @include small-break {
+      &__content {
+        padding-inline: base(0.8);
+      }
     }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAcrD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0F/D,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAcrD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwI/D,CAAA"}

package/dist/elements/DocumentDrawer/DrawerContent.js

@@ -5,25 +5,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import React, { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
-import { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js';
 import { XIcon } from '../../icons/X/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { useRelatedCollections } from '../AddNewRelation/useRelatedCollections.js';
 import { Gutter } from '../Gutter/index.js';
 import { IDLabel } from '../IDLabel/index.js';
 import { RenderTitle } from '../RenderTitle/index.js';
 import { baseClass } from './index.js';
 export const DocumentDrawerContent = t0 => {
-  const $ = _c(29);
+  const $ = _c(46);
   const {
     id: existingDocID,
-    Header,
+    AfterFields,
     collectionSlug,
+    disableActions,
     drawerSlug,
-    onSave: onSaveFromProps
+    Header,
+    initialData,
+    initialState,
+    onDelete: onDeleteFromProps,
+    onDuplicate: onDuplicateFromProps,
+    onSave: onSaveFromProps,
+    redirectAfterDelete,
+    redirectAfterDuplicate
   } = t0;
   const {
     config
@@ -102,71 +110,134 @@ export const DocumentDrawerContent = t0 => {
   }
   const onSave = t5;
   let t6;
-  if ($[12] !== Header) {
-    t6 = Header || _jsx(RenderTitle, {
+  if ($[12] !== onDuplicateFromProps || $[13] !== collectionConfig) {
+    t6 = args_0 => {
+      setDocID(args_0.doc.id);
+      if (typeof onDuplicateFromProps === "function") {
+        onDuplicateFromProps({
+          ...args_0,
+          collectionConfig
+        });
+      }
+    };
+    $[12] = onDuplicateFromProps;
+    $[13] = collectionConfig;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  const onDuplicate = t6;
+  let t7;
+  if ($[15] !== onDeleteFromProps || $[16] !== collectionConfig || $[17] !== closeModal || $[18] !== drawerSlug) {
+    t7 = args_1 => {
+      if (typeof onDeleteFromProps === "function") {
+        onDeleteFromProps({
+          ...args_1,
+          collectionConfig
+        });
+      }
+      closeModal(drawerSlug);
+    };
+    $[15] = onDeleteFromProps;
+    $[16] = collectionConfig;
+    $[17] = closeModal;
+    $[18] = drawerSlug;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  const onDelete = t7;
+  let t8;
+  if ($[20] !== Header) {
+    t8 = Header || _jsx(RenderTitle, {
       element: "span"
     });
-    $[12] = Header;
-    $[13] = t6;
+    $[20] = Header;
+    $[21] = t8;
   } else {
-    t6 = $[13];
+    t8 = $[21];
   }
-  let t7;
-  if ($[14] !== t6 || $[15] !== t || $[16] !== toggleModal || $[17] !== drawerSlug || $[18] !== Edit || $[19] !== apiURL || $[20] !== collectionConfig.slug || $[21] !== docID || $[22] !== isEditing || $[23] !== onLoadError || $[24] !== onSave) {
-    let t8;
-    if ($[26] !== toggleModal || $[27] !== drawerSlug) {
-      t8 = () => toggleModal(drawerSlug);
-      $[26] = toggleModal;
-      $[27] = drawerSlug;
-      $[28] = t8;
+  let t9;
+  if ($[22] !== t8 || $[23] !== t || $[24] !== toggleModal || $[25] !== drawerSlug || $[26] !== redirectAfterDelete || $[27] !== redirectAfterDuplicate || $[28] !== Edit || $[29] !== AfterFields || $[30] !== apiURL || $[31] !== collectionConfig.slug || $[32] !== disableActions || $[33] !== docID || $[34] !== initialData || $[35] !== initialState || $[36] !== isEditing || $[37] !== onDelete || $[38] !== onDuplicate || $[39] !== onLoadError || $[40] !== onSave) {
+    let t10;
+    if ($[42] !== toggleModal || $[43] !== drawerSlug) {
+      t10 = () => toggleModal(drawerSlug);
+      $[42] = toggleModal;
+      $[43] = drawerSlug;
+      $[44] = t10;
+    } else {
+      t10 = $[44];
+    }
+    let t11;
+    if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = () => {
+        setDocID(null);
+      };
+      $[45] = t11;
     } else {
-      t8 = $[28];
+      t11 = $[45];
     }
-    t7 = _jsx(DocumentInfoProvider, {
+    t9 = _jsx(DocumentInfoProvider, {
+      AfterFields,
+      apiURL,
       BeforeDocument: _jsxs(Gutter, {
         className: `${baseClass}__header`,
         children: [_jsxs("div", {
           className: `${baseClass}__header-content`,
           children: [_jsx("h2", {
             className: `${baseClass}__header-text`,
-            children: t6
+            children: t8
           }), _jsx("button", {
             "aria-label": t("general:close"),
             className: `${baseClass}__header-close`,
-            onClick: t8,
+            onClick: t10,
             type: "button",
             children: _jsx(XIcon, {})
           })]
         }), _jsx(DocumentTitle, {})]
       }),
-      apiURL,
       collectionSlug: collectionConfig.slug,
-      disableActions: true,
+      disableActions,
       disableLeaveWithoutSaving: true,
       id: docID,
+      initialData,
+      initialState,
       isEditing,
+      onDelete,
+      onDrawerCreate: t11,
+      onDuplicate,
       onLoadError,
       onSave,
+      redirectAfterDelete: redirectAfterDelete !== undefined ? redirectAfterDelete : false,
+      redirectAfterDuplicate: redirectAfterDuplicate !== undefined ? redirectAfterDuplicate : false,
       children: _jsx(RenderComponent, {
         mappedComponent: Edit
       })
     });
-    $[14] = t6;
-    $[15] = t;
-    $[16] = toggleModal;
-    $[17] = drawerSlug;
-    $[18] = Edit;
-    $[19] = apiURL;
-    $[20] = collectionConfig.slug;
-    $[21] = docID;
-    $[22] = isEditing;
-    $[23] = onLoadError;
-    $[24] = onSave;
-    $[25] = t7;
+    $[22] = t8;
+    $[23] = t;
+    $[24] = toggleModal;
+    $[25] = drawerSlug;
+    $[26] = redirectAfterDelete;
+    $[27] = redirectAfterDuplicate;
+    $[28] = Edit;
+    $[29] = AfterFields;
+    $[30] = apiURL;
+    $[31] = collectionConfig.slug;
+    $[32] = disableActions;
+    $[33] = docID;
+    $[34] = initialData;
+    $[35] = initialState;
+    $[36] = isEditing;
+    $[37] = onDelete;
+    $[38] = onDuplicate;
+    $[39] = onLoadError;
+    $[40] = onSave;
+    $[41] = t9;
   } else {
-    t7 = $[25];
+    t9 = $[41];
   }
-  return t7;
+  return t9;
 };
 const DocumentTitle = () => {
   const $ = _c(3);