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

package/dist/esm/config/useFocusTracker/useFocusActionTrackers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useFocusTracker/useFocusActionTrackers.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useCallback } from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ACTIONS_FOCUSES } from '../../constants';\nimport { useInternalStore, usePropsStore } from '../useStore';\n\ntype ActionFlags = {\n  preventDrilldown: boolean;\n  withDragAndDrop: boolean;\n  preventMove: boolean;\n};\ntype ActionByProxymity = {\n  prevAction: typeof ACTIONS_FOCUSES[keyof typeof ACTIONS_FOCUSES];\n  nextAction: typeof ACTIONS_FOCUSES[keyof typeof ACTIONS_FOCUSES];\n};\nconst getMoveBtnActionByProxymity = (flags: ActionFlags) => {\n  // move button\n  const { preventDrilldown, withDragAndDrop } = flags;\n  const actionMap = { prevAction: '', nextAction: '' } as ActionByProxymity;\n  // prev\n  //         drilldown     if it exist\n  //    else drag n drop   if it exist\n  //    else parent\n  if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n  else if (withDragAndDrop) actionMap.prevAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n  // next\n  //         drag n drop   if it exist\n  //    else parent\n  if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n  return actionMap;\n};\nconst getDragAndDropBtnActionByProxymity = (flags: ActionFlags) => {\n  // Drag and drop handler\n  const { preventMove, preventDrilldown } = flags;\n  // next\n  //     always parent\n  const actionMap = { prevAction: '', nextAction: ACTIONS_FOCUSES.PARENT } as ActionByProxymity;\n  // prev\n  //         move          if it exist\n  //    else drilldown     if it exist\n  //    else parent\n  if (!preventMove) actionMap.prevAction = ACTIONS_FOCUSES.MOVE_BTN;\n  else if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n  else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n  return actionMap;\n};\nconst getDrilldownBtnActionByProxymity = (flags: ActionFlags) => {\n  // Drilldown handler\n  const { withDragAndDrop, preventMove } = flags;\n  // prev\n  //     always parent\n  const actionMap = { prevAction: ACTIONS_FOCUSES.PARENT, nextAction: '' } as ActionByProxymity;\n  // next\n  //         move          if it exist\n  //    else drag n drop   if it exist\n  //    else parent\n  if (!preventMove) actionMap.nextAction = ACTIONS_FOCUSES.MOVE_BTN;\n  else if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n  return actionMap;\n};\nconst getParenBtnActionByProxymity = (flags: ActionFlags) => {\n  // Parent handler\n  const { preventDrilldown, withDragAndDrop, preventMove } = flags;\n  const actionMap = { prevAction: '', nextAction: '' } as ActionByProxymity;\n  // prev\n  //         drag n drop   if it exist\n  //    else move          if it exist\n  //    else drilldown     if it exist\n  //    else parent\n  if (withDragAndDrop) actionMap.prevAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else if (!preventMove) actionMap.prevAction = ACTIONS_FOCUSES.MOVE_BTN;\n  else if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n  else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n  // next\n  //         drilldown     if it exist\n  //    else move          if it exist\n  //    else drag n drop   if it exist\n  //    else parent\n  if (!preventDrilldown) actionMap.nextAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n  else if (!preventMove) actionMap.nextAction = ACTIONS_FOCUSES.MOVE_BTN;\n  else if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n  return actionMap;\n};\nconst getActionByProxymity = ({ flags, currentAction }: { flags: ActionFlags; currentAction: string }) => {\n  if (currentAction === ACTIONS_FOCUSES.MOVE_BTN) return getMoveBtnActionByProxymity(flags);\n  if (currentAction === ACTIONS_FOCUSES.DRAG_N_DROP) return getDragAndDropBtnActionByProxymity(flags);\n  if (currentAction === ACTIONS_FOCUSES.DRILLDOWN_BTN) return getDrilldownBtnActionByProxymity(flags);\n  return getParenBtnActionByProxymity(flags);\n};\nexport const useFocusActionTrackers = () => {\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  //  tracking actions are always triggered as user action callbacks\n  //    this means it should always be invoked after all the useEffect execute\n  //    since this is the case, we can avoid re-declaring the function with mutable pattern\n  //    this way we avoid useless re-renders\n  const mutableFocusItemAction = useMakeMutable(focusItemAction);\n  const setFocusItemAction = useInternalStore((state) => state.setFocusItemAction);\n  const removeDragAndDropFromDestination = usePropsStore((state) => state.removeDragAndDropFromDestination);\n  const addDragAndDropFromSource = usePropsStore((state) => state.addDragAndDropFromSource);\n  const trackFocusPrevAction = useCallback(\n    ({ isDestinationPanel, item }: DSShuttleV2T.ItemMeta) => {\n      const preventMove = Boolean(item.original.preventMove);\n      const preventDrilldown = Boolean(item.original.preventDrilldown);\n      const withDragAndDrop =\n        (isDestinationPanel && !removeDragAndDropFromDestination) || (!isDestinationPanel && addDragAndDropFromSource);\n      const { prevAction } = getActionByProxymity({\n        flags: { preventMove, preventDrilldown, withDragAndDrop },\n        currentAction: mutableFocusItemAction.current,\n      });\n      setFocusItemAction(prevAction);\n    },\n    [addDragAndDropFromSource, mutableFocusItemAction, removeDragAndDropFromDestination, setFocusItemAction],\n  );\n  const trackFocusNextAction = useCallback(\n    ({ isDestinationPanel, item }: DSShuttleV2T.ItemMeta) => {\n      const preventMove = Boolean(item.original.preventMove);\n      const preventDrilldown = Boolean(item.original.preventDrilldown);\n      const withDragAndDrop =\n        (isDestinationPanel && !removeDragAndDropFromDestination) || (!isDestinationPanel && addDragAndDropFromSource);\n      const { nextAction } = getActionByProxymity({\n        flags: { preventMove, preventDrilldown, withDragAndDrop },\n        currentAction: mutableFocusItemAction.current,\n      });\n      setFocusItemAction(nextAction);\n    },\n    [addDragAndDropFromSource, mutableFocusItemAction, removeDragAndDropFromDestination, setFocusItemAction],\n  );\n  return useMemo(\n    () => ({\n      mutableFocusItemAction,\n      trackFocusActionMove: () => setFocusItemAction('move-btn'),\n      trackFocusActionDrilldown: () => setFocusItemAction('drilldown-btn'),\n      trackFocusActionDragAndDrop: () => setFocusItemAction('drag-n-drop'),\n      trackFocusActionParent: () => setFocusItemAction('parent'),\n      trackFocusActionReset: () => setFocusItemAction(''),\n      trackFocusPrevAction,\n      trackFocusNextAction,\n    }),\n    [mutableFocusItemAction, setFocusItemAction, trackFocusNextAction, trackFocusPrevAction],\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useCallback } from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ACTIONS_FOCUSES } from '../../constants';\nimport { useInternalStore, usePropsStore } from '../useStore';\n\ntype ActionFlags = {\n  preventDrilldown: boolean;\n  withDragAndDrop: boolean;\n  preventMove: boolean;\n};\ntype ActionByProxymity = {\n  prevAction: (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n  nextAction: (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n};\nconst getMoveBtnActionByProxymity = (flags: ActionFlags) => {\n  // move button\n  const { preventDrilldown, withDragAndDrop } = flags;\n  const actionMap = { prevAction: '', nextAction: '' } as ActionByProxymity;\n  // prev\n  //         drilldown     if it exist\n  //    else drag n drop   if it exist\n  //    else parent\n  if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n  else if (withDragAndDrop) actionMap.prevAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n  // next\n  //         drag n drop   if it exist\n  //    else parent\n  if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n  return actionMap;\n};\nconst getDragAndDropBtnActionByProxymity = (flags: ActionFlags) => {\n  // Drag and drop handler\n  const { preventMove, preventDrilldown } = flags;\n  // next\n  //     always parent\n  const actionMap = { prevAction: '', nextAction: ACTIONS_FOCUSES.PARENT } as ActionByProxymity;\n  // prev\n  //         move          if it exist\n  //    else drilldown     if it exist\n  //    else parent\n  if (!preventMove) actionMap.prevAction = ACTIONS_FOCUSES.MOVE_BTN;\n  else if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n  else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n  return actionMap;\n};\nconst getDrilldownBtnActionByProxymity = (flags: ActionFlags) => {\n  // Drilldown handler\n  const { withDragAndDrop, preventMove } = flags;\n  // prev\n  //     always parent\n  const actionMap = { prevAction: ACTIONS_FOCUSES.PARENT, nextAction: '' } as ActionByProxymity;\n  // next\n  //         move          if it exist\n  //    else drag n drop   if it exist\n  //    else parent\n  if (!preventMove) actionMap.nextAction = ACTIONS_FOCUSES.MOVE_BTN;\n  else if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n  return actionMap;\n};\nconst getParenBtnActionByProxymity = (flags: ActionFlags) => {\n  // Parent handler\n  const { preventDrilldown, withDragAndDrop, preventMove } = flags;\n  const actionMap = { prevAction: '', nextAction: '' } as ActionByProxymity;\n  // prev\n  //         drag n drop   if it exist\n  //    else move          if it exist\n  //    else drilldown     if it exist\n  //    else parent\n  if (withDragAndDrop) actionMap.prevAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else if (!preventMove) actionMap.prevAction = ACTIONS_FOCUSES.MOVE_BTN;\n  else if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n  else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n  // next\n  //         drilldown     if it exist\n  //    else move          if it exist\n  //    else drag n drop   if it exist\n  //    else parent\n  if (!preventDrilldown) actionMap.nextAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n  else if (!preventMove) actionMap.nextAction = ACTIONS_FOCUSES.MOVE_BTN;\n  else if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n  else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n  return actionMap;\n};\nconst getActionByProxymity = ({ flags, currentAction }: { flags: ActionFlags; currentAction: string }) => {\n  if (currentAction === ACTIONS_FOCUSES.MOVE_BTN) return getMoveBtnActionByProxymity(flags);\n  if (currentAction === ACTIONS_FOCUSES.DRAG_N_DROP) return getDragAndDropBtnActionByProxymity(flags);\n  if (currentAction === ACTIONS_FOCUSES.DRILLDOWN_BTN) return getDrilldownBtnActionByProxymity(flags);\n  return getParenBtnActionByProxymity(flags);\n};\nexport const useFocusActionTrackers = () => {\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  //  tracking actions are always triggered as user action callbacks\n  //    this means it should always be invoked after all the useEffect execute\n  //    since this is the case, we can avoid re-declaring the function with mutable pattern\n  //    this way we avoid useless re-renders\n  const mutableFocusItemAction = useMakeMutable(focusItemAction);\n  const setFocusItemAction = useInternalStore((state) => state.setFocusItemAction);\n  const removeDragAndDropFromDestination = usePropsStore((state) => state.removeDragAndDropFromDestination);\n  const addDragAndDropFromSource = usePropsStore((state) => state.addDragAndDropFromSource);\n  const trackFocusPrevAction = useCallback(\n    ({ isDestinationPanel, datumHydratables }: DSShuttleV2T.ItemMeta) => {\n      const preventMove = Boolean(datumHydratables.preventMove);\n      const preventDrilldown = Boolean(datumHydratables.preventDrilldown);\n      const withDragAndDrop =\n        (isDestinationPanel && !removeDragAndDropFromDestination) || (!isDestinationPanel && addDragAndDropFromSource);\n      const { prevAction } = getActionByProxymity({\n        flags: { preventMove, preventDrilldown, withDragAndDrop },\n        currentAction: mutableFocusItemAction.current,\n      });\n      setFocusItemAction(prevAction);\n    },\n    [addDragAndDropFromSource, mutableFocusItemAction, removeDragAndDropFromDestination, setFocusItemAction],\n  );\n  const trackFocusNextAction = useCallback(\n    ({ isDestinationPanel, datumHydratables }: DSShuttleV2T.ItemMeta) => {\n      const preventMove = Boolean(datumHydratables.preventMove);\n      const preventDrilldown = Boolean(datumHydratables.preventDrilldown);\n      const withDragAndDrop =\n        (isDestinationPanel && !removeDragAndDropFromDestination) || (!isDestinationPanel && addDragAndDropFromSource);\n      const { nextAction } = getActionByProxymity({\n        flags: { preventMove, preventDrilldown, withDragAndDrop },\n        currentAction: mutableFocusItemAction.current,\n      });\n      setFocusItemAction(nextAction);\n    },\n    [addDragAndDropFromSource, mutableFocusItemAction, removeDragAndDropFromDestination, setFocusItemAction],\n  );\n  return useMemo(\n    () => ({\n      mutableFocusItemAction,\n      trackFocusActionMove: () => setFocusItemAction('move-btn'),\n      trackFocusActionDrilldown: () => setFocusItemAction('drilldown-btn'),\n      trackFocusActionDragAndDrop: () => setFocusItemAction('drag-n-drop'),\n      trackFocusActionParent: () => setFocusItemAction('parent'),\n      trackFocusActionReset: () => setFocusItemAction(''),\n      trackFocusPrevAction,\n      trackFocusNextAction,\n    }),\n    [mutableFocusItemAction, setFocusItemAction, trackFocusNextAction, trackFocusPrevAction],\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/config/useFocusTracker/useFocusItemTracker.js

@@ -7,8 +7,8 @@ const useFocusItemTracker = () => {
   const focusItem = useInternalStore((state) => state.focusItem);
   const mutableFocusItem = useMakeMutable(focusItem);
   const setFocusItem = useInternalStore((state) => state.setFocusItem);
-  const sourceData = usePropsStore((state) => state.sourceData);
-  const destinationData = usePropsStore((state) => state.destinationData);
+  const sourceData = useInternalStore((state) => state.sourceConfiguredData);
+  const destinationData = useInternalStore((state) => state.destinationConfiguredData);
   const sourceWithLoadMore = usePropsStore((state) => state.sourceWithLoadMore);
   const destinationWithLoadMore = usePropsStore((state) => state.destinationWithLoadMore);
   const trackFocusPrevItem = useCallback(
@@ -17,7 +17,9 @@ const useFocusItemTracker = () => {
       const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;
       if (mutableFocusItem.current === ITEMS_FOCUSES.FIRST) {
         if (withLoadMore)
-          setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN);
+          setFocusItem(
+            isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE
+          );
         else {
           const prevItemIndex = referenceData.length > 1 ? referenceData.length - 1 : 0;
           const prevItem = referenceData[prevItemIndex];
@@ -31,9 +33,9 @@ const useFocusItemTracker = () => {
         setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));
         return;
       }
-      const currentItemIndex = referenceData.findIndex((currItem) => currItem.id === mutableFocusItem.current);
+      const currentItemIndex = referenceData.findIndex((currItem) => currItem.hydratedId === mutableFocusItem.current);
       if (currentItemIndex === 0 && withLoadMore)
-        setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN);
+        setFocusItem(isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE);
       else if (currentItemIndex !== -1) {
         const prevItemIndex = currentItemIndex === 0 ? referenceData.length - 1 : currentItemIndex - 1;
         const prevItem = referenceData[prevItemIndex];
@@ -58,7 +60,9 @@ const useFocusItemTracker = () => {
       }
       if (mutableFocusItem.current === ITEMS_FOCUSES.LAST) {
         if (withLoadMore)
-          setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN);
+          setFocusItem(
+            isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE
+          );
         else {
           const nextItemIndex = 0;
           const nextItem = referenceData[nextItemIndex];
@@ -66,9 +70,9 @@ const useFocusItemTracker = () => {
         }
         return;
       }
-      const currentItemIndex = referenceData.findIndex((currItem) => currItem.id === mutableFocusItem.current);
+      const currentItemIndex = referenceData.findIndex((currItem) => currItem.hydratedId === mutableFocusItem.current);
       if (currentItemIndex === referenceData.length - 1 && withLoadMore)
-        setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN);
+        setFocusItem(isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE);
       else if (currentItemIndex !== -1) {
         const nextItemIndex = currentItemIndex === referenceData.length - 1 ? 0 : currentItemIndex + 1;
         const nextItem = referenceData[nextItemIndex];
@@ -84,11 +88,12 @@ const useFocusItemTracker = () => {
   return useMemo(
     () => ({
       mutableFocusItem,
-      trackFocusItem: (item) => setFocusItem(item.original.id),
+      trackFocusItem: (item) => setFocusItem(item.hydratedId),
       trackFocusItemReset: () => setFocusItem(ITEMS_FOCUSES.RESET),
       trackFocusItemFirst: () => setFocusItem(ITEMS_FOCUSES.FIRST),
       trackFocusItemLast: () => setFocusItem(ITEMS_FOCUSES.LAST),
-      trackFocusLoadMoreBtn: () => setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN),
+      trackFocusLoadMoreBtnDestination: () => setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION),
+      trackFocusLoadMoreBtn: () => setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE),
       trackFocusPrevItem,
       trackFocusNextItem
     }),

package/dist/esm/config/useFocusTracker/useFocusItemTracker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useFocusTracker/useFocusItemTracker.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useMemo, useCallback } from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore, usePropsStore } from '../useStore';\nimport { ITEMS_FOCUSES } from '../../constants/index';\n\nexport const useFocusItemTracker = () => {\n  const focusItem = useInternalStore((state) => state.focusItem);\n  //  tracking actions are always triggered as user action callbacks\n  //    this means it should always be invoked after all the useEffect execute\n  //    since this is the case, we can avoid re-declaring the function with mutable pattern\n  //    this way we avoid useless re-renders\n  const mutableFocusItem = useMakeMutable(focusItem);\n\n  const setFocusItem = useInternalStore((state) => state.setFocusItem);\n  const sourceData = usePropsStore((state) => state.sourceData);\n  const destinationData = usePropsStore((state) => state.destinationData);\n  const sourceWithLoadMore = usePropsStore((state) => state.sourceWithLoadMore);\n  const destinationWithLoadMore = usePropsStore((state) => state.destinationWithLoadMore);\n  const trackFocusPrevItem = useCallback(\n    ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n      const referenceData = isDestinationPanel ? destinationData : sourceData;\n      const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;\n      if (mutableFocusItem.current === ITEMS_FOCUSES.FIRST) {\n        if (withLoadMore) setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN);\n        else {\n          const prevItemIndex = referenceData.length > 1 ? referenceData.length - 1 : 0;\n          const prevItem = referenceData[prevItemIndex];\n          setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n        }\n        return;\n      }\n      if (mutableFocusItem.current === ITEMS_FOCUSES.LAST) {\n        const prevItemIndex = referenceData.length > 2 ? referenceData.length - 2 : 0;\n        const prevItem = referenceData[prevItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n        return;\n      }\n      // loop logic\n      const currentItemIndex = referenceData.findIndex((currItem) => currItem.id === mutableFocusItem.current);\n      if (currentItemIndex === 0 && withLoadMore) setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN);\n      else if (currentItemIndex !== -1) {\n        const prevItemIndex = currentItemIndex === 0 ? referenceData.length - 1 : currentItemIndex - 1;\n        const prevItem = referenceData[prevItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n      } else {\n        const prevItemIndex = 0;\n        const prevItem = referenceData[prevItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n      }\n    },\n    [destinationData, destinationWithLoadMore, mutableFocusItem, setFocusItem, sourceData, sourceWithLoadMore],\n  );\n  const trackFocusNextItem = useCallback(\n    ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n      const referenceData = isDestinationPanel ? destinationData : sourceData;\n      const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;\n      if (mutableFocusItem.current === ITEMS_FOCUSES.FIRST) {\n        // \"next\" after the first is position 1,\n        //    if position 1 exist,\n        //    else is the \"first\" (position 0) looped back\n        const nextItemIndex = referenceData.length > 1 ? 1 : 0;\n        const nextItem = referenceData[nextItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n        return;\n      }\n      if (mutableFocusItem.current === ITEMS_FOCUSES.LAST) {\n        if (withLoadMore) setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN);\n        else {\n          const nextItemIndex = 0;\n          const nextItem = referenceData[nextItemIndex];\n          setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n        }\n        return;\n      }\n      // loop logic\n      const currentItemIndex = referenceData.findIndex((currItem) => currItem.id === mutableFocusItem.current);\n      if (currentItemIndex === referenceData.length - 1 && withLoadMore) setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN);\n      else if (currentItemIndex !== -1) {\n        const nextItemIndex = currentItemIndex === referenceData.length - 1 ? 0 : currentItemIndex + 1;\n        const nextItem = referenceData[nextItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n      } else {\n        const nextItemIndex = referenceData.length - 1;\n        const nextItem = referenceData[nextItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n      }\n    },\n    [destinationData, destinationWithLoadMore, mutableFocusItem, setFocusItem, sourceData, sourceWithLoadMore],\n  );\n  return useMemo(\n    () => ({\n      mutableFocusItem,\n      trackFocusItem: (item: DSShuttleV2T.ConfiguredDatum) => setFocusItem(item.original.id),\n      trackFocusItemReset: () => setFocusItem(ITEMS_FOCUSES.RESET),\n      trackFocusItemFirst: () => setFocusItem(ITEMS_FOCUSES.FIRST),\n      trackFocusItemLast: () => setFocusItem(ITEMS_FOCUSES.LAST),\n      trackFocusLoadMoreBtn: () => setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN),\n      trackFocusPrevItem,\n      trackFocusNextItem,\n    }),\n    [mutableFocusItem, setFocusItem, trackFocusNextItem, trackFocusPrevItem],\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useMemo, useCallback } from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore, usePropsStore } from '../useStore';\nimport { ITEMS_FOCUSES } from '../../constants/index';\n\nexport const useFocusItemTracker = () => {\n  const focusItem = useInternalStore((state) => state.focusItem);\n  //  tracking actions are always triggered as user action callbacks\n  //    this means it should always be invoked after all the useEffect execute\n  //    since this is the case, we can avoid re-declaring the function with mutable pattern\n  //    this way we avoid useless re-renders\n  const mutableFocusItem = useMakeMutable(focusItem);\n  const setFocusItem = useInternalStore((state) => state.setFocusItem);\n  const sourceData = useInternalStore((state) => state.sourceConfiguredData);\n  const destinationData = useInternalStore((state) => state.destinationConfiguredData);\n  const sourceWithLoadMore = usePropsStore((state) => state.sourceWithLoadMore);\n  const destinationWithLoadMore = usePropsStore((state) => state.destinationWithLoadMore);\n  const trackFocusPrevItem = useCallback(\n    ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n      const referenceData = isDestinationPanel ? destinationData : sourceData;\n      const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;\n      if (mutableFocusItem.current === ITEMS_FOCUSES.FIRST) {\n        if (withLoadMore)\n          setFocusItem(\n            isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE,\n          );\n        else {\n          const prevItemIndex = referenceData.length > 1 ? referenceData.length - 1 : 0;\n          const prevItem = referenceData[prevItemIndex];\n          setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n        }\n        return;\n      }\n      if (mutableFocusItem.current === ITEMS_FOCUSES.LAST) {\n        const prevItemIndex = referenceData.length > 2 ? referenceData.length - 2 : 0;\n        const prevItem = referenceData[prevItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n        return;\n      }\n      // loop logic\n      const currentItemIndex = referenceData.findIndex((currItem) => currItem.hydratedId === mutableFocusItem.current);\n      if (currentItemIndex === 0 && withLoadMore)\n        setFocusItem(isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE);\n      else if (currentItemIndex !== -1) {\n        const prevItemIndex = currentItemIndex === 0 ? referenceData.length - 1 : currentItemIndex - 1;\n        const prevItem = referenceData[prevItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n      } else {\n        const prevItemIndex = 0;\n        const prevItem = referenceData[prevItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n      }\n    },\n    [destinationData, destinationWithLoadMore, mutableFocusItem, setFocusItem, sourceData, sourceWithLoadMore],\n  );\n  const trackFocusNextItem = useCallback(\n    ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n      const referenceData = isDestinationPanel ? destinationData : sourceData;\n      const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;\n      if (mutableFocusItem.current === ITEMS_FOCUSES.FIRST) {\n        // \"next\" after the first is position 1,\n        //    if position 1 exist,\n        //    else is the \"first\" (position 0) looped back\n        const nextItemIndex = referenceData.length > 1 ? 1 : 0;\n        const nextItem = referenceData[nextItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n        return;\n      }\n      if (mutableFocusItem.current === ITEMS_FOCUSES.LAST) {\n        if (withLoadMore)\n          setFocusItem(\n            isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE,\n          );\n        else {\n          const nextItemIndex = 0;\n          const nextItem = referenceData[nextItemIndex];\n          setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n        }\n        return;\n      }\n      // focus loop logic\n      const currentItemIndex = referenceData.findIndex((currItem) => currItem.hydratedId === mutableFocusItem.current);\n      if (currentItemIndex === referenceData.length - 1 && withLoadMore)\n        setFocusItem(isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE);\n      else if (currentItemIndex !== -1) {\n        const nextItemIndex = currentItemIndex === referenceData.length - 1 ? 0 : currentItemIndex + 1;\n        const nextItem = referenceData[nextItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n      } else {\n        const nextItemIndex = referenceData.length - 1;\n        const nextItem = referenceData[nextItemIndex];\n        setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n      }\n    },\n    [destinationData, destinationWithLoadMore, mutableFocusItem, setFocusItem, sourceData, sourceWithLoadMore],\n  );\n  return useMemo(\n    () => ({\n      mutableFocusItem,\n      trackFocusItem: (item: DSShuttleV2T.ConfiguredDatum) => setFocusItem(item.hydratedId),\n      trackFocusItemReset: () => setFocusItem(ITEMS_FOCUSES.RESET),\n      trackFocusItemFirst: () => setFocusItem(ITEMS_FOCUSES.FIRST),\n      trackFocusItemLast: () => setFocusItem(ITEMS_FOCUSES.LAST),\n      trackFocusLoadMoreBtnDestination: () => setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION),\n      trackFocusLoadMoreBtn: () => setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE),\n      trackFocusPrevItem,\n      trackFocusNextItem,\n    }),\n    [mutableFocusItem, setFocusItem, trackFocusNextItem, trackFocusPrevItem],\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/config/useFocusTracker/useFocusRegionTrackers.js

@@ -19,7 +19,7 @@ const useFocusRegionTrackers = () => {
       trackFocusRegionDestinationPanel: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL),
       trackFocusRegionDestinationBottom: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_BOTTOM),
       trackFocusRegionDestinationPanelItem: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM),
-      trackFocusRegionDestinationPanelFocusAll: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL),
+      trackFocusRegionDestinationPanelFocusMoveAll: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL),
       trackFocusRegionHeader: (isDestinationPanel) => {
         if (isDestinationPanel)
           setFocusRegion(REGIONS_FOCUSES.DESTINATION_HEADER);
@@ -44,7 +44,7 @@ const useFocusRegionTrackers = () => {
         else
           setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM);
       },
-      trackFocusRegionPanelFocusAll: (isDestinationPanel) => {
+      trackFocusRegionPanelFocusMoveAll: (isDestinationPanel) => {
         if (isDestinationPanel)
           setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL);
         else

package/dist/esm/config/useFocusTracker/useFocusRegionTrackers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useFocusTracker/useFocusRegionTrackers.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { useInternalStore } from '../useStore';\nimport { REGIONS_FOCUSES } from '../../constants/index';\n\nexport const useFocusRegionTrackers = () => {\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  //  tracking actions are always triggered as user action callbacks\n  //    this means it should always be invoked after all the useEffect execute\n  //    since this is the case, we can avoid re-declaring the function with mutable pattern\n  //    this way we avoid useless re-renders\n  const mutableFocusRegion = useMakeMutable(focusRegion);\n  const setFocusRegion = useInternalStore((state) => state.setFocusRegion);\n  return useMemo(\n    () => ({\n      mutableFocusRegion,\n      trackFocusRegionSourceHeader: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_HEADER),\n      trackFocusRegionSourcePanel: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL),\n      trackFocusRegionSourceBottom: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_BOTTOM),\n      trackFocusRegionSourcePanelItem: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM),\n      trackFocusRegionSourcePanelFocusAll: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL),\n      trackFocusRegionDestinationHeader: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_HEADER),\n      trackFocusRegionDestinationPanel: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL),\n      trackFocusRegionDestinationBottom: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_BOTTOM),\n      trackFocusRegionDestinationPanelItem: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM),\n      trackFocusRegionDestinationPanelFocusAll: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL),\n      trackFocusRegionHeader: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_HEADER);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_HEADER);\n      },\n      trackFocusRegionBottom: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_BOTTOM);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_BOTTOM);\n      },\n      trackFocusRegionPanel: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL);\n      },\n      trackFocusRegionPanelItem: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM);\n      },\n      trackFocusRegionPanelFocusAll: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL);\n      },\n      trackFocusRegionReset: () => setFocusRegion(''),\n    }),\n    [mutableFocusRegion, setFocusRegion],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEzB,MAAM,yBAAyB,MAAM;AAC1C,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AAKjE,QAAM,qBAAqB,eAAe,WAAW;AACrD,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,8BAA8B,MAAM,eAAe,gBAAgB,aAAa;AAAA,MAChF,6BAA6B,MAAM,eAAe,gBAAgB,YAAY;AAAA,MAC9E,8BAA8B,MAAM,eAAe,gBAAgB,aAAa;AAAA,MAChF,iCAAiC,MAAM,eAAe,gBAAgB,iBAAiB;AAAA,MACvF,qCAAqC,MAAM,eAAe,gBAAgB,0BAA0B;AAAA,MACpG,mCAAmC,MAAM,eAAe,gBAAgB,kBAAkB;AAAA,MAC1F,kCAAkC,MAAM,eAAe,gBAAgB,iBAAiB;AAAA,MACxF,mCAAmC,MAAM,eAAe,gBAAgB,kBAAkB;AAAA,MAC1F,sCAAsC,MAAM,eAAe,gBAAgB,sBAAsB;AAAA,MACjG,0CAA0C,MAAM,eAAe,gBAAgB,+BAA+B;AAAA,MAC9G,wBAAwB,CAAC,uBAAgC;AACvD,YAAI;AAAoB,yBAAe,gBAAgB,kBAAkB;AAAA;AACpE,yBAAe,gBAAgB,aAAa;AAAA,MACnD;AAAA,MACA,wBAAwB,CAAC,uBAAgC;AACvD,YAAI;AAAoB,yBAAe,gBAAgB,kBAAkB;AAAA;AACpE,yBAAe,gBAAgB,aAAa;AAAA,MACnD;AAAA,MACA,uBAAuB,CAAC,uBAAgC;AACtD,YAAI;AAAoB,yBAAe,gBAAgB,iBAAiB;AAAA;AACnE,yBAAe,gBAAgB,YAAY;AAAA,MAClD;AAAA,MACA,2BAA2B,CAAC,uBAAgC;AAC1D,YAAI;AAAoB,yBAAe,gBAAgB,sBAAsB;AAAA;AACxE,yBAAe,gBAAgB,iBAAiB;AAAA,MACvD;AAAA,MACA,+BAA+B,CAAC,uBAAgC;AAC9D,YAAI;AAAoB,yBAAe,gBAAgB,+BAA+B;AAAA;AACjF,yBAAe,gBAAgB,0BAA0B;AAAA,MAChE;AAAA,MACA,uBAAuB,MAAM,eAAe,EAAE;AAAA,IAChD;AAAA,IACA,CAAC,oBAAoB,cAAc;AAAA,EACrC;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { useInternalStore } from '../useStore';\nimport { REGIONS_FOCUSES } from '../../constants/index';\n\nexport const useFocusRegionTrackers = () => {\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  //  tracking actions are always triggered as user action callbacks\n  //    this means it should always be invoked after all the useEffect execute\n  //    since this is the case, we can avoid re-declaring the function with mutable pattern\n  //    this way we avoid useless re-renders\n  const mutableFocusRegion = useMakeMutable(focusRegion);\n  const setFocusRegion = useInternalStore((state) => state.setFocusRegion);\n  return useMemo(\n    () => ({\n      mutableFocusRegion,\n      trackFocusRegionSourceHeader: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_HEADER),\n      trackFocusRegionSourcePanel: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL),\n      trackFocusRegionSourceBottom: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_BOTTOM),\n      trackFocusRegionSourcePanelItem: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM),\n      trackFocusRegionSourcePanelFocusAll: () => setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL),\n      trackFocusRegionDestinationHeader: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_HEADER),\n      trackFocusRegionDestinationPanel: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL),\n      trackFocusRegionDestinationBottom: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_BOTTOM),\n      trackFocusRegionDestinationPanelItem: () => setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM),\n      trackFocusRegionDestinationPanelFocusMoveAll: () =>\n        setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL),\n      trackFocusRegionHeader: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_HEADER);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_HEADER);\n      },\n      trackFocusRegionBottom: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_BOTTOM);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_BOTTOM);\n      },\n      trackFocusRegionPanel: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL);\n      },\n      trackFocusRegionPanelItem: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM);\n      },\n      trackFocusRegionPanelFocusMoveAll: (isDestinationPanel: boolean) => {\n        if (isDestinationPanel) setFocusRegion(REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL);\n        else setFocusRegion(REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL);\n      },\n      trackFocusRegionReset: () => setFocusRegion(''),\n    }),\n    [mutableFocusRegion, setFocusRegion],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEzB,MAAM,yBAAyB,MAAM;AAC1C,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AAKjE,QAAM,qBAAqB,eAAe,WAAW;AACrD,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,8BAA8B,MAAM,eAAe,gBAAgB,aAAa;AAAA,MAChF,6BAA6B,MAAM,eAAe,gBAAgB,YAAY;AAAA,MAC9E,8BAA8B,MAAM,eAAe,gBAAgB,aAAa;AAAA,MAChF,iCAAiC,MAAM,eAAe,gBAAgB,iBAAiB;AAAA,MACvF,qCAAqC,MAAM,eAAe,gBAAgB,0BAA0B;AAAA,MACpG,mCAAmC,MAAM,eAAe,gBAAgB,kBAAkB;AAAA,MAC1F,kCAAkC,MAAM,eAAe,gBAAgB,iBAAiB;AAAA,MACxF,mCAAmC,MAAM,eAAe,gBAAgB,kBAAkB;AAAA,MAC1F,sCAAsC,MAAM,eAAe,gBAAgB,sBAAsB;AAAA,MACjG,8CAA8C,MAC5C,eAAe,gBAAgB,+BAA+B;AAAA,MAChE,wBAAwB,CAAC,uBAAgC;AACvD,YAAI;AAAoB,yBAAe,gBAAgB,kBAAkB;AAAA;AACpE,yBAAe,gBAAgB,aAAa;AAAA,MACnD;AAAA,MACA,wBAAwB,CAAC,uBAAgC;AACvD,YAAI;AAAoB,yBAAe,gBAAgB,kBAAkB;AAAA;AACpE,yBAAe,gBAAgB,aAAa;AAAA,MACnD;AAAA,MACA,uBAAuB,CAAC,uBAAgC;AACtD,YAAI;AAAoB,yBAAe,gBAAgB,iBAAiB;AAAA;AACnE,yBAAe,gBAAgB,YAAY;AAAA,MAClD;AAAA,MACA,2BAA2B,CAAC,uBAAgC;AAC1D,YAAI;AAAoB,yBAAe,gBAAgB,sBAAsB;AAAA;AACxE,yBAAe,gBAAgB,iBAAiB;AAAA,MACvD;AAAA,MACA,mCAAmC,CAAC,uBAAgC;AAClE,YAAI;AAAoB,yBAAe,gBAAgB,+BAA+B;AAAA;AACjF,yBAAe,gBAAgB,0BAA0B;AAAA,MAChE;AAAA,MACA,uBAAuB,MAAM,eAAe,EAAE;AAAA,IAChD;AAAA,IACA,CAAC,oBAAoB,cAAc;AAAA,EACrC;AACF;",
   "names": []
 }

package/dist/esm/config/useShuttleV2.js

@@ -1,11 +1,13 @@
 import * as React from "react";
 import { useEffect } from "react";
 import { useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
-import { defaultProps } from "../react-desc-prop-types";
+import { defaultProps, DSShuttleV2PropTypesSchema } from "../react-desc-prop-types";
 import { usePropsStore, useInternalStore } from "./useStore";
+import { useValidateProps } from "./useValidateProps";
 import { useAutoCalculated } from "./useAutoCalculated";
 const useShuttleV2 = (propsFromUser) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefaults, DSShuttleV2PropTypesSchema);
   const setProps = usePropsStore((state) => state.set);
   const setAutoCalculated = useInternalStore((state) => state.set);
   const autoCalculatedConfig = useAutoCalculated(propsWithDefaults);

package/dist/esm/config/useShuttleV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useShuttleV2.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\n\nimport { type DSShuttleV2T, defaultProps } from '../react-desc-prop-types';\nimport { usePropsStore, useInternalStore } from './useStore';\nimport { useAutoCalculated } from './useAutoCalculated';\nexport const useShuttleV2 = (propsFromUser: DSShuttleV2T.Props) => {\n  // auto-update props-store and auto-calculated when props changes\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSShuttleV2T.InternalProps>(propsFromUser, defaultProps);\n  const setProps = usePropsStore((state) => state.set);\n  const setAutoCalculated = useInternalStore((state) => state.set);\n\n  const autoCalculatedConfig = useAutoCalculated(propsWithDefaults);\n  useEffect(() => {\n    setProps({ ...propsWithDefaults });\n    setAutoCalculated(autoCalculatedConfig);\n  }, [propsWithDefaults, setProps, setAutoCalculated, autoCalculatedConfig]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,oCAAoC;AAE7C,SAA4B,oBAAoB;AAChD,SAAS,eAAe,wBAAwB;AAChD,SAAS,yBAAyB;AAC3B,MAAM,eAAe,CAAC,kBAAsC;AAEjE,QAAM,oBAAoB,6BAAyD,eAAe,YAAY;AAC9G,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,GAAG;AACnD,QAAM,oBAAoB,iBAAiB,CAAC,UAAU,MAAM,GAAG;AAE/D,QAAM,uBAAuB,kBAAkB,iBAAiB;AAChE,YAAU,MAAM;AACd,aAAS,EAAE,GAAG,kBAAkB,CAAC;AACjC,sBAAkB,oBAAoB;AAAA,EACxC,GAAG,CAAC,mBAAmB,UAAU,mBAAmB,oBAAoB,CAAC;AAC3E;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\n\nimport { type DSShuttleV2T, defaultProps, DSShuttleV2PropTypesSchema } from '../react-desc-prop-types';\nimport { usePropsStore, useInternalStore } from './useStore';\nimport { useValidateProps } from './useValidateProps';\nimport { useAutoCalculated } from './useAutoCalculated';\nexport const useShuttleV2 = (propsFromUser: DSShuttleV2T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSShuttleV2T.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefaults, DSShuttleV2PropTypesSchema);\n  // auto-update props-store and auto-calculated when props changes\n  const setProps = usePropsStore((state) => state.set);\n  const setAutoCalculated = useInternalStore((state) => state.set);\n\n  const autoCalculatedConfig = useAutoCalculated(propsWithDefaults);\n  useEffect(() => {\n    setProps({ ...propsWithDefaults });\n    setAutoCalculated(autoCalculatedConfig);\n  }, [propsWithDefaults, setProps, setAutoCalculated, autoCalculatedConfig]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,oCAAoC;AAE7C,SAA4B,cAAc,kCAAkC;AAC5E,SAAS,eAAe,wBAAwB;AAChD,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAC3B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,oBAAoB,6BAAyD,eAAe,YAAY;AAC9G,mBAAiB,mBAAmB,0BAA0B;AAE9D,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,GAAG;AACnD,QAAM,oBAAoB,iBAAiB,CAAC,UAAU,MAAM,GAAG;AAE/D,QAAM,uBAAuB,kBAAkB,iBAAiB;AAChE,YAAU,MAAM;AACd,aAAS,EAAE,GAAG,kBAAkB,CAAC;AACjC,sBAAkB,oBAAoB;AAAA,EACxC,GAAG,CAAC,mBAAmB,UAAU,mBAAmB,oBAAoB,CAAC;AAC3E;",
   "names": []
 }

package/dist/esm/config/useStore/createAtomInStore.bak

@@ -0,0 +1,18 @@
+import { type StoreApi } from 'zustand';
+import type { InternalAtoms, Store } from './useStore';
+
+type StateSetterNewVal =
+  | InternalAtoms[keyof InternalAtoms][0]
+  | ((oldVal: InternalAtoms[keyof InternalAtoms][0]) => InternalAtoms[keyof InternalAtoms][0]);
+export const createAtomInStore = (
+  defaultVal: InternalAtoms[keyof InternalAtoms][0],
+  stateKey: keyof InternalAtoms,
+  set: StoreApi<Store>['setState'],
+  get: StoreApi<Store>['getState'],
+) => {
+  const stateSetter = (newVal: StateSetterNewVal) => {
+    if (typeof newVal === 'function') set({ [stateKey]: [newVal(get()[stateKey][0]), stateSetter] });
+    else set({ [stateKey]: [newVal, stateSetter] });
+  };
+  return [defaultVal, stateSetter] as const;
+};

package/dist/esm/config/useStore/useStore.js

@@ -37,12 +37,25 @@ const internalStoreCreatorFunc = (autoCalculatedData) => create((set, get) => {
     setOverId: (overId) => set({ overId }),
     lastActiveId: "",
     setLastActiveId: (lastActiveId) => set({ lastActiveId }),
+    dndDraggingItem: null,
+    setDndDraggingItem: (dndDraggingItem) => set({ dndDraggingItem }),
+    dndDraggingItemMeta: null,
+    setDndDraggingItemMeta: (dndDraggingItemMeta) => set({ dndDraggingItemMeta }),
     isDropValid: false,
-    setIsDropValid: (isDropValid) => set({ isDropValid })
+    setIsDropValid: (isDropValid) => set({ isDropValid }),
+    sourceLastSelectedItem: null,
+    setSourceLastSelectedItem: (sourceLastSelectedItem) => set({ sourceLastSelectedItem }),
+    destinationLastSelectedItem: null,
+    setDestinationLastSelectedItem: (destinationLastSelectedItem) => set({ destinationLastSelectedItem })
+  };
+  const composedInformation = {
+    getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== "",
+    getPanelLastSelectedItem: (isDestinationPanel) => isDestinationPanel ? get().destinationLastSelectedItem : get().sourceLastSelectedItem
   };
   return {
     ...constants,
     ...internalAtoms,
+    ...composedInformation,
     ...autoCalculatedData
   };
 });

package/dist/esm/config/useStore/useStore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useStore/useStore.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback } from 'react';\nimport create, { type StoreApi } from 'zustand';\nimport createContext from 'zustand/context';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { type useShuttleVirtualized } from '../useAutoCalculated/useShuttleVirtualized';\nimport { type DSShuttleV2T, defaultProps } from '../../react-desc-prop-types';\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants';\nimport { useAutoCalculated } from '../useAutoCalculated';\n\ntype FocusRegion = typeof REGIONS_FOCUSES[keyof typeof REGIONS_FOCUSES];\ntype FocusRegionSetter = (newVal: FocusRegion | ((arg: FocusRegion, store: InternalStore) => FocusRegion)) => void;\n\ntype FocusItem = Omit<typeof ITEMS_FOCUSES[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\ntype FocusItemSetter = (newVal: FocusItem | ((arg: FocusItem, store: InternalStore) => FocusItem)) => void;\n\ntype FocusItemAction = typeof ACTIONS_FOCUSES[keyof typeof ACTIONS_FOCUSES];\ntype FocusItemActionSetter = (\n  newVal: FocusItemAction | ((arg: FocusItemAction, store: InternalStore) => FocusItemAction),\n) => void;\n\ntype UseShuttleVirtualizedT = ReturnType<typeof useShuttleVirtualized>;\nexport interface InternalAtoms {\n  focusRegion: FocusRegion;\n  setFocusRegion: FocusRegionSetter;\n  focusItem: FocusItem;\n  setFocusItem: FocusItemSetter;\n  focusItemAction: FocusItemAction;\n  setFocusItemAction: FocusItemActionSetter;\n  dropIndicatorPosition: number;\n  setDropIndicatorPosition: (newVal: number) => void;\n  overId: string;\n  setOverId: (newVal: string) => void;\n  lastActiveId: string;\n  setLastActiveId: (newVal: string) => void;\n  isDropValid: boolean;\n  setIsDropValid: (newVal: boolean) => void;\n}\nexport interface StoreConstants {\n  set: StoreApi<InternalStore>['setState'];\n}\n\nexport interface InternalStore\n  extends InternalAtoms,\n    UseShuttleVirtualizedT,\n    StoreConstants,\n    ReturnType<typeof useAutoCalculated> {}\nexport interface PropsStore extends DSShuttleV2T.InternalProps {\n  set: StoreApi<PropsStore>['setState'];\n}\n\nconst internalStoreCreatorFunc = (autoCalculatedData: ReturnType<typeof useAutoCalculated>) =>\n  create<InternalStore>((set, get) => {\n    const constants: StoreConstants = {\n      set,\n    };\n    const internalAtoms: InternalAtoms = {\n      focusRegion: '',\n      setFocusRegion: (focusRegion) => {\n        if (typeof focusRegion === 'function') set({ focusRegion: focusRegion(get().focusRegion, get()) });\n        else set({ focusRegion });\n      },\n      focusItem: '',\n      setFocusItem: (focusItem) => {\n        if (typeof focusItem === 'function') set({ focusItem: focusItem(get().focusItem, get()) });\n        else set({ focusItem });\n      },\n      focusItemAction: '',\n      setFocusItemAction: (focusItemAction) => {\n        if (typeof focusItemAction === 'function')\n          set({ focusItemAction: focusItemAction(get().focusItemAction, get()) });\n        else set({ focusItemAction });\n      },\n      dropIndicatorPosition: 0,\n      setDropIndicatorPosition: (dropIndicatorPosition) => set({ dropIndicatorPosition }),\n      overId: '',\n      setOverId: (overId) => set({ overId }),\n      lastActiveId: '',\n      setLastActiveId: (lastActiveId) => set({ lastActiveId }),\n      isDropValid: false,\n      setIsDropValid: (isDropValid) => set({ isDropValid }),\n    };\n\n    return {\n      ...constants,\n      ...internalAtoms,\n      ...autoCalculatedData,\n    };\n  });\nconst propsStoreCreatorFunc = (propsWithDefaults: DSShuttleV2T.InternalProps) =>\n  create<PropsStore>((set) => ({\n    set,\n    ...propsWithDefaults,\n  }));\n\nconst {\n  Provider: InternalProvider,\n  useStore: useInternalStore,\n  useStoreApi: useInternalStoreApi,\n} = createContext<ReturnType<typeof internalStoreCreatorFunc>>();\nconst {\n  Provider: PropsProvider,\n  useStore: usePropsStore,\n  useStoreApi: usePropsStoreApi,\n} = createContext<ReturnType<typeof propsStoreCreatorFunc>>();\n\nconst useShuttleV2InternalStoreConfig = (propsFromUser: DSShuttleV2T.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSShuttleV2T.InternalProps>(propsFromUser, defaultProps);\n  const autoCalculatedData = useAutoCalculated(propsWithDefaults);\n  return useCallback(() => internalStoreCreatorFunc(autoCalculatedData), [autoCalculatedData]);\n};\nconst useShuttleV2PropsStoreConfig = (propsFromUser: DSShuttleV2T.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSShuttleV2T.InternalProps>(propsFromUser, defaultProps);\n\n  return useCallback(() => propsStoreCreatorFunc(propsWithDefaults), [propsWithDefaults]);\n};\n\nexport {\n  useInternalStore,\n  usePropsStore,\n  useInternalStoreApi,\n  usePropsStoreApi,\n  InternalProvider,\n  PropsProvider,\n  useShuttleV2InternalStoreConfig,\n  useShuttleV2PropsStoreConfig,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,OAAO,YAA+B;AACtC,OAAO,mBAAmB;AAC1B,SAAS,oCAAoC;AAE7C,SAA4B,oBAAoB;AAEhD,SAAS,yBAAyB;AA2ClC,MAAM,2BAA2B,CAAC,uBAChC,OAAsB,CAAC,KAAK,QAAQ;AAClC,QAAM,YAA4B;AAAA,IAChC;AAAA,EACF;AACA,QAAM,gBAA+B;AAAA,IACnC,aAAa;AAAA,IACb,gBAAgB,CAAC,gBAAgB;AAC/B,UAAI,OAAO,gBAAgB;AAAY,YAAI,EAAE,aAAa,YAAY,IAAI,EAAE,aAAa,IAAI,CAAC,EAAE,CAAC;AAAA;AAC5F,YAAI,EAAE,YAAY,CAAC;AAAA,IAC1B;AAAA,IACA,WAAW;AAAA,IACX,cAAc,CAAC,cAAc;AAC3B,UAAI,OAAO,cAAc;AAAY,YAAI,EAAE,WAAW,UAAU,IAAI,EAAE,WAAW,IAAI,CAAC,EAAE,CAAC;AAAA;AACpF,YAAI,EAAE,UAAU,CAAC;AAAA,IACxB;AAAA,IACA,iBAAiB;AAAA,IACjB,oBAAoB,CAAC,oBAAoB;AACvC,UAAI,OAAO,oBAAoB;AAC7B,YAAI,EAAE,iBAAiB,gBAAgB,IAAI,EAAE,iBAAiB,IAAI,CAAC,EAAE,CAAC;AAAA;AACnE,YAAI,EAAE,gBAAgB,CAAC;AAAA,IAC9B;AAAA,IACA,uBAAuB;AAAA,IACvB,0BAA0B,CAAC,0BAA0B,IAAI,EAAE,sBAAsB,CAAC;AAAA,IAClF,QAAQ;AAAA,IACR,WAAW,CAAC,WAAW,IAAI,EAAE,OAAO,CAAC;AAAA,IACrC,cAAc;AAAA,IACd,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,aAAa,CAAC;AAAA,IACvD,aAAa;AAAA,IACb,gBAAgB,CAAC,gBAAgB,IAAI,EAAE,YAAY,CAAC;AAAA,EACtD;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;AACH,MAAM,wBAAwB,CAAC,sBAC7B,OAAmB,CAAC,SAAS;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,EAAE;AAEJ,MAAM;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AACf,IAAI,cAA2D;AAC/D,MAAM;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AACf,IAAI,cAAwD;AAE5D,MAAM,kCAAkC,CAAC,kBAAsC;AAC7E,QAAM,oBAAoB,6BAAyD,eAAe,YAAY;AAC9G,QAAM,qBAAqB,kBAAkB,iBAAiB;AAC9D,SAAO,YAAY,MAAM,yBAAyB,kBAAkB,GAAG,CAAC,kBAAkB,CAAC;AAC7F;AACA,MAAM,+BAA+B,CAAC,kBAAsC;AAC1E,QAAM,oBAAoB,6BAAyD,eAAe,YAAY;AAE9G,SAAO,YAAY,MAAM,sBAAsB,iBAAiB,GAAG,CAAC,iBAAiB,CAAC;AACxF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* @typescript-eslint/eslint no-use-before-define: ['error',{ typedefs: false }] */\nimport { useCallback } from 'react';\nimport create, { type StoreApi } from 'zustand';\nimport createContext from 'zustand/context';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { type useShuttleVirtualized } from '../useAutoCalculated/useShuttleVirtualized';\nimport { type DSShuttleV2T, defaultProps } from '../../react-desc-prop-types';\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants';\nimport { useAutoCalculated } from '../useAutoCalculated';\n\ntype FocusRegion = (typeof REGIONS_FOCUSES)[keyof typeof REGIONS_FOCUSES];\ntype FocusRegionSetter = (newVal: FocusRegion | ((arg: FocusRegion, store: InternalStore) => FocusRegion)) => void;\n\ntype FocusItem = Omit<(typeof ITEMS_FOCUSES)[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\ntype FocusItemSetter = (newVal: FocusItem | ((arg: FocusItem, store: InternalStore) => FocusItem)) => void;\n\ntype FocusItemAction = (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\ntype FocusItemActionSetter = (\n  newVal: FocusItemAction | ((arg: FocusItemAction, store: InternalStore) => FocusItemAction),\n) => void;\n\ntype UseShuttleVirtualizedT = ReturnType<typeof useShuttleVirtualized>;\nexport type InternalAtoms = {\n  focusRegion: FocusRegion;\n  setFocusRegion: FocusRegionSetter;\n  focusItem: FocusItem;\n  setFocusItem: FocusItemSetter;\n  focusItemAction: FocusItemAction;\n  setFocusItemAction: FocusItemActionSetter;\n  dropIndicatorPosition: number;\n  setDropIndicatorPosition: (newVal: number) => void;\n  overId: string;\n  setOverId: (newVal: string) => void;\n  dndDraggingItem: DSShuttleV2T.ConfiguredDatum | null;\n  setDndDraggingItem: (newVal: DSShuttleV2T.ConfiguredDatum | null) => void;\n  dndDraggingItemMeta: DSShuttleV2T.ItemMeta | null;\n  setDndDraggingItemMeta: (newVal: DSShuttleV2T.ItemMeta | null) => void;\n  lastActiveId: string;\n  setLastActiveId: (newVal: string) => void;\n  isDropValid: boolean;\n  setIsDropValid: (newVal: boolean) => void;\n  sourceLastSelectedItem: string | null | undefined;\n  setSourceLastSelectedItem: (newVal: string | null | undefined) => void;\n  destinationLastSelectedItem: string | null | undefined;\n  setDestinationLastSelectedItem: (newVal: string | null | undefined) => void;\n};\nexport type ComposedInformation = {\n  getIsDragAndDropHappening: () => boolean;\n  getPanelLastSelectedItem: (isDestinationPanel: boolean) => string | null | undefined;\n};\n\nexport type StoreConstants = {\n  set: StoreApi<InternalStore>['setState'];\n};\n\nexport interface InternalStore\n  extends InternalAtoms,\n    UseShuttleVirtualizedT,\n    StoreConstants,\n    ComposedInformation,\n    ReturnType<typeof useAutoCalculated> {}\nexport interface PropsStore extends DSShuttleV2T.InternalProps {\n  set: StoreApi<PropsStore>['setState'];\n}\n\nconst internalStoreCreatorFunc = (autoCalculatedData: ReturnType<typeof useAutoCalculated>) =>\n  create<InternalStore>((set, get) => {\n    const constants: StoreConstants = {\n      set,\n    };\n    const internalAtoms: InternalAtoms = {\n      focusRegion: '',\n      setFocusRegion: (focusRegion) => {\n        if (typeof focusRegion === 'function') set({ focusRegion: focusRegion(get().focusRegion, get()) });\n        else set({ focusRegion });\n      },\n      focusItem: '',\n      setFocusItem: (focusItem) => {\n        if (typeof focusItem === 'function') set({ focusItem: focusItem(get().focusItem, get()) });\n        else set({ focusItem });\n      },\n      focusItemAction: '',\n      setFocusItemAction: (focusItemAction) => {\n        if (typeof focusItemAction === 'function')\n          set({ focusItemAction: focusItemAction(get().focusItemAction, get()) });\n        else set({ focusItemAction });\n      },\n      dropIndicatorPosition: 0,\n      setDropIndicatorPosition: (dropIndicatorPosition) => set({ dropIndicatorPosition }),\n      overId: '',\n      setOverId: (overId) => set({ overId }),\n      lastActiveId: '',\n      setLastActiveId: (lastActiveId) => set({ lastActiveId }),\n      dndDraggingItem: null,\n      setDndDraggingItem: (dndDraggingItem) => set({ dndDraggingItem }),\n      dndDraggingItemMeta: null,\n      setDndDraggingItemMeta: (dndDraggingItemMeta) => set({ dndDraggingItemMeta }),\n      isDropValid: false,\n      setIsDropValid: (isDropValid) => set({ isDropValid }),\n      sourceLastSelectedItem: null,\n      setSourceLastSelectedItem: (sourceLastSelectedItem) => set({ sourceLastSelectedItem }),\n      destinationLastSelectedItem: null,\n      setDestinationLastSelectedItem: (destinationLastSelectedItem) => set({ destinationLastSelectedItem }),\n    };\n\n    const composedInformation: ComposedInformation = {\n      getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n      getPanelLastSelectedItem: (isDestinationPanel) =>\n        isDestinationPanel ? get().destinationLastSelectedItem : get().sourceLastSelectedItem,\n    };\n\n    return {\n      ...constants,\n      ...internalAtoms,\n      ...composedInformation,\n      ...autoCalculatedData,\n    };\n  });\nconst propsStoreCreatorFunc = (propsWithDefaults: DSShuttleV2T.InternalProps) =>\n  create<PropsStore>((set) => ({\n    set,\n    ...propsWithDefaults,\n  }));\n\nconst {\n  Provider: InternalProvider,\n  useStore: useInternalStore,\n  useStoreApi: useInternalStoreApi,\n} = createContext<ReturnType<typeof internalStoreCreatorFunc>>();\nconst {\n  Provider: PropsProvider,\n  useStore: usePropsStore,\n  useStoreApi: usePropsStoreApi,\n} = createContext<ReturnType<typeof propsStoreCreatorFunc>>();\n\nconst useShuttleV2InternalStoreConfig = (propsFromUser: DSShuttleV2T.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSShuttleV2T.InternalProps>(propsFromUser, defaultProps);\n  const autoCalculatedData = useAutoCalculated(propsWithDefaults);\n  return useCallback(() => internalStoreCreatorFunc(autoCalculatedData), [autoCalculatedData]);\n};\nconst useShuttleV2PropsStoreConfig = (propsFromUser: DSShuttleV2T.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSShuttleV2T.InternalProps>(propsFromUser, defaultProps);\n\n  return useCallback(() => propsStoreCreatorFunc(propsWithDefaults), [propsWithDefaults]);\n};\n\nexport {\n  useInternalStore,\n  usePropsStore,\n  useInternalStoreApi,\n  usePropsStoreApi,\n  InternalProvider,\n  PropsProvider,\n  useShuttleV2InternalStoreConfig,\n  useShuttleV2PropsStoreConfig,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
+import { DSShuttleV2Name } from "../constants";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSShuttleV2Name);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { DSShuttleV2Name } from '../constants';\nimport type { DSShuttleV2T } from '../react-desc-prop-types';\n\nexport const useValidateProps = (props: DSShuttleV2T.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSShuttleV2Name);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAE/C,SAAS,uBAAuB;AAGzB,MAAM,mBAAmB,CAAC,OAA2B,cAAgD;AAE1G,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+const DSShuttleV2Name = "ds-shuttle-v2";
 const REGIONS_FOCUSES = {
   SOURCE_HEADER: "source-header",
   SOURCE_PANEL: "source-panel",
@@ -22,8 +23,9 @@ const ACTIONS_FOCUSES = {
 const ITEMS_FOCUSES = {
   FIRST: "first",
   LAST: "last",
-  LOAD_MORE_BTN: "load-more-btn",
-  GET_SPECIFIC_ITEM: ({ id }) => id,
+  LOAD_MORE_BTN_SOURCE: "load-more-btn-source",
+  LOAD_MORE_BTN_DESTINATION: "load-more-btn-destination",
+  GET_SPECIFIC_ITEM: ({ hydratedId }) => hydratedId,
   RESET: ""
 };
 const DATA_TESTID = {
@@ -32,6 +34,7 @@ const DATA_TESTID = {
 export {
   ACTIONS_FOCUSES,
   DATA_TESTID,
+  DSShuttleV2Name,
   ITEMS_FOCUSES,
   REGIONS_FOCUSES
 };

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const REGIONS_FOCUSES = {\n  SOURCE_HEADER: 'source-header',\n  SOURCE_PANEL: 'source-panel',\n  SOURCE_PANEL_ITEM: 'source-panel-item',\n  SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n  SOURCE_BOTTOM: 'source-bottom',\n  DESTINATION_HEADER: 'destination-header',\n  DESTINATION_PANEL: 'destination-panel',\n  DESTINATION_PANEL_ITEM: 'destination-panel-item',\n  DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n  DESTINATION_BOTTOM: 'destination-bottom',\n  RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n  MOVE_BTN: 'move-btn',\n  DRILLDOWN_BTN: 'drilldown-btn',\n  DRAG_N_DROP: 'drag-n-drop',\n  PARENT: 'parent',\n  RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n  FIRST: 'first',\n  LAST: 'last',\n  LOAD_MORE_BTN: 'load-more-btn',\n  GET_SPECIFIC_ITEM: ({ id }: { id: string }) => id,\n  RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n  SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,eAAe;AAAA,EACf,mBAAmB,CAAC,EAAE,GAAG,MAAsB;AAAA,EAC/C,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSShuttleV2Name = 'ds-shuttle-v2' as const;\nexport const REGIONS_FOCUSES = {\n  SOURCE_HEADER: 'source-header',\n  SOURCE_PANEL: 'source-panel',\n  SOURCE_PANEL_ITEM: 'source-panel-item',\n  SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n  SOURCE_BOTTOM: 'source-bottom',\n  DESTINATION_HEADER: 'destination-header',\n  DESTINATION_PANEL: 'destination-panel',\n  DESTINATION_PANEL_ITEM: 'destination-panel-item',\n  DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n  DESTINATION_BOTTOM: 'destination-bottom',\n  RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n  MOVE_BTN: 'move-btn',\n  DRILLDOWN_BTN: 'drilldown-btn',\n  DRAG_N_DROP: 'drag-n-drop',\n  PARENT: 'parent',\n  RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n  FIRST: 'first',\n  LAST: 'last',\n  LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n  LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n  GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n  RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n  SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,mBAAmB,CAAC,EAAE,WAAW,MAA8B;AAAA,EAC/D,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;",
   "names": []
 }

package/dist/esm/parts/Dnd/DndHandle.js

@@ -5,8 +5,14 @@ import { GripperVertical } from "@elliemae/ds-icons";
 import { styled } from "@elliemae/ds-system";
 import { mergeRefs } from "@elliemae/ds-utilities";
 import { DATA_TESTID } from "../../constants";
-const StyledGripperButton = styled.div`
-  cursor: ${({ isActive, isDragOverlay }) => isActive || isDragOverlay ? "grabbing" : "grab"};
+const StyledGripperButtonOrOverlay = styled.div`
+  cursor: ${({ isActive, isDragOverlay, disabled }) => {
+  if (isActive || isDragOverlay)
+    return "grabbing";
+  if (disabled)
+    return "not-allowed";
+  return "grab";
+}};
   outline: none;
   display: flex;
   align-items: center;
@@ -15,24 +21,25 @@ const StyledGripperButton = styled.div`
     outline: 1px solid brand-700;
   }
 `;
-const DragHandle = ({ id, isDndActive, isDragging, isDragOverlay, innerRef, useSortableHelpers }) => /* @__PURE__ */ createElement(
-  StyledGripperButton,
+const DragHandle = ({ id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers }) => /* @__PURE__ */ createElement(
+  StyledGripperButtonOrOverlay,
   {
-    ...useSortableHelpers && {
+    ...!disabled && useSortableHelpers ? {
       ...useSortableHelpers.listeners,
       ...useSortableHelpers.attributes
-    },
+    } : {},
     isActive: isDndActive,
-    isDragOverlay,
     ref: mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef),
     tabIndex: -1,
     "data-testid": DATA_TESTID.SHUTTLE_DRAG_HANDLE,
     id: `${id}-drag-handle`,
-    key: `${id}-drag-handle`
+    key: `${id}-drag-handle`,
+    disabled
   },
-  /* @__PURE__ */ jsx(GripperVertical, { size: "s", color: isDragging ? ["neutral", "500"] : ["brand-primary", "800"] })
+  /* @__PURE__ */ jsx(GripperVertical, { size: "s", color: isDragging || disabled ? ["neutral", "500"] : ["brand-primary", "800"] })
 );
 export {
-  DragHandle
+  DragHandle,
+  StyledGripperButtonOrOverlay
 };
 //# sourceMappingURL=DndHandle.js.map

package/dist/esm/parts/Dnd/DndHandle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DndHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\n\nimport { styled } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../constants';\n\nconst StyledGripperButton = styled.div<{\n  isActive: boolean;\n  isDragOverlay: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay }) => (isActive || isDragOverlay ? 'grabbing' : 'grab')};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  &:focus {\n    outline: 1px solid brand-700;\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  isDragOverlay?: boolean;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n  useSortableHelpers: ReturnType<typeof useSortable>;\n  isDndActive: boolean;\n  isDragging: boolean;\n}> = ({ id, isDndActive, isDragging, isDragOverlay, innerRef, useSortableHelpers }) => (\n  <StyledGripperButton\n    {...(useSortableHelpers && {\n      ...useSortableHelpers.listeners,\n      ...useSortableHelpers.attributes,\n    })}\n    isActive={isDndActive}\n    isDragOverlay={isDragOverlay}\n    ref={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n    tabIndex={-1}\n    data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n    id={`${id}-drag-handle`}\n    key={`${id}-drag-handle`}\n  >\n    <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n  </StyledGripperButton>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2CnB;AAbF;AA7BF,SAAS,uBAAuB;AAGhC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAE5B,MAAM,sBAAsB,OAAO;AAAA,YAIvB,CAAC,EAAE,UAAU,cAAc,MAAO,YAAY,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhF,MAAM,aAOR,CAAC,EAAE,IAAI,aAAa,YAAY,eAAe,UAAU,mBAAmB,MAC/E;AAAA,EAAC;AAAA;AAAA,IACE,GAAI,sBAAsB;AAAA,MACzB,GAAG,mBAAmB;AAAA,MACtB,GAAG,mBAAmB;AAAA,IACxB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,KAAK,UAAU,UAAU,oBAAoB,mBAAmB;AAAA,IAChE,UAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA;AAAA,EAER,oBAAC,mBAAgB,MAAK,KAAI,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAC/F;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\n\nimport { styled } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../constants';\n\nexport const StyledGripperButtonOrOverlay = styled.div<{\n  isActive: boolean;\n  isDragOverlay: boolean;\n  disabled: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay, disabled }) => {\n    if (isActive || isDragOverlay) return 'grabbing';\n    if (disabled) return 'not-allowed';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  &:focus {\n    outline: 1px solid brand-700;\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n  useSortableHelpers: ReturnType<typeof useSortable>;\n  isDndActive: boolean;\n  isDragging: boolean;\n  disabled?: boolean;\n}> = ({ id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers }) => (\n  <StyledGripperButtonOrOverlay\n    {...(!disabled && useSortableHelpers\n      ? {\n          ...useSortableHelpers.listeners,\n          ...useSortableHelpers.attributes,\n        }\n      : {})}\n    isActive={isDndActive}\n    ref={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n    tabIndex={-1}\n    data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n    id={`${id}-drag-handle`}\n    key={`${id}-drag-handle`}\n    disabled={disabled}\n  >\n    <GripperVertical size=\"s\" color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n  </StyledGripperButtonOrOverlay>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmDnB;AAfF;AAlCF,SAAS,uBAAuB;AAGhC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAErB,MAAM,+BAA+B,OAAO;AAAA,YAKvC,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY;AAAe,WAAO;AACtC,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUK,MAAM,aAOR,CAAC,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,mBAAmB,MAClF;AAAA,EAAC;AAAA;AAAA,IACE,GAAI,CAAC,YAAY,qBACd;AAAA,MACE,GAAG,mBAAmB;AAAA,MACtB,GAAG,mBAAmB;AAAA,IACxB,IACA,CAAC;AAAA,IACL,UAAU;AAAA,IACV,KAAK,UAAU,UAAU,oBAAoB,mBAAmB;AAAA,IAChE,UAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR;AAAA;AAAA,EAEA,oBAAC,mBAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAC3G;",
   "names": []
 }

package/dist/esm/parts/Dnd/DragOverlay.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { GripperVertical } from "@elliemae/ds-icons";
+import { DATA_TESTID } from "../../constants";
+import { StyledGripperButtonOrOverlay } from "./DndHandle";
+const DragOverlay = ({ id, isDragging, isDndActive }) => /* @__PURE__ */ jsx(
+  StyledGripperButtonOrOverlay,
+  {
+    isDragOverlay: true,
+    isActive: isDndActive,
+    tabIndex: -1,
+    "data-testid": DATA_TESTID.SHUTTLE_DRAG_HANDLE,
+    id: `${id}-drag-overlay`,
+    children: /* @__PURE__ */ jsx(GripperVertical, { size: "s", color: isDragging ? ["neutral", "500"] : ["brand-primary", "800"] })
+  },
+  `${id}-drag-overlay`
+);
+export {
+  DragOverlay
+};
+//# sourceMappingURL=DragOverlay.js.map

package/dist/esm/parts/Dnd/DragOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DragOverlay.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../constants';\nimport { StyledGripperButtonOrOverlay } from './DndHandle';\n\nexport const DragOverlay: React.ComponentType<{\n  id: string;\n  isDndActive: boolean;\n  isDragging: boolean;\n}> = ({ id, isDragging, isDndActive }) => (\n  <StyledGripperButtonOrOverlay\n    isDragOverlay\n    isActive={isDndActive}\n    tabIndex={-1}\n    data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n    id={`${id}-drag-overlay`}\n    key={`${id}-drag-overlay`}\n  >\n    <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n  </StyledGripperButtonOrOverlay>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBnB;AAjBJ,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oCAAoC;AAEtC,MAAM,cAIR,CAAC,EAAE,IAAI,YAAY,YAAY,MAClC;AAAA,EAAC;AAAA;AAAA,IACC,eAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IAGP,8BAAC,mBAAgB,MAAK,KAAI,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,EAFxF,GAAG;AAGV;",
+  "names": []
+}

package/dist/esm/parts/Header.js

@@ -5,14 +5,14 @@ import { Grid } from "@elliemae/ds-grid";
 import { Search } from "@elliemae/ds-icons";
 import {
   DSButtonV2
-} from "@elliemae/ds-button";
+} from "@elliemae/ds-button-v2";
 import { styled } from "@elliemae/ds-system";
 import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions";
 import { usePropsStore } from "../config/useStore";
 import { useFocusTracker } from "../config/useFocusTracker";
 const StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })`
-  width: 16px;
-  height: 16px;
+  width: 1.231rem;
+  height: 1.231rem;
 `;
 const Header = React2.memo(({ isDestinationPanel }) => {
   const HeaderRenderer = usePropsStore((state) => isDestinationPanel ? state.DestinationHeader : state.SourceHeader);
@@ -42,7 +42,7 @@ const Header = React2.memo(({ isDestinationPanel }) => {
   }, [onSearchBarOpen]);
   return /* @__PURE__ */ jsxs(Grid, { onFocus: onHeaderFocus, cols, children: [
     /* @__PURE__ */ jsx(HeaderRenderer, {}),
-    onSearchBarOpen ? /* @__PURE__ */ jsx(StyledIconButton, { buttonType: "icon", onClick: handleFilterClick, children: /* @__PURE__ */ jsx(Search, { width: "14px", height: "14px" }) }) : null
+    onSearchBarOpen ? /* @__PURE__ */ jsx(Grid, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(StyledIconButton, { buttonType: "icon", onClick: handleFilterClick, children: /* @__PURE__ */ jsx(Search, { width: "1.077rem", height: "1.077rem" }) }) }) : null
   ] });
 });
 export {

package/dist/esm/parts/Header.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Header.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  DSButtonV2,\n  type DSButtonT,\n  // BUTTON_SIZES\n} from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\nimport { usePropsStore } from '../config/useStore';\nimport { useFocusTracker } from '../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../react-desc-prop-types';\n\nconst StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })`\n  width: 16px;\n  height: 16px;\n`;\nexport const Header = React.memo(({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  const HeaderRenderer = usePropsStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const onSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n  );\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const { trackFocusRegionHeader, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const onHeaderFocus = React.useCallback(() => {\n    trackFocusRegionHeader(isDestinationPanel);\n    trackFocusItemReset();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionHeader]);\n\n  const handleFilterClick = React.useCallback(\n    (event: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onSearchBarOpen?.(!isSearchBarOpen, { event });\n    },\n    [isSearchBarOpen, onSearchBarOpen],\n  );\n\n  const cols = React.useMemo(() => {\n    const finalCols = ['1fr'];\n    if (onSearchBarOpen) finalCols.push('auto');\n    return finalCols;\n  }, [onSearchBarOpen]);\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer />\n      {onSearchBarOpen ? (\n        <StyledIconButton buttonType=\"icon\" onClick={handleFilterClick}>\n          <Search width=\"14px\" height=\"14px\" />\n        </StyledIconButton>\n      ) : null}\n    </Grid>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+CnB,SACE,KADF;AA/CJ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAIzG,MAAM,SAASA,OAAM,KAAK,CAAC,EAAE,mBAAmB,MAAkC;AACvF,QAAM,iBAAiB,cAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC/F,QAAM,gBAAgBA,OAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,UAA+D;AAC9D,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI;AAAiB,gBAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,qBAAC,QAAK,SAAS,eAAe,MAC5B;AAAA,wBAAC,kBAAe;AAAA,IACf,kBACC,oBAAC,oBAAiB,YAAW,QAAO,SAAS,mBAC3C,8BAAC,UAAO,OAAM,QAAO,QAAO,QAAO,GACrC,IACE;AAAA,KACN;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  DSButtonV2,\n  type DSButtonT,\n  // BUTTON_SIZES\n} from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\nimport { usePropsStore } from '../config/useStore';\nimport { useFocusTracker } from '../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../react-desc-prop-types';\n\nconst StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })`\n  width: 1.231rem;\n  height: 1.231rem;\n`;\nexport const Header = React.memo(({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  const HeaderRenderer = usePropsStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const onSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n  );\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const { trackFocusRegionHeader, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const onHeaderFocus = React.useCallback(() => {\n    trackFocusRegionHeader(isDestinationPanel);\n    trackFocusItemReset();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionHeader]);\n\n  const handleFilterClick = React.useCallback(\n    (event: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onSearchBarOpen?.(!isSearchBarOpen, { event });\n    },\n    [isSearchBarOpen, onSearchBarOpen],\n  );\n\n  const cols = React.useMemo(() => {\n    const finalCols = ['1fr'];\n    if (onSearchBarOpen) finalCols.push('auto');\n    return finalCols;\n  }, [onSearchBarOpen]);\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer />\n      {onSearchBarOpen ? (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n        <StyledIconButton buttonType=\"icon\" onClick={handleFilterClick}>\n          <Search width=\"1.077rem\" height=\"1.077rem\" />\n        </StyledIconButton>\n        </Grid>\n      ) : null}\n    </Grid>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+CnB,SACE,KADF;AA/CJ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAIzG,MAAM,SAASA,OAAM,KAAK,CAAC,EAAE,mBAAmB,MAAkC;AACvF,QAAM,iBAAiB,cAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC/F,QAAM,gBAAgBA,OAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,UAA+D;AAC9D,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI;AAAiB,gBAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,qBAAC,QAAK,SAAS,eAAe,MAC5B;AAAA,wBAAC,kBAAe;AAAA,IACf,kBACC,oBAAC,QAAK,YAAW,UAAS,gBAAe,UACzC,8BAAC,oBAAiB,YAAW,QAAO,SAAS,mBAC3C,8BAAC,UAAO,OAAM,YAAW,QAAO,YAAW,GAC7C,GACA,IACE;AAAA,KACN;AAEJ,CAAC;",
   "names": ["React"]
 }