@elliemae/ds-shuttle-v2 3.16.0-next.2 → 3.16.0-next.21

package/dist/esm/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusRegionTrackers } from '../../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInternalStore } from '../../../config/useStore';\n\nexport const useLoadMoreBtnArrowNavigation = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusRegionTrackers();\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n\n  const onLoadMoreButtonKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();\n\n      // =============================================================================\n      // THIS IS NOT LIKE /src/parts/Item/useItemArrowNavigation.tsx\n      // THIS IS INVERTED BY DESIGN AND DESIRED TO BE INVERTED\n      // =============================================================================\n      // load-more-btn -> last element\n      if (key === 'ArrowUp') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusNextItem(panelMetaInfo); // this results in \"Last\" element of the list\n        trackFocusActionParent();\n      }\n      // load-more-btn -> first element\n      if (key === 'ArrowDown') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusPrevItem(panelMetaInfo); // this results in \"First\" element of the list\n        trackFocusActionParent();\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      panelMetaInfo,\n      trackFocusNextItem,\n      trackFocusActionParent,\n      trackFocusPrevItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB,wBAAwB,8BAA8B;AAEpF,SAAS,wBAAwB;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,IAAI,oBAAoB;AACvE,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,uBAAuB;AAC7D,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAE7F,QAAM,0BAA0BA,OAAM;AAAA,IACpC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AAC7D,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AAO9D,UAAI,QAAQ,WAAW;AACrB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAEA,UAAI,QAAQ,aAAa;AACvB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  useFocusItemTracker,\n  useFocusActionTrackers,\n  useFocusRegionTrackers,\n} from '../../../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../../config/useStore/index.js';\n\nexport const useLoadMoreBtnArrowNavigation = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusRegionTrackers();\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n\n  const onLoadMoreButtonKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();\n\n      // =============================================================================\n      // THIS IS NOT LIKE /src/parts/Item/useItemArrowNavigation.tsx\n      // THIS IS INVERTED BY DESIGN AND DESIRED TO BE INVERTED\n      // =============================================================================\n      // load-more-btn -> last element\n      if (key === 'ArrowUp') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusNextItem(panelMetaInfo); // this results in \"Last\" element of the list\n        trackFocusActionParent();\n      }\n      // load-more-btn -> first element\n      if (key === 'ArrowDown') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusPrevItem(panelMetaInfo); // this results in \"First\" element of the list\n        trackFocusActionParent();\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      panelMetaInfo,\n      trackFocusNextItem,\n      trackFocusActionParent,\n      trackFocusPrevItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,IAAI,oBAAoB;AACvE,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,uBAAuB;AAC7D,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAE7F,QAAM,0BAA0BA,OAAM;AAAA,IACpC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AAC7D,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AAO9D,UAAI,QAAQ,WAAW;AACrB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAEA,UAAI,QAAQ,aAAa;AACvB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
   "names": ["React"]
 }

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledEmptyListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`
   color: neutral-500;
 `;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/EmptyItems.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 { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledEmptyListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`\n  color: neutral-500;\n`;\nexport const EmptyItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledEmptyListWrapper alignItems=\"center\" justifyContent=\"center\">\n    There are no items to display\n  </StyledEmptyListWrapper>\n);\n"],
+  "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 { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledEmptyListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`\n  color: neutral-500;\n`;\nexport const EmptyItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledEmptyListWrapper alignItems=\"center\" justifyContent=\"center\">\n    There are no items to display\n  </StyledEmptyListWrapper>\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACYrB;AATF,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,yBAAyB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAGzG,MAAM,aAAa,CAAC,kBACzB,oBAAC,0BAAuB,YAAW,UAAS,gBAAe,UAAS,2CAEpE;",
   "names": []
 }

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

@@ -3,12 +3,12 @@ import { jsx } from "react/jsx-runtime";
 import React2, { useMemo } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-import { usePropsStore } from "../../../../config/useStore";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../../config/DSShuttleV2Definitions";
-import { ItemSortable } from "../../../Item/Item";
-import { withConditionalDnDRowContext } from "../../../HoC/withConditionalDnDRowContext";
-import { useGetDatumHydratables } from "./useGetDatumHydratables";
-import { getDatumFlags } from "./getDatumFlags";
+import { usePropsStore } from "../../../../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../../config/DSShuttleV2Definitions.js";
+import { ItemSortable } from "../../../Item/Item.js";
+import { withConditionalDnDRowContext } from "../../../HoC/withConditionalDnDRowContext.js";
+import { useGetDatumHydratables } from "./useGetDatumHydratables.js";
+import { getDatumFlags } from "./getDatumFlags.js";
 const StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`
   position: relative;
 `;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/Index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions';\nimport { ItemSortable } from '../../../Item/Item';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext';\nimport { useGetDatumHydratables } from './useGetDatumHydratables';\nimport { getDatumFlags } from './getDatumFlags';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = usePropsStore((state) => (isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize));\n\n  const virtualItems = usePropsStore((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  const wrapperAriaLabel = useMemo(\n    () => `${isDestinationPanel ? 'destination' : 'source'}  panel`,\n    [isDestinationPanel],\n  );\n  const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n  return (\n    <StyledItemsWrapper\n      aria-label={wrapperAriaLabel}\n      role=\"listbox\"\n      alignItems=\"flex-start\"\n      rows={rows}\n      style={{ height: `${totalSize}px` }}\n    >\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        const { original: datum, ...datumInternalMeta } = item;\n        const datumHydratables = getDatumHydratables(item);\n        const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n        const itemMeta = {\n          datum,\n          datumHydratables,\n          datumInternalMeta,\n          datumRenderFlags,\n          ...panelMetaInfo,\n          withDragNDrop,\n        };\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            <div ref={virtualRow.measureRef}>\n              <ItemSortable key={datumHydratables.id} {...itemMeta} />\n            </div>\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4ET;AA3Ed,OAAOA,UAAS,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAE9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAIvG,MAAM,kBAAkBA,OAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAc,CAAC,UAC9B,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,YAAY,cAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AAEpH,QAAM,eAAe;AAAA,IAAc,CAAC,UAClC,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,QAAM,mBAAmB;AAAA,IACvB,MAAM,GAAG,qBAAqB,gBAAgB;AAAA,IAC9C,CAAC,kBAAkB;AAAA,EACrB;AACA,QAAM,sBAAsB,uBAAuB,aAAa;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,cAAc;AAAA,MAEjC,wBAAc,IAAI,CAAC,eAAe;AACjC,cAAM,OAAO,SAAS,WAAW;AACjC,cAAM,EAAE,UAAU,UAAU,kBAAkB,IAAI;AAClD,cAAM,mBAAmB,oBAAoB,IAAI;AACjD,cAAM,mBAAmB,cAAc,EAAE,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,cAAc,CAAC;AACtG,cAAM,WAAW;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,QACF;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,OAAO;AAAA,cACP,QAAQ,GAAG,WAAW;AAAA,cACtB,WAAW,cAAc,WAAW;AAAA,YACtC;AAAA,YAEA,8BAAC,SAAI,KAAK,WAAW,YACnB,8BAAC,gBAAwC,GAAG,YAAzB,iBAAiB,EAAkB,GACxD;AAAA;AAAA,UAZK,WAAW;AAAA,QAalB;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,gBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions.js';\nimport { ItemSortable } from '../../../Item/Item.js';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext.js';\nimport { useGetDatumHydratables } from './useGetDatumHydratables.js';\nimport { getDatumFlags } from './getDatumFlags.js';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = usePropsStore((state) => (isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize));\n\n  const virtualItems = usePropsStore((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  const wrapperAriaLabel = useMemo(\n    () => `${isDestinationPanel ? 'destination' : 'source'}  panel`,\n    [isDestinationPanel],\n  );\n  const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n  return (\n    <StyledItemsWrapper\n      aria-label={wrapperAriaLabel}\n      role=\"listbox\"\n      alignItems=\"flex-start\"\n      rows={rows}\n      style={{ height: `${totalSize}px` }}\n    >\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        const { original: datum, ...datumInternalMeta } = item;\n        const datumHydratables = getDatumHydratables(item);\n        const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n        const itemMeta = {\n          datum,\n          datumHydratables,\n          datumInternalMeta,\n          datumRenderFlags,\n          ...panelMetaInfo,\n          withDragNDrop,\n        };\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            <div ref={virtualRow.measureRef}>\n              <ItemSortable key={datumHydratables.id} {...itemMeta} />\n            </div>\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4ET;AA3Ed,OAAOA,UAAS,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAE9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAIvG,MAAM,kBAAkBA,OAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAc,CAAC,UAC9B,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,YAAY,cAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AAEpH,QAAM,eAAe;AAAA,IAAc,CAAC,UAClC,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,QAAM,mBAAmB;AAAA,IACvB,MAAM,GAAG,qBAAqB,gBAAgB;AAAA,IAC9C,CAAC,kBAAkB;AAAA,EACrB;AACA,QAAM,sBAAsB,uBAAuB,aAAa;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,cAAc;AAAA,MAEjC,wBAAc,IAAI,CAAC,eAAe;AACjC,cAAM,OAAO,SAAS,WAAW,KAAK;AACtC,cAAM,EAAE,UAAU,OAAO,GAAG,kBAAkB,IAAI;AAClD,cAAM,mBAAmB,oBAAoB,IAAI;AACjD,cAAM,mBAAmB,cAAc,EAAE,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,cAAc,CAAC;AACtG,cAAM,WAAW;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,QACF;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,OAAO;AAAA,cACP,QAAQ,GAAG,WAAW;AAAA,cACtB,WAAW,cAAc,WAAW;AAAA,YACtC;AAAA,YAEA,8BAAC,SAAI,KAAK,WAAW,YACnB,8BAAC,gBAAwC,GAAG,YAAzB,iBAAiB,EAAkB,GACxD;AAAA;AAAA,UAZK,WAAW;AAAA,QAalB;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,gBAAQ;",
   "names": ["React"]
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { usePropsStore } from "../../../../config/useStore";
+import { usePropsStore } from "../../../../config/useStore/index.js";
 const useGetDatumHydratables = (panelMetaInfo) => {
   const getLabel = usePropsStore((state) => state.getLabel);
   const getSubtitle = usePropsStore((state) => state.getSubtitle);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { usePropsStore } from '../../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types';\n\nexport const useGetDatumHydratables = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getLabel = usePropsStore((state) => state.getLabel);\n  const getSubtitle = usePropsStore((state) => state.getSubtitle);\n  const getIcon = usePropsStore((state) => state.getIcon);\n  const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);\n  const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);\n\n  const getDatumHydratables = React.useCallback(\n    (item: DSShuttleV2T.ConfiguredDatum) => {\n      const { original, ...datumMeta } = item;\n\n      return {\n        id: datumMeta.hydratedId,\n        preventMove: datumMeta.hydratedPreventMove,\n        label: getLabel(original, { datumMeta, panelMetaInfo }),\n        ...(getSubtitle !== undefined ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getIcon !== undefined ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getCustomRenderer !== undefined\n          ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n        ...(getPreventDrilldown !== undefined\n          ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n      };\n    },\n    [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getSubtitle, panelMetaInfo],\n  );\n  return getDatumHydratables;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAGvB,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,cAAc,cAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,UAAU,cAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,sBAAsB,cAAc,CAAC,UAAU,MAAM,mBAAmB;AAE9E,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAuC;AACtC,YAAM,EAAE,aAAa,UAAU,IAAI;AAEnC,aAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,aAAa,UAAU;AAAA,QACvB,OAAO,SAAS,UAAU,EAAE,WAAW,cAAc,CAAC;AAAA,QACtD,GAAI,gBAAgB,SAAY,EAAE,UAAU,YAAY,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACrG,GAAI,YAAY,SAAY,EAAE,MAAM,QAAQ,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACzF,GAAI,sBAAsB,SACtB,EAAE,gBAAgB,kBAAkB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAC5E,CAAC;AAAA,QACL,GAAI,wBAAwB,SACxB,EAAE,kBAAkB,oBAAoB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAChF,CAAC;AAAA,MACP;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,SAAS,UAAU,qBAAqB,aAAa,aAAa;AAAA,EACxF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { usePropsStore } from '../../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types.js';\n\nexport const useGetDatumHydratables = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getLabel = usePropsStore((state) => state.getLabel);\n  const getSubtitle = usePropsStore((state) => state.getSubtitle);\n  const getIcon = usePropsStore((state) => state.getIcon);\n  const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);\n  const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);\n\n  const getDatumHydratables = React.useCallback(\n    (item: DSShuttleV2T.ConfiguredDatum) => {\n      const { original, ...datumMeta } = item;\n\n      return {\n        id: datumMeta.hydratedId,\n        preventMove: datumMeta.hydratedPreventMove,\n        label: getLabel(original, { datumMeta, panelMetaInfo }),\n        ...(getSubtitle !== undefined ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getIcon !== undefined ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getCustomRenderer !== undefined\n          ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n        ...(getPreventDrilldown !== undefined\n          ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n      };\n    },\n    [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getSubtitle, panelMetaInfo],\n  );\n  return getDatumHydratables;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAGvB,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,cAAc,cAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,UAAU,cAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,sBAAsB,cAAc,CAAC,UAAU,MAAM,mBAAmB;AAE9E,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAuC;AACtC,YAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AAEnC,aAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,aAAa,UAAU;AAAA,QACvB,OAAO,SAAS,UAAU,EAAE,WAAW,cAAc,CAAC;AAAA,QACtD,GAAI,gBAAgB,SAAY,EAAE,UAAU,YAAY,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACrG,GAAI,YAAY,SAAY,EAAE,MAAM,QAAQ,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACzF,GAAI,sBAAsB,SACtB,EAAE,gBAAgB,kBAAkB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAC5E,CAAC;AAAA,QACL,GAAI,wBAAwB,SACxB,EAAE,kBAAkB,oBAAoB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAChF,CAAC;AAAA,MACP;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,SAAS,UAAU,qBAAqB,aAAa,aAAa;AAAA,EACxF;AACA,SAAO;AACT;",
   "names": ["React"]
 }

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

@@ -3,7 +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";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`
   color: neutral-500;
 `;

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"],
+  "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.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\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;",
   "names": []
 }

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

@@ -5,11 +5,11 @@ import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
-import { REGIONS_FOCUSES } from "../../../constants";
-import { useHandleMoveSelection } from "../../../config/itemMovementHelpers";
-import { useInternalStore } from "../../../config/useStore";
-import { useFocusTracker } from "../../../config/useFocusTracker";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { REGIONS_FOCUSES } from "../../../constants/index.js";
+import { useHandleMoveSelection } from "../../../config/itemMovementHelpers.js";
+import { useInternalStore } from "../../../config/useStore/index.js";
+import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
   position: absolute;
   background-color: neutral-000;
@@ -78,6 +78,17 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
     },
     [currRegion, setZustandRef]
   );
+  const handleMoveAllKeyDown = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      if (["ArrowLeft", "ArrowRight"].includes(key)) {
+        trackFocusItemReset();
+        trackFocusActionReset();
+        trackFocusRegionPanel(isDestinationPanel);
+      }
+    },
+    [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel]
+  );
   return /* @__PURE__ */ jsx(
     StyledMoveMultipleWrapper,
     {
@@ -92,6 +103,7 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
           buttonType: "icon",
           onClick: handleMoveAllAction,
           onFocus: handleMoveAllBtnFocus,
+          onKeyDown: handleMoveAllKeyDown,
           innerRef: innerRefHandlerMoveAll,
           children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, { width: "1.538", height: "1.538rem" })
         }

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-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers';\nimport { useInternalStore } from '../../../config/useStore';\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: 5rem;\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, trackFocusRegionPanelFocusMoveAll, 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    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel\n    ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n    : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n  const innerRefHandlerMoveAll = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        innerRef={innerRefHandlerMoveAll}\n      >\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"1.538\" height=\"1.538rem\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoGb;AApGV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAC3C,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,uBAAuB;AAEhC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,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,mCAAmC,qBAAqB,sBAAsB,IAC3G,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,sCAAkC,kBAAkB;AAAA,EACtD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,iCAAiC,CAAC;AACtG,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBACf,gBAAgB,kCAChB,gBAAgB;AACpB,QAAM,yBAAyBA,OAAM;AAAA,IACnC,CAAC,SAAmC;AAClC,oBAAc,CAAC,YAAY,IAAI,EAAE,GAAG,IAAI;AAAA,IAC1C;AAAA,IACA,CAAC,YAAY,aAAa;AAAA,EAC5B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,SAAS;AAAA,UACT,SAAS;AAAA,UACT,UAAU;AAAA,UAET,+BACC,oBAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,oBAAC,6BAA0B,OAAM,SAAQ,QAAO,YAAW;AAAA;AAAA,MAE/D;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-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\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: 5rem;\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, trackFocusRegionPanelFocusMoveAll, 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    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel\n    ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n    : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n  const innerRefHandlerMoveAll = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n\n  const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const { key } = e;\n      if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n        trackFocusItemReset();\n        trackFocusActionReset();\n        trackFocusRegionPanel(isDestinationPanel);\n      }\n    },\n    [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n  );\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        onKeyDown={handleMoveAllKeyDown}\n        innerRef={innerRefHandlerMoveAll}\n      >\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"1.538\" height=\"1.538rem\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiHb;AAjHV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAC3C,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,uBAAuB;AAEhC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,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,mCAAmC,qBAAqB,sBAAsB,IAC3G,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,sCAAkC,kBAAkB;AAAA,EACtD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,iCAAiC,CAAC;AACtG,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBACf,gBAAgB,kCAChB,gBAAgB;AACpB,QAAM,yBAAyBA,OAAM;AAAA,IACnC,CAAC,SAAmC;AAClC,oBAAc,CAAC,YAAY,IAAI,EAAE,GAAG,IAAI;AAAA,IAC1C;AAAA,IACA,CAAC,YAAY,aAAa;AAAA,EAC5B;AAEA,QAAM,uBAAuBA,OAAM;AAAA,IACjC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,GAAG,GAAG;AAC7C,4BAAoB;AACpB,8BAAsB;AACtB,8BAAsB,kBAAkB;AAAA,MAC1C;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB,uBAAuB,uBAAuB,kBAAkB;AAAA,EACxF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,SAAS;AAAA,UACT,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAU;AAAA,UAET,+BACC,oBAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,oBAAC,6BAA0B,OAAM,SAAQ,QAAO,YAAW;AAAA;AAAA,MAE/D;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -4,14 +4,14 @@ 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/Index";
-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";
+import { usePropsStore, useInternalStore } from "../../../config/useStore/index.js";
+import { ItemListWrapperWithContext } from "./ItemListWrapper/Index.js";
+import { EmptyItems } from "./EmptyItems.js";
+import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
+import { LoadingItems } from "./LoadingItems.js";
+import { MultipleSelectionAction } from "./MultipleSelectionAction.js";
+import { REGIONS_FOCUSES } from "../../../constants/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const useInnerRefHandlers = (isDestinationPanel) => {
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;

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/Index';\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 setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [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: 2px solid brand-700;\n    }\n  }\n`;\nconst StyledMidScroller = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID_SCROLLER })`\n  overflow: auto;\n  max-height: 38.462rem;\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false, hasMultipleSelection } = 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 = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n  const scrollToIndex = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationScrollToIndex : state.sourceScrollToIndex,\n  );\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\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    trackFocusLoadMoreBtnDestination,\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      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\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') {\n          scrollToIndex(0);\n          trackFocusItemFirst(panelMetaInfo);\n        }\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) {\n            if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n            else trackFocusLoadMoreBtn();\n          } else {\n            trackFocusItemLast(panelMetaInfo);\n            scrollToIndex(itemsLength - 1);\n          }\n        }\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      isDestinationPanel,\n      trackFocusActionParent,\n      scrollToIndex,\n      trackFocusItemFirst,\n      panelMetaInfo,\n      withLoadMore,\n      trackFocusLoadMoreBtnDestination,\n      trackFocusLoadMoreBtn,\n      trackFocusItemLast,\n      itemsLength,\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 {...panelMetaInfo} /> : 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 { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index.js';\nimport { EmptyItems } from './EmptyItems.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { LoadingItems } from './LoadingItems.js';\nimport { MultipleSelectionAction } from './MultipleSelectionAction.js';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [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: 2px solid brand-700;\n    }\n  }\n`;\nconst StyledMidScroller = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID_SCROLLER })`\n  overflow: auto;\n  max-height: 38.462rem;\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false, hasMultipleSelection } = 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 = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n  const scrollToIndex = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationScrollToIndex : state.sourceScrollToIndex,\n  );\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\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    trackFocusLoadMoreBtnDestination,\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      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\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') {\n          scrollToIndex(0);\n          trackFocusItemFirst(panelMetaInfo);\n        }\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) {\n            if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n            else trackFocusLoadMoreBtn();\n          } else {\n            trackFocusItemLast(panelMetaInfo);\n            scrollToIndex(itemsLength - 1);\n          }\n        }\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      isDestinationPanel,\n      trackFocusActionParent,\n      scrollToIndex,\n      trackFocusItemFirst,\n      panelMetaInfo,\n      withLoadMore,\n      trackFocusLoadMoreBtnDestination,\n      trackFocusLoadMoreBtn,\n      trackFocusItemLast,\n      itemsLength,\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 {...panelMetaInfo} /> : null}\n    </StyledListWrapperMid>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -3,10 +3,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 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";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { SelectionHeader } from "./SelectionHeader.js";
+import { PanelFilterSection } from "./PanelFilterSection.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;
 const PanelContentTopSection = (panelMetaInfo) => {
   const { isDestinationPanel = false } = panelMetaInfo;

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"],
+  "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/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { SelectionHeader } from './SelectionHeader.js';\nimport { PanelFilterSection } from './PanelFilterSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\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;",
   "names": ["React"]
 }

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

@@ -4,8 +4,8 @@ import React2 from "react";
 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";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`
   border-bottom: 1px solid neutral-400;
   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"],
+  "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/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\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;",
   "names": ["React"]
 }

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

@@ -4,8 +4,8 @@ import React2, { useMemo } from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
 import { Grid } from "@elliemae/ds-grid";
-import { usePropsStore } from "../../../config/useStore";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledSelectionHeaderWrapper = styled(Grid, {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.AREA_SELECTION_HEADER

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/SelectionHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledCheckbox, type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledSelectionHeaderWrapper = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER,\n})`\n  line-height: 1;\n  font-size: 1rem;\n  background-color: neutral-000;\n  border-bottom: 1px solid neutral-400;\n`;\nconst StyledSelectionHeaderCountLabel = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER_COUNT_LABEL,\n})`\n  text-align: end;\n  color: neutral-500;\n  font-weight: 600;\n`;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo(({ isDestinationPanel = false }: DSShuttleV2T.PanelMetaInfo) => {\n  const selectionableItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableData : state.sourceSelectionableData,\n  );\n  const ids = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableIds : state.sourceSelectionableIds,\n  );\n  const ariaControls = useMemo(\n    () =>\n      ids\n        .split(' ')\n        .map((d) => `${d}-wrapper`)\n        .join(' '),\n    [ids],\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const selectionLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n  );\n  const checkboxValue = React.useMemo(() => {\n    let newVal: boolean | 'mixed' = false;\n    if (selectionLength > 0)\n      if (selectionLength === selectionableItems.length) newVal = true;\n      else newVal = 'mixed';\n    return newVal;\n  }, [selectionableItems.length, selectionLength]);\n\n  const handleSelectAll = React.useCallback<DSControlledCheckboxT.InternalProps['onChange']>(\n    (_, event) => {\n      if (checkboxValue === true) {\n        onSelectionChange({}, { event });\n      } else {\n        const newSelection: DSShuttleV2T.InternalProps['sourceSelectedItems'] = {};\n        selectionableItems.forEach((selectableItem) => {\n          newSelection[selectableItem.hydratedId] = true;\n        });\n        onSelectionChange(newSelection, { event });\n      }\n    },\n    [checkboxValue, onSelectionChange, selectionableItems],\n  );\n\n  return (\n    <StyledSelectionHeaderWrapper cols={wrapperCols} justifyContent=\"center\" alignItems=\"center\" py=\"7px\" px=\"xxs2\">\n      <Grid justifyContent=\"center\" alignItems=\"center\">\n        <DSControlledCheckbox\n          checked={checkboxValue}\n          aria-label={`${checkboxValue === true ? 'Deselect' : 'Select'} all ${\n            isDestinationPanel ? 'destination' : 'source'\n          } items`}\n          onChange={handleSelectAll}\n          aria-controls={ariaControls}\n          disabled={selectionableItems.length === 0}\n        />\n      </Grid>\n      <StyledSelectionHeaderCountLabel>{selectionLength} selected</StyledSelectionHeaderCountLabel>\n    </StyledSelectionHeaderWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2Ef,cAUF,YAVE;AA3ER,OAAOA,UAAS,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,4BAAwD;AACjE,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,+BAA+B,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,kCAAkC,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,cAAc,CAAC,QAAQ,KAAK;AAC3B,MAAM,kBAAkBA,OAAM,KAAK,CAAC,EAAE,qBAAqB,MAAM,MAAkC;AACxG,QAAM,qBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,MAAM;AAAA,IAAc,CAAC,UACzB,qBAAqB,MAAM,8BAA8B,MAAM;AAAA,EACjE;AACA,QAAM,eAAe;AAAA,IACnB,MACE,IACG,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,GAAG,WAAW,EACzB,KAAK,GAAG;AAAA,IACb,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,oBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,8BAA8B,SAAS,MAAM,yBAAyB;AAAA,EACnG;AACA,QAAM,gBAAgBA,OAAM,QAAQ,MAAM;AACxC,QAAI,SAA4B;AAChC,QAAI,kBAAkB;AACpB,UAAI,oBAAoB,mBAAmB;AAAQ,iBAAS;AAAA;AACvD,iBAAS;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,QAAQ,eAAe,CAAC;AAE/C,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,GAAG,UAAU;AACZ,UAAI,kBAAkB,MAAM;AAC1B,0BAAkB,CAAC,GAAG,EAAE,MAAM,CAAC;AAAA,MACjC,OAAO;AACL,cAAM,eAAkE,CAAC;AACzE,2BAAmB,QAAQ,CAAC,mBAAmB;AAC7C,uBAAa,eAAe,cAAc;AAAA,QAC5C,CAAC;AACD,0BAAkB,cAAc,EAAE,MAAM,CAAC;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,CAAC,eAAe,mBAAmB,kBAAkB;AAAA,EACvD;AAEA,SACE,qBAAC,gCAA6B,MAAM,aAAa,gBAAe,UAAS,YAAW,UAAS,IAAG,OAAM,IAAG,QACvG;AAAA,wBAAC,QAAK,gBAAe,UAAS,YAAW,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,cAAY,GAAG,kBAAkB,OAAO,aAAa,gBACnD,qBAAqB,gBAAgB;AAAA,QAEvC,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,UAAU,mBAAmB,WAAW;AAAA;AAAA,IAC1C,GACF;AAAA,IACA,qBAAC,mCAAiC;AAAA;AAAA,MAAgB;AAAA,OAAS;AAAA,KAC7D;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledCheckbox, type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSelectionHeaderWrapper = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER,\n})`\n  line-height: 1;\n  font-size: 1rem;\n  background-color: neutral-000;\n  border-bottom: 1px solid neutral-400;\n`;\nconst StyledSelectionHeaderCountLabel = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER_COUNT_LABEL,\n})`\n  text-align: end;\n  color: neutral-500;\n  font-weight: 600;\n`;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo(({ isDestinationPanel = false }: DSShuttleV2T.PanelMetaInfo) => {\n  const selectionableItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableData : state.sourceSelectionableData,\n  );\n  const ids = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableIds : state.sourceSelectionableIds,\n  );\n  const ariaControls = useMemo(\n    () =>\n      ids\n        .split(' ')\n        .map((d) => `${d}-wrapper`)\n        .join(' '),\n    [ids],\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const selectionLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n  );\n  const checkboxValue = React.useMemo(() => {\n    let newVal: boolean | 'mixed' = false;\n    if (selectionLength > 0)\n      if (selectionLength === selectionableItems.length) newVal = true;\n      else newVal = 'mixed';\n    return newVal;\n  }, [selectionableItems.length, selectionLength]);\n\n  const handleSelectAll = React.useCallback<DSControlledCheckboxT.InternalProps['onChange']>(\n    (_, event) => {\n      if (checkboxValue === true) {\n        onSelectionChange({}, { event });\n      } else {\n        const newSelection: DSShuttleV2T.InternalProps['sourceSelectedItems'] = {};\n        selectionableItems.forEach((selectableItem) => {\n          newSelection[selectableItem.hydratedId] = true;\n        });\n        onSelectionChange(newSelection, { event });\n      }\n    },\n    [checkboxValue, onSelectionChange, selectionableItems],\n  );\n\n  return (\n    <StyledSelectionHeaderWrapper cols={wrapperCols} justifyContent=\"center\" alignItems=\"center\" py=\"7px\" px=\"xxs2\">\n      <Grid justifyContent=\"center\" alignItems=\"center\">\n        <DSControlledCheckbox\n          checked={checkboxValue}\n          aria-label={`${checkboxValue === true ? 'Deselect' : 'Select'} all ${\n            isDestinationPanel ? 'destination' : 'source'\n          } items`}\n          onChange={handleSelectAll}\n          aria-controls={ariaControls}\n          disabled={selectionableItems.length === 0}\n        />\n      </Grid>\n      <StyledSelectionHeaderCountLabel>{selectionLength} selected</StyledSelectionHeaderCountLabel>\n    </StyledSelectionHeaderWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Ef,cAUF,YAVE;AA3ER,OAAOA,UAAS,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,4BAAwD;AACjE,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,+BAA+B,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,kCAAkC,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,cAAc,CAAC,QAAQ,KAAK;AAC3B,MAAM,kBAAkBA,OAAM,KAAK,CAAC,EAAE,qBAAqB,MAAM,MAAkC;AACxG,QAAM,qBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,MAAM;AAAA,IAAc,CAAC,UACzB,qBAAqB,MAAM,8BAA8B,MAAM;AAAA,EACjE;AACA,QAAM,eAAe;AAAA,IACnB,MACE,IACG,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,GAAG,WAAW,EACzB,KAAK,GAAG;AAAA,IACb,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,oBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,8BAA8B,SAAS,MAAM,yBAAyB;AAAA,EACnG;AACA,QAAM,gBAAgBA,OAAM,QAAQ,MAAM;AACxC,QAAI,SAA4B;AAChC,QAAI,kBAAkB;AACpB,UAAI,oBAAoB,mBAAmB;AAAQ,iBAAS;AAAA;AACvD,iBAAS;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,QAAQ,eAAe,CAAC;AAE/C,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,GAAG,UAAU;AACZ,UAAI,kBAAkB,MAAM;AAC1B,0BAAkB,CAAC,GAAG,EAAE,MAAM,CAAC;AAAA,MACjC,OAAO;AACL,cAAM,eAAkE,CAAC;AACzE,2BAAmB,QAAQ,CAAC,mBAAmB;AAC7C,uBAAa,eAAe,UAAU,IAAI;AAAA,QAC5C,CAAC;AACD,0BAAkB,cAAc,EAAE,MAAM,CAAC;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,CAAC,eAAe,mBAAmB,kBAAkB;AAAA,EACvD;AAEA,SACE,qBAAC,gCAA6B,MAAM,aAAa,gBAAe,UAAS,YAAW,UAAS,IAAG,OAAM,IAAG,QACvG;AAAA,wBAAC,QAAK,gBAAe,UAAS,YAAW,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,cAAY,GAAG,kBAAkB,OAAO,aAAa,gBACnD,qBAAqB,gBAAgB;AAAA,QAEvC,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,UAAU,mBAAmB,WAAW;AAAA;AAAA,IAC1C,GACF;AAAA,IACA,qBAAC,mCAAiC;AAAA;AAAA,MAAgB;AAAA,OAAS;AAAA,KAC7D;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/PanelWrapper.js

@@ -3,11 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { Header } from "./Header";
-import { PanelContentTopSection } from "./Panel/top/PanelContentTopSection";
-import { PanelContentMiddleSection } from "./Panel/middle/PanelContentMiddleSection";
-import { PanelContentBottomSection } from "./Panel/bottom/PanelContentBottomSection";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions";
+import { Header } from "./Header.js";
+import { PanelContentTopSection } from "./Panel/top/PanelContentTopSection.js";
+import { PanelContentMiddleSection } from "./Panel/middle/PanelContentMiddleSection.js";
+import { PanelContentBottomSection } from "./Panel/bottom/PanelContentBottomSection.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
 const StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`
   min-width: 300px;
   min-height: 264px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PanelWrapper.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 { type DSShuttleV2T } from '../react-desc-prop-types';\nimport { Header } from './Header';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n  min-height: 264px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledPanelWrapper rows={panelWrapperRows} gutter=\"xxxs\">\n    <Header {...panelMetaInfo} />\n    <StyledListWrapper rows={listWrapperRows}>\n      <PanelContentTopSection {...panelMetaInfo} />\n      <PanelContentMiddleSection {...panelMetaInfo} />\n      <PanelContentBottomSection {...panelMetaInfo} />\n    </StyledListWrapper>\n  </StyledPanelWrapper>\n));\n"],
+  "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 { type DSShuttleV2T } from '../react-desc-prop-types.js';\nimport { Header } from './Header.js';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection.js';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection.js';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n  min-height: 264px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledPanelWrapper rows={panelWrapperRows} gutter=\"xxxs\">\n    <Header {...panelMetaInfo} />\n    <StyledListWrapper rows={listWrapperRows}>\n      <PanelContentTopSection {...panelMetaInfo} />\n      <PanelContentMiddleSection {...panelMetaInfo} />\n      <PanelContentBottomSection {...panelMetaInfo} />\n    </StyledListWrapper>\n  </StyledPanelWrapper>\n));\n"],
   "mappings": "AAAA,YAAY,WAAW;ACsBnB,cACA,YADA;AAtBJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAIvG,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAGrG,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AAEvC,MAAM,eAAeA,OAAM,KAAK,CAAC,kBACtC,qBAAC,sBAAmB,MAAM,kBAAkB,QAAO,QACjD;AAAA,sBAAC,UAAQ,GAAG,eAAe;AAAA,EAC3B,qBAAC,qBAAkB,MAAM,iBACvB;AAAA,wBAAC,0BAAwB,GAAG,eAAe;AAAA,IAC3C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,IAC9C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,KAChD;AAAA,GACF,CACD;",
   "names": ["React"]
 }