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

package/dist/cjs/parts/Item/useSelectionLogic.js

@@ -0,0 +1,128 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSelectionLogic_exports = {};
+__export(useSelectionLogic_exports, {
+  useSelectionLogic: () => useSelectionLogic
+});
+module.exports = __toCommonJS(useSelectionLogic_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_useStore = require("../../config/useStore/index.js");
+var import_useFocusTracker = require("../../config/useFocusTracker/index.js");
+const useSelectionLogic = ({
+  isDestinationPanel,
+  datumInternalMeta,
+  datum,
+  datumRenderFlags
+}) => {
+  const { trackFocusItem } = (0, import_useFocusTracker.useFocusItemTracker)();
+  const { trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
+  const { trackFocusRegionPanelItem } = (0, import_useFocusTracker.useFocusTracker)();
+  const getPanelLastSelectedItem = (0, import_useStore.useInternalStore)((store) => store.getPanelLastSelectedItem);
+  const setPanelLastSelectedItem = (0, import_useStore.useInternalStore)(
+    (store) => isDestinationPanel ? store.setDestinationPanelLastSelectedItem : store.setSourcePanelLastSelectedItem
+  );
+  const panelSelectionableDataIds = (0, import_useStore.usePropsStore)(
+    (store) => isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds
+  );
+  const onSelectionChange = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange
+  );
+  const panelSelectedItems = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems
+  );
+  const selectItem = import_react.default.useCallback(
+    (event) => {
+      const { selectionPrevented } = datumRenderFlags;
+      const { hydratedId } = datumInternalMeta;
+      const { shiftKey } = event;
+      const lastSelectedItem = getPanelLastSelectedItem(isDestinationPanel);
+      if (!selectionPrevented) {
+        let newSelection = {};
+        if (shiftKey && lastSelectedItem) {
+          const startSelIndx = panelSelectionableDataIds.findIndex((id) => id === lastSelectedItem);
+          const endSelIndx = panelSelectionableDataIds.findIndex((id) => id === hydratedId);
+          if (startSelIndx !== -1 && endSelIndx !== -1) {
+            const ordererIndexes = [startSelIndx, endSelIndx].sort();
+            const shiftSelectedIdsArray = panelSelectionableDataIds.slice(ordererIndexes[0], ordererIndexes[1] + 1);
+            let shouldShiftDeSelect = true;
+            const allSelected = {};
+            const allDeSelected = {};
+            shiftSelectedIdsArray.forEach((id) => {
+              allSelected[id] = true;
+              allDeSelected[id] = false;
+              if (panelSelectedItems[id] !== true)
+                shouldShiftDeSelect = false;
+            });
+            if (shouldShiftDeSelect)
+              newSelection = { ...panelSelectedItems, ...allDeSelected };
+            else
+              newSelection = { ...panelSelectedItems, ...allSelected };
+          }
+        } else {
+          newSelection = { ...panelSelectedItems };
+          const isAddition = newSelection[hydratedId] !== true;
+          if (isAddition) {
+            newSelection[hydratedId] = true;
+          } else
+            delete newSelection[hydratedId];
+        }
+        setPanelLastSelectedItem(hydratedId);
+        onSelectionChange(newSelection, { event, item: datum });
+      }
+      trackFocusRegionPanelItem(isDestinationPanel);
+      trackFocusItem({ original: datum, ...datumInternalMeta });
+      trackFocusActionParent();
+    },
+    [
+      datum,
+      datumInternalMeta,
+      datumRenderFlags,
+      getPanelLastSelectedItem,
+      isDestinationPanel,
+      onSelectionChange,
+      panelSelectedItems,
+      panelSelectionableDataIds,
+      setPanelLastSelectedItem,
+      trackFocusActionParent,
+      trackFocusItem,
+      trackFocusRegionPanelItem
+    ]
+  );
+  const onShiftMouseDownPreventTextSelection = import_react.default.useCallback((event) => {
+    const { shiftKey } = event;
+    if (shiftKey)
+      event.preventDefault();
+  }, []);
+  return import_react.default.useMemo(
+    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),
+    [selectItem, onShiftMouseDownPreventTextSelection]
+  );
+};
+//# sourceMappingURL=useSelectionLogic.js.map

package/dist/cjs/parts/Item/useSelectionLogic.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Item/useSelectionLogic.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport React from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../config/useFocusTracker/index.js';\nexport const useSelectionLogic = ({\n  isDestinationPanel,\n  datumInternalMeta,\n  datum,\n  datumRenderFlags,\n}: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusTracker();\n\n  const getPanelLastSelectedItem = useInternalStore((store) => store.getPanelLastSelectedItem);\n  const setPanelLastSelectedItem = useInternalStore((store) =>\n    isDestinationPanel ? store.setDestinationPanelLastSelectedItem : store.setSourcePanelLastSelectedItem,\n  );\n\n  const panelSelectionableDataIds = usePropsStore((store) =>\n    isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds,\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const panelSelectedItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems,\n  );\n  const selectItem = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n      const { selectionPrevented } = datumRenderFlags;\n      const { hydratedId } = datumInternalMeta;\n      const { shiftKey } = event;\n      const lastSelectedItem = getPanelLastSelectedItem(isDestinationPanel);\n      if (!selectionPrevented) {\n        let newSelection: Record<string, boolean> = {};\n        // shift select logic\n        if (shiftKey && lastSelectedItem) {\n          const startSelIndx = panelSelectionableDataIds.findIndex((id) => id === lastSelectedItem);\n          const endSelIndx = panelSelectionableDataIds.findIndex((id) => id === hydratedId);\n          if (startSelIndx !== -1 && endSelIndx !== -1) {\n            const ordererIndexes = [startSelIndx, endSelIndx].sort();\n            const shiftSelectedIdsArray = panelSelectionableDataIds.slice(ordererIndexes[0], ordererIndexes[1] + 1);\n            let shouldShiftDeSelect = true;\n            // I track both \"all Select\"/\"all unselect\" so I can \".forEach\" only once and apply either version after\n            const allSelected: Record<string, boolean> = {};\n            const allDeSelected: Record<string, boolean> = {};\n            shiftSelectedIdsArray.forEach((id) => {\n              allSelected[id] = true;\n              allDeSelected[id] = false;\n              // if anything inside the shift-select was not selected, shift-select will \"select\"\n              if (panelSelectedItems[id] !== true) shouldShiftDeSelect = false;\n            });\n            if (shouldShiftDeSelect) newSelection = { ...panelSelectedItems, ...allDeSelected };\n            else newSelection = { ...panelSelectedItems, ...allSelected };\n          }\n        } else {\n          // single selection logic\n          newSelection = { ...panelSelectedItems };\n          const isAddition = newSelection[hydratedId] !== true;\n          if (isAddition) {\n            newSelection[hydratedId] = true;\n          } else delete newSelection[hydratedId];\n        }\n        // we track the item for \"shift select\" purposes\n        // this must happen AFTER shift select logic!\n        setPanelLastSelectedItem(hydratedId);\n        onSelectionChange(newSelection, { event, item: datum });\n      }\n      // focus tracking logic\n      trackFocusRegionPanelItem(isDestinationPanel);\n      trackFocusItem({ original: datum, ...datumInternalMeta });\n      trackFocusActionParent();\n    },\n    [\n      datum,\n      datumInternalMeta,\n      datumRenderFlags,\n      getPanelLastSelectedItem,\n      isDestinationPanel,\n      onSelectionChange,\n      panelSelectedItems,\n      panelSelectionableDataIds,\n      setPanelLastSelectedItem,\n      trackFocusActionParent,\n      trackFocusItem,\n      trackFocusRegionPanelItem,\n    ],\n  );\n\n  const onShiftMouseDownPreventTextSelection = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    const { shiftKey } = event;\n    if (shiftKey) event.preventDefault();\n  }, []);\n  return React.useMemo(\n    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),\n    [selectItem, onShiftMouseDownPreventTextSelection],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/parts/Item/useThisItemIsFocused.js

@@ -0,0 +1,47 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useThisItemIsFocused_exports = {};
+__export(useThisItemIsFocused_exports, {
+  useThisItemIsFocused: () => useThisItemIsFocused
+});
+module.exports = __toCommonJS(useThisItemIsFocused_exports);
+var React = __toESM(require("react"));
+var import_useStore = require("../../config/useStore/index.js");
+var import_constants = require("../../constants/index.js");
+const useThisItemIsFocused = (itemMeta) => {
+  const { datumInternalMeta, isDestinationPanel } = itemMeta;
+  const { hydratedId } = datumInternalMeta;
+  const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
+  const currItemId = hydratedId;
+  const thisItemIsFocused = (0, import_useStore.useInternalStore)(
+    (state) => currRegion === state.focusRegion && currItemId === state.focusItem && "parent" === state.focusItemAction
+  );
+  return thisItemIsFocused;
+};
+//# sourceMappingURL=useThisItemIsFocused.js.map

package/dist/cjs/parts/Item/useThisItemIsFocused.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Item/useThisItemIsFocused.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\nimport { REGIONS_FOCUSES } from '../../constants/index.js';\n\n// Define a generic type for the useThisItemIsFocused hook to ensure type safety\ntype UseThisItemIsFocused = (itemMeta: DSShuttleV2T.ItemMeta) => boolean;\n\nexport const useThisItemIsFocused: UseThisItemIsFocused = (itemMeta) => {\n  const { datumInternalMeta, isDestinationPanel } = itemMeta;\n  const { hydratedId } = datumInternalMeta;\n\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = hydratedId;\n  const thisItemIsFocused = useInternalStore(\n    (state) => currRegion === state.focusRegion && currItemId === state.focusItem && 'parent' === state.focusItemAction,\n  );\n\n  return thisItemIsFocused;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,sBAAiC;AACjC,uBAAgC;AAKzB,MAAM,uBAA6C,CAAC,aAAa;AACtE,QAAM,EAAE,mBAAmB,mBAAmB,IAAI;AAClD,QAAM,EAAE,WAAW,IAAI;AAEvB,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa;AACnB,QAAM,wBAAoB;AAAA,IACxB,CAAC,UAAU,eAAe,MAAM,eAAe,eAAe,MAAM,aAAa,aAAa,MAAM;AAAA,EACtG;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/parts/MainContent.js

@@ -0,0 +1,116 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MainContent_exports = {};
+__export(MainContent_exports, {
+  MainContent: () => MainContent
+});
+module.exports = __toCommonJS(MainContent_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_hooks_fontsize_detector = require("@elliemae/ds-legacy-hooks-fontsize-detector");
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_ds_legacy_utilities = require("@elliemae/ds-legacy-utilities");
+var import_PanelWrapper = require("./PanelWrapper.js");
+var import_useStore = require("../config/useStore/index.js");
+var import_DSShuttleV2Definitions = require("../config/DSShuttleV2Definitions.js");
+var import_useFocusTracker = require("../config/useFocusTracker/index.js");
+const StyledWrapper = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.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] = import_react.default.useState(0);
+  import_react.default.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 = import_react.default.memo(() => {
+  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = (0, import_useFocusTracker.useFocusTracker)();
+  const config = import_react.default.useMemo(
+    () => ({
+      onBlur: () => {
+        trackFocusRegionReset();
+        trackFocusItemReset();
+        trackFocusActionReset();
+      }
+    }),
+    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset]
+  );
+  const handleOnBlurOut = (0, import_ds_legacy_utilities.useOnBlurOut)(config);
+  const destinationHasMultipleSelectedItems = (0, import_useStore.usePropsStore)((store) => store.destinationHasMultipleSelectedItems);
+  const sourceHasMultipleSelectedItems = (0, import_useStore.usePropsStore)((store) => store.sourceHasMultipleSelectedItems);
+  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const metaInfo = (0, import_ds_legacy_hooks_fontsize_detector.useFontSizeDetector)();
+  const colsAndRowsLayout = (0, import_react.useMemo)(() => {
+    if (metaInfo.isLarge) {
+      return layoutWithBigFont;
+    } else {
+      return layoutWithSmallFont;
+    }
+  }, [metaInfo]);
+  const [ref, setRef] = import_react.default.useState();
+  const parentNode = ref?.parentNode;
+  const height = useResizeObserver(parentNode);
+  const finalHeight = height !== 0 ? height : 208;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledWrapper,
+    {
+      gutter: "xs",
+      onBlur: handleOnBlurOut,
+      ...colsAndRowsLayout,
+      getOwnerProps,
+      style: { height: `${finalHeight}px` },
+      ref: setRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: false, hasMultipleSelection: sourceHasMultipleSelectedItems }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: true, hasMultipleSelection: destinationHasMultipleSelectedItems })
+      ]
+    }
+  );
+});
+//# sourceMappingURL=MainContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8EnB;AA9EJ,mBAA+B;AAC/B,+CAAoC;AACpC,8BAAuB;AACvB,4BAAqB;AACrB,iCAA6B;AAC7B,0BAA6B;AAC7B,sBAA8B;AAC9B,oCAAkD;AAClD,6BAAgC;AAEhC,MAAM,oBAAgB,gCAAO,4BAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,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,IAAI,aAAAA,QAAM,SAAiB,CAAC;AAE5D,eAAAA,QAAM,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,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,yCAAa,MAAM;AAC3C,QAAM,0CAAsC,+BAAc,CAAC,UAAU,MAAM,mCAAmC;AAC9G,QAAM,qCAAiC,+BAAc,CAAC,UAAU,MAAM,8BAA8B;AACpG,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,eAAW,8DAAoB;AAErC,QAAM,wBAAoB,sBAAQ,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,IAAI,aAAAA,QAAM,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,oDAAC,oCAAa,oBAAoB,OAAO,sBAAsB,gCAAgC;AAAA,QAC/F,4CAAC,oCAAa,oBAAkB,MAAC,sBAAsB,qCAAqC;AAAA;AAAA;AAAA,EAC9F;AAEJ,CAAC;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,81 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LoadMoreBtn_exports = {};
+__export(LoadMoreBtn_exports, {
+  LoadMoreBtn: () => LoadMoreBtn
+});
+module.exports = __toCommonJS(LoadMoreBtn_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_button_v2 = require("@elliemae/ds-legacy-button-v2");
+var import_useStore = require("../../../config/useStore/index.js");
+var import_useInnerRefHandlers = require("./useInnerRefHandlers.js");
+var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
+var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
+const StyledLoadMoreBtn = (0, import_ds_legacy_system.styled)(import_ds_legacy_button_v2.DSButtonV2, {
+  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
+  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN
+})`
+  width: 100%;
+  height: 100%;
+`;
+const LoadMoreBtn = (panelMetaInfo) => {
+  const { isDestinationPanel = false } = panelMetaInfo;
+  const { trackFocusItemLast, trackFocusActionParent, trackFocusRegionPanelItem } = (0, import_useFocusTracker.useFocusTracker)();
+  const onLoadMore = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore
+  );
+  const handleOnClick = import_react.default.useCallback(
+    (e) => {
+      onLoadMore(e);
+      trackFocusItemLast(panelMetaInfo);
+      trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);
+      trackFocusActionParent();
+    },
+    [onLoadMore, panelMetaInfo, trackFocusActionParent, trackFocusItemLast, trackFocusRegionPanelItem]
+  );
+  const { innerRefHandlerLoadMoreBtn } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(panelMetaInfo);
+  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledLoadMoreBtn,
+    {
+      buttonType: "text",
+      onClick: handleOnClick,
+      size: import_ds_legacy_button_v2.BUTTON_SIZES.S,
+      innerRef: innerRefHandlerLoadMoreBtn,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: "Load More..."
+    }
+  );
+};
+//# sourceMappingURL=LoadMoreBtn.js.map

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

@@ -0,0 +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-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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AArCJ,mBAAkB;AAClB,8BAAuB;AACvB,iCAAyD;AACzD,sBAA8B;AAE9B,iCAAoC;AACpC,6BAAgC;AAChC,oCAAkD;AAElD,MAAM,wBAAoB,gCAAO,uCAAY;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,aAAa;AAChC,gCAA0B,cAAc,kBAAkB;AAC1D,6BAAuB;AAAA,IACzB;AAAA,IACA,CAAC,YAAY,eAAe,wBAAwB,oBAAoB,yBAAyB;AAAA,EACnG;AACA,QAAM,EAAE,2BAA2B,QAAI,gDAAoB,aAAa;AACxE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,wCAAa;AAAA,MACnB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LoadingMore_exports = {};
+__export(LoadingMore_exports, {
+  LoadingMore: () => LoadingMore
+});
+module.exports = __toCommonJS(LoadingMore_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_ds_legacy_indeterminate_progress_indicator = require("@elliemae/ds-legacy-indeterminate-progress-indicator");
+var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
+var import_useStore = require("../../../config/useStore/useStore.js");
+const StyledBottomLoadingMore = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
+  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE
+})``;
+const LoadingMore = (panelMetaInfo) => {
+  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledBottomLoadingMore,
+    {
+      px: "1.846rem",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_indeterminate_progress_indicator.DSIndeterminateProgressIndicator, { processing: true, title: "Loading" })
+    }
+  );
+};
+//# sourceMappingURL=LoadingMore.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Panel/bottom/LoadingMore.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBjB;AAtBN,mBAAkB;AAClB,8BAAuB;AACvB,4BAAqB;AACrB,wDAAiD;AAEjD,oCAAkD;AAClD,sBAA8B;AAE9B,MAAM,8BAA0B,gCAAO,4BAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA;AAAA,MAEA,sDAAC,sFAAiC,YAAU,MAAC,OAAM,WAAU;AAAA;AAAA,EAC/D;AAEJ;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,97 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PanelContentBottomSection_exports = {};
+__export(PanelContentBottomSection_exports, {
+  PanelContentBottomSection: () => PanelContentBottomSection
+});
+module.exports = __toCommonJS(PanelContentBottomSection_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
+var import_useStore = require("../../../config/useStore/index.js");
+var import_LoadMoreBtn = require("./LoadMoreBtn.js");
+var import_LoadingMore = require("./LoadingMore.js");
+var import_useLoadMoreBtnArrowNavigation = require("./useLoadMoreBtnArrowNavigation.js");
+var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
+const StyledListWrapperBottom = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`
+  min-height: 2.769rem;
+  border-top: 1px solid neutral-400;
+`;
+const wrapperColsRows = ["1fr"];
+const PanelContentBottomSection = import_react.default.memo((panelMetaInfo) => {
+  const { isDestinationPanel = false } = panelMetaInfo;
+  const withLoadMore = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
+  );
+  const isLoadingMore = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore
+  );
+  const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusLoadMoreBtnDestination, trackFocusActionReset } = (0, import_useFocusTracker.useFocusTracker)();
+  const onBottomSectionFocus = import_react.default.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 } = (0, import_useLoadMoreBtnArrowNavigation.useLoadMoreBtnArrowNavigation)(panelMetaInfo);
+  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  if (shouldNotTakeSpace)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledListWrapperBottom,
+    {
+      cols: wrapperColsRows,
+      rows: wrapperColsRows,
+      onFocus: onBottomSectionFocus,
+      onKeyDown: onLoadMoreButtonKeyDown,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        shouldDisplayLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingMore.LoadingMore, { ...panelMetaInfo }) : null,
+        shouldDisplayLoadMoreBtn ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadMoreBtn.LoadMoreBtn, { ...panelMetaInfo }) : null
+      ]
+    }
+  );
+});
+//# sourceMappingURL=PanelContentBottomSection.js.map

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

@@ -0,0 +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-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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDU;AAlDjC,mBAAkB;AAClB,8BAAuB;AACvB,4BAAqB;AACrB,6BAAgC;AAChC,sBAA8B;AAE9B,yBAA4B;AAC5B,yBAA4B;AAC5B,2CAA8C;AAC9C,oCAAkD;AAElD,MAAM,8BAA0B,gCAAO,4BAAM,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;AAEvC,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,kCAAkC,sBAAsB,QAC7G,wCAAgB;AAClB,QAAM,uBAAuB,aAAAA,QAAM,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,QAAI,oEAA8B,aAAa;AAE/E,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,MAAI;AAAoB,WAAO,4CAAC,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,4CAAC,kCAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,4CAAC,kCAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
+  "names": ["React"]
+}