@sis-cc/dotstatsuite-visions 13.9.0 → 14.1.0

package/dist/TableLayout/TableLayout.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Fragment, useState, useEffect, useMemo } from 'react';
+import React, { Fragment, useState, useEffect, useMemo, useRef } from 'react';
 import cx from 'classnames';
 import * as R from 'ramda';
 import Grid from '@mui/material/Grid';
@@ -7,13 +7,15 @@ import Typography from '@mui/material/Typography';
 import { ViewColumnOutlined, Reorder, ViewListOutlined, ViewQuiltOutlined, Done, CheckBoxOutlineBlankOutlined, Undo } from '@mui/icons-material';
 import { visuallyHidden } from '@mui/utils';
 import { makeStyles as makeStyles$1 } from '@mui/styles';
-import { Draggable, Droppable, DragDropContext } from '@hello-pangea/dnd';
+import { useDroppable, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, DragOverlay } from '@dnd-kit/core';
+import { useSortable, SortableContext, verticalListSortingStrategy, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import { a as getLight, b as getDark, w as withBlank } from '../chunks/utils-kslX1mzh.js';
 import { TablePreview } from '../TablePreview/TablePreview.js';
 import PropTypes from 'prop-types';
 import makeStyles from '@mui/styles/makeStyles';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
+import { CSS } from '@dnd-kit/utilities';
 import { Button } from '../Button/Button.js';
 
 const BOX = {
@@ -78,51 +80,94 @@ const useStyles$2 = makeStyles((theme) => ({
     margin: theme.spacing(0, 1, 0, 0)
   }
 }));
-const DnDItem = ({ item, index, itemRenderer, dropZoneLabel, itemButtonProps, canDrag }) => {
-  const classes = useStyles$2();
-  const selectItem = R.prop(item.id)(itemButtonProps);
-  return /* @__PURE__ */ jsx(Draggable, { draggableId: item.id, index, isDragDisabled: R.not(canDrag), children: (provided) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-testid": `draggable-${item.id}`,
-      ref: provided.innerRef,
-      ...provided.draggableProps,
-      ...provided.dragHandleProps,
-      className: cx(
-        classes.styledItemContainer,
-        classes.containerButton,
-        [R.prop(`${dropZoneLabel}Item`)(classes)],
-        {
-          [classes.cantMove]: R.not(canDrag)
-        }
-      ),
-      "aria-label": itemRenderer(item),
-      "aria-describedby": wcagId,
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Typography,
+const ItemBody = React.forwardRef(
+  ({
+    item,
+    itemRenderer,
+    dropZoneLabel,
+    itemButtonProps,
+    canDrag,
+    style,
+    dragHandleProps,
+    describedBy
+  }, ref) => {
+    const classes = useStyles$2();
+    const selectItem = R.prop(item.id)(itemButtonProps);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        style,
+        "data-testid": `draggable-${item.id}`,
+        ...dragHandleProps,
+        className: cx(
+          classes.styledItemContainer,
+          classes.containerButton,
+          [R.prop(`${dropZoneLabel}Item`)(classes)],
           {
-            variant: "body2",
-            className: cx(classes.text, { [classes.spaceButton]: selectItem }),
-            children: itemRenderer(item)
+            [classes.cantMove]: R.not(canDrag)
           }
         ),
-        selectItem && /* @__PURE__ */ jsx(
-          Select,
-          {
-            id: item.id,
-            value: selectItem.value,
-            onChange: (e) => selectItem.onChange(e.target.value),
-            classes: { root: classes.select },
-            variant: "outlined",
-            size: "small",
-            autoWidth: true,
-            children: R.map((v) => /* @__PURE__ */ jsx(MenuItem, { value: v, children: v }, v))(selectItem.options)
-          }
-        )
-      ] })
+        "aria-label": itemRenderer(item),
+        "aria-describedby": describedBy,
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              className: cx(classes.text, { [classes.spaceButton]: selectItem }),
+              children: itemRenderer(item)
+            }
+          ),
+          selectItem && /* @__PURE__ */ jsx(
+            Select,
+            {
+              id: item.id,
+              value: selectItem.value,
+              onChange: (e) => selectItem.onChange(e.target.value),
+              onPointerDown: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              classes: { root: classes.select },
+              variant: "outlined",
+              size: "small",
+              autoWidth: true,
+              children: R.map((v) => /* @__PURE__ */ jsx(MenuItem, { value: v, children: v }, v))(selectItem.options)
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+ItemBody.displayName = "ItemBody";
+const DnDItem = ({ item, index, itemRenderer, dropZoneLabel, itemButtonProps, canDrag }) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: item.id,
+    data: { containerId: dropZoneLabel, index },
+    disabled: R.not(canDrag)
+  });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    // The floating copy is rendered by the DragOverlay, so hide the in-list
+    // node while keeping its slot to act as the drop placeholder.
+    opacity: isDragging ? 0 : void 0
+  };
+  const describedBy = R.trim(`${R.propOr("", "aria-describedby", attributes)} ${wcagId}`);
+  return /* @__PURE__ */ jsx(
+    ItemBody,
+    {
+      ref: setNodeRef,
+      item,
+      itemRenderer,
+      dropZoneLabel,
+      itemButtonProps,
+      canDrag,
+      style,
+      dragHandleProps: { ...attributes, ...listeners },
+      describedBy
     }
-  ) }, item.id);
+  );
 };
 DnDItem.propTypes = {
   item: PropTypes.object,
@@ -180,37 +225,42 @@ const Box = ({
   md
 }) => {
   const classes = useStyles$1();
+  const itemValues = R.values(items);
+  const ids = R.map(R.prop("id"), itemValues);
   const canDrag = R.equals(dropZoneLabel, BOX.rows) ? R.pipe(R.length, R.lt(1))(items) : R.T();
+  const { setNodeRef, active, over } = useDroppable({
+    id: dropZoneLabel,
+    data: { containerId: dropZoneLabel }
+  });
+  const overContainerId = R.path(["data", "current", "containerId"], over);
+  const isDraggingOver = !R.isNil(active) && R.equals(overContainerId, dropZoneLabel);
   return /* @__PURE__ */ jsxs(Grid, { item: true, xs: accessibility ? 4 : 12, md, children: [
     /* @__PURE__ */ jsxs("div", { className: classes.iconTitle, children: [
       /* @__PURE__ */ jsx(Icon, {}),
       /* @__PURE__ */ jsx("span", { className: classes.title, children: title }),
       /* @__PURE__ */ jsx(Typography, { style: visuallyHidden, children: title })
     ] }),
-    /* @__PURE__ */ jsx(Droppable, { droppableId: dropZoneLabel, children: (provided, snapshot) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(SortableContext, { id: dropZoneLabel, items: ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(
       "div",
       {
         "data-testid": `droppable-${dropZoneLabel}`,
-        ref: provided.innerRef,
+        ref: setNodeRef,
         className: cx(classes.blockDnd, R.prop(`${dropZoneLabel}Container`)(classes), {
-          [classes.canDrop]: snapshot.isDraggingOver
+          [classes.canDrop]: isDraggingOver
         }),
-        children: [
-          R.addIndex(R.map)((item, index) => /* @__PURE__ */ jsx(
-            DnDItem,
-            {
-              index,
-              item,
-              itemRenderer,
-              dropZoneLabel,
-              onChangeLayout,
-              itemButtonProps,
-              canDrag
-            },
-            item.id
-          ))(R.values(items)),
-          provided.placeholder
-        ]
+        children: R.addIndex(R.map)((item, index) => /* @__PURE__ */ jsx(
+          DnDItem,
+          {
+            index,
+            item,
+            itemRenderer,
+            dropZoneLabel,
+            onChangeLayout,
+            itemButtonProps,
+            canDrag
+          },
+          item.id
+        ))(itemValues)
       }
     ) })
   ] });
@@ -235,7 +285,7 @@ const changeLayout = ({ dragIndex, hoverIndex, dragZone, dropZone, currentLayout
   const item = R.pipe(R.prop(dragZone), R.nth(dragIndex))(currentLayout);
   return R.pipe(
     R.over(R.lensProp(dragZone), R.without([item])),
-    R.over(R.lensProp(dropZone), R.insert(hoverIndex, item)),
+    R.over(R.lensProp(dropZone), R.insert(hoverIndex, item))
   )(currentLayout);
 };
 
@@ -244,6 +294,24 @@ const getIsOptionalActivated = (layout, optionalId) => {
   return !R.isNil(founded);
 };
 
+/**
+ * Resolve which zone (header/sections/rows) a dnd-kit id belongs to.
+ * The id is either a zone key itself (when hovering an empty zone) or an item id.
+ * @param {Object} layout - { header: string[], sections: string[], rows: string[] }
+ * @param {string} id - a zone key or an item id
+ * @returns {string|undefined} the owning zone key, or undefined if not found
+ */
+const findContainer = (layout, id) => {
+  if (R.has(id, layout)) {
+    return id;
+  }
+  return R.pipe(
+    R.toPairs,
+    R.find(([, ids]) => R.includes(id, ids)),
+    R.nth(0)
+  )(layout);
+};
+
 const useStyles = makeStyles$1((theme) => ({
   dnd: {
     userSelect: "none"
@@ -264,13 +332,13 @@ const useStyles = makeStyles$1((theme) => ({
     }
   }
 }));
-const transform = {
-  index: R.add(1)
-};
+const EMPTY_LAYOUT = {};
+const EMPTY_ITEMS = [];
+const EMPTY_OPTIONAL_ITEM = {};
 const CustomTableLayout = ({
-  layout = {},
-  items = [],
-  optionalItem = {},
+  layout = EMPTY_LAYOUT,
+  items = EMPTY_ITEMS,
+  optionalItem = EMPTY_OPTIONAL_ITEM,
   itemRenderer = R.prop("name"),
   itemButtonProps,
   labels,
@@ -295,7 +363,14 @@ const CustomTableLayout = ({
     }
     return indexed;
   }, [items, optionalItem]);
-  const onChangeLayout = (props) => setCurrentLayout(changeLayout({ ...props }));
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const [activeId, setActiveId] = useState(null);
+  const clonedLayoutRef = useRef(null);
+  const layoutRef = useRef(currentLayout);
+  layoutRef.current = currentLayout;
   const activateOptionalItem = () => {
     const nextLayout = R.over(R.lensProp("header"), R.append(optionalItem.id), currentLayout);
     setCurrentLayout(nextLayout);
@@ -313,79 +388,112 @@ const CustomTableLayout = ({
       setCurrentLayout(layout);
     }
   };
-  const onDragStart = ({ draggableId, source }, provided) => {
-    if (R.is(Function)(labels.wcagDragStart)) {
-      const dragZoneId = source.droppableId;
-      const dragLabel = R.pipe(
-        R.prop(dragZoneId),
-        R.find(R.propEq("id", draggableId)),
-        itemRenderer
-      )(currentLayout);
-      R.pipe(
-        R.evolve(transform),
-        R.prop("wcagDragStart", labels),
-        provided.announce
-      )({
-        dragZone: R.prop(dragZoneId)(boxLabel),
-        ...source,
-        dragLabel
-      });
-    }
+  const handleDragStart = ({ active }) => {
+    clonedLayoutRef.current = currentLayout;
+    setActiveId(active.id);
   };
-  const onDragUpdate = ({ destination, source }, provided) => {
-    if (R.isNil(destination)) {
+  const handleDragOver = ({ active, over }) => {
+    if (R.isNil(over)) {
       return;
     }
-    if (R.is(Function)(labels.wcagDragUpdate)) {
-      const { droppableId, index } = destination;
-      const length = R.ifElse(
-        R.always(R.equals(droppableId, source.droppableId)),
-        R.pipe(R.prop(droppableId), R.length),
-        R.pipe(R.prop(droppableId), R.length, R.add(1))
-      )(currentLayout);
-      R.pipe(
-        R.evolve(transform),
-        R.prop("wcagDragUpdate", labels),
-        provided.announce
-      )({
-        dropZone: R.prop(droppableId)(boxLabel),
-        dragZone: R.prop(source.droppableId)(boxLabel),
-        index,
-        length
-      });
-    }
+    setCurrentLayout((prev) => {
+      const dragZone = findContainer(prev, active.id);
+      const dropZone = findContainer(prev, over.id);
+      if (R.isNil(dragZone) || R.isNil(dropZone) || R.equals(dragZone, dropZone)) {
+        return prev;
+      }
+      const dragIndex = R.indexOf(active.id, prev[dragZone]);
+      const hoverIndex = R.has(over.id, prev) ? R.length(prev[dropZone]) : R.indexOf(over.id, prev[dropZone]);
+      return changeLayout({ dragIndex, hoverIndex, dragZone, dropZone, currentLayout: prev });
+    });
   };
-  const onDragEnd = (layout2) => ({ reason, destination, source }, provided) => {
-    if (R.is(String)(labels.wcagDragCancel)) {
-      if (R.equals(reason, "CANCEL")) {
-        provided.announce(labels.wcagDragCancel);
+  const handleDragEnd = ({ active, over }) => {
+    const cloned = clonedLayoutRef.current;
+    setActiveId(null);
+    clonedLayoutRef.current = null;
+    if (R.isNil(over)) {
+      if (!R.isNil(cloned)) {
+        setCurrentLayout(cloned);
       }
-    }
-    if (R.isNil(destination)) {
       return;
     }
-    if (R.is(Function)(labels.wcagDragEnd)) {
-      if (R.equals(reason, "DROP")) {
-        const { droppableId, index } = destination;
-        R.pipe(
-          R.evolve(transform),
-          R.prop("wcagDragEnd", labels),
-          provided.announce
-        )({
-          dropZone: R.prop(droppableId)(boxLabel),
-          dragZone: R.prop(source.droppableId)(boxLabel),
-          index
-        });
+    setCurrentLayout((prev) => {
+      const dragZone = findContainer(prev, active.id);
+      const dropZone = findContainer(prev, over.id);
+      if (R.isNil(dragZone) || R.isNil(dropZone) || R.not(R.equals(dragZone, dropZone))) {
+        return prev;
       }
-    }
-    onChangeLayout({
-      dragIndex: source.index,
-      hoverIndex: destination.index,
-      dragZone: source.droppableId,
-      dropZone: destination.droppableId,
-      currentLayout: layout2
+      const dragIndex = R.indexOf(active.id, prev[dropZone]);
+      const hoverIndex = R.has(over.id, prev) ? R.length(prev[dropZone]) - 1 : R.indexOf(over.id, prev[dropZone]);
+      if (hoverIndex < 0 || R.equals(dragIndex, hoverIndex)) {
+        return prev;
+      }
+      return changeLayout({ dragIndex, hoverIndex, dragZone, dropZone, currentLayout: prev });
     });
   };
+  const handleDragCancel = () => {
+    const cloned = clonedLayoutRef.current;
+    clonedLayoutRef.current = null;
+    setActiveId(null);
+    if (!R.isNil(cloned)) {
+      setCurrentLayout(cloned);
+    }
+  };
+  const announcements = {
+    onDragStart: ({ active }) => {
+      if (R.not(R.is(Function, labels.wcagDragStart))) {
+        return void 0;
+      }
+      const dragZone = findContainer(layoutRef.current, active.id);
+      const index = R.indexOf(active.id, R.propOr([], dragZone, layoutRef.current));
+      return labels.wcagDragStart({
+        dragZone: R.prop(dragZone, boxLabel),
+        droppableId: dragZone,
+        index: index + 1,
+        dragLabel: itemRenderer(R.prop(active.id, indexedItems))
+      });
+    },
+    onDragOver: ({ active, over }) => {
+      if (R.isNil(over) || R.not(R.is(Function, labels.wcagDragUpdate))) {
+        return void 0;
+      }
+      const dragZone = findContainer(clonedLayoutRef.current || layoutRef.current, active.id);
+      const dropZone = findContainer(layoutRef.current, over.id);
+      if (R.isNil(dropZone)) {
+        return void 0;
+      }
+      const dropItems = R.propOr([], dropZone, layoutRef.current);
+      const index = R.has(over.id, layoutRef.current) ? R.length(dropItems) : R.indexOf(over.id, dropItems);
+      const length = R.equals(dropZone, dragZone) ? R.length(dropItems) : R.length(dropItems) + 1;
+      return labels.wcagDragUpdate({
+        dropZone: R.prop(dropZone, boxLabel),
+        dragZone: R.prop(dragZone, boxLabel),
+        index: index + 1,
+        length
+      });
+    },
+    onDragEnd: ({ active, over }) => {
+      if (R.isNil(over) || R.not(R.is(Function, labels.wcagDragEnd))) {
+        return void 0;
+      }
+      const dragZone = findContainer(clonedLayoutRef.current || layoutRef.current, active.id);
+      const dropZone = findContainer(layoutRef.current, over.id);
+      if (R.isNil(dropZone)) {
+        return void 0;
+      }
+      const dropItems = R.propOr([], dropZone, layoutRef.current);
+      const index = R.has(over.id, layoutRef.current) ? R.length(dropItems) - 1 : R.indexOf(over.id, dropItems);
+      return labels.wcagDragEnd({
+        dropZone: R.prop(dropZone, boxLabel),
+        dragZone: R.prop(dragZone, boxLabel),
+        index: index + 1
+      });
+    },
+    onDragCancel: () => R.is(String, labels.wcagDragCancel) ? labels.wcagDragCancel : void 0
+  };
+  const screenReaderInstructions = R.is(String, labels.wcagDragExplanation) ? { draggable: labels.wcagDragExplanation } : void 0;
+  const overlayItem = R.isNil(activeId) ? null : R.prop(activeId, indexedItems);
+  const overlayZone = R.isNil(activeId) ? null : findContainer(clonedLayoutRef.current || currentLayout, activeId);
   const getItems = (level) => R.pipe(R.prop(level), (ids) => R.props(ids, indexedItems), R.filter(R.identity))(currentLayout);
   const header = /* @__PURE__ */ jsx(
     Box,
@@ -434,41 +542,61 @@ const CustomTableLayout = ({
   const isOptionalActivated = getIsOptionalActivated(currentLayout, R.prop("id", optionalItem));
   return /* @__PURE__ */ jsxs(Grid, { "data-testid": "table-layout-test-id", container: true, children: [
     /* @__PURE__ */ jsx("div", { id: wcagId, "aria-live": "assertive", style: { display: "none" }, children: labels.wcagDragExplanation }),
-    /* @__PURE__ */ jsx(
-      DragDropContext,
+    /* @__PURE__ */ jsxs(
+      DndContext,
       {
-        onDragEnd: onDragEnd(currentLayout),
-        onDragStart,
-        onDragUpdate,
-        children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", spacing: 1, className: classes.dnd, children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
-            /* @__PURE__ */ jsxs(Grid, { tabIndex: 0, item: true, xs: 12, md: accessibility ? 12 : 6, children: [
-              /* @__PURE__ */ jsx("span", { children: labels.help }),
-              /* @__PURE__ */ jsx(Typography, { style: visuallyHidden, children: labels.wcagDragExplanation })
-            ] }),
-            R.not(accessibility) && header
-          ] }) }),
-          /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
-            accessibility && header,
-            accessibility && sectionsAndRows,
-            R.not(accessibility) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: sectionsAndRows }),
-            !noPreview && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, md: accessibility ? 12 : 6, className: cx(classes.wrapper), children: [
-              /* @__PURE__ */ jsxs("div", { className: classes.iconTitle, children: [
-                /* @__PURE__ */ jsx(ViewQuiltOutlined, {}),
-                /* @__PURE__ */ jsx(Typography, { tabIndex: 0, variant: "subtitle1", children: labels.table })
+        sensors,
+        collisionDetection: closestCorners,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        accessibility: {
+          announcements,
+          ...screenReaderInstructions ? { screenReaderInstructions } : {}
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", spacing: 1, className: classes.dnd, children: [
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
+              /* @__PURE__ */ jsxs(Grid, { tabIndex: 0, item: true, xs: 12, md: accessibility ? 12 : 6, children: [
+                /* @__PURE__ */ jsx("span", { children: labels.help }),
+                /* @__PURE__ */ jsx(Typography, { style: visuallyHidden, children: labels.wcagDragExplanation })
               ] }),
-              /* @__PURE__ */ jsx(
-                TablePreview,
-                {
-                  header: R.props(R.prop("header", currentLayout), indexedItems),
-                  sections: R.props(R.prop("sections", currentLayout), indexedItems),
-                  rows: R.props(R.prop("rows", currentLayout), indexedItems),
-                  itemRenderer
-                }
-              )
+              R.not(accessibility) && header
+            ] }) }),
+            /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
+              accessibility && header,
+              accessibility && sectionsAndRows,
+              R.not(accessibility) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: sectionsAndRows }),
+              !noPreview && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, md: accessibility ? 12 : 6, className: cx(classes.wrapper), children: [
+                /* @__PURE__ */ jsxs("div", { className: classes.iconTitle, children: [
+                  /* @__PURE__ */ jsx(ViewQuiltOutlined, {}),
+                  /* @__PURE__ */ jsx(Typography, { tabIndex: 0, variant: "subtitle1", children: labels.table })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  TablePreview,
+                  {
+                    header: R.props(R.prop("header", currentLayout), indexedItems),
+                    sections: R.props(R.prop("sections", currentLayout), indexedItems),
+                    rows: R.props(R.prop("rows", currentLayout), indexedItems),
+                    itemRenderer
+                  }
+                )
+              ] })
             ] })
-          ] })
-        ] })
+          ] }),
+          /* @__PURE__ */ jsx(DragOverlay, { children: overlayItem ? /* @__PURE__ */ jsx(
+            ItemBody,
+            {
+              item: overlayItem,
+              itemRenderer,
+              dropZoneLabel: overlayZone,
+              itemButtonProps,
+              canDrag: true,
+              describedBy: wcagId
+            }
+          ) : null })
+        ]
       }
     ),
     /* @__PURE__ */ jsxs(