@payloadcms/ui 3.80.0-internal.cdd7ef7 → 3.80.0

package/dist/elements/FolderView/Drawers/MoveToFolder/index.scss

@@ -0,0 +1,30 @@
+@layer payload-default {
+  .move-folder-drawer {
+    &__body-section {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      gap: var(--base);
+    }
+
+    &__breadcrumbs-section {
+      padding: calc(var(--base) * 0.75) var(--gutter-h);
+      border-bottom: 1px solid var(--theme-elevation-100);
+      display: flex;
+      justify-content: space-between;
+
+      .move-folder-drawer__add-folder-button {
+        margin-left: var(--base);
+      }
+    }
+
+    &__folder-breadcrumbs-root {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 2);
+    }
+
+    .item-card-grid__title {
+      display: none;
+    }
+  }
+}

package/dist/elements/FolderView/FilterFolderTypePill/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+export declare function FilterFolderTypePill(): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FolderView/FilterFolderTypePill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/FilterFolderTypePill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,wBAAgB,oBAAoB,sBAoDnC"}

package/dist/elements/FolderView/FilterFolderTypePill/index.js

@@ -0,0 +1,102 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useFolder } from '../../../providers/Folders/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { CheckboxPopup } from '../../CheckboxPopup/index.js';
+import './index.scss';
+const baseClass = 'collection-type';
+export function FilterFolderTypePill() {
+  const $ = _c(13);
+  const {
+    activeCollectionFolderSlugs: visibleCollectionSlugs,
+    allCollectionFolderSlugs: folderCollectionSlugs,
+    folderCollectionSlug,
+    refineFolderData
+  } = useFolder();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  let t0;
+  if ($[0] !== config || $[1] !== folderCollectionSlug || $[2] !== folderCollectionSlugs || $[3] !== getEntityConfig || $[4] !== i18n) {
+    t0 = () => config.collections.reduce((acc, collection) => {
+      if (collection.folders && folderCollectionSlugs.includes(collection.slug)) {
+        acc.push({
+          label: getTranslation(collection.labels?.plural, i18n),
+          value: collection.slug
+        });
+      }
+      return acc;
+    }, [{
+      label: getTranslation(getEntityConfig({
+        collectionSlug: folderCollectionSlug
+      }).labels?.plural, i18n),
+      value: folderCollectionSlug
+    }]);
+    $[0] = config;
+    $[1] = folderCollectionSlug;
+    $[2] = folderCollectionSlugs;
+    $[3] = getEntityConfig;
+    $[4] = i18n;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+  const [allCollectionOptions] = React.useState(t0);
+  let t1;
+  if ($[6] !== allCollectionOptions || $[7] !== refineFolderData || $[8] !== t || $[9] !== visibleCollectionSlugs) {
+    let t2;
+    if ($[11] !== refineFolderData) {
+      t2 = t3 => {
+        const {
+          selectedValues: relationTo
+        } = t3;
+        refineFolderData({
+          query: {
+            relationTo
+          },
+          updateURL: true
+        });
+      };
+      $[11] = refineFolderData;
+      $[12] = t2;
+    } else {
+      t2 = $[12];
+    }
+    t1 = _jsx(CheckboxPopup, {
+      Button: _jsxs(Button, {
+        buttonStyle: "pill",
+        el: "div",
+        icon: "chevron",
+        margin: false,
+        size: "small",
+        children: [visibleCollectionSlugs.length ? _jsx("span", {
+          className: `${baseClass}__count`,
+          children: visibleCollectionSlugs.length
+        }) : null, t("version:type")]
+      }),
+      onChange: t2,
+      options: allCollectionOptions,
+      selectedValues: visibleCollectionSlugs
+    }, "relation-to-selection-popup");
+    $[6] = allCollectionOptions;
+    $[7] = refineFolderData;
+    $[8] = t;
+    $[9] = visibleCollectionSlugs;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  return t1;
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/FolderView/FilterFolderTypePill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useConfig","useFolder","useTranslation","Button","CheckboxPopup","baseClass","FilterFolderTypePill","$","activeCollectionFolderSlugs","visibleCollectionSlugs","allCollectionFolderSlugs","folderCollectionSlugs","folderCollectionSlug","refineFolderData","i18n","t","config","getEntityConfig","t0","collections","reduce","acc","collection","folders","includes","slug","push","label","labels","plural","value","collectionSlug","allCollectionOptions","useState","t1","t2","t3","selectedValues","relationTo","query","updateURL","_jsx","_jsxs","buttonStyle","el","icon","margin","size","children","length","className","options"],"sources":["../../../../src/elements/FolderView/FilterFolderTypePill/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { CheckboxPopup } from '../../CheckboxPopup/index.js'\nimport './index.scss'\n\nconst baseClass = 'collection-type'\n\nexport function FilterFolderTypePill() {\n  const {\n    activeCollectionFolderSlugs: visibleCollectionSlugs,\n    allCollectionFolderSlugs: folderCollectionSlugs,\n    folderCollectionSlug,\n    refineFolderData,\n  } = useFolder()\n  const { i18n, t } = useTranslation()\n  const { config, getEntityConfig } = useConfig()\n\n  const [allCollectionOptions] = React.useState(() => {\n    return config.collections.reduce(\n      (acc, collection) => {\n        if (collection.folders && folderCollectionSlugs.includes(collection.slug)) {\n          acc.push({\n            label: getTranslation(collection.labels?.plural, i18n),\n            value: collection.slug,\n          })\n        }\n\n        return acc\n      },\n      [\n        {\n          label: getTranslation(\n            getEntityConfig({ collectionSlug: folderCollectionSlug }).labels?.plural,\n            i18n,\n          ),\n          value: folderCollectionSlug,\n        },\n      ],\n    )\n  })\n\n  return (\n    <CheckboxPopup\n      Button={\n        <Button buttonStyle=\"pill\" el=\"div\" icon=\"chevron\" margin={false} size=\"small\">\n          {visibleCollectionSlugs.length ? (\n            <span className={`${baseClass}__count`}>{visibleCollectionSlugs.length}</span>\n          ) : null}\n          {t('version:type')}\n        </Button>\n      }\n      key=\"relation-to-selection-popup\"\n      onChange={({ selectedValues: relationTo }) => {\n        void refineFolderData({ query: { relationTo }, updateURL: true })\n      }}\n      options={allCollectionOptions}\n      selectedValues={visibleCollectionSlugs}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FolderView/FilterFolderTypePill/index.scss

@@ -0,0 +1,16 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .collection-type {
+    &__count {
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      background-color: var(--theme-bg);
+      color: var(--theme-text);
+      padding: 0px 3px;
+      border-radius: var(--style-radius-s);
+      margin-left: -4px;
+      margin-right: calc(var(--base) * 0.25);
+    }
+  }
+}

package/dist/elements/FolderView/FolderField/index.scss

@@ -0,0 +1,12 @@
+@layer payload-default {
+  .folder-edit-field {
+    display: none;
+  }
+
+  .edit-many-bulk-uploads__main,
+  .edit-many__main {
+    .folder-edit-field {
+      display: initial;
+    }
+  }
+}

package/dist/elements/FolderView/FolderField/index.server.d.ts

@@ -0,0 +1,4 @@
+import type { RelationshipFieldServerProps } from 'payload';
+import './index.scss';
+export declare const FolderField: (props: RelationshipFieldServerProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.server.d.ts.map

package/dist/elements/FolderView/FolderField/index.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/FolderField/index.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAI3D,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,UAAW,4BAA4B,gCAW9D,CAAA"}

package/dist/elements/FolderView/FolderField/index.server.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// eslint-disable-next-line payload/no-imports-from-exports-dir
+import { MoveDocToFolder } from '../../../exports/client/index.js';
+import './index.scss';
+const baseClass = 'folder-edit-field';
+export const FolderField = props => {
+  if (props.payload.config.folders === false) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(MoveDocToFolder, {
+    className: baseClass,
+    folderCollectionSlug: props.payload.config.folders.slug,
+    folderFieldName: props.payload.config.folders.fieldName
+  });
+};
+//# sourceMappingURL=index.server.js.map

package/dist/elements/FolderView/FolderField/index.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.js","names":["MoveDocToFolder","baseClass","FolderField","props","payload","config","folders","_jsx","className","folderCollectionSlug","slug","folderFieldName","fieldName"],"sources":["../../../../src/elements/FolderView/FolderField/index.server.tsx"],"sourcesContent":["import type { RelationshipFieldServerProps } from 'payload'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir\nimport { MoveDocToFolder } from '../../../exports/client/index.js'\nimport './index.scss'\n\nconst baseClass = 'folder-edit-field'\n\nexport const FolderField = (props: RelationshipFieldServerProps) => {\n  if (props.payload.config.folders === false) {\n    return null\n  }\n  return (\n    <MoveDocToFolder\n      className={baseClass}\n      folderCollectionSlug={props.payload.config.folders.slug}\n      folderFieldName={props.payload.config.folders.fieldName}\n    />\n  )\n}\n"],"mappings":";AAEA;AACA,SAASA,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAAeC,KAAA;EAC1B,IAAIA,KAAA,CAAMC,OAAO,CAACC,MAAM,CAACC,OAAO,KAAK,OAAO;IAC1C,OAAO;EACT;EACA,oBACEC,IAAA,CAACP,eAAA;IACCQ,SAAA,EAAWP,SAAA;IACXQ,oBAAA,EAAsBN,KAAA,CAAMC,OAAO,CAACC,MAAM,CAACC,OAAO,CAACI,IAAI;IACvDC,eAAA,EAAiBR,KAAA,CAAMC,OAAO,CAACC,MAAM,CAACC,OAAO,CAACM;;AAGpD","ignoreList":[]}

package/dist/elements/FolderView/FolderFileCard/index.d.ts

@@ -0,0 +1,30 @@
+import type { FolderOrDocument } from 'payload/shared';
+import React from 'react';
+import './index.scss';
+type Props = {
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly folderType?: string[];
+    readonly id: number | string;
+    readonly isDeleting?: boolean;
+    readonly isFocused?: boolean;
+    readonly isSelected?: boolean;
+    readonly itemKey: string;
+    readonly onClick?: (e: React.MouseEvent) => void;
+    readonly onKeyDown?: (e: React.KeyboardEvent) => void;
+    readonly PopupActions?: React.ReactNode;
+    readonly previewUrl?: string;
+    readonly selectedCount?: number;
+    readonly title: string;
+    readonly type: 'file' | 'folder';
+};
+export declare function FolderFileCard({ id, type, className, disabled, folderType, isDeleting, isFocused, isSelected, itemKey, onClick, onKeyDown, PopupActions, previewUrl, selectedCount, title, }: Props): React.JSX.Element;
+type ContextCardProps = {
+    readonly className?: string;
+    readonly index: number;
+    readonly item: FolderOrDocument;
+    readonly type: 'file' | 'folder';
+};
+export declare function ContextFolderFileCard({ type, className, index, item }: ContextCardProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FolderView/FolderFileCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/FolderFileCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAItD,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IAC9B,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAA;IACrD,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;CACjC,CAAA;AACD,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,SAAc,EACd,QAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,SAAiB,EACjB,UAAkB,EAClB,OAAO,EACP,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,aAAiB,EACjB,KAAK,GACN,EAAE,KAAK,qBAkFP;AA4BD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,EAAE,gBAAgB,CAAA;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;CACjC,CAAA;AACD,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,gBAAgB,qBA0BvF"}

package/dist/elements/FolderView/FolderFileCard/index.js

@@ -0,0 +1,209 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDroppable } from '@dnd-kit/core';
+import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
+import { DocumentIcon } from '../../../icons/Document/index.js';
+import { ThreeDotsIcon } from '../../../icons/ThreeDots/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useFolder } from '../../../providers/Folders/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Popup } from '../../Popup/index.js';
+import { Thumbnail } from '../../Thumbnail/index.js';
+import { ColoredFolderIcon } from '../ColoredFolderIcon/index.js';
+import { DraggableWithClick } from '../DraggableWithClick/index.js';
+import './index.scss';
+const baseClass = 'folder-file-card';
+export function FolderFileCard({
+  id,
+  type,
+  className = '',
+  disabled = false,
+  folderType,
+  isDeleting = false,
+  isFocused = false,
+  isSelected = false,
+  itemKey,
+  onClick,
+  onKeyDown,
+  PopupActions,
+  previewUrl,
+  selectedCount = 0,
+  title
+}) {
+  const disableDrop = !id || disabled || type !== 'folder';
+  const {
+    isOver,
+    setNodeRef
+  } = useDroppable({
+    id: itemKey,
+    data: {
+      id,
+      type,
+      folderType
+    },
+    disabled: disableDrop
+  });
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const copyOfRef = ref.current;
+    if (isFocused && ref.current) {
+      ref.current.focus();
+    } else if (!isFocused && ref.current) {
+      ref.current.blur();
+    }
+    return () => {
+      if (copyOfRef) {
+        copyOfRef.blur();
+      }
+    };
+  }, [isFocused]);
+  return /*#__PURE__*/_jsxs(DraggableWithClick, {
+    className: [baseClass, className, isSelected && `${baseClass}--selected`, disabled && `${baseClass}--disabled`, isDeleting && `${baseClass}--deleting`, isFocused && `${baseClass}--focused`, isOver && `${baseClass}--over`, `${baseClass}--${type}`].filter(Boolean).join(' '),
+    disabled: disabled || !onClick && !onKeyDown,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    ref: ref,
+    children: [!disableDrop ? /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__drop-area`,
+      ref: setNodeRef
+    }) : null, type === 'file' ? /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__preview-area`,
+      children: previewUrl ? /*#__PURE__*/_jsx(Thumbnail, {
+        fileSrc: previewUrl
+      }) : /*#__PURE__*/_jsx(DocumentIcon, {})
+    }) : null, /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__titlebar-area`,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__icon-wrap`,
+        children: type === 'file' ? /*#__PURE__*/_jsx(DocumentIcon, {}) : /*#__PURE__*/_jsx(ColoredFolderIcon, {})
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__titlebar-labels`,
+        children: [/*#__PURE__*/_jsx("p", {
+          className: `${baseClass}__name`,
+          title: title,
+          children: /*#__PURE__*/_jsx("span", {
+            children: title
+          })
+        }), folderType && folderType.length > 0 ? /*#__PURE__*/_jsx(AssignedCollections, {
+          folderType: folderType
+        }) : null]
+      }), PopupActions ? /*#__PURE__*/_jsx(Popup, {
+        button: /*#__PURE__*/_jsx(ThreeDotsIcon, {}),
+        disabled: selectedCount > 1 || selectedCount === 1 && !isSelected,
+        horizontalAlign: "right",
+        size: "large",
+        verticalAlign: "bottom",
+        children: PopupActions
+      }) : null]
+    })]
+  }, itemKey);
+}
+function AssignedCollections({
+  folderType
+}) {
+  const {
+    config
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const collectionsDisplayText = React.useMemo(() => {
+    return folderType.reduce((acc, collection) => {
+      const collectionConfig = config.collections?.find(c => c.slug === collection);
+      if (collectionConfig) {
+        return [...acc, getTranslation(collectionConfig.labels.plural, i18n)];
+      }
+      return acc;
+    }, []);
+  }, [folderType, config.collections, i18n]);
+  return /*#__PURE__*/_jsx("p", {
+    className: `${baseClass}__assigned-collections`,
+    children: collectionsDisplayText.map((label, index) => /*#__PURE__*/_jsxs("span", {
+      children: [label, index < folderType.length - 1 ? ', ' : '']
+    }, label))
+  });
+}
+export function ContextFolderFileCard(t0) {
+  const $ = _c(18);
+  const {
+    type,
+    className,
+    index,
+    item
+  } = t0;
+  const {
+    checkIfItemIsDisabled,
+    focusedRowIndex,
+    onItemClick,
+    onItemKeyPress,
+    selectedItemKeys
+  } = useFolder();
+  let t1;
+  if ($[0] !== checkIfItemIsDisabled || $[1] !== className || $[2] !== focusedRowIndex || $[3] !== index || $[4] !== item || $[5] !== onItemClick || $[6] !== onItemKeyPress || $[7] !== selectedItemKeys || $[8] !== type) {
+    const isSelected = selectedItemKeys.has(item.itemKey);
+    const isDisabled = checkIfItemIsDisabled(item);
+    let t2;
+    if ($[10] !== index || $[11] !== item || $[12] !== onItemClick) {
+      t2 = event => {
+        onItemClick({
+          event,
+          index,
+          item
+        });
+      };
+      $[10] = index;
+      $[11] = item;
+      $[12] = onItemClick;
+      $[13] = t2;
+    } else {
+      t2 = $[13];
+    }
+    let t3;
+    if ($[14] !== index || $[15] !== item || $[16] !== onItemKeyPress) {
+      t3 = event_0 => {
+        onItemKeyPress({
+          event: event_0,
+          index,
+          item
+        });
+      };
+      $[14] = index;
+      $[15] = item;
+      $[16] = onItemKeyPress;
+      $[17] = t3;
+    } else {
+      t3 = $[17];
+    }
+    t1 = _jsx(FolderFileCard, {
+      className,
+      disabled: isDisabled,
+      folderType: item.value.folderType || [],
+      id: item.value.id,
+      isFocused: focusedRowIndex === index,
+      isSelected,
+      itemKey: item.itemKey,
+      onClick: t2,
+      onKeyDown: t3,
+      previewUrl: item.value.url,
+      title: item.value._folderOrDocumentTitle,
+      type
+    });
+    $[0] = checkIfItemIsDisabled;
+    $[1] = className;
+    $[2] = focusedRowIndex;
+    $[3] = index;
+    $[4] = item;
+    $[5] = onItemClick;
+    $[6] = onItemKeyPress;
+    $[7] = selectedItemKeys;
+    $[8] = type;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  return t1;
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/FolderView/FolderFileCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useDroppable","getTranslation","React","DocumentIcon","ThreeDotsIcon","useConfig","useFolder","useTranslation","Popup","Thumbnail","ColoredFolderIcon","DraggableWithClick","baseClass","FolderFileCard","id","type","className","disabled","folderType","isDeleting","isFocused","isSelected","itemKey","onClick","onKeyDown","PopupActions","previewUrl","selectedCount","title","disableDrop","isOver","setNodeRef","data","ref","useRef","useEffect","copyOfRef","current","focus","blur","_jsxs","filter","Boolean","join","_jsx","fileSrc","length","AssignedCollections","button","horizontalAlign","size","verticalAlign","config","i18n","collectionsDisplayText","useMemo","reduce","acc","collection","collectionConfig","collections","find","slug","labels","plural","map","label","index","ContextFolderFileCard","t0","$","item","checkIfItemIsDisabled","focusedRowIndex","onItemClick","onItemKeyPress","selectedItemKeys","t1","has","isDisabled","t2","event","t3","event_0","value","url","_folderOrDocumentTitle"],"sources":["../../../../src/elements/FolderView/FolderFileCard/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport { useDroppable } from '@dnd-kit/core'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { DocumentIcon } from '../../../icons/Document/index.js'\nimport { ThreeDotsIcon } from '../../../icons/ThreeDots/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup } from '../../Popup/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { ColoredFolderIcon } from '../ColoredFolderIcon/index.js'\nimport { DraggableWithClick } from '../DraggableWithClick/index.js'\nimport './index.scss'\n\nconst baseClass = 'folder-file-card'\n\ntype Props = {\n  readonly className?: string\n  readonly disabled?: boolean\n  readonly folderType?: string[]\n  readonly id: number | string\n  readonly isDeleting?: boolean\n  readonly isFocused?: boolean\n  readonly isSelected?: boolean\n  readonly itemKey: string\n  readonly onClick?: (e: React.MouseEvent) => void\n  readonly onKeyDown?: (e: React.KeyboardEvent) => void\n  readonly PopupActions?: React.ReactNode\n  readonly previewUrl?: string\n  readonly selectedCount?: number\n  readonly title: string\n  readonly type: 'file' | 'folder'\n}\nexport function FolderFileCard({\n  id,\n  type,\n  className = '',\n  disabled = false,\n  folderType,\n  isDeleting = false,\n  isFocused = false,\n  isSelected = false,\n  itemKey,\n  onClick,\n  onKeyDown,\n  PopupActions,\n  previewUrl,\n  selectedCount = 0,\n  title,\n}: Props) {\n  const disableDrop = !id || disabled || type !== 'folder'\n  const { isOver, setNodeRef } = useDroppable({\n    id: itemKey,\n    data: {\n      id,\n      type,\n      folderType,\n    },\n    disabled: disableDrop,\n  })\n  const ref = React.useRef(null)\n\n  React.useEffect(() => {\n    const copyOfRef = ref.current\n    if (isFocused && ref.current) {\n      ref.current.focus()\n    } else if (!isFocused && ref.current) {\n      ref.current.blur()\n    }\n\n    return () => {\n      if (copyOfRef) {\n        copyOfRef.blur()\n      }\n    }\n  }, [isFocused])\n\n  return (\n    <DraggableWithClick\n      className={[\n        baseClass,\n        className,\n        isSelected && `${baseClass}--selected`,\n        disabled && `${baseClass}--disabled`,\n        isDeleting && `${baseClass}--deleting`,\n        isFocused && `${baseClass}--focused`,\n        isOver && `${baseClass}--over`,\n        `${baseClass}--${type}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={disabled || (!onClick && !onKeyDown)}\n      key={itemKey}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      ref={ref}\n    >\n      {!disableDrop ? <div className={`${baseClass}__drop-area`} ref={setNodeRef} /> : null}\n\n      {type === 'file' ? (\n        <div className={`${baseClass}__preview-area`}>\n          {previewUrl ? <Thumbnail fileSrc={previewUrl} /> : <DocumentIcon />}\n        </div>\n      ) : null}\n\n      <div className={`${baseClass}__titlebar-area`}>\n        <div className={`${baseClass}__icon-wrap`}>\n          {type === 'file' ? <DocumentIcon /> : <ColoredFolderIcon />}\n        </div>\n        <div className={`${baseClass}__titlebar-labels`}>\n          <p className={`${baseClass}__name`} title={title}>\n            <span>{title}</span>\n          </p>\n          {folderType && folderType.length > 0 ? (\n            <AssignedCollections folderType={folderType} />\n          ) : null}\n        </div>\n        {PopupActions ? (\n          <Popup\n            button={<ThreeDotsIcon />}\n            disabled={selectedCount > 1 || (selectedCount === 1 && !isSelected)}\n            horizontalAlign=\"right\"\n            size=\"large\"\n            verticalAlign=\"bottom\"\n          >\n            {PopupActions}\n          </Popup>\n        ) : null}\n      </div>\n    </DraggableWithClick>\n  )\n}\n\nfunction AssignedCollections({ folderType }: { folderType: string[] }) {\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n\n  const collectionsDisplayText = React.useMemo(() => {\n    return folderType.reduce((acc, collection) => {\n      const collectionConfig = config.collections?.find((c) => c.slug === collection)\n      if (collectionConfig) {\n        return [...acc, getTranslation(collectionConfig.labels.plural, i18n)]\n      }\n      return acc\n    }, [])\n  }, [folderType, config.collections, i18n])\n\n  return (\n    <p className={`${baseClass}__assigned-collections`}>\n      {collectionsDisplayText.map((label, index) => (\n        <span key={label}>\n          {label}\n          {index < folderType.length - 1 ? ', ' : ''}\n        </span>\n      ))}\n    </p>\n  )\n}\n\ntype ContextCardProps = {\n  readonly className?: string\n  readonly index: number // todo: possibly remove\n  readonly item: FolderOrDocument\n  readonly type: 'file' | 'folder'\n}\nexport function ContextFolderFileCard({ type, className, index, item }: ContextCardProps) {\n  const { checkIfItemIsDisabled, focusedRowIndex, onItemClick, onItemKeyPress, selectedItemKeys } =\n    useFolder()\n  const isSelected = selectedItemKeys.has(item.itemKey)\n  const isDisabled = checkIfItemIsDisabled(item)\n\n  return (\n    <FolderFileCard\n      className={className}\n      disabled={isDisabled}\n      folderType={item.value.folderType || []}\n      id={item.value.id}\n      isFocused={focusedRowIndex === index}\n      isSelected={isSelected}\n      itemKey={item.itemKey}\n      onClick={(event) => {\n        void onItemClick({ event, index, item })\n      }}\n      onKeyDown={(event) => {\n        void onItemKeyPress({ event, index, item })\n      }}\n      previewUrl={item.value.url}\n      title={item.value._folderOrDocumentTitle}\n      type={type}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}