npm - @elliemae/ds-shuttle-v2 - Versions diffs - 3.13.0-next.4 → 3.13.1-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/dist/cjs/parts/MainContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MainContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnBlurOut } from '@elliemae/ds-utilities';\nimport { PanelWrapper } from './PanelWrapper';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\nimport { useFocusTracker } from '../config/useFocusTracker';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })`\n  min-width: 648px;\n  min-height: 296px;\n`;\nconst mainContentCols = ['1fr', '1fr'];\n\nexport const MainContent = React.memo(() => {\n  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onBlur: () => {\n        trackFocusRegionReset();\n        trackFocusItemReset();\n        trackFocusActionReset();\n      },\n    }),\n    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n  );\n  const handleOnBlurOut = useOnBlurOut(config);\n  return (\n    <StyledWrapper cols={mainContentCols} gutter=\"xs\" p=\"xs\" onBlur={handleOnBlurOut}>\n      <PanelWrapper isDestinationPanel={false} />\n      <PanelWrapper isDestinationPanel />\n    </StyledWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BnB;AA5BJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,0BAA6B;AAC7B,0BAA6B;AAC7B,oCAAkD;AAClD,6BAAgC;AAEhC,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAI5F,MAAM,kBAAkB,CAAC,OAAO,KAAK;AAE9B,MAAM,cAAc,aAAAA,QAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC9F,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB;AACtB,4BAAoB;AACpB,8BAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,qBAAqB,qBAAqB;AAAA,EACpE;AACA,QAAM,sBAAkB,kCAAa,MAAM;AAC3C,SACE,6CAAC,iBAAc,MAAM,iBAAiB,QAAO,MAAK,GAAE,MAAK,QAAQ,iBAC/D;AAAA,gDAAC,oCAAa,oBAAoB,OAAO;AAAA,IACzC,4CAAC,oCAAa,oBAAkB,MAAC;AAAA,KACnC;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnBlurOut } from '@elliemae/ds-utilities';\nimport { PanelWrapper } from './PanelWrapper';\nimport { useFocusTracker } from '../config/useFocusTracker';\n\nconst StyledWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'wrapper' })`\n  min-width: 648px;\n  min-height: 296px;\n`;\nconst mainContentCols = ['1fr', '1fr'];\n\nexport const MainContent = React.memo(() => {\n  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onBlur: () => {\n        trackFocusRegionReset();\n        trackFocusItemReset();\n        trackFocusActionReset();\n      },\n    }),\n    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n  );\n  const handleOnBlurOut = useOnBlurOut(config);\n  return (\n    <StyledWrapper cols={mainContentCols} gutter=\"xs\" p=\"xs\" onBlur={handleOnBlurOut}>\n      <PanelWrapper isDestinationPanel={false} />\n      <PanelWrapper isDestinationPanel />\n    </StyledWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,0BAA6B;AAC7B,0BAA6B;AAC7B,6BAAgC;AAEhC,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA;AAI7E,MAAM,kBAAkB,CAAC,OAAO,KAAK;AAE9B,MAAM,cAAc,aAAAA,QAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC9F,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB;AACtB,4BAAoB;AACpB,8BAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,qBAAqB,qBAAqB;AAAA,EACpE;AACA,QAAM,sBAAkB,kCAAa,MAAM;AAC3C,SACE,6CAAC,iBAAc,MAAM,iBAAiB,QAAO,MAAK,GAAE,MAAK,QAAQ,iBAC/D;AAAA,gDAAC,oCAAa,oBAAoB,OAAO;AAAA,IACzC,4CAAC,oCAAa,oBAAkB,MAAC;AAAA,KACnC;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js CHANGED Viewed

@@ -35,11 +35,7 @@ var import_ds_button = require("@elliemae/ds-button");
 var import_useStore = require("../../../config/useStore");
 var import_useInnerRefHandlers = require("./useInnerRefHandlers");
 var import_useFocusTracker = require("../../../config/useFocusTracker");
-var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
-const StyledLoadMoreBtn = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN
-})`
+const StyledLoadMoreBtn = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: "ds-shuttle-v2", slot: "list-bottom-load-more-btn" })`
   width: 100%;
   height: 100%;
 `;

package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/LoadMoreBtn.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const { trackFocusItemLast, trackFocusActionParent, trackFocusRegionPanelItem } = useFocusTracker();\n  const onLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n  );\n  const handleOnClick = React.useCallback(\n    (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onLoadMore(e);\n      trackFocusItemLast();\n      trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n      trackFocusActionParent();\n    },\n    [\n      onLoadMore,\n      panelMetaInfo.isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemLast,\n      trackFocusRegionPanelItem,\n    ],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCnB;AAxCJ,mBAAkB;AAClB,uBAAuB;AACvB,uBAAyD;AACzD,sBAA8B;AAE9B,iCAAoC;AACpC,6BAAgC;AAChC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,6BAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,EAAE,oBAAoB,wBAAwB,0BAA0B,QAAI,wCAAgB;AAClG,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAA2D;AAC1D,iBAAW,CAAC;AACZ,yBAAmB;AACnB,gCAA0B,cAAc,kBAAkB;AAC1D,6BAAuB;AAAA,IACzB;AAAA,IACA;AAAA,MACE;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,2BAA2B,QAAI,gDAAoB,aAAa;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,8BAAa;AAAA,MACnB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, { name: 'ds-shuttle-v2', slot: 'list-bottom-load-more-btn' })`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const { trackFocusItemLast, trackFocusActionParent, trackFocusRegionPanelItem } = useFocusTracker();\n  const onLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n  );\n  const handleOnClick = React.useCallback(\n    (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onLoadMore(e);\n      trackFocusItemLast();\n      trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n      trackFocusActionParent();\n    },\n    [\n      onLoadMore,\n      panelMetaInfo.isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemLast,\n      trackFocusRegionPanelItem,\n    ],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCnB;AApCJ,mBAAkB;AAClB,uBAAuB;AACvB,uBAAyD;AACzD,sBAA8B;AAE9B,iCAAoC;AACpC,6BAAgC;AAEhC,MAAM,wBAAoB,yBAAO,6BAAY,EAAE,MAAM,iBAAiB,MAAM,4BAA4B,CAAC;AAAA;AAAA;AAAA;AAKlG,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,EAAE,oBAAoB,wBAAwB,0BAA0B,QAAI,wCAAgB;AAClG,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAA2D;AAC1D,iBAAW,CAAC;AACZ,yBAAmB;AACnB,gCAA0B,cAAc,kBAAkB;AAC1D,6BAAuB;AAAA,IACzB;AAAA,IACA;AAAA,MACE;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,2BAA2B,QAAI,gDAAoB,aAAa;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,8BAAa;AAAA,MACnB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/Panel/bottom/LoadingMore.js CHANGED Viewed

@@ -32,10 +32,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_indeterminate_progress_indicator = require("@elliemae/ds-indeterminate-progress-indicator");
-var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
-const StyledBottomLoadingMore = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE
-})``;
+const StyledBottomLoadingMore = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "list-bottom-loading-more" })``;
 const LoadingMore = (panelMetaInfo) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledBottomLoadingMore, { px: "24px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_indeterminate_progress_indicator.DSIndeterminateProgressIndicator, { processing: true, title: "Loading" }) });
 //# sourceMappingURL=LoadingMore.js.map

package/dist/cjs/parts/Panel/bottom/LoadingMore.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/LoadingMore.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledBottomLoadingMore = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE,\n})``;\nexport const LoadingMore = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledBottomLoadingMore px=\"24px\">\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </StyledBottomLoadingMore>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAZJ,uBAAuB;AACvB,qBAAqB;AACrB,iDAAiD;AAEjD,oCAAkD;AAElD,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAC1B,4CAAC,2BAAwB,IAAG,QAC1B,sDAAC,+EAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D;",
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\n\nconst StyledBottomLoadingMore = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-bottom-loading-more' })``;\nexport const LoadingMore = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledBottomLoadingMore px=\"24px\">\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </StyledBottomLoadingMore>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUnB;AARJ,uBAAuB;AACvB,qBAAqB;AACrB,iDAAiD;AAGjD,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,2BAA2B,CAAC;AACjG,MAAM,cAAc,CAAC,kBAC1B,4CAAC,2BAAwB,IAAG,QAC1B,sDAAC,+EAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D;",
   "names": []
 }

package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js CHANGED Viewed

@@ -37,8 +37,7 @@ var import_useStore = require("../../../config/useStore");
 var import_LoadMoreBtn = require("./LoadMoreBtn");
 var import_LoadingMore = require("./LoadingMore");
 var import_useLoadMoreBtnArrowNavigation = require("./useLoadMoreBtnArrowNavigation");
-var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
-const StyledListWrapperBottom = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`
+const StyledListWrapperBottom = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "list-wrapper-bottom" })`
   min-height: 36px;
   border-top: 1px solid neutral-400;
 `;

package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/PanelContentBottomSection.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { LoadMoreBtn } from './LoadMoreBtn';\nimport { LoadingMore } from './LoadingMore';\nimport { useLoadMoreBtnArrowNavigation } from './useLoadMoreBtnArrowNavigation';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`\n  min-height: 36px;\n  border-top: 1px solid neutral-400;\n`;\nconst wrapperColsRows = ['1fr'];\n\nexport const PanelContentBottomSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const isLoadingMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n  );\n  const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusActionReset } = useFocusTracker();\n  const onBottomSectionFocus = React.useCallback(() => {\n    trackFocusRegionBottom(isDestinationPanel);\n    trackFocusLoadMoreBtn();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusLoadMoreBtn, trackFocusRegionBottom]);\n\n  // this 3 booleans MUST be auto-exclusives with each other\n  const shouldDisplayLoadingMore = isLoadingMore;\n  const shouldDisplayLoadMoreBtn = withLoadMore && !isLoadingMore;\n  const shouldNotTakeSpace = !withLoadMore && !isLoadingMore;\n  const { onLoadMoreButtonKeyDown } = useLoadMoreBtnArrowNavigation(panelMetaInfo);\n\n  if (shouldNotTakeSpace) return <div />;\n  return (\n    <StyledListWrapperBottom\n      cols={wrapperColsRows}\n      rows={wrapperColsRows}\n      onFocus={onBottomSectionFocus}\n      onKeyDown={onLoadMoreButtonKeyDown}\n    >\n      {shouldDisplayLoadingMore ? <LoadingMore {...panelMetaInfo} /> : null}\n      {shouldDisplayLoadMoreBtn ? <LoadMoreBtn {...panelMetaInfo} /> : null}\n    </StyledListWrapperBottom>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCU;AAtCjC,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,6BAAgC;AAChC,sBAA8B;AAE9B,yBAA4B;AAC5B,yBAA4B;AAC5B,2CAA8C;AAC9C,oCAAkD;AAElD,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAIlH,MAAM,kBAAkB,CAAC,KAAK;AAEvB,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,uBAAuB,sBAAsB,QAAI,wCAAgB;AACjG,QAAM,uBAAuB,aAAAA,QAAM,YAAY,MAAM;AACnD,2BAAuB,kBAAkB;AACzC,0BAAsB;AACtB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,uBAAuB,sBAAsB,CAAC;AAG7F,QAAM,2BAA2B;AACjC,QAAM,2BAA2B,gBAAgB,CAAC;AAClD,QAAM,qBAAqB,CAAC,gBAAgB,CAAC;AAC7C,QAAM,EAAE,wBAAwB,QAAI,oEAA8B,aAAa;AAE/E,MAAI;AAAoB,WAAO,4CAAC,SAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MAEV;AAAA,mCAA2B,4CAAC,kCAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,4CAAC,kCAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { LoadMoreBtn } from './LoadMoreBtn';\nimport { LoadingMore } from './LoadingMore';\nimport { useLoadMoreBtnArrowNavigation } from './useLoadMoreBtnArrowNavigation';\n\nconst StyledListWrapperBottom = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-wrapper-bottom' })`\n  min-height: 36px;\n  border-top: 1px solid neutral-400;\n`;\nconst wrapperColsRows = ['1fr'];\n\nexport const PanelContentBottomSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const isLoadingMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n  );\n  const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusActionReset } = useFocusTracker();\n  const onBottomSectionFocus = React.useCallback(() => {\n    trackFocusRegionBottom(isDestinationPanel);\n    trackFocusLoadMoreBtn();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusLoadMoreBtn, trackFocusRegionBottom]);\n\n  // this 3 booleans MUST be auto-exclusives with each other\n  const shouldDisplayLoadingMore = isLoadingMore;\n  const shouldDisplayLoadMoreBtn = withLoadMore && !isLoadingMore;\n  const shouldNotTakeSpace = !withLoadMore && !isLoadingMore;\n  const { onLoadMoreButtonKeyDown } = useLoadMoreBtnArrowNavigation(panelMetaInfo);\n\n  if (shouldNotTakeSpace) return <div />;\n  return (\n    <StyledListWrapperBottom\n      cols={wrapperColsRows}\n      rows={wrapperColsRows}\n      onFocus={onBottomSectionFocus}\n      onKeyDown={onLoadMoreButtonKeyDown}\n    >\n      {shouldDisplayLoadingMore ? <LoadingMore {...panelMetaInfo} /> : null}\n      {shouldDisplayLoadMoreBtn ? <LoadMoreBtn {...panelMetaInfo} /> : null}\n    </StyledListWrapperBottom>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCU;AArCjC,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,6BAAgC;AAChC,sBAA8B;AAE9B,yBAA4B;AAC5B,yBAA4B;AAC5B,2CAA8C;AAE9C,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAInG,MAAM,kBAAkB,CAAC,KAAK;AAEvB,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,uBAAuB,sBAAsB,QAAI,wCAAgB;AACjG,QAAM,uBAAuB,aAAAA,QAAM,YAAY,MAAM;AACnD,2BAAuB,kBAAkB;AACzC,0BAAsB;AACtB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,uBAAuB,sBAAsB,CAAC;AAG7F,QAAM,2BAA2B;AACjC,QAAM,2BAA2B,gBAAgB,CAAC;AAClD,QAAM,qBAAqB,CAAC,gBAAgB,CAAC;AAC7C,QAAM,EAAE,wBAAwB,QAAI,oEAA8B,aAAa;AAE/E,MAAI;AAAoB,WAAO,4CAAC,SAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MAEV;AAAA,mCAA2B,4CAAC,kCAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,4CAAC,kCAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.js CHANGED Viewed

@@ -30,19 +30,13 @@ module.exports = __toCommonJS(useLoadMoreBtnArrowNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useFocusTracker = require("../../../config/useFocusTracker");
-var import_useStore = require("../../../config/useStore");
 const useLoadMoreBtnArrowNavigation = (panelMetaInfo) => {
   const { trackFocusPrevItem, trackFocusNextItem } = (0, import_useFocusTracker.useFocusItemTracker)();
   const { trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
   const { trackFocusRegionPanelItem } = (0, import_useFocusTracker.useFocusRegionTrackers)();
-  const isActive = (0, import_useStore.useInternalStore)((state) => state.lastActiveId);
   const onLoadMoreButtonKeyDown = import_react.default.useCallback(
     (e) => {
       const { key } = e;
-      if (isActive) {
-        e.preventDefault();
-        return;
-      }
       if (["ArrowUp", "ArrowDown"].includes(key))
         e.preventDefault();
       if (["ArrowUp", "ArrowDown"].includes(key))
@@ -58,14 +52,7 @@ const useLoadMoreBtnArrowNavigation = (panelMetaInfo) => {
         trackFocusActionParent();
       }
     },
-    [
-      isActive,
-      trackFocusRegionPanelItem,
-      panelMetaInfo,
-      trackFocusNextItem,
-      trackFocusActionParent,
-      trackFocusPrevItem
-    ]
+    [trackFocusRegionPanelItem, panelMetaInfo, trackFocusNextItem, trackFocusActionParent, trackFocusPrevItem]
   );
   return import_react.default.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);
 };

package/dist/cjs/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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 isActive = useInternalStore((state) => state.lastActiveId);\n\n  const onLoadMoreButtonKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      if (isActive) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown'].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      isActive,\n      trackFocusRegionPanelItem,\n      panelMetaInfo,\n      trackFocusNextItem,\n      trackFocusActionParent,\n      trackFocusPrevItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,6BAAoF;AAEpF,sBAAiC;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,QAAI,4CAAoB;AACvE,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,+CAAuB;AAC7D,QAAM,eAAW,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAE/D,QAAM,0BAA0B,aAAAA,QAAM;AAAA,IACpC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,UAAU;AACZ,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,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
+  "sourcesContent": ["import React from 'react';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusRegionTrackers } from '../../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\n\nexport const useLoadMoreBtnArrowNavigation = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusRegionTrackers();\n\n  const onLoadMoreButtonKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown'].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    [trackFocusRegionPanelItem, panelMetaInfo, trackFocusNextItem, trackFocusActionParent, trackFocusPrevItem],\n  );\n\n  return React.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,6BAAoF;AAG7E,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,QAAI,4CAAoB;AACvE,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,+CAAuB;AAE7D,QAAM,0BAA0B,aAAAA,QAAM;AAAA,IACpC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAGhB,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,CAAC,2BAA2B,eAAe,oBAAoB,wBAAwB,kBAAkB;AAAA,EAC3G;AAEA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Panel/middle/EmptyItems.js CHANGED Viewed

@@ -31,8 +31,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
-const StyledEmptyListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`
+const StyledEmptyListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "empty-list-wrapper" })`
   color: neutral-500;
 `;
 const EmptyItems = (panelMetaInfo) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEmptyListWrapper, { alignItems: "center", justifyContent: "center", children: "There are no items to display" });

package/dist/cjs/parts/Panel/middle/EmptyItems.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/middle/EmptyItems.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYrB;AATF,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAElD,MAAM,6BAAyB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,mBAAmB,CAAC;AAAA;AAAA;AAGzG,MAAM,aAAa,CAAC,kBACzB,4CAAC,0BAAuB,YAAW,UAAS,gBAAe,UAAS,2CAEpE;",
+  "sourcesContent": ["/* 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';\n\nconst StyledEmptyListWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: '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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWrB;AARF,uBAAuB;AACvB,qBAAqB;AAGrB,MAAM,6BAAyB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,qBAAqB,CAAC;AAAA;AAAA;AAG1F,MAAM,aAAa,CAAC,kBACzB,4CAAC,0BAAuB,YAAW,UAAS,gBAAe,UAAS,2CAEpE;",
   "names": []
 }

package/dist/cjs/parts/Panel/middle/ItemListWrapper.js CHANGED Viewed

@@ -24,74 +24,128 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ItemListWrapper_exports = {};
 __export(ItemListWrapper_exports, {
-  ItemListWrapperWithContext: () => ItemListWrapperWithContext,
-  default: () => ItemListWrapper_default
+  ItemListWrapper: () => ItemListWrapper
 });
 module.exports = __toCommonJS(ItemListWrapper_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
 var import_useStore = require("../../../config/useStore");
+var import_useFocusTracker = require("../../../config/useFocusTracker");
+var import_constants = require("../../../constants");
 var import_Item = require("../../Item/Item");
-var import_withConditionalDnDRowContext = require("../../HoC/withConditionalDnDRowContext");
-var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
-const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEMS_WRAPPER })`
+var import_MultipleSelectionAction = require("./MultipleSelectionAction");
+const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "items-wrapper" })`
   position: relative;
-  // .ds-shuttle-v2-move-multiple-wrapper {
-  //   top: 2px;
-  //   right: 2px;
-  //   height: calc(100% - 4px);
-  //   width: calc(65px - 2px);
-  // }
+  :focus,
+  :focus-visible {
+    outline: 2px solid brand-700;
+    outline-offset: -2px;
+    // .ds-shuttle-v2-move-multiple-wrapper {
+    //   top: 2px;
+    //   right: 2px;
+    //   height: calc(100% - 4px);
+    //   width: calc(65px - 2px);
+    // }
+  }
 `;
+const useInnerRefHandlers = ({ isDestinationPanel }) => {
+  const focusRegion = (0, import_useStore.useInternalStore)((state) => state.focusRegion);
+  const focusItem = (0, import_useStore.useInternalStore)((state) => state.focusItem);
+  const focusItemAction = (0, import_useStore.useInternalStore)((state) => state.focusItemAction);
+  const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL;
+  const shouldFocus = import_react.default.useMemo(
+    () => focusRegion === currRegion && focusItem === "" && focusItemAction === "",
+    [currRegion, focusItem, focusItemAction, focusRegion]
+  );
+  const innerRefHandlerParentItem = import_react.default.useCallback(
+    (node) => {
+      if (shouldFocus) {
+        node?.focus();
+      }
+    },
+    [shouldFocus]
+  );
+  return import_react.default.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
+};
 const ItemListWrapper = import_react.default.memo((panelMetaInfo) => {
   const { isDestinationPanel } = panelMetaInfo;
   const itemList = (0, import_useStore.useInternalStore)(
     (state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
   );
-  const totalSize = (0, import_useStore.useInternalStore)(
-    (state) => isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize
-  );
-  const virtualItems = (0, import_useStore.useInternalStore)(
-    (state) => isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems
-  );
-  const withDragNDrop = (0, import_useStore.usePropsStore)(
-    (state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
+  const withLoadMore = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
   );
+  const destinationHasMultipleSelectedItems = (0, import_useStore.useInternalStore)((store) => store.destinationHasMultipleSelectedItems);
+  const sourceHasMultipleSelectedItems = (0, import_useStore.useInternalStore)((store) => store.sourceHasMultipleSelectedItems);
+  const hasMultipleSelection = isDestinationPanel ? destinationHasMultipleSelectedItems : sourceHasMultipleSelectedItems;
   const rows = import_react.default.useMemo(
     () => [`repeat(${itemList?.length ? itemList?.length : "0"},min-content)`],
     [itemList.length]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { alignItems: "flex-start", rows, style: { height: `${totalSize}px` }, children: virtualItems?.map((virtualRow) => {
-    const item = itemList[virtualRow.index];
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: `${virtualRow.size}px`,
-          transform: `translateY(${virtualRow.start}px)`
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_Item.ItemSortable,
-          {
-            item,
-            isDestinationPanel,
-            withDragNDrop
-          },
-          item.original.id
-        )
-      },
-      virtualRow.index
-    );
-  }) });
+  const {
+    trackFocusRegionPanel,
+    trackFocusItemFirst,
+    trackFocusItemLast,
+    trackFocusActionParent,
+    trackFocusRegionPanelItem,
+    trackFocusLoadMoreBtn
+  } = (0, import_useFocusTracker.useFocusTracker)();
+  const config = import_react.default.useMemo(
+    () => ({
+      onFocus: () => {
+        trackFocusRegionPanel(isDestinationPanel);
+      }
+    }),
+    [trackFocusRegionPanel, isDestinationPanel]
+  );
+  const onPanelFocus = (0, import_ds_utilities.useOnSpecificFocus)(config);
+  const onPanelKeyDown = import_react.default.useCallback(
+    (e) => {
+      const { key } = e;
+      if (["Home", "End", "ArrowUp", "ArrowDown"].includes(key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        trackFocusRegionPanelItem(isDestinationPanel);
+        trackFocusActionParent();
+        if (key === "ArrowDown" || key === "Home")
+          trackFocusItemFirst();
+        if (key === "ArrowUp" || key === "End") {
+          if (withLoadMore)
+            trackFocusLoadMoreBtn();
+          else
+            trackFocusItemLast();
+        }
+      }
+    },
+    [
+      isDestinationPanel,
+      trackFocusActionParent,
+      trackFocusItemFirst,
+      trackFocusItemLast,
+      trackFocusLoadMoreBtn,
+      trackFocusRegionPanelItem,
+      withLoadMore
+    ]
+  );
+  const { innerRefHandlerParentItem } = useInnerRefHandlers(panelMetaInfo);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledItemsWrapper,
+    {
+      alignItems: "flex-start",
+      rows,
+      tabIndex: 0,
+      ref: innerRefHandlerParentItem,
+      onFocus: onPanelFocus,
+      onKeyDown: onPanelKeyDown,
+      children: [
+        itemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Item.Item, { item, isDestinationPanel }, item.original.id)),
+        hasMultipleSelection ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MultipleSelectionAction.MultipleSelectionAction, { isDestinationPanel }) : null
+      ]
+    }
+  );
 });
-const ItemListWrapperWithContext = (0, import_withConditionalDnDRowContext.withConditionalDnDRowContext)(ItemListWrapper);
-var ItemListWrapper_default = ItemListWrapperWithContext;
 //# sourceMappingURL=ItemListWrapper.js.map

package/dist/cjs/parts/Panel/middle/ItemListWrapper.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/middle/ItemListWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemSortable } from '../../Item/Item';\nimport { withConditionalDnDRowContext } from '../../HoC/withConditionalDnDRowContext';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n\n  // .ds-shuttle-v2-move-multiple-wrapper {\n  //   top: 2px;\n  //   right: 2px;\n  //   height: calc(100% - 4px);\n  //   width: calc(65px - 2px);\n  // }\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize,\n  );\n\n  const virtualItems = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n  );\n\n  const withDragNDrop = usePropsStore((state) =>\n    isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n  );\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n\n  return (\n    <StyledItemsWrapper alignItems=\"flex-start\" rows={rows} style={{ height: `${totalSize}px` }}>\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        return (\n          <div\n            key={virtualRow.index}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: `${virtualRow.size}px`,\n              transform: `translateY(${virtualRow.start}px)`,\n            }}\n          >\n            <ItemSortable\n              key={item.original.id}\n              item={item}\n              isDestinationPanel={isDestinationPanel}\n              withDragNDrop={withDragNDrop}\n            />\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2DX;AA3DZ,mBAAkB;AAClB,qBAAqB;AACrB,uBAAuB;AACvB,sBAAgD;AAEhD,kBAA6B;AAC7B,0CAA6C;AAC7C,oCAAkD;AAElD,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvG,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,eAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,gBAAY;AAAA,IAAiB,CAAC,UAClC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,mBAAe;AAAA,IAAiB,CAAC,UACrC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AAEA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AAEA,SACE,4CAAC,sBAAmB,YAAW,cAAa,MAAY,OAAO,EAAE,QAAQ,GAAG,cAAc,GACvF,wBAAc,IAAI,CAAC,eAAe;AACjC,UAAM,OAAO,SAAS,WAAW;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ,GAAG,WAAW;AAAA,UACtB,WAAW,cAAc,WAAW;AAAA,QACtC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,KAAK,SAAS;AAAA,QAIrB;AAAA;AAAA,MAfK,WAAW;AAAA,IAgBlB;AAAA,EAEJ,CAAC,GACH;AAEJ,CAAC;AAEM,MAAM,iCAA6B,kEAA6B,eAAe;AACtF,IAAO,0BAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { Item } from '../../Item/Item';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\n\nconst StyledItemsWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'items-wrapper' })`\n  position: relative;\n  :focus,\n  :focus-visible {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n    // .ds-shuttle-v2-move-multiple-wrapper {\n    //   top: 2px;\n    //   right: 2px;\n    //   height: calc(100% - 4px);\n    //   width: calc(65px - 2px);\n    // }\n  }\n`;\n\nconst useInnerRefHandlers = ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const shouldFocus = React.useMemo(\n    () => focusRegion === currRegion && focusItem === '' && focusItemAction === '',\n    [currRegion, focusItem, focusItemAction, focusRegion],\n  );\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (shouldFocus) {\n        node?.focus();\n      }\n    },\n    [shouldFocus],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nexport const ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = useInternalStore((store) => store.sourceHasMultipleSelectedItems);\n  const hasMultipleSelection = isDestinationPanel\n    ? destinationHasMultipleSelectedItems\n    : sourceHasMultipleSelectedItems;\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if (key === 'ArrowDown' || key === 'Home') trackFocusItemFirst();\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) trackFocusLoadMoreBtn();\n          else trackFocusItemLast();\n        }\n      }\n    },\n    [\n      isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemFirst,\n      trackFocusItemLast,\n      trackFocusLoadMoreBtn,\n      trackFocusRegionPanelItem,\n      withLoadMore,\n    ],\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(panelMetaInfo);\n  return (\n    <StyledItemsWrapper\n      alignItems=\"flex-start\"\n      rows={rows}\n      tabIndex={0}\n      ref={innerRefHandlerParentItem}\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n    >\n      {itemList.map((item) => (\n        <Item key={item.original.id} item={item} isDestinationPanel={isDestinationPanel} />\n      ))}\n      {hasMultipleSelection ? <MultipleSelectionAction isDestinationPanel={isDestinationPanel} /> : null}\n    </StyledItemsWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+GnB;AA/GJ,mBAAkB;AAClB,0BAAmC;AACnC,qBAAqB;AACrB,uBAAuB;AACvB,sBAAgD;AAChD,6BAAgC;AAEhC,uBAAgC;AAChC,kBAAqB;AACrB,qCAAwC;AAExC,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAexF,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,MAAkC;AAClF,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,aAAa,qBAAqB,iCAAgB,oBAAoB,iCAAgB;AAE5F,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MAAM,gBAAgB,cAAc,cAAc,MAAM,oBAAoB;AAAA,IAC5E,CAAC,YAAY,WAAW,iBAAiB,WAAW;AAAA,EACtD;AACA,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,CAAC,SAAyB;AACxB,UAAI,aAAa;AACf,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,aAAa,0BAA0B,IAAI,CAAC,aAAa,yBAAyB,CAAC;AACnH;AAEO,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACvF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,eAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,0CAAsC,kCAAiB,CAAC,UAAU,MAAM,mCAAmC;AACjH,QAAM,qCAAiC,kCAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,uBAAuB,qBACzB,sCACA;AAEJ,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wCAAgB;AACpB,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO;AAAA,MACL,SAAS,MAAM;AACb,8BAAsB,kBAAkB;AAAA,MAC1C;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,kBAAkB;AAAA,EAC5C;AACA,QAAM,mBAAe,wCAAmB,MAAM;AAE9C,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,QAAQ,OAAO,WAAW,WAAW,EAAE,SAAS,GAAG,GAAG;AACzD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,kCAA0B,kBAAkB;AAC5C,+BAAuB;AAEvB,YAAI,QAAQ,eAAe,QAAQ;AAAQ,8BAAoB;AAC/D,YAAI,QAAQ,aAAa,QAAQ,OAAO;AACtC,cAAI;AAAc,kCAAsB;AAAA;AACnC,+BAAmB;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,0BAA0B,IAAI,oBAAoB,aAAa;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MAEV;AAAA,iBAAS,IAAI,CAAC,SACb,4CAAC,oBAA4B,MAAY,sBAA9B,KAAK,SAAS,EAAwD,CAClF;AAAA,QACA,uBAAuB,4CAAC,0DAAwB,oBAAwC,IAAK;AAAA;AAAA;AAAA,EAChG;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Panel/middle/LoadingItems.js CHANGED Viewed

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

package/dist/cjs/parts/Panel/middle/LoadingItems.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/middle/LoadingItems.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAXJ,uBAAuB;AACvB,qBAAqB;AACrB,4CAAiD;AAEjD,oCAAkD;AAElD,MAAM,+BAA2B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAAA;AAAA;AAG7G,MAAM,eAAe,CAAC,kBAC3B,4CAAC,4BAAyB,YAAW,UAAS,gBAAe,UAC3D,sDAAC,0EAAiC,MAAK,MAAK,MAAK,cAAa,GAChE;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\n\nconst StyledLoadingListWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'loading-list-wrapper' })`\n  color: neutral-500;\n`;\nexport const LoadingItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledLoadingListWrapper alignItems=\"center\" justifyContent=\"center\">\n    <DSCircularIndeterminateIndicator size=\"xl\" text=\"Loading...\" />\n  </StyledLoadingListWrapper>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAVJ,uBAAuB;AACvB,qBAAqB;AACrB,4CAAiD;AAGjD,MAAM,+BAA2B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAG9F,MAAM,eAAe,CAAC,kBAC3B,4CAAC,4BAAyB,YAAW,UAAS,gBAAe,UAC3D,sDAAC,0EAAiC,MAAK,MAAK,MAAK,cAAa,GAChE;",
   "names": []
 }

package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js CHANGED Viewed

@@ -36,13 +36,11 @@ var import_ds_button = require("@elliemae/ds-button");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_itemMovementHelpers = require("../../../config/itemMovementHelpers");
 var import_useFocusTracker = require("../../../config/useFocusTracker");
-var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
-const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
+const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "move-multiple-wrapper" })`
   position: absolute;
   background-color: neutral-000;
   top: 0px;
   right: 0px;
-  transform: translateX(0);
   height: 100%;
   width: 65px;
   :hover {
@@ -56,23 +54,23 @@ const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
   }
 `;
 const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.MOVE_MULTIPLE_BTN
+  name: "ds-shuttle-v2",
+  slot: "move-multiple-btn"
 })`
   width: 100%;
   height: 100%;
 `;
 const StyledCloseMediumIcon = (0, import_ds_system.styled)(import_ds_icons.CloseMedium, {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-to-source-icon"
 })`
   > svg {
     fill: brand-600;
   }
 `;
 const StyledArrowShortRightIcon = (0, import_ds_system.styled)(import_ds_icons.ArrowShortRight, {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-to-destination-icon"
 })`
   > svg {
     fill: brand-600;

package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/middle/MultipleSelectionAction.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 65px;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton buttonType=\"icon\" onClick={handleMoveAllAction} onFocus={handleMoveAllBtnFocus}>\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmFb;AAnFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2C;AAC3C,sBAA6C;AAE7C,iCAAuC;AACvC,6BAAgC;AAChC,oCAAkD;AAElD,MAAM,gCAA4B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBtH,MAAM,mBAAe,yBAAO,6BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0B,aAAAA,QAAM,KAAK,CAAC,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,QAAI,mDAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,QACvG,wCAAgB;AAClB,QAAM,sBAAsB,aAAAA,QAAM;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,wBAAoE,aAAAA,QAAM,YAAY,MAAM;AAChG,wBAAoB;AACpB,0BAAsB;AACtB,kCAA8B,kBAAkB;AAAA,EAClD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,6BAA6B,CAAC;AAElG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN,sDAAC,gBAAa,YAAW,QAAO,SAAS,qBAAqB,SAAS,uBACpE,+BACC,4CAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,4CAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO,GAE1D;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'move-multiple-wrapper' })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  height: 100%;\n  width: 65px;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: 'ds-shuttle-v2',\n  slot: 'move-multiple-btn',\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-source-icon',\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-destination-icon',\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton buttonType=\"icon\" onClick={handleMoveAllAction} onFocus={handleMoveAllBtnFocus}>\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiFb;AAjFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2C;AAC3C,sBAA6C;AAE7C,iCAAuC;AACvC,6BAAgC;AAEhC,MAAM,gCAA4B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvG,MAAM,mBAAe,yBAAO,6BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0B,aAAAA,QAAM,KAAK,CAAC,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,QAAI,mDAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,QACvG,wCAAgB;AAClB,QAAM,sBAAsB,aAAAA,QAAM;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,wBAAoE,aAAAA,QAAM,YAAY,MAAM;AAChG,wBAAoB;AACpB,0BAAsB;AACtB,kCAA8B,kBAAkB;AAAA,EAClD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,6BAA6B,CAAC;AAElG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN,sDAAC,gBAAa,YAAW,QAAO,SAAS,qBAAqB,SAAS,uBACpE,+BACC,4CAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,4CAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO,GAE1D;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }