@elliemae/ds-shuttle-v2 3.13.0-next.4 → 3.13.1-rc.0

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

@@ -24,18 +24,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Item_exports = {};
 __export(Item_exports, {
-  Item: () => Item,
-  ItemSortable: () => ItemSortable,
-  default: () => Item_default
+  Item: () => Item
 });
 module.exports = __toCommonJS(Item_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
 var import_useStore = require("../../config/useStore");
 var import_useFocusTracker = require("../../config/useFocusTracker");
 var import_ItemSelection = require("./ItemSelection");
@@ -44,40 +40,21 @@ var import_ItemMiddleSection = require("./ItemMiddleSection");
 var import_useSelectionLogic = require("./useSelectionLogic");
 var import_useItemArrowNavigation = require("./useItemArrowNavigation");
 var import_constants = require("../../constants");
-var import_DndHandle = require("../Dnd/DndHandle");
-var import_DropIndicator = require("../Dnd/DropIndicator");
-var import_withConditionalUseSortable = require("../HoC/withConditionalUseSortable");
-var import_useInnerRefHandlers = require("./ItemActions/useInnerRefHandlers");
-const cssDisabled = import_ds_system.css`
-  background-color: ${({ theme }) => theme.colors.neutral["100"]};
-  color: ${({ theme }) => theme.colors.neutral["300"]};
-  .ds-shuttle-v2-item-action-btn-to-source-icon > svg,
-  .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,
-  .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {
-    fill: ${({ theme }) => theme.colors.neutral["300"]};
-  }
-`;
-const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_WRAPPER })`
+const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-wrapper" })`
   min-height: 36px;
-  position: relative;
-  background-color: white;
-  &:hover {
-    background-color: ${({ isDndActive, theme }) => !isDndActive ? theme.colors.brand["200"] : "white"};
+  :hover {
+    background-color: brand-200;
     .ds-shuttle-v2-item-action-btn-to-source-icon > svg,
     .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,
     .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {
       fill: brand-700;
     }
-    ${({ isDragging }) => isDragging && cssDisabled}
   }
-
-  &:focus {
+  :focus {
     outline: 2px solid brand-700;
     outline-offset: -2px;
   }
   border-bottom: 1px solid neutral-100;
-
-  ${({ isDragging }) => isDragging && cssDisabled}
 `;
 const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
   const { isFirst, isLast } = item;
@@ -102,74 +79,44 @@ const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
   );
   return import_react.default.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
 };
+const cols = ["5px", "1fr", "auto"];
 const Item = import_react.default.memo((itemMeta) => {
-  const { item, withDragNDrop, useSortableHelpers } = itemMeta;
+  const { item } = itemMeta;
   const { original, isSelected } = item;
   const { id } = original;
-  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 { onItemContainerKeyDown } = (0, import_useItemArrowNavigation.useItemArrowNavigation)(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);
       }
       onItemContainerKeyDown(event);
     },
-    [isActive, id, onItemContainerKeyDown, selectItem]
+    [onItemContainerKeyDown, selectItem]
   );
   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;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ItemWrapper,
     {
-      isDragging: dndActiveId === id,
-      isDndActive: isActive,
       cols,
       alignItems: "center",
       onClick: selectItem,
-      ref: (0, import_ds_utilities.mergeRefs)(innerRefHandlerParentItem, useSortableHelpers?.setNodeRef),
       onKeyDown: handleItemKeyDown,
+      ref: innerRefHandlerParentItem,
       tabIndex: shouldFocus ? 0 : -1,
       role: "checkbox",
       "aria-checked": isSelected,
-      id: `${id}-wrapper`,
+      id,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSelection.ItemSelection, { ...itemMeta }),
-        withDragNDrop ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_DndHandle.DragHandle,
-          {
-            id,
-            useSortableHelpers,
-            isDndActive: !!isActive,
-            isDragging: dndActiveId === id,
-            innerRef: innerRefHandlerDnd
-          }
-        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemMiddleSection.ItemMiddleSection, { ...itemMeta }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemActions.ItemActions, { ...itemMeta }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropIndicator.DropIndicator, { vertical: false, dropIndicatorPosition: showDropIndicatorPosition, isDropValid })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemActions.ItemActions, { ...itemMeta })
       ]
     }
   );
 });
-const ItemSortable = (0, import_withConditionalUseSortable.withConditionalUseSortable)(Item);
-var Item_default = ItemSortable;
 //# sourceMappingURL=Item.js.map

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

@@ -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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiInB;AAjIJ,mBAA+B;AAC/B,uBAA4B;AAC5B,0BAA0B;AAE1B,qBAAqB;AAErB,oCAAkD;AAClD,sBAAiC;AACjC,6BAAgC;AAChC,2BAA8B;AAC9B,yBAA4B;AAC5B,+BAAkC;AAClC,+BAAkC;AAClC,oCAAuC;AACvC,uBAAgC;AAChC,uBAA2B;AAC3B,2BAA8B;AAC9B,wCAA2C;AAC3C,iCAAiE;AAGjE,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,WAC/C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAInC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAShD,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKvE,CAAC,EAAE,aAAa,MAAM,MAAO,CAAC,cAAc,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM1F,CAAC,EAAE,WAAW,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASpC,CAAC,EAAE,WAAW,MAAM,cAAc;AAAA;AAGtC,MAAM,sBAAsB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACnF,QAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAM,EAAE,eAAe,QAAI,wCAAgB;AAC3C,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,KAAK,SAAS;AAEjC,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MACE,gBAAgB,cAChB,oBAAoB,aACnB,cAAc,cAAe,WAAW,cAAc,WAAa,UAAU,cAAc;AAAA,IAC9F,CAAC,YAAY,YAAY,WAAW,iBAAiB,aAAa,SAAS,MAAM;AAAA,EACnF;AACA,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,CAAC,SAAgC;AAC/B,UAAI,aAAa;AACf,cAAM,MAAM;AACZ,uBAAe,IAAI;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,aAAa,cAAc;AAAA,EACpC;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,aAAa,0BAA0B,IAAI,CAAC,aAAa,yBAAyB,CAAC;AACnH;AAEO,MAAM,OAAO,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAClE,QAAM,EAAE,MAAM,eAAe,mBAAmB,IAAI;AACpD,QAAM,EAAE,UAAU,WAAW,IAAI;AACjC,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI;AAAe,aAAO,CAAC,OAAO,QAAQ,OAAO,MAAM;AACvD,WAAO,CAAC,OAAO,OAAO,MAAM;AAAA,EAC9B,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAClE,QAAM,eAAW,sBAAQ,MAAM,gBAAgB,IAAI,CAAC,WAAW,CAAC;AAEhE,QAAM,iBAAa,4CAAkB,QAAQ;AAC7C,QAAM,EAAE,uBAAuB,QAAI,sDAAuB,QAAQ;AAClE,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,UAAU;AACT,YAAM,EAAE,IAAI,IAAI;AAGhB,UAAI,CAAC,YAAY,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC5C,YAAI,YAAa,MAAM,OAAuB,OAAO,GAAG,kBAAkB;AACxE,gBAAM,eAAe;AACrB;AAAA,QACF;AACA,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,mBAAW,KAAK;AAAA,MAClB;AACA,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU,IAAI,wBAAwB,UAAU;AAAA,EACnD;AACA,QAAM,EAAE,aAAa,0BAA0B,IAAI,oBAAoB,QAAQ;AAC/E,QAAM,EAAE,mBAAmB,QAAI,2BAAAC,qBAA0B,QAAQ;AACjE,QAAM,aAAS,kCAAiB,CAAC,UAAU,MAAM,MAAM;AACvD,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,4BAAwB,kCAAiB,CAAC,UAAU,MAAM,qBAAqB;AAErF,QAAM,4BAA4B,OAAO,UAAU;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,gBAAgB;AAAA,MAC5B,aAAa;AAAA,MACb;AAAA,MACA,YAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAK,+BAAU,2BAA2B,oBAAoB,UAAU;AAAA,MACxE,WAAW;AAAA,MACX,UAAU,cAAc,IAAI;AAAA,MAC5B,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,IAAI,GAAG;AAAA,MAEP;AAAA,oDAAC,sCAAe,GAAG,UAAU;AAAA,QAC5B,gBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,aAAa,CAAC,CAAC;AAAA,YACf,YAAY,gBAAgB;AAAA,YAC5B,UAAU;AAAA;AAAA,QACZ,IACE;AAAA,QACJ,4CAAC,8CAAmB,GAAG,UAAU;AAAA,QACjC,4CAAC,kCAAa,GAAG,UAAU;AAAA,QAC3B,4CAAC,sCAAc,UAAU,OAAO,uBAAuB,2BAA2B,aAA0B;AAAA;AAAA;AAAA,EAC9G;AAEJ,CAAC;AAED,MAAM,mBAAe,8DAA2B,IAAI;AAEpD,IAAO,eAAQ;",
-  "names": ["React", "useInnerRefActionHandlers"]
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { 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';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst ItemWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-wrapper' })`\n  min-height: 36px;\n  :hover {\n    background-color: brand-200;\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  }\n  :focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\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) => {\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\nconst cols = ['5px', '1fr', 'auto'];\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item } = itemMeta;\n  const { original, isSelected } = item;\n  const { id } = original;\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      // Spacebar AND ' ' are cross-browser compatibility thing\n      if (['Spacebar', ' ', 'Enter'].includes(key)) {\n        event.preventDefault();\n        event.stopPropagation();\n        selectItem(event);\n      }\n      onItemContainerKeyDown(event);\n    },\n    [onItemContainerKeyDown, selectItem],\n  );\n  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n\n  return (\n    <ItemWrapper\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      onKeyDown={handleItemKeyDown}\n      ref={innerRefHandlerParentItem}\n      tabIndex={shouldFocus ? 0 : -1}\n      role=\"checkbox\"\n      aria-checked={isSelected}\n      id={id}\n    >\n      <ItemSelection {...itemMeta} />\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n    </ItemWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmFnB;AAnFJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,sBAAiC;AACjC,6BAAgC;AAChC,2BAA8B;AAC9B,yBAA4B;AAC5B,+BAAkC;AAClC,+BAAkC;AAClC,oCAAuC;AACvC,uBAAgC;AAGhC,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBhF,MAAM,sBAAsB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACnF,QAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAM,EAAE,eAAe,QAAI,wCAAgB;AAC3C,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,KAAK,SAAS;AAEjC,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MACE,gBAAgB,cAChB,oBAAoB,aACnB,cAAc,cAAe,WAAW,cAAc,WAAa,UAAU,cAAc;AAAA,IAC9F,CAAC,YAAY,YAAY,WAAW,iBAAiB,aAAa,SAAS,MAAM;AAAA,EACnF;AACA,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,CAAC,SAAyB;AACxB,UAAI,aAAa;AACf,cAAM,MAAM;AACZ,uBAAe,IAAI;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,aAAa,cAAc;AAAA,EACpC;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,aAAa,0BAA0B,IAAI,CAAC,aAAa,yBAAyB,CAAC;AACnH;AAEA,MAAM,OAAO,CAAC,OAAO,OAAO,MAAM;AAC3B,MAAM,OAAO,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAClE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,UAAU,WAAW,IAAI;AACjC,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,iBAAa,4CAAkB,QAAQ;AAC7C,QAAM,EAAE,uBAAuB,QAAI,sDAAuB,QAAQ;AAClE,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,UAAU;AACT,YAAM,EAAE,IAAI,IAAI;AAEhB,UAAI,CAAC,YAAY,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC5C,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,mBAAW,KAAK;AAAA,MAClB;AACA,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA,CAAC,wBAAwB,UAAU;AAAA,EACrC;AACA,QAAM,EAAE,aAAa,0BAA0B,IAAI,oBAAoB,QAAQ;AAE/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,YAAW;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,MACL,UAAU,cAAc,IAAI;AAAA,MAC5B,MAAK;AAAA,MACL,gBAAc;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,sCAAe,GAAG,UAAU;AAAA,QAC7B,4CAAC,8CAAmB,GAAG,UAAU;AAAA,QACjC,4CAAC,kCAAa,GAAG,UAAU;AAAA;AAAA;AAAA,EAC7B;AAEJ,CAAC;",
+  "names": ["React"]
 }

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

@@ -36,10 +36,9 @@ var import_ds_button = require("@elliemae/ds-button");
 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 })`
+const StyledItemActions = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-actions-wrapper" })``;
+const StyledItemActionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-action-wrapper" })``;
+const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: "ds-shuttle-v2", slot: "item-action-btn" })`
   height: 22px !important;
   svg {
     fill: brand-600;
@@ -49,16 +48,16 @@ const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
   }
 `;
 const StyledDrilldownIcon = (0, import_ds_system.styled)(import_ds_icons.ArrowShortReturn, {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-drilldown-icon"
 })``;
 const StyledCloseMediumIcon = (0, import_ds_system.styled)(import_ds_icons.CloseMedium, {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-to-source-icon"
 })``;
 const StyledArrowShortRightIcon = (0, import_ds_system.styled)(import_ds_icons.ArrowShortRight, {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-to-destination-icon"
 })``;
 const actionsCols = ["20px", "20px"];
 const ItemActions = import_react.default.memo((itemMeta) => {

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

@@ -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';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\n\nconst StyledItemActions = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-actions-wrapper' })``;\nconst StyledItemActionWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-action-wrapper' })``;\nconst StyledButton = styled(DSButtonV2, { name: 'ds-shuttle-v2', slot: '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: 'ds-shuttle-v2',\n  slot: 'item-action-btn-drilldown-icon',\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-source-icon',\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: 'ds-shuttle-v2',\n  slot: '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;AD+Cf;AA/CR,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AAEpC,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAC9F,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,sBAAsB,CAAC;AACnG,MAAM,mBAAe,yBAAO,6BAAY,EAAE,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1F,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AACR,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;",
   "names": ["React"]
 }

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

@@ -40,9 +40,6 @@ const useActionsLogicHandlers = (itemMeta) => {
   const currOnChange = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onDestinationChange : state.onSourceChange
   );
-  const currOnRemove = (0, import_useStore.usePropsStore)(
-    (state) => isDestinationPanel ? state.onDestinationRemove : state.onSourceRemove
-  );
   const currDrilldown = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown
   );
@@ -50,7 +47,6 @@ const useActionsLogicHandlers = (itemMeta) => {
   const otherPanelOnChange = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onSourceChange : state.onDestinationChange
   );
-  const otherPanelOnAdd = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.onSourceAdd : state.onDestinationAdd);
   const handleDrilldown = import_react.default.useCallback(
     (event) => {
       event.preventDefault();
@@ -69,21 +65,10 @@ const useActionsLogicHandlers = (itemMeta) => {
         currWithSoftDelete,
         otherData
       });
-      currOnRemove([item.original], { event });
-      otherPanelOnAdd([item.original], { event });
       currOnChange(newCurrData, { item: item.original, event });
       otherPanelOnChange(newOtherData, { item: item.original, event });
     },
-    [
-      currData,
-      currOnChange,
-      currOnRemove,
-      currWithSoftDelete,
-      item.original,
-      otherData,
-      otherPanelOnAdd,
-      otherPanelOnChange
-    ]
+    [currData, currOnChange, currWithSoftDelete, item, otherData, otherPanelOnChange]
   );
   return import_react.default.useMemo(() => ({ handleDrilldown, handleSingleMove }), [handleDrilldown, handleSingleMove]);
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/useActionsLogicHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { usePropsStore } from '../../../config/useStore';\nimport { getNewDatasWithItemMoved } from '../../../config/itemMovementHelpers';\n\nexport const useActionsLogicHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item, isDestinationPanel } = itemMeta;\n\n  const currData = usePropsStore((state) => (isDestinationPanel ? state.destinationData : state.sourceData));\n  const currWithSoftDelete = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithSoftDelete : state.sourceWithSoftDelete,\n  );\n  const currOnChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationChange : state.onSourceChange,\n  );\n  const currOnRemove = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationRemove : state.onSourceRemove,\n  );\n\n  const currDrilldown = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown,\n  );\n\n  const otherData = usePropsStore((state) => (isDestinationPanel ? state.sourceData : state.destinationData));\n  const otherPanelOnChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onSourceChange : state.onDestinationChange,\n  );\n  const otherPanelOnAdd = usePropsStore((state) => (isDestinationPanel ? state.onSourceAdd : state.onDestinationAdd));\n\n  const handleDrilldown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      currDrilldown(item.original, { event });\n    },\n    [currDrilldown, item],\n  );\n\n  const handleSingleMove = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      const { newCurrData, newOtherData } = getNewDatasWithItemMoved({\n        item: item.original,\n        currData,\n        currWithSoftDelete,\n        otherData,\n      });\n      currOnRemove([item.original], { event });\n      otherPanelOnAdd([item.original], { event });\n\n      currOnChange(newCurrData, { item: item.original, event });\n      otherPanelOnChange(newOtherData, { item: item.original, event });\n    },\n    [\n      currData,\n      currOnChange,\n      currOnRemove,\n      currWithSoftDelete,\n      item.original,\n      otherData,\n      otherPanelOnAdd,\n      otherPanelOnChange,\n    ],\n  );\n  return React.useMemo(() => ({ handleDrilldown, handleSingleMove }), [handleDrilldown, handleSingleMove]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAA8B;AAC9B,iCAAyC;AAElC,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,MAAM,mBAAmB,IAAI;AAErC,QAAM,eAAW,+BAAc,CAAC,UAAW,qBAAqB,MAAM,kBAAkB,MAAM,UAAW;AACzG,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,sBAAsB,MAAM;AAAA,EACzD;AACA,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,sBAAsB,MAAM;AAAA,EACzD;AAEA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,gBAAY,+BAAc,CAAC,UAAW,qBAAqB,MAAM,aAAa,MAAM,eAAgB;AAC1G,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,iBAAiB,MAAM;AAAA,EACpD;AACA,QAAM,sBAAkB,+BAAc,CAAC,UAAW,qBAAqB,MAAM,cAAc,MAAM,gBAAiB;AAElH,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,oBAAc,KAAK,UAAU,EAAE,MAAM,CAAC;AAAA,IACxC;AAAA,IACA,CAAC,eAAe,IAAI;AAAA,EACtB;AAEA,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,YAAM,EAAE,aAAa,aAAa,QAAI,qDAAyB;AAAA,QAC7D,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AACD,mBAAa,CAAC,KAAK,QAAQ,GAAG,EAAE,MAAM,CAAC;AACvC,sBAAgB,CAAC,KAAK,QAAQ,GAAG,EAAE,MAAM,CAAC;AAE1C,mBAAa,aAAa,EAAE,MAAM,KAAK,UAAU,MAAM,CAAC;AACxD,yBAAmB,cAAc,EAAE,MAAM,KAAK,UAAU,MAAM,CAAC;AAAA,IACjE;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,iBAAiB,iBAAiB,IAAI,CAAC,iBAAiB,gBAAgB,CAAC;AACzG;",
+  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { usePropsStore } from '../../../config/useStore';\nimport { 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 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\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\n      currOnChange(newCurrData, { item: item.original, event });\n      otherPanelOnChange(newOtherData, { item: item.original, event });\n    },\n    [currData, currOnChange, currWithSoftDelete, item, otherData, otherPanelOnChange],\n  );\n  return React.useMemo(() => ({ handleDrilldown, handleSingleMove }), [handleDrilldown, handleSingleMove]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAA8B;AAC9B,iCAAyC;AAElC,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,MAAM,mBAAmB,IAAI;AAErC,QAAM,eAAW,+BAAc,CAAC,UAAW,qBAAqB,MAAM,kBAAkB,MAAM,UAAW;AACzG,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,sBAAsB,MAAM;AAAA,EACzD;AACA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,gBAAY,+BAAc,CAAC,UAAW,qBAAqB,MAAM,aAAa,MAAM,eAAgB;AAC1G,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,iBAAiB,MAAM;AAAA,EACpD;AAEA,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,oBAAc,KAAK,UAAU,EAAE,MAAM,CAAC;AAAA,IACxC;AAAA,IACA,CAAC,eAAe,IAAI;AAAA,EACtB;AAEA,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,YAAM,EAAE,aAAa,aAAa,QAAI,qDAAyB;AAAA,QAC7D,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,mBAAa,aAAa,EAAE,MAAM,KAAK,UAAU,MAAM,CAAC;AACxD,yBAAmB,cAAc,EAAE,MAAM,KAAK,UAAU,MAAM,CAAC;AAAA,IACjE;AAAA,IACA,CAAC,UAAU,cAAc,oBAAoB,MAAM,WAAW,kBAAkB;AAAA,EAClF;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,iBAAiB,iBAAiB,IAAI,CAAC,iBAAiB,gBAAgB,CAAC;AACzG;",
   "names": ["React"]
 }

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

@@ -37,11 +37,10 @@ const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
   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 { shouldFocusDrilldown, shouldFocusMove, shouldFocusDnd } = import_react.default.useMemo(
+  const { shouldFocusDrilldown, shouldFocusMove } = import_react.default.useMemo(
     () => ({
       shouldFocusDrilldown: focusItem === currItemId && focusRegion === currRegion && focusItemAction === import_constants.ACTIONS_FOCUSES.DRILLDOWN_BTN,
-      shouldFocusMove: focusItem === currItemId && focusRegion === currRegion && focusItemAction === import_constants.ACTIONS_FOCUSES.MOVE_BTN,
-      shouldFocusDnd: focusItem === currItemId && focusRegion === currRegion && focusItemAction === import_constants.ACTIONS_FOCUSES.DRAG_N_DROP
+      shouldFocusMove: focusItem === currItemId && focusRegion === currRegion && focusItemAction === import_constants.ACTIONS_FOCUSES.MOVE_BTN
     }),
     [currItemId, currRegion, focusItem, focusItemAction, focusRegion]
   );
@@ -59,22 +58,9 @@ const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
     },
     [shouldFocusMove]
   );
-  const innerRefHandlerDnd = import_react.default.useCallback(
-    (node) => {
-      if (shouldFocusDnd)
-        node?.focus();
-    },
-    [shouldFocusDnd]
-  );
   return import_react.default.useMemo(
-    () => ({
-      shouldFocusDrilldown,
-      shouldFocusMove,
-      innerRefHandlerDnd,
-      innerRefHandlerDrilldown,
-      innerRefHandlerMove
-    }),
-    [innerRefHandlerDrilldown, innerRefHandlerDnd, innerRefHandlerMove, shouldFocusDrilldown, shouldFocusMove]
+    () => ({ shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove }),
+    [innerRefHandlerDrilldown, innerRefHandlerMove, shouldFocusDrilldown, shouldFocusMove]
   );
 };
 //# sourceMappingURL=useInnerRefHandlers.js.map

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

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

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

@@ -33,14 +33,13 @@ var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_typography = require("@elliemae/ds-typography");
-var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
-const IconWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ICON_WRAPPER })`
+const IconWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-icon-wrapper" })`
   min-height: 1rem;
 `;
-const LabelWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`
+const LabelWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-label-wrapper" })`
   min-height: 1rem;
 `;
-const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER })`
+const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-midsection-wrapper" })`
   min-height: 1rem;
   ${(props) => {
   if (props.$softDeleted)

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

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

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

@@ -32,8 +32,7 @@ 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_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
-const StyledItemSelection = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_SELECTION })`
+const StyledItemSelection = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-selection" })`
   width: 5px;
   height: 100%;
   box-sizing: border-box;

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

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

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

@@ -30,20 +30,14 @@ module.exports = __toCommonJS(useItemArrowNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useFocusTracker = require("../../config/useFocusTracker");
-var import_useStore = require("../../config/useStore");
 const useItemArrowNavigation = (itemMeta) => {
   const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = (0, import_useFocusTracker.useFocusItemTracker)();
   const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
   const { item } = itemMeta;
   const { isFirst, isLast } = item;
-  const isActive = (0, import_useStore.useInternalStore)((state) => state.lastActiveId);
   const onItemContainerKeyDown = import_react.default.useCallback(
     (e) => {
       const { key } = e;
-      if (isActive) {
-        e.preventDefault();
-        return;
-      }
       if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key))
         e.preventDefault();
       if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key))
@@ -70,7 +64,6 @@ const useItemArrowNavigation = (itemMeta) => {
       }
     },
     [
-      isActive,
       mutableFocusItem,
       isFirst,
       isLast,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/useItemArrowNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { useFocusItemTracker, useFocusActionTrackers } from '../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore } from '../../config/useStore';\n\nexport const useItemArrowNavigation = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = useFocusItemTracker();\n  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = useFocusActionTrackers();\n  const { item } = itemMeta;\n  const { isFirst, isLast } = item;\n\n  const isActive = useInternalStore((state) => state.lastActiveId);\n  const onItemContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      if (isActive) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      if (key === 'ArrowLeft') {\n        if ((mutableFocusItem.current === 'first' && isFirst) || (mutableFocusItem.current === 'last' && isLast)) {\n          trackFocusItem(item);\n        }\n        trackFocusPrevAction(itemMeta);\n      }\n      if (key === 'ArrowRight') {\n        if ((mutableFocusItem.current === 'first' && isFirst) || (mutableFocusItem.current === 'last' && isLast)) {\n          trackFocusItem(item);\n        }\n        trackFocusNextAction(itemMeta);\n      }\n      if (key === 'ArrowUp') {\n        trackFocusPrevItem(itemMeta);\n        trackFocusActionParent();\n      }\n      if (key === 'ArrowDown') {\n        trackFocusNextItem(itemMeta);\n        trackFocusActionParent();\n      }\n    },\n    [\n      isActive,\n      mutableFocusItem,\n      isFirst,\n      isLast,\n      trackFocusPrevAction,\n      itemMeta,\n      trackFocusItem,\n      item,\n      trackFocusNextAction,\n      trackFocusPrevItem,\n      trackFocusActionParent,\n      trackFocusNextItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,6BAA4D;AAE5D,sBAAiC;AAE1B,MAAM,yBAAyB,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,oBAAoB,oBAAoB,eAAe,QAAI,4CAAoB;AACzG,QAAM,EAAE,sBAAsB,sBAAsB,uBAAuB,QAAI,+CAAuB;AACtG,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,OAAO,IAAI;AAE5B,QAAM,eAAW,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAC/D,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AACxF,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzF,UAAI,QAAQ,aAAa;AACvB,YAAK,iBAAiB,YAAY,WAAW,WAAa,iBAAiB,YAAY,UAAU,QAAS;AACxG,yBAAe,IAAI;AAAA,QACrB;AACA,6BAAqB,QAAQ;AAAA,MAC/B;AACA,UAAI,QAAQ,cAAc;AACxB,YAAK,iBAAiB,YAAY,WAAW,WAAa,iBAAiB,YAAY,UAAU,QAAS;AACxG,yBAAe,IAAI;AAAA,QACrB;AACA,6BAAqB,QAAQ;AAAA,MAC/B;AACA,UAAI,QAAQ,WAAW;AACrB,2BAAmB,QAAQ;AAC3B,+BAAuB;AAAA,MACzB;AACA,UAAI,QAAQ,aAAa;AACvB,2BAAmB,QAAQ;AAC3B,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { useFocusItemTracker, useFocusActionTrackers } from '../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\nexport const useItemArrowNavigation = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = useFocusItemTracker();\n  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = useFocusActionTrackers();\n  const { item } = itemMeta;\n  const { isFirst, isLast } = item;\n\n  const onItemContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      if (key === 'ArrowLeft') {\n        if ((mutableFocusItem.current === 'first' && isFirst) || (mutableFocusItem.current === 'last' && isLast)) {\n          trackFocusItem(item);\n        }\n        trackFocusPrevAction(itemMeta);\n      }\n      if (key === 'ArrowRight') {\n        if ((mutableFocusItem.current === 'first' && isFirst) || (mutableFocusItem.current === 'last' && isLast)) {\n          trackFocusItem(item);\n        }\n        trackFocusNextAction(itemMeta);\n      }\n      if (key === 'ArrowUp') {\n        trackFocusPrevItem(itemMeta);\n        trackFocusActionParent();\n      }\n      if (key === 'ArrowDown') {\n        trackFocusNextItem(itemMeta);\n        trackFocusActionParent();\n      }\n    },\n    [\n      mutableFocusItem,\n      isFirst,\n      isLast,\n      trackFocusPrevAction,\n      itemMeta,\n      trackFocusItem,\n      item,\n      trackFocusNextAction,\n      trackFocusPrevItem,\n      trackFocusActionParent,\n      trackFocusNextItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,6BAA4D;AAGrD,MAAM,yBAAyB,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,oBAAoB,oBAAoB,eAAe,QAAI,4CAAoB;AACzG,QAAM,EAAE,sBAAsB,sBAAsB,uBAAuB,QAAI,+CAAuB;AACtG,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,OAAO,IAAI;AAE5B,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAGhB,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AACxF,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzF,UAAI,QAAQ,aAAa;AACvB,YAAK,iBAAiB,YAAY,WAAW,WAAa,iBAAiB,YAAY,UAAU,QAAS;AACxG,yBAAe,IAAI;AAAA,QACrB;AACA,6BAAqB,QAAQ;AAAA,MAC/B;AACA,UAAI,QAAQ,cAAc;AACxB,YAAK,iBAAiB,YAAY,WAAW,WAAa,iBAAiB,YAAY,UAAU,QAAS;AACxG,yBAAe,IAAI;AAAA,QACrB;AACA,6BAAqB,QAAQ;AAAA,MAC/B;AACA,UAAI,QAAQ,WAAW;AACrB,2BAAmB,QAAQ;AAC3B,+BAAuB;AAAA,MACzB;AACA,UAAI,QAAQ,aAAa;AACvB,2BAAmB,QAAQ;AAC3B,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
   "names": ["React"]
 }

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

@@ -34,7 +34,6 @@ var import_useFocusTracker = require("../../config/useFocusTracker");
 const useSelectionLogic = ({ item, isDestinationPanel }) => {
   const { trackFocusItem } = (0, import_useFocusTracker.useFocusItemTracker)();
   const { trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
-  const { trackFocusRegionPanelItem } = (0, import_useFocusTracker.useFocusTracker)();
   const destinationSelectionArray = (0, import_useStore.useInternalStore)((store) => store.destinationSelectionArray);
   const sourceSelectionArray = (0, import_useStore.useInternalStore)((store) => store.sourceSelectionArray);
   const panelSelectedItemsArray = isDestinationPanel ? destinationSelectionArray : sourceSelectionArray;
@@ -61,20 +60,10 @@ const useSelectionLogic = ({ item, isDestinationPanel }) => {
           delete newSelection[id];
         onSelectionChange(newSelection, { event, item: original });
       }
-      trackFocusRegionPanelItem(isDestinationPanel);
       trackFocusItem(item);
       trackFocusActionParent();
     },
-    [
-      isDestinationPanel,
-      item,
-      onSelectionChange,
-      panelSelectedItems,
-      panelSelectedItemsArray,
-      trackFocusActionParent,
-      trackFocusItem,
-      trackFocusRegionPanelItem
-    ]
+    [item, onSelectionChange, panelSelectedItems, panelSelectedItemsArray, trackFocusActionParent, trackFocusItem]
   );
   return selectItem;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/useSelectionLogic.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../config/useFocusTracker';\nexport const useSelectionLogic = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusTracker();\n\n  const destinationSelectionArray = useInternalStore((store) => store.destinationSelectionArray);\n  const sourceSelectionArray = useInternalStore((store) => store.sourceSelectionArray);\n\n  const panelSelectedItemsArray = isDestinationPanel ? destinationSelectionArray : sourceSelectionArray;\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const panelSelectedItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems,\n  );\n  const selectItem = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n      const { selectionPrevented, original } = item;\n      const { id } = original;\n      if (!selectionPrevented) {\n        const newSelection = { ...panelSelectedItems };\n        let isAddition = true;\n        panelSelectedItemsArray.forEach((selItem) => {\n          if (selItem === id) isAddition = false;\n        });\n        if (isAddition) newSelection[id] = true;\n        else delete newSelection[id];\n        onSelectionChange(newSelection, { event, item: original });\n      }\n      // focus tracking logic\n      trackFocusRegionPanelItem(isDestinationPanel);\n      trackFocusItem(item);\n      trackFocusActionParent();\n    },\n    [\n      isDestinationPanel,\n      item,\n      onSelectionChange,\n      panelSelectedItems,\n      panelSelectedItemsArray,\n      trackFocusActionParent,\n      trackFocusItem,\n      trackFocusRegionPanelItem,\n    ],\n  );\n\n  return selectItem;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAgD;AAEhD,6BAA6E;AACtE,MAAM,oBAAoB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACxF,QAAM,EAAE,eAAe,QAAI,4CAAoB;AAC/C,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,wCAAgB;AAEtD,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,2BAAuB,kCAAiB,CAAC,UAAU,MAAM,oBAAoB;AAEnF,QAAM,0BAA0B,qBAAqB,4BAA4B;AACjF,QAAM,wBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,aAAAA,QAAM;AAAA,IACvB,CAAC,UAAsG;AACrG,YAAM,EAAE,oBAAoB,SAAS,IAAI;AACzC,YAAM,EAAE,GAAG,IAAI;AACf,UAAI,CAAC,oBAAoB;AACvB,cAAM,eAAe,EAAE,GAAG,mBAAmB;AAC7C,YAAI,aAAa;AACjB,gCAAwB,QAAQ,CAAC,YAAY;AAC3C,cAAI,YAAY;AAAI,yBAAa;AAAA,QACnC,CAAC;AACD,YAAI;AAAY,uBAAa,MAAM;AAAA;AAC9B,iBAAO,aAAa;AACzB,0BAAkB,cAAc,EAAE,OAAO,MAAM,SAAS,CAAC;AAAA,MAC3D;AAEA,gCAA0B,kBAAkB;AAC5C,qBAAe,IAAI;AACnB,6BAAuB;AAAA,IACzB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import React from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useFocusItemTracker, useFocusActionTrackers } from '../../config/useFocusTracker';\n\nexport const useSelectionLogic = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const destinationSelectionArray = useInternalStore((store) => store.destinationSelectionArray);\n  const sourceSelectionArray = useInternalStore((store) => store.sourceSelectionArray);\n\n  const panelSelectedItemsArray = isDestinationPanel ? destinationSelectionArray : sourceSelectionArray;\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const panelSelectedItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems,\n  );\n  const selectItem = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n      const { selectionPrevented, original } = item;\n      const { id } = original;\n      if (!selectionPrevented) {\n        const newSelection = { ...panelSelectedItems };\n        let isAddition = true;\n        panelSelectedItemsArray.forEach((selItem) => {\n          if (selItem === id) isAddition = false;\n        });\n        if (isAddition) newSelection[id] = true;\n        else delete newSelection[id];\n        onSelectionChange(newSelection, { event, item: original });\n      }\n      // focus tracking logic\n      trackFocusItem(item);\n      trackFocusActionParent();\n    },\n    [item, onSelectionChange, panelSelectedItems, panelSelectedItemsArray, trackFocusActionParent, trackFocusItem],\n  );\n\n  return selectItem;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAgD;AAEhD,6BAA4D;AAErD,MAAM,oBAAoB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACxF,QAAM,EAAE,eAAe,QAAI,4CAAoB;AAC/C,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,2BAAuB,kCAAiB,CAAC,UAAU,MAAM,oBAAoB;AAEnF,QAAM,0BAA0B,qBAAqB,4BAA4B;AACjF,QAAM,wBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,aAAAA,QAAM;AAAA,IACvB,CAAC,UAAsG;AACrG,YAAM,EAAE,oBAAoB,SAAS,IAAI;AACzC,YAAM,EAAE,GAAG,IAAI;AACf,UAAI,CAAC,oBAAoB;AACvB,cAAM,eAAe,EAAE,GAAG,mBAAmB;AAC7C,YAAI,aAAa;AACjB,gCAAwB,QAAQ,CAAC,YAAY;AAC3C,cAAI,YAAY;AAAI,yBAAa;AAAA,QACnC,CAAC;AACD,YAAI;AAAY,uBAAa,MAAM;AAAA;AAC9B,iBAAO,aAAa;AACzB,0BAAkB,cAAc,EAAE,OAAO,MAAM,SAAS,CAAC;AAAA,MAC3D;AAEA,qBAAe,IAAI;AACnB,6BAAuB;AAAA,IACzB;AAAA,IACA,CAAC,MAAM,mBAAmB,oBAAoB,yBAAyB,wBAAwB,cAAc;AAAA,EAC/G;AAEA,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/cjs/parts/MainContent.js

@@ -34,9 +34,8 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_PanelWrapper = require("./PanelWrapper");
-var import_DSShuttleV2Definitions = require("../config/DSShuttleV2Definitions");
 var import_useFocusTracker = require("../config/useFocusTracker");
-const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.WRAPPER })`
+const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "wrapper" })`
   min-width: 648px;
   min-height: 296px;
 `;