@elliemae/ds-shuttle-v2 3.14.0-next.1 → 3.14.0-next.10

package/dist/cjs/parts/Item/ItemActions/useActionsLogicHandlers.js

@@ -31,60 +31,48 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useStore = require("../../../config/useStore");
 var import_itemMovementHelpers = require("../../../config/itemMovementHelpers");
+var import_useFocusTracker = require("../../../config/useFocusTracker");
 const useActionsLogicHandlers = (itemMeta) => {
-  const { item, isDestinationPanel } = itemMeta;
-  const currData = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.destinationData : state.sourceData);
-  const currWithSoftDelete = (0, import_useStore.usePropsStore)(
-    (state) => isDestinationPanel ? state.destinationWithSoftDelete : state.sourceWithSoftDelete
-  );
-  const currOnChange = (0, import_useStore.usePropsStore)(
-    (state) => isDestinationPanel ? state.onDestinationChange : state.onSourceChange
-  );
-  const currOnRemove = (0, import_useStore.usePropsStore)(
-    (state) => isDestinationPanel ? state.onDestinationRemove : state.onSourceRemove
-  );
+  const { datum, isDestinationPanel } = itemMeta;
+  const moveCurrentItem = (0, import_itemMovementHelpers.useHandleMoveItem)(itemMeta);
+  const { trackFocusItemReset } = (0, import_useFocusTracker.useFocusItemTracker)();
+  const { trackFocusActionReset } = (0, import_useFocusTracker.useFocusActionTrackers)();
+  const { trackFocusRegionPanel } = (0, import_useFocusTracker.useFocusTracker)();
   const currDrilldown = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown
   );
-  const otherData = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.sourceData : state.destinationData);
-  const otherPanelOnChange = (0, import_useStore.usePropsStore)(
-    (state) => isDestinationPanel ? state.onSourceChange : state.onDestinationChange
-  );
-  const otherPanelOnAdd = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.onSourceAdd : state.onDestinationAdd);
   const handleDrilldown = import_react.default.useCallback(
     (event) => {
       event.preventDefault();
       event.stopPropagation();
-      currDrilldown(item.original, { event });
+      currDrilldown(datum, { event });
+      trackFocusRegionPanel(isDestinationPanel);
+      trackFocusItemReset();
+      trackFocusActionReset();
     },
-    [currDrilldown, item]
+    [currDrilldown, datum, isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
   );
   const handleSingleMove = import_react.default.useCallback(
     (event) => {
       event.preventDefault();
       event.stopPropagation();
-      const { newCurrData, newOtherData } = (0, import_itemMovementHelpers.getNewDatasWithItemMoved)({
-        item: item.original,
-        currData,
-        currWithSoftDelete,
-        otherData
-      });
-      currOnRemove([item.original], { event });
-      otherPanelOnAdd([item.original], { event });
-      currOnChange(newCurrData, { item: item.original, event });
-      otherPanelOnChange(newOtherData, { item: item.original, event });
+      moveCurrentItem(event);
+      trackFocusRegionPanel(isDestinationPanel);
+      trackFocusItemReset();
+      trackFocusActionReset();
     },
-    [
-      currData,
-      currOnChange,
-      currOnRemove,
-      currWithSoftDelete,
-      item.original,
-      otherData,
-      otherPanelOnAdd,
-      otherPanelOnChange
-    ]
+    [isDestinationPanel, moveCurrentItem, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
+  );
+  const preventKeyDownSelectionBubbleUp = import_react.default.useCallback((event) => {
+    const { key } = event;
+    if (["Spacebar", " ", "Enter"].includes(key)) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, []);
+  return import_react.default.useMemo(
+    () => ({ handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp }),
+    [handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp]
   );
-  return import_react.default.useMemo(() => ({ handleDrilldown, handleSingleMove }), [handleDrilldown, handleSingleMove]);
 };
 //# sourceMappingURL=useActionsLogicHandlers.js.map

package/dist/cjs/parts/Item/ItemActions/useActionsLogicHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/useActionsLogicHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { usePropsStore } from '../../../config/useStore';\nimport { getNewDatasWithItemMoved } from '../../../config/itemMovementHelpers';\n\nexport const useActionsLogicHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item, isDestinationPanel } = itemMeta;\n\n  const currData = usePropsStore((state) => (isDestinationPanel ? state.destinationData : state.sourceData));\n  const currWithSoftDelete = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithSoftDelete : state.sourceWithSoftDelete,\n  );\n  const currOnChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationChange : state.onSourceChange,\n  );\n  const currOnRemove = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationRemove : state.onSourceRemove,\n  );\n\n  const currDrilldown = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown,\n  );\n\n  const otherData = usePropsStore((state) => (isDestinationPanel ? state.sourceData : state.destinationData));\n  const otherPanelOnChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onSourceChange : state.onDestinationChange,\n  );\n  const otherPanelOnAdd = usePropsStore((state) => (isDestinationPanel ? state.onSourceAdd : state.onDestinationAdd));\n\n  const handleDrilldown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      currDrilldown(item.original, { event });\n    },\n    [currDrilldown, item],\n  );\n\n  const handleSingleMove = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      const { newCurrData, newOtherData } = getNewDatasWithItemMoved({\n        item: item.original,\n        currData,\n        currWithSoftDelete,\n        otherData,\n      });\n      currOnRemove([item.original], { event });\n      otherPanelOnAdd([item.original], { event });\n\n      currOnChange(newCurrData, { item: item.original, event });\n      otherPanelOnChange(newOtherData, { item: item.original, event });\n    },\n    [\n      currData,\n      currOnChange,\n      currOnRemove,\n      currWithSoftDelete,\n      item.original,\n      otherData,\n      otherPanelOnAdd,\n      otherPanelOnChange,\n    ],\n  );\n  return React.useMemo(() => ({ handleDrilldown, handleSingleMove }), [handleDrilldown, handleSingleMove]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAA8B;AAC9B,iCAAyC;AAElC,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,MAAM,mBAAmB,IAAI;AAErC,QAAM,eAAW,+BAAc,CAAC,UAAW,qBAAqB,MAAM,kBAAkB,MAAM,UAAW;AACzG,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,sBAAsB,MAAM;AAAA,EACzD;AACA,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,sBAAsB,MAAM;AAAA,EACzD;AAEA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,gBAAY,+BAAc,CAAC,UAAW,qBAAqB,MAAM,aAAa,MAAM,eAAgB;AAC1G,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,iBAAiB,MAAM;AAAA,EACpD;AACA,QAAM,sBAAkB,+BAAc,CAAC,UAAW,qBAAqB,MAAM,cAAc,MAAM,gBAAiB;AAElH,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,oBAAc,KAAK,UAAU,EAAE,MAAM,CAAC;AAAA,IACxC;AAAA,IACA,CAAC,eAAe,IAAI;AAAA,EACtB;AAEA,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,YAAM,EAAE,aAAa,aAAa,QAAI,qDAAyB;AAAA,QAC7D,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AACD,mBAAa,CAAC,KAAK,QAAQ,GAAG,EAAE,MAAM,CAAC;AACvC,sBAAgB,CAAC,KAAK,QAAQ,GAAG,EAAE,MAAM,CAAC;AAE1C,mBAAa,aAAa,EAAE,MAAM,KAAK,UAAU,MAAM,CAAC;AACxD,yBAAmB,cAAc,EAAE,MAAM,KAAK,UAAU,MAAM,CAAC;AAAA,IACjE;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,iBAAiB,iBAAiB,IAAI,CAAC,iBAAiB,gBAAgB,CAAC;AACzG;",
+  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { usePropsStore } from '../../../config/useStore';\nimport { useHandleMoveItem } from '../../../config/itemMovementHelpers';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../../config/useFocusTracker';\n\nexport const useActionsLogicHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datum, isDestinationPanel } = itemMeta;\n  const moveCurrentItem = useHandleMoveItem(itemMeta);\n  const { trackFocusItemReset } = useFocusItemTracker();\n  const { trackFocusActionReset } = useFocusActionTrackers();\n  const { trackFocusRegionPanel } = useFocusTracker();\n\n  const currDrilldown = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown,\n  );\n\n  const handleDrilldown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      currDrilldown(datum, { event });\n      trackFocusRegionPanel(isDestinationPanel);\n      trackFocusItemReset();\n      trackFocusActionReset();\n    },\n    [currDrilldown, datum, isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n\n  const handleSingleMove = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      moveCurrentItem(event);\n      trackFocusRegionPanel(isDestinationPanel);\n      trackFocusItemReset();\n      trackFocusActionReset();\n    },\n    [isDestinationPanel, moveCurrentItem, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n\n  const preventKeyDownSelectionBubbleUp = React.useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\n    const { key } = event;\n    // Spacebar AND ' ' are cross-browser compatibility thing\n    if (['Spacebar', ' ', 'Enter'].includes(key)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }, []);\n\n  return React.useMemo(\n    () => ({ handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp }),\n    [handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAA8B;AAC9B,iCAAkC;AAClC,6BAA6E;AAEtE,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,OAAO,mBAAmB,IAAI;AACtC,QAAM,sBAAkB,8CAAkB,QAAQ;AAClD,QAAM,EAAE,oBAAoB,QAAI,4CAAoB;AACpD,QAAM,EAAE,sBAAsB,QAAI,+CAAuB;AACzD,QAAM,EAAE,sBAAsB,QAAI,wCAAgB;AAElD,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,oBAAc,OAAO,EAAE,MAAM,CAAC;AAC9B,4BAAsB,kBAAkB;AACxC,0BAAoB;AACpB,4BAAsB;AAAA,IACxB;AAAA,IACA,CAAC,eAAe,OAAO,oBAAoB,uBAAuB,qBAAqB,qBAAqB;AAAA,EAC9G;AAEA,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,sBAAgB,KAAK;AACrB,4BAAsB,kBAAkB;AACxC,0BAAoB;AACpB,4BAAsB;AAAA,IACxB;AAAA,IACA,CAAC,oBAAoB,iBAAiB,uBAAuB,qBAAqB,qBAAqB;AAAA,EACzG;AAEA,QAAM,kCAAkC,aAAAA,QAAM,YAAY,CAAC,UAAkD;AAC3G,UAAM,EAAE,IAAI,IAAI;AAEhB,QAAI,CAAC,YAAY,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC5C,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,iBAAiB,kBAAkB,gCAAgC;AAAA,IAC5E,CAAC,iBAAiB,kBAAkB,+BAA+B;AAAA,EACrE;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/ItemActions/useInnerRefHandlers.js

@@ -31,12 +31,12 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useStore = require("../../../config/useStore");
 var import_constants = require("../../../constants");
-const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
+const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
   const focusRegion = (0, import_useStore.useInternalStore)((state) => state.focusRegion);
   const focusItem = (0, import_useStore.useInternalStore)((state) => state.focusItem);
   const focusItemAction = (0, import_useStore.useInternalStore)((state) => state.focusItemAction);
   const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
-  const currItemId = item.original.id;
+  const currItemId = datumInternalMeta.hydratedId;
   const { shouldFocusDrilldown, shouldFocusMove, shouldFocusDnd } = import_react.default.useMemo(
     () => ({
       shouldFocusDrilldown: focusItem === currItemId && focusRegion === currRegion && focusItemAction === import_constants.ACTIONS_FOCUSES.DRILLDOWN_BTN,

package/dist/cjs/parts/Item/ItemActions/useInnerRefHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/useInnerRefHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInternalStore } from '../../../config/useStore';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES } from '../../../constants';\n\nexport const useInnerRefHandlers = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = item.original.id;\n  const { shouldFocusDrilldown, shouldFocusMove, shouldFocusDnd } = React.useMemo(\n    () => ({\n      shouldFocusDrilldown:\n        focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.DRILLDOWN_BTN,\n      shouldFocusMove:\n        focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.MOVE_BTN,\n      shouldFocusDnd:\n        focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.DRAG_N_DROP,\n    }),\n    [currItemId, currRegion, focusItem, focusItemAction, focusRegion],\n  );\n  const innerRefHandlerDrilldown = React.useCallback(\n    (node: HTMLButtonElement) => {\n      if (shouldFocusDrilldown) node?.focus();\n    },\n    [shouldFocusDrilldown],\n  );\n  const innerRefHandlerMove = React.useCallback(\n    (node: HTMLButtonElement) => {\n      if (shouldFocusMove) node?.focus();\n    },\n    [shouldFocusMove],\n  );\n  const innerRefHandlerDnd = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (shouldFocusDnd) node?.focus();\n    },\n    [shouldFocusDnd],\n  );\n  return React.useMemo(\n    () => ({\n      shouldFocusDrilldown,\n      shouldFocusMove,\n      innerRefHandlerDnd,\n      innerRefHandlerDrilldown,\n      innerRefHandlerMove,\n    }),\n    [innerRefHandlerDrilldown, innerRefHandlerDnd, innerRefHandlerMove, shouldFocusDrilldown, shouldFocusMove],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAAiC;AACjC,uBAAiD;AAE1C,MAAM,sBAAsB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AAC1F,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,KAAK,SAAS;AACjC,QAAM,EAAE,sBAAsB,iBAAiB,eAAe,IAAI,aAAAA,QAAM;AAAA,IACtE,OAAO;AAAA,MACL,sBACE,cAAc,cAAc,gBAAgB,cAAc,oBAAoB,iCAAgB;AAAA,MAChG,iBACE,cAAc,cAAc,gBAAgB,cAAc,oBAAoB,iCAAgB;AAAA,MAChG,gBACE,cAAc,cAAc,gBAAgB,cAAc,oBAAoB,iCAAgB;AAAA,IAClG;AAAA,IACA,CAAC,YAAY,YAAY,WAAW,iBAAiB,WAAW;AAAA,EAClE;AACA,QAAM,2BAA2B,aAAAA,QAAM;AAAA,IACrC,CAAC,SAA4B;AAC3B,UAAI;AAAsB,cAAM,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AACA,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAA4B;AAC3B,UAAI;AAAiB,cAAM,MAAM;AAAA,IACnC;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,SAAgC;AAC/B,UAAI;AAAgB,cAAM,MAAM;AAAA,IAClC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AACA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,0BAA0B,oBAAoB,qBAAqB,sBAAsB,eAAe;AAAA,EAC3G;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInternalStore } from '../../../config/useStore';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES } from '../../../constants';\n\nexport const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = datumInternalMeta.hydratedId;\n  const { shouldFocusDrilldown, shouldFocusMove, shouldFocusDnd } = React.useMemo(\n    () => ({\n      shouldFocusDrilldown:\n        focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.DRILLDOWN_BTN,\n      shouldFocusMove:\n        focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.MOVE_BTN,\n      shouldFocusDnd:\n        focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.DRAG_N_DROP,\n    }),\n    [currItemId, currRegion, focusItem, focusItemAction, focusRegion],\n  );\n  const innerRefHandlerDrilldown = React.useCallback(\n    (node: HTMLButtonElement) => {\n      if (shouldFocusDrilldown) node?.focus();\n    },\n    [shouldFocusDrilldown],\n  );\n  const innerRefHandlerMove = React.useCallback(\n    (node: HTMLButtonElement) => {\n      if (shouldFocusMove) node?.focus();\n    },\n    [shouldFocusMove],\n  );\n  const innerRefHandlerDnd = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (shouldFocusDnd) node?.focus();\n    },\n    [shouldFocusDnd],\n  );\n  return React.useMemo(\n    () => ({\n      shouldFocusDrilldown,\n      shouldFocusMove,\n      innerRefHandlerDnd,\n      innerRefHandlerDrilldown,\n      innerRefHandlerMove,\n    }),\n    [innerRefHandlerDrilldown, innerRefHandlerDnd, innerRefHandlerMove, shouldFocusDrilldown, shouldFocusMove],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAAiC;AACjC,uBAAiD;AAE1C,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,mBAAmB,MAA6B;AACvG,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,kBAAkB;AACrC,QAAM,EAAE,sBAAsB,iBAAiB,eAAe,IAAI,aAAAA,QAAM;AAAA,IACtE,OAAO;AAAA,MACL,sBACE,cAAc,cAAc,gBAAgB,cAAc,oBAAoB,iCAAgB;AAAA,MAChG,iBACE,cAAc,cAAc,gBAAgB,cAAc,oBAAoB,iCAAgB;AAAA,MAChG,gBACE,cAAc,cAAc,gBAAgB,cAAc,oBAAoB,iCAAgB;AAAA,IAClG;AAAA,IACA,CAAC,YAAY,YAAY,WAAW,iBAAiB,WAAW;AAAA,EAClE;AACA,QAAM,2BAA2B,aAAAA,QAAM;AAAA,IACrC,CAAC,SAA4B;AAC3B,UAAI;AAAsB,cAAM,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AACA,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAA4B;AAC3B,UAAI;AAAiB,cAAM,MAAM;AAAA,IACnC;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,SAAgC;AAC/B,UAAI;AAAgB,cAAM,MAAM;AAAA,IAClC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AACA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,0BAA0B,oBAAoB,qBAAqB,sBAAsB,eAAe;AAAA,EAC3G;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/ItemMiddleSection.js

@@ -32,15 +32,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_typography = require("@elliemae/ds-typography");
 var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
+var import_TextSection = require("./TextSection");
 const IconWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ICON_WRAPPER })`
   min-height: 1rem;
 `;
-const LabelWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`
-  min-height: 1rem;
-`;
-const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER })`
+const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
+  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER
+})`
   min-height: 1rem;
   ${(props) => {
   if (props.$softDeleted)
@@ -55,20 +55,19 @@ const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: imp
 `;
 const customMidSectionCols = ["1fr"];
 const customMidSectionRows = ["1fr"];
-const withSubtitleRows = ["auto", "auto"];
-const TextSection = import_react.default.memo((props) => {
-  const { label, subtitle } = props.item.original;
-  if (subtitle === void 0)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelWrapper, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: label }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { alignItems: "center", rows: withSubtitleRows, gutter: "1px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b4", children: subtitle })
-  ] });
-});
 const ItemMiddleSection = import_react.default.memo((itemMeta) => {
-  const { item } = itemMeta;
-  const { original } = item;
-  const { Icon, CustomRenderer, softDeleted } = original;
+  const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;
+  const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;
+  const { softDeleted, hydratedId } = datumInternalMeta;
+  const customComponentProps = import_react.default.useMemo(
+    () => ({
+      datum,
+      panelMetaInfo: { isDestinationPanel, hasMultipleSelection },
+      datumInternalMeta,
+      datumHydratables: { ...componentlessHydratables, id: hydratedId }
+    }),
+    [componentlessHydratables, datum, datumInternalMeta, hasMultipleSelection, hydratedId, isDestinationPanel]
+  );
   const cols = import_react.default.useMemo(() => {
     if (CustomRenderer)
       return [];
@@ -79,10 +78,10 @@ const ItemMiddleSection = import_react.default.memo((itemMeta) => {
     return dynamicCols;
   }, [CustomRenderer, Icon]);
   if (CustomRenderer)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MidSection, { cols: customMidSectionCols, rows: customMidSectionRows, $softDeleted: softDeleted, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomRenderer, { ...itemMeta }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MidSection, { cols, alignItems: "center", ml: "xxs", $softDeleted: softDeleted, children: [
-    Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { alignItems: "center", mr: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...itemMeta }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextSection, { ...itemMeta })
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MidSection, { cols: customMidSectionCols, rows: customMidSectionRows, $softDeleted: Boolean(softDeleted), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomRenderer, { ...customComponentProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MidSection, { cols, alignItems: "center", ml: "xxs", $softDeleted: Boolean(softDeleted), children: [
+    Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { alignItems: "center", mr: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...customComponentProps }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextSection.TextSection, { ...itemMeta })
   ] });
 });
 //# sourceMappingURL=ItemMiddleSection.js.map

package/dist/cjs/parts/Item/ItemMiddleSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/ItemMiddleSection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\nconst LabelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`\n  min-height: 1rem;\n`;\nconst MidSection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER })`\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nconst withSubtitleRows = ['auto', 'auto'];\nconst TextSection = React.memo((props: DSShuttleV2T.ItemMeta) => {\n  const { label, subtitle } = props.item.original;\n  if (subtitle === undefined)\n    return (\n      <LabelWrapper alignItems=\"center\">\n        <DSTypography variant=\"b1\">{label}</DSTypography>\n      </LabelWrapper>\n    );\n  return (\n    <Grid alignItems=\"center\" rows={withSubtitleRows} gutter=\"1px\">\n      <DSTypography variant=\"b1\">{label}</DSTypography>\n      <DSTypography variant=\"b4\">{subtitle}</DSTypography>\n    </Grid>\n  );\n});\n\nexport const ItemMiddleSection = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item } = itemMeta;\n  const { original } = item;\n  const { Icon, CustomRenderer, softDeleted } = original;\n  const cols = React.useMemo(() => {\n    // if CustomRenderer is defined, shortcircuit\n    if (CustomRenderer) return [];\n    const dynamicCols = [];\n    if (Icon) dynamicCols.push('auto');\n    dynamicCols.push('1fr');\n    return dynamicCols;\n  }, [CustomRenderer, Icon]);\n\n  if (CustomRenderer)\n    return (\n      <MidSection cols={customMidSectionCols} rows={customMidSectionRows} $softDeleted={softDeleted}>\n        <CustomRenderer {...itemMeta} />\n      </MidSection>\n    );\n\n  return (\n    <MidSection cols={cols} alignItems=\"center\" ml=\"xxs\" $softDeleted={softDeleted}>\n      {Icon ? (\n        <IconWrapper alignItems=\"center\" mr=\"xxs\">\n          <Icon {...itemMeta} />\n        </IconWrapper>\n      ) : null}\n      <TextSection {...itemMeta} />\n    </MidSection>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCf;AAnCR,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,2BAA6B;AAE7B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,kBAAkB,CAAC;AAAA;AAAA;AAGpG,MAAM,mBAAe,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,mBAAmB,CAAC;AAAA;AAAA;AAGtG,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAAA;AAAA,IAErG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE1B,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGvC,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAEnC,MAAM,mBAAmB,CAAC,QAAQ,MAAM;AACxC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,UAAiC;AAC/D,QAAM,EAAE,OAAO,SAAS,IAAI,MAAM,KAAK;AACvC,MAAI,aAAa;AACf,WACE,4CAAC,gBAAa,YAAW,UACvB,sDAAC,qCAAa,SAAQ,MAAM,iBAAM,GACpC;AAEJ,SACE,6CAAC,uBAAK,YAAW,UAAS,MAAM,kBAAkB,QAAO,OACvD;AAAA,gDAAC,qCAAa,SAAQ,MAAM,iBAAM;AAAA,IAClC,4CAAC,qCAAa,SAAQ,MAAM,oBAAS;AAAA,KACvC;AAEJ,CAAC;AAEM,MAAM,oBAAoB,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAC/E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,MAAM,gBAAgB,YAAY,IAAI;AAC9C,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAE/B,QAAI;AAAgB,aAAO,CAAC;AAC5B,UAAM,cAAc,CAAC;AACrB,QAAI;AAAM,kBAAY,KAAK,MAAM;AACjC,gBAAY,KAAK,KAAK;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,MAAI;AACF,WACE,4CAAC,cAAW,MAAM,sBAAsB,MAAM,sBAAsB,cAAc,aAChF,sDAAC,kBAAgB,GAAG,UAAU,GAChC;AAGJ,SACE,6CAAC,cAAW,MAAY,YAAW,UAAS,IAAG,OAAM,cAAc,aAChE;AAAA,WACC,4CAAC,eAAY,YAAW,UAAS,IAAG,OAClC,sDAAC,QAAM,GAAG,UAAU,GACtB,IACE;AAAA,IACJ,4CAAC,eAAa,GAAG,UAAU;AAAA,KAC7B;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { TextSection } from './TextSection';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n  const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n  const { softDeleted, hydratedId } = datumInternalMeta;\n  const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n    () => ({\n      datum,\n      panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n      datumInternalMeta,\n      datumHydratables: { ...componentlessHydratables, id: hydratedId },\n    }),\n    [componentlessHydratables, datum, datumInternalMeta, hasMultipleSelection, hydratedId, isDestinationPanel],\n  );\n  const cols = React.useMemo(() => {\n    // if CustomRenderer is defined, shortcircuit\n    if (CustomRenderer) return [];\n    const dynamicCols = [];\n    if (Icon) dynamicCols.push('auto');\n    dynamicCols.push('1fr');\n    return dynamicCols;\n  }, [CustomRenderer, Icon]);\n\n  if (CustomRenderer)\n    return (\n      <MidSection cols={customMidSectionCols} rows={customMidSectionRows} $softDeleted={Boolean(softDeleted)}>\n        <CustomRenderer {...customComponentProps} />\n      </MidSection>\n    );\n\n  return (\n    <MidSection cols={cols} alignItems=\"center\" ml=\"xxs\" $softDeleted={Boolean(softDeleted)}>\n      {Icon ? (\n        <IconWrapper alignItems=\"center\" mr=\"xxs\">\n          <Icon {...customComponentProps} />\n        </IconWrapper>\n      ) : null}\n      <TextSection {...itemMeta} />\n    </MidSection>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDf;AAvDR,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAClD,yBAA4B;AAE5B,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,iBAAa,yBAAO,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE1B,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGvC,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoB,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAC/E,QAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,QAAM,EAAE,MAAM,mBAAmB,yBAAyB,IAAI;AAC9D,QAAM,EAAE,aAAa,WAAW,IAAI;AACpC,QAAM,uBAAuB,aAAAA,QAAM;AAAA,IACjC,OAAO;AAAA,MACL;AAAA,MACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,MAC1D;AAAA,MACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,IAClE;AAAA,IACA,CAAC,0BAA0B,OAAO,mBAAmB,sBAAsB,YAAY,kBAAkB;AAAA,EAC3G;AACA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAE/B,QAAI;AAAgB,aAAO,CAAC;AAC5B,UAAM,cAAc,CAAC;AACrB,QAAI;AAAM,kBAAY,KAAK,MAAM;AACjC,gBAAY,KAAK,KAAK;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,MAAI;AACF,WACE,4CAAC,cAAW,MAAM,sBAAsB,MAAM,sBAAsB,cAAc,QAAQ,WAAW,GACnG,sDAAC,kBAAgB,GAAG,sBAAsB,GAC5C;AAGJ,SACE,6CAAC,cAAW,MAAY,YAAW,UAAS,IAAG,OAAM,cAAc,QAAQ,WAAW,GACnF;AAAA,WACC,4CAAC,eAAY,YAAW,UAAS,IAAG,OAClC,sDAAC,QAAM,GAAG,sBAAsB,GAClC,IACE;AAAA,IACJ,4CAAC,kCAAa,GAAG,UAAU;AAAA,KAC7B;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/ItemOverlay.js

@@ -34,9 +34,9 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_useStore = require("../../config/useStore");
 var import_ItemMiddleSection = require("./ItemMiddleSection");
-var import_DndHandle = require("../Dnd/DndHandle");
+var import_DragOverlay = require("../Dnd/DragOverlay");
 const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-wrapper-overlay" })`
-  min-height: 36px;
+  min-height: 2.769rem;
   position: relative;
   background-color: white;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
@@ -49,12 +49,20 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "d
   border-bottom: 1px solid neutral-100;
 `;
 const ItemOverlay = import_react.default.memo((itemMeta) => {
-  const { item } = itemMeta;
-  const { original, isSelected } = item;
-  const { id } = original;
-  const isActive = (0, import_useStore.useInternalStore)((state) => state.lastActiveId);
+  const { datumInternalMeta } = itemMeta;
+  const { isSelected, hydratedId } = datumInternalMeta;
+  const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
+  const isDragAndDropHappening = getIsDragAndDropHappening();
+  const dndDraggingItem = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItem);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ItemWrapper, { cols: ["auto", "auto"], alignItems: "center", role: "checkbox", "aria-checked": isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DndHandle.DragHandle, { id: `${id}-overlay`, isDragOverlay: true, isDndActive: !!isActive, isDragging: isActive === id }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_DragOverlay.DragOverlay,
+      {
+        id: `${hydratedId}-overlay`,
+        isDndActive: isDragAndDropHappening,
+        isDragging: dndDraggingItem?.hydratedId === hydratedId
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemMiddleSection.ItemMiddleSection, { ...itemMeta })
   ] });
 });

package/dist/cjs/parts/Item/ItemOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/ItemOverlay.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore } from '../../config/useStore';\n\nimport { ItemMiddleSection } from './ItemMiddleSection';\n\nimport { DragHandle } from '../Dnd/DndHandle';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst ItemWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-wrapper-overlay' })`\n  min-height: 36px;\n  position: relative;\n  background-color: white;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  padding-right: 5px;\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n`;\n\nexport const ItemOverlay = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item } = itemMeta;\n  const { original, isSelected } = item;\n  const { id } = original;\n\n  const isActive = useInternalStore((state) => state.lastActiveId);\n\n  return (\n    <ItemWrapper cols={['auto', 'auto']} alignItems=\"center\" role=\"checkbox\" aria-checked={isSelected}>\n      <DragHandle id={`${id}-overlay`} isDragOverlay isDndActive={!!isActive} isDragging={isActive === id} />\n      <ItemMiddleSection {...itemMeta} />\n    </ItemWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAnCJ,mBAAkB;AAClB,uBAAuB;AAEvB,qBAAqB;AAErB,sBAAiC;AAEjC,+BAAkC;AAElC,uBAA2B;AAI3B,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjF,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,UAAU,WAAW,IAAI;AACjC,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,eAAW,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAE/D,SACE,6CAAC,eAAY,MAAM,CAAC,QAAQ,MAAM,GAAG,YAAW,UAAS,MAAK,YAAW,gBAAc,YACrF;AAAA,gDAAC,+BAAW,IAAI,GAAG,cAAc,eAAa,MAAC,aAAa,CAAC,CAAC,UAAU,YAAY,aAAa,IAAI;AAAA,IACrG,4CAAC,8CAAmB,GAAG,UAAU;AAAA,KACnC;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore } from '../../config/useStore';\n\nimport { ItemMiddleSection } from './ItemMiddleSection';\n\nimport { DragOverlay } from '../Dnd/DragOverlay';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst ItemWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-wrapper-overlay' })`\n  min-height: 2.769rem;\n  position: relative;\n  background-color: white;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  padding-right: 5px;\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n`;\n\nexport const ItemOverlay = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta } = itemMeta;\n  const { isSelected, hydratedId } = datumInternalMeta;\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const isDragAndDropHappening = getIsDragAndDropHappening();\n  const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);\n\n  return (\n    <ItemWrapper cols={['auto', 'auto']} alignItems=\"center\" role=\"checkbox\" aria-checked={isSelected}>\n      <DragOverlay\n        id={`${hydratedId}-overlay`}\n        isDndActive={isDragAndDropHappening}\n        isDragging={dndDraggingItem?.hydratedId === hydratedId}\n      />\n      <ItemMiddleSection {...itemMeta} />\n    </ItemWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCnB;AApCJ,mBAAkB;AAClB,uBAAuB;AAEvB,qBAAqB;AAErB,sBAAiC;AAEjC,+BAAkC;AAElC,yBAA4B;AAI5B,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjF,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,YAAY,WAAW,IAAI;AAEnC,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,yBAAyB,0BAA0B;AACzD,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,SACE,6CAAC,eAAY,MAAM,CAAC,QAAQ,MAAM,GAAG,YAAW,UAAS,MAAK,YAAW,gBAAc,YACrF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG;AAAA,QACP,aAAa;AAAA,QACb,YAAY,iBAAiB,eAAe;AAAA;AAAA,IAC9C;AAAA,IACA,4CAAC,8CAAmB,GAAG,UAAU;AAAA,KACnC;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/ItemSelection.js

@@ -45,5 +45,7 @@ const StyledItemSelection = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   return props.theme.colors.brand[300];
 }};
 `;
-const ItemSelection = import_react.default.memo(({ item: { isSelected, selectionPrevented } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemSelection, { $isSelected: isSelected, $selectionPrevented: selectionPrevented }));
+const ItemSelection = import_react.default.memo(
+  ({ datumInternalMeta: { isSelected }, datumRenderFlags: { selectionPrevented } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemSelection, { $isSelected: isSelected, $selectionPrevented: selectionPrevented })
+);
 //# sourceMappingURL=ItemSelection.js.map

package/dist/cjs/parts/Item/ItemSelection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/ItemSelection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\n\n// border-right: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n// border-bottom: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n\nconst StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })<{\n  $isSelected: boolean;\n  $selectionPrevented?: boolean;\n}>`\n  width: 5px;\n  height: 100%;\n  box-sizing: border-box;\n  background-color: ${(props) => {\n    if (props.$isSelected) return props.theme.colors.brand[600];\n    if (props.$selectionPrevented === true) return props.theme.colors.neutral['080'];\n    return props.theme.colors.brand[300];\n  }};\n`;\n\nexport const ItemSelection = React.memo(({ item: { isSelected, selectionPrevented } }: DSShuttleV2T.ItemMeta) => (\n  <StyledItemSelection $isSelected={isSelected} $selectionPrevented={selectionPrevented} />\n));\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BrB;AA9BF,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAWlD,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA,sBAOnF,CAAC,UAAU;AAC7B,MAAI,MAAM;AAAa,WAAO,MAAM,MAAM,OAAO,MAAM;AACvD,MAAI,MAAM,wBAAwB;AAAM,WAAO,MAAM,MAAM,OAAO,QAAQ;AAC1E,SAAO,MAAM,MAAM,OAAO,MAAM;AAClC;AAAA;AAGK,MAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,EAAE,MAAM,EAAE,YAAY,mBAAmB,EAAE,MAClF,4CAAC,uBAAoB,aAAa,YAAY,qBAAqB,oBAAoB,CACxF;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\n\n// border-right: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n// border-bottom: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n\nconst StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })<{\n  $isSelected: boolean;\n  $selectionPrevented?: boolean;\n}>`\n  width: 5px;\n  height: 100%;\n  box-sizing: border-box;\n  background-color: ${(props) => {\n    if (props.$isSelected) return props.theme.colors.brand[600];\n    if (props.$selectionPrevented === true) return props.theme.colors.neutral['080'];\n    return props.theme.colors.brand[300];\n  }};\n`;\n\nexport const ItemSelection = React.memo(\n  ({ datumInternalMeta: { isSelected }, datumRenderFlags: { selectionPrevented } }: DSShuttleV2T.ItemMeta) => (\n    <StyledItemSelection $isSelected={isSelected} $selectionPrevented={selectionPrevented} />\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAWlD,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA,sBAOnF,CAAC,UAAU;AAC7B,MAAI,MAAM;AAAa,WAAO,MAAM,MAAM,OAAO,MAAM;AACvD,MAAI,MAAM,wBAAwB;AAAM,WAAO,MAAM,MAAM,OAAO,QAAQ;AAC1E,SAAO,MAAM,MAAM,OAAO,MAAM;AAClC;AAAA;AAGK,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,mBAAmB,EAAE,WAAW,GAAG,kBAAkB,EAAE,mBAAmB,EAAE,MAC7E,4CAAC,uBAAoB,aAAa,YAAY,qBAAqB,oBAAoB;AAE3F;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/TextSection.js

@@ -0,0 +1,50 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextSection_exports = {};
+__export(TextSection_exports, {
+  TextSection: () => TextSection
+});
+module.exports = __toCommonJS(TextSection_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
+const withSubtitleRows = ["auto", "auto"];
+const LabelWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`
+  min-height: 1rem;
+`;
+const TextSection = import_react.default.memo((props) => {
+  const { label, subtitle } = props.datumHydratables;
+  if (subtitle === void 0)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelWrapper, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { alignItems: "center", rows: withSubtitleRows, gutter: "1px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b4", children: subtitle })
+  ] });
+});
+//# sourceMappingURL=TextSection.js.map

package/dist/cjs/parts/Item/TextSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Item/TextSection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\nconst withSubtitleRows = ['auto', 'auto'];\nconst LabelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`\n  min-height: 1rem;\n`;\nexport const TextSection = React.memo((props: DSShuttleV2T.ItemMeta) => {\n  const { label, subtitle } = props.datumHydratables;\n  if (subtitle === undefined)\n    return (\n      <LabelWrapper alignItems=\"center\">\n        <DSTypography variant=\"b1\">{label}</DSTypography>\n      </LabelWrapper>\n    );\n  return (\n    <Grid alignItems=\"center\" rows={withSubtitleRows} gutter=\"1px\">\n      <DSTypography variant=\"b1\">{label}</DSTypography>\n      <DSTypography variant=\"b4\">{subtitle}</DSTypography>\n    </Grid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBf;AAhBR,mBAAkB;AAClB,qBAAqB;AACrB,uBAAuB;AACvB,2BAA6B;AAC7B,oCAAkD;AAGlD,MAAM,mBAAmB,CAAC,QAAQ,MAAM;AACxC,MAAM,mBAAe,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,mBAAmB,CAAC;AAAA;AAAA;AAG/F,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,UAAiC;AACtE,QAAM,EAAE,OAAO,SAAS,IAAI,MAAM;AAClC,MAAI,aAAa;AACf,WACE,4CAAC,gBAAa,YAAW,UACvB,sDAAC,qCAAa,SAAQ,MAAM,iBAAM,GACpC;AAEJ,SACE,6CAAC,uBAAK,YAAW,UAAS,MAAM,kBAAkB,QAAO,OACvD;AAAA,gDAAC,qCAAa,SAAQ,MAAM,iBAAM;AAAA,IAClC,4CAAC,qCAAa,SAAQ,MAAM,oBAAS;AAAA,KACvC;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/cjs/parts/Item/useItemArrowNavigation.js

@@ -29,18 +29,24 @@ __export(useItemArrowNavigation_exports, {
 module.exports = __toCommonJS(useItemArrowNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_useFocusTracker = require("../../config/useFocusTracker");
 var import_useStore = require("../../config/useStore");
 const useItemArrowNavigation = (itemMeta) => {
-  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = (0, import_useFocusTracker.useFocusItemTracker)();
-  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
-  const { item } = itemMeta;
-  const { isFirst, isLast } = item;
-  const isActive = (0, import_useStore.useInternalStore)((state) => state.lastActiveId);
+  const { trackFocusRegionPanelFocusMoveAll } = (0, import_useFocusTracker.useFocusRegionTrackers)();
+  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem, trackFocusItemReset } = (0, import_useFocusTracker.useFocusItemTracker)();
+  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent, trackFocusActionReset } = (0, import_useFocusTracker.useFocusActionTrackers)();
+  const { datumInternalMeta, datum, hasMultipleSelection, isDestinationPanel } = itemMeta;
+  const configuredDatum = import_react.default.useMemo(() => ({ original: datum, ...datumInternalMeta }), [datum, datumInternalMeta]);
+  const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
+  const mutableItemMeta = (0, import_ds_utilities.useMakeMutable)(itemMeta);
+  const mutableInternalMeta = (0, import_ds_utilities.useMakeMutable)(datumInternalMeta);
+  const mutableConfiguredDatum = (0, import_ds_utilities.useMakeMutable)(configuredDatum);
   const onItemContainerKeyDown = import_react.default.useCallback(
     (e) => {
       const { key } = e;
-      if (isActive) {
+      const isDragAndDropHappening = getIsDragAndDropHappening();
+      if (isDragAndDropHappening) {
         e.preventDefault();
         return;
       }
@@ -49,35 +55,55 @@ const useItemArrowNavigation = (itemMeta) => {
       if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key))
         e.stopPropagation();
       if (key === "ArrowLeft") {
-        if (mutableFocusItem.current === "first" && isFirst || mutableFocusItem.current === "last" && isLast) {
-          trackFocusItem(item);
+        if (hasMultipleSelection) {
+          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+          trackFocusItemReset();
+          trackFocusActionReset();
+          return;
         }
-        trackFocusPrevAction(itemMeta);
+        trackFocusPrevAction(mutableItemMeta.current);
+        if (mutableFocusItem.current === "first" && mutableInternalMeta.current.isFirst || mutableFocusItem.current === "last" && mutableInternalMeta.current.isLast) {
+          trackFocusItem(mutableConfiguredDatum.current);
+        }
+        return;
       }
       if (key === "ArrowRight") {
-        if (mutableFocusItem.current === "first" && isFirst || mutableFocusItem.current === "last" && isLast) {
-          trackFocusItem(item);
+        if (hasMultipleSelection) {
+          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+          trackFocusItemReset();
+          trackFocusActionReset();
+          return;
         }
-        trackFocusNextAction(itemMeta);
+        trackFocusNextAction(mutableItemMeta.current);
+        if (mutableFocusItem.current === "first" && mutableInternalMeta.current.isFirst || mutableFocusItem.current === "last" && mutableInternalMeta.current.isLast) {
+          trackFocusItem(mutableConfiguredDatum.current);
+        }
+        return;
       }
       if (key === "ArrowUp") {
-        trackFocusPrevItem(itemMeta);
+        trackFocusPrevItem(mutableItemMeta.current);
         trackFocusActionParent();
+        return;
       }
       if (key === "ArrowDown") {
-        trackFocusNextItem(itemMeta);
+        trackFocusNextItem(mutableItemMeta.current);
         trackFocusActionParent();
+        return;
       }
     },
     [
-      isActive,
-      mutableFocusItem,
-      isFirst,
-      isLast,
+      getIsDragAndDropHappening,
+      hasMultipleSelection,
       trackFocusPrevAction,
-      itemMeta,
+      mutableItemMeta,
+      mutableFocusItem,
+      mutableInternalMeta,
+      trackFocusRegionPanelFocusMoveAll,
+      isDestinationPanel,
+      trackFocusItemReset,
+      trackFocusActionReset,
       trackFocusItem,
-      item,
+      mutableConfiguredDatum,
       trackFocusNextAction,
       trackFocusPrevItem,
       trackFocusActionParent,

package/dist/cjs/parts/Item/useItemArrowNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/useItemArrowNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { useFocusItemTracker, useFocusActionTrackers } from '../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore } from '../../config/useStore';\n\nexport const useItemArrowNavigation = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = useFocusItemTracker();\n  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = useFocusActionTrackers();\n  const { item } = itemMeta;\n  const { isFirst, isLast } = item;\n\n  const isActive = useInternalStore((state) => state.lastActiveId);\n  const onItemContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      if (isActive) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      if (key === 'ArrowLeft') {\n        if ((mutableFocusItem.current === 'first' && isFirst) || (mutableFocusItem.current === 'last' && isLast)) {\n          trackFocusItem(item);\n        }\n        trackFocusPrevAction(itemMeta);\n      }\n      if (key === 'ArrowRight') {\n        if ((mutableFocusItem.current === 'first' && isFirst) || (mutableFocusItem.current === 'last' && isLast)) {\n          trackFocusItem(item);\n        }\n        trackFocusNextAction(itemMeta);\n      }\n      if (key === 'ArrowUp') {\n        trackFocusPrevItem(itemMeta);\n        trackFocusActionParent();\n      }\n      if (key === 'ArrowDown') {\n        trackFocusNextItem(itemMeta);\n        trackFocusActionParent();\n      }\n    },\n    [\n      isActive,\n      mutableFocusItem,\n      isFirst,\n      isLast,\n      trackFocusPrevAction,\n      itemMeta,\n      trackFocusItem,\n      item,\n      trackFocusNextAction,\n      trackFocusPrevItem,\n      trackFocusActionParent,\n      trackFocusNextItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,6BAA4D;AAE5D,sBAAiC;AAE1B,MAAM,yBAAyB,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,oBAAoB,oBAAoB,eAAe,QAAI,4CAAoB;AACzG,QAAM,EAAE,sBAAsB,sBAAsB,uBAAuB,QAAI,+CAAuB;AACtG,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,OAAO,IAAI;AAE5B,QAAM,eAAW,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAC/D,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AACxF,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzF,UAAI,QAAQ,aAAa;AACvB,YAAK,iBAAiB,YAAY,WAAW,WAAa,iBAAiB,YAAY,UAAU,QAAS;AACxG,yBAAe,IAAI;AAAA,QACrB;AACA,6BAAqB,QAAQ;AAAA,MAC/B;AACA,UAAI,QAAQ,cAAc;AACxB,YAAK,iBAAiB,YAAY,WAAW,WAAa,iBAAiB,YAAY,UAAU,QAAS;AACxG,yBAAe,IAAI;AAAA,QACrB;AACA,6BAAqB,QAAQ;AAAA,MAC/B;AACA,UAAI,QAAQ,WAAW;AACrB,2BAAmB,QAAQ;AAC3B,+BAAuB;AAAA,MACzB;AACA,UAAI,QAAQ,aAAa;AACvB,2BAAmB,QAAQ;AAC3B,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusRegionTrackers } from '../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore } from '../../config/useStore';\n\nexport const useItemArrowNavigation = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusRegionPanelFocusMoveAll } = useFocusRegionTrackers();\n  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem, trackFocusItemReset } =\n    useFocusItemTracker();\n  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent, trackFocusActionReset } =\n    useFocusActionTrackers();\n  const { datumInternalMeta, datum, hasMultipleSelection, isDestinationPanel } = itemMeta;\n  const configuredDatum = React.useMemo(() => ({ original: datum, ...datumInternalMeta }), [datum, datumInternalMeta]);\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  // some optimization to avoid useless re-renders just because the \"onKeyDown\" callback changes...\n  //     all the \"trackFocus\" must be optimized and memoized too for this to make any sense\n  const mutableItemMeta = useMakeMutable(itemMeta);\n  const mutableInternalMeta = useMakeMutable(datumInternalMeta);\n  const mutableConfiguredDatum = useMakeMutable(configuredDatum);\n\n  const onItemContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      if (key === 'ArrowLeft') {\n        if (hasMultipleSelection) {\n          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n          trackFocusItemReset();\n          trackFocusActionReset();\n          return;\n        }\n\n        trackFocusPrevAction(mutableItemMeta.current);\n        if (\n          (mutableFocusItem.current === 'first' && mutableInternalMeta.current.isFirst) ||\n          (mutableFocusItem.current === 'last' && mutableInternalMeta.current.isLast)\n        ) {\n          trackFocusItem(mutableConfiguredDatum.current);\n        }\n        return;\n      }\n      if (key === 'ArrowRight') {\n        if (hasMultipleSelection) {\n          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n          trackFocusItemReset();\n          trackFocusActionReset();\n          return;\n        }\n        trackFocusNextAction(mutableItemMeta.current);\n        if (\n          (mutableFocusItem.current === 'first' && mutableInternalMeta.current.isFirst) ||\n          (mutableFocusItem.current === 'last' && mutableInternalMeta.current.isLast)\n        ) {\n          trackFocusItem(mutableConfiguredDatum.current);\n        }\n        return;\n      }\n      if (key === 'ArrowUp') {\n        trackFocusPrevItem(mutableItemMeta.current);\n        trackFocusActionParent();\n        return;\n      }\n      if (key === 'ArrowDown') {\n        trackFocusNextItem(mutableItemMeta.current);\n        trackFocusActionParent();\n        return;\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      hasMultipleSelection,\n      trackFocusPrevAction,\n      mutableItemMeta,\n      mutableFocusItem,\n      mutableInternalMeta,\n      trackFocusRegionPanelFocusMoveAll,\n      isDestinationPanel,\n      trackFocusItemReset,\n      trackFocusActionReset,\n      trackFocusItem,\n      mutableConfiguredDatum,\n      trackFocusNextAction,\n      trackFocusPrevItem,\n      trackFocusActionParent,\n      trackFocusNextItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,0BAA+B;AAC/B,6BAAoF;AAEpF,sBAAiC;AAE1B,MAAM,yBAAyB,CAAC,aAAoC;AACzE,QAAM,EAAE,kCAAkC,QAAI,+CAAuB;AACrE,QAAM,EAAE,kBAAkB,oBAAoB,oBAAoB,gBAAgB,oBAAoB,QACpG,4CAAoB;AACtB,QAAM,EAAE,sBAAsB,sBAAsB,wBAAwB,sBAAsB,QAChG,+CAAuB;AACzB,QAAM,EAAE,mBAAmB,OAAO,sBAAsB,mBAAmB,IAAI;AAC/E,QAAM,kBAAkB,aAAAA,QAAM,QAAQ,OAAO,EAAE,UAAU,OAAO,GAAG,kBAAkB,IAAI,CAAC,OAAO,iBAAiB,CAAC;AAEnH,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAG7F,QAAM,sBAAkB,oCAAe,QAAQ;AAC/C,QAAM,0BAAsB,oCAAe,iBAAiB;AAC5D,QAAM,6BAAyB,oCAAe,eAAe;AAE7D,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AACxF,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzF,UAAI,QAAQ,aAAa;AACvB,YAAI,sBAAsB;AACxB,4CAAkC,kBAAkB;AACpD,8BAAoB;AACpB,gCAAsB;AACtB;AAAA,QACF;AAEA,6BAAqB,gBAAgB,OAAO;AAC5C,YACG,iBAAiB,YAAY,WAAW,oBAAoB,QAAQ,WACpE,iBAAiB,YAAY,UAAU,oBAAoB,QAAQ,QACpE;AACA,yBAAe,uBAAuB,OAAO;AAAA,QAC/C;AACA;AAAA,MACF;AACA,UAAI,QAAQ,cAAc;AACxB,YAAI,sBAAsB;AACxB,4CAAkC,kBAAkB;AACpD,8BAAoB;AACpB,gCAAsB;AACtB;AAAA,QACF;AACA,6BAAqB,gBAAgB,OAAO;AAC5C,YACG,iBAAiB,YAAY,WAAW,oBAAoB,QAAQ,WACpE,iBAAiB,YAAY,UAAU,oBAAoB,QAAQ,QACpE;AACA,yBAAe,uBAAuB,OAAO;AAAA,QAC/C;AACA;AAAA,MACF;AACA,UAAI,QAAQ,WAAW;AACrB,2BAAmB,gBAAgB,OAAO;AAC1C,+BAAuB;AACvB;AAAA,MACF;AACA,UAAI,QAAQ,aAAa;AACvB,2BAAmB,gBAAgB,OAAO;AAC1C,+BAAuB;AACvB;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
   "names": ["React"]
 }