Merge remote-tracking branch 'origin/release/2024-09-27' into feature/IO-2935-Deploy-New-WSS

client/index.html

@@ -17,7 +17,7 @@
   <meta name="theme-color" content="#1690ff"/>
   <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
   <!-- TODO:AIo Update the individual logos for each.-->
-  <link rel="apple-touch-icon" href="public/logo192.png"/>
+  <link rel="apple-touch-icon" href="/logo192.png"/>
   <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
   <!--
     manifest.json provides metadata used when your web app is installed on a

client/src/components/production-board-kanban/production-board-kanban.styles.scss

@@ -17,7 +17,6 @@
   border-radius: 5px 5px 0 0;
 }
 
-
 .production-alert {
   background: transparent;
   border: none;
@@ -70,3 +69,8 @@
     }
   }
 }
+
+.clone.is-dragging .ant-card {
+  border: #1890ff 2px solid !important;
+  border-radius: 12px;
+}

client/src/components/production-board-kanban/trello-board/dnd/lib/state/get-droppable-over.js

@@ -25,8 +25,8 @@ function getFurthestAway({ pageBorderBox, draggable, candidates }) {
       const axis = candidate.axis;
       const target = patch(
         candidate.axis.line,
-        // use the current center of the dragging item on the main axis
-        pageBorderBox.center[axis.line],
+        // use the center of the list on the main axis
+        candidate.page.borderBox.center[axis.line],
         // use the center of the list on the cross axis
         candidate.page.borderBox.center[axis.crossAxisLine]
       );

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-droppable-publisher/get-closest-scrollable.js

@@ -5,6 +5,7 @@ import getBodyElement from "../get-body-element";
 const isEqual = (base) => (value) => base === value;
 const isScroll = isEqual("scroll");
 const isAuto = isEqual("auto");
+const isOverlay = isEqual("overlay");
 const isVisible = isEqual("visible");
 const isEither = (overflow, fn) => fn(overflow.overflowX) || fn(overflow.overflowY);
 const isBoth = (overflow, fn) => fn(overflow.overflowX) && fn(overflow.overflowY);
@@ -14,7 +15,7 @@ const isElementScrollable = (el) => {
     overflowX: style.overflowX,
     overflowY: style.overflowY
   };
-  return isEither(overflow, isScroll) || isEither(overflow, isAuto);
+  return isEither(overflow, isScroll) || isEither(overflow, isAuto) || isEither(overflow, isOverlay);
 };
 
 // Special case for a body element

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/find-closest-draggable-id-from-event.js

@@ -8,7 +8,7 @@ function getSelector(contextId) {
   return `[${attributes.dragHandle.contextId}="${contextId}"]`;
 }
 
-function findClosestDragHandleFromEvent(contextId, event) {
+export function findClosestDragHandleFromEvent(contextId, event) {
   const target = event.target;
   if (!isElement(target)) {
     warning("event.target must be a Element");

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/sensors/use-touch-sensor.js

@@ -240,11 +240,14 @@ export default function useTouchSensor(api) {
           y: clientY
         };
 
+        const handle = api.findClosestDragHandle(event);
+        invariant(handle, "Touch sensor unable to find drag handle");
+
         // unbind this event handler
         unbindEventsRef.current();
 
         // eslint-disable-next-line no-use-before-define
-        startPendingDrag(actions, point);
+        startPendingDrag(actions, point, handle);
       }
     }),
     // not including stop or startPendingDrag as it is not defined initially
@@ -288,7 +291,7 @@ export default function useTouchSensor(api) {
     }
   }, [stop]);
   const bindCapturingEvents = useCallback(
-    function bindCapturingEvents() {
+    function bindCapturingEvents(target) {
       const options = {
         capture: true,
         passive: false
@@ -307,7 +310,7 @@ export default function useTouchSensor(api) {
       // Old behaviour:
       // https://gist.github.com/parris/dda613e3ae78f14eb2dc9fa0f4bfce3d
       // https://stackoverflow.com/questions/33298828/touch-move-event-dont-fire-after-touch-start-target-is-removed
-      const unbindTarget = bindEvents(window, getHandleBindings(args), options);
+      const unbindTarget = bindEvents(target, getHandleBindings(args), options);
       const unbindWindow = bindEvents(window, getWindowBindings(args), options);
       unbindEventsRef.current = function unbindAll() {
         unbindTarget();
@@ -330,7 +333,7 @@ export default function useTouchSensor(api) {
     [getPhase, setPhase]
   );
   const startPendingDrag = useCallback(
-    function startPendingDrag(actions, point) {
+    function startPendingDrag(actions, point, target) {
       invariant(getPhase().type === "IDLE", "Expected to move from IDLE to PENDING drag");
       const longPressTimerId = setTimeout(startDragging, timeForLongPress);
       setPhase({
@@ -339,7 +342,7 @@ export default function useTouchSensor(api) {
         actions,
         longPressTimerId
       });
-      bindCapturingEvents();
+      bindCapturingEvents(target);
     },
     [bindCapturingEvents, getPhase, setPhase, startDragging]
   );

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/use-sensor-marshal.js

@@ -23,7 +23,9 @@ import getBorderBoxCenterPosition from "../get-border-box-center-position";
 import { warning } from "../../dev-warning";
 import useLayoutEffect from "../use-isomorphic-layout-effect";
 import { noop } from "../../empty";
-import findClosestDraggableIdFromEvent from "./find-closest-draggable-id-from-event";
+import findClosestDraggableIdFromEvent, {
+  findClosestDragHandleFromEvent
+} from "./find-closest-draggable-id-from-event";
 import findDraggable from "../get-elements/find-draggable";
 import bindEvents from "../event-bindings/bind-events";
 
@@ -339,6 +341,9 @@ export default function useSensorMarshal({ contextId, store, registry, customSen
       }),
     [contextId, lockAPI, registry, store]
   );
+
+  const findClosestDragHandle = useCallback((event) => findClosestDragHandleFromEvent(contextId, event), [contextId]);
+
   const findClosestDraggableId = useCallback((event) => findClosestDraggableIdFromEvent(contextId, event), [contextId]);
   const findOptionsForDraggable = useCallback(
     (id) => {
@@ -370,9 +375,18 @@ export default function useSensorMarshal({ contextId, store, registry, customSen
       findClosestDraggableId,
       findOptionsForDraggable,
       tryReleaseLock,
-      isLockClaimed
+      isLockClaimed,
+      findClosestDragHandle
     }),
-    [canGetLock, tryGetLock, findClosestDraggableId, findOptionsForDraggable, tryReleaseLock, isLockClaimed]
+    [
+      canGetLock,
+      tryGetLock,
+      findClosestDraggableId,
+      findOptionsForDraggable,
+      tryReleaseLock,
+      isLockClaimed,
+      findClosestDragHandle
+    ]
   );
 
   // Bad ass

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-style-marshal/get-styles.js

@@ -83,7 +83,13 @@ const getFinalStyles = (contextId) => {
     return {
       selector: getSelector(attributes.draggable.contextId),
       styles: {
-        dragging: transition,
+        dragging: `
+          ${transition}
+          user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+        `,
         dropAnimating: transition,
         userCancel: transition
       }

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-style-marshal/use-style-marshal.js

@@ -67,7 +67,9 @@ export default function useStyleMarshal(contextId, nonce) {
       const remove = (ref) => {
         const current = ref.current;
         invariant(current, "Cannot unmount ref as it is not set");
-        getHead().removeChild(current);
+        if (getHead().contains(current)) {
+          getHead().removeChild(current);
+        }
         ref.current = null;
       };
       remove(alwaysRef);