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/esm/parts/HoC/withConditionalUseSortable.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
-const withConditionalUseSortable = (Component) => (props) => {
-  const { id } = props.item.original;
-  const useSortableHelpers = useSortable({ id });
+const withConditionalUseSortable = (Component) => function(props) {
+  const { datumInternalMeta } = props;
+  const { hydratedId } = datumInternalMeta;
+  const useSortableHelpers = useSortable({ id: hydratedId });
   return /* @__PURE__ */ jsx(Component, { ...props, useSortableHelpers });
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalUseSortable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACOd;AANT,SAAS,mBAAmB;AAErB,MAAM,6BAA6B,CAAC,cAAc,CAAC,UAAU;AAClE,QAAM,EAAE,GAAG,IAAI,MAAM,KAAK;AAC1B,QAAM,qBAAqB,YAAY,EAAE,GAAG,CAAC;AAE7C,SAAO,oBAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACYZ;AAXX,SAAS,mBAAmB;AAKrB,MAAM,6BAA4F,CAAC,cACxG,SAAU,OAAO;AACf,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,qBAAqB,YAAY,EAAE,IAAI,WAAW,CAAC;AAEzD,SAAO,oBAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
   "names": []
 }

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

@@ -17,6 +17,7 @@ import { DragHandle } from "../Dnd/DndHandle";
 import { DropIndicator } from "../Dnd/DropIndicator";
 import { withConditionalUseSortable } from "../HoC/withConditionalUseSortable";
 import { useInnerRefHandlers as useInnerRefActionHandlers } from "./ItemActions/useInnerRefHandlers";
+import { useItemKeyboardSelection } from "./useItemKeyboardSelection";
 const cssDisabled = css`
   background-color: ${({ theme }) => theme.colors.neutral["100"]};
   color: ${({ theme }) => theme.colors.neutral["300"]};
@@ -27,7 +28,7 @@ const cssDisabled = css`
   }
 `;
 const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })`
-  min-height: 36px;
+  min-height: 2.769rem;
   position: relative;
   background-color: white;
   &:hover {
@@ -48,14 +49,14 @@ const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots
   ${({ isDragging }) => isDragging && cssDisabled}
 `;
-const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
-  const { isFirst, isLast } = item;
+const useInnerRefHandlers = ({ datum, datumInternalMeta, isDestinationPanel }) => {
+  const { isFirst, isLast, hydratedId } = datumInternalMeta;
   const { trackFocusItem } = useFocusTracker();
   const focusRegion = useInternalStore((state) => state.focusRegion);
   const focusItem = useInternalStore((state) => state.focusItem);
   const focusItemAction = useInternalStore((state) => state.focusItemAction);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
-  const currItemId = item.original.id;
+  const currItemId = hydratedId;
   const shouldFocus = React2.useMemo(
     () => focusRegion === currRegion && focusItemAction === "parent" && (focusItem === currItemId || isFirst && focusItem === "first" || isLast && focusItem === "last"),
     [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast]
@@ -64,72 +65,80 @@ const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
     (node) => {
       if (shouldFocus) {
         node?.focus();
-        trackFocusItem(item);
+        trackFocusItem({ original: datum, ...datumInternalMeta });
       }
     },
-    [item, shouldFocus, trackFocusItem]
+    [datum, datumInternalMeta, shouldFocus, trackFocusItem]
   );
   return React2.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
 };
 const Item = React2.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 = useMemo(() => {
     if (withDragNDrop)
       return ["5px", "auto", "1fr", "auto"];
     return ["5px", "1fr", "auto"];
   }, [withDragNDrop]);
-  const dndActiveId = useInternalStore((state) => state.lastActiveId);
-  const isActive = useMemo(() => dndActiveId !== "", [dndActiveId]);
-  const selectItem = useSelectionLogic(itemMeta);
+  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);
+  const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);
+  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
+  const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);
+  const isDraggingThisItem = dndDraggingItem?.hydratedId === hydratedId;
+  React2.useEffect(() => {
+    if (isDraggingThisItem && dndDraggingItemMeta?.datumInternalMeta.hydratedId !== hydratedId)
+      setDndDraggingItemMeta(itemMeta);
+  }, [
+    dndDraggingItemMeta?.datumInternalMeta.hydratedId,
+    hydratedId,
+    isDraggingThisItem,
+    itemMeta,
+    setDndDraggingItemMeta
+  ]);
+  const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);
   const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);
+  const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);
   const handleItemKeyDown = React2.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 } = useInnerRefActionHandlers(itemMeta);
   const overId = useInternalStore((state) => state.overId);
   const isDropValid = useInternalStore((state) => state.isDropValid);
   const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);
-  const showDropIndicatorPosition = id === overId && dropIndicatorPosition;
+  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;
+  const sortableRef = useSortableHelpers?.setNodeRef ? useSortableHelpers?.setNodeRef : () => {
+  };
   return /* @__PURE__ */ jsxs(
     ItemWrapper,
     {
-      isDragging: dndActiveId === id,
-      isDndActive: isActive,
+      isDragging: isDraggingThisItem,
+      isDndActive: getIsDragAndDropHappening(),
       cols,
       alignItems: "center",
       onClick: selectItem,
-      ref: mergeRefs(innerRefHandlerParentItem, useSortableHelpers?.setNodeRef),
+      ref: mergeRefs(innerRefHandlerParentItem, sortableRef),
       onKeyDown: handleItemKeyDown,
+      onMouseDown: onShiftMouseDownPreventTextSelection,
       tabIndex: shouldFocus ? 0 : -1,
       role: "checkbox",
       "aria-checked": isSelected,
-      id: `${id}-wrapper`,
+      id: `${hydratedId}-wrapper`,
       children: [
         /* @__PURE__ */ jsx(ItemSelection, { ...itemMeta }),
-        withDragNDrop ? /* @__PURE__ */ jsx(
+        withDragNDrop && useSortableHelpers ? /* @__PURE__ */ jsx(
           DragHandle,
           {
-            id,
+            id: hydratedId,
             useSortableHelpers,
-            isDndActive: !!isActive,
-            isDragging: dndActiveId === id,
-            innerRef: innerRefHandlerDnd
+            isDndActive: getIsDragAndDropHappening(),
+            isDragging: dndDraggingItem?.hydratedId === hydratedId,
+            innerRef: innerRefHandlerDnd,
+            disabled: hasMultipleSelection
           }
         ) : null,
         /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta }),

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

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

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

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button";
+import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { ArrowShortReturn, ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
 import { useActionsHandlers } from "./useActionsHandlers";
 import { useInnerRefHandlers } from "./useInnerRefHandlers";
@@ -11,7 +11,7 @@ import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2De
 const StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
 const StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
 const StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`
-  height: 22px !important;
+  height: 1.692rem !important;
   svg {
     fill: brand-600;
   }
@@ -31,24 +31,25 @@ const StyledArrowShortRightIcon = styled(ArrowShortRight, {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
 })``;
-const actionsCols = ["20px", "20px"];
+const actionsCols = ["1.538rem", "1.538rem"];
 const ItemActions = React2.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 } = useInnerRefHandlers(itemMeta);
-  const { handleClickDrilldown, handleClickSingleMove } = useActionsHandlers(itemMeta);
+  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);
   return /* @__PURE__ */ jsx(StyledItemActions, { cols: actionsCols, gutter: "xxs", pl: "xs", pr: "xxs", alignItems: "center", children: withActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(StyledItemActionWrapper, { children: /* @__PURE__ */ jsx(
       StyledButton,
       {
         buttonType: "icon",
         onClick: handleClickDrilldown,
+        onKeyDown: handleKeyDownSelectionBubbleUp,
         size: BUTTON_SIZES.S,
         innerRef: innerRefHandlerDrilldown,
         tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
-        disabled: preventDrilldown === true,
-        children: /* @__PURE__ */ jsx(StyledDrilldownIcon, { width: "20px", height: "20px" })
+        disabled: internallyDisabledDrilldown || preventDrilldown === true,
+        children: /* @__PURE__ */ jsx(StyledDrilldownIcon, { width: "1.538rem", height: "1.538rem" })
       }
     ) }),
     /* @__PURE__ */ jsx(StyledItemActionWrapper, { children: /* @__PURE__ */ jsx(
@@ -56,11 +57,12 @@ const ItemActions = React2.memo((itemMeta) => {
       {
         buttonType: "icon",
         onClick: handleClickSingleMove,
+        onKeyDown: handleKeyDownSelectionBubbleUp,
         size: BUTTON_SIZES.S,
         innerRef: innerRefHandlerMove,
         tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
-        disabled: preventMove === true,
-        children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, { width: "20px", height: "20px" }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, { width: "20px", height: "20px" })
+        disabled: internallyDisabledMove || preventMove === true,
+        children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, { width: "1.538rem", height: "1.538rem" })
       }
     ) })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/ItemActions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACgDf,mBAUM,KAVN;AAhDR,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY,oBAAoB;AACzC,SAAS,kBAAkB,iBAAiB,mBAAmB;AAE/D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAC7G,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAClH,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,sBAAsB,OAAO,kBAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,QAAQ,MAAM;AAE5B,MAAM,cAAcA,OAAM,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,IAC3F,oBAAoB,QAAQ;AAC9B,QAAM,EAAE,sBAAsB,sBAAsB,IAAI,mBAAmB,QAAQ;AAEnF,SACE,oBAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,iCACE;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,QAC1D,UAAU,qBAAqB;AAAA,QAE/B,8BAAC,uBAAoB,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IAClD,GACF;AAAA,IACA,oBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,QAChD,UAAU,gBAAgB;AAAA,QAEzB,+BACC,oBAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,oBAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IAE1D,GACF;AAAA,KACF,IAGA,iCACE;AAAA,wBAAC,SAAI;AAAA,IACL,oBAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDf,mBAWM,KAXN;AAhDR,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY,oBAAoB;AACzC,SAAS,kBAAkB,iBAAiB,mBAAmB;AAE/D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAC7G,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAClH,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,sBAAsB,OAAO,kBAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAcA,OAAM,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,IAC3F,oBAAoB,QAAQ;AAC9B,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,IAAI,mBAAmB,QAAQ;AAEnH,SACE,oBAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,iCACE;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,QAC1D,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,8BAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,oBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,QAChD,UAAU,0BAA0B,gBAAgB;AAAA,QAEnD,+BACC,oBAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,oBAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF,IAGA,iCACE;AAAA,wBAAC,SAAI;AAAA,IACL,oBAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -2,15 +2,20 @@ import * as React from "react";
 import React2 from "react";
 import { useActionsLogicHandlers } from "./useActionsLogicHandlers";
 const useActionsHandlers = (itemMeta) => {
-  const { handleDrilldown, handleSingleMove } = useActionsLogicHandlers(itemMeta);
+  const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = useActionsLogicHandlers(itemMeta);
   const handleClickDrilldown = React2.useCallback(handleDrilldown, [handleDrilldown]);
   const handleClickSingleMove = React2.useCallback(handleSingleMove, [handleSingleMove]);
+  const handleKeyDownSelectionBubbleUp = React2.useCallback(
+    preventKeyDownSelectionBubbleUp,
+    [preventKeyDownSelectionBubbleUp]
+  );
   return React2.useMemo(
     () => ({
       handleClickDrilldown,
-      handleClickSingleMove
+      handleClickSingleMove,
+      handleKeyDownSelectionBubbleUp
     }),
-    [handleClickDrilldown, handleClickSingleMove]
+    [handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp]
   );
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/useActionsHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,iBAAiB,IAAI,wBAAwB,QAAQ;AAC9E,QAAM,uBAAmDA,OAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoDA,OAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAEhH,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,qBAAqB;AAAA,EAC9C;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,kBAAkB,gCAAgC,IAAI,wBAAwB,QAAQ;AAC/G,QAAM,uBAAmDA,OAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoDA,OAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAChH,QAAM,iCAA+DA,OAAM;AAAA,IACzE;AAAA,IACA,CAAC,+BAA+B;AAAA,EAClC;AACA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,uBAAuB,8BAA8B;AAAA,EAC9E;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/Item/ItemActions/useActionsLogicHandlers.js CHANGED Viewed

@@ -1,62 +1,50 @@
 import * as React from "react";
 import React2 from "react";
 import { usePropsStore } from "../../../config/useStore";
-import { getNewDatasWithItemMoved } from "../../../config/itemMovementHelpers";
+import { useHandleMoveItem } from "../../../config/itemMovementHelpers";
+import { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from "../../../config/useFocusTracker";
 const useActionsLogicHandlers = (itemMeta) => {
-  const { item, isDestinationPanel } = itemMeta;
-  const currData = usePropsStore((state) => isDestinationPanel ? state.destinationData : state.sourceData);
-  const currWithSoftDelete = usePropsStore(
-    (state) => isDestinationPanel ? state.destinationWithSoftDelete : state.sourceWithSoftDelete
-  );
-  const currOnChange = usePropsStore(
-    (state) => isDestinationPanel ? state.onDestinationChange : state.onSourceChange
-  );
-  const currOnRemove = usePropsStore(
-    (state) => isDestinationPanel ? state.onDestinationRemove : state.onSourceRemove
-  );
+  const { datum, isDestinationPanel } = itemMeta;
+  const moveCurrentItem = useHandleMoveItem(itemMeta);
+  const { trackFocusItemReset } = useFocusItemTracker();
+  const { trackFocusActionReset } = useFocusActionTrackers();
+  const { trackFocusRegionPanel } = useFocusTracker();
   const currDrilldown = usePropsStore(
     (state) => isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown
   );
-  const otherData = usePropsStore((state) => isDestinationPanel ? state.sourceData : state.destinationData);
-  const otherPanelOnChange = usePropsStore(
-    (state) => isDestinationPanel ? state.onSourceChange : state.onDestinationChange
-  );
-  const otherPanelOnAdd = usePropsStore((state) => isDestinationPanel ? state.onSourceAdd : state.onDestinationAdd);
   const handleDrilldown = React2.useCallback(
     (event) => {
       event.preventDefault();
       event.stopPropagation();
-      currDrilldown(item.original, { event });
+      currDrilldown(datum, { event });
+      trackFocusRegionPanel(isDestinationPanel);
+      trackFocusItemReset();
+      trackFocusActionReset();
     },
-    [currDrilldown, item]
+    [currDrilldown, datum, isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
   );
   const handleSingleMove = React2.useCallback(
     (event) => {
       event.preventDefault();
       event.stopPropagation();
-      const { newCurrData, newOtherData } = getNewDatasWithItemMoved({
-        item: item.original,
-        currData,
-        currWithSoftDelete,
-        otherData
-      });
-      currOnRemove([item.original], { event });
-      otherPanelOnAdd([item.original], { event });
-      currOnChange(newCurrData, { item: item.original, event });
-      otherPanelOnChange(newOtherData, { item: item.original, event });
+      moveCurrentItem(event);
+      trackFocusRegionPanel(isDestinationPanel);
+      trackFocusItemReset();
+      trackFocusActionReset();
     },
-    [
-      currData,
-      currOnChange,
-      currOnRemove,
-      currWithSoftDelete,
-      item.original,
-      otherData,
-      otherPanelOnAdd,
-      otherPanelOnChange
-    ]
+    [isDestinationPanel, moveCurrentItem, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
+  );
+  const preventKeyDownSelectionBubbleUp = React2.useCallback((event) => {
+    const { key } = event;
+    if (["Spacebar", " ", "Enter"].includes(key)) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, []);
+  return React2.useMemo(
+    () => ({ handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp }),
+    [handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp]
   );
-  return React2.useMemo(() => ({ handleDrilldown, handleSingleMove }), [handleDrilldown, handleSingleMove]);
 };
 export {
   useActionsLogicHandlers

package/dist/esm/parts/Item/ItemActions/useActionsLogicHandlers.js.map CHANGED Viewed

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

package/dist/esm/parts/Item/ItemActions/useInnerRefHandlers.js CHANGED Viewed

@@ -2,12 +2,12 @@ import * as React from "react";
 import React2 from "react";
 import { useInternalStore } from "../../../config/useStore";
 import { REGIONS_FOCUSES, ACTIONS_FOCUSES } from "../../../constants";
-const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
+const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
   const focusRegion = useInternalStore((state) => state.focusRegion);
   const focusItem = useInternalStore((state) => state.focusItem);
   const focusItemAction = useInternalStore((state) => state.focusItemAction);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
-  const currItemId = item.original.id;
+  const currItemId = datumInternalMeta.hydratedId;
   const { shouldFocusDrilldown, shouldFocusMove, shouldFocusDnd } = React2.useMemo(
     () => ({
       shouldFocusDrilldown: focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.DRILLDOWN_BTN,

package/dist/esm/parts/Item/ItemActions/useInnerRefHandlers.js.map CHANGED Viewed

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