@payloadcms/ui 3.0.0-canary.a5aaf21 → 3.0.0-canary.a6e7305

package/dist/elements/DocumentDrawer/index.scss

@@ -1,71 +1,73 @@
 @import '../../scss/styles.scss';
 
-.doc-drawer {
-  &__header {
-    width: 100%;
-    margin-top: base(2.5);
-    display: flex;
-    flex-direction: column;
-    gap: base(0.5);
-    align-items: flex-start;
-  }
+@layer payload-default {
+  .doc-drawer {
+    &__header {
+      width: 100%;
+      margin-top: base(2.5);
+      display: flex;
+      flex-direction: column;
+      gap: base(0.5);
+      align-items: flex-start;
+    }
 
-  &__header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    width: 100%;
-  }
+    &__header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+    }
 
-  &__header-text {
-    margin: 0;
-  }
+    &__header-text {
+      margin: 0;
+    }
 
-  &__toggler {
-    background: transparent;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    color: inherit;
+    &__toggler {
+      background: transparent;
+      border: 0;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      color: inherit;
 
-    &:focus,
-    &:focus-within {
-      outline: none;
-    }
+      &:focus,
+      &:focus-within {
+        outline: none;
+      }
 
-    &:disabled {
-      pointer-events: none;
+      &:disabled {
+        pointer-events: none;
+      }
     }
-  }
-
-  &__header-close {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    overflow: hidden;
-    width: base(2);
-    height: base(2);
 
-    svg {
+    &__header-close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      overflow: hidden;
       width: base(2);
       height: base(2);
-      position: relative;
 
-      .stroke {
-        stroke-width: 2px;
-        vector-effect: non-scaling-stroke;
+      svg {
+        width: base(2);
+        height: base(2);
+        position: relative;
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
       }
     }
-  }
 
-  @include mid-break {
-    &__header {
-      margin-top: base(1.5);
-      margin-bottom: base(0.5);
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
+    @include mid-break {
+      &__header {
+        margin-top: base(1.5);
+        margin-bottom: base(0.5);
+        padding-left: var(--gutter-h);
+        padding-right: var(--gutter-h);
+      }
     }
   }
 }

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

@@ -24,6 +24,7 @@ export type DocumentTogglerProps = {
     readonly disabled?: boolean;
     readonly drawerSlug?: string;
     readonly id?: string;
+    readonly onClick?: () => void;
 } & Readonly<HTMLAttributes<HTMLButtonElement>>;
 export type UseDocumentDrawer = (args: {
     collectionSlug: string;

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":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACpC,QAAQ,CAAC,WAAW,CAAC,EAAE,IAAI,CAAA;IAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IACzD,QAAQ,CAAC,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAC/C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAA;CAC1C,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAE/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CACrB,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAE/C,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KAAK;IAC1F,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7D;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACpC,QAAQ,CAAC,WAAW,CAAC,EAAE,IAAI,CAAA;IAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IACzD,QAAQ,CAAC,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAC/C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAA;CAC1C,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAE/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAE/C,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KAAK;IAC1F,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7D;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}

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, FormState } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'\nimport type { Props as DrawerProps } from '../Drawer/types.js'\n\nexport type DocumentDrawerProps = {\n  readonly AfterFields?: React.ReactNode\n  readonly collectionSlug: string\n  readonly disableActions?: boolean\n  readonly drawerSlug?: string\n  readonly id?: null | number | string\n  readonly initialData?: Data\n  readonly initialState?: FormState\n  readonly onDelete?: DocumentInfoContext['onDelete']\n  readonly onDuplicate?: DocumentInfoContext['onDuplicate']\n  readonly onSave?: DocumentInfoContext['onSave']\n  readonly redirectAfterDelete?: boolean\n  readonly redirectAfterDuplicate?: boolean\n} & Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly id?: string\n} & Readonly<HTMLAttributes<HTMLButtonElement>>\n\nexport type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [\n  React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer\n  React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"mappings":"AA+BA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type { Data, FormState } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'\nimport type { Props as DrawerProps } from '../Drawer/types.js'\n\nexport type DocumentDrawerProps = {\n  readonly AfterFields?: React.ReactNode\n  readonly collectionSlug: string\n  readonly disableActions?: boolean\n  readonly drawerSlug?: string\n  readonly id?: null | number | string\n  readonly initialData?: Data\n  readonly initialState?: FormState\n  readonly onDelete?: DocumentInfoContext['onDelete']\n  readonly onDuplicate?: DocumentInfoContext['onDuplicate']\n  readonly onSave?: DocumentInfoContext['onSave']\n  readonly redirectAfterDelete?: boolean\n  readonly redirectAfterDuplicate?: boolean\n} & Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly id?: string\n  readonly onClick?: () => void\n} & Readonly<HTMLAttributes<HTMLButtonElement>>\n\nexport type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [\n  React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer\n  React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"mappings":"AAgCA","ignoreList":[]}

package/dist/elements/DocumentFields/index.scss

@@ -1,91 +1,147 @@
 @import '../../scss/styles.scss';
 
-.document-fields {
-  width: 100%;
-  display: flex;
-  --doc-sidebar-width: 325px;
-
-  &--has-sidebar {
-    .document-fields {
-      &__main {
-        width: 66.66%;
-      }
+@layer payload-default {
+  .document-fields {
+    width: 100%;
+    display: flex;
+    --doc-sidebar-width: 325px;
 
-      &__edit {
-        [dir='ltr'] & {
-          top: 0;
-          right: 0;
-          border-right: 1px solid var(--theme-elevation-100);
-          padding-right: calc(var(--base) * 2);
+    &--has-sidebar {
+      .document-fields {
+        &__main {
+          width: 66.66%;
         }
 
-        [dir='rtl'] & {
-          top: 0;
-          left: 0;
-          border-left: 1px solid var(--theme-elevation-100);
-          padding-left: calc(var(--base) * 2);
+        &__edit {
+          [dir='ltr'] & {
+            top: 0;
+            right: 0;
+            border-right: 1px solid var(--theme-elevation-100);
+            padding-right: calc(var(--base) * 2);
+          }
+
+          [dir='rtl'] & {
+            top: 0;
+            left: 0;
+            border-left: 1px solid var(--theme-elevation-100);
+            padding-left: calc(var(--base) * 2);
+          }
         }
-      }
 
-      &__fields {
-        & > .tabs-field,
-        & > .group-field {
-          margin-right: calc(var(--base) * -2);
+        &__fields {
+          & > .tabs-field,
+          & > .group-field {
+            margin-right: calc(var(--base) * -2);
+          }
         }
       }
     }
-  }
 
-  &__main {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    flex-grow: 1;
-  }
+    &__main {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      flex-grow: 1;
+    }
 
-  &__edit {
-    padding-top: calc(var(--base) * 1.5);
-    padding-bottom: var(--spacing-view-bottom);
-    flex-grow: 1;
-  }
+    &__edit {
+      padding-top: calc(var(--base) * 1.5);
+      padding-bottom: var(--spacing-view-bottom);
+      flex-grow: 1;
+    }
 
-  &__sidebar-wrap {
-    position: sticky;
-    top: var(--doc-controls-height);
-    width: 33.33%;
-    height: calc(100vh - var(--doc-controls-height));
-    min-width: var(--doc-sidebar-width);
-    flex-shrink: 0;
-  }
+    &__sidebar-wrap {
+      position: sticky;
+      top: var(--doc-controls-height);
+      width: 33.33%;
+      height: calc(100vh - var(--doc-controls-height));
+      min-width: var(--doc-sidebar-width);
+      flex-shrink: 0;
+    }
 
-  &__sidebar {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
+    &__sidebar {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
 
-  &__sidebar-fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    padding-top: calc(var(--base) * 1.5);
-    padding-left: calc(var(--base) * 2);
-    padding-right: var(--gutter-h);
-    padding-bottom: var(--spacing-view-bottom);
-  }
+    &__sidebar-fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      padding-top: calc(var(--base) * 1.5);
+      padding-left: calc(var(--base) * 2);
+      padding-right: var(--gutter-h);
+      padding-bottom: var(--spacing-view-bottom);
+    }
 
-  &__label {
-    color: var(--theme-elevation-400);
-  }
+    &__label {
+      color: var(--theme-elevation-400);
+    }
+
+    &--force-sidebar-wrap {
+      display: block;
 
-  &--force-sidebar-wrap {
-    display: block;
+      .document-fields {
+        &__main {
+          width: 100%;
+          min-height: initial;
+        }
+
+        &__sidebar-wrap {
+          position: static;
+          width: 100%;
+          height: initial;
+          border-left: 0;
+        }
+
+        &__sidebar {
+          padding-bottom: base(3.5);
+          overflow: visible;
+        }
+
+        &__sidebar-fields {
+          padding-top: 0;
+          padding-left: var(--gutter-h);
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    @include mid-break {
+      display: block;
+
+      &--has-sidebar {
+        .document-fields {
+          &__main {
+            width: 100%;
+          }
+
+          &__edit {
+            [dir='ltr'] & {
+              border-right: 0;
+              padding-right: var(--gutter-h);
+            }
+
+            [dir='rtl'] & {
+              border-left: 0;
+              padding-left: var(--gutter-h);
+            }
+          }
+
+          &__fields {
+            & > .tabs-field,
+            & > .group-field {
+              margin-right: calc(var(--gutter-h) * -1);
+            }
+          }
+        }
+      }
 
-    .document-fields {
       &__main {
         width: 100%;
         min-height: initial;
@@ -98,95 +154,41 @@
         border-left: 0;
       }
 
-      &__sidebar {
-        padding-bottom: base(3.5);
-        overflow: visible;
+      &__form {
+        display: block;
       }
 
       &__sidebar-fields {
         padding-top: 0;
         padding-left: var(--gutter-h);
+        padding-right: var(--gutter-h);
         padding-bottom: 0;
-      }
-    }
-  }
-
-  @include mid-break {
-    display: block;
+        gap: base(0.5);
 
-    &--has-sidebar {
-      .document-fields {
-        &__main {
-          width: 100%;
-        }
-
-        &__edit {
-          [dir='ltr'] & {
-            border-right: 0;
-            padding-right: var(--gutter-h);
-          }
-
-          [dir='rtl'] & {
-            border-left: 0;
-            padding-left: var(--gutter-h);
-          }
+        [dir='ltr'] & {
+          padding-right: var(--gutter-h);
         }
 
-        &__fields {
-          & > .tabs-field,
-          & > .group-field {
-            margin-right: calc(var(--gutter-h) * -1);
-          }
+        [dir='rtl'] & {
+          padding-left: var(--gutter-h);
         }
       }
-    }
-
-    &__main {
-      width: 100%;
-      min-height: initial;
-    }
-
-    &__sidebar-wrap {
-      position: static;
-      width: 100%;
-      height: initial;
-      border-left: 0;
-    }
 
-    &__form {
-      display: block;
+      &__sidebar {
+        padding-bottom: base(3.5);
+        overflow: visible;
+      }
     }
 
-    &__sidebar-fields {
-      padding-top: 0;
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
-      padding-bottom: 0;
-      gap: base(0.5);
-
-      [dir='ltr'] & {
-        padding-right: var(--gutter-h);
+    @include small-break {
+      &__sidebar-wrap {
+        min-width: initial;
+        width: 100%;
       }
 
-      [dir='rtl'] & {
-        padding-left: var(--gutter-h);
+      &__edit {
+        padding-top: calc(var(--base) / 2);
       }
     }
-
-    &__sidebar {
-      padding-bottom: base(3.5);
-      overflow: visible;
-    }
-  }
-
-  @include small-break {
-    &__sidebar-wrap {
-      min-width: initial;
-      width: 100%;
-    }
-
-    &__edit {
-      padding-top: calc(var(--base) / 2);
-    }
   }
 }