From 29294792785708f647ff0de1841f9e96278723a3 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 5 Mar 2024 12:20:31 +0100
Subject: [PATCH] wip on contents

---
 src/components/Button.tsx                     |   9 ++
 src/components/Contents/AddContentPopover.tsx |   5 +-
 src/components/Contents/Contents.tsx          |  88 +++++++-----
 src/components/Contents/ContentsCell.tsx      |  80 ++++++++---
 .../Contents/ItemActionsPopover.tsx           |   9 +-
 .../Contents/styles/basic/BlockToolbar.css    |   6 -
 .../Contents/styles/basic/Breadcrumbs.css     |   2 -
 .../Contents/styles/basic/Button.css          |   2 -
 .../Contents/styles/basic/Calendar.css        |   3 -
 .../Contents/styles/basic/Checkbox.css        |   2 -
 .../Contents/styles/basic/CheckboxGroup.css   |   5 -
 .../Contents/styles/basic/ComboBox.css        |   7 -
 .../Contents/styles/basic/DateField.css       |   4 -
 .../Contents/styles/basic/DatePicker.css      |   8 --
 .../Contents/styles/basic/DateRangePicker.css |   8 --
 .../Contents/styles/basic/Dialog.css          |   5 -
 src/components/Contents/styles/basic/Form.css |   4 -
 .../Contents/styles/basic/GridList.css        |   5 -
 .../Contents/styles/basic/Label.css           |   2 -
 src/components/Contents/styles/basic/Link.css |   4 +-
 .../Contents/styles/basic/ListBox.css         |   3 -
 src/components/Contents/styles/basic/Menu.css |   4 -
 .../Contents/styles/basic/Meter.css           |   2 -
 .../Contents/styles/basic/Modal.css           |   4 -
 .../Contents/styles/basic/NumberField.css     |   4 -
 .../Contents/styles/basic/Popover.css         |   5 -
 .../Contents/styles/basic/ProgressBar.css     |   2 -
 .../Contents/styles/basic/RadioGroup.css      |   4 -
 .../Contents/styles/basic/RangeCalendar.css   |   3 -
 .../Contents/styles/basic/SearchField.css     |   4 -
 .../Contents/styles/basic/Select.css          |   6 -
 .../Contents/styles/basic/Slider.css          |   3 -
 .../Contents/styles/basic/Switch.css          |   2 -
 .../Contents/styles/basic/Table.css           |   7 -
 src/components/Contents/styles/basic/Tabs.css |   4 -
 .../Contents/styles/basic/TagGroup.css        |   3 -
 .../Contents/styles/basic/TextField.css       |   4 -
 .../Contents/styles/basic/TimeField.css       |   4 -
 .../Contents/styles/basic/ToggleButton.css    |   2 -
 .../Contents/styles/basic/Toolbar.css         |   6 -
 .../Contents/styles/basic/Tooltip.css         |   3 -
 .../Contents/styles/basic/icons.css           |   2 -
 src/components/Contents/styles/basic/main.css |  16 +--
 .../Contents/styles/basic/theme.css           |   4 +-
 .../Contents/styles/quanta/Contents.css       |  12 ++
 .../Contents/styles/quanta/main.css           |   3 +-
 .../components/manage/Contents/Contents.jsx   | 127 +++++++++++++-----
 src/declaration.d.ts                          |   5 +
 tsconfig.json                                 |   2 +-
 49 files changed, 262 insertions(+), 246 deletions(-)
 create mode 100644 src/components/Button.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 000000000..9e8c76b37
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,9 @@
+import React, { forwardRef, ForwardedRef } from 'react';
+import { Button as RACButton, ButtonProps } from 'react-aria-components';
+
+export const Button = forwardRef(function _Button(
+  props: ButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) {
+  return <RACButton ref={ref} {...props} />;
+});
diff --git a/src/components/Contents/AddContentPopover.tsx b/src/components/Contents/AddContentPopover.tsx
index 579475fa5..4cf39b6bc 100644
--- a/src/components/Contents/AddContentPopover.tsx
+++ b/src/components/Contents/AddContentPopover.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, ChevronrightIcon, Popover } from '@plone/components';
 
 interface Props {
+  path: string;
   addableTypes: {
     '@id': string;
     id: string;
@@ -9,7 +10,7 @@ interface Props {
   }[];
 }
 
-export const AddContentPopover = ({ addableTypes }: Props) => {
+export const AddContentPopover = ({ path, addableTypes }: Props) => {
   // const page = addableTypes.find((type) => type.id === 'Document');
 
   return (
@@ -17,7 +18,7 @@ export const AddContentPopover = ({ addableTypes }: Props) => {
       <ul className="add-content-list">
         {addableTypes.map((type) => (
           <li key={type.id} className="add-content-list-item">
-            <Link href={type['@id']}>
+            <Link href={`${path}/add?type=${encodeURIComponent(type.id)}`}>
               {type.title}
               <ChevronrightIcon />
             </Link>
diff --git a/src/components/Contents/Contents.tsx b/src/components/Contents/Contents.tsx
index 9ba5958e7..5d6661ae8 100644
--- a/src/components/Contents/Contents.tsx
+++ b/src/components/Contents/Contents.tsx
@@ -1,36 +1,34 @@
-import React from 'react';
+import React, { ComponentProps, useState } from 'react';
 import './styles/basic/main.css';
 import './styles/quanta/main.css';
 import type { ActionsResponse } from '@plone/types';
-import { ComponentProps, ReactNode, useState } from 'react';
-import {
-  DialogTrigger,
-  Tooltip,
-  TooltipTrigger,
-  useDragAndDrop,
-} from 'react-aria-components';
+import { useDragAndDrop } from 'react-aria-components';
 import cx from 'classnames';
 import {
-  AddIcon,
+  // AddIcon,
   Breadcrumbs,
-  Button,
   Container,
   QuantaTextField,
 } from '@plone/components';
 import { Table } from '../Table/Table';
 import { ContentsCell } from './ContentsCell';
-import { AddContentPopover } from './AddContentPopover';
+// import { AddContentPopover } from './AddContentPopover';
 import { indexes, defaultIndexes } from '../../helpers/indexes';
 import type { ArrayElement, Brain } from '../../helpers/types';
 
 interface ContentsProps {
   pathname: string;
+  breadcrumbs: ComponentProps<typeof Breadcrumbs>['items'];
   objectActions: ActionsResponse['object'];
   loading: boolean;
-  title: string;
   items: Brain[];
-  orderContent: (baseUrl: string, id: string, delta: number) => Promise<void>;
-  addableTypes: ComponentProps<typeof AddContentPopover>['addableTypes'];
+  cut: (value?: string) => Promise<void>;
+  copy: (value?: string) => Promise<void>;
+  deleteItem: (value?: string) => Promise<void>;
+  orderItem: (id: string, delta: number) => Promise<void>;
+  moveToTop: (index: number) => Promise<void>;
+  moveToBottom: (index: number) => Promise<void>;
+  // addableTypes: ComponentProps<typeof AddContentPopover>['addableTypes'];
 }
 
 /**
@@ -41,16 +39,18 @@ interface ContentsProps {
  */
 export function Contents({
   pathname,
+  breadcrumbs = [],
   objectActions,
   loading,
-  title,
   items,
-  orderContent,
-  addableTypes,
+  cut,
+  copy,
+  deleteItem,
+  orderItem,
+  moveToTop,
+  moveToBottom, // addableTypes,
 }: ContentsProps) {
   const [selected, setSelected] = useState<string[]>([]);
-  // const path = getBaseUrl(pathname);
-  const path = pathname;
 
   const folderContentsActions = objectActions.find(
     (action) => action.id === 'folderContents',
@@ -79,12 +79,21 @@ export function Contents({
     },
   ] as const;
 
-  const rows = items.map((item) =>
+  const rows = items.map((item, itemIndex) =>
     columns.reduce<ArrayElement<ComponentProps<typeof Table>['rows']>>(
       (cells, column) => ({
         ...cells,
         [column.id]: (
-          <ContentsCell key={column.id} item={item} column={column.id} />
+          <ContentsCell
+            key={column.id}
+            item={item}
+            column={column.id}
+            onMoveToBottom={() => moveToBottom(itemIndex)}
+            onMoveToTop={() => moveToTop(itemIndex)}
+            onCut={() => cut(item['@id'])}
+            onCopy={() => copy(item['@id'])}
+            onDelete={() => deleteItem(item['@id'])}
+          />
         ),
       }),
       { id: item['@id'] },
@@ -98,22 +107,28 @@ export function Contents({
       })),
     onReorder(e) {
       if (e.keys.size !== 1) {
+        // TODO mostrare toast o rendere non ordinabile quando più di un elemento è selezionato
         console.error('Only one item can be moved at a time');
+        return;
       }
-      const item = items.find((item) => item['@id'] === [...e.keys][0]);
+      const target = [...e.keys][0];
+      if (target === e.target.key) return;
+
+      const item = items.find((item) => item['@id'] === target);
       if (!item) return;
 
       const initialPosition = rows.findIndex((row) => row.id === item['@id']);
       if (initialPosition === -1) return;
 
-      let finalPosition = rows.findIndex((row) => row.id === e.target.key);
-      if (e.target.dropPosition === 'after') finalPosition += 1;
+      const finalPosition = rows.findIndex((row) => row.id === e.target.key);
 
-      orderContent(
-        path,
-        item.id.replace(/^.*\//, ''),
-        finalPosition - initialPosition,
-      );
+      let delta = finalPosition - initialPosition;
+      if (delta > 0 && e.target.dropPosition === 'before') delta -= 1;
+      if (delta < 0 && e.target.dropPosition === 'after') delta += 1;
+
+      if (delta !== 0) {
+        orderItem(item.id, delta);
+      }
     },
   });
 
@@ -132,28 +147,33 @@ export function Contents({
       <article id="content">
         <section className="topbar">
           <div className="title-block">
-            <Breadcrumbs includeRoot={true} items={[]} />
-            <h1>{title}</h1>
+            <Breadcrumbs
+              includeRoot={true}
+              root="/contents"
+              items={[...breadcrumbs].slice(0, -1)}
+            />
+            <h1>{[...breadcrumbs].slice(-1)[0]?.title}</h1>
           </div>
           <QuantaTextField
             name="sortable_title"
             placeholder="Search site"
             className="search-input"
           />
-          <TooltipTrigger>
+          {/* <TooltipTrigger>
             <DialogTrigger>
               <Button className="react-aria-Button add">
                 <AddIcon />
               </Button>
-              <AddContentPopover addableTypes={addableTypes} />
+              <AddContentPopover path={path} addableTypes={addableTypes} />
             </DialogTrigger>
             <Tooltip className="react-aria-Tooltip tooltip" placement="bottom">
               Add content
             </Tooltip>
-          </TooltipTrigger>
+          </TooltipTrigger> */}
         </section>
         <section className="contents-table">
           <Table
+            aria-label="Contents"
             columns={[...columns]}
             rows={rows}
             selectionMode="multiple"
diff --git a/src/components/Contents/ContentsCell.tsx b/src/components/Contents/ContentsCell.tsx
index b0134b8a0..07f649ce1 100644
--- a/src/components/Contents/ContentsCell.tsx
+++ b/src/components/Contents/ContentsCell.tsx
@@ -1,16 +1,33 @@
-import React from 'react';
+import React, { ComponentProps, useRef, useState } from 'react';
 import { DialogTrigger } from 'react-aria-components';
 import { Brain } from '../../helpers/types';
-import { Button, Link, MoreoptionsIcon, PageIcon } from '@plone/components';
+import { Link, MoreoptionsIcon, PageIcon } from '@plone/components';
 import { indexes } from '../../helpers/indexes';
+import { Button } from '../Button';
 import { ItemActionsPopover } from './ItemActionsPopover';
 
 interface Props {
   item: Brain;
   column: keyof typeof indexes | 'title' | '_actions';
+  onMoveToTop: ComponentProps<typeof ItemActionsPopover>['onMoveToTop'];
+  onMoveToBottom: ComponentProps<typeof ItemActionsPopover>['onMoveToBottom'];
+  onCut: ComponentProps<typeof ItemActionsPopover>['onCut'];
+  onCopy: ComponentProps<typeof ItemActionsPopover>['onCopy'];
+  onDelete: ComponentProps<typeof ItemActionsPopover>['onDelete'];
 }
 
-export function ContentsCell({ item, column }: Props) {
+export function ContentsCell({
+  item,
+  column,
+  onMoveToTop,
+  onMoveToBottom,
+  onCut,
+  onCopy,
+  onDelete,
+}: Props) {
+  const [isMoreOptionsOpen, setIsMoreOptionsOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
   if (column === 'title') {
     return (
       <Link
@@ -31,27 +48,55 @@ export function ContentsCell({ item, column }: Props) {
     );
   } else if (column === '_actions') {
     return (
-      <DialogTrigger>
-        <Button aria-label="More options">
+      <>
+        <Button
+          className="react-aria-Button item-actions-trigger"
+          aria-label="More options"
+          onPress={() => setIsMoreOptionsOpen(true)}
+          ref={triggerRef}
+        >
           <MoreoptionsIcon />
         </Button>
         <ItemActionsPopover
+          triggerRef={triggerRef}
+          isOpen={isMoreOptionsOpen}
+          onOpenChange={setIsMoreOptionsOpen}
           editLink={`${item['@id']}/edit`}
           viewLink={item['@id']}
-          onMoveToBottom={async () => {}}
-          onMoveToTop={async () => {}}
-          onCopy={async () => {}}
-          onCut={async () => {}}
-          onDelete={async () => {}}
+          onMoveToBottom={async () => {
+            const res = await onMoveToBottom();
+            setIsMoreOptionsOpen(false);
+            return res;
+          }}
+          onMoveToTop={async () => {
+            const res = await onMoveToTop();
+            setIsMoreOptionsOpen(false);
+            return res;
+          }}
+          onCopy={async () => {
+            const res = await onCopy();
+            setIsMoreOptionsOpen(false);
+            return res;
+          }}
+          onCut={async () => {
+            const res = await onCut();
+            setIsMoreOptionsOpen(false);
+            return res;
+          }}
+          onDelete={async () => {
+            const res = await onDelete();
+            setIsMoreOptionsOpen(false);
+            return res;
+          }}
         />
-      </DialogTrigger>
+      </>
     );
   } else {
     if (indexes[column].type === 'boolean') {
-      return item[column] ? 'Yes' : 'No';
+      return <>{item[column] ? 'Yes' : 'No'}</>;
     } else if (indexes[column].type === 'string') {
       if (column !== 'review_state') {
-        return item[column];
+        return <>{item[column]}</>;
       } else {
         return (
           <div>
@@ -65,13 +110,16 @@ export function ContentsCell({ item, column }: Props) {
     } else if (indexes[column].type === 'date') {
       if (item[column] && item[column] !== 'None') {
         // @ts-ignore TODO fix this, maybe a more strict type for the indexes?
-        return new Date(item[column]).toLocaleDateString();
+        return <>{new Date(item[column]).toLocaleDateString()}</>;
       } else {
-        return 'None';
+        return <>None</>;
       }
     } else if (indexes[column].type === 'array') {
       const value = item[column];
-      return Array.isArray(value) ? value.join(', ') : value;
+      return <>{Array.isArray(value) ? value.join(', ') : value}</>;
+    } else {
+      // TODO do we get here? needed for type checking?
+      return null;
     }
   }
 }
diff --git a/src/components/Contents/ItemActionsPopover.tsx b/src/components/Contents/ItemActionsPopover.tsx
index 57de9babf..589e185ba 100644
--- a/src/components/Contents/ItemActionsPopover.tsx
+++ b/src/components/Contents/ItemActionsPopover.tsx
@@ -3,6 +3,7 @@ import {
   Link,
   Button,
   Popover,
+  type PopoverProps,
   EditIcon,
   EyeIcon,
   RowbeforeIcon,
@@ -12,7 +13,7 @@ import {
   BinIcon,
 } from '@plone/components';
 
-interface Props {
+interface Props extends Omit<PopoverProps, 'children'> {
   editLink: string;
   viewLink: string;
   onMoveToTop: () => Promise<void>;
@@ -30,9 +31,13 @@ export function ItemActionsPopover({
   onCut,
   onCopy,
   onDelete,
+  ...popoverProps
 }: Props) {
   return (
-    <Popover className="react-aria-Popover item-actions-popover">
+    <Popover
+      {...popoverProps}
+      className="react-aria-Popover item-actions-popover"
+    >
       <ul className="item-actions-list">
         <li className="item-actions-list-item edit">
           <Link href={editLink}>
diff --git a/src/components/Contents/styles/basic/BlockToolbar.css b/src/components/Contents/styles/basic/BlockToolbar.css
index ba28e1ca7..e07afa9ac 100644
--- a/src/components/Contents/styles/basic/BlockToolbar.css
+++ b/src/components/Contents/styles/basic/BlockToolbar.css
@@ -1,9 +1,3 @@
-@import './Checkbox.css';
-@import './Button.css';
-@import './ToggleButton.css';
-@import './Menu.css';
-@import './theme.css';
-
 .blocks-toolbar {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/Contents/styles/basic/Breadcrumbs.css b/src/components/Contents/styles/basic/Breadcrumbs.css
index 6d62bb860..e8c2f9181 100644
--- a/src/components/Contents/styles/basic/Breadcrumbs.css
+++ b/src/components/Contents/styles/basic/Breadcrumbs.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 .react-aria-Breadcrumbs {
   display: flex;
   align-items: center;
diff --git a/src/components/Contents/styles/basic/Button.css b/src/components/Contents/styles/basic/Button.css
index f3aa367be..e315924fe 100644
--- a/src/components/Contents/styles/basic/Button.css
+++ b/src/components/Contents/styles/basic/Button.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 @layer components {
   .react-aria-Button {
     padding: 8px 8px;
diff --git a/src/components/Contents/styles/basic/Calendar.css b/src/components/Contents/styles/basic/Calendar.css
index 88676235d..06f449a47 100644
--- a/src/components/Contents/styles/basic/Calendar.css
+++ b/src/components/Contents/styles/basic/Calendar.css
@@ -1,6 +1,3 @@
-@import './Button.css';
-@import './theme.css';
-
 .react-aria-Calendar {
   width: fit-content;
   max-width: 100%;
diff --git a/src/components/Contents/styles/basic/Checkbox.css b/src/components/Contents/styles/basic/Checkbox.css
index 57d475fd1..825324372 100644
--- a/src/components/Contents/styles/basic/Checkbox.css
+++ b/src/components/Contents/styles/basic/Checkbox.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 .react-aria-Checkbox {
   --selected-color: var(--highlight-background);
   --selected-color-pressed: var(--highlight-background-pressed);
diff --git a/src/components/Contents/styles/basic/CheckboxGroup.css b/src/components/Contents/styles/basic/CheckboxGroup.css
index d2a6801dd..09380f3f6 100644
--- a/src/components/Contents/styles/basic/CheckboxGroup.css
+++ b/src/components/Contents/styles/basic/CheckboxGroup.css
@@ -1,8 +1,3 @@
-@import './Checkbox.css';
-@import './Form.css';
-@import './Button.css';
-@import './theme.css';
-
 .react-aria-CheckboxGroup {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Contents/styles/basic/ComboBox.css b/src/components/Contents/styles/basic/ComboBox.css
index 770dbbfc5..e2f6169a4 100644
--- a/src/components/Contents/styles/basic/ComboBox.css
+++ b/src/components/Contents/styles/basic/ComboBox.css
@@ -1,10 +1,3 @@
-@import './Checkbox.css';
-@import './ListBox.css';
-@import './Popover.css';
-@import './Form.css';
-@import './Button.css';
-@import './theme.css';
-
 .react-aria-ComboBox {
   color: var(--text-color);
 
diff --git a/src/components/Contents/styles/basic/DateField.css b/src/components/Contents/styles/basic/DateField.css
index 606c6e545..3bc3f7c74 100644
--- a/src/components/Contents/styles/basic/DateField.css
+++ b/src/components/Contents/styles/basic/DateField.css
@@ -1,7 +1,3 @@
-@import './Form.css';
-@import './Button.css';
-@import './theme.css';
-
 .react-aria-DateField {
   color: var(--text-color);
 }
diff --git a/src/components/Contents/styles/basic/DatePicker.css b/src/components/Contents/styles/basic/DatePicker.css
index 667472632..1b68389cb 100644
--- a/src/components/Contents/styles/basic/DatePicker.css
+++ b/src/components/Contents/styles/basic/DatePicker.css
@@ -1,11 +1,3 @@
-@import './Button.css';
-@import './Popover.css';
-@import './Dialog.css';
-@import './DateField.css';
-@import './Calendar.css';
-@import './Form.css';
-@import './theme.css';
-
 .react-aria-DatePicker {
   color: var(--text-color);
 
diff --git a/src/components/Contents/styles/basic/DateRangePicker.css b/src/components/Contents/styles/basic/DateRangePicker.css
index cee0dd8fe..e545c5d3b 100644
--- a/src/components/Contents/styles/basic/DateRangePicker.css
+++ b/src/components/Contents/styles/basic/DateRangePicker.css
@@ -1,11 +1,3 @@
-@import './Button.css';
-@import './Popover.css';
-@import './Dialog.css';
-@import './DateField.css';
-@import './RangeCalendar.css';
-@import './Form.css';
-@import './theme.css';
-
 .react-aria-DateRangePicker {
   color: var(--text-color);
 
diff --git a/src/components/Contents/styles/basic/Dialog.css b/src/components/Contents/styles/basic/Dialog.css
index 29ba60e55..b9e0a083a 100644
--- a/src/components/Contents/styles/basic/Dialog.css
+++ b/src/components/Contents/styles/basic/Dialog.css
@@ -1,8 +1,3 @@
-@import './Button.css';
-@import './TextField.css';
-@import './Modal.css';
-@import './theme.css';
-
 .react-aria-Dialog {
   padding: 30px;
   outline: none;
diff --git a/src/components/Contents/styles/basic/Form.css b/src/components/Contents/styles/basic/Form.css
index 4b65ea32c..db3c3e055 100644
--- a/src/components/Contents/styles/basic/Form.css
+++ b/src/components/Contents/styles/basic/Form.css
@@ -1,7 +1,3 @@
-@import './TextField.css';
-@import './Button.css';
-@import './theme.css';
-
 .react-aria-Form {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Contents/styles/basic/GridList.css b/src/components/Contents/styles/basic/GridList.css
index ebb5518a7..cef16657a 100644
--- a/src/components/Contents/styles/basic/GridList.css
+++ b/src/components/Contents/styles/basic/GridList.css
@@ -1,8 +1,3 @@
-@import './Button.css';
-@import './Checkbox.css';
-@import './ToggleButton.css';
-@import './theme.css';
-
 .react-aria-GridList {
   display: flex;
   overflow: auto;
diff --git a/src/components/Contents/styles/basic/Label.css b/src/components/Contents/styles/basic/Label.css
index 48348caec..3992c75fa 100644
--- a/src/components/Contents/styles/basic/Label.css
+++ b/src/components/Contents/styles/basic/Label.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 .react-aria-Label {
   /* TODO: Review since taken from default quanta */
   font-size: 0.9rem;
diff --git a/src/components/Contents/styles/basic/Link.css b/src/components/Contents/styles/basic/Link.css
index e626ff4c1..a9d96bf18 100644
--- a/src/components/Contents/styles/basic/Link.css
+++ b/src/components/Contents/styles/basic/Link.css
@@ -1,10 +1,8 @@
-@import './theme.css';
-
 .react-aria-Link {
   position: relative;
   color: var(--link-color);
   cursor: pointer;
-  font-size: 18px;
+  /* font-size: 18px; */
   outline: none;
   text-decoration: underline;
   transition: all 200ms;
diff --git a/src/components/Contents/styles/basic/ListBox.css b/src/components/Contents/styles/basic/ListBox.css
index 869a29ca3..aea63a289 100644
--- a/src/components/Contents/styles/basic/ListBox.css
+++ b/src/components/Contents/styles/basic/ListBox.css
@@ -1,6 +1,3 @@
-@import './Checkbox.css';
-@import './theme.css';
-
 .react-aria-ListBox {
   display: flex;
   overflow: auto;
diff --git a/src/components/Contents/styles/basic/Menu.css b/src/components/Contents/styles/basic/Menu.css
index 75f6399f0..f077df91e 100644
--- a/src/components/Contents/styles/basic/Menu.css
+++ b/src/components/Contents/styles/basic/Menu.css
@@ -1,7 +1,3 @@
-@import './Button.css';
-@import './Popover.css';
-@import './theme.css';
-
 .react-aria-Menu {
   overflow: auto;
   min-width: 150px;
diff --git a/src/components/Contents/styles/basic/Meter.css b/src/components/Contents/styles/basic/Meter.css
index 9e7a7bcce..00b7a8e2d 100644
--- a/src/components/Contents/styles/basic/Meter.css
+++ b/src/components/Contents/styles/basic/Meter.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 .react-aria-Meter {
   --fill-color: forestgreen;
 
diff --git a/src/components/Contents/styles/basic/Modal.css b/src/components/Contents/styles/basic/Modal.css
index dc0b75f39..efb378aff 100644
--- a/src/components/Contents/styles/basic/Modal.css
+++ b/src/components/Contents/styles/basic/Modal.css
@@ -1,7 +1,3 @@
-@import './Button.css';
-@import './TextField.css';
-@import './theme.css';
-
 .react-aria-ModalOverlay {
   position: fixed;
   z-index: 100;
diff --git a/src/components/Contents/styles/basic/NumberField.css b/src/components/Contents/styles/basic/NumberField.css
index 4ae0d0f18..3a9d0b249 100644
--- a/src/components/Contents/styles/basic/NumberField.css
+++ b/src/components/Contents/styles/basic/NumberField.css
@@ -1,7 +1,3 @@
-@import './Button.css';
-@import './Form.css';
-@import './theme.css';
-
 .react-aria-NumberField {
   margin-bottom: 8px;
   color: var(--text-color);
diff --git a/src/components/Contents/styles/basic/Popover.css b/src/components/Contents/styles/basic/Popover.css
index 66d00e48b..6927fb8e5 100644
--- a/src/components/Contents/styles/basic/Popover.css
+++ b/src/components/Contents/styles/basic/Popover.css
@@ -1,8 +1,3 @@
-@import './Button.css';
-@import './Dialog.css';
-@import './Switch.css';
-@import './theme.css';
-
 .react-aria-Popover {
   --background-color: var(--overlay-background);
   max-width: 250px;
diff --git a/src/components/Contents/styles/basic/ProgressBar.css b/src/components/Contents/styles/basic/ProgressBar.css
index 0ad1762e0..b2d2d4c1f 100644
--- a/src/components/Contents/styles/basic/ProgressBar.css
+++ b/src/components/Contents/styles/basic/ProgressBar.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 .react-aria-ProgressBar {
   display: grid;
   width: 250px;
diff --git a/src/components/Contents/styles/basic/RadioGroup.css b/src/components/Contents/styles/basic/RadioGroup.css
index 60fe72249..552d810a6 100644
--- a/src/components/Contents/styles/basic/RadioGroup.css
+++ b/src/components/Contents/styles/basic/RadioGroup.css
@@ -1,7 +1,3 @@
-@import './Button.css';
-@import './Form.css';
-@import './theme.css';
-
 .react-aria-RadioGroup {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Contents/styles/basic/RangeCalendar.css b/src/components/Contents/styles/basic/RangeCalendar.css
index ec9f4fe05..1ea9b74fc 100644
--- a/src/components/Contents/styles/basic/RangeCalendar.css
+++ b/src/components/Contents/styles/basic/RangeCalendar.css
@@ -1,6 +1,3 @@
-@import './Button.css';
-@import './theme.css';
-
 .react-aria-RangeCalendar {
   width: fit-content;
   max-width: 100%;
diff --git a/src/components/Contents/styles/basic/SearchField.css b/src/components/Contents/styles/basic/SearchField.css
index 7163ebd0a..5a0a00891 100644
--- a/src/components/Contents/styles/basic/SearchField.css
+++ b/src/components/Contents/styles/basic/SearchField.css
@@ -1,7 +1,3 @@
-@import './Button.css';
-@import './Form.css';
-@import './theme.css';
-
 .react-aria-SearchField {
   display: grid;
   width: fit-content;
diff --git a/src/components/Contents/styles/basic/Select.css b/src/components/Contents/styles/basic/Select.css
index bea2939c6..54cb850cc 100644
--- a/src/components/Contents/styles/basic/Select.css
+++ b/src/components/Contents/styles/basic/Select.css
@@ -1,9 +1,3 @@
-@import './ListBox.css';
-@import './Popover.css';
-@import './Button.css';
-@import './Form.css';
-@import './theme.css';
-
 .react-aria-Select {
   color: var(--text-color);
 
diff --git a/src/components/Contents/styles/basic/Slider.css b/src/components/Contents/styles/basic/Slider.css
index 857708de9..8ce168c42 100644
--- a/src/components/Contents/styles/basic/Slider.css
+++ b/src/components/Contents/styles/basic/Slider.css
@@ -1,6 +1,3 @@
-@import './NumberField.css';
-@import './theme.css';
-
 .react-aria-Slider {
   display: grid;
   max-width: 300px;
diff --git a/src/components/Contents/styles/basic/Switch.css b/src/components/Contents/styles/basic/Switch.css
index 97065a1ab..2813777f8 100644
--- a/src/components/Contents/styles/basic/Switch.css
+++ b/src/components/Contents/styles/basic/Switch.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 .react-aria-Switch {
   display: flex;
   align-items: center;
diff --git a/src/components/Contents/styles/basic/Table.css b/src/components/Contents/styles/basic/Table.css
index 7523d531b..44958824d 100644
--- a/src/components/Contents/styles/basic/Table.css
+++ b/src/components/Contents/styles/basic/Table.css
@@ -1,10 +1,3 @@
-@import './Button.css';
-@import './ToggleButton.css';
-@import './Checkbox.css';
-@import './Popover.css';
-@import './Menu.css';
-@import './theme.css';
-
 :root {
   --plone-table-border: 0 none;
   --plone-table-border-radius: 0;
diff --git a/src/components/Contents/styles/basic/Tabs.css b/src/components/Contents/styles/basic/Tabs.css
index 54bb15d50..e393435c2 100644
--- a/src/components/Contents/styles/basic/Tabs.css
+++ b/src/components/Contents/styles/basic/Tabs.css
@@ -1,7 +1,3 @@
-@import './Button.css';
-@import './Link.css';
-@import './theme.css';
-
 .react-aria-Tabs {
   display: flex;
   color: var(--text-color);
diff --git a/src/components/Contents/styles/basic/TagGroup.css b/src/components/Contents/styles/basic/TagGroup.css
index eab45234c..f9b214b31 100644
--- a/src/components/Contents/styles/basic/TagGroup.css
+++ b/src/components/Contents/styles/basic/TagGroup.css
@@ -1,6 +1,3 @@
-@import './ToggleButton.css';
-@import './theme.css';
-
 .react-aria-TagGroup {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Contents/styles/basic/TextField.css b/src/components/Contents/styles/basic/TextField.css
index 78abe9f37..fe163a649 100644
--- a/src/components/Contents/styles/basic/TextField.css
+++ b/src/components/Contents/styles/basic/TextField.css
@@ -1,7 +1,3 @@
-@import './Button.css';
-@import './Label.css';
-@import './theme.css';
-
 .react-aria-TextField {
   display: flex;
   width: fit-content;
diff --git a/src/components/Contents/styles/basic/TimeField.css b/src/components/Contents/styles/basic/TimeField.css
index 324881460..07a79e159 100644
--- a/src/components/Contents/styles/basic/TimeField.css
+++ b/src/components/Contents/styles/basic/TimeField.css
@@ -1,7 +1,3 @@
-@import './Form.css';
-@import './Button.css';
-@import './theme.css';
-
 .react-aria-TimeField {
   color: var(--text-color);
 }
diff --git a/src/components/Contents/styles/basic/ToggleButton.css b/src/components/Contents/styles/basic/ToggleButton.css
index 944a343d6..1daf04f33 100644
--- a/src/components/Contents/styles/basic/ToggleButton.css
+++ b/src/components/Contents/styles/basic/ToggleButton.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 .react-aria-ToggleButton {
   padding: 8px 8px;
   border: 1px solid var(--border-color);
diff --git a/src/components/Contents/styles/basic/Toolbar.css b/src/components/Contents/styles/basic/Toolbar.css
index b19359135..953604586 100644
--- a/src/components/Contents/styles/basic/Toolbar.css
+++ b/src/components/Contents/styles/basic/Toolbar.css
@@ -1,9 +1,3 @@
-@import './Checkbox.css';
-@import './Button.css';
-@import './ToggleButton.css';
-@import './Menu.css';
-@import './theme.css';
-
 .react-aria-Toolbar {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/Contents/styles/basic/Tooltip.css b/src/components/Contents/styles/basic/Tooltip.css
index b8294360f..98670aa28 100644
--- a/src/components/Contents/styles/basic/Tooltip.css
+++ b/src/components/Contents/styles/basic/Tooltip.css
@@ -1,6 +1,3 @@
-@import './Button.css';
-@import './theme.css';
-
 .react-aria-Tooltip {
   max-width: 150px;
   padding: 2px 8px;
diff --git a/src/components/Contents/styles/basic/icons.css b/src/components/Contents/styles/basic/icons.css
index 2174fefb9..6fa65a6ff 100644
--- a/src/components/Contents/styles/basic/icons.css
+++ b/src/components/Contents/styles/basic/icons.css
@@ -1,5 +1,3 @@
-@import './theme.css';
-
 :root {
   /* These has to be mapped to global css custom properties based on the SG scales */
   --quanta-icon-default-size-s: 18px;
diff --git a/src/components/Contents/styles/basic/main.css b/src/components/Contents/styles/basic/main.css
index 09a850cf6..c3940efae 100644
--- a/src/components/Contents/styles/basic/main.css
+++ b/src/components/Contents/styles/basic/main.css
@@ -1,3 +1,7 @@
+@import './theme.css';
+
+@import './icons.css';
+
 @import './Link.css';
 @import './Button.css';
 @import './ToggleButton.css';
@@ -5,10 +9,10 @@
 @import './Checkbox.css';
 @import './CheckboxGroup.css';
 @import './Combobox.css';
-@import './NumberField.css';
-@import './RadioGroup.css';
-@import './Switch.css';
-@import './Slider.css';
+/* @import './NumberField.css'; */
+/* @import './RadioGroup.css'; */
+/* @import './Switch.css'; */
+/* @import './Slider.css'; */
 @import './Calendar.css';
 @import './DateField.css';
 @import './DatePicker.css';
@@ -37,7 +41,3 @@
 
 @import './Breadcrumbs.css';
 @import './BlockToolbar.css';
-
-@import './icons.css';
-
-@import './theme.css';
diff --git a/src/components/Contents/styles/basic/theme.css b/src/components/Contents/styles/basic/theme.css
index 0191819f3..ad007096d 100644
--- a/src/components/Contents/styles/basic/theme.css
+++ b/src/components/Contents/styles/basic/theme.css
@@ -1,14 +1,14 @@
 @import '../quanta/colors.css';
 
 /* Base styles */
-:root {
+/* :root {
   --basic-font-family: system-ui;
   --basic-font-size: 14px;
   background: var(--background-color);
   font-family: var(--basic-font-family);
   font-size: var(--basic-font-size);
   line-height: 1.5;
-}
+} */
 
 /* color themes for dark and light modes, generated with Leonardo.
  * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
diff --git a/src/components/Contents/styles/quanta/Contents.css b/src/components/Contents/styles/quanta/Contents.css
index 5f2bbc62c..ba24f4e4a 100644
--- a/src/components/Contents/styles/quanta/Contents.css
+++ b/src/components/Contents/styles/quanta/Contents.css
@@ -74,6 +74,12 @@
   }
 }
 
+.item-actions-trigger {
+  --border-color: transparent;
+  --border-color-pressed: transparent;
+  padding: 0;
+}
+
 .item-actions-list {
   padding: 0;
   margin: 0;
@@ -91,4 +97,10 @@
   .icon {
     margin-inline-end: 1rem;
   }
+
+  .react-aria-Button {
+    --border-color: transparent;
+    --border-color-pressed: transparent;
+    padding: 0;
+  }
 }
diff --git a/src/components/Contents/styles/quanta/main.css b/src/components/Contents/styles/quanta/main.css
index 6ac0595fd..abbcd7a86 100644
--- a/src/components/Contents/styles/quanta/main.css
+++ b/src/components/Contents/styles/quanta/main.css
@@ -9,6 +9,7 @@
 /* Views */
 @import './Contents.css';
 
-.it-header-wrapper {
+.view-contentsview .it-header-wrapper,
+.view-contentsview #briciole {
   display: none;
 }
diff --git a/src/customizations/volto/components/manage/Contents/Contents.jsx b/src/customizations/volto/components/manage/Contents/Contents.jsx
index 13bfae82d..db5a973e6 100644
--- a/src/customizations/volto/components/manage/Contents/Contents.jsx
+++ b/src/customizations/volto/components/manage/Contents/Contents.jsx
@@ -36,6 +36,8 @@ import {
 } from 'lodash';
 import move from 'lodash-move';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { RouterProvider } from 'react-aria-components';
+import loadable from '@loadable/component';
 import { asyncConnect } from '@plone/volto/helpers';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
@@ -74,8 +76,6 @@ import {
 import { Helmet, getBaseUrl } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
-import { Contents as ContentsTable } from 'design-comuni-plone-theme/components/Contents/Contents';
-
 import config from '@plone/volto/registry';
 
 import backSVG from '@plone/volto/icons/back.svg';
@@ -99,6 +99,14 @@ import downKeySVG from '@plone/volto/icons/down-key.svg';
 import moreSVG from '@plone/volto/icons/more.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
+const ContentsTable = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ 'design-comuni-plone-theme/components/Contents/Contents'
+    ),
+  { resolveComponent: (module) => module.Contents },
+);
+
 const messages = defineMessages({
   back: {
     id: 'Back',
@@ -768,11 +776,15 @@ class Contents extends Component {
    */
   onOrderItem(id, itemIndex, delta, backend) {
     if (backend) {
-      this.props.orderContent(
-        getBaseUrl(this.props.pathname),
-        id.replace(/^.*\//, ''),
-        delta,
-      );
+      this.props
+        .orderContent(
+          getBaseUrl(this.props.pathname),
+          id.replace(/^.*\//, ''),
+          delta,
+        )
+        .then(() => {
+          this.fetchContents();
+        });
     } else {
       this.setState({
         items: move(this.state.items, itemIndex, itemIndex + delta),
@@ -1198,15 +1210,60 @@ class Contents extends Component {
         {folderContentsAction ? (
           <>
             <Helmet title={this.props.intl.formatMessage(messages.contents)} />
-            <ContentsTable
-              pathname={getBaseUrl(this.props.pathname)}
-              objectActions={this.props.objectActions}
-              loading={loading}
-              title={this.props.title}
-              items={this.state.items}
-              orderContent={this.props.orderContent}
-              addableTypes={this.props.addableTypes}
-            />
+            <RouterProvider navigate={this.props.history.push}>
+              <ContentsTable
+                pathname={getBaseUrl(this.props.pathname)}
+                breadcrumbs={this.props.breadcrumbs.map((b) => ({
+                  '@id': `${b.url}/contents`,
+                  title: b.title,
+                }))}
+                objectActions={this.props.objectActions}
+                loading={loading}
+                title={this.props.title}
+                items={this.state.items}
+                cut={(id) =>
+                  Promise.resolve(this.cut(undefined, { value: id }))
+                }
+                copy={(id) =>
+                  Promise.resolve(this.copy(undefined, { value: id }))
+                }
+                deleteItem={(id) =>
+                  Promise.resolve(this.delete(undefined, { value: id }))
+                }
+                orderItem={(id, delta) =>
+                  Promise.resolve(this.onOrderItem(id, undefined, delta, true))
+                }
+                moveToTop={(index) =>
+                  Promise.resolve(this.onMoveToTop(undefined, { value: index }))
+                }
+                moveToBottom={(index) =>
+                  Promise.resolve(
+                    this.onMoveToBottom(undefined, { value: index }),
+                  )
+                }
+                addableTypes={this.props.addableTypes}
+              />
+            </RouterProvider>
+            {this.state.isClient && (
+              <Portal node={document.getElementById('toolbar')}>
+                <Toolbar
+                  pathname={this.props.pathname}
+                  inner={
+                    <Link
+                      to={`${path}`}
+                      aria-label={this.props.intl.formatMessage(messages.back)}
+                    >
+                      <Icon
+                        name={backSVG}
+                        className="contents circled"
+                        size="30px"
+                        title={this.props.intl.formatMessage(messages.back)}
+                      />
+                    </Link>
+                  }
+                />
+              </Portal>
+            )}
           </>
         ) : (
           // <Container
@@ -2210,25 +2267,25 @@ class Contents extends Component {
   }
 }
 
-let dndContext;
+// let dndContext;
 
-const DragDropConnector = (props) => {
-  const { DragDropContext } = props.reactDnd;
-  const HTML5Backend = props.reactDndHtml5Backend.default;
+// const DragDropConnector = (props) => {
+//   const { DragDropContext } = props.reactDnd;
+//   const HTML5Backend = props.reactDndHtml5Backend.default;
 
-  const DndConnectedContents = React.useMemo(() => {
-    if (!dndContext) {
-      dndContext = DragDropContext(HTML5Backend);
-    }
-    return dndContext(Contents);
-  }, [DragDropContext, HTML5Backend]);
+//   const DndConnectedContents = React.useMemo(() => {
+//     if (!dndContext) {
+//       dndContext = DragDropContext(HTML5Backend);
+//     }
+//     return dndContext(Contents);
+//   }, [DragDropContext, HTML5Backend]);
 
-  return <DndConnectedContents {...props} />;
-};
+//   return <DndConnectedContents {...props} />;
+// };
 
 export const __test__ = compose(
   injectIntl,
-  injectLazyLibs(['toastify', 'reactDnd']),
+  injectLazyLibs(['toastify']),
   connect(
     (store, props) => {
       return {
@@ -2250,7 +2307,9 @@ export const __test__ = compose(
         updateRequest: store.content.update,
         objectActions: store.actions.actions.object,
         orderRequest: store.content.order,
-        addableTypes: store.types.types.filter((t) => t.addable),
+        addableTypes: Array.isArray(store.types.types)
+          ? store.types.types.filter((t) => t.addable)
+          : [],
       };
     },
     {
@@ -2293,7 +2352,9 @@ export default compose(
         updateRequest: store.content.update,
         objectActions: store.actions.actions.object,
         orderRequest: store.content.order,
-        addableTypes: store.types.types.filter((t) => t.addable),
+        addableTypes: Array.isArray(store.types.types)
+          ? store.types.types.filter((t) => t.addable)
+          : [],
       };
     },
     {
@@ -2320,5 +2381,5 @@ export default compose(
         await dispatch(listActions(getBaseUrl(location.pathname))),
     },
   ]),
-  injectLazyLibs(['toastify', 'reactDnd', 'reactDndHtml5Backend']),
-)(DragDropConnector);
+  injectLazyLibs(['toastify']),
+)(Contents);
diff --git a/src/declaration.d.ts b/src/declaration.d.ts
index b303a0c59..51ec4c39c 100644
--- a/src/declaration.d.ts
+++ b/src/declaration.d.ts
@@ -22,3 +22,8 @@ declare module '*.module.less' {
 
 declare var __CLIENT__: boolean;
 declare var __SERVER__: boolean;
+
+// TODO remove when Contents customization is removed
+// declare module '@plone/volto/helpers' {
+//   export function getBaseUrl(pathname: string): string;
+// }
diff --git a/tsconfig.json b/tsconfig.json
index 3579506ee..2fc8fb28e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "emitDecoratorMetadata": false,