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

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

@@ -1,71 +1,125 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
+import { useOnSpecificFocus } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { useInternalStore, usePropsStore } from "../../../config/useStore";
-import { ItemSortable } from "../../Item/Item";
-import { withConditionalDnDRowContext } from "../../HoC/withConditionalDnDRowContext";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
-const StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`
+import { useFocusTracker } from "../../../config/useFocusTracker";
+import { REGIONS_FOCUSES } from "../../../constants";
+import { Item } from "../../Item/Item";
+import { MultipleSelectionAction } from "./MultipleSelectionAction";
+const StyledItemsWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "items-wrapper" })`
   position: relative;
-
-  // .ds-shuttle-v2-move-multiple-wrapper {
-  //   top: 2px;
-  //   right: 2px;
-  //   height: calc(100% - 4px);
-  //   width: calc(65px - 2px);
-  // }
+  :focus,
+  :focus-visible {
+    outline: 2px solid brand-700;
+    outline-offset: -2px;
+    // .ds-shuttle-v2-move-multiple-wrapper {
+    //   top: 2px;
+    //   right: 2px;
+    //   height: calc(100% - 4px);
+    //   width: calc(65px - 2px);
+    // }
+  }
 `;
+const useInnerRefHandlers = ({ 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 : REGIONS_FOCUSES.SOURCE_PANEL;
+  const shouldFocus = React2.useMemo(
+    () => focusRegion === currRegion && focusItem === "" && focusItemAction === "",
+    [currRegion, focusItem, focusItemAction, focusRegion]
+  );
+  const innerRefHandlerParentItem = React2.useCallback(
+    (node) => {
+      if (shouldFocus) {
+        node?.focus();
+      }
+    },
+    [shouldFocus]
+  );
+  return React2.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
+};
 const ItemListWrapper = React2.memo((panelMetaInfo) => {
   const { isDestinationPanel } = panelMetaInfo;
   const itemList = useInternalStore(
     (state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
   );
-  const totalSize = useInternalStore(
-    (state) => isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize
-  );
-  const virtualItems = useInternalStore(
-    (state) => isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems
-  );
-  const withDragNDrop = usePropsStore(
-    (state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
+  const withLoadMore = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
   );
+  const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);
+  const sourceHasMultipleSelectedItems = useInternalStore((store) => store.sourceHasMultipleSelectedItems);
+  const hasMultipleSelection = isDestinationPanel ? destinationHasMultipleSelectedItems : sourceHasMultipleSelectedItems;
   const rows = React2.useMemo(
     () => [`repeat(${itemList?.length ? itemList?.length : "0"},min-content)`],
     [itemList.length]
   );
-  return /* @__PURE__ */ jsx(StyledItemsWrapper, { alignItems: "flex-start", rows, style: { height: `${totalSize}px` }, children: virtualItems?.map((virtualRow) => {
-    const item = itemList[virtualRow.index];
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: `${virtualRow.size}px`,
-          transform: `translateY(${virtualRow.start}px)`
-        },
-        children: /* @__PURE__ */ jsx(
-          ItemSortable,
-          {
-            item,
-            isDestinationPanel,
-            withDragNDrop
-          },
-          item.original.id
-        )
-      },
-      virtualRow.index
-    );
-  }) });
+  const {
+    trackFocusRegionPanel,
+    trackFocusItemFirst,
+    trackFocusItemLast,
+    trackFocusActionParent,
+    trackFocusRegionPanelItem,
+    trackFocusLoadMoreBtn
+  } = useFocusTracker();
+  const config = React2.useMemo(
+    () => ({
+      onFocus: () => {
+        trackFocusRegionPanel(isDestinationPanel);
+      }
+    }),
+    [trackFocusRegionPanel, isDestinationPanel]
+  );
+  const onPanelFocus = useOnSpecificFocus(config);
+  const onPanelKeyDown = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      if (["Home", "End", "ArrowUp", "ArrowDown"].includes(key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        trackFocusRegionPanelItem(isDestinationPanel);
+        trackFocusActionParent();
+        if (key === "ArrowDown" || key === "Home")
+          trackFocusItemFirst();
+        if (key === "ArrowUp" || key === "End") {
+          if (withLoadMore)
+            trackFocusLoadMoreBtn();
+          else
+            trackFocusItemLast();
+        }
+      }
+    },
+    [
+      isDestinationPanel,
+      trackFocusActionParent,
+      trackFocusItemFirst,
+      trackFocusItemLast,
+      trackFocusLoadMoreBtn,
+      trackFocusRegionPanelItem,
+      withLoadMore
+    ]
+  );
+  const { innerRefHandlerParentItem } = useInnerRefHandlers(panelMetaInfo);
+  return /* @__PURE__ */ jsxs(
+    StyledItemsWrapper,
+    {
+      alignItems: "flex-start",
+      rows,
+      tabIndex: 0,
+      ref: innerRefHandlerParentItem,
+      onFocus: onPanelFocus,
+      onKeyDown: onPanelKeyDown,
+      children: [
+        itemList.map((item) => /* @__PURE__ */ jsx(Item, { item, isDestinationPanel }, item.original.id)),
+        hasMultipleSelection ? /* @__PURE__ */ jsx(MultipleSelectionAction, { isDestinationPanel }) : null
+      ]
+    }
+  );
 });
-const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);
-var ItemListWrapper_default = ItemListWrapperWithContext;
 export {
-  ItemListWrapperWithContext,
-  ItemListWrapper_default as default
+  ItemListWrapper
 };
 //# sourceMappingURL=ItemListWrapper.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/ItemListWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemSortable } from '../../Item/Item';\nimport { withConditionalDnDRowContext } from '../../HoC/withConditionalDnDRowContext';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n\n  // .ds-shuttle-v2-move-multiple-wrapper {\n  //   top: 2px;\n  //   right: 2px;\n  //   height: calc(100% - 4px);\n  //   width: calc(65px - 2px);\n  // }\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize,\n  );\n\n  const virtualItems = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n  );\n\n  const withDragNDrop = usePropsStore((state) =>\n    isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n  );\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n\n  return (\n    <StyledItemsWrapper alignItems=\"flex-start\" rows={rows} style={{ height: `${totalSize}px` }}>\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        return (\n          <div\n            key={virtualRow.index}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: `${virtualRow.size}px`,\n              transform: `translateY(${virtualRow.start}px)`,\n            }}\n          >\n            <ItemSortable\n              key={item.original.id}\n              item={item}\n              isDestinationPanel={isDestinationPanel}\n              withDragNDrop={withDragNDrop}\n            />\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2DX;AA3DZ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB,qBAAqB;AAEhD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvG,MAAM,kBAAkBA,OAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,YAAY;AAAA,IAAiB,CAAC,UAClC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,eAAe;AAAA,IAAiB,CAAC,UACrC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AAEA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,OAAOA,OAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AAEA,SACE,oBAAC,sBAAmB,YAAW,cAAa,MAAY,OAAO,EAAE,QAAQ,GAAG,cAAc,GACvF,wBAAc,IAAI,CAAC,eAAe;AACjC,UAAM,OAAO,SAAS,WAAW;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ,GAAG,WAAW;AAAA,UACtB,WAAW,cAAc,WAAW;AAAA,QACtC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,KAAK,SAAS;AAAA,QAIrB;AAAA;AAAA,MAfK,WAAW;AAAA,IAgBlB;AAAA,EAEJ,CAAC,GACH;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { Item } from '../../Item/Item';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\n\nconst StyledItemsWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'items-wrapper' })`\n  position: relative;\n  :focus,\n  :focus-visible {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n    // .ds-shuttle-v2-move-multiple-wrapper {\n    //   top: 2px;\n    //   right: 2px;\n    //   height: calc(100% - 4px);\n    //   width: calc(65px - 2px);\n    // }\n  }\n`;\n\nconst useInnerRefHandlers = ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const shouldFocus = React.useMemo(\n    () => focusRegion === currRegion && focusItem === '' && focusItemAction === '',\n    [currRegion, focusItem, focusItemAction, focusRegion],\n  );\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (shouldFocus) {\n        node?.focus();\n      }\n    },\n    [shouldFocus],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nexport const ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = useInternalStore((store) => store.sourceHasMultipleSelectedItems);\n  const hasMultipleSelection = isDestinationPanel\n    ? destinationHasMultipleSelectedItems\n    : sourceHasMultipleSelectedItems;\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if (key === 'ArrowDown' || key === 'Home') trackFocusItemFirst();\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) trackFocusLoadMoreBtn();\n          else trackFocusItemLast();\n        }\n      }\n    },\n    [\n      isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemFirst,\n      trackFocusItemLast,\n      trackFocusLoadMoreBtn,\n      trackFocusRegionPanelItem,\n      withLoadMore,\n    ],\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(panelMetaInfo);\n  return (\n    <StyledItemsWrapper\n      alignItems=\"flex-start\"\n      rows={rows}\n      tabIndex={0}\n      ref={innerRefHandlerParentItem}\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n    >\n      {itemList.map((item) => (\n        <Item key={item.original.id} item={item} isDestinationPanel={isDestinationPanel} />\n      ))}\n      {hasMultipleSelection ? <MultipleSelectionAction isDestinationPanel={isDestinationPanel} /> : null}\n    </StyledItemsWrapper>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/LoadingItems.js

@@ -3,8 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
-const StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`
+const StyledLoadingListWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "loading-list-wrapper" })`
   color: neutral-500;
 `;
 const LoadingItems = (panelMetaInfo) => /* @__PURE__ */ jsx(StyledLoadingListWrapper, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(DSCircularIndeterminateIndicator, { size: "xl", text: "Loading..." }) });

package/dist/esm/parts/Panel/middle/LoadingItems.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/LoadingItems.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`\n  color: neutral-500;\n`;\nexport const LoadingItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledLoadingListWrapper alignItems=\"center\" justifyContent=\"center\">\n    <DSCircularIndeterminateIndicator size=\"xl\" text=\"Loading...\" />\n  </StyledLoadingListWrapper>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcnB;AAXJ,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAEjD,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,2BAA2B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAAA;AAAA;AAG7G,MAAM,eAAe,CAAC,kBAC3B,oBAAC,4BAAyB,YAAW,UAAS,gBAAe,UAC3D,8BAAC,oCAAiC,MAAK,MAAK,MAAK,cAAa,GAChE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\n\nconst StyledLoadingListWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'loading-list-wrapper' })`\n  color: neutral-500;\n`;\nexport const LoadingItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledLoadingListWrapper alignItems=\"center\" justifyContent=\"center\">\n    <DSCircularIndeterminateIndicator size=\"xl\" text=\"Loading...\" />\n  </StyledLoadingListWrapper>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACanB;AAVJ,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAGjD,MAAM,2BAA2B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAG9F,MAAM,eAAe,CAAC,kBAC3B,oBAAC,4BAAyB,YAAW,UAAS,gBAAe,UAC3D,8BAAC,oCAAiC,MAAK,MAAK,MAAK,cAAa,GAChE;",
   "names": []
 }

package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js

@@ -7,13 +7,11 @@ import { DSButtonV2 } from "@elliemae/ds-button";
 import { ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
 import { useHandleMoveSelection } from "../../../config/itemMovementHelpers";
 import { useFocusTracker } from "../../../config/useFocusTracker";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
-const StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
+const StyledMoveMultipleWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "move-multiple-wrapper" })`
   position: absolute;
   background-color: neutral-000;
   top: 0px;
   right: 0px;
-  transform: translateX(0);
   height: 100%;
   width: 65px;
   :hover {
@@ -27,23 +25,23 @@ const StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DS
   }
 `;
 const StyledButton = styled(DSButtonV2, {
-  name: DSShuttleV2Name,
-  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN
+  name: "ds-shuttle-v2",
+  slot: "move-multiple-btn"
 })`
   width: 100%;
   height: 100%;
 `;
 const StyledCloseMediumIcon = styled(CloseMedium, {
-  name: DSShuttleV2Name,
-  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-to-source-icon"
 })`
   > svg {
     fill: brand-600;
   }
 `;
 const StyledArrowShortRightIcon = styled(ArrowShortRight, {
-  name: DSShuttleV2Name,
-  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-to-destination-icon"
 })`
   > svg {
     fill: brand-600;

package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/MultipleSelectionAction.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, type DSButtonT } from '@elliemae/ds-button';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 65px;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton buttonType=\"icon\" onClick={handleMoveAllAction} onFocus={handleMoveAllBtnFocus}>\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmFb;AAnFV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAC3C,SAAS,iBAAiB,mBAAmB;AAE7C,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,4BAA4B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBtH,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0BA,OAAM,KAAK,CAAC,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,IAAI,uBAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,IACvG,gBAAgB;AAClB,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,UAAU;AACT,oBAAc,KAAK;AACnB,0BAAoB;AACpB,4BAAsB;AACtB,4BAAsB,kBAAkB;AAAA,IAC1C;AAAA,IACA,CAAC,oBAAoB,eAAe,uBAAuB,qBAAqB,qBAAqB;AAAA,EACvG;AACA,QAAM,wBAAoEA,OAAM,YAAY,MAAM;AAChG,wBAAoB;AACpB,0BAAsB;AACtB,kCAA8B,kBAAkB;AAAA,EAClD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,6BAA6B,CAAC;AAElG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN,8BAAC,gBAAa,YAAW,QAAO,SAAS,qBAAqB,SAAS,uBACpE,+BACC,oBAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,oBAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO,GAE1D;AAAA;AAAA,EACF;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, type DSButtonT } from '@elliemae/ds-button';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'move-multiple-wrapper' })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  height: 100%;\n  width: 65px;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: 'ds-shuttle-v2',\n  slot: 'move-multiple-btn',\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-source-icon',\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-destination-icon',\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton buttonType=\"icon\" onClick={handleMoveAllAction} onFocus={handleMoveAllBtnFocus}>\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiFb;AAjFV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAC3C,SAAS,iBAAiB,mBAAmB;AAE7C,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAEhC,MAAM,4BAA4B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvG,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0BA,OAAM,KAAK,CAAC,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,IAAI,uBAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,IACvG,gBAAgB;AAClB,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,UAAU;AACT,oBAAc,KAAK;AACnB,0BAAoB;AACpB,4BAAsB;AACtB,4BAAsB,kBAAkB;AAAA,IAC1C;AAAA,IACA,CAAC,oBAAoB,eAAe,uBAAuB,qBAAqB,qBAAqB;AAAA,EACvG;AACA,QAAM,wBAAoEA,OAAM,YAAY,MAAM;AAChG,wBAAoB;AACpB,0BAAsB;AACtB,kCAA8B,kBAAkB;AAAA,EAClD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,6BAA6B,CAAC;AAElG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN,8BAAC,gBAAa,YAAW,QAAO,SAAS,qBAAqB,SAAS,uBACpE,+BACC,oBAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,oBAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO,GAE1D;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js

@@ -3,55 +3,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { useOnSpecificFocus } from "@elliemae/ds-utilities";
-import { usePropsStore, useInternalStore } from "../../../config/useStore";
-import { ItemListWrapperWithContext } from "./ItemListWrapper";
+import { usePropsStore } from "../../../config/useStore";
+import { ItemListWrapper } from "./ItemListWrapper";
 import { EmptyItems } from "./EmptyItems";
-import { useFocusTracker } from "../../../config/useFocusTracker";
 import { LoadingItems } from "./LoadingItems";
-import { MultipleSelectionAction } from "./MultipleSelectionAction";
-import { REGIONS_FOCUSES } from "../../../constants";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
-const useInnerRefHandlers = (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 : REGIONS_FOCUSES.SOURCE_PANEL;
-  const shouldFocus = React2.useMemo(
-    () => focusRegion === currRegion && focusItem === "" && focusItemAction === "",
-    [currRegion, focusItem, focusItemAction, focusRegion]
-  );
-  const innerRefHandlerParentItem = React2.useCallback(
-    (node) => {
-      if (shouldFocus) {
-        node?.focus();
-      }
-    },
-    [shouldFocus]
-  );
-  return React2.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
-};
-const StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`
+const StyledListWrapperMid = styled(Grid, { name: "ds-shuttle-v2", slot: "list-wrapper-mid" })`
   overflow: hidden;
-  position: relative;
-
-  :focus,
-  :focus-visible {
-    outline: none;
-
-    &::after {
-      position: absolute;
-      content: ' ';
-      outline: 2px solid brand-700;
-      outline-offset: -2px;
-      width: 100%;
-      height: 100%;
-    }
-  }
 `;
-const StyledMidScroller = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`
+const StyledMidScroller = styled(Grid, { name: "ds-shuttle-v2", slot: "list-wrapper-mid" })`
   overflow: auto;
-  max-height: '500px';
 `;
 const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
   const { isDestinationPanel = false } = panelMetaInfo;
@@ -61,84 +21,11 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
   const isLoading = usePropsStore((state) => isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading);
   const showEmptyMessage = !isLoading && itemsLength === 0;
   const showItems = !isLoading && !showEmptyMessage;
-  const virtualRef = useInternalStore(
-    (state) => isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef
-  );
-  const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);
-  const sourceHasMultipleSelectedItems = useInternalStore((store) => store.sourceHasMultipleSelectedItems);
-  const hasMultipleSelection = isDestinationPanel ? destinationHasMultipleSelectedItems : sourceHasMultipleSelectedItems;
-  const isDragging = useInternalStore((state) => state.lastActiveId !== "");
-  const withLoadMore = usePropsStore(
-    (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
-  );
-  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);
-  const {
-    trackFocusRegionPanel,
-    trackFocusItemFirst,
-    trackFocusItemLast,
-    trackFocusActionParent,
-    trackFocusRegionPanelItem,
-    trackFocusLoadMoreBtn
-  } = useFocusTracker();
-  const config = React2.useMemo(
-    () => ({
-      onFocus: () => {
-        trackFocusRegionPanel(isDestinationPanel);
-      }
-    }),
-    [trackFocusRegionPanel, isDestinationPanel]
-  );
-  const onPanelFocus = useOnSpecificFocus(config);
-  const onPanelKeyDown = React2.useCallback(
-    (e) => {
-      const { key } = e;
-      if (isDragging) {
-        e.preventDefault();
-        return;
-      }
-      if (["Home", "End", "ArrowUp", "ArrowDown"].includes(key)) {
-        e.preventDefault();
-        e.stopPropagation();
-        trackFocusRegionPanelItem(isDestinationPanel);
-        trackFocusActionParent();
-        if (key === "ArrowDown" || key === "Home")
-          trackFocusItemFirst();
-        if (key === "ArrowUp" || key === "End") {
-          if (withLoadMore)
-            trackFocusLoadMoreBtn();
-          else
-            trackFocusItemLast();
-        }
-      }
-    },
-    [
-      isDragging,
-      isDestinationPanel,
-      trackFocusActionParent,
-      trackFocusItemFirst,
-      trackFocusItemLast,
-      trackFocusLoadMoreBtn,
-      trackFocusRegionPanelItem,
-      withLoadMore
-    ]
-  );
-  return /* @__PURE__ */ jsxs(
-    StyledListWrapperMid,
-    {
-      onFocus: onPanelFocus,
-      onKeyDown: onPanelKeyDown,
-      tabIndex: 0,
-      ref: innerRefHandlerParentItem,
-      children: [
-        /* @__PURE__ */ jsxs(StyledMidScroller, { ref: virtualRef, children: [
-          isLoading ? /* @__PURE__ */ jsx(LoadingItems, { ...panelMetaInfo }) : null,
-          showEmptyMessage ? /* @__PURE__ */ jsx(EmptyItems, { ...panelMetaInfo }) : null,
-          showItems ? /* @__PURE__ */ jsx(ItemListWrapperWithContext, { ...panelMetaInfo }) : null
-        ] }),
-        hasMultipleSelection ? /* @__PURE__ */ jsx(MultipleSelectionAction, { isDestinationPanel }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx(StyledListWrapperMid, { children: /* @__PURE__ */ jsxs(StyledMidScroller, { children: [
+    isLoading ? /* @__PURE__ */ jsx(LoadingItems, { ...panelMetaInfo }) : null,
+    showEmptyMessage ? /* @__PURE__ */ jsx(EmptyItems, { ...panelMetaInfo }) : null,
+    showItems ? /* @__PURE__ */ jsx(ItemListWrapper, { ...panelMetaInfo }) : null
+  ] }) });
 });
 export {
   PanelContentMiddleSection

package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/PanelContentMiddleSection.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 { useOnSpecificFocus } from '@elliemae/ds-utilities';\n\nimport { usePropsStore, useInternalStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemListWrapperWithContext } from './ItemListWrapper';\nimport { EmptyItems } from './EmptyItems';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\n\nimport { LoadingItems } from './LoadingItems';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\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 : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const shouldFocus = React.useMemo(\n    () => focusRegion === currRegion && focusItem === '' && focusItemAction === '',\n    [currRegion, focusItem, focusItemAction, focusRegion],\n  );\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (shouldFocus) {\n        node?.focus();\n      }\n    },\n    [shouldFocus],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: hidden;\n  position: relative;\n\n  :focus,\n  :focus-visible {\n    outline: none;\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      outline: 2px solid brand-700;\n      outline-offset: -2px;\n      width: 100%;\n      height: 100%;\n    }\n  }\n`;\nconst StyledMidScroller = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: auto;\n  max-height: '500px';\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  const virtualRef = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n\n  const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = useInternalStore((store) => store.sourceHasMultipleSelectedItems);\n  const hasMultipleSelection = isDestinationPanel\n    ? destinationHasMultipleSelectedItems\n    : sourceHasMultipleSelectedItems;\n  const isDragging = useInternalStore((state) => state.lastActiveId !== '');\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n\n      if (isDragging) {\n        e.preventDefault();\n        return;\n      }\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if (key === 'ArrowDown' || key === 'Home') trackFocusItemFirst();\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) trackFocusLoadMoreBtn();\n          else trackFocusItemLast();\n        }\n      }\n    },\n    [\n      isDragging,\n      isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemFirst,\n      trackFocusItemLast,\n      trackFocusLoadMoreBtn,\n      trackFocusRegionPanelItem,\n      withLoadMore,\n    ],\n  );\n\n  return (\n    <StyledListWrapperMid\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n      tabIndex={0}\n      ref={innerRefHandlerParentItem}\n    >\n      <StyledMidScroller ref={virtualRef}>\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n      </StyledMidScroller>\n      {hasMultipleSelection ? <MultipleSelectionAction isDestinationPanel={isDestinationPanel} /> : null}\n    </StyledListWrapperMid>\n  );\n});\n"],
-  "mappings": "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",
+  "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 { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemListWrapper } from './ItemListWrapper';\nimport { EmptyItems } from './EmptyItems';\nimport { LoadingItems } from './LoadingItems';\n\nconst StyledListWrapperMid = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-wrapper-mid' })`\n  overflow: hidden;\n`;\nconst StyledMidScroller = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-wrapper-mid' })`\n  overflow: auto;\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  return (\n    <StyledListWrapperMid>\n      <StyledMidScroller>\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapper {...panelMetaInfo} /> : null}\n      </StyledMidScroller>\n    </StyledListWrapperMid>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0BjB,SACe,KADf;AA1BN,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAE7B,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAAA;AAAA;AAG7F,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAAA;AAAA;AAGnF,MAAM,4BAA4BA,OAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,gBAAgB,SAAS,MAAM,WAAW;AAAA,EACvE;AACA,QAAM,YAAY,cAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AACpH,QAAM,mBAAmB,CAAC,aAAa,gBAAgB;AACvD,QAAM,YAAY,CAAC,aAAa,CAAC;AAEjC,SACE,oBAAC,wBACC,+BAAC,qBACE;AAAA,gBAAY,oBAAC,gBAAc,GAAG,eAAe,IAAK;AAAA,IAClD,mBAAmB,oBAAC,cAAY,GAAG,eAAe,IAAK;AAAA,IACvD,YAAY,oBAAC,mBAAiB,GAAG,eAAe,IAAK;AAAA,KACxD,GACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/top/PanelContentTopSection.js

@@ -6,8 +6,7 @@ import { Grid } from "@elliemae/ds-grid";
 import { usePropsStore } from "../../../config/useStore";
 import { SelectionHeader } from "./SelectionHeader";
 import { PanelFilterSection } from "./PanelFilterSection";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
-const StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;
+const StyledListWrapperTop = styled(Grid, { name: "ds-shuttle-v2", slot: "list-wrapper-top" })``;
 const PanelContentTopSection = (panelMetaInfo) => {
   const { isDestinationPanel = false } = panelMetaInfo;
   const isSearchBarOpen = usePropsStore(

package/dist/esm/parts/Panel/top/PanelContentTopSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelContentTopSection.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 { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { SelectionHeader } from './SelectionHeader';\nimport { PanelFilterSection } from './PanelFilterSection';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const topSectionRows = React.useMemo(() => {\n    const cols = [];\n    if (isSearchBarOpen) cols.push('auto');\n    cols.push('auto');\n    return cols;\n  }, [isSearchBarOpen]);\n  return (\n    <StyledListWrapperTop rows={topSectionRows}>\n      {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n      <SelectionHeader {...panelMetaInfo} />\n    </StyledListWrapperTop>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuBnB,SACqB,KADrB;AAvBJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,iBAAiB,CAAC;AAErG,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,iBAAiBA,OAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,CAAC;AACd,QAAI;AAAiB,WAAK,KAAK,MAAM;AACrC,SAAK,KAAK,MAAM;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AACpB,SACE,qBAAC,wBAAqB,MAAM,gBACzB;AAAA,sBAAkB,oBAAC,sBAAoB,GAAG,eAAe,IAAK;AAAA,IAC/D,oBAAC,mBAAiB,GAAG,eAAe;AAAA,KACtC;AAEJ;",
+  "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 { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { SelectionHeader } from './SelectionHeader';\nimport { PanelFilterSection } from './PanelFilterSection';\n\nconst StyledListWrapperTop = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-wrapper-top' })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const topSectionRows = React.useMemo(() => {\n    const cols = [];\n    if (isSearchBarOpen) cols.push('auto');\n    cols.push('auto');\n    return cols;\n  }, [isSearchBarOpen]);\n  return (\n    <StyledListWrapperTop rows={topSectionRows}>\n      {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n      <SelectionHeader {...panelMetaInfo} />\n    </StyledListWrapperTop>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBnB,SACqB,KADrB;AAtBJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAEnC,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAEtF,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,iBAAiBA,OAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,CAAC;AACd,QAAI;AAAiB,WAAK,KAAK,MAAM;AACrC,SAAK,KAAK,MAAM;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AACpB,SACE,qBAAC,wBAAqB,MAAM,gBACzB;AAAA,sBAAkB,oBAAC,sBAAoB,GAAG,eAAe,IAAK;AAAA,IAC/D,oBAAC,mBAAiB,GAAG,eAAe;AAAA,KACtC;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/top/PanelFilterSection.js

@@ -5,12 +5,11 @@ import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { DSInputText } from "@elliemae/ds-form-input-text";
 import { usePropsStore } from "../../../config/useStore";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
-const StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`
+const StyledSearchWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "area-search-wrapper" })`
   border-bottom: 1px solid neutral-400;
   border-radius: 0;
 `;
-const StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`
+const StyledInputText = styled(DSInputText, { name: "ds-shuttle-v2", slot: "area-search-bar" })`
   border: none;
   :focus {
     border-radius: 0;

package/dist/esm/parts/Panel/top/PanelFilterSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelFilterSection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n  border-bottom: 1px solid neutral-400;\n  border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n  border: none;\n  :focus {\n    border-radius: 0;\n  }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const onFilterCb = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n  );\n  const filterValue = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n  );\n  const handleFilterChange = React.useCallback(\n    (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n      onFilterCb?.(`${value}`, { event });\n    },\n    [onFilterCb],\n  );\n  return (\n    <StyledSearchWrapper>\n      <StyledInputText value={filterValue} onValueChange={handleFilterChange} />\n    </StyledSearchWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmCjB;AAnCN,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,kBAAkB,OAAO,aAAa,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,SAAS,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,oBAAC,uBACC,8BAAC,mBAAgB,OAAO,aAAa,eAAe,oBAAoB,GAC1E;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\n\nconst StyledSearchWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'area-search-wrapper' })`\n  border-bottom: 1px solid neutral-400;\n  border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: 'ds-shuttle-v2', slot: 'area-search-bar' })`\n  border: none;\n  :focus {\n    border-radius: 0;\n  }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const onFilterCb = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n  );\n  const filterValue = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n  );\n  const handleFilterChange = React.useCallback(\n    (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n      onFilterCb?.(`${value}`, { event });\n    },\n    [onFilterCb],\n  );\n  return (\n    <StyledSearchWrapper>\n      <StyledInputText value={filterValue} onValueChange={handleFilterChange} />\n    </StyledSearchWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCjB;AAlCN,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAG9B,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAI/F,MAAM,kBAAkB,OAAO,aAAa,EAAE,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvF,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,SAAS,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,oBAAC,uBACC,8BAAC,mBAAgB,OAAO,aAAa,eAAe,oBAAoB,GAC1E;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/top/SelectionHeader.js

@@ -5,19 +5,15 @@ import { styled } from "@elliemae/ds-system";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
 import { Grid } from "@elliemae/ds-grid";
 import { usePropsStore, useInternalStore } from "../../../config/useStore";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
-const StyledSelectionHeaderWrapper = styled(Grid, {
-  name: DSShuttleV2Name,
-  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER
-})`
+const StyledSelectionHeaderWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "area-selection-header" })`
   line-height: 1;
   font-size: 1rem;
   background-color: neutral-000;
   border-bottom: 1px solid neutral-400;
 `;
 const StyledSelectionHeaderCountLabel = styled("div", {
-  name: DSShuttleV2Name,
-  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER_COUNT_LABEL
+  name: "ds-shuttle-v2",
+  slot: "area-selection-header-count-label"
 })`
   text-align: end;
   color: neutral-500;