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

package/dist/esm/parts/Item/useSelectionLogic.js

@@ -2,13 +2,22 @@ import * as React from "react";
 import React2 from "react";
 import { useInternalStore, usePropsStore } from "../../config/useStore";
 import { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from "../../config/useFocusTracker";
-const useSelectionLogic = ({ item, isDestinationPanel }) => {
+const useSelectionLogic = ({
+  isDestinationPanel,
+  datumInternalMeta,
+  datum,
+  datumRenderFlags
+}) => {
   const { trackFocusItem } = useFocusItemTracker();
   const { trackFocusActionParent } = useFocusActionTrackers();
   const { trackFocusRegionPanelItem } = useFocusTracker();
-  const destinationSelectionArray = useInternalStore((store) => store.destinationSelectionArray);
-  const sourceSelectionArray = useInternalStore((store) => store.sourceSelectionArray);
-  const panelSelectedItemsArray = isDestinationPanel ? destinationSelectionArray : sourceSelectionArray;
+  const getPanelLastSelectedItem = useInternalStore((store) => store.getPanelLastSelectedItem);
+  const setPanelLastSelectedItem = useInternalStore(
+    (store) => isDestinationPanel ? store.setDestinationLastSelectedItem : store.setSourceLastSelectedItem
+  );
+  const panelSelectionableDataIds = useInternalStore(
+    (store) => isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds
+  );
   const onSelectionChange = usePropsStore(
     (state) => isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange
   );
@@ -17,37 +26,71 @@ const useSelectionLogic = ({ item, isDestinationPanel }) => {
   );
   const selectItem = React2.useCallback(
     (event) => {
-      const { selectionPrevented, original } = item;
-      const { id } = original;
+      const { selectionPrevented } = datumRenderFlags;
+      const { hydratedId } = datumInternalMeta;
+      const { shiftKey } = event;
+      const lastSelectedItem = getPanelLastSelectedItem(isDestinationPanel);
       if (!selectionPrevented) {
-        const newSelection = { ...panelSelectedItems };
-        let isAddition = true;
-        panelSelectedItemsArray.forEach((selItem) => {
-          if (selItem === id)
-            isAddition = false;
-        });
-        if (isAddition)
-          newSelection[id] = true;
-        else
-          delete newSelection[id];
-        onSelectionChange(newSelection, { event, item: original });
+        let newSelection = {};
+        if (shiftKey && lastSelectedItem) {
+          const startSelIndx = panelSelectionableDataIds.findIndex((id) => id === lastSelectedItem);
+          const endSelIndx = panelSelectionableDataIds.findIndex((id) => id === hydratedId);
+          if (startSelIndx !== -1 && endSelIndx !== -1) {
+            const ordererIndexes = [startSelIndx, endSelIndx].sort();
+            const shiftSelectedIdsArray = panelSelectionableDataIds.slice(ordererIndexes[0], ordererIndexes[1] + 1);
+            let shouldShiftDeSelect = true;
+            const allSelected = {};
+            const allDeSelected = {};
+            shiftSelectedIdsArray.forEach((id) => {
+              allSelected[id] = true;
+              allDeSelected[id] = false;
+              if (panelSelectedItems[id] !== true)
+                shouldShiftDeSelect = false;
+            });
+            if (shouldShiftDeSelect)
+              newSelection = { ...panelSelectedItems, ...allDeSelected };
+            else
+              newSelection = { ...panelSelectedItems, ...allSelected };
+          }
+        } else {
+          newSelection = { ...panelSelectedItems };
+          const isAddition = newSelection[hydratedId] !== true;
+          if (isAddition) {
+            newSelection[hydratedId] = true;
+          } else
+            delete newSelection[hydratedId];
+        }
+        setPanelLastSelectedItem(hydratedId);
+        onSelectionChange(newSelection, { event, item: datum });
       }
       trackFocusRegionPanelItem(isDestinationPanel);
-      trackFocusItem(item);
+      trackFocusItem({ original: datum, ...datumInternalMeta });
       trackFocusActionParent();
     },
     [
+      datum,
+      datumInternalMeta,
+      datumRenderFlags,
+      getPanelLastSelectedItem,
       isDestinationPanel,
-      item,
       onSelectionChange,
       panelSelectedItems,
-      panelSelectedItemsArray,
+      panelSelectionableDataIds,
+      setPanelLastSelectedItem,
       trackFocusActionParent,
       trackFocusItem,
       trackFocusRegionPanelItem
     ]
   );
-  return selectItem;
+  const onShiftMouseDownPreventTextSelection = React2.useCallback((event) => {
+    const { shiftKey } = event;
+    if (shiftKey)
+      event.preventDefault();
+  }, []);
+  return React2.useMemo(
+    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),
+    [selectItem, onShiftMouseDownPreventTextSelection]
+  );
 };
 export {
   useSelectionLogic

package/dist/esm/parts/Item/useSelectionLogic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/useSelectionLogic.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../config/useFocusTracker';\nexport const useSelectionLogic = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusTracker();\n\n  const destinationSelectionArray = useInternalStore((store) => store.destinationSelectionArray);\n  const sourceSelectionArray = useInternalStore((store) => store.sourceSelectionArray);\n\n  const panelSelectedItemsArray = isDestinationPanel ? destinationSelectionArray : sourceSelectionArray;\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const panelSelectedItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems,\n  );\n  const selectItem = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n      const { selectionPrevented, original } = item;\n      const { id } = original;\n      if (!selectionPrevented) {\n        const newSelection = { ...panelSelectedItems };\n        let isAddition = true;\n        panelSelectedItemsArray.forEach((selItem) => {\n          if (selItem === id) isAddition = false;\n        });\n        if (isAddition) newSelection[id] = true;\n        else delete newSelection[id];\n        onSelectionChange(newSelection, { event, item: original });\n      }\n      // focus tracking logic\n      trackFocusRegionPanelItem(isDestinationPanel);\n      trackFocusItem(item);\n      trackFocusActionParent();\n    },\n    [\n      isDestinationPanel,\n      item,\n      onSelectionChange,\n      panelSelectedItems,\n      panelSelectedItemsArray,\n      trackFocusActionParent,\n      trackFocusItem,\n      trackFocusRegionPanelItem,\n    ],\n  );\n\n  return selectItem;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,kBAAkB,qBAAqB;AAEhD,SAAS,qBAAqB,wBAAwB,uBAAuB;AACtE,MAAM,oBAAoB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACxF,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAC/C,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,gBAAgB;AAEtD,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,uBAAuB,iBAAiB,CAAC,UAAU,MAAM,oBAAoB;AAEnF,QAAM,0BAA0B,qBAAqB,4BAA4B;AACjF,QAAM,oBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,qBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAaA,OAAM;AAAA,IACvB,CAAC,UAAsG;AACrG,YAAM,EAAE,oBAAoB,SAAS,IAAI;AACzC,YAAM,EAAE,GAAG,IAAI;AACf,UAAI,CAAC,oBAAoB;AACvB,cAAM,eAAe,EAAE,GAAG,mBAAmB;AAC7C,YAAI,aAAa;AACjB,gCAAwB,QAAQ,CAAC,YAAY;AAC3C,cAAI,YAAY;AAAI,yBAAa;AAAA,QACnC,CAAC;AACD,YAAI;AAAY,uBAAa,MAAM;AAAA;AAC9B,iBAAO,aAAa;AACzB,0BAAkB,cAAc,EAAE,OAAO,MAAM,SAAS,CAAC;AAAA,MAC3D;AAEA,gCAA0B,kBAAkB;AAC5C,qBAAe,IAAI;AACnB,6BAAuB;AAAA,IACzB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport React from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../config/useFocusTracker';\nexport const useSelectionLogic = ({\n  isDestinationPanel,\n  datumInternalMeta,\n  datum,\n  datumRenderFlags,\n}: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusTracker();\n\n  const getPanelLastSelectedItem = useInternalStore((store) => store.getPanelLastSelectedItem);\n  const setPanelLastSelectedItem = useInternalStore((store) =>\n    isDestinationPanel ? store.setDestinationLastSelectedItem : store.setSourceLastSelectedItem,\n  );\n\n  const panelSelectionableDataIds = useInternalStore((store) =>\n    isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds,\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const panelSelectedItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems,\n  );\n  const selectItem = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n      const { selectionPrevented } = datumRenderFlags;\n      const { hydratedId } = datumInternalMeta;\n      const { shiftKey } = event;\n      const lastSelectedItem = getPanelLastSelectedItem(isDestinationPanel);\n      if (!selectionPrevented) {\n        let newSelection: Record<string, boolean> = {};\n        // shift select logic\n        if (shiftKey && lastSelectedItem) {\n          const startSelIndx = panelSelectionableDataIds.findIndex((id) => id === lastSelectedItem);\n          const endSelIndx = panelSelectionableDataIds.findIndex((id) => id === hydratedId);\n          if (startSelIndx !== -1 && endSelIndx !== -1) {\n            const ordererIndexes = [startSelIndx, endSelIndx].sort();\n            const shiftSelectedIdsArray = panelSelectionableDataIds.slice(ordererIndexes[0], ordererIndexes[1] + 1);\n            let shouldShiftDeSelect = true;\n            // I track both \"all Select\"/\"all unselect\" so I can \".forEach\" only once and apply either version after\n            const allSelected: Record<string, boolean> = {};\n            const allDeSelected: Record<string, boolean> = {};\n            shiftSelectedIdsArray.forEach((id) => {\n              allSelected[id] = true;\n              allDeSelected[id] = false;\n              // if anything inside the shift-select was not selected, shift-select will \"select\"\n              if (panelSelectedItems[id] !== true) shouldShiftDeSelect = false;\n            });\n            if (shouldShiftDeSelect) newSelection = { ...panelSelectedItems, ...allDeSelected };\n            else newSelection = { ...panelSelectedItems, ...allSelected };\n          }\n        } else {\n          // single selection logic\n          newSelection = { ...panelSelectedItems };\n          const isAddition = newSelection[hydratedId] !== true;\n          if (isAddition) {\n            newSelection[hydratedId] = true;\n          } else delete newSelection[hydratedId];\n        }\n        // we track the item for \"shift select\" purposes\n        // this must happen AFTER shift select logic!\n        setPanelLastSelectedItem(hydratedId);\n        onSelectionChange(newSelection, { event, item: datum });\n      }\n      // focus tracking logic\n      trackFocusRegionPanelItem(isDestinationPanel);\n      trackFocusItem({ original: datum, ...datumInternalMeta });\n      trackFocusActionParent();\n    },\n    [\n      datum,\n      datumInternalMeta,\n      datumRenderFlags,\n      getPanelLastSelectedItem,\n      isDestinationPanel,\n      onSelectionChange,\n      panelSelectedItems,\n      panelSelectionableDataIds,\n      setPanelLastSelectedItem,\n      trackFocusActionParent,\n      trackFocusItem,\n      trackFocusRegionPanelItem,\n    ],\n  );\n\n  const onShiftMouseDownPreventTextSelection = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    const { shiftKey } = event;\n    if (shiftKey) event.preventDefault();\n  }, []);\n  return React.useMemo(\n    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),\n    [selectItem, onShiftMouseDownPreventTextSelection],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAOA,YAAW;AAClB,SAAS,kBAAkB,qBAAqB;AAEhD,SAAS,qBAAqB,wBAAwB,uBAAuB;AACtE,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAC/C,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,gBAAgB;AAEtD,QAAM,2BAA2B,iBAAiB,CAAC,UAAU,MAAM,wBAAwB;AAC3F,QAAM,2BAA2B;AAAA,IAAiB,CAAC,UACjD,qBAAqB,MAAM,iCAAiC,MAAM;AAAA,EACpE;AAEA,QAAM,4BAA4B;AAAA,IAAiB,CAAC,UAClD,qBAAqB,MAAM,kCAAkC,MAAM;AAAA,EACrE;AAEA,QAAM,oBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,qBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAaA,OAAM;AAAA,IACvB,CAAC,UAAsG;AACrG,YAAM,EAAE,mBAAmB,IAAI;AAC/B,YAAM,EAAE,WAAW,IAAI;AACvB,YAAM,EAAE,SAAS,IAAI;AACrB,YAAM,mBAAmB,yBAAyB,kBAAkB;AACpE,UAAI,CAAC,oBAAoB;AACvB,YAAI,eAAwC,CAAC;AAE7C,YAAI,YAAY,kBAAkB;AAChC,gBAAM,eAAe,0BAA0B,UAAU,CAAC,OAAO,OAAO,gBAAgB;AACxF,gBAAM,aAAa,0BAA0B,UAAU,CAAC,OAAO,OAAO,UAAU;AAChF,cAAI,iBAAiB,MAAM,eAAe,IAAI;AAC5C,kBAAM,iBAAiB,CAAC,cAAc,UAAU,EAAE,KAAK;AACvD,kBAAM,wBAAwB,0BAA0B,MAAM,eAAe,IAAI,eAAe,KAAK,CAAC;AACtG,gBAAI,sBAAsB;AAE1B,kBAAM,cAAuC,CAAC;AAC9C,kBAAM,gBAAyC,CAAC;AAChD,kCAAsB,QAAQ,CAAC,OAAO;AACpC,0BAAY,MAAM;AAClB,4BAAc,MAAM;AAEpB,kBAAI,mBAAmB,QAAQ;AAAM,sCAAsB;AAAA,YAC7D,CAAC;AACD,gBAAI;AAAqB,6BAAe,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA;AAC7E,6BAAe,EAAE,GAAG,oBAAoB,GAAG,YAAY;AAAA,UAC9D;AAAA,QACF,OAAO;AAEL,yBAAe,EAAE,GAAG,mBAAmB;AACvC,gBAAM,aAAa,aAAa,gBAAgB;AAChD,cAAI,YAAY;AACd,yBAAa,cAAc;AAAA,UAC7B;AAAO,mBAAO,aAAa;AAAA,QAC7B;AAGA,iCAAyB,UAAU;AACnC,0BAAkB,cAAc,EAAE,OAAO,MAAM,MAAM,CAAC;AAAA,MACxD;AAEA,gCAA0B,kBAAkB;AAC5C,qBAAe,EAAE,UAAU,OAAO,GAAG,kBAAkB,CAAC;AACxD,6BAAuB;AAAA,IACzB;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,QAAM,uCAAuCA,OAAM,YAAY,CAAC,UAA4C;AAC1G,UAAM,EAAE,SAAS,IAAI;AACrB,QAAI;AAAU,YAAM,eAAe;AAAA,EACrC,GAAG,CAAC,CAAC;AACL,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,YAAY,qCAAqC;AAAA,IAC1D,CAAC,YAAY,oCAAoC;AAAA,EACnD;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/MainContent.js

@@ -5,6 +5,7 @@ import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { useOnBlurOut } from "@elliemae/ds-utilities";
 import { PanelWrapper } from "./PanelWrapper";
+import { useInternalStore } from "../config/useStore";
 import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions";
 import { useFocusTracker } from "../config/useFocusTracker";
 const StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })`
@@ -25,9 +26,11 @@ const MainContent = React2.memo(() => {
     [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset]
   );
   const handleOnBlurOut = useOnBlurOut(config);
+  const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);
+  const sourceHasMultipleSelectedItems = useInternalStore((store) => store.sourceHasMultipleSelectedItems);
   return /* @__PURE__ */ jsxs(StyledWrapper, { cols: mainContentCols, gutter: "xs", p: "xs", onBlur: handleOnBlurOut, children: [
-    /* @__PURE__ */ jsx(PanelWrapper, { isDestinationPanel: false }),
-    /* @__PURE__ */ jsx(PanelWrapper, { isDestinationPanel: true })
+    /* @__PURE__ */ jsx(PanelWrapper, { isDestinationPanel: false, hasMultipleSelection: sourceHasMultipleSelectedItems }),
+    /* @__PURE__ */ jsx(PanelWrapper, { isDestinationPanel: true, hasMultipleSelection: destinationHasMultipleSelectedItems })
   ] });
 });
 export {

package/dist/esm/parts/MainContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnBlurOut } from '@elliemae/ds-utilities';\nimport { PanelWrapper } from './PanelWrapper';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\nimport { useFocusTracker } from '../config/useFocusTracker';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })`\n  min-width: 648px;\n  min-height: 296px;\n`;\nconst mainContentCols = ['1fr', '1fr'];\n\nexport const MainContent = React.memo(() => {\n  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onBlur: () => {\n        trackFocusRegionReset();\n        trackFocusItemReset();\n        trackFocusActionReset();\n      },\n    }),\n    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n  );\n  const handleOnBlurOut = useOnBlurOut(config);\n  return (\n    <StyledWrapper cols={mainContentCols} gutter=\"xs\" p=\"xs\" onBlur={handleOnBlurOut}>\n      <PanelWrapper isDestinationPanel={false} />\n      <PanelWrapper isDestinationPanel />\n    </StyledWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4BnB,SACE,KADF;AA5BJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,uBAAuB;AAEhC,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAI5F,MAAM,kBAAkB,CAAC,OAAO,KAAK;AAE9B,MAAM,cAAcA,OAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC9F,QAAM,SAASA,OAAM;AAAA,IACnB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB;AACtB,4BAAoB;AACpB,8BAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,qBAAqB,qBAAqB;AAAA,EACpE;AACA,QAAM,kBAAkB,aAAa,MAAM;AAC3C,SACE,qBAAC,iBAAc,MAAM,iBAAiB,QAAO,MAAK,GAAE,MAAK,QAAQ,iBAC/D;AAAA,wBAAC,gBAAa,oBAAoB,OAAO;AAAA,IACzC,oBAAC,gBAAa,oBAAkB,MAAC;AAAA,KACnC;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnBlurOut } from '@elliemae/ds-utilities';\nimport { PanelWrapper } from './PanelWrapper';\nimport { useInternalStore } from '../config/useStore';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\nimport { useFocusTracker } from '../config/useFocusTracker';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })`\n  min-width: 648px;\n  min-height: 296px;\n`;\nconst mainContentCols = ['1fr', '1fr'];\n\nexport const MainContent = React.memo(() => {\n  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onBlur: () => {\n        trackFocusRegionReset();\n        trackFocusItemReset();\n        trackFocusActionReset();\n      },\n    }),\n    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n  );\n  const handleOnBlurOut = useOnBlurOut(config);\n  const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = useInternalStore((store) => store.sourceHasMultipleSelectedItems);\n\n  return (\n    <StyledWrapper cols={mainContentCols} gutter=\"xs\" p=\"xs\" onBlur={handleOnBlurOut}>\n      <PanelWrapper isDestinationPanel={false} hasMultipleSelection={sourceHasMultipleSelectedItems} />\n      <PanelWrapper isDestinationPanel hasMultipleSelection={destinationHasMultipleSelectedItems} />\n    </StyledWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCnB,SACE,KADF;AAhCJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,uBAAuB;AAEhC,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAI5F,MAAM,kBAAkB,CAAC,OAAO,KAAK;AAE9B,MAAM,cAAcA,OAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC9F,QAAM,SAASA,OAAM;AAAA,IACnB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB;AACtB,4BAAoB;AACpB,8BAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,qBAAqB,qBAAqB;AAAA,EACpE;AACA,QAAM,kBAAkB,aAAa,MAAM;AAC3C,QAAM,sCAAsC,iBAAiB,CAAC,UAAU,MAAM,mCAAmC;AACjH,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AAEvG,SACE,qBAAC,iBAAc,MAAM,iBAAiB,QAAO,MAAK,GAAE,MAAK,QAAQ,iBAC/D;AAAA,wBAAC,gBAAa,oBAAoB,OAAO,sBAAsB,gCAAgC;AAAA,IAC/F,oBAAC,gBAAa,oBAAkB,MAAC,sBAAsB,qCAAqC;AAAA,KAC9F;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
-import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button";
+import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { usePropsStore } from "../../../config/useStore";
 import { useInnerRefHandlers } from "./useInnerRefHandlers";
 import { useFocusTracker } from "../../../config/useFocusTracker";

package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/LoadMoreBtn.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const { trackFocusItemLast, trackFocusActionParent, trackFocusRegionPanelItem } = useFocusTracker();\n  const onLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n  );\n  const handleOnClick = React.useCallback(\n    (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onLoadMore(e);\n      trackFocusItemLast();\n      trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n      trackFocusActionParent();\n    },\n    [\n      onLoadMore,\n      panelMetaInfo.isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemLast,\n      trackFocusRegionPanelItem,\n    ],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const { trackFocusItemLast, trackFocusActionParent, trackFocusRegionPanelItem } = useFocusTracker();\n  const onLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n  );\n  const handleOnClick = React.useCallback(\n    (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onLoadMore(e);\n      trackFocusItemLast();\n      trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n      trackFocusActionParent();\n    },\n    [\n      onLoadMore,\n      panelMetaInfo.isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemLast,\n      trackFocusRegionPanelItem,\n    ],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACwCnB;AAxCJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY,oBAAoC;AACzD,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,EAAE,oBAAoB,wBAAwB,0BAA0B,IAAI,gBAAgB;AAClG,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAA2D;AAC1D,iBAAW,CAAC;AACZ,yBAAmB;AACnB,gCAA0B,cAAc,kBAAkB;AAC1D,6BAAuB;AAAA,IACzB;AAAA,IACA;AAAA,MACE;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,2BAA2B,IAAI,oBAAoB,aAAa;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/bottom/LoadingMore.js

@@ -8,7 +8,7 @@ const StyledBottomLoadingMore = styled(Grid, {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE
 })``;
-const LoadingMore = (panelMetaInfo) => /* @__PURE__ */ jsx(StyledBottomLoadingMore, { px: "24px", children: /* @__PURE__ */ jsx(DSIndeterminateProgressIndicator, { processing: true, title: "Loading" }) });
+const LoadingMore = (panelMetaInfo) => /* @__PURE__ */ jsx(StyledBottomLoadingMore, { px: "1.846rem", children: /* @__PURE__ */ jsx(DSIndeterminateProgressIndicator, { processing: true, title: "Loading" }) });
 export {
   LoadingMore
 };

package/dist/esm/parts/Panel/bottom/LoadingMore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/LoadingMore.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledBottomLoadingMore = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE,\n})``;\nexport const LoadingMore = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledBottomLoadingMore px=\"24px\">\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </StyledBottomLoadingMore>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcnB;AAZJ,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAEjD,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAC1B,oBAAC,2BAAwB,IAAG,QAC1B,8BAAC,oCAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledBottomLoadingMore = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE,\n})``;\nexport const LoadingMore = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledBottomLoadingMore px=\"1.846rem\">\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </StyledBottomLoadingMore>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcnB;AAZJ,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAEjD,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAC1B,oBAAC,2BAAwB,IAAG,YAC1B,8BAAC,oCAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D;",
   "names": []
 }

package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js

@@ -10,7 +10,7 @@ import { LoadingMore } from "./LoadingMore";
 import { useLoadMoreBtnArrowNavigation } from "./useLoadMoreBtnArrowNavigation";
 import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
 const StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`
-  min-height: 36px;
+  min-height: 2.769rem;
   border-top: 1px solid neutral-400;
 `;
 const wrapperColsRows = ["1fr"];
@@ -22,12 +22,21 @@ const PanelContentBottomSection = React2.memo((panelMetaInfo) => {
   const isLoadingMore = usePropsStore(
     (state) => isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore
   );
-  const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusActionReset } = useFocusTracker();
+  const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusLoadMoreBtnDestination, trackFocusActionReset } = useFocusTracker();
   const onBottomSectionFocus = React2.useCallback(() => {
     trackFocusRegionBottom(isDestinationPanel);
-    trackFocusLoadMoreBtn();
+    if (isDestinationPanel)
+      trackFocusLoadMoreBtnDestination();
+    else
+      trackFocusLoadMoreBtn();
     trackFocusActionReset();
-  }, [isDestinationPanel, trackFocusActionReset, trackFocusLoadMoreBtn, trackFocusRegionBottom]);
+  }, [
+    isDestinationPanel,
+    trackFocusActionReset,
+    trackFocusLoadMoreBtn,
+    trackFocusLoadMoreBtnDestination,
+    trackFocusRegionBottom
+  ]);
   const shouldDisplayLoadingMore = isLoadingMore;
   const shouldDisplayLoadMoreBtn = withLoadMore && !isLoadingMore;
   const shouldNotTakeSpace = !withLoadMore && !isLoadingMore;

package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/PanelContentBottomSection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { LoadMoreBtn } from './LoadMoreBtn';\nimport { LoadingMore } from './LoadingMore';\nimport { useLoadMoreBtnArrowNavigation } from './useLoadMoreBtnArrowNavigation';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`\n  min-height: 36px;\n  border-top: 1px solid neutral-400;\n`;\nconst wrapperColsRows = ['1fr'];\n\nexport const PanelContentBottomSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const isLoadingMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n  );\n  const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusActionReset } = useFocusTracker();\n  const onBottomSectionFocus = React.useCallback(() => {\n    trackFocusRegionBottom(isDestinationPanel);\n    trackFocusLoadMoreBtn();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusLoadMoreBtn, trackFocusRegionBottom]);\n\n  // this 3 booleans MUST be auto-exclusives with each other\n  const shouldDisplayLoadingMore = isLoadingMore;\n  const shouldDisplayLoadMoreBtn = withLoadMore && !isLoadingMore;\n  const shouldNotTakeSpace = !withLoadMore && !isLoadingMore;\n  const { onLoadMoreButtonKeyDown } = useLoadMoreBtnArrowNavigation(panelMetaInfo);\n\n  if (shouldNotTakeSpace) return <div />;\n  return (\n    <StyledListWrapperBottom\n      cols={wrapperColsRows}\n      rows={wrapperColsRows}\n      onFocus={onBottomSectionFocus}\n      onKeyDown={onLoadMoreButtonKeyDown}\n    >\n      {shouldDisplayLoadingMore ? <LoadingMore {...panelMetaInfo} /> : null}\n      {shouldDisplayLoadMoreBtn ? <LoadMoreBtn {...panelMetaInfo} /> : null}\n    </StyledListWrapperBottom>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwCU,cAE7B,YAF6B;AAtCjC,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAE9B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,qCAAqC;AAC9C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAIlH,MAAM,kBAAkB,CAAC,KAAK;AAEvB,MAAM,4BAA4BA,OAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,eAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,uBAAuB,sBAAsB,IAAI,gBAAgB;AACjG,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,2BAAuB,kBAAkB;AACzC,0BAAsB;AACtB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,uBAAuB,sBAAsB,CAAC;AAG7F,QAAM,2BAA2B;AACjC,QAAM,2BAA2B,gBAAgB,CAAC;AAClD,QAAM,qBAAqB,CAAC,gBAAgB,CAAC;AAC7C,QAAM,EAAE,wBAAwB,IAAI,8BAA8B,aAAa;AAE/E,MAAI;AAAoB,WAAO,oBAAC,SAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MAEV;AAAA,mCAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { LoadMoreBtn } from './LoadMoreBtn';\nimport { LoadingMore } from './LoadingMore';\nimport { useLoadMoreBtnArrowNavigation } from './useLoadMoreBtnArrowNavigation';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`\n  min-height: 2.769rem;\n  border-top: 1px solid neutral-400;\n`;\nconst wrapperColsRows = ['1fr'];\n\nexport const PanelContentBottomSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const isLoadingMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n  );\n  const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusLoadMoreBtnDestination, trackFocusActionReset } =\n    useFocusTracker();\n  const onBottomSectionFocus = React.useCallback(() => {\n    trackFocusRegionBottom(isDestinationPanel);\n    if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n    else trackFocusLoadMoreBtn();\n    trackFocusActionReset();\n  }, [\n    isDestinationPanel,\n    trackFocusActionReset,\n    trackFocusLoadMoreBtn,\n    trackFocusLoadMoreBtnDestination,\n    trackFocusRegionBottom,\n  ]);\n\n  // this 3 booleans MUST be auto-exclusives with each other\n  const shouldDisplayLoadingMore = isLoadingMore;\n  const shouldDisplayLoadMoreBtn = withLoadMore && !isLoadingMore;\n  const shouldNotTakeSpace = !withLoadMore && !isLoadingMore;\n  const { onLoadMoreButtonKeyDown } = useLoadMoreBtnArrowNavigation(panelMetaInfo);\n\n  if (shouldNotTakeSpace) return <div />;\n  return (\n    <StyledListWrapperBottom\n      cols={wrapperColsRows}\n      rows={wrapperColsRows}\n      onFocus={onBottomSectionFocus}\n      onKeyDown={onLoadMoreButtonKeyDown}\n    >\n      {shouldDisplayLoadingMore ? <LoadingMore {...panelMetaInfo} /> : null}\n      {shouldDisplayLoadMoreBtn ? <LoadMoreBtn {...panelMetaInfo} /> : null}\n    </StyledListWrapperBottom>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiDU,cAE7B,YAF6B;AA/CjC,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAE9B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,qCAAqC;AAC9C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAIlH,MAAM,kBAAkB,CAAC,KAAK;AAEvB,MAAM,4BAA4BA,OAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AAEvC,QAAM,eAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,uBAAuB,kCAAkC,sBAAsB,IAC7G,gBAAgB;AAClB,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,2BAAuB,kBAAkB;AACzC,QAAI;AAAoB,uCAAiC;AAAA;AACpD,4BAAsB;AAC3B,0BAAsB;AAAA,EACxB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,2BAA2B;AACjC,QAAM,2BAA2B,gBAAgB,CAAC;AAClD,QAAM,qBAAqB,CAAC,gBAAgB,CAAC;AAC7C,QAAM,EAAE,wBAAwB,IAAI,8BAA8B,aAAa;AAE/E,MAAI;AAAoB,WAAO,oBAAC,SAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MAEV;AAAA,mCAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/bottom/useInnerRefHandlers.js

@@ -4,7 +4,10 @@ import { useInternalStore } from "../../../config/useStore";
 import { ITEMS_FOCUSES } from "../../../constants";
 const useInnerRefHandlers = ({ isDestinationPanel }) => {
   const focusItem = useInternalStore((state) => state.focusItem);
-  const shouldFocusLoadMoreBtn = React2.useMemo(() => focusItem === ITEMS_FOCUSES.LOAD_MORE_BTN, [focusItem]);
+  const shouldFocusLoadMoreBtn = React2.useMemo(
+    () => focusItem === (isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE),
+    [focusItem, isDestinationPanel]
+  );
   const innerRefHandlerLoadMoreBtn = React2.useCallback(
     (node) => {
       if (shouldFocusLoadMoreBtn)

package/dist/esm/parts/Panel/bottom/useInnerRefHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/useInnerRefHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { useInternalStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ITEMS_FOCUSES } from '../../../constants';\n\nexport const useInnerRefHandlers = ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  //   const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  //   const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  //   const currRegion = React.useMemo(\n  //     () => (isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_BOTTOM : REGIONS_FOCUSES.SOURCE_BOTTOM),\n  //     [isDestinationPanel],\n  //   );\n  const shouldFocusLoadMoreBtn = React.useMemo(() => focusItem === ITEMS_FOCUSES.LOAD_MORE_BTN, [focusItem]);\n\n  const innerRefHandlerLoadMoreBtn = React.useCallback(\n    (node: HTMLButtonElement) => {\n      if (shouldFocusLoadMoreBtn) node?.focus();\n    },\n    [shouldFocusLoadMoreBtn],\n  );\n  return React.useMemo(\n    () => ({ shouldFocusLoadMoreBtn, innerRefHandlerLoadMoreBtn }),\n    [innerRefHandlerLoadMoreBtn, shouldFocusLoadMoreBtn],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB;AAEjC,SAAS,qBAAqB;AAEvB,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,MAAkC;AAEzF,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,SAAS;AAM7D,QAAM,yBAAyBA,OAAM,QAAQ,MAAM,cAAc,cAAc,eAAe,CAAC,SAAS,CAAC;AAEzG,QAAM,6BAA6BA,OAAM;AAAA,IACvC,CAAC,SAA4B;AAC3B,UAAI;AAAwB,cAAM,MAAM;AAAA,IAC1C;AAAA,IACA,CAAC,sBAAsB;AAAA,EACzB;AACA,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,wBAAwB,2BAA2B;AAAA,IAC5D,CAAC,4BAA4B,sBAAsB;AAAA,EACrD;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { useInternalStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ITEMS_FOCUSES } from '../../../constants';\n\nexport const useInnerRefHandlers = ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  //   const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  //   const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  //   const currRegion = React.useMemo(\n  //     () => (isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_BOTTOM : REGIONS_FOCUSES.SOURCE_BOTTOM),\n  //     [isDestinationPanel],\n  //   );\n  const shouldFocusLoadMoreBtn = React.useMemo(\n    () =>\n      focusItem === (isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE),\n    [focusItem, isDestinationPanel],\n  );\n\n  const innerRefHandlerLoadMoreBtn = React.useCallback(\n    (node: HTMLButtonElement) => {\n      if (shouldFocusLoadMoreBtn) node?.focus();\n    },\n    [shouldFocusLoadMoreBtn],\n  );\n  return React.useMemo(\n    () => ({ shouldFocusLoadMoreBtn, innerRefHandlerLoadMoreBtn }),\n    [innerRefHandlerLoadMoreBtn, shouldFocusLoadMoreBtn],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB;AAEjC,SAAS,qBAAqB;AAEvB,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,MAAkC;AAEzF,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,SAAS;AAM7D,QAAM,yBAAyBA,OAAM;AAAA,IACnC,MACE,eAAe,qBAAqB,cAAc,4BAA4B,cAAc;AAAA,IAC9F,CAAC,WAAW,kBAAkB;AAAA,EAChC;AAEA,QAAM,6BAA6BA,OAAM;AAAA,IACvC,CAAC,SAA4B;AAC3B,UAAI;AAAwB,cAAM,MAAM;AAAA,IAC1C;AAAA,IACA,CAAC,sBAAsB;AAAA,EACzB;AACA,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,wBAAwB,2BAA2B;AAAA,IAC5D,CAAC,4BAA4B,sBAAsB;AAAA,EACrD;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.js

@@ -6,11 +6,12 @@ const useLoadMoreBtnArrowNavigation = (panelMetaInfo) => {
   const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();
   const { trackFocusActionParent } = useFocusActionTrackers();
   const { trackFocusRegionPanelItem } = useFocusRegionTrackers();
-  const isActive = useInternalStore((state) => state.lastActiveId);
+  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
   const onLoadMoreButtonKeyDown = React2.useCallback(
     (e) => {
       const { key } = e;
-      if (isActive) {
+      const isDragAndDropHappening = getIsDragAndDropHappening();
+      if (isDragAndDropHappening) {
         e.preventDefault();
         return;
       }
@@ -30,7 +31,7 @@ const useLoadMoreBtnArrowNavigation = (panelMetaInfo) => {
       }
     },
     [
-      isActive,
+      getIsDragAndDropHappening,
       trackFocusRegionPanelItem,
       panelMetaInfo,
       trackFocusNextItem,

package/dist/esm/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusRegionTrackers } from '../../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInternalStore } from '../../../config/useStore';\n\nexport const useLoadMoreBtnArrowNavigation = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusRegionTrackers();\n  const isActive = useInternalStore((state) => state.lastActiveId);\n\n  const onLoadMoreButtonKeyDown = 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'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();\n\n      // =============================================================================\n      // THIS IS NOT LIKE /src/parts/Item/useItemArrowNavigation.tsx\n      // THIS IS INVERTED BY DESIGN AND DESIRED TO BE INVERTED\n      // =============================================================================\n      // load-more-btn -> last element\n      if (key === 'ArrowUp') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusNextItem(panelMetaInfo); // this results in \"Last\" element of the list\n        trackFocusActionParent();\n      }\n      // load-more-btn -> first element\n      if (key === 'ArrowDown') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusPrevItem(panelMetaInfo); // this results in \"First\" element of the list\n        trackFocusActionParent();\n      }\n    },\n    [\n      isActive,\n      trackFocusRegionPanelItem,\n      panelMetaInfo,\n      trackFocusNextItem,\n      trackFocusActionParent,\n      trackFocusPrevItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB,wBAAwB,8BAA8B;AAEpF,SAAS,wBAAwB;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,IAAI,oBAAoB;AACvE,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,uBAAuB;AAC7D,QAAM,WAAW,iBAAiB,CAAC,UAAU,MAAM,YAAY;AAE/D,QAAM,0BAA0BA,OAAM;AAAA,IACpC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AAC7D,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AAO9D,UAAI,QAAQ,WAAW;AACrB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAEA,UAAI,QAAQ,aAAa;AACvB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusRegionTrackers } from '../../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInternalStore } from '../../../config/useStore';\n\nexport const useLoadMoreBtnArrowNavigation = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusRegionTrackers();\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n\n  const onLoadMoreButtonKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\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'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();\n\n      // =============================================================================\n      // THIS IS NOT LIKE /src/parts/Item/useItemArrowNavigation.tsx\n      // THIS IS INVERTED BY DESIGN AND DESIRED TO BE INVERTED\n      // =============================================================================\n      // load-more-btn -> last element\n      if (key === 'ArrowUp') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusNextItem(panelMetaInfo); // this results in \"Last\" element of the list\n        trackFocusActionParent();\n      }\n      // load-more-btn -> first element\n      if (key === 'ArrowDown') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusPrevItem(panelMetaInfo); // this results in \"First\" element of the list\n        trackFocusActionParent();\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      panelMetaInfo,\n      trackFocusNextItem,\n      trackFocusActionParent,\n      trackFocusPrevItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB,wBAAwB,8BAA8B;AAEpF,SAAS,wBAAwB;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,IAAI,oBAAoB;AACvE,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,uBAAuB;AAC7D,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAE7F,QAAM,0BAA0BA,OAAM;AAAA,IACpC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AAC7D,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AAO9D,UAAI,QAAQ,WAAW;AACrB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAEA,UAAI,QAAQ,aAAa;AACvB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/{ItemListWrapper.js → ItemListWrapper/Index.js}

@@ -3,10 +3,12 @@ import { jsx } from "react/jsx-runtime";
 import React2 from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-import { useInternalStore, usePropsStore } from "../../../config/useStore";
-import { ItemSortable } from "../../Item/Item";
-import { withConditionalDnDRowContext } from "../../HoC/withConditionalDnDRowContext";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { useInternalStore, usePropsStore } from "../../../../config/useStore";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../../config/DSShuttleV2Definitions";
+import { ItemSortable } from "../../../Item/Item";
+import { withConditionalDnDRowContext } from "../../../HoC/withConditionalDnDRowContext";
+import { useGetDatumHydratables } from "./useGetDatumHydratables";
+import { getDatumFlags } from "./getDatumFlags";
 const StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`
   position: relative;
 
@@ -35,8 +37,20 @@ const ItemListWrapper = React2.memo((panelMetaInfo) => {
     () => [`repeat(${itemList?.length ? itemList?.length : "0"},min-content)`],
     [itemList.length]
   );
+  const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);
   return /* @__PURE__ */ jsx(StyledItemsWrapper, { alignItems: "flex-start", rows, style: { height: `${totalSize}px` }, children: virtualItems?.map((virtualRow) => {
     const item = itemList[virtualRow.index];
+    const { original: datum, ...datumInternalMeta } = item;
+    const datumHydratables = getDatumHydratables(item);
+    const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });
+    const itemMeta = {
+      datum,
+      datumHydratables,
+      datumInternalMeta,
+      datumRenderFlags,
+      ...panelMetaInfo,
+      withDragNDrop
+    };
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -48,24 +62,16 @@ const ItemListWrapper = React2.memo((panelMetaInfo) => {
           height: `${virtualRow.size}px`,
           transform: `translateY(${virtualRow.start}px)`
         },
-        children: /* @__PURE__ */ jsx(
-          ItemSortable,
-          {
-            item,
-            isDestinationPanel,
-            withDragNDrop
-          },
-          item.original.id
-        )
+        children: /* @__PURE__ */ jsx("div", { ref: virtualRow.measureRef, children: /* @__PURE__ */ jsx(ItemSortable, { ...itemMeta }, datumHydratables.id) })
       },
       virtualRow.index
     );
   }) });
 });
 const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);
-var ItemListWrapper_default = ItemListWrapperWithContext;
+var Index_default = ItemListWrapperWithContext;
 export {
   ItemListWrapperWithContext,
-  ItemListWrapper_default as default
+  Index_default as default
 };
-//# sourceMappingURL=ItemListWrapper.js.map
+//# sourceMappingURL=Index.js.map

package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/Index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useInternalStore, usePropsStore } from '../../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions';\nimport { ItemSortable } from '../../../Item/Item';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext';\nimport { useGetDatumHydratables } from './useGetDatumHydratables';\nimport { getDatumFlags } from './getDatumFlags';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n\n  // .ds-shuttle-v2-move-multiple-wrapper {\n  //   top: 2px;\n  //   right: 2px;\n  //   height: calc(100% - 4px);\n  //   width: calc(65px - 2px);\n  // }\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize,\n  );\n\n  const virtualItems = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n  );\n\n  const withDragNDrop = usePropsStore((state) =>\n    isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n  );\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n  const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n  return (\n    <StyledItemsWrapper alignItems=\"flex-start\" rows={rows} style={{ height: `${totalSize}px` }}>\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        const { original: datum, ...datumInternalMeta } = item;\n        const datumHydratables = getDatumHydratables(item);\n        const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n        const itemMeta = {\n          datum,\n          datumHydratables,\n          datumInternalMeta,\n          datumRenderFlags,\n          ...panelMetaInfo,\n          withDragNDrop,\n        };\n        return (\n          <div\n            key={virtualRow.index}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: `${virtualRow.size}px`,\n              transform: `translateY(${virtualRow.start}px)`,\n            }}\n          >\n            <div ref={virtualRow.measureRef}>\n              <ItemSortable key={datumHydratables.id} {...itemMeta} />\n            </div>\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0ET;AAzEd,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB,qBAAqB;AAEhD,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAE9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvG,MAAM,kBAAkBA,OAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,YAAY;AAAA,IAAiB,CAAC,UAClC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,eAAe;AAAA,IAAiB,CAAC,UACrC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AAEA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,OAAOA,OAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AACA,QAAM,sBAAsB,uBAAuB,aAAa;AAChE,SACE,oBAAC,sBAAmB,YAAW,cAAa,MAAY,OAAO,EAAE,QAAQ,GAAG,cAAc,GACvF,wBAAc,IAAI,CAAC,eAAe;AACjC,UAAM,OAAO,SAAS,WAAW;AACjC,UAAM,EAAE,UAAU,UAAU,kBAAkB,IAAI;AAClD,UAAM,mBAAmB,oBAAoB,IAAI;AACjD,UAAM,mBAAmB,cAAc,EAAE,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,cAAc,CAAC;AACtG,UAAM,WAAW;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ,GAAG,WAAW;AAAA,UACtB,WAAW,cAAc,WAAW;AAAA,QACtC;AAAA,QAEA,8BAAC,SAAI,KAAK,WAAW,YACnB,8BAAC,gBAAwC,GAAG,YAAzB,iBAAiB,EAAkB,GACxD;AAAA;AAAA,MAZK,WAAW;AAAA,IAalB;AAAA,EAEJ,CAAC,GACH;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,gBAAQ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Panel/middle/ItemListWrapper/getDatumFlags.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+const getDatumFlags = ({
+  softDeleted,
+  preventMove = false,
+  preventDrilldown = false,
+  hasMultipleSelection = false
+}) => ({
+  selectionPrevented: Boolean(softDeleted || preventMove),
+  withActions: !softDeleted,
+  withMoveBtn: !softDeleted && !preventMove,
+  withDrilldownBtn: !softDeleted && !preventDrilldown,
+  internallyDisabledMove: hasMultipleSelection,
+  internallyDisabledDrilldown: hasMultipleSelection
+});
+export {
+  getDatumFlags
+};
+//# sourceMappingURL=getDatumFlags.js.map

package/dist/esm/parts/Panel/middle/ItemListWrapper/getDatumFlags.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/getDatumFlags.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "type GetDatumFlagsConfig = {\n  softDeleted: boolean;\n  preventMove?: boolean;\n  preventDrilldown?: boolean;\n  hasMultipleSelection?: boolean;\n};\nexport const getDatumFlags = ({\n  softDeleted,\n  preventMove = false,\n  preventDrilldown = false,\n  hasMultipleSelection = false,\n}: GetDatumFlagsConfig) => ({\n  selectionPrevented: Boolean(softDeleted || preventMove),\n  withActions: !softDeleted,\n  withMoveBtn: !softDeleted && !preventMove,\n  withDrilldownBtn: !softDeleted && !preventDrilldown,\n  internallyDisabledMove: hasMultipleSelection,\n  internallyDisabledDrilldown: hasMultipleSelection,\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMhB,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,uBAAuB;AACzB,OAA4B;AAAA,EAC1B,oBAAoB,QAAQ,eAAe,WAAW;AAAA,EACtD,aAAa,CAAC;AAAA,EACd,aAAa,CAAC,eAAe,CAAC;AAAA,EAC9B,kBAAkB,CAAC,eAAe,CAAC;AAAA,EACnC,wBAAwB;AAAA,EACxB,6BAA6B;AAC/B;",
+  "names": []
+}

package/dist/esm/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import React2 from "react";
+import { usePropsStore } from "../../../../config/useStore";
+const useGetDatumHydratables = (panelMetaInfo) => {
+  const getLabel = usePropsStore((state) => state.getLabel);
+  const getSubtitle = usePropsStore((state) => state.getSubtitle);
+  const getIcon = usePropsStore((state) => state.getIcon);
+  const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);
+  const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);
+  const getPreventMove = usePropsStore((state) => state.getPreventMove);
+  const getDatumHydratables = React2.useCallback(
+    (item) => {
+      const { original, ...datumMeta } = item;
+      return {
+        id: datumMeta.hydratedId,
+        label: getLabel(original, { datumMeta, panelMetaInfo }),
+        ...getSubtitle !== void 0 ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getIcon !== void 0 ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getCustomRenderer !== void 0 ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getPreventDrilldown !== void 0 ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getPreventMove !== void 0 ? { preventMove: getPreventMove(original, { datumMeta, panelMetaInfo }) } : {}
+      };
+    },
+    [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getPreventMove, getSubtitle, panelMetaInfo]
+  );
+  return getDatumHydratables;
+};
+export {
+  useGetDatumHydratables
+};
+//# sourceMappingURL=useGetDatumHydratables.js.map

package/dist/esm/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { usePropsStore } from '../../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types';\n\nexport const useGetDatumHydratables = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getLabel = usePropsStore((state) => state.getLabel);\n  const getSubtitle = usePropsStore((state) => state.getSubtitle);\n  const getIcon = usePropsStore((state) => state.getIcon);\n  const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);\n  const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);\n  const getPreventMove = usePropsStore((state) => state.getPreventMove);\n\n  const getDatumHydratables = React.useCallback(\n    (item: DSShuttleV2T.ConfiguredDatum) => {\n      const { original, ...datumMeta } = item;\n\n      return {\n        id: datumMeta.hydratedId,\n        label: getLabel(original, { datumMeta, panelMetaInfo }),\n        ...(getSubtitle !== undefined ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getIcon !== undefined ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getCustomRenderer !== undefined\n          ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n        ...(getPreventDrilldown !== undefined\n          ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n        ...(getPreventMove !== undefined\n          ? { preventMove: getPreventMove(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n      };\n    },\n    [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getPreventMove, getSubtitle, panelMetaInfo],\n  );\n  return getDatumHydratables;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAGvB,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,cAAc,cAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,UAAU,cAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,sBAAsB,cAAc,CAAC,UAAU,MAAM,mBAAmB;AAC9E,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAuC;AACtC,YAAM,EAAE,aAAa,UAAU,IAAI;AAEnC,aAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,OAAO,SAAS,UAAU,EAAE,WAAW,cAAc,CAAC;AAAA,QACtD,GAAI,gBAAgB,SAAY,EAAE,UAAU,YAAY,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACrG,GAAI,YAAY,SAAY,EAAE,MAAM,QAAQ,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACzF,GAAI,sBAAsB,SACtB,EAAE,gBAAgB,kBAAkB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAC5E,CAAC;AAAA,QACL,GAAI,wBAAwB,SACxB,EAAE,kBAAkB,oBAAoB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAChF,CAAC;AAAA,QACL,GAAI,mBAAmB,SACnB,EAAE,aAAa,eAAe,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IACtE,CAAC;AAAA,MACP;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,SAAS,UAAU,qBAAqB,gBAAgB,aAAa,aAAa;AAAA,EACxG;AACA,SAAO;AACT;",
+  "names": ["React"]
+}