@elliemae/ds-legacy-shuttle-v2 1.0.0-rc.1

package/dist/esm/parts/MainContent.js

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useMemo } from "react";
+import { useFontSizeDetector } from "@elliemae/ds-legacy-hooks-fontsize-detector";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { useOnBlurOut } from "@elliemae/ds-legacy-utilities";
+import { PanelWrapper } from "./PanelWrapper.js";
+import { usePropsStore } from "../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
+import { useFocusTracker } from "../config/useFocusTracker/index.js";
+const StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })``;
+const layoutWithSmallFont = {
+  cols: { small: ["auto"], medium: ["1fr", "1fr"] },
+  rows: { small: ["1fr", "1fr"], medium: ["auto"] }
+};
+const layoutWithBigFont = {
+  cols: ["auto"],
+  rows: ["1fr", "1fr"]
+};
+const useResizeObserver = (ref) => {
+  const [dimensions, setDimensions] = React2.useState(0);
+  React2.useEffect(() => {
+    if (ref) {
+      const observeTarget = ref;
+      const resizeObserver = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          setDimensions(Math.ceil(entry.contentRect.height));
+        });
+      });
+      resizeObserver.observe(observeTarget);
+      return () => {
+        resizeObserver.unobserve(observeTarget);
+      };
+    }
+  }, [ref]);
+  return dimensions;
+};
+const MainContent = React2.memo(() => {
+  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();
+  const config = React2.useMemo(
+    () => ({
+      onBlur: () => {
+        trackFocusRegionReset();
+        trackFocusItemReset();
+        trackFocusActionReset();
+      }
+    }),
+    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset]
+  );
+  const handleOnBlurOut = useOnBlurOut(config);
+  const destinationHasMultipleSelectedItems = usePropsStore((store) => store.destinationHasMultipleSelectedItems);
+  const sourceHasMultipleSelectedItems = usePropsStore((store) => store.sourceHasMultipleSelectedItems);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const metaInfo = useFontSizeDetector();
+  const colsAndRowsLayout = useMemo(() => {
+    if (metaInfo.isLarge) {
+      return layoutWithBigFont;
+    } else {
+      return layoutWithSmallFont;
+    }
+  }, [metaInfo]);
+  const [ref, setRef] = React2.useState();
+  const parentNode = ref?.parentNode;
+  const height = useResizeObserver(parentNode);
+  const finalHeight = height !== 0 ? height : 208;
+  return /* @__PURE__ */ jsxs(
+    StyledWrapper,
+    {
+      gutter: "xs",
+      onBlur: handleOnBlurOut,
+      ...colsAndRowsLayout,
+      getOwnerProps,
+      style: { height: `${finalHeight}px` },
+      ref: setRef,
+      children: [
+        /* @__PURE__ */ jsx(PanelWrapper, { isDestinationPanel: false, hasMultipleSelection: sourceHasMultipleSelectedItems }),
+        /* @__PURE__ */ jsx(PanelWrapper, { isDestinationPanel: true, hasMultipleSelection: destinationHasMultipleSelectedItems })
+      ]
+    }
+  );
+});
+export {
+  MainContent
+};
+//# sourceMappingURL=MainContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { useFontSizeDetector } from '@elliemae/ds-legacy-hooks-fontsize-detector';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { useOnBlurOut } from '@elliemae/ds-legacy-utilities';\nimport { PanelWrapper } from './PanelWrapper.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })``;\n\nconst layoutWithSmallFont = {\n  cols: { small: ['auto'], medium: ['1fr', '1fr'] },\n  rows: { small: ['1fr', '1fr'], medium: ['auto'] },\n};\nconst layoutWithBigFont = {\n  cols: ['auto'],\n  rows: ['1fr', '1fr'],\n};\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = React.useState<number>(0);\n\n  React.useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setDimensions(Math.ceil(entry.contentRect.height));\n        });\n      });\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [ref]);\n  return dimensions;\n};\n\n// this custom hook will return the font size of the font detector element\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  const destinationHasMultipleSelectedItems = usePropsStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = usePropsStore((store) => store.sourceHasMultipleSelectedItems);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const metaInfo = useFontSizeDetector();\n\n  const colsAndRowsLayout = useMemo(() => {\n    if (metaInfo.isLarge) {\n      return layoutWithBigFont;\n    } else {\n      return layoutWithSmallFont;\n    }\n  }, [metaInfo]);\n\n  const [ref, setRef] = React.useState<HTMLDivElement | null>();\n  const parentNode = ref?.parentNode as HTMLElement | null | undefined;\n  const height = useResizeObserver(parentNode);\n  const finalHeight = height !== 0 ? height : 208;\n  return (\n    <StyledWrapper\n      gutter=\"xs\"\n      onBlur={handleOnBlurOut}\n      {...colsAndRowsLayout}\n      getOwnerProps={getOwnerProps}\n      style={{ height: `${finalHeight}px` }}\n      ref={setRef}\n    >\n      <PanelWrapper isDestinationPanel={false} hasMultipleSelection={sourceHasMultipleSelectedItems} />\n      <PanelWrapper isDestinationPanel hasMultipleSelection={destinationHasMultipleSelectedItems} />\n    </StyledWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8EnB,SAQE,KARF;AA9EJ,OAAOA,UAAS,eAAe;AAC/B,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,uBAAuB;AAEhC,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,QAAQ,CAAC;AAE5F,MAAM,sBAAsB;AAAA,EAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,KAAK,EAAE;AAAA,EAChD,MAAM,EAAE,OAAO,CAAC,OAAO,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE;AAClD;AACA,MAAM,oBAAoB;AAAA,EACxB,MAAM,CAAC,MAAM;AAAA,EACb,MAAM,CAAC,OAAO,KAAK;AACrB;AAIA,MAAM,oBAAoB,CAAC,QAAwC;AACjE,QAAM,CAAC,YAAY,aAAa,IAAIA,OAAM,SAAiB,CAAC;AAE5D,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,gBAAQ,QAAQ,CAAC,UAAU;AACzB,wBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,QACnD,CAAC;AAAA,MACH,CAAC;AACD,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAIO,MAAM,cAAcA,OAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC9F,QAAM,SAASA,OAAM;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,kBAAkB,aAAa,MAAM;AAC3C,QAAM,sCAAsC,cAAc,CAAC,UAAU,MAAM,mCAAmC;AAC9G,QAAM,iCAAiC,cAAc,CAAC,UAAU,MAAM,8BAA8B;AACpG,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,WAAW,oBAAoB;AAErC,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,SAAS,SAAS;AACpB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,KAAK,MAAM,IAAIA,OAAM,SAAgC;AAC5D,QAAM,aAAa,KAAK;AACxB,QAAM,SAAS,kBAAkB,UAAU;AAC3C,QAAM,cAAc,WAAW,IAAI,SAAS;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,QAAQ;AAAA,MACP,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,gBAAgB;AAAA,MACpC,KAAK;AAAA,MAEL;AAAA,4BAAC,gBAAa,oBAAoB,OAAO,sBAAsB,gCAAgC;AAAA,QAC/F,oBAAC,gBAAa,oBAAkB,MAAC,sBAAsB,qCAAqC;AAAA;AAAA;AAAA,EAC9F;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-legacy-button-v2";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { useInnerRefHandlers } from "./useInnerRefHandlers.js";
+import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+const StyledLoadMoreBtn = styled(DSButtonV2, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN
+})`
+  width: 100%;
+  height: 100%;
+`;
+const LoadMoreBtn = (panelMetaInfo) => {
+  const { isDestinationPanel = false } = panelMetaInfo;
+  const { trackFocusItemLast, trackFocusActionParent, trackFocusRegionPanelItem } = useFocusTracker();
+  const onLoadMore = usePropsStore(
+    (state) => isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore
+  );
+  const handleOnClick = React2.useCallback(
+    (e) => {
+      onLoadMore(e);
+      trackFocusItemLast(panelMetaInfo);
+      trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);
+      trackFocusActionParent();
+    },
+    [onLoadMore, panelMetaInfo, trackFocusActionParent, trackFocusItemLast, trackFocusRegionPanelItem]
+  );
+  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ jsx(
+    StyledLoadMoreBtn,
+    {
+      buttonType: "text",
+      onClick: handleOnClick,
+      size: BUTTON_SIZES.S,
+      innerRef: innerRefHandlerLoadMoreBtn,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: "Load More..."
+    }
+  );
+};
+export {
+  LoadMoreBtn
+};
+//# sourceMappingURL=LoadMoreBtn.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/LoadMoreBtn.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-legacy-button-v2';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\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(panelMetaInfo);\n      trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n      trackFocusActionParent();\n    },\n    [onLoadMore, panelMetaInfo, trackFocusActionParent, trackFocusItemLast, trackFocusRegionPanelItem],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCnB;AArCJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY,oBAAoC;AACzD,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,EAAE,oBAAoB,wBAAwB,0BAA0B,IAAI,gBAAgB;AAClG,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAA2D;AAC1D,iBAAW,CAAC;AACZ,yBAAmB,aAAa;AAChC,gCAA0B,cAAc,kBAAkB;AAC1D,6BAAuB;AAAA,IACzB;AAAA,IACA,CAAC,YAAY,eAAe,wBAAwB,oBAAoB,yBAAyB;AAAA,EACnG;AACA,QAAM,EAAE,2BAA2B,IAAI,oBAAoB,aAAa;AACxE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Panel/bottom/LoadingMore.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSIndeterminateProgressIndicator } from "@elliemae/ds-legacy-indeterminate-progress-indicator";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../../../config/useStore/useStore.js";
+const StyledBottomLoadingMore = styled(Grid, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE
+})``;
+const LoadingMore = (panelMetaInfo) => {
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ jsx(
+    StyledBottomLoadingMore,
+    {
+      px: "1.846rem",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsx(DSIndeterminateProgressIndicator, { processing: true, title: "Loading" })
+    }
+  );
+};
+export {
+  LoadingMore
+};
+//# sourceMappingURL=LoadingMore.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/LoadingMore.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-legacy-indeterminate-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledBottomLoadingMore = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE,\n})``;\nexport const LoadingMore = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledBottomLoadingMore\n      px=\"1.846rem\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n    </StyledBottomLoadingMore>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBjB;AAtBN,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAEjD,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA;AAAA,MAEA,8BAAC,oCAAiC,YAAU,MAAC,OAAM,WAAU;AAAA;AAAA,EAC/D;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { LoadMoreBtn } from "./LoadMoreBtn.js";
+import { LoadingMore } from "./LoadingMore.js";
+import { useLoadMoreBtnArrowNavigation } from "./useLoadMoreBtnArrowNavigation.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+const StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`
+  min-height: 2.769rem;
+  border-top: 1px solid neutral-400;
+`;
+const wrapperColsRows = ["1fr"];
+const PanelContentBottomSection = React2.memo((panelMetaInfo) => {
+  const { isDestinationPanel = false } = panelMetaInfo;
+  const withLoadMore = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
+  );
+  const isLoadingMore = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore
+  );
+  const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusLoadMoreBtnDestination, trackFocusActionReset } = useFocusTracker();
+  const onBottomSectionFocus = React2.useCallback(() => {
+    trackFocusRegionBottom(isDestinationPanel);
+    if (isDestinationPanel)
+      trackFocusLoadMoreBtnDestination();
+    else
+      trackFocusLoadMoreBtn();
+    trackFocusActionReset();
+  }, [
+    isDestinationPanel,
+    trackFocusActionReset,
+    trackFocusLoadMoreBtn,
+    trackFocusLoadMoreBtnDestination,
+    trackFocusRegionBottom
+  ]);
+  const shouldDisplayLoadingMore = isLoadingMore;
+  const shouldDisplayLoadMoreBtn = withLoadMore && !isLoadingMore;
+  const shouldNotTakeSpace = !withLoadMore && !isLoadingMore;
+  const { onLoadMoreButtonKeyDown } = useLoadMoreBtnArrowNavigation(panelMetaInfo);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  if (shouldNotTakeSpace)
+    return /* @__PURE__ */ jsx("div", {});
+  return /* @__PURE__ */ jsxs(
+    StyledListWrapperBottom,
+    {
+      cols: wrapperColsRows,
+      rows: wrapperColsRows,
+      onFocus: onBottomSectionFocus,
+      onKeyDown: onLoadMoreButtonKeyDown,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        shouldDisplayLoadingMore ? /* @__PURE__ */ jsx(LoadingMore, { ...panelMetaInfo }) : null,
+        shouldDisplayLoadMoreBtn ? /* @__PURE__ */ jsx(LoadMoreBtn, { ...panelMetaInfo }) : null
+      ]
+    }
+  );
+});
+export {
+  PanelContentBottomSection
+};
+//# sourceMappingURL=PanelContentBottomSection.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/PanelContentBottomSection.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { LoadMoreBtn } from './LoadMoreBtn.js';\nimport { LoadingMore } from './LoadingMore.js';\nimport { useLoadMoreBtnArrowNavigation } from './useLoadMoreBtnArrowNavigation.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`\n  min-height: 2.769rem;\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\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, trackFocusLoadMoreBtnDestination, trackFocusActionReset } =\n    useFocusTracker();\n  const onBottomSectionFocus = React.useCallback(() => {\n    trackFocusRegionBottom(isDestinationPanel);\n    if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n    else trackFocusLoadMoreBtn();\n    trackFocusActionReset();\n  }, [\n    isDestinationPanel,\n    trackFocusActionReset,\n    trackFocusLoadMoreBtn,\n    trackFocusLoadMoreBtnDestination,\n    trackFocusRegionBottom,\n  ]);\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  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  if (shouldNotTakeSpace) return <div />;\n  return (\n    <StyledListWrapperBottom\n      cols={wrapperColsRows}\n      rows={wrapperColsRows}\n      onFocus={onBottomSectionFocus}\n      onKeyDown={onLoadMoreButtonKeyDown}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {shouldDisplayLoadingMore ? <LoadingMore {...panelMetaInfo} /> : null}\n      {shouldDisplayLoadMoreBtn ? <LoadMoreBtn {...panelMetaInfo} /> : null}\n    </StyledListWrapperBottom>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoDU,cAE7B,YAF6B;AAlDjC,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAE9B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,qCAAqC;AAC9C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAIlH,MAAM,kBAAkB,CAAC,KAAK;AAEvB,MAAM,4BAA4BA,OAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AAEvC,QAAM,eAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,uBAAuB,kCAAkC,sBAAsB,IAC7G,gBAAgB;AAClB,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,2BAAuB,kBAAkB;AACzC,QAAI;AAAoB,uCAAiC;AAAA;AACpD,4BAAsB;AAC3B,0BAAsB;AAAA,EACxB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,2BAA2B;AACjC,QAAM,2BAA2B,gBAAgB,CAAC;AAClD,QAAM,qBAAqB,CAAC,gBAAgB,CAAC;AAC7C,QAAM,EAAE,wBAAwB,IAAI,8BAA8B,aAAa;AAE/E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,MAAI;AAAoB,WAAO,oBAAC,SAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,mCAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/esm/parts/Panel/bottom/useInnerRefHandlers.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import React2 from "react";
+import { useInternalStore } from "../../../config/useStore/index.js";
+import { ITEMS_FOCUSES } from "../../../constants/index.js";
+const useInnerRefHandlers = ({ isDestinationPanel }) => {
+  const setZustandRef = useInternalStore((state) => state.setZustandRef);
+  const innerRefHandlerLoadMoreBtn = React2.useCallback(
+    (node) => {
+      setZustandRef(
+        [isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE],
+        node
+      );
+    },
+    [isDestinationPanel, setZustandRef]
+  );
+  return React2.useMemo(() => ({ innerRefHandlerLoadMoreBtn }), [innerRefHandlerLoadMoreBtn]);
+};
+export {
+  useInnerRefHandlers
+};
+//# sourceMappingURL=useInnerRefHandlers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/useInnerRefHandlers.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 { useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ITEMS_FOCUSES } from '../../../constants/index.js';\n\nexport const useInnerRefHandlers = ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const innerRefHandlerLoadMoreBtn = React.useCallback(\n    (node: HTMLButtonElement) => {\n      setZustandRef(\n        [isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE],\n        node,\n      );\n    },\n    [isDestinationPanel, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerLoadMoreBtn }), [innerRefHandlerLoadMoreBtn]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB;AAEjC,SAAS,qBAAqB;AAEvB,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,MAAkC;AACzF,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,MAAM,aAAa;AAErE,QAAM,6BAA6BA,OAAM;AAAA,IACvC,CAAC,SAA4B;AAC3B;AAAA,QACE,CAAC,qBAAqB,cAAc,4BAA4B,cAAc,oBAAoB;AAAA,QAClG;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,oBAAoB,aAAa;AAAA,EACpC;AACA,SAAOA,OAAM,QAAQ,OAAO,EAAE,2BAA2B,IAAI,CAAC,0BAA0B,CAAC;AAC3F;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,51 @@
+import * as React from "react";
+import React2 from "react";
+import {
+  useFocusItemTracker,
+  useFocusActionTrackers,
+  useFocusRegionTrackers
+} from "../../../config/useFocusTracker/index.js";
+import { useInternalStore } from "../../../config/useStore/index.js";
+const useLoadMoreBtnArrowNavigation = (panelMetaInfo) => {
+  const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();
+  const { trackFocusActionParent } = useFocusActionTrackers();
+  const { trackFocusRegionPanelItem } = useFocusRegionTrackers();
+  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
+  const onLoadMoreButtonKeyDown = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      const isDragAndDropHappening = getIsDragAndDropHappening();
+      if (isDragAndDropHappening) {
+        e.preventDefault();
+        return;
+      }
+      if (["ArrowUp", "ArrowDown"].includes(key))
+        e.preventDefault();
+      if (["ArrowUp", "ArrowDown"].includes(key))
+        e.stopPropagation();
+      if (key === "ArrowUp") {
+        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);
+        trackFocusNextItem(panelMetaInfo);
+        trackFocusActionParent();
+      }
+      if (key === "ArrowDown") {
+        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);
+        trackFocusPrevItem(panelMetaInfo);
+        trackFocusActionParent();
+      }
+    },
+    [
+      getIsDragAndDropHappening,
+      trackFocusRegionPanelItem,
+      panelMetaInfo,
+      trackFocusNextItem,
+      trackFocusActionParent,
+      trackFocusPrevItem
+    ]
+  );
+  return React2.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);
+};
+export {
+  useLoadMoreBtnArrowNavigation
+};
+//# sourceMappingURL=useLoadMoreBtnArrowNavigation.js.map

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

@@ -0,0 +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 {\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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../../../config/useStore/useStore.js";
+const StyledEmptyListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`
+  color: neutral-500;
+`;
+const EmptyItems = (panelMetaInfo) => {
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ jsx(
+    StyledEmptyListWrapper,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: "There are no items to display"
+    }
+  );
+};
+export {
+  EmptyItems
+};
+//# sourceMappingURL=EmptyItems.js.map

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

@@ -0,0 +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", "import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.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  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledEmptyListWrapper\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      There are no items to display\n    </StyledEmptyListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACenB;AAfJ,SAAgB,mBAAmB;AACnC,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,yBAAyB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAGzG,MAAM,aAAa,CAAC,kBAA8C;AACvE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSFastList } from "@elliemae/ds-legacy-fast-list";
+import { styled } from "@elliemae/ds-legacy-system";
+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;
+`;
+const ItemRenderer = React2.memo(
+  ({ index, itemList, getDatumHydratables, panelMetaInfo, withDragNDrop }) => {
+    const item = itemList[index];
+    const { original: datum, ...datumInternalMeta } = item;
+    const datumHydratables = getDatumHydratables(item);
+    const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });
+    const itemMeta = {
+      datum,
+      datumHydratables,
+      datumInternalMeta,
+      datumRenderFlags,
+      ...panelMetaInfo,
+      withDragNDrop
+    };
+    return /* @__PURE__ */ jsx(ItemSortable, { ...itemMeta }, datumHydratables.id);
+  }
+);
+const ItemListWrapper = React2.memo((panelMetaInfo) => {
+  const { isDestinationPanel } = panelMetaInfo;
+  const itemList = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
+  );
+  const actionRef = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef
+  );
+  const withDragNDrop = usePropsStore(
+    (state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
+  );
+  const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ jsx(StyledItemsWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(
+    DSFastList,
+    {
+      actionRef,
+      count: itemList.length,
+      ItemRenderer,
+      extraItemProps: { itemList, getDatumHydratables, panelMetaInfo, withDragNDrop }
+    }
+  ) });
+});
+const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);
+var Index_default = ItemListWrapperWithContext;
+export {
+  ItemListWrapperWithContext,
+  Index_default as default
+};
+//# sourceMappingURL=Index.js.map

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

@@ -0,0 +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 from 'react';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { DSFastList } from '@elliemae/ds-legacy-fast-list';\nimport { styled } from '@elliemae/ds-legacy-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\ninterface ItemRendererT {\n  itemList: DSShuttleV2T.ConfiguredDatum[];\n  getDatumHydratables: ReturnType<typeof useGetDatumHydratables>;\n  panelMetaInfo: DSShuttleV2T.PanelMetaInfo;\n  withDragNDrop: boolean;\n  index: number;\n}\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n`;\n\nconst ItemRenderer = React.memo(\n  ({ index, itemList, getDatumHydratables, panelMetaInfo, withDragNDrop }: ItemRendererT) => {\n    const item = itemList[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 <ItemSortable key={datumHydratables.id} {...itemMeta} />;\n  },\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 actionRef = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n\n  const withDragNDrop = usePropsStore((state) =>\n    isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n  );\n\n  const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledItemsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <DSFastList\n        actionRef={actionRef}\n        count={itemList.length}\n        ItemRenderer={ItemRenderer}\n        extraItemProps={{ itemList, getDatumHydratables, panelMetaInfo, withDragNDrop }}\n      />\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCZ;AArCX,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAS9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAIvG,MAAM,eAAeA,OAAM;AAAA,EACzB,CAAC,EAAE,OAAO,UAAU,qBAAqB,eAAe,cAAc,MAAqB;AACzF,UAAM,OAAO,SAAS,KAAK;AAC3B,UAAM,EAAE,UAAU,OAAO,GAAG,kBAAkB,IAAI;AAClD,UAAM,mBAAmB,oBAAoB,IAAI;AACjD,UAAM,mBAAmB,cAAc,EAAE,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,cAAc,CAAC;AACtG,UAAM,WAAW;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF;AACA,WAAO,oBAAC,gBAAwC,GAAG,YAAzB,iBAAiB,EAAkB;AAAA,EAC/D;AACF;AAEA,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;AAAA,IAAc,CAAC,UAC/B,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AAEA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,sBAAsB,uBAAuB,aAAa;AAEhE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE,oBAAC,sBAAmB,eAA8B,wBAChD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,gBAAgB,EAAE,UAAU,qBAAqB,eAAe,cAAc;AAAA;AAAA,EAChF,GACF;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,gBAAQ;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+const getDatumFlags = ({
+  softDeleted,
+  preventMove = false,
+  preventDrilldown = false,
+  hasMultipleSelection = false
+}) => ({
+  selectionPrevented: Boolean(softDeleted || preventMove),
+  withActions: !softDeleted,
+  withMoveBtn: !softDeleted && !preventMove,
+  withDrilldownBtn: !softDeleted && !preventDrilldown,
+  internallyDisabledMove: hasMultipleSelection,
+  internallyDisabledDrilldown: hasMultipleSelection
+});
+export {
+  getDatumFlags
+};
+//# sourceMappingURL=getDatumFlags.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/getDatumFlags.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "type GetDatumFlagsConfig = {\n  softDeleted: boolean;\n  preventMove?: boolean;\n  preventDrilldown?: boolean;\n  hasMultipleSelection?: boolean;\n};\nexport const getDatumFlags = ({\n  softDeleted,\n  preventMove = false,\n  preventDrilldown = false,\n  hasMultipleSelection = false,\n}: GetDatumFlagsConfig) => ({\n  selectionPrevented: Boolean(softDeleted || preventMove),\n  withActions: !softDeleted,\n  withMoveBtn: !softDeleted && !preventMove,\n  withDrilldownBtn: !softDeleted && !preventDrilldown,\n  internallyDisabledMove: hasMultipleSelection,\n  internallyDisabledDrilldown: hasMultipleSelection,\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMhB,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,uBAAuB;AACzB,OAA4B;AAAA,EAC1B,oBAAoB,QAAQ,eAAe,WAAW;AAAA,EACtD,aAAa,CAAC;AAAA,EACd,aAAa,CAAC,eAAe,CAAC;AAAA,EAC9B,kBAAkB,CAAC,eAAe,CAAC;AAAA,EACnC,wBAAwB;AAAA,EACxB,6BAA6B;AAC/B;",
+  "names": []
+}

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import React2 from "react";
+import { usePropsStore } from "../../../../config/useStore/index.js";
+const useGetDatumHydratables = (panelMetaInfo) => {
+  const getLabel = usePropsStore((state) => state.getLabel);
+  const getSubtitle = usePropsStore((state) => state.getSubtitle);
+  const getIcon = usePropsStore((state) => state.getIcon);
+  const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);
+  const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);
+  const getDatumHydratables = React2.useCallback(
+    (item) => {
+      const { original, ...datumMeta } = item;
+      return {
+        id: datumMeta.hydratedId,
+        preventMove: datumMeta.hydratedPreventMove,
+        label: getLabel(original, { datumMeta, panelMetaInfo }),
+        ...getSubtitle !== void 0 ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getIcon !== void 0 ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getCustomRenderer !== void 0 ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getPreventDrilldown !== void 0 ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) } : {}
+      };
+    },
+    [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getSubtitle, panelMetaInfo]
+  );
+  return getDatumHydratables;
+};
+export {
+  useGetDatumHydratables
+};
+//# sourceMappingURL=useGetDatumHydratables.js.map

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

@@ -0,0 +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/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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSCircularIndeterminateIndicator } from "@elliemae/ds-legacy-circular-progress-indicator";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../../../config/useStore/useStore.js";
+const StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`
+  color: neutral-500;
+`;
+const StyledLoadingIndicator = styled(DSCircularIndeterminateIndicator)``;
+const LoadingItems = (panelMetaInfo) => {
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ jsx(
+    StyledLoadingListWrapper,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsx(
+        StyledLoadingIndicator,
+        {
+          size: "xl",
+          text: "Loading...",
+          getOwnerProps,
+          getOwnerPropsArguments
+        }
+      )
+    }
+  );
+};
+export {
+  LoadingItems
+};
+//# sourceMappingURL=LoadingItems.js.map