@payloadcms/ui 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/elements/BulkUpload/FileSidebar/index.scss

@@ -1,275 +1,317 @@
 @import '../../../scss/styles.scss';
 
-.file-selections {
-  --file-gutter-h: calc(var(--gutter-h) / 4);
-  border-right: 1px solid var(--theme-border-color);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-  overflow: auto;
-  max-height: 100%;
-
-  &__header {
-    position: sticky;
-    top: 0;
-    margin-top: var(--base);
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    background: var(--theme-bg);
-    flex-wrap: wrap;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  &__headerTopRow {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--base);
-    width: 100%;
-    padding-block: var(--base);
-    padding-inline: var(--file-gutter-h);
-  }
-
-  &__header__text {
+@layer payload-default {
+  .file-selections {
+    --file-gutter-h: calc(var(--gutter-h) / 4);
+    border-right: 1px solid var(--theme-border-color);
+    padding: 0;
     display: flex;
     flex-direction: column;
+    width: 300px;
+    overflow: auto;
+    max-height: 100%;
 
-    .error-pill {
-      align-self: flex-start;
-    }
-  }
+    &__header {
+      position: sticky;
+      top: 0;
+      margin-top: var(--base);
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      background: var(--theme-bg);
+      flex-wrap: wrap;
 
-  &__filesContainer {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-    margin-top: calc(var(--base) / 2);
-    width: 100%;
-    padding-inline: var(--file-gutter-h);
-  }
-  
-  &__fileRowContainer {
-    --rowPadding: calc(var(--base) / 4);
-    position: relative;
-    &:last-child {
-      margin-bottom: calc(var(--base) / 4);
+      p {
+        margin: 0;
+      }
     }
-  }
 
-  &__fileRow {
-    @include btn-reset;
-    display: flex;
-    padding: var(--rowPadding);
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    border-radius: var(--style-radius-m);
-    max-width: 100%;
-    cursor: pointer;
-    width: 100%;
-
-    &:hover {
-      background-color: var(--theme-elevation-100);
+    &__headerTopRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--base);
+      width: 100%;
+      padding-block: var(--base);
+      padding-inline: var(--file-gutter-h);
     }
 
-    img {
-      width: 25px;
-      height: 25px;
-      flex-shrink: 0;
-      object-fit: cover;
-      border-radius: var(--style-radius-m);
-    }
+    &__header__text {
+      display: flex;
+      flex-direction: column;
 
-    p {
-      margin: 0;
+      .error-pill {
+        align-self: flex-start;
+      }
     }
-  }
 
-  &__fileDetails {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
+    &__filesContainer {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+      margin-top: calc(var(--base) / 2);
+      width: 100%;
+      padding-inline: var(--file-gutter-h);
 
-  &__fileRowContainer--active {
-    .file-selections__fileRow {
-      background-color: var(--theme-elevation-100);
+      .shimmer-effect {
+        border-radius: var(--style-radius-m);
+      }
     }
 
-    .file-selections__remove {
-      .icon--x {
-        opacity: 1;
+    &__fileRowContainer {
+      --rowPadding: calc(var(--base) / 4);
+      position: relative;
+      &:last-child {
+        margin-bottom: calc(var(--base) / 4);
       }
     }
-  }
 
-  &__fileRowContainer--error {
-    .file-selections__fileRow {
-      background-color: var(--theme-error-100);
+    &__fileRow {
+      @include btn-reset;
+      display: flex;
+      padding: var(--rowPadding);
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      border-radius: var(--style-radius-m);
+      max-width: 100%;
+      cursor: pointer;
+      width: 100%;
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+
+      .thumbnail {
+        width: base(1.2);
+        height: base(1.2);
+        flex-shrink: 0;
+        object-fit: cover;
+        border-radius: var(--style-radius-s);
+      }
+
+      p {
+        margin: 0;
+      }
     }
 
-    &.file-selections__fileRowContainer--active .file-selections__fileRow,
-    .file-selections__fileRow:hover {
-      background-color: var(--theme-error-200);
+    &__fileDetails {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
     }
 
-    .file-selections__remove--overlay:hover {
-      background-color: var(--theme-error-50);
+    &__fileRowContainer--active {
+      .file-selections__fileRow {
+        background-color: var(--theme-elevation-100);
+      }
 
-      .icon--x {
-        opacity: 1;
+      .file-selections__remove {
+        .icon--x {
+          opacity: 1;
+        }
       }
     }
-  }
 
-  &__errorCount {
-    margin-left: auto;
-    position: absolute;
-    transform: translate(50%, -50%);
-    top: 0;
-    right: 0;
-  }
+    &__fileRowContainer--error {
+      .file-selections__fileRow {
+        background-color: var(--theme-error-100);
+      }
 
-  &__fileName {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+      &.file-selections__fileRowContainer--active .file-selections__fileRow,
+      .file-selections__fileRow:hover {
+        background-color: var(--theme-error-200);
+      }
 
-  &__fileSize {
-    font-size: calc(var(--base) / 2);
-    color: var(--theme-elvation-400);
-    flex-shrink: 0;
-  }
+      .file-selections__remove--overlay:hover {
+        background-color: var(--theme-error-50);
 
-  &__remove {
-    @include btn-reset;
-    margin: 0;
-    margin-left: auto;
+        .icon--x {
+          opacity: 1;
+        }
+      }
+    }
 
-    .icon--x {
-      opacity: 0.75;
+    &__errorCount {
+      margin-left: auto;
+      position: absolute;
+      transform: translate(50%, -50%);
+      top: 0;
+      right: 0;
     }
-  }
 
-  &__remove--underlay {
-    pointer-events: none;
-    opacity: 0;
-  }
+    &__fileName {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-  &__remove--overlay {
-    position: absolute;
-    transform: translateY(-50%);
-    top: 50%;
-    bottom: 50%;
-    right: var(--rowPadding);
-    height: 20px;
-    border-radius: var(--style-radius-m);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--theme-elevation-200);
+    &__fileSize {
+      font-size: calc(var(--base) / 2);
+      color: var(--theme-elvation-400);
+      flex-shrink: 0;
     }
-  }
 
-  &__header__actions {
-    display: flex;
-    gap: var(--base);
-  }
+    &__remove {
+      @include btn-reset;
+      margin: 0;
+      margin-left: auto;
 
-  &__toggler {
-    display: none;
-    margin: 0;
-    padding-block: 0;
-  }
+      .icon--x {
+        opacity: 0.75;
+      }
+    }
 
-  &__header__mobileDocActions {
-    display: none;
-  }
+    &__remove--underlay {
+      pointer-events: none;
+      opacity: 0;
+    }
 
-  &__animateWrapper {
-    overflow: auto;
-  }
+    &__remove--overlay {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      bottom: 50%;
+      right: var(--rowPadding);
+      height: 20px;
+      border-radius: var(--style-radius-m);
+      cursor: pointer;
 
-  &__mobileBlur {
-    @include blur-bg;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
+    }
 
-  }
-  
-  &__showingFiles {
-    .file-selections__mobileBlur {
-      opacity: 1;
+    &__header__actions {
+      display: flex;
+      gap: var(--base);
     }
-  }
 
-  @include mid-break {
-    --file-gutter-h: var(--gutter-h);
-    flex-direction: column-reverse;
-    width: 100%;
-    position: sticky;
-    bottom: 0;
-    flex-shrink: 0;
+    &__toggler {
+      display: none;
+      margin: 0;
+      padding-block: 0;
 
-    &__showingFiles {
-      z-index: 2;
+      &__text {
+        display: none;
+      }
     }
-    
-    &__filesContainer {
-      @include blur-bg;
+
+    &__header__mobileDocActions {
+      display: none;
     }
-    
-    &__fileRowContainer {
-      z-index: 1;
+
+    &__animateWrapper {
+      overflow: auto;
     }
 
-    &__header {
-      margin-top: 0;
+    &__mobileBlur {
+      @include blur-bg;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
     }
-    
-    &__headerTopRow {
-      border-top: 1px solid var(--theme-border-color);
-      padding-block: calc(var(--base) * 0.8);
+
+    &__showingFiles {
+      .file-selections__mobileBlur {
+        opacity: 1;
+      }
     }
 
-    &__header__mobileDocActions {
-      position: relative;
-      display: flex;
+    @include mid-break {
+      --file-gutter-h: var(--gutter-h);
+      flex-direction: column-reverse;
       width: 100%;
-      padding-block: calc(var(--base) * 0.8);
-      padding-inline: var(--file-gutter-h);
-      border-top: 1px solid var(--theme-border-color);
-      
-      > div {
+      position: sticky;
+      bottom: 0;
+      flex-shrink: 0;
+
+      &__showingFiles {
+        z-index: 2;
+      }
+
+      &__filesContainer {
+        @include blur-bg;
+      }
+
+      &__fileRowContainer {
+        z-index: 1;
+      }
+
+      &__header {
+        margin-top: 0;
+      }
+
+      &__headerTopRow {
+        border-top: 1px solid var(--theme-border-color);
+        padding-block: 0 calc(var(--base) * 0.8) 0;
+      }
+
+      &__header__text {
+        display: none;
+      }
+
+      &__header__actions {
+        flex-grow: 2;
         display: flex;
         justify-content: flex-end;
+      }
+
+      &__header__mobileDocActions {
+        position: relative;
+        display: flex;
         width: 100%;
-        button {
-          flex: .5;
+        padding-block: calc(var(--base) * 0.8);
+        padding-inline: var(--file-gutter-h);
+        border-top: 1px solid var(--theme-border-color);
+
+        > div {
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+          button {
+            flex: 0.5;
+          }
         }
       }
-    }
-    
-    &__toggler {
-      padding-right: 0;
-      display: block;
-    }
 
-    .btn {
-      margin: 0;
+      &__toggler {
+        padding-right: 0;
+        padding-left: 0;
+        padding-top: calc(var(--base) * 0.8);
+        padding-bottom: calc(var(--base) * 0.8);
+        display: flex;
+        justify-content: flex-end;
+        flex-grow: 1;
+
+        .btn__label {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        &__text {
+          display: flex;
+        }
+
+        svg {
+          max-width: 1.5rem;
+        }
+
+        .btn__content {
+          width: 100%;
+        }
+      }
+
+      .btn {
+        margin: 0;
+      }
     }
   }
-
 }

package/dist/elements/BulkUpload/FormsManager/index.d.ts

@@ -1,18 +1,18 @@
-import type { Data, DocumentPermissions } from 'payload';
+import type { Data, DocumentPermissions, DocumentSlots } from 'payload';
 import React from 'react';
-import type { BulkUploadProps } from '../index.js';
 import type { State } from './reducer.js';
 type FormsManagerContext = {
     readonly activeIndex: State['activeIndex'];
-    readonly addFiles: (filelist: FileList) => void;
+    readonly addFiles: (filelist: FileList) => Promise<void>;
     readonly collectionSlug: string;
     readonly docPermissions?: DocumentPermissions;
+    readonly documentSlots: DocumentSlots;
     readonly forms: State['forms'];
     getFormDataRef: React.RefObject<() => Data>;
     readonly hasPublishPermission: boolean;
     readonly hasSavePermission: boolean;
     readonly hasSubmitted: boolean;
-    readonly isLoadingFiles: boolean;
+    readonly isInitializing: boolean;
     readonly removeFile: (index: number) => void;
     readonly saveAllDocs: ({ overrides }?: {
         overrides?: Record<string, unknown>;
@@ -22,14 +22,13 @@ type FormsManagerContext = {
         errorCount: number;
         index: number;
     }) => void;
+    readonly thumbnailUrls: string[];
     readonly totalErrorCount?: number;
 };
-type Props = {
+type FormsManagerProps = {
     readonly children: React.ReactNode;
-    readonly collectionSlug: string;
-    readonly onSuccess: BulkUploadProps['onSuccess'];
 };
-export declare function FormsManagerProvider({ children, collectionSlug, onSuccess }: Props): React.JSX.Element;
+export declare function FormsManagerProvider({ children }: FormsManagerProps): React.JSX.Element;
 export declare function useFormsManager(): FormsManagerContext;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/BulkUpload/FormsManager/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FormsManager/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAA;AAInE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAazC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;IAC1C,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,mBAAmB,CAAA;IAC7C,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IAC9B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChG,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,sBAAsB,EAAE,CAAC,EAChC,UAAU,EACV,KAAK,GACN,EAAE;QACD,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;IACV,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;CAClC,CAAA;AA0BD,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;CACjD,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,KAAK,qBA2RlF;AAED,wBAAgB,eAAe,wBAE9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FormsManager/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,mBAAmB,EAAE,aAAa,EAAa,MAAM,SAAS,CAAA;AAIlF,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAezC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;IAC1C,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,mBAAmB,CAAA;IAC7C,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAA;IACrC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IAC9B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChG,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,sBAAsB,EAAE,CAAC,EAChC,UAAU,EACV,KAAK,GACN,EAAE;QACD,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;IACV,QAAQ,CAAC,aAAa,EAAE,MAAM,EAAE,CAAA;IAChC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;CAClC,CAAA;AA4BD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAuXnE;AAED,wBAAgB,eAAe,wBAE9B"}