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

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

@@ -0,0 +1,57 @@
+"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 useItemKeyboardSelection_exports = {};
+__export(useItemKeyboardSelection_exports, {
+  useItemKeyboardSelection: () => useItemKeyboardSelection
+});
+module.exports = __toCommonJS(useItemKeyboardSelection_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_useStore = require("../../config/useStore");
+var import_useSelectionLogic = require("./useSelectionLogic");
+const useItemKeyboardSelection = (itemMeta) => {
+  const { datumInternalMeta } = itemMeta;
+  const { hydratedId } = datumInternalMeta;
+  const { selectItem } = (0, import_useSelectionLogic.useSelectionLogic)(itemMeta);
+  const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
+  const onItemKeyDownSelection = import_react.default.useCallback(
+    (event) => {
+      const { key } = event;
+      if (["Spacebar", " ", "Enter"].includes(key)) {
+        const isDragNDroping = getIsDragAndDropHappening();
+        if (isDragNDroping || event.target.id === `${hydratedId}-drag-handle`) {
+          event.preventDefault();
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        selectItem(event);
+      }
+    },
+    [getIsDragAndDropHappening, hydratedId, selectItem]
+  );
+  return import_react.default.useMemo(() => ({ onItemKeyDownSelection }), [onItemKeyDownSelection]);
+};
+//# sourceMappingURL=useItemKeyboardSelection.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Item/useItemKeyboardSelection.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 { useSelectionLogic } from './useSelectionLogic';\n\nexport const useItemKeyboardSelection = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta } = itemMeta;\n  const { hydratedId } = datumInternalMeta;\n  const { selectItem } = useSelectionLogic(itemMeta);\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const onItemKeyDownSelection = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      const { key } = event;\n\n      // Spacebar AND ' ' are cross-browser compatibility thing\n      if (['Spacebar', ' ', 'Enter'].includes(key)) {\n        // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n        const isDragNDroping = getIsDragAndDropHappening();\n        if (isDragNDroping || (event.target as HTMLElement).id === `${hydratedId}-drag-handle`) {\n          event.preventDefault();\n          return;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n        selectItem(event);\n      }\n    },\n    [getIsDragAndDropHappening, hydratedId, selectItem],\n  );\n  return React.useMemo(() => ({ onItemKeyDownSelection }), [onItemKeyDownSelection]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAAiC;AACjC,+BAAkC;AAE3B,MAAM,2BAA2B,CAAC,aAAoC;AAC3E,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,EAAE,WAAW,QAAI,4CAAkB,QAAQ;AACjD,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,UAAU;AACT,YAAM,EAAE,IAAI,IAAI;AAGhB,UAAI,CAAC,YAAY,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAE5C,cAAM,iBAAiB,0BAA0B;AACjD,YAAI,kBAAmB,MAAM,OAAuB,OAAO,GAAG,0BAA0B;AACtF,gBAAM,eAAe;AACrB;AAAA,QACF;AACA,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,2BAA2B,YAAY,UAAU;AAAA,EACpD;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
+  "names": ["React"]
+}

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

@@ -31,13 +31,22 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useStore = require("../../config/useStore");
 var import_useFocusTracker = require("../../config/useFocusTracker");
-const useSelectionLogic = ({ item, isDestinationPanel }) => {
+const useSelectionLogic = ({
+  isDestinationPanel,
+  datumInternalMeta,
+  datum,
+  datumRenderFlags
+}) => {
   const { trackFocusItem } = (0, import_useFocusTracker.useFocusItemTracker)();
   const { trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
   const { trackFocusRegionPanelItem } = (0, import_useFocusTracker.useFocusTracker)();
-  const destinationSelectionArray = (0, import_useStore.useInternalStore)((store) => store.destinationSelectionArray);
-  const sourceSelectionArray = (0, import_useStore.useInternalStore)((store) => store.sourceSelectionArray);
-  const panelSelectedItemsArray = isDestinationPanel ? destinationSelectionArray : sourceSelectionArray;
+  const getPanelLastSelectedItem = (0, import_useStore.useInternalStore)((store) => store.getPanelLastSelectedItem);
+  const setPanelLastSelectedItem = (0, import_useStore.useInternalStore)(
+    (store) => isDestinationPanel ? store.setDestinationLastSelectedItem : store.setSourceLastSelectedItem
+  );
+  const panelSelectionableDataIds = (0, import_useStore.useInternalStore)(
+    (store) => isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds
+  );
   const onSelectionChange = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange
   );
@@ -46,36 +55,70 @@ const useSelectionLogic = ({ item, isDestinationPanel }) => {
   );
   const selectItem = import_react.default.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 = import_react.default.useCallback((event) => {
+    const { shiftKey } = event;
+    if (shiftKey)
+      event.preventDefault();
+  }, []);
+  return import_react.default.useMemo(
+    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),
+    [selectItem, onShiftMouseDownPreventTextSelection]
+  );
 };
 //# sourceMappingURL=useSelectionLogic.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/useSelectionLogic.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAgD;AAEhD,6BAA6E;AACtE,MAAM,oBAAoB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACxF,QAAM,EAAE,eAAe,QAAI,4CAAoB;AAC/C,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,wCAAgB;AAEtD,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,2BAAuB,kCAAiB,CAAC,UAAU,MAAM,oBAAoB;AAEnF,QAAM,0BAA0B,qBAAqB,4BAA4B;AACjF,QAAM,wBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,aAAAA,QAAM;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": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,sBAAgD;AAEhD,6BAA6E;AACtE,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,EAAE,eAAe,QAAI,4CAAoB;AAC/C,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,wCAAgB;AAEtD,QAAM,+BAA2B,kCAAiB,CAAC,UAAU,MAAM,wBAAwB;AAC3F,QAAM,+BAA2B;AAAA,IAAiB,CAAC,UACjD,qBAAqB,MAAM,iCAAiC,MAAM;AAAA,EACpE;AAEA,QAAM,gCAA4B;AAAA,IAAiB,CAAC,UAClD,qBAAqB,MAAM,kCAAkC,MAAM;AAAA,EACrE;AAEA,QAAM,wBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,aAAAA,QAAM;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,uCAAuC,aAAAA,QAAM,YAAY,CAAC,UAA4C;AAC1G,UAAM,EAAE,SAAS,IAAI;AACrB,QAAI;AAAU,YAAM,eAAe;AAAA,EACrC,GAAG,CAAC,CAAC;AACL,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,YAAY,qCAAqC;AAAA,IAC1D,CAAC,YAAY,oCAAoC;AAAA,EACnD;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/MainContent.js

@@ -34,6 +34,7 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_PanelWrapper = require("./PanelWrapper");
+var import_useStore = require("../config/useStore");
 var import_DSShuttleV2Definitions = require("../config/DSShuttleV2Definitions");
 var import_useFocusTracker = require("../config/useFocusTracker");
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.WRAPPER })`
@@ -54,9 +55,11 @@ const MainContent = import_react.default.memo(() => {
     [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset]
   );
   const handleOnBlurOut = (0, import_ds_utilities.useOnBlurOut)(config);
+  const destinationHasMultipleSelectedItems = (0, import_useStore.useInternalStore)((store) => store.destinationHasMultipleSelectedItems);
+  const sourceHasMultipleSelectedItems = (0, import_useStore.useInternalStore)((store) => store.sourceHasMultipleSelectedItems);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledWrapper, { cols: mainContentCols, gutter: "xs", p: "xs", onBlur: handleOnBlurOut, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: true })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: false, hasMultipleSelection: sourceHasMultipleSelectedItems }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: true, hasMultipleSelection: destinationHasMultipleSelectedItems })
   ] });
 });
 //# sourceMappingURL=MainContent.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MainContent.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 { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BnB;AA5BJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,0BAA6B;AAC7B,0BAA6B;AAC7B,oCAAkD;AAClD,6BAAgC;AAEhC,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAI5F,MAAM,kBAAkB,CAAC,OAAO,KAAK;AAE9B,MAAM,cAAc,aAAAA,QAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC9F,QAAM,SAAS,aAAAA,QAAM;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,sBAAkB,kCAAa,MAAM;AAC3C,SACE,6CAAC,iBAAc,MAAM,iBAAiB,QAAO,MAAK,GAAE,MAAK,QAAQ,iBAC/D;AAAA,gDAAC,oCAAa,oBAAoB,OAAO;AAAA,IACzC,4CAAC,oCAAa,oBAAkB,MAAC;AAAA,KACnC;AAEJ,CAAC;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AAhCJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,0BAA6B;AAC7B,0BAA6B;AAC7B,sBAAiC;AACjC,oCAAkD;AAClD,6BAAgC;AAEhC,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAI5F,MAAM,kBAAkB,CAAC,OAAO,KAAK;AAE9B,MAAM,cAAc,aAAAA,QAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC9F,QAAM,SAAS,aAAAA,QAAM;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,sBAAkB,kCAAa,MAAM;AAC3C,QAAM,0CAAsC,kCAAiB,CAAC,UAAU,MAAM,mCAAmC;AACjH,QAAM,qCAAiC,kCAAiB,CAAC,UAAU,MAAM,8BAA8B;AAEvG,SACE,6CAAC,iBAAc,MAAM,iBAAiB,QAAO,MAAK,GAAE,MAAK,QAAQ,iBAC/D;AAAA,gDAAC,oCAAa,oBAAoB,OAAO,sBAAsB,gCAAgC;AAAA,IAC/F,4CAAC,oCAAa,oBAAkB,MAAC,sBAAsB,qCAAqC;AAAA,KAC9F;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -31,12 +31,12 @@ var React = __toESM(require("react"));
 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_button = require("@elliemae/ds-button");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_useStore = require("../../../config/useStore");
 var import_useInnerRefHandlers = require("./useInnerRefHandlers");
 var import_useFocusTracker = require("../../../config/useFocusTracker");
 var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
-const StyledLoadMoreBtn = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
+const StyledLoadMoreBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
   name: import_DSShuttleV2Definitions.DSShuttleV2Name,
   slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN
 })`
@@ -70,7 +70,7 @@ const LoadMoreBtn = (panelMetaInfo) => {
     {
       buttonType: "text",
       onClick: handleOnClick,
-      size: import_ds_button.BUTTON_SIZES.S,
+      size: import_ds_button_v2.BUTTON_SIZES.S,
       innerRef: innerRefHandlerLoadMoreBtn,
       children: "Load More..."
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/LoadMoreBtn.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCnB;AAxCJ,mBAAkB;AAClB,uBAAuB;AACvB,uBAAyD;AACzD,sBAA8B;AAE9B,iCAAoC;AACpC,6BAAgC;AAChC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,6BAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,EAAE,oBAAoB,wBAAwB,0BAA0B,QAAI,wCAAgB;AAClG,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgB,aAAAA,QAAM;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,QAAI,gDAAoB,aAAa;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,8BAAa;AAAA,MACnB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAEJ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCnB;AAxCJ,mBAAkB;AAClB,uBAAuB;AACvB,0BAAyD;AACzD,sBAA8B;AAE9B,iCAAoC;AACpC,6BAAgC;AAChC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,EAAE,oBAAoB,wBAAwB,0BAA0B,QAAI,wCAAgB;AAClG,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgB,aAAAA,QAAM;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,QAAI,gDAAoB,aAAa;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,iCAAa;AAAA,MACnB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAEJ;",
   "names": ["React"]
 }

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

@@ -37,5 +37,5 @@ const StyledBottomLoadingMore = (0, import_ds_system.styled)(import_ds_grid.Grid
   name: import_DSShuttleV2Definitions.DSShuttleV2Name,
   slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE
 })``;
-const LoadingMore = (panelMetaInfo) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledBottomLoadingMore, { px: "24px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_indeterminate_progress_indicator.DSIndeterminateProgressIndicator, { processing: true, title: "Loading" }) });
+const LoadingMore = (panelMetaInfo) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledBottomLoadingMore, { px: "1.846rem", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_indeterminate_progress_indicator.DSIndeterminateProgressIndicator, { processing: true, title: "Loading" }) });
 //# sourceMappingURL=LoadingMore.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/LoadingMore.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAZJ,uBAAuB;AACvB,qBAAqB;AACrB,iDAAiD;AAEjD,oCAAkD;AAElD,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAC1B,4CAAC,2BAAwB,IAAG,QAC1B,sDAAC,+EAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAZJ,uBAAuB;AACvB,qBAAqB;AACrB,iDAAiD;AAEjD,oCAAkD;AAElD,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAC1B,4CAAC,2BAAwB,IAAG,YAC1B,sDAAC,+EAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D;",
   "names": []
 }

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

@@ -39,7 +39,7 @@ var import_LoadingMore = require("./LoadingMore");
 var import_useLoadMoreBtnArrowNavigation = require("./useLoadMoreBtnArrowNavigation");
 var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
 const StyledListWrapperBottom = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`
-  min-height: 36px;
+  min-height: 2.769rem;
   border-top: 1px solid neutral-400;
 `;
 const wrapperColsRows = ["1fr"];

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/PanelContentBottomSection.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* 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  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", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCU;AAtCjC,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,6BAAgC;AAChC,sBAA8B;AAE9B,yBAA4B;AAC5B,yBAA4B;AAC5B,2CAA8C;AAC9C,oCAAkD;AAElD,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAIlH,MAAM,kBAAkB,CAAC,KAAK;AAEvB,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,uBAAuB,sBAAsB,QAAI,wCAAgB;AACjG,QAAM,uBAAuB,aAAAA,QAAM,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,QAAI,oEAA8B,aAAa;AAE/E,MAAI;AAAoB,WAAO,4CAAC,SAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MAEV;AAAA,mCAA2B,4CAAC,kCAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,4CAAC,kCAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -35,11 +35,12 @@ const useLoadMoreBtnArrowNavigation = (panelMetaInfo) => {
   const { trackFocusPrevItem, trackFocusNextItem } = (0, import_useFocusTracker.useFocusItemTracker)();
   const { trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
   const { trackFocusRegionPanelItem } = (0, import_useFocusTracker.useFocusRegionTrackers)();
-  const isActive = (0, import_useStore.useInternalStore)((state) => state.lastActiveId);
+  const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
   const onLoadMoreButtonKeyDown = import_react.default.useCallback(
     (e) => {
       const { key } = e;
-      if (isActive) {
+      const isDragAndDropHappening = getIsDragAndDropHappening();
+      if (isDragAndDropHappening) {
         e.preventDefault();
         return;
       }
@@ -59,7 +60,7 @@ const useLoadMoreBtnArrowNavigation = (panelMetaInfo) => {
       }
     },
     [
-      isActive,
+      getIsDragAndDropHappening,
       trackFocusRegionPanelItem,
       panelMetaInfo,
       trackFocusNextItem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,6BAAoF;AAEpF,sBAAiC;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,QAAI,4CAAoB;AACvE,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,+CAAuB;AAC7D,QAAM,eAAW,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAE/D,QAAM,0BAA0B,aAAAA,QAAM;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,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,6BAAoF;AAEpF,sBAAiC;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,QAAI,4CAAoB;AACvE,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,+CAAuB;AAC7D,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAE7F,QAAM,0BAA0B,aAAAA,QAAM;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,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
   "names": ["React"]
 }

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

@@ -22,21 +22,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ItemListWrapper_exports = {};
-__export(ItemListWrapper_exports, {
+var Index_exports = {};
+__export(Index_exports, {
   ItemListWrapperWithContext: () => ItemListWrapperWithContext,
-  default: () => ItemListWrapper_default
+  default: () => Index_default
 });
-module.exports = __toCommonJS(ItemListWrapper_exports);
+module.exports = __toCommonJS(Index_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_useStore = require("../../../config/useStore");
-var import_Item = require("../../Item/Item");
-var import_withConditionalDnDRowContext = require("../../HoC/withConditionalDnDRowContext");
-var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
+var import_useStore = require("../../../../config/useStore");
+var import_DSShuttleV2Definitions = require("../../../../config/DSShuttleV2Definitions");
+var import_Item = require("../../../Item/Item");
+var import_withConditionalDnDRowContext = require("../../../HoC/withConditionalDnDRowContext");
+var import_useGetDatumHydratables = require("./useGetDatumHydratables");
+var import_getDatumFlags = require("./getDatumFlags");
 const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEMS_WRAPPER })`
   position: relative;
 
@@ -65,8 +67,20 @@ const ItemListWrapper = import_react.default.memo((panelMetaInfo) => {
     () => [`repeat(${itemList?.length ? itemList?.length : "0"},min-content)`],
     [itemList.length]
   );
+  const getDatumHydratables = (0, import_useGetDatumHydratables.useGetDatumHydratables)(panelMetaInfo);
   return /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_getDatumFlags.getDatumFlags)({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });
+    const itemMeta = {
+      datum,
+      datumHydratables,
+      datumInternalMeta,
+      datumRenderFlags,
+      ...panelMetaInfo,
+      withDragNDrop
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -78,20 +92,12 @@ const ItemListWrapper = import_react.default.memo((panelMetaInfo) => {
           height: `${virtualRow.size}px`,
           transform: `translateY(${virtualRow.start}px)`
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_Item.ItemSortable,
-          {
-            item,
-            isDestinationPanel,
-            withDragNDrop
-          },
-          item.original.id
-        )
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: virtualRow.measureRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Item.ItemSortable, { ...itemMeta }, datumHydratables.id) })
       },
       virtualRow.index
     );
   }) });
 });
 const ItemListWrapperWithContext = (0, import_withConditionalDnDRowContext.withConditionalDnDRowContext)(ItemListWrapper);
-var ItemListWrapper_default = ItemListWrapperWithContext;
-//# sourceMappingURL=ItemListWrapper.js.map
+var Index_default = ItemListWrapperWithContext;
+//# sourceMappingURL=Index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Panel/middle/ItemListWrapper/Index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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              // height: `${(getCurrentFont()/13) * virtualRow.size}px`,\n              // transform: `translateY(${(getCurrentFont()/13) * 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4ET;AA3Ed,mBAAkB;AAClB,qBAAqB;AACrB,uBAAuB;AACvB,sBAAgD;AAEhD,oCAAkD;AAClD,kBAA6B;AAC7B,0CAA6C;AAC7C,oCAAuC;AACvC,2BAA8B;AAE9B,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvG,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,eAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,gBAAY;AAAA,IAAiB,CAAC,UAClC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,mBAAe;AAAA,IAAiB,CAAC,UACrC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AAEA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AACA,QAAM,0BAAsB,sDAAuB,aAAa;AAChE,SACE,4CAAC,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,uBAAmB,oCAAc,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,QAGtC;AAAA,QAEA,sDAAC,SAAI,KAAK,WAAW,YACnB,sDAAC,4BAAwC,GAAG,YAAzB,iBAAiB,EAAkB,GACxD;AAAA;AAAA,MAdK,WAAW;AAAA,IAelB;AAAA,EAEJ,CAAC,GACH;AAEJ,CAAC;AAEM,MAAM,iCAA6B,kEAA6B,eAAe;AACtF,IAAO,gBAAQ;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,44 @@
+"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 getDatumFlags_exports = {};
+__export(getDatumFlags_exports, {
+  getDatumFlags: () => getDatumFlags
+});
+module.exports = __toCommonJS(getDatumFlags_exports);
+var React = __toESM(require("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
+});
+//# sourceMappingURL=getDatumFlags.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Panel/middle/ItemListWrapper/getDatumFlags.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMhB,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": []
+}