@payloadcms/ui 3.39.0-internal.32c7661 → 3.39.0

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

@@ -0,0 +1,287 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import { getTranslation } from '@payloadcms/translations';
+import React, { useId } from 'react';
+import { toast } from 'sonner';
+import { useForm, useFormFields } from '../../../forms/Form/context.js';
+import { FolderIcon } from '../../../icons/Folder/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { formatDrawerSlug, useDrawerDepth } from '../../Drawer/index.js';
+import { MoveItemsToFolderDrawer } from '../Drawers/MoveToFolder/index.js';
+import './index.scss';
+const baseClass = 'move-doc-to-folder';
+/**
+ * This is the button shown on the edit document view. It uses the more generic `MoveDocToFolderButton` component.
+ */
+export function MoveDocToFolder(t0) {
+  const $ = _c(27);
+  const {
+    buttonProps,
+    className: t1,
+    folderFieldName
+  } = t0;
+  const className = t1 === undefined ? "" : t1;
+  const {
+    t
+  } = useTranslation();
+  const dispatchField = useFormFields(_temp);
+  let t2;
+  if ($[0] !== folderFieldName) {
+    t2 = t3 => {
+      const [fields] = t3;
+      return fields && fields?.[folderFieldName] || null;
+    };
+    $[0] = folderFieldName;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const currentParentFolder = useFormFields(t2);
+  const fromFolderID = currentParentFolder?.value;
+  const {
+    id,
+    collectionSlug,
+    initialData,
+    title
+  } = useDocumentInfo();
+  const {
+    setModified
+  } = useForm();
+  let t3;
+  if ($[2] !== t) {
+    t3 = () => `${t("general:loading")}...`;
+    $[2] = t;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const [fromFolderName, setFromFolderName] = React.useState(t3);
+  const {
+    config
+  } = useConfig();
+  const modalID = useId();
+  let t4;
+  let t5;
+  if ($[4] !== config.folders.slug || $[5] !== config.routes.api || $[6] !== fromFolderID || $[7] !== t) {
+    t4 = () => {
+      const fetchFolderLabel = async function fetchFolderLabel() {
+        if (fromFolderID && (typeof fromFolderID === "string" || typeof fromFolderID === "number")) {
+          const response = await fetch(`${config.routes.api}/${config.folders.slug}/${fromFolderID}`);
+          const folderData = await response.json();
+          setFromFolderName(folderData?.name || t("folder:noFolder"));
+        } else {
+          setFromFolderName(t("folder:noFolder"));
+        }
+      };
+      fetchFolderLabel();
+    };
+    t5 = [config.folders.slug, config.routes.api, fromFolderID, t];
+    $[4] = config.folders.slug;
+    $[5] = config.routes.api;
+    $[6] = fromFolderID;
+    $[7] = t;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t4 = $[8];
+    t5 = $[9];
+  }
+  React.useEffect(t4, t5);
+  const t6 = `move-to-folder-${modalID}`;
+  let t7;
+  if ($[10] !== currentParentFolder || $[11] !== dispatchField || $[12] !== folderFieldName || $[13] !== setModified) {
+    t7 = t8 => {
+      const {
+        id: id_0
+      } = t8;
+      if (currentParentFolder.value !== id_0) {
+        dispatchField({
+          type: "UPDATE",
+          path: folderFieldName,
+          value: id_0
+        });
+        setModified(true);
+      }
+    };
+    $[10] = currentParentFolder;
+    $[11] = dispatchField;
+    $[12] = folderFieldName;
+    $[13] = setModified;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  const t8 = !currentParentFolder?.value;
+  let t9;
+  if ($[15] !== buttonProps || $[16] !== className || $[17] !== collectionSlug || $[18] !== fromFolderID || $[19] !== fromFolderName || $[20] !== id || $[21] !== initialData || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 || $[25] !== title) {
+    t9 = _jsx(MoveDocToFolderButton, {
+      buttonProps,
+      className,
+      collectionSlug,
+      docData: initialData,
+      docID: id,
+      docTitle: title,
+      fromFolderID,
+      fromFolderName,
+      modalSlug: t6,
+      onConfirm: t7,
+      skipConfirmModal: t8
+    });
+    $[15] = buttonProps;
+    $[16] = className;
+    $[17] = collectionSlug;
+    $[18] = fromFolderID;
+    $[19] = fromFolderName;
+    $[20] = id;
+    $[21] = initialData;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = t8;
+    $[25] = title;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  return t9;
+}
+/**
+ * This is a more generic button that can be used in other contexts, such as table cells and the edit view.
+ */
+function _temp(t0) {
+  const [, dispatch] = t0;
+  return dispatch;
+}
+export const MoveDocToFolderButton = t0 => {
+  const $ = _c(25);
+  const {
+    buttonProps,
+    className,
+    collectionSlug,
+    docData,
+    docID,
+    docTitle,
+    fromFolderID,
+    fromFolderName,
+    modalSlug,
+    onConfirm,
+    skipConfirmModal
+  } = t0;
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    closeModal,
+    openModal
+  } = useModal();
+  const drawerDepth = useDrawerDepth();
+  let t1;
+  if ($[0] !== buttonProps || $[1] !== className || $[2] !== closeModal || $[3] !== collectionSlug || $[4] !== docData || $[5] !== docID || $[6] !== docTitle || $[7] !== drawerDepth || $[8] !== fromFolderID || $[9] !== fromFolderName || $[10] !== getEntityConfig || $[11] !== i18n || $[12] !== modalSlug || $[13] !== onConfirm || $[14] !== openModal || $[15] !== skipConfirmModal || $[16] !== t) {
+    const drawerSlug = formatDrawerSlug({
+      slug: modalSlug,
+      depth: drawerDepth
+    });
+    let t2;
+    if ($[18] !== collectionSlug || $[19] !== docTitle || $[20] !== getEntityConfig || $[21] !== i18n) {
+      t2 = docTitle || getTranslation(getEntityConfig({
+        collectionSlug
+      }).labels.singular, i18n);
+      $[18] = collectionSlug;
+      $[19] = docTitle;
+      $[20] = getEntityConfig;
+      $[21] = i18n;
+      $[22] = t2;
+    } else {
+      t2 = $[22];
+    }
+    const titleToRender = t2;
+    let t3;
+    if ($[23] !== className) {
+      t3 = [baseClass, className].filter(Boolean);
+      $[23] = className;
+      $[24] = t3;
+    } else {
+      t3 = $[24];
+    }
+    t1 = _jsxs(_Fragment, {
+      children: [_jsx(Button, {
+        buttonStyle: "subtle",
+        className: t3.join(" "),
+        icon: _jsx(FolderIcon, {}),
+        iconPosition: "left",
+        onClick: () => {
+          openModal(drawerSlug);
+        },
+        ...buttonProps,
+        children: fromFolderName
+      }), _jsx(MoveItemsToFolderDrawer, {
+        action: "moveItemToFolder",
+        drawerSlug,
+        fromFolderID,
+        fromFolderName,
+        itemsToMove: [{
+          itemKey: `${collectionSlug}-${docID}`,
+          relationTo: collectionSlug,
+          value: {
+            ...docData,
+            id: docID
+          }
+        }],
+        onConfirm: async args => {
+          if (fromFolderID !== args.id && typeof onConfirm === "function") {
+            ;
+            try {
+              await onConfirm(args);
+              if (args.id) {
+                toast.success(t("folder:itemHasBeenMoved", {
+                  folderName: `"${args.name}"`,
+                  title: titleToRender
+                }));
+              } else {
+                toast.success(t("folder:itemHasBeenMovedToRoot", {
+                  title: titleToRender
+                }));
+              }
+            } catch (t4) {
+              const _ = t4;
+            }
+          }
+          closeModal(drawerSlug);
+        },
+        skipConfirmModal,
+        title: titleToRender
+      })]
+    });
+    $[0] = buttonProps;
+    $[1] = className;
+    $[2] = closeModal;
+    $[3] = collectionSlug;
+    $[4] = docData;
+    $[5] = docID;
+    $[6] = docTitle;
+    $[7] = drawerDepth;
+    $[8] = fromFolderID;
+    $[9] = fromFolderName;
+    $[10] = getEntityConfig;
+    $[11] = i18n;
+    $[12] = modalSlug;
+    $[13] = onConfirm;
+    $[14] = openModal;
+    $[15] = skipConfirmModal;
+    $[16] = t;
+    $[17] = t1;
+  } else {
+    t1 = $[17];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useModal","getTranslation","React","useId","toast","useForm","useFormFields","FolderIcon","useConfig","useDocumentInfo","useTranslation","Button","formatDrawerSlug","useDrawerDepth","MoveItemsToFolderDrawer","baseClass","MoveDocToFolder","t0","$","buttonProps","className","t1","folderFieldName","undefined","t","dispatchField","_temp","t2","t3","fields","currentParentFolder","fromFolderID","value","id","collectionSlug","initialData","title","setModified","fromFolderName","setFromFolderName","useState","config","modalID","t4","t5","folders","slug","routes","api","fetchFolderLabel","response","fetch","folderData","json","name","useEffect","t6","t7","t8","id_0","type","path","t9","_jsx","MoveDocToFolderButton","docData","docID","docTitle","modalSlug","onConfirm","skipConfirmModal","dispatch","getEntityConfig","i18n","closeModal","openModal","drawerDepth","drawerSlug","depth","labels","singular","titleToRender","filter","Boolean","_jsxs","_Fragment","children","buttonStyle","join","icon","iconPosition","onClick","action","itemsToMove","itemKey","relationTo","args","success","folderName","_"],"sources":["../../../../src/elements/FolderView/MoveDocToFolder/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useId } from 'react'\nimport { toast } from 'sonner'\n\nimport type { Props as ButtonProps } from '../../Button/types.js'\n\nimport { useForm, useFormFields } from '../../../forms/Form/context.js'\nimport { FolderIcon } from '../../../icons/Folder/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { formatDrawerSlug, useDrawerDepth } from '../../Drawer/index.js'\nimport { MoveItemsToFolderDrawer } from '../Drawers/MoveToFolder/index.js'\nimport './index.scss'\n\nconst baseClass = 'move-doc-to-folder'\n\n/**\n * This is the button shown on the edit document view. It uses the more generic `MoveDocToFolderButton` component.\n */\nexport function MoveDocToFolder({\n  buttonProps,\n  className = '',\n  folderFieldName,\n}: {\n  buttonProps?: Partial<ButtonProps>\n  className?: string\n  folderFieldName: string\n}) {\n  const { t } = useTranslation()\n  const dispatchField = useFormFields(([_, dispatch]) => dispatch)\n  const currentParentFolder = useFormFields(\n    ([fields]) => (fields && fields?.[folderFieldName]) || null,\n  )\n  const fromFolderID = currentParentFolder?.value\n  const { id, collectionSlug, initialData, title } = useDocumentInfo()\n  const { setModified } = useForm()\n  const [fromFolderName, setFromFolderName] = React.useState(() => `${t('general:loading')}...`)\n\n  const { config } = useConfig()\n  const modalID = useId()\n\n  React.useEffect(() => {\n    async function fetchFolderLabel() {\n      if (fromFolderID && (typeof fromFolderID === 'string' || typeof fromFolderID === 'number')) {\n        const response = await fetch(`${config.routes.api}/${config.folders.slug}/${fromFolderID}`)\n        const folderData = await response.json()\n        setFromFolderName(folderData?.name || t('folder:noFolder'))\n      } else {\n        setFromFolderName(t('folder:noFolder'))\n      }\n    }\n\n    void fetchFolderLabel()\n  }, [config.folders.slug, config.routes.api, fromFolderID, t])\n\n  return (\n    <MoveDocToFolderButton\n      buttonProps={buttonProps}\n      className={className}\n      collectionSlug={collectionSlug}\n      docData={initialData as FolderOrDocument['value']}\n      docID={id}\n      docTitle={title}\n      fromFolderID={fromFolderID as number | string}\n      fromFolderName={fromFolderName}\n      modalSlug={`move-to-folder-${modalID}`}\n      onConfirm={({ id }) => {\n        if (currentParentFolder.value !== id) {\n          dispatchField({\n            type: 'UPDATE',\n            path: folderFieldName,\n            value: id,\n          })\n          setModified(true)\n        }\n      }}\n      skipConfirmModal={!currentParentFolder?.value}\n    />\n  )\n}\n\ntype MoveDocToFolderButtonProps = {\n  buttonProps?: Partial<ButtonProps>\n  className?: string\n  collectionSlug: string\n  docData: FolderOrDocument['value']\n  docID: number | string\n  docTitle?: string\n  fromFolderID?: number | string\n  fromFolderName: string\n  modalSlug: string\n  onConfirm?: (args: { id: number | string; name: string }) => Promise<void> | void\n  skipConfirmModal?: boolean\n}\n\n/**\n * This is a more generic button that can be used in other contexts, such as table cells and the edit view.\n */\nexport const MoveDocToFolderButton = ({\n  buttonProps,\n  className,\n  collectionSlug,\n  docData,\n  docID,\n  docTitle,\n  fromFolderID,\n  fromFolderName,\n  modalSlug,\n  onConfirm,\n  skipConfirmModal,\n}: MoveDocToFolderButtonProps) => {\n  const { getEntityConfig } = useConfig()\n  const { i18n, t } = useTranslation()\n  const { closeModal, openModal } = useModal()\n  const drawerDepth = useDrawerDepth()\n  const drawerSlug = formatDrawerSlug({ slug: modalSlug, depth: drawerDepth })\n\n  const titleToRender =\n    docTitle || getTranslation(getEntityConfig({ collectionSlug }).labels.singular, i18n)\n\n  return (\n    <>\n      <Button\n        buttonStyle=\"subtle\"\n        className={[baseClass, className].filter(Boolean).join(' ')}\n        icon={<FolderIcon />}\n        iconPosition=\"left\"\n        onClick={() => {\n          openModal(drawerSlug)\n        }}\n        {...buttonProps}\n      >\n        {fromFolderName}\n      </Button>\n\n      <MoveItemsToFolderDrawer\n        action=\"moveItemToFolder\"\n        drawerSlug={drawerSlug}\n        fromFolderID={fromFolderID}\n        fromFolderName={fromFolderName}\n        itemsToMove={[\n          {\n            itemKey: `${collectionSlug}-${docID}`,\n            relationTo: collectionSlug,\n            value: { ...docData, id: docID },\n          },\n        ]}\n        onConfirm={async (args) => {\n          if (fromFolderID !== args.id && typeof onConfirm === 'function') {\n            try {\n              await onConfirm(args)\n\n              if (args.id) {\n                // moved to folder\n                toast.success(\n                  t('folder:itemHasBeenMoved', {\n                    folderName: `\"${args.name}\"`,\n                    title: titleToRender,\n                  }),\n                )\n              } else {\n                // moved to root\n                toast.success(\n                  t('folder:itemHasBeenMovedToRoot', {\n                    title: titleToRender,\n                  }),\n                )\n              }\n            } catch (_) {\n              // todo: add error toast?\n            }\n          }\n\n          closeModal(drawerSlug)\n        }}\n        skipConfirmModal={skipConfirmModal}\n        title={titleToRender}\n      />\n    </>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,KAAK,QAAQ;AAC7B,SAASC,KAAK,QAAQ;AAItB,SAASC,OAAO,EAAEC,aAAa,QAAQ;AACvC,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,gBAAgB,EAAEC,cAAc,QAAQ;AACjD,SAASC,uBAAuB,QAAQ;AACxC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB;;;AAGA,OAAO,SAAAC,gBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAnB,EAAA;EAAyB;IAAAoB,WAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAL,EAQ/B;EANC,MAAAG,SAAA,GAAAC,EAAc,KAAAE,SAAA,GAAF,EAAE,GAAdF,EAAc;EAOd;IAAAG;EAAA,IAAcd,cAAA;EACd,MAAAe,aAAA,GAAsBnB,aAAA,CAAAoB,KAAiC;EAAA,IAAAC,EAAA;EAAA,IAAAT,CAAA,QAAAI,eAAA;IAErDK,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKC,MAAC,IAAUA,MAAA,GAASP,eAAA,CAAgB,QAAK;IAAA;IAAAJ,CAAA,MAAAI,eAAA;IAAAJ,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EADzD,MAAAY,mBAAA,GAA4BxB,aAAA,CAC1BqB,EAAuD;EAEzD,MAAAI,YAAA,GAAqBD,mBAAA,EAAAE,KAAA;EACrB;IAAAC,EAAA;IAAAC,cAAA;IAAAC,WAAA;IAAAC;EAAA,IAAmD3B,eAAA;EACnD;IAAA4B;EAAA,IAAwBhC,OAAA;EAAA,IAAAuB,EAAA;EAAA,IAAAV,CAAA,QAAAM,CAAA;IACmCI,EAAA,GAAAA,CAAA,KAAM,GAAGJ,CAAA,CAAE,uBAAuB;IAAAN,CAAA,MAAAM,CAAA;IAAAN,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAA7F,OAAAoB,cAAA,EAAAC,iBAAA,IAA4CrC,KAAA,CAAAsC,QAAA,CAAeZ,EAAkC;EAE7F;IAAAa;EAAA,IAAmBjC,SAAA;EACnB,MAAAkC,OAAA,GAAgBvC,KAAA;EAAA,IAAAwC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA1B,CAAA,QAAAuB,MAAA,CAAAI,OAAA,CAAAC,IAAA,IAAA5B,CAAA,QAAAuB,MAAA,CAAAM,MAAA,CAAAC,GAAA,IAAA9B,CAAA,QAAAa,YAAA,IAAAb,CAAA,QAAAM,CAAA;IAEAmB,EAAA,GAAAA,CAAA;MACd,MAAAM,gBAAA,kBAAAA,iBAAA;QAAA,IACMlB,YAAA,KAAiB,OAAOA,YAAA,KAAiB,YAAY,OAAOA,YAAA,KAAiB,QAAO;UACtF,MAAAmB,QAAA,SAAuBC,KAAA,CAAM,GAAGV,MAAA,CAAAM,MAAA,CAAAC,GAAA,IAAqBP,MAAA,CAAAI,OAAA,CAAAC,IAAA,IAAuBf,YAAA,EAAc;UAC1F,MAAAqB,UAAA,SAAyBF,QAAA,CAAAG,IAAA,CAAa;UACtCd,iBAAA,CAAkBa,UAAA,EAAAE,IAAA,IAAoB9B,CAAA,CAAE;QAAA;UAExCe,iBAAA,CAAkBf,CAAA,CAAE;QAAA;MAAA;MAInByB,gBAAA;IAAA;IACJL,EAAA,IAACH,MAAA,CAAAI,OAAA,CAAAC,IAAA,EAAqBL,MAAA,CAAAM,MAAA,CAAAC,GAAA,EAAmBjB,YAAA,EAAcP,CAAA;IAAEN,CAAA,MAAAuB,MAAA,CAAAI,OAAA,CAAAC,IAAA;IAAA5B,CAAA,MAAAuB,MAAA,CAAAM,MAAA,CAAAC,GAAA;IAAA9B,CAAA,MAAAa,YAAA;IAAAb,CAAA,MAAAM,CAAA;IAAAN,CAAA,MAAAyB,EAAA;IAAAzB,CAAA,MAAA0B,EAAA;EAAA;IAAAD,EAAA,GAAAzB,CAAA;IAAA0B,EAAA,GAAA1B,CAAA;EAAA;EAZ5DhB,KAAA,CAAAqD,SAAA,CAAgBZ,EAYhB,EAAGC,EAAyD;EAY7C,MAAAY,EAAA,qBAAkBd,OAAA,EAAS;EAAA,IAAAe,EAAA;EAAA,IAAAvC,CAAA,SAAAY,mBAAA,IAAAZ,CAAA,SAAAO,aAAA,IAAAP,CAAA,SAAAI,eAAA,IAAAJ,CAAA,SAAAmB,WAAA;IAC3BoB,EAAA,GAAAC,EAAA;MAAC;QAAAzB,EAAA,EAAA0B;MAAA,IAAAD,EAAM;MAAA,IACZ5B,mBAAA,CAAAE,KAAA,KAA8BC,IAAA;QAChCR,aAAA;UAAAmC,IAAA,EACQ;UAAAC,IAAA,EACAvC,eAAA;UAAAU,KAAA,EACCC;QAAA,CACT;QACAI,WAAA,KAAY;MAAA;IAAA;IAEhBnB,CAAA,OAAAY,mBAAA;IAAAZ,CAAA,OAAAO,aAAA;IAAAP,CAAA,OAAAI,eAAA;IAAAJ,CAAA,OAAAmB,WAAA;IAAAnB,CAAA,OAAAuC,EAAA;EAAA;IAAAA,EAAA,GAAAvC,CAAA;EAAA;EACkB,MAAAwC,EAAA,IAAC5B,mBAAA,EAAAE,KAAA;EAAqB,IAAA8B,EAAA;EAAA,IAAA5C,CAAA,SAAAC,WAAA,IAAAD,CAAA,SAAAE,SAAA,IAAAF,CAAA,SAAAgB,cAAA,IAAAhB,CAAA,SAAAa,YAAA,IAAAb,CAAA,SAAAoB,cAAA,IAAApB,CAAA,SAAAe,EAAA,IAAAf,CAAA,SAAAiB,WAAA,IAAAjB,CAAA,SAAAsC,EAAA,IAAAtC,CAAA,SAAAuC,EAAA,IAAAvC,CAAA,SAAAwC,EAAA,IAAAxC,CAAA,SAAAkB,KAAA;IApB1C0B,EAAA,GAAAC,IAAA,CAAAC,qBAAA;MAAA7C,WAAA;MAAAC,SAAA;MAAAc,cAAA;MAAA+B,OAAA,EAIW9B,WAAA;MAAA+B,KAAA,EACFjC,EAAA;MAAAkC,QAAA,EACG/B,KAAA;MAAAL,YAAA;MAAAO,cAAA;MAAA8B,SAAA,EAGCZ,EAA2B;MAAAa,SAAA,EAC3BZ,EASX;MAAAa,gBAAA,EACkBZ;IAAsB,C;;;;;;;;;;;;;;;;SApB1CI,E;;AAuCJ;;;AA5EO,SAAApC,MAAAT,EAAA;EAUgC,SAAAsD,QAAA,IAAAtD,EAAa;EAAA,OAAKsD,QAAA;AAAA;AAqEzD,OAAO,MAAMP,qBAAA,GAAwB/C,EAAA;EAAA,MAAAC,CAAA,GAAAnB,EAAA;EAAC;IAAAoB,WAAA;IAAAC,SAAA;IAAAc,cAAA;IAAA+B,OAAA;IAAAC,KAAA;IAAAC,QAAA;IAAApC,YAAA;IAAAO,cAAA;IAAA8B,SAAA;IAAAC,SAAA;IAAAC;EAAA,IAAArD,EAYT;EAC3B;IAAAuD;EAAA,IAA4BhE,SAAA;EAC5B;IAAAiE,IAAA;IAAAjD;EAAA,IAAoBd,cAAA;EACpB;IAAAgE,UAAA;IAAAC;EAAA,IAAkC3E,QAAA;EAClC,MAAA4E,WAAA,GAAoB/D,cAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAH,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAwD,UAAA,IAAAxD,CAAA,QAAAgB,cAAA,IAAAhB,CAAA,QAAA+C,OAAA,IAAA/C,CAAA,QAAAgD,KAAA,IAAAhD,CAAA,QAAAiD,QAAA,IAAAjD,CAAA,QAAA0D,WAAA,IAAA1D,CAAA,QAAAa,YAAA,IAAAb,CAAA,QAAAoB,cAAA,IAAApB,CAAA,SAAAsD,eAAA,IAAAtD,CAAA,SAAAuD,IAAA,IAAAvD,CAAA,SAAAkD,SAAA,IAAAlD,CAAA,SAAAmD,SAAA,IAAAnD,CAAA,SAAAyD,SAAA,IAAAzD,CAAA,SAAAoD,gBAAA,IAAApD,CAAA,SAAAM,CAAA;IACpB,MAAAqD,UAAA,GAAmBjE,gBAAA;MAAAkC,IAAA,EAAyBsB,SAAA;MAAAU,KAAA,EAAkBF;IAAA,CAAY;IAAA,IAAAjD,EAAA;IAAA,IAAAT,CAAA,SAAAgB,cAAA,IAAAhB,CAAA,SAAAiD,QAAA,IAAAjD,CAAA,SAAAsD,eAAA,IAAAtD,CAAA,SAAAuD,IAAA;MAGxE9C,EAAA,GAAAwC,QAAA,IAAYlE,cAAA,CAAeuE,eAAA;QAAAtC;MAAA,CAAiC,EAAA6C,MAAA,CAAAC,QAAA,EAAoBP,IAAA;MAAAvD,CAAA,OAAAgB,cAAA;MAAAhB,CAAA,OAAAiD,QAAA;MAAAjD,CAAA,OAAAsD,eAAA;MAAAtD,CAAA,OAAAuD,IAAA;MAAAvD,CAAA,OAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IADlF,MAAA+D,aAAA,GACEtD,EAAgF;IAAA,IAAAC,EAAA;IAAA,IAAAV,CAAA,SAAAE,SAAA;MAMjEQ,EAAA,IAAAb,SAAA,EAAYK,SAAA,EAAA8D,MAAA,CAAAC,OAAkB;MAAAjE,CAAA,OAAAE,SAAA;MAAAF,CAAA,OAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IAH7CG,EAAA,GAAA+D,KAAA,CAAAC,SAAA;MAAAC,QAAA,GACEvB,IAAA,CAAApD,MAAA;QAAA4E,WAAA,EACc;QAAAnE,SAAA,EACDQ,EAA8B,CAAA4D,IAAA,CAAc;QAAAC,IAAA,EACjD1B,IAAA,CAAAxD,UAAA,IAAC;QAAAmF,YAAA,EACM;QAAAC,OAAA,EAAAA,CAAA;UAEXhB,SAAA,CAAUE,UAAA;QAAA;QAAA,GAER1D,WAAW;QAAAmE,QAAA,EAEdhD;MAAA,C,GAGHyB,IAAA,CAAAjD,uBAAA;QAAA8E,MAAA,EACS;QAAAf,UAAA;QAAA9C,YAAA;QAAAO,cAAA;QAAAuD,WAAA;UAAAC,OAAA,EAMM,GAAG5D,cAAA,IAAkBgC,KAAA,EAAO;UAAA6B,UAAA,EACzB7D,cAAA;UAAAF,KAAA;YAAA,GACAiC,OAAO;YAAAhC,EAAA,EAAMiC;UAAA;QAAA;QAAAG,SAAA,QAAA2B,IAAA;UAAA,IAIvBjE,YAAA,KAAiBiE,IAAA,CAAA/D,EAAO,IAAI,OAAOoC,SAAA,KAAc;YAAA;YAAA;cAAA,MAE3CA,SAAA,CAAU2B,IAAA;cAAA,IAEZA,IAAA,CAAA/D,EAAA;gBAEF7B,KAAA,CAAA6F,OAAA,CACEzE,CAAA,CAAE;kBAAA0E,UAAA,EACY,IAAIF,IAAA,CAAA1C,IAAA,GAAY;kBAAAlB,KAAA,EACrB6C;gBAAA,CACT;cAAA;gBAIF7E,KAAA,CAAA6F,OAAA,CACEzE,CAAA,CAAE;kBAAAY,KAAA,EACO6C;gBAAA,CACT;cAAA;YAAA,SAAAtC,EAAA;cAGGwD,KAAA,CAAAA,CAAA,CAAAA,CAAA,CAAAA,EAAA;YAAA;UAAA;UAKXzB,UAAA,CAAWG,UAAA;QAAA;QAAAP,gBAAA;QAAAlC,KAAA,EAGN6C;MAAA,C;;;;;;;;;;;;;;;;;;;;;;;SAvDX5D,E;CA2DJ","ignoreList":[]}

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

@@ -0,0 +1,12 @@
+@layer payload-default {
+  .move-doc-to-folder {
+    margin: 0;
+    .btn__icon {
+      color: var(--theme-elevation-300);
+    }
+
+    .btn__label {
+      font-weight: 600;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import './index.scss';
+type TableProps = {
+    readonly appearance?: 'condensed' | 'default';
+    readonly className?: string;
+    readonly headerCells: React.ReactNode[];
+    readonly tableRows: React.ReactNode[];
+};
+export declare const SimpleTable: ({ appearance, className, headerCells: headers, tableRows: rows, }: TableProps) => React.JSX.Element;
+export declare const TableHead: ({ children, className, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
+export declare const TableBody: ({ children, className, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
+export declare const TableRow: ({ children, className, ...rest }: React.HTMLAttributes<HTMLTableRowElement>) => React.JSX.Element;
+export declare const TableCell: ({ children, className, ...rest }: React.TdHTMLAttributes<HTMLTableCellElement>) => React.JSX.Element;
+export declare const TableHeader: ({ children, className, ...rest }: React.ThHTMLAttributes<HTMLTableCellElement>) => React.JSX.Element;
+export declare const HiddenCell: ({ children, className, ...rest }: {
+    children?: React.ReactNode;
+} & React.TdHTMLAttributes<HTMLTableCellElement>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/SimpleTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CACtC,CAAA;AACD,eAAO,MAAM,WAAW,sEAKrB,UAAU,sBAgBZ,CAAA;AAED,eAAO,MAAM,SAAS,qCAInB,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,sBAM/C,CAAA;AAED,eAAO,MAAM,SAAS,qCAInB,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,sBAM/C,CAAA;AAED,eAAO,MAAM,QAAQ,qCAIlB,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,sBAM3C,CAAA;AAED,eAAO,MAAM,SAAS,qCAInB,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,sBAM9C,CAAA;AAED,eAAO,MAAM,WAAW,qCAIrB,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,sBAM9C,CAAA;AAED,eAAO,MAAM,UAAU,qCAIpB;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,sBAM/E,CAAA"}

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

@@ -0,0 +1,95 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'simple-table';
+export const SimpleTable = ({
+  appearance,
+  className,
+  headerCells: headers,
+  tableRows: rows
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    className: [className, baseClass, appearance && `${baseClass}--appearance-${appearance}`].filter(Boolean).join(' '),
+    children: /*#__PURE__*/_jsxs("table", {
+      cellPadding: 0,
+      cellSpacing: 0,
+      className: `${baseClass}__table`,
+      children: [/*#__PURE__*/_jsx(TableHead, {
+        children: /*#__PURE__*/_jsx(TableRow, {
+          children: headers
+        })
+      }), /*#__PURE__*/_jsx(TableBody, {
+        children: rows
+      })]
+    })
+  });
+};
+export const TableHead = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx("thead", {
+    className: `${baseClass}__thead ${className || ''}`.trim(),
+    ...rest,
+    children: children
+  });
+};
+export const TableBody = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx("tbody", {
+    className: `${baseClass}__tbody ${className || ''}`.trim(),
+    ...rest,
+    children: children
+  });
+};
+export const TableRow = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx("tr", {
+    className: `${baseClass}__tr ${className || ''}`.trim(),
+    ...rest,
+    children: children
+  });
+};
+export const TableCell = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx("td", {
+    className: `${baseClass}__td ${className || ''}`.trim(),
+    ...rest,
+    children: children
+  });
+};
+export const TableHeader = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx("th", {
+    className: `${baseClass}__th ${className || ''}`.trim(),
+    ...rest,
+    children: children
+  });
+};
+export const HiddenCell = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx("td", {
+    className: `${baseClass}__hidden-cell ${className || ''}`.trim(),
+    ...rest,
+    children: children
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","SimpleTable","appearance","className","headerCells","headers","tableRows","rows","_jsx","filter","Boolean","join","_jsxs","cellPadding","cellSpacing","TableHead","TableRow","TableBody","children","rest","trim","TableCell","TableHeader","HiddenCell"],"sources":["../../../../src/elements/FolderView/SimpleTable/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'simple-table'\n\ntype TableProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly className?: string\n  readonly headerCells: React.ReactNode[]\n  readonly tableRows: React.ReactNode[]\n}\nexport const SimpleTable = ({\n  appearance,\n  className,\n  headerCells: headers,\n  tableRows: rows,\n}: TableProps) => {\n  return (\n    <div\n      className={[className, baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <table cellPadding={0} cellSpacing={0} className={`${baseClass}__table`}>\n        <TableHead>\n          <TableRow>{headers}</TableRow>\n        </TableHead>\n\n        <TableBody>{rows}</TableBody>\n      </table>\n    </div>\n  )\n}\n\nexport const TableHead = ({\n  children,\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLTableSectionElement>) => {\n  return (\n    <thead className={`${baseClass}__thead ${className || ''}`.trim()} {...rest}>\n      {children}\n    </thead>\n  )\n}\n\nexport const TableBody = ({\n  children,\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLTableSectionElement>) => {\n  return (\n    <tbody className={`${baseClass}__tbody ${className || ''}`.trim()} {...rest}>\n      {children}\n    </tbody>\n  )\n}\n\nexport const TableRow = ({\n  children,\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLTableRowElement>) => {\n  return (\n    <tr className={`${baseClass}__tr ${className || ''}`.trim()} {...rest}>\n      {children}\n    </tr>\n  )\n}\n\nexport const TableCell = ({\n  children,\n  className,\n  ...rest\n}: React.TdHTMLAttributes<HTMLTableCellElement>) => {\n  return (\n    <td className={`${baseClass}__td ${className || ''}`.trim()} {...rest}>\n      {children}\n    </td>\n  )\n}\n\nexport const TableHeader = ({\n  children,\n  className,\n  ...rest\n}: React.ThHTMLAttributes<HTMLTableCellElement>) => {\n  return (\n    <th className={`${baseClass}__th ${className || ''}`.trim()} {...rest}>\n      {children}\n    </th>\n  )\n}\n\nexport const HiddenCell = ({\n  children,\n  className,\n  ...rest\n}: { children?: React.ReactNode } & React.TdHTMLAttributes<HTMLTableCellElement>) => {\n  return (\n    <td className={`${baseClass}__hidden-cell ${className || ''}`.trim()} {...rest}>\n      {children}\n    </td>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,WAAA,GAAcA,CAAC;EAC1BC,UAAU;EACVC,SAAS;EACTC,WAAA,EAAaC,OAAO;EACpBC,SAAA,EAAWC;AAAI,CACJ;EACX,oBACEC,IAAA,CAAC;IACCL,SAAA,EAAW,CAACA,SAAA,EAAWH,SAAA,EAAWE,UAAA,IAAc,GAAGF,SAAA,gBAAyBE,UAAA,EAAY,CAAC,CACtFO,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;cAER,aAAAC,KAAA,CAAC;MAAMC,WAAA,EAAa;MAAGC,WAAA,EAAa;MAAGX,SAAA,EAAW,GAAGH,SAAA,SAAkB;8BACrEQ,IAAA,CAACO,SAAA;kBACC,aAAAP,IAAA,CAACQ,QAAA;oBAAUX;;uBAGbG,IAAA,CAACS,SAAA;kBAAWV;;;;AAIpB;AAEA,OAAO,MAAMQ,SAAA,GAAYA,CAAC;EACxBG,QAAQ;EACRf,SAAS;EACT,GAAGgB;AAAA,CAC2C;EAC9C,oBACEX,IAAA,CAAC;IAAML,SAAA,EAAW,GAAGH,SAAA,WAAoBG,SAAA,IAAa,IAAI,CAACiB,IAAI;IAAK,GAAGD,IAAI;cACxED;;AAGP;AAEA,OAAO,MAAMD,SAAA,GAAYA,CAAC;EACxBC,QAAQ;EACRf,SAAS;EACT,GAAGgB;AAAA,CAC2C;EAC9C,oBACEX,IAAA,CAAC;IAAML,SAAA,EAAW,GAAGH,SAAA,WAAoBG,SAAA,IAAa,IAAI,CAACiB,IAAI;IAAK,GAAGD,IAAI;cACxED;;AAGP;AAEA,OAAO,MAAMF,QAAA,GAAWA,CAAC;EACvBE,QAAQ;EACRf,SAAS;EACT,GAAGgB;AAAA,CACuC;EAC1C,oBACEX,IAAA,CAAC;IAAGL,SAAA,EAAW,GAAGH,SAAA,QAAiBG,SAAA,IAAa,IAAI,CAACiB,IAAI;IAAK,GAAGD,IAAI;cAClED;;AAGP;AAEA,OAAO,MAAMG,SAAA,GAAYA,CAAC;EACxBH,QAAQ;EACRf,SAAS;EACT,GAAGgB;AAAA,CAC0C;EAC7C,oBACEX,IAAA,CAAC;IAAGL,SAAA,EAAW,GAAGH,SAAA,QAAiBG,SAAA,IAAa,IAAI,CAACiB,IAAI;IAAK,GAAGD,IAAI;cAClED;;AAGP;AAEA,OAAO,MAAMI,WAAA,GAAcA,CAAC;EAC1BJ,QAAQ;EACRf,SAAS;EACT,GAAGgB;AAAA,CAC0C;EAC7C,oBACEX,IAAA,CAAC;IAAGL,SAAA,EAAW,GAAGH,SAAA,QAAiBG,SAAA,IAAa,IAAI,CAACiB,IAAI;IAAK,GAAGD,IAAI;cAClED;;AAGP;AAEA,OAAO,MAAMK,UAAA,GAAaA,CAAC;EACzBL,QAAQ;EACRf,SAAS;EACT,GAAGgB;AAAA,CAC2E;EAC9E,oBACEX,IAAA,CAAC;IAAGL,SAAA,EAAW,GAAGH,SAAA,iBAA0BG,SAAA,IAAa,IAAI,CAACiB,IAAI;IAAK,GAAGD,IAAI;cAC3ED;;AAGP","ignoreList":[]}

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

@@ -0,0 +1,59 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .simple-table {
+    margin-bottom: var(--base);
+    overflow: auto;
+    max-width: 100%;
+
+    &__table {
+      min-width: 100%;
+      border-collapse: collapse;
+    }
+
+    &__thead {
+      color: var(--theme-elevation-400);
+    }
+
+    &__th {
+      font-weight: normal;
+      text-align: left;
+      [dir='rtl'] & {
+        text-align: right;
+      }
+    }
+
+    &__th,
+    &__td {
+      vertical-align: top;
+      padding: calc(var(--base) * 0.6);
+      min-width: 150px;
+      position: relative;
+
+      &:first-child {
+        padding-inline-start: calc(var(--base) * (0.8));
+      }
+      &:last-child {
+        padding-inline-end: calc(var(--base) * (0.8));
+      }
+    }
+
+    .simple-table__thead .simple-table__tr {
+      &:after {
+        background-color: transparent;
+      }
+    }
+
+    &__hidden-cell {
+      position: absolute;
+      padding: 0;
+    }
+
+    @include mid-break {
+      &__th,
+      &__td {
+        max-width: 70vw;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/SortByPill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAmCrB,wBAAgB,UAAU,sBAuEzB"}

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

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { SortDownIcon, SortUpIcon } from '../../../icons/Sort/index.js';
+import { useFolder } from '../../../providers/Folders/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Pill } from '../../Pill/index.js';
+import { Popup, PopupList } from '../../Popup/index.js';
+import './index.scss';
+const baseClass = 'sort-by-pill';
+const sortOnOptions = [{
+  label: t => t('general:name'),
+  value: '_folderOrDocumentTitle'
+}, {
+  label: t => t('general:createdAt'),
+  value: 'createdAt'
+}, {
+  label: t => t('general:updatedAt'),
+  value: 'updatedAt'
+}];
+const orderOnOptions = [{
+  label: t => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SortUpIcon, {}), t('general:ascending')]
+  }),
+  value: 'asc'
+}, {
+  label: t => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SortDownIcon, {}), t('general:descending')]
+  }),
+  value: 'desc'
+}];
+export function SortByPill() {
+  const {
+    documents,
+    sortAndUpdateState,
+    sortDirection,
+    sortOn,
+    subfolders
+  } = useFolder();
+  const {
+    t
+  } = useTranslation();
+  const [selectedSortOption] = sortOnOptions.filter(({
+    value
+  }) => value === sortOn);
+  const [selectedOrderOption] = orderOnOptions.filter(({
+    value
+  }) => value === sortDirection);
+  return /*#__PURE__*/_jsx(Popup, {
+    button: /*#__PURE__*/_jsxs(Pill, {
+      className: `${baseClass}__trigger`,
+      icon: /*#__PURE__*/_jsx(ChevronIcon, {}),
+      size: "small",
+      children: [sortDirection === 'asc' ? /*#__PURE__*/_jsx(SortUpIcon, {
+        className: `${baseClass}__sort-icon`
+      }) : /*#__PURE__*/_jsx(SortDownIcon, {
+        className: `${baseClass}__sort-icon`
+      }), selectedSortOption.label(t)]
+    }),
+    className: baseClass,
+    horizontalAlign: "right",
+    render: ({
+      close
+    }) => /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(PopupList.GroupLabel, {
+        label: "Sort by"
+      }), /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+        children: sortOnOptions.map(({
+          label,
+          value
+        }) => /*#__PURE__*/_jsx(PopupList.Button, {
+          active: selectedSortOption.value === value,
+          onClick: () => {
+            sortAndUpdateState({
+              documentsToSort: documents,
+              sortOn: value,
+              subfoldersToSort: subfolders
+            });
+            close();
+          },
+          children: label(t)
+        }, value))
+      }), /*#__PURE__*/_jsx(PopupList.Divider, {}), /*#__PURE__*/_jsx(PopupList.GroupLabel, {
+        label: "Order"
+      }), /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+        children: orderOnOptions.map(({
+          label,
+          value
+        }) => /*#__PURE__*/_jsx(PopupList.Button, {
+          active: selectedOrderOption.value === value,
+          className: `${baseClass}__order-option`,
+          onClick: () => {
+            sortAndUpdateState({
+              documentsToSort: documents,
+              sortDirection: value,
+              subfoldersToSort: subfolders
+            });
+            close();
+          },
+          children: label(t)
+        }, value))
+      })]
+    }),
+    showScrollbar: true,
+    verticalAlign: "bottom"
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","ChevronIcon","SortDownIcon","SortUpIcon","useFolder","useTranslation","Pill","Popup","PopupList","baseClass","sortOnOptions","label","t","value","orderOnOptions","_jsxs","_Fragment","_jsx","SortByPill","documents","sortAndUpdateState","sortDirection","sortOn","subfolders","selectedSortOption","filter","selectedOrderOption","button","className","icon","size","horizontalAlign","render","close","GroupLabel","ButtonGroup","map","Button","active","onClick","documentsToSort","subfoldersToSort","Divider","showScrollbar","verticalAlign"],"sources":["../../../../src/elements/FolderView/SortByPill/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { SortDownIcon, SortUpIcon } from '../../../icons/Sort/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-by-pill'\n\nconst sortOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: keyof FolderOrDocument['value']\n}[] = [\n  { label: (t) => t('general:name'), value: '_folderOrDocumentTitle' },\n  { label: (t) => t('general:createdAt'), value: 'createdAt' },\n  { label: (t) => t('general:updatedAt'), value: 'updatedAt' },\n]\nconst orderOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: 'asc' | 'desc'\n}[] = [\n  {\n    label: (t) => (\n      <>\n        <SortUpIcon />\n        {t('general:ascending')}\n      </>\n    ),\n    value: 'asc',\n  },\n  {\n    label: (t) => (\n      <>\n        <SortDownIcon />\n        {t('general:descending')}\n      </>\n    ),\n    value: 'desc',\n  },\n]\nexport function SortByPill() {\n  const { documents, sortAndUpdateState, sortDirection, sortOn, subfolders } = useFolder()\n  const { t } = useTranslation()\n  const [selectedSortOption] = sortOnOptions.filter(({ value }) => value === sortOn)\n  const [selectedOrderOption] = orderOnOptions.filter(({ value }) => value === sortDirection)\n\n  return (\n    <Popup\n      button={\n        <Pill className={`${baseClass}__trigger`} icon={<ChevronIcon />} size=\"small\">\n          {sortDirection === 'asc' ? (\n            <SortUpIcon className={`${baseClass}__sort-icon`} />\n          ) : (\n            <SortDownIcon className={`${baseClass}__sort-icon`} />\n          )}\n          {selectedSortOption.label(t)}\n        </Pill>\n      }\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <>\n          <PopupList.GroupLabel label=\"Sort by\" />\n          <PopupList.ButtonGroup>\n            {sortOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedSortOption.value === value}\n                key={value}\n                onClick={() => {\n                  sortAndUpdateState({\n                    documentsToSort: documents,\n                    sortOn: value as keyof Pick<\n                      FolderOrDocument['value'],\n                      '_folderOrDocumentTitle' | 'createdAt' | 'updatedAt'\n                    >,\n                    subfoldersToSort: subfolders,\n                  })\n                  close()\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n          <PopupList.Divider />\n          <PopupList.GroupLabel label=\"Order\" />\n          <PopupList.ButtonGroup>\n            {orderOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedOrderOption.value === value}\n                className={`${baseClass}__order-option`}\n                key={value}\n                onClick={() => {\n                  sortAndUpdateState({\n                    documentsToSort: documents,\n                    sortDirection: value,\n                    subfoldersToSort: subfolders,\n                  })\n                  close()\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n        </>\n      )}\n      showScrollbar\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,16 @@
+@layer payload-default {
+  .sort-by-pill {
+    &__order-option {
+      display: flex;
+      gap: calc(var(--base) * 0.25);
+    }
+
+    &__trigger {
+      .pill__label {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+    }
+  }
+}