npm - @elliemae/ds-shuttle-v2 - Versions diffs - 3.14.0-next.1 → 3.14.0-next.10 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js CHANGED Viewed

@@ -29,7 +29,7 @@ __export(withConditionalDnDRowContext_exports, {
 module.exports = __toCommonJS(withConditionalDnDRowContext_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
 var import_react_dom = require("react-dom");
 var import_useStore = require("../../config/useStore");
@@ -42,28 +42,47 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   const withDragNDrop = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
   );
+  const setDndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.setDndDraggingItemMeta);
+  const dndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItemMeta);
   const setOverId = (0, import_useStore.useInternalStore)((state) => state.setOverId);
   const setIsDropValid = (0, import_useStore.useInternalStore)((state) => state.setIsDropValid);
+  const setDndDraggingItem = (0, import_useStore.useInternalStore)((state) => state.setDndDraggingItem);
   const setLastActiveId = (0, import_useStore.useInternalStore)((state) => state.setLastActiveId);
   const setDropIndicatorPosition = (0, import_useStore.useInternalStore)((state) => state.setDropIndicatorPosition);
   const onItemsReorder = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder
   );
   const onReorder = (0, import_react.useCallback)(
-    (newData, metadata) => {
-      onItemsReorder(newData, { active: metadata.active.original, targetIndex: metadata.targetIndex });
+    (_newData, metadata) => {
+      const { considerExpanding, active: dndActive, over: dndOver, ...dndData } = metadata;
+      const over = dndOver.original.original;
+      const active = dndActive.original.original;
+      const cleanedMetaData = { ...dndData, over, active };
+      onItemsReorder(active, cleanedMetaData);
     },
     [onItemsReorder]
   );
-  const { dndContextProps, sortableContextProps, activeId, overId, dropIndicatorPosition, isDropValid } = (0, import_ds_drag_and_drop.useTreeDndkitConfig)({
-    flattenedItems: itemList,
-    visibleItems: itemList,
-    isHorizontalDnD: false,
-    isExpandable: false,
-    onReorder,
-    maxDragAndDropLevel: 0,
-    getIsDropValid: () => true
-  });
+  const treeConfig = import_react.default.useMemo(() => {
+    const configuredItemList = itemList.map((item, i) => ({
+      uid: item.hydratedId,
+      depth: 0,
+      parentId: null,
+      realIndex: i,
+      visibleIndex: i,
+      childrenCount: 0,
+      original: item
+    }));
+    return {
+      flattenedItems: configuredItemList,
+      visibleItems: configuredItemList,
+      isHorizontalDnD: false,
+      isExpandable: false,
+      onReorder,
+      maxDragAndDropLevel: 0,
+      getIsDropValid: () => true
+    };
+  }, [itemList, onReorder]);
+  const { dndContextProps, sortableContextProps, activeItem, activeId, overId, dropIndicatorPosition, isDropValid } = (0, import_ds_drag_and_drop.useTreeDndkitConfig)(treeConfig);
   (0, import_react.useEffect)(() => {
     setLastActiveId(activeId);
   }, [activeId, setLastActiveId]);
@@ -73,18 +92,24 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   (0, import_react.useEffect)(() => {
     setIsDropValid(isDropValid);
   }, [isDropValid, setIsDropValid]);
+  (0, import_react.useEffect)(() => {
+    setDndDraggingItem(activeItem?.original ?? null);
+  }, [activeItem, setDndDraggingItem]);
   (0, import_react.useEffect)(() => {
     setDropIndicatorPosition(dropIndicatorPosition);
   }, [dropIndicatorPosition, setDropIndicatorPosition]);
-  const item = itemList.find((currentItem) => currentItem.original.id === activeId);
+  (0, import_react.useEffect)(() => {
+    if (!Boolean(activeId) || activeId === "")
+      setDndDraggingItemMeta(null);
+  }, [activeId, setDndDraggingItemMeta]);
   if (withDragNDrop)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...sortableContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.SortableContext, { ...sortableContextProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }),
       (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemOverlay.ItemOverlay, { item, ...props }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: dndDraggingItemMeta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemOverlay.ItemOverlay, { ...dndDraggingItemMeta }) : null }) }),
         document.body
       )
-    ] });
+    ] }) });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
 };
 //# sourceMappingURL=withConditionalDnDRowContext.js.map

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport { ItemOverlay } from '../Item/ItemOverlay';\n\ntype FunctionalHOC = <T = any>(Component: React.ComponentType<T>, ...other: any[]) => (props: T) => JSX.Element;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const { isDestinationPanel } = props;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const withDragNDrop = usePropsStore((state) =>\n    isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n  );\n\n  const setOverId = useInternalStore((state) => state.setOverId);\n  const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n  const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n  const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n  const onItemsReorder = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n  );\n\n  const onReorder = useCallback(\n    (newData: unknown, metadata: { targetIndex: number; active: unknown }) => {\n      onItemsReorder(newData, { active: metadata.active.original, targetIndex: metadata.targetIndex });\n    },\n    [onItemsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, activeId, overId, dropIndicatorPosition, isDropValid } =\n    useTreeDndkitConfig({\n      flattenedItems: itemList,\n      visibleItems: itemList,\n      isHorizontalDnD: false,\n      isExpandable: false,\n      onReorder,\n      maxDragAndDropLevel: 0,\n      getIsDropValid: () => true,\n    });\n\n  useEffect(() => {\n    setLastActiveId(activeId);\n  }, [activeId, setLastActiveId]);\n\n  useEffect(() => {\n    setOverId(overId);\n  }, [overId, setOverId]);\n\n  useEffect(() => {\n    setIsDropValid(isDropValid);\n  }, [isDropValid, setIsDropValid]);\n\n  useEffect(() => {\n    setDropIndicatorPosition(dropIndicatorPosition);\n  }, [dropIndicatorPosition, setDropIndicatorPosition]);\n\n  const item = itemList.find((currentItem) => currentItem.original.id === activeId);\n  if (withDragNDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <Component {...props} />\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }}>\n            {activeId ? <ItemOverlay item={item} {...props} /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmEjB;AAjEN,mBAA8C;AAC9C,8BAA8E;AAC9E,uBAA6B;AAC7B,sBAAgD;AAChD,yBAA4B;AAKrB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,eAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,qBAAiB,kCAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,+BAA2B,kCAAiB,CAAC,UAAU,MAAM,wBAAwB;AAE3F,QAAM,qBAAiB;AAAA,IAAc,CAAC,UACpC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,SAAkB,aAAuD;AACxE,qBAAe,SAAS,EAAE,QAAQ,SAAS,OAAO,UAAU,aAAa,SAAS,YAAY,CAAC;AAAA,IACjG;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,UAAU,QAAQ,uBAAuB,YAAY,QAClG,6CAAoB;AAAA,IAClB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA,qBAAqB;AAAA,IACrB,gBAAgB,MAAM;AAAA,EACxB,CAAC;AAEH,8BAAU,MAAM;AACd,oBAAgB,QAAQ;AAAA,EAC1B,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,8BAAU,MAAM;AACd,cAAU,MAAM;AAAA,EAClB,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,8BAAU,MAAM;AACd,mBAAe,WAAW;AAAA,EAC5B,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,8BAAU,MAAM;AACd,6BAAyB,qBAAqB;AAAA,EAChD,GAAG,CAAC,uBAAuB,wBAAwB,CAAC;AAEpD,QAAM,OAAO,SAAS,KAAK,CAAC,gBAAgB,YAAY,SAAS,OAAO,QAAQ;AAChF,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,2CAAiB,GAAG,sBACnB,sDAAC,aAAW,GAAG,OAAO,GACxB;AAAA,UACC;AAAA,QACC,4CAAC,uCAAY,OAAO,EAAE,OAAO,OAAO,GACjC,qBAAW,4CAAC,kCAAY,MAAa,GAAG,OAAO,IAAK,MACvD;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
-  "names": []
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport type { DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\n\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ItemOverlay } from '../Item/ItemOverlay';\n\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n  activeId?: DSShuttleV2T.HydratedId;\n  overId?: DSShuttleV2T.HydratedId;\n  isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> =\n  (Component) => (props) => {\n    const { isDestinationPanel } = props;\n    const itemList = useInternalStore((state) =>\n      isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n    );\n\n    const withDragNDrop = usePropsStore((state) =>\n      isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n    );\n\n    const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n    const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n    const setOverId = useInternalStore((state) => state.setOverId);\n    const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n    const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);\n    const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n    const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n    const onItemsReorder = usePropsStore((state) =>\n      isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n    );\n\n    const onReorder: DnDKitTree.OnReorder<DSShuttleV2T.ConfiguredDatum> = useCallback(\n      (_newData, metadata) => {\n        // eslint-disable-next-line no-unused-vars\n        const { considerExpanding, active: dndActive, over: dndOver, ...dndData } = metadata;\n        const over = dndOver.original.original;\n        const active = dndActive.original.original;\n        const cleanedMetaData = { ...dndData, over, active };\n        onItemsReorder(active, cleanedMetaData);\n      },\n      [onItemsReorder],\n    );\n\n    const treeConfig = React.useMemo(() => {\n      const configuredItemList = itemList.map((item, i) => ({\n        // dnd\n        uid: item.hydratedId,\n        depth: 0,\n        parentId: null,\n        realIndex: i,\n        visibleIndex: i,\n        childrenCount: 0,\n        original: item,\n      }));\n      return {\n        flattenedItems: configuredItemList,\n        visibleItems: configuredItemList,\n        isHorizontalDnD: false,\n        isExpandable: false,\n        onReorder,\n        maxDragAndDropLevel: 0,\n        getIsDropValid: () => true,\n      };\n    }, [itemList, onReorder]);\n\n    const { dndContextProps, sortableContextProps, activeItem, activeId, overId, dropIndicatorPosition, isDropValid } =\n      useTreeDndkitConfig(treeConfig);\n\n    useEffect(() => {\n      setLastActiveId(activeId);\n    }, [activeId, setLastActiveId]);\n\n    useEffect(() => {\n      setOverId(overId);\n    }, [overId, setOverId]);\n\n    useEffect(() => {\n      setIsDropValid(isDropValid);\n    }, [isDropValid, setIsDropValid]);\n\n    useEffect(() => {\n      setDndDraggingItem(activeItem?.original ?? null);\n    }, [activeItem, setDndDraggingItem]);\n\n    useEffect(() => {\n      setDropIndicatorPosition(dropIndicatorPosition);\n    }, [dropIndicatorPosition, setDropIndicatorPosition]);\n\n    useEffect(() => {\n      if (!Boolean(activeId) || activeId === '') setDndDraggingItemMeta(null);\n    }, [activeId, setDndDraggingItemMeta]);\n\n    if (withDragNDrop)\n      return (\n        <DndContext {...dndContextProps}>\n          <SortableContext {...sortableContextProps}>\n            <Component {...props} />\n            {createPortal(\n              <DragOverlay style={{ width: 'auto' }}>\n                <>{dndDraggingItemMeta ? <ItemOverlay {...dndDraggingItemMeta} /> : null}</>\n              </DragOverlay>,\n              document.body,\n            )}\n          </SortableContext>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/dist/cjs/parts/HoC/withConditionalUseSortable.js CHANGED Viewed

@@ -30,9 +30,10 @@ module.exports = __toCommonJS(withConditionalUseSortable_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
-const withConditionalUseSortable = (Component) => (props) => {
-  const { id } = props.item.original;
-  const useSortableHelpers = (0, import_ds_drag_and_drop.useSortable)({ id });
+const withConditionalUseSortable = (Component) => function(props) {
+  const { datumInternalMeta } = props;
+  const { hydratedId } = datumInternalMeta;
+  const useSortableHelpers = (0, import_ds_drag_and_drop.useSortable)({ id: hydratedId });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, useSortableHelpers });
 };
 //# sourceMappingURL=withConditionalUseSortable.js.map

package/dist/cjs/parts/HoC/withConditionalUseSortable.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalUseSortable.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\n\nexport const withConditionalUseSortable = (Component) => (props) => {\n  const { id } = props.item.original;\n  const useSortableHelpers = useSortable({ id });\n\n  return <Component {...props} useSortableHelpers={useSortableHelpers} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOd;AANT,8BAA4B;AAErB,MAAM,6BAA6B,CAAC,cAAc,CAAC,UAAU;AAClE,QAAM,EAAE,GAAG,IAAI,MAAM,KAAK;AAC1B,QAAM,yBAAqB,qCAAY,EAAE,GAAG,CAAC;AAE7C,SAAO,4CAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
+  "sourcesContent": ["import React from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\ntype HoCConfig = DSShuttleV2T.ItemMeta;\ntype ResultComponentProps = DSShuttleV2T.ItemMeta & { useSortableHelpers: ReturnType<typeof useSortable> };\nexport const withConditionalUseSortable: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> = (Component) =>\n  function (props) {\n    const { datumInternalMeta } = props;\n    const { hydratedId } = datumInternalMeta;\n    const useSortableHelpers = useSortable({ id: hydratedId });\n\n    return <Component {...props} useSortableHelpers={useSortableHelpers} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYZ;AAXX,8BAA4B;AAKrB,MAAM,6BAA4F,CAAC,cACxG,SAAU,OAAO;AACf,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,yBAAqB,qCAAY,EAAE,IAAI,WAAW,CAAC;AAEzD,SAAO,4CAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
   "names": []
 }

package/dist/cjs/parts/Item/Item.js CHANGED Viewed

@@ -48,6 +48,7 @@ var import_DndHandle = require("../Dnd/DndHandle");
 var import_DropIndicator = require("../Dnd/DropIndicator");
 var import_withConditionalUseSortable = require("../HoC/withConditionalUseSortable");
 var import_useInnerRefHandlers = require("./ItemActions/useInnerRefHandlers");
+var import_useItemKeyboardSelection = require("./useItemKeyboardSelection");
 const cssDisabled = import_ds_system.css`
   background-color: ${({ theme }) => theme.colors.neutral["100"]};
   color: ${({ theme }) => theme.colors.neutral["300"]};
@@ -58,7 +59,7 @@ const cssDisabled = import_ds_system.css`
   }
 `;
 const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_WRAPPER })`
-  min-height: 36px;
+  min-height: 2.769rem;
   position: relative;
   background-color: white;
   &:hover {
@@ -79,14 +80,14 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: im
   ${({ isDragging }) => isDragging && cssDisabled}
 `;
-const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
-  const { isFirst, isLast } = item;
+const useInnerRefHandlers = ({ datum, datumInternalMeta, isDestinationPanel }) => {
+  const { isFirst, isLast, hydratedId } = datumInternalMeta;
   const { trackFocusItem } = (0, import_useFocusTracker.useFocusTracker)();
   const focusRegion = (0, import_useStore.useInternalStore)((state) => state.focusRegion);
   const focusItem = (0, import_useStore.useInternalStore)((state) => state.focusItem);
   const focusItemAction = (0, import_useStore.useInternalStore)((state) => state.focusItemAction);
   const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
-  const currItemId = item.original.id;
+  const currItemId = hydratedId;
   const shouldFocus = import_react.default.useMemo(
     () => focusRegion === currRegion && focusItemAction === "parent" && (focusItem === currItemId || isFirst && focusItem === "first" || isLast && focusItem === "last"),
     [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast]
@@ -95,72 +96,80 @@ const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
     (node) => {
       if (shouldFocus) {
         node?.focus();
-        trackFocusItem(item);
+        trackFocusItem({ original: datum, ...datumInternalMeta });
       }
     },
-    [item, shouldFocus, trackFocusItem]
+    [datum, datumInternalMeta, shouldFocus, trackFocusItem]
   );
   return import_react.default.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
 };
 const Item = import_react.default.memo((itemMeta) => {
-  const { item, withDragNDrop, useSortableHelpers } = itemMeta;
-  const { original, isSelected } = item;
-  const { id } = original;
+  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;
+  const { isSelected, hydratedId } = datumInternalMeta;
   const cols = (0, import_react.useMemo)(() => {
     if (withDragNDrop)
       return ["5px", "auto", "1fr", "auto"];
     return ["5px", "1fr", "auto"];
   }, [withDragNDrop]);
-  const dndActiveId = (0, import_useStore.useInternalStore)((state) => state.lastActiveId);
-  const isActive = (0, import_react.useMemo)(() => dndActiveId !== "", [dndActiveId]);
-  const selectItem = (0, import_useSelectionLogic.useSelectionLogic)(itemMeta);
+  const setDndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.setDndDraggingItemMeta);
+  const dndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItemMeta);
+  const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
+  const dndDraggingItem = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItem);
+  const isDraggingThisItem = dndDraggingItem?.hydratedId === hydratedId;
+  import_react.default.useEffect(() => {
+    if (isDraggingThisItem && dndDraggingItemMeta?.datumInternalMeta.hydratedId !== hydratedId)
+      setDndDraggingItemMeta(itemMeta);
+  }, [
+    dndDraggingItemMeta?.datumInternalMeta.hydratedId,
+    hydratedId,
+    isDraggingThisItem,
+    itemMeta,
+    setDndDraggingItemMeta
+  ]);
+  const { selectItem, onShiftMouseDownPreventTextSelection } = (0, import_useSelectionLogic.useSelectionLogic)(itemMeta);
   const { onItemContainerKeyDown } = (0, import_useItemArrowNavigation.useItemArrowNavigation)(itemMeta);
+  const { onItemKeyDownSelection } = (0, import_useItemKeyboardSelection.useItemKeyboardSelection)(itemMeta);
   const handleItemKeyDown = import_react.default.useCallback(
     (event) => {
-      const { key } = event;
-      if (["Spacebar", " ", "Enter"].includes(key)) {
-        if (isActive || event.target.id === `${id}-drag-handle`) {
-          event.preventDefault();
-          return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        selectItem(event);
-      }
+      onItemKeyDownSelection(event);
       onItemContainerKeyDown(event);
     },
-    [isActive, id, onItemContainerKeyDown, selectItem]
+    [onItemKeyDownSelection, onItemContainerKeyDown]
   );
   const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);
   const { innerRefHandlerDnd } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(itemMeta);
   const overId = (0, import_useStore.useInternalStore)((state) => state.overId);
   const isDropValid = (0, import_useStore.useInternalStore)((state) => state.isDropValid);
   const dropIndicatorPosition = (0, import_useStore.useInternalStore)((state) => state.dropIndicatorPosition);
-  const showDropIndicatorPosition = id === overId && dropIndicatorPosition;
+  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;
+  const sortableRef = useSortableHelpers?.setNodeRef ? useSortableHelpers?.setNodeRef : () => {
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ItemWrapper,
     {
-      isDragging: dndActiveId === id,
-      isDndActive: isActive,
+      isDragging: isDraggingThisItem,
+      isDndActive: getIsDragAndDropHappening(),
       cols,
       alignItems: "center",
       onClick: selectItem,
-      ref: (0, import_ds_utilities.mergeRefs)(innerRefHandlerParentItem, useSortableHelpers?.setNodeRef),
+      ref: (0, import_ds_utilities.mergeRefs)(innerRefHandlerParentItem, sortableRef),
       onKeyDown: handleItemKeyDown,
+      onMouseDown: onShiftMouseDownPreventTextSelection,
       tabIndex: shouldFocus ? 0 : -1,
       role: "checkbox",
       "aria-checked": isSelected,
-      id: `${id}-wrapper`,
+      id: `${hydratedId}-wrapper`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSelection.ItemSelection, { ...itemMeta }),
-        withDragNDrop ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        withDragNDrop && useSortableHelpers ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_DndHandle.DragHandle,
           {
-            id,
+            id: hydratedId,
             useSortableHelpers,
-            isDndActive: !!isActive,
-            isDragging: dndActiveId === id,
-            innerRef: innerRefHandlerDnd
+            isDndActive: getIsDragAndDropHappening(),
+            isDragging: dndDraggingItem?.hydratedId === hydratedId,
+            innerRef: innerRefHandlerDnd,
+            disabled: hasMultipleSelection
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemMiddleSection.ItemMiddleSection, { ...itemMeta }),

package/dist/cjs/parts/Item/Item.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/Item.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\n\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { useFocusTracker } from '../../config/useFocusTracker';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n  .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n  .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n  min-height: 36px;\n  position: relative;\n  background-color: white;\n  &:hover {\n    background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n    .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n    .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n    .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { isFirst, isLast } = item;\n  const { trackFocusItem } = useFocusTracker();\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = item.original.id;\n\n  const shouldFocus = React.useMemo(\n    () =>\n      focusRegion === currRegion &&\n      focusItemAction === 'parent' &&\n      (focusItem === currItemId || (isFirst && focusItem === 'first') || (isLast && focusItem === 'last')),\n    [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast],\n  );\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (shouldFocus) {\n        node?.focus();\n        trackFocusItem(item); // this converts 'first'/'last' to actual id -> prevents 'last' to focus \"new last\" if new items are added\n      }\n    },\n    [item, shouldFocus, trackFocusItem],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item, withDragNDrop, useSortableHelpers } = itemMeta;\n  const { original, isSelected } = item;\n  const { id } = original;\n\n  const cols = useMemo(() => {\n    if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n    return ['5px', '1fr', 'auto'];\n  }, [withDragNDrop]);\n\n  const dndActiveId = useInternalStore((state) => state.lastActiveId);\n  const isActive = useMemo(() => dndActiveId !== '', [dndActiveId]);\n\n  const selectItem = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      const { key } = event;\n\n      // Spacebar AND ' ' are cross-browser compatibility thing\n      if (['Spacebar', ' ', 'Enter'].includes(key)) {\n        if (isActive || (event.target as HTMLElement).id === `${id}-drag-handle`) {\n          event.preventDefault();\n          return;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n        selectItem(event);\n      }\n      onItemContainerKeyDown(event);\n    },\n    [isActive, id, onItemContainerKeyDown, selectItem],\n  );\n  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n  const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n  const overId = useInternalStore((state) => state.overId);\n  const isDropValid = useInternalStore((state) => state.isDropValid);\n  const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n  const showDropIndicatorPosition = id === overId && dropIndicatorPosition;\n\n  return (\n    <ItemWrapper\n      isDragging={dndActiveId === id}\n      isDndActive={isActive}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={mergeRefs(innerRefHandlerParentItem, useSortableHelpers?.setNodeRef)}\n      onKeyDown={handleItemKeyDown}\n      tabIndex={shouldFocus ? 0 : -1}\n      role=\"checkbox\"\n      aria-checked={isSelected}\n      id={`${id}-wrapper`}\n    >\n      <ItemSelection {...itemMeta} />\n      {withDragNDrop ? (\n        <DragHandle\n          id={id}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={!!isActive}\n          isDragging={dndActiveId === id}\n          innerRef={innerRefHandlerDnd}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { useFocusTracker } from '../../config/useFocusTracker';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n  .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n  .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n  min-height: 2.769rem;\n  position: relative;\n  background-color: white;\n  &:hover {\n    background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n    .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n    .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n    .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ datum, datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { isFirst, isLast, hydratedId } = datumInternalMeta;\n  const { trackFocusItem } = useFocusTracker();\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = hydratedId;\n\n  const shouldFocus = React.useMemo(\n    () =>\n      focusRegion === currRegion &&\n      focusItemAction === 'parent' &&\n      (focusItem === currItemId || (isFirst && focusItem === 'first') || (isLast && focusItem === 'last')),\n    [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast],\n  );\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (shouldFocus) {\n        node?.focus();\n        trackFocusItem({ original: datum, ...datumInternalMeta }); // this converts 'first'/'last' to actual id -> prevents 'last' to focus \"new last\" if new items are added\n      }\n    },\n    [datum, datumInternalMeta, shouldFocus, trackFocusItem],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n  const { isSelected, hydratedId } = datumInternalMeta;\n\n  const cols = useMemo(() => {\n    if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n    return ['5px', '1fr', 'auto'];\n  }, [withDragNDrop]);\n\n  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n  const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);\n  const isDraggingThisItem = dndDraggingItem?.hydratedId === hydratedId;\n  React.useEffect(() => {\n    if (isDraggingThisItem && dndDraggingItemMeta?.datumInternalMeta.hydratedId !== hydratedId)\n      setDndDraggingItemMeta(itemMeta);\n  }, [\n    dndDraggingItemMeta?.datumInternalMeta.hydratedId,\n    hydratedId,\n    isDraggingThisItem,\n    itemMeta,\n    setDndDraggingItemMeta,\n  ]);\n\n  const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      onItemKeyDownSelection(event);\n      onItemContainerKeyDown(event);\n    },\n    [onItemKeyDownSelection, onItemContainerKeyDown],\n  );\n  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n  const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n  const overId = useInternalStore((state) => state.overId);\n  const isDropValid = useInternalStore((state) => state.isDropValid);\n  const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n  const sortableRef = useSortableHelpers?.setNodeRef ? useSortableHelpers?.setNodeRef : () => {};\n  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={mergeRefs(innerRefHandlerParentItem, sortableRef)}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      tabIndex={shouldFocus ? 0 : -1}\n      role=\"checkbox\"\n      aria-checked={isSelected}\n      id={`${hydratedId}-wrapper`}\n    >\n      <ItemSelection {...itemMeta} />\n      {withDragNDrop && useSortableHelpers ? (\n        <DragHandle\n          id={hydratedId}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={getIsDragAndDropHappening()}\n          isDragging={dndDraggingItem?.hydratedId === hydratedId}\n          innerRef={innerRefHandlerDnd}\n          disabled={hasMultipleSelection}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React", "useInnerRefActionHandlers"]
 }

package/dist/cjs/parts/Item/ItemActions/ItemActions.js CHANGED Viewed

@@ -32,15 +32,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_button = require("@elliemae/ds-button");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_useActionsHandlers = require("./useActionsHandlers");
 var import_useInnerRefHandlers = require("./useInnerRefHandlers");
 var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
 const StyledItemActions = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
 const StyledItemActionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
-const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN })`
-  height: 22px !important;
+const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN })`
+  height: 1.692rem !important;
   svg {
     fill: brand-600;
   }
@@ -60,24 +60,25 @@ const StyledArrowShortRightIcon = (0, import_ds_system.styled)(import_ds_icons.A
   name: import_DSShuttleV2Definitions.DSShuttleV2Name,
   slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
 })``;
-const actionsCols = ["20px", "20px"];
+const actionsCols = ["1.538rem", "1.538rem"];
 const ItemActions = import_react.default.memo((itemMeta) => {
-  const { item, isDestinationPanel } = itemMeta;
-  const { original, withActions } = item;
-  const { preventDrilldown, preventMove } = original;
+  const { datumHydratables, isDestinationPanel, datumRenderFlags } = itemMeta;
+  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
+  const { preventDrilldown, preventMove } = datumHydratables;
   const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(itemMeta);
-  const { handleClickDrilldown, handleClickSingleMove } = (0, import_useActionsHandlers.useActionsHandlers)(itemMeta);
+  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = (0, import_useActionsHandlers.useActionsHandlers)(itemMeta);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActions, { cols: actionsCols, gutter: "xxs", pl: "xs", pr: "xxs", alignItems: "center", children: withActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActionWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       StyledButton,
       {
         buttonType: "icon",
         onClick: handleClickDrilldown,
-        size: import_ds_button.BUTTON_SIZES.S,
+        onKeyDown: handleKeyDownSelectionBubbleUp,
+        size: import_ds_button_v2.BUTTON_SIZES.S,
         innerRef: innerRefHandlerDrilldown,
         tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
-        disabled: preventDrilldown === true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrilldownIcon, { width: "20px", height: "20px" })
+        disabled: internallyDisabledDrilldown || preventDrilldown === true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrilldownIcon, { width: "1.538rem", height: "1.538rem" })
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActionWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -85,11 +86,12 @@ const ItemActions = import_react.default.memo((itemMeta) => {
       {
         buttonType: "icon",
         onClick: handleClickSingleMove,
-        size: import_ds_button.BUTTON_SIZES.S,
+        onKeyDown: handleKeyDownSelectionBubbleUp,
+        size: import_ds_button_v2.BUTTON_SIZES.S,
         innerRef: innerRefHandlerMove,
         tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
-        disabled: preventMove === true,
-        children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, { width: "20px", height: "20px" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, { width: "20px", height: "20px" })
+        disabled: internallyDisabledMove || preventMove === true,
+        children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, { width: "1.538rem", height: "1.538rem" })
       }
     ) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [

package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/ItemActions.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 { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n  height: 22px !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['20px', '20px'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item, isDestinationPanel } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { original, withActions } = item;\n  const { preventDrilldown, preventMove } = original;\n  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } =\n    useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove } = useActionsHandlers(itemMeta);\n\n  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleClickDrilldown}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={shouldFocusDrilldown && !preventDrilldown ? 0 : -1}\n              disabled={preventDrilldown === true}\n            >\n              <StyledDrilldownIcon width=\"20px\" height=\"20px\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleClickSingleMove}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={shouldFocusMove && !preventMove ? 0 : -1}\n              disabled={preventMove === true}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDf;AAhDR,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAC7G,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAClH,MAAM,mBAAe,yBAAO,6BAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,QAAQ,MAAM;AAE5B,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,MAAM,mBAAmB,IAAI;AAErC,QAAM,EAAE,UAAU,YAAY,IAAI;AAClC,QAAM,EAAE,kBAAkB,YAAY,IAAI;AAC1C,QAAM,EAAE,sBAAsB,iBAAiB,0BAA0B,oBAAoB,QAC3F,gDAAoB,QAAQ;AAC9B,QAAM,EAAE,sBAAsB,sBAAsB,QAAI,8CAAmB,QAAQ;AAEnF,SACE,4CAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,4EACE;AAAA,gDAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM,8BAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,QAC1D,UAAU,qBAAqB;AAAA,QAE/B,sDAAC,uBAAoB,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IAClD,GACF;AAAA,IACA,4CAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM,8BAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,QAChD,UAAU,gBAAgB;AAAA,QAEzB,+BACC,4CAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,4CAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IAE1D,GACF;AAAA,KACF,IAGA,4EACE;AAAA,gDAAC,SAAI;AAAA,IACL,4CAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n  height: 1.692rem !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumHydratables, isDestinationPanel, datumRenderFlags } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, preventMove } = datumHydratables;\n  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } =\n    useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n\n  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={shouldFocusDrilldown && !preventDrilldown ? 0 : -1}\n              disabled={internallyDisabledDrilldown || preventDrilldown === true}\n            >\n              <StyledDrilldownIcon width=\"1.538rem\" height=\"1.538rem\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={shouldFocusMove && !preventMove ? 0 : -1}\n              disabled={internallyDisabledMove || preventMove === true}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"1.538rem\" height=\"1.538rem\" />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDf;AAhDR,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAC7G,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAClH,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,oBAAoB,iBAAiB,IAAI;AAEnE,QAAM,EAAE,aAAa,6BAA6B,uBAAuB,IAAI;AAC7E,QAAM,EAAE,kBAAkB,YAAY,IAAI;AAC1C,QAAM,EAAE,sBAAsB,iBAAiB,0BAA0B,oBAAoB,QAC3F,gDAAoB,QAAQ;AAC9B,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,QAAI,8CAAmB,QAAQ;AAEnH,SACE,4CAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,4EACE;AAAA,gDAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,QAC1D,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,sDAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,4CAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,QAChD,UAAU,0BAA0B,gBAAgB;AAAA,QAEnD,+BACC,4CAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,4CAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF,IAGA,4EACE;AAAA,gDAAC,SAAI;AAAA,IACL,4CAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/ItemActions/useActionsHandlers.js CHANGED Viewed

@@ -31,15 +31,20 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useActionsLogicHandlers = require("./useActionsLogicHandlers");
 const useActionsHandlers = (itemMeta) => {
-  const { handleDrilldown, handleSingleMove } = (0, import_useActionsLogicHandlers.useActionsLogicHandlers)(itemMeta);
+  const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = (0, import_useActionsLogicHandlers.useActionsLogicHandlers)(itemMeta);
   const handleClickDrilldown = import_react.default.useCallback(handleDrilldown, [handleDrilldown]);
   const handleClickSingleMove = import_react.default.useCallback(handleSingleMove, [handleSingleMove]);
+  const handleKeyDownSelectionBubbleUp = import_react.default.useCallback(
+    preventKeyDownSelectionBubbleUp,
+    [preventKeyDownSelectionBubbleUp]
+  );
   return import_react.default.useMemo(
     () => ({
       handleClickDrilldown,
-      handleClickSingleMove
+      handleClickSingleMove,
+      handleKeyDownSelectionBubbleUp
     }),
-    [handleClickDrilldown, handleClickSingleMove]
+    [handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp]
   );
 };
 //# sourceMappingURL=useActionsHandlers.js.map

package/dist/cjs/parts/Item/ItemActions/useActionsHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/useActionsHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { type DSButtonT } from '@elliemae/ds-button';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsLogicHandlers } from './useActionsLogicHandlers';\n\nexport const useActionsHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { handleDrilldown, handleSingleMove } = useActionsLogicHandlers(itemMeta);\n  const handleClickDrilldown: DSButtonT.Props['onClick'] = React.useCallback(handleDrilldown, [handleDrilldown]);\n  const handleClickSingleMove: DSButtonT.Props['onClick'] = React.useCallback(handleSingleMove, [handleSingleMove]);\n\n  return React.useMemo(\n    () => ({\n      handleClickDrilldown,\n      handleClickSingleMove,\n    }),\n    [handleClickDrilldown, handleClickSingleMove],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,qCAAwC;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,iBAAiB,QAAI,wDAAwB,QAAQ;AAC9E,QAAM,uBAAmD,aAAAA,QAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoD,aAAAA,QAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAEhH,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,qBAAqB;AAAA,EAC9C;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsLogicHandlers } from './useActionsLogicHandlers';\n\nexport const useActionsHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = useActionsLogicHandlers(itemMeta);\n  const handleClickDrilldown: DSButtonT.Props['onClick'] = React.useCallback(handleDrilldown, [handleDrilldown]);\n  const handleClickSingleMove: DSButtonT.Props['onClick'] = React.useCallback(handleSingleMove, [handleSingleMove]);\n  const handleKeyDownSelectionBubbleUp: DSButtonT.Props['onKeyDown'] = React.useCallback(\n    preventKeyDownSelectionBubbleUp,\n    [preventKeyDownSelectionBubbleUp],\n  );\n  return React.useMemo(\n    () => ({\n      handleClickDrilldown,\n      handleClickSingleMove,\n      handleKeyDownSelectionBubbleUp,\n    }),\n    [handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,qCAAwC;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,kBAAkB,gCAAgC,QAAI,wDAAwB,QAAQ;AAC/G,QAAM,uBAAmD,aAAAA,QAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoD,aAAAA,QAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAChH,QAAM,iCAA+D,aAAAA,QAAM;AAAA,IACzE;AAAA,IACA,CAAC,+BAA+B;AAAA,EAClC;AACA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,uBAAuB,8BAA8B;AAAA,EAC9E;AACF;",
   "names": ["React"]
 }