@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.add4c47

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

@@ -1,25 +1,26 @@
 @layer payload-default {
   .file-selections {
-    --file-gutter-h: calc(var(--gutter-h) / 4);
-    border-right: 1px solid var(--theme-border-color);
+    --file-gutter-h: var(--spacer-2);
+    border-right: var(--stroke-width-small) solid var(--color-border);
     padding: 0;
     display: flex;
     flex-direction: column;
-    width: 300px;
+    /* File tree takes 3fr of the 3fr : 4fr : 5fr file-manager layout (≈236px). */
+    flex: 3 1 0;
+    min-width: 0;
     overflow: visible;
-    max-height: 100%;
+    max-height: 100dvh;
   }
 
   .file-selections__header {
     position: sticky;
     top: 0;
-    margin-top: var(--spacer-4);
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    background: var(--theme-bg);
+    background: var(--color-bg);
     flex-wrap: wrap;
 
     p {
@@ -29,6 +30,7 @@
 
   .file-selections__collectionSelect {
     width: 100%;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
 
     .react-select {
       width: 100%;
@@ -36,36 +38,16 @@
 
     .field-type__wrap {
       width: 100%;
-      padding-block: var(--spacer-4);
+      padding-block: var(--spacer-2-5);
       padding-inline: var(--file-gutter-h);
     }
   }
 
-  .file-selections__headerTopRow {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: var(--spacer-4);
-    width: 100%;
-    padding-block: var(--spacer-4);
-    padding-inline: var(--file-gutter-h);
-  }
-
-  .file-selections__header__text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-2);
-
-    .error-pill {
-      align-self: flex-start;
-    }
-  }
-
   .file-selections__filesContainer {
     display: flex;
     flex-direction: column;
     gap: var(--spacer-2);
-    margin-top: var(--spacer-2-5);
+    margin-top: var(--spacer-2);
     width: 100%;
     padding-inline: var(--file-gutter-h);
 
@@ -94,7 +76,7 @@
     width: 100%;
 
     &:hover {
-      background-color: var(--theme-elevation-100);
+      background-color: var(--color-bg-hover);
     }
 
     .file-selections__thumbnail,
@@ -111,6 +93,11 @@
     }
   }
 
+  .file-selections__fileRowContainer:has(.file-selections__remove--overlay:hover)
+    .file-selections__fileRow {
+    background-color: var(--color-bg-hover);
+  }
+
   .file-selections__fileDetails {
     display: flex;
     flex-direction: column;
@@ -119,7 +106,7 @@
 
   .file-selections__fileRowContainer--active {
     .file-selections__fileRow {
-      background-color: var(--theme-elevation-100);
+      background-color: var(--color-bg-hover);
     }
 
     .file-selections__remove {
@@ -129,25 +116,6 @@
     }
   }
 
-  .file-selections__fileRowContainer--error {
-    .file-selections__fileRow {
-      background-color: var(--theme-error-100);
-    }
-
-    &.file-selections__fileRowContainer--active .file-selections__fileRow,
-    .file-selections__fileRow:hover {
-      background-color: var(--theme-error-200);
-    }
-
-    .file-selections__remove--overlay:hover {
-      background-color: var(--theme-error-50);
-
-      .icon--x {
-        opacity: 1;
-      }
-    }
-  }
-
   .file-selections__errorCount {
     margin-left: auto;
     position: absolute;
@@ -167,7 +135,7 @@
     font-size: var(--text-body-small-font-size);
     font-weight: var(--text-body-small-font-weight);
     line-height: var(--text-body-small-line-height);
-    color: var(--theme-elevation-400);
+    color: var(--color-text-tertiary);
     flex-shrink: 0;
   }
 
@@ -187,75 +155,30 @@
 
   .file-selections__remove--overlay {
     position: absolute;
-    transform: translateY(-50%);
     top: 50%;
-    bottom: 50%;
     right: var(--rowPadding);
-    height: 20px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
     border-radius: var(--radius-medium);
     cursor: pointer;
 
     &:hover {
-      background-color: var(--theme-elevation-200);
-    }
-  }
-
-  .file-selections__header__actions {
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-4);
-  }
+      background-color: var(--color-bg-tertiary);
 
-  .file-selections__toggler {
-    display: none;
-    margin: 0;
-    padding-block: 0;
-  }
-
-  .file-selections__toggler__text {
-    display: none;
-  }
-
-  .file-selections__header__mobileDocActions {
-    display: none;
+      .icon--x {
+        opacity: 1;
+      }
+    }
   }
 
   .file-selections__animateWrapper {
     overflow: auto;
   }
 
-  .file-selections__mobileBlur {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
-
-    &::before,
-    &::after {
-      content: ' ';
-      position: absolute;
-      inset: 0;
-    }
-
-    &::before {
-      background: var(--theme-bg);
-      opacity: 0.75;
-    }
-
-    &::after {
-      backdrop-filter: blur(8px);
-    }
-  }
-
-  .file-selections__showingFiles {
-    .file-selections__mobileBlur {
-      opacity: 1;
-    }
-  }
-
   @media (max-width: 1024px) {
     .file-selections {
       --file-gutter-h: var(--gutter-h);
@@ -264,103 +187,83 @@
       position: sticky;
       bottom: 0;
       flex-shrink: 0;
+      border-right: 0;
+      border-top: var(--stroke-width-small) solid var(--color-border);
+      background: var(--color-bg);
+      flex: 1;
     }
 
-    .file-selections__showingFiles {
-      z-index: 2;
+    /* The file list becomes a horizontal thumbnail carousel that scrolls sideways along the bottom
+       of the body instead of stacking vertically. */
+    .file-selections__animateWrapper {
+      overflow-x: auto;
+      overflow-y: hidden;
     }
 
     .file-selections__filesContainer {
-      &::before,
-      &::after {
-        content: ' ';
-        position: absolute;
-        inset: 0;
-      }
-
-      &::before {
-        background: var(--theme-bg);
-        opacity: 0.75;
-      }
-
-      &::after {
-        backdrop-filter: blur(8px);
-      }
+      flex-direction: row;
+      margin-top: 0;
+      padding-block: var(--spacer-2);
+      width: max-content;
+      min-width: 100%;
     }
 
     .file-selections__fileRowContainer {
       z-index: 1;
-    }
+      flex: 0 0 auto;
 
-    .file-selections__header {
-      margin-top: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
 
-    .file-selections__headerTopRow {
-      border-top: 1px solid var(--theme-border-color);
-      padding-block: 0 var(--spacer-3) 0;
+    /* Each carousel item is a compact thumbnail; the file name, size and the desktop remove-button
+       spacer are hidden to keep the strip tight (the active file's name shows in the preview area). */
+    .file-selections__fileRow {
+      gap: 0;
+      padding: var(--spacer-1);
+
+      .file-selections__thumbnail,
+      .file-selections__thumbnail-shimmer {
+        width: var(--spacer-6);
+        height: var(--spacer-6);
+      }
     }
 
-    .file-selections__header__text {
+    .file-selections__fileDetails,
+    .file-selections__fileSize,
+    .file-selections__remove--underlay {
       display: none;
     }
 
-    .file-selections__header__actions {
-      flex-grow: 2;
-      display: flex;
-      justify-content: flex-end;
+    .file-selections__fileRowContainer--active .file-selections__thumbnail {
+      outline: var(--stroke-width-small) solid var(--color-text);
+      outline-offset: 2px;
     }
 
-    .file-selections__header__mobileDocActions {
-      position: relative;
-      display: flex;
-      width: 100%;
-      padding-block: var(--spacer-3);
-      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;
-        }
-      }
+    .file-selections__remove--overlay {
+      top: var(--spacer-1);
+      right: var(--spacer-1);
+      transform: none;
+      width: 20px;
+      height: 20px;
+      background: var(--color-bg);
     }
 
-    .file-selections__toggler {
-      padding-right: 0;
-      padding-left: 0;
-      padding-top: var(--spacer-3);
-      padding-bottom: var(--spacer-3);
-      display: flex;
-      justify-content: flex-end;
-      flex-grow: 1;
-
-      .btn__label {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-
-      svg {
-        max-width: 1.5rem;
-      }
-
-      .btn__content {
-        width: 100%;
-      }
+    .file-selections__header {
+      margin-top: 0;
+      border-top: var(--stroke-width-small) solid var(--color-border);
+      gap: var(--spacer-2-5);
+      padding-block: var(--spacer-2-5);
+      padding-inline: var(--file-gutter-h);
     }
 
-    .file-selections__toggler__text {
-      display: flex;
+    .file-selections__collectionSelect {
+      border-bottom: none;
     }
 
-    .file-selections .btn {
-      margin: 0;
+    .file-selections__header__error {
+      padding-inline: 0;
     }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,OAAO,aAAa,CAAA;AAQpB,wBAAgB,WAAW,sBA8M1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,aAAa,CAAA;AAMpB,wBAAgB,WAAW,sBA8H1B"}

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

@@ -2,57 +2,37 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useModal } from '@faceless-ui/modal';
-import { useWindowInfo } from '@faceless-ui/window-info';
 import { isImage } from 'payload/shared';
 import React from 'react';
 import { SelectInput } from '../../../fields/Select/Input.js';
-import { ChevronIcon } from '../../../icons/Chevron/index.js';
 import { XIcon } from '../../../icons/X/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import { AnimateHeight } from '../../AnimateHeight/index.js';
-import { Button } from '../../Button/index.js';
-import { Drawer } from '../../Drawer/index.js';
 import { ErrorPill } from '../../ErrorPill/index.js';
 import { ShimmerEffect } from '../../ShimmerEffect/index.js';
 import { createThumbnail } from '../../Thumbnail/createThumbnail.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
-import { Actions } from '../ActionsBar/index.js';
-import { AddFilesView } from '../AddFilesView/index.js';
 import './index.css';
 import { useFormsManager } from '../FormsManager/index.js';
 import { useBulkUpload } from '../index.js';
-const addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files';
 const baseClass = 'file-selections';
 export function FileSidebar() {
-  const $ = _c(39);
+  const $ = _c(22);
   const {
     activeIndex,
-    addFiles,
     forms,
     isInitializing,
     removeFile,
-    setActiveIndex,
-    totalErrorCount
+    setActiveIndex
   } = useFormsManager();
   const {
     initialFiles,
-    initialForms,
-    maxFiles
+    initialForms
   } = useBulkUpload();
   const {
     i18n,
     t
   } = useTranslation();
-  const {
-    closeModal,
-    openModal
-  } = useModal();
-  const [showFiles, setShowFiles] = React.useState(false);
-  const {
-    breakpoints
-  } = useWindowInfo();
   let t0;
   if ($[0] !== removeFile) {
     t0 = indexToRemove => {
@@ -64,21 +44,7 @@ export function FileSidebar() {
     t0 = $[1];
   }
   const handleRemoveFile = t0;
-  let t1;
-  if ($[2] !== addFiles || $[3] !== closeModal) {
-    t1 = filelist => {
-      addFiles(filelist);
-      closeModal(addMoreFilesDrawerSlug);
-    };
-    $[2] = addFiles;
-    $[3] = closeModal;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  const handleAddFiles = t1;
   const getFileSize = _temp;
-  const totalFileCount = isInitializing ? initialFiles?.length ?? initialForms?.length : forms.length;
   const {
     collectionSlug: bulkUploadCollectionSlug,
     selectableCollections,
@@ -87,41 +53,16 @@ export function FileSidebar() {
   const {
     getEntityConfig
   } = useConfig();
-  const t2 = showFiles && `${baseClass}__showingFiles`;
-  let t3;
-  if ($[5] !== t2) {
-    t3 = [baseClass, t2].filter(Boolean);
-    $[5] = t2;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  const t4 = t3.join(" ");
-  let t5;
-  if ($[7] !== activeIndex || $[8] !== breakpoints.m || $[9] !== bulkUploadCollectionSlug || $[10] !== closeModal || $[11] !== forms || $[12] !== getEntityConfig || $[13] !== handleAddFiles || $[14] !== handleRemoveFile || $[15] !== i18n || $[16] !== initialFiles || $[17] !== initialForms || $[18] !== isInitializing || $[19] !== maxFiles || $[20] !== openModal || $[21] !== selectableCollections || $[22] !== setActiveIndex || $[23] !== setCollectionSlug || $[24] !== showFiles || $[25] !== t || $[26] !== t4 || $[27] !== totalErrorCount || $[28] !== totalFileCount) {
-    let t6;
-    if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = () => setShowFiles(_temp2);
-      $[30] = t6;
-    } else {
-      t6 = $[30];
-    }
-    let t7;
-    if ($[31] !== closeModal) {
-      t7 = () => closeModal(addMoreFilesDrawerSlug);
-      $[31] = closeModal;
-      $[32] = t7;
-    } else {
-      t7 = $[32];
-    }
-    let t8;
-    if ($[33] !== activeIndex || $[34] !== handleRemoveFile || $[35] !== i18n || $[36] !== setActiveIndex || $[37] !== t) {
-      t8 = (t9, index_0) => {
+  let t1;
+  if ($[2] !== activeIndex || $[3] !== bulkUploadCollectionSlug || $[4] !== forms || $[5] !== getEntityConfig || $[6] !== handleRemoveFile || $[7] !== i18n || $[8] !== initialFiles || $[9] !== initialForms || $[10] !== isInitializing || $[11] !== selectableCollections || $[12] !== setActiveIndex || $[13] !== setCollectionSlug || $[14] !== t) {
+    let t2;
+    if ($[16] !== activeIndex || $[17] !== handleRemoveFile || $[18] !== i18n || $[19] !== setActiveIndex || $[20] !== t) {
+      t2 = (t3, index_0) => {
         const {
           errorCount,
           formID,
           formState
-        } = t9;
+        } = t3;
         const currentFile = formState?.file?.value || {};
         return _jsxs("div", {
           className: [`${baseClass}__fileRowContainer`, index_0 === activeIndex && `${baseClass}__fileRowContainer--active`, errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`].filter(Boolean).join(" "),
@@ -159,22 +100,20 @@ export function FileSidebar() {
           })]
         }, formID);
       };
-      $[33] = activeIndex;
-      $[34] = handleRemoveFile;
-      $[35] = i18n;
-      $[36] = setActiveIndex;
-      $[37] = t;
-      $[38] = t8;
+      $[16] = activeIndex;
+      $[17] = handleRemoveFile;
+      $[18] = i18n;
+      $[19] = setActiveIndex;
+      $[20] = t;
+      $[21] = t2;
     } else {
-      t8 = $[38];
+      t2 = $[21];
     }
-    t5 = _jsxs("div", {
-      className: t4,
-      children: [breakpoints.m && showFiles ? _jsx("div", {
-        className: `${baseClass}__mobileBlur`
-      }) : null, _jsxs("div", {
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [selectableCollections?.length > 1 && _jsx("div", {
         className: `${baseClass}__header`,
-        children: [selectableCollections?.length > 1 && _jsx(SelectInput, {
+        children: _jsx(SelectInput, {
           className: `${baseClass}__collectionSelect`,
           isClearable: false,
           name: "groupBy",
@@ -194,102 +133,40 @@ export function FileSidebar() {
           path: "groupBy",
           required: true,
           value: bulkUploadCollectionSlug
-        }), _jsxs("div", {
-          className: `${baseClass}__headerTopRow`,
-          children: [_jsxs("div", {
-            className: `${baseClass}__header__text`,
-            children: [_jsx(ErrorPill, {
-              count: totalErrorCount,
-              i18n,
-              withMessage: true
-            }), _jsx("p", {
-              children: _jsxs("strong", {
-                title: `${totalFileCount} ${t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
-                children: [totalFileCount, " ", t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
-              })
-            })]
-          }), _jsxs("div", {
-            className: `${baseClass}__header__actions`,
-            children: [(typeof maxFiles === "number" ? totalFileCount < maxFiles : true) ? _jsx(Button, {
-              buttonStyle: "secondary",
-              className: `${baseClass}__header__addFile`,
-              onClick: () => openModal(addMoreFilesDrawerSlug),
-              size: "medium",
-              children: t("upload:addFile")
-            }) : null, _jsxs(Button, {
-              buttonStyle: "secondary",
-              className: `${baseClass}__toggler`,
-              onClick: t6,
-              children: [_jsx("span", {
-                className: `${baseClass}__toggler__label`,
-                children: _jsxs("strong", {
-                  title: `${totalFileCount} ${t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
-                  children: [totalFileCount, " ", t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
-                })
-              }), _jsx(ChevronIcon, {
-                direction: showFiles ? "down" : "up"
-              })]
-            }), _jsx(Drawer, {
-              Header: null,
-              slug: addMoreFilesDrawerSlug,
-              children: _jsx(AddFilesView, {
-                onCancel: t7,
-                onDrop: handleAddFiles
-              })
-            })]
-          })]
-        }), _jsx("div", {
-          className: `${baseClass}__header__mobileDocActions`,
-          children: _jsx(Actions, {})
-        })]
+        })
       }), _jsx("div", {
-        className: `${baseClass}__animateWrapper`,
-        children: _jsx(AnimateHeight, {
-          height: !breakpoints.m || showFiles ? "auto" : 0,
-          children: _jsxs("div", {
-            className: `${baseClass}__filesContainer`,
-            children: [isInitializing && forms.length === 0 && (initialFiles?.length > 0 || initialForms?.length > 0) ? (initialFiles ? Array.from(initialFiles) : initialForms).map(_temp3) : null, forms.map(t8)]
-          })
+        className: `${baseClass}__animateWrapper scrollbar-thin`,
+        children: _jsxs("div", {
+          className: `${baseClass}__filesContainer`,
+          children: [isInitializing && forms.length === 0 && (initialFiles?.length > 0 || initialForms?.length > 0) ? (initialFiles ? Array.from(initialFiles) : initialForms).map(_temp2) : null, forms.map(t2)]
         })
       })]
     });
-    $[7] = activeIndex;
-    $[8] = breakpoints.m;
-    $[9] = bulkUploadCollectionSlug;
-    $[10] = closeModal;
-    $[11] = forms;
-    $[12] = getEntityConfig;
-    $[13] = handleAddFiles;
-    $[14] = handleRemoveFile;
-    $[15] = i18n;
-    $[16] = initialFiles;
-    $[17] = initialForms;
-    $[18] = isInitializing;
-    $[19] = maxFiles;
-    $[20] = openModal;
-    $[21] = selectableCollections;
-    $[22] = setActiveIndex;
-    $[23] = setCollectionSlug;
-    $[24] = showFiles;
-    $[25] = t;
-    $[26] = t4;
-    $[27] = totalErrorCount;
-    $[28] = totalFileCount;
-    $[29] = t5;
+    $[2] = activeIndex;
+    $[3] = bulkUploadCollectionSlug;
+    $[4] = forms;
+    $[5] = getEntityConfig;
+    $[6] = handleRemoveFile;
+    $[7] = i18n;
+    $[8] = initialFiles;
+    $[9] = initialForms;
+    $[10] = isInitializing;
+    $[11] = selectableCollections;
+    $[12] = setActiveIndex;
+    $[13] = setCollectionSlug;
+    $[14] = t;
+    $[15] = t1;
   } else {
-    t5 = $[29];
+    t1 = $[15];
   }
-  return t5;
+  return t1;
 }
-function _temp3(file_0, index) {
+function _temp2(file_0, index) {
   return _jsx(ShimmerEffect, {
     animationDelay: `calc(${index} * ${60}ms)`,
     height: "35px"
   }, index);
 }
-function _temp2(prev) {
-  return !prev;
-}
 function _temp(file) {
   const size = file.size;
   const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));