@luscii-healthtech/web-ui 2.5.1 → 2.5.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.1",
+  "version": "2.5.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -103,6 +103,7 @@
     "@fontsource/roboto": "^4.5.7",
     "@hookform/error-message": "^2.0.0",
     "@reach/router": "^1.3.4",
+    "@types/react-dragula": "^1.1.0",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",

package/src/components/List/List.scss

@@ -0,0 +1,23 @@
+li {
+  &.gu-mirror {
+    @apply shadow-xl m-0 fixed z-9999;
+  }
+
+  &.gu-hide {
+    @apply hidden;
+  }
+
+  &.gu-unselectable {
+    @apply select-none;
+  }
+
+  &.gu-transit {
+    @apply bg-blue-50;
+    @apply outline-dropTarget;
+    filter: none;
+    @apply opacity-100 rounded-none border-none; // TODO we only need these to override them in cVitals-Web
+  }
+  &.gu-transit > * {
+    @apply invisible;
+  }
+}

package/src/components/List/List.tsx

@@ -10,10 +10,11 @@ import {
   ListProps,
   ListItemProps,
   OnAssetLoadErrorPayload,
-  Dragula,
 } from "./List.types";
 import { ListSkeleton } from "./ListSkeleton";
 
+import "./List.scss";
+
 export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
 
 export const List = ({
@@ -27,19 +28,19 @@ export const List = ({
   isLoading,
 }: ListProps): JSX.Element => {
   const listRef = useRef<HTMLUListElement | null>(null);
-  const dragulaRef = useRef<Dragula | null>(null);
+  const dragulaRef = useRef<dragula.Drake | null>(null);
   const hasHeader = !!(title || headerButton);
 
   useEffect(() => {
     dragulaRef.current?.destroy?.();
-    if (onDragEnd && items.length) {
+    if (listRef.current && onDragEnd && items.length) {
       dragulaRef.current = setupDragging();
     }
 
     return () => {
       dragulaRef.current?.destroy?.();
     };
-  }, [items]);
+  }, [items, listRef]);
 
   const handleDragEnd = (element: HTMLElement) => {
     const draggedItemId = element.dataset["id"];
@@ -61,11 +62,14 @@ export const List = ({
     }
   };
 
-  const setupDragging = (): Dragula => {
+  const setupDragging = (): dragula.Drake | null => {
+    if (!listRef.current) {
+      return null;
+    }
     const dragulaInstance = dragula([listRef.current], {
       revertOnSpill: true,
     });
-    dragulaInstance.on("dragend", handleDragEnd);
+    dragulaInstance.on("dragend", handleDragEnd as (Element) => void);
 
     return dragulaInstance;
   };

package/src/components/List/List.types.ts

@@ -39,7 +39,3 @@ export type ListProps = {
   emptyStateMessage?: string;
   isLoading?: boolean;
 };
-
-export interface Dragula {
-  destroy?: () => void;
-}