@elliemae/ds-shuttle-v2 3.18.0-next.1 → 3.18.0-next.10

package/dist/esm/parts/Item/ItemMiddleSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/ItemMiddleSection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n  (props: DSShuttleV2T.ItemMeta & { tooltipHelpers: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n    const { tooltipHelpers, ...itemMeta } = props;\n    const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n    const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n    const { softDeleted, hydratedId } = datumInternalMeta;\n    const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n    const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n      () => ({\n        datum,\n        tooltipHelpers,\n        thisItemIsFocused,\n        panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n        datumInternalMeta,\n        datumHydratables: { ...componentlessHydratables, id: hydratedId },\n      }),\n      [\n        componentlessHydratables,\n        datum,\n        datumInternalMeta,\n        hasMultipleSelection,\n        hydratedId,\n        isDestinationPanel,\n        thisItemIsFocused,\n        tooltipHelpers,\n      ],\n    );\n    const cols = React.useMemo(() => {\n      // if CustomRenderer is defined, shortcircuit\n      if (CustomRenderer) return [];\n      const dynamicCols = [];\n      if (Icon) dynamicCols.push('auto');\n      dynamicCols.push('1fr');\n      return dynamicCols;\n    }, [CustomRenderer, Icon]);\n\n    if (CustomRenderer)\n      return (\n        <MidSection cols={customMidSectionCols} rows={customMidSectionRows} $softDeleted={Boolean(softDeleted)}>\n          <CustomRenderer {...customComponentProps} />\n        </MidSection>\n      );\n\n    // if we ever need to do something for truncation and showing a tooltip in the future,\n    // check out what has been done in exported-related/ShuttleItem.tsx\n    // also, be aware that we have the headless logic alread inside tooltipHelpers\n    // when this comment has been written, the logic was working with keyboard and mouse as per tooltip-v3\n    // integrated with all the shuttle-v2 custom focus navigation\n    return (\n      <MidSection cols={cols} alignItems=\"center\" ml=\"xxs\" $softDeleted={Boolean(softDeleted)}>\n        {Icon ? (\n          <IconWrapper alignItems=\"center\" mr=\"xxs\">\n            <Icon {...customComponentProps} />\n          </IconWrapper>\n        ) : null}\n        <TextSection {...itemMeta} />\n      </MidSection>\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsEb,cAUJ,YAVI;AAtEV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AAErC,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,aAAa,OAAO,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAE7B,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAG1C,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoBA,OAAM;AAAA,EACrC,CAAC,UAAqG;AACpG,UAAM,EAAE,gBAAgB,GAAG,SAAS,IAAI;AACxC,UAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,UAAM,EAAE,MAAM,gBAAgB,GAAG,yBAAyB,IAAI;AAC9D,UAAM,EAAE,aAAa,WAAW,IAAI;AACpC,UAAM,oBAAoB,qBAAqB,QAAQ;AACvD,UAAM,uBAAuBA,OAAM;AAAA,MACjC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,QAC1D;AAAA,QACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,UAAM,OAAOA,OAAM,QAAQ,MAAM;AAE/B,UAAI;AAAgB,eAAO,CAAC;AAC5B,YAAM,cAAc,CAAC;AACrB,UAAI;AAAM,oBAAY,KAAK,MAAM;AACjC,kBAAY,KAAK,KAAK;AACtB,aAAO;AAAA,IACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,QAAI;AACF,aACE,oBAAC,cAAW,MAAM,sBAAsB,MAAM,sBAAsB,cAAc,QAAQ,WAAW,GACnG,8BAAC,kBAAgB,GAAG,sBAAsB,GAC5C;AAQJ,WACE,qBAAC,cAAW,MAAY,YAAW,UAAS,IAAG,OAAM,cAAc,QAAQ,WAAW,GACnF;AAAA,aACC,oBAAC,eAAY,YAAW,UAAS,IAAG,OAClC,8BAAC,QAAM,GAAG,sBAAsB,GAClC,IACE;AAAA,MACJ,oBAAC,eAAa,GAAG,UAAU;AAAA,OAC7B;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n  (props: DSShuttleV2T.ItemMeta & { tooltipHelpers?: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n    const { tooltipHelpers, ...itemMeta } = props;\n    const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n    const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n    const { softDeleted, hydratedId } = datumInternalMeta;\n    const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n    const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n      () => ({\n        datum,\n        tooltipHelpers,\n        thisItemIsFocused,\n        panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n        datumInternalMeta,\n        datumHydratables: { ...componentlessHydratables, id: hydratedId },\n      }),\n      [\n        componentlessHydratables,\n        datum,\n        datumInternalMeta,\n        hasMultipleSelection,\n        hydratedId,\n        isDestinationPanel,\n        thisItemIsFocused,\n        tooltipHelpers,\n      ],\n    );\n    const cols = React.useMemo(() => {\n      // if CustomRenderer is defined, shortcircuit\n      if (CustomRenderer) return [];\n      const dynamicCols = [];\n      if (Icon) dynamicCols.push('auto');\n      dynamicCols.push('1fr');\n      return dynamicCols;\n    }, [CustomRenderer, Icon]);\n\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n    if (CustomRenderer)\n      return (\n        <MidSection\n          cols={customMidSectionCols}\n          rows={customMidSectionRows}\n          $softDeleted={Boolean(softDeleted)}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <CustomRenderer {...customComponentProps} />\n        </MidSection>\n      );\n\n    // if we ever need to do something for truncation and showing a tooltip in the future,\n    // check out what has been done in exported-related/ShuttleItem.tsx\n    // also, be aware that we have the headless logic alread inside tooltipHelpers\n    // when this comment has been written, the logic was working with keyboard and mouse as per tooltip-v3\n    // integrated with all the shuttle-v2 custom focus navigation\n    return (\n      <MidSection\n        cols={cols}\n        alignItems=\"center\"\n        ml=\"xxs\"\n        $softDeleted={Boolean(softDeleted)}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {Icon ? (\n          <IconWrapper\n            alignItems=\"center\"\n            mr=\"xxs\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <Icon {...customComponentProps} />\n          </IconWrapper>\n        ) : null}\n        <TextSection {...itemMeta} />\n      </MidSection>\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgFb,cAUJ,YAVI;AAhFV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAE9B,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,aAAa,OAAO,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAE7B,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAG1C,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoBA,OAAM;AAAA,EACrC,CAAC,UAAsG;AACrG,UAAM,EAAE,gBAAgB,GAAG,SAAS,IAAI;AACxC,UAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,UAAM,EAAE,MAAM,gBAAgB,GAAG,yBAAyB,IAAI;AAC9D,UAAM,EAAE,aAAa,WAAW,IAAI;AACpC,UAAM,oBAAoB,qBAAqB,QAAQ;AACvD,UAAM,uBAAuBA,OAAM;AAAA,MACjC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,QAC1D;AAAA,QACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,UAAM,OAAOA,OAAM,QAAQ,MAAM;AAE/B,UAAI;AAAgB,eAAO,CAAC;AAC5B,YAAM,cAAc,CAAC;AACrB,UAAI;AAAM,oBAAY,KAAK,MAAM;AACjC,kBAAY,KAAK,KAAK;AACtB,aAAO;AAAA,IACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,UAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,UAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,QAAI;AACF,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM;AAAA,UACN,cAAc,QAAQ,WAAW;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,8BAAC,kBAAgB,GAAG,sBAAsB;AAAA;AAAA,MAC5C;AAQJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,YAAW;AAAA,QACX,IAAG;AAAA,QACH,cAAc,QAAQ,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,IAAG;AAAA,cACH;AAAA,cACA;AAAA,cAEA,8BAAC,QAAM,GAAG,sBAAsB;AAAA;AAAA,UAClC,IACE;AAAA,UACJ,oBAAC,eAAa,GAAG,UAAU;AAAA;AAAA;AAAA,IAC7B;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/Item/ItemOverlay.js

@@ -20,24 +20,26 @@ const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: "item-wrapper-ov
   }
   border-bottom: 1px solid neutral-100;
 `;
-const ItemOverlay = React2.memo((itemMeta) => {
-  const { datumInternalMeta } = itemMeta;
-  const { isSelected, hydratedId } = datumInternalMeta;
-  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
-  const isDragAndDropHappening = getIsDragAndDropHappening();
-  const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);
-  return /* @__PURE__ */ jsxs(ItemWrapper, { cols: ["auto", "auto"], alignItems: "center", role: "checkbox", "aria-checked": isSelected, children: [
-    /* @__PURE__ */ jsx(
-      DragOverlay,
-      {
-        id: `${hydratedId}-overlay`,
-        isDndActive: isDragAndDropHappening,
-        isDragging: dndDraggingItem?.hydratedId === hydratedId
-      }
-    ),
-    /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta })
-  ] });
-});
+const ItemOverlay = React2.memo(
+  (itemMeta) => {
+    const { datumInternalMeta } = itemMeta;
+    const { isSelected, hydratedId } = datumInternalMeta;
+    const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
+    const isDragAndDropHappening = getIsDragAndDropHappening();
+    const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);
+    return /* @__PURE__ */ jsxs(ItemWrapper, { cols: ["auto", "auto"], alignItems: "center", role: "checkbox", "aria-checked": isSelected, children: [
+      /* @__PURE__ */ jsx(
+        DragOverlay,
+        {
+          id: `${hydratedId}-overlay`,
+          isDndActive: isDragAndDropHappening,
+          isDragging: dndDraggingItem?.hydratedId === hydratedId
+        }
+      ),
+      /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta })
+    ] });
+  }
+);
 export {
   ItemOverlay
 };

package/dist/esm/parts/Item/ItemOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/ItemOverlay.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { DragOverlay } from '../Dnd/DragOverlay.js';\nimport { DSShuttleV2Name } from '../../config/DSShuttleV2Definitions.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: 'item-wrapper-overlay' })`\n  min-height: 2.769rem;\n  position: relative;\n  background-color: white;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  padding-right: 5px;\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n`;\n\nexport const ItemOverlay = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta } = itemMeta;\n  const { isSelected, hydratedId } = datumInternalMeta;\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const isDragAndDropHappening = getIsDragAndDropHappening();\n  const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);\n\n  return (\n    <ItemWrapper cols={['auto', 'auto']} alignItems=\"center\" role=\"checkbox\" aria-checked={isSelected}>\n      <DragOverlay\n        id={`${hydratedId}-overlay`}\n        isDndActive={isDragAndDropHappening}\n        isDragging={dndDraggingItem?.hydratedId === hydratedId}\n      />\n      <ItemMiddleSection {...itemMeta} />\n    </ItemWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkCnB,SACE,KADF;AAlCJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAIhC,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjF,MAAM,cAAcA,OAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,YAAY,WAAW,IAAI;AAEnC,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,yBAAyB,0BAA0B;AACzD,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,SACE,qBAAC,eAAY,MAAM,CAAC,QAAQ,MAAM,GAAG,YAAW,UAAS,MAAK,YAAW,gBAAc,YACrF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG;AAAA,QACP,aAAa;AAAA,QACb,YAAY,iBAAiB,eAAe;AAAA;AAAA,IAC9C;AAAA,IACA,oBAAC,qBAAmB,GAAG,UAAU;AAAA,KACnC;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { DragOverlay } from '../Dnd/DragOverlay.js';\nimport { DSShuttleV2Name } from '../../config/DSShuttleV2Definitions.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: 'item-wrapper-overlay' })`\n  min-height: 2.769rem;\n  position: relative;\n  background-color: white;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  padding-right: 5px;\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n`;\n\nexport const ItemOverlay = React.memo(\n  (itemMeta: DSShuttleV2T.ItemMeta & { tooltipHelpers?: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n    const { datumInternalMeta } = itemMeta;\n    const { isSelected, hydratedId } = datumInternalMeta;\n\n    const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n    const isDragAndDropHappening = getIsDragAndDropHappening();\n    const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);\n\n    return (\n      <ItemWrapper cols={['auto', 'auto']} alignItems=\"center\" role=\"checkbox\" aria-checked={isSelected}>\n        <DragOverlay\n          id={`${hydratedId}-overlay`}\n          isDndActive={isDragAndDropHappening}\n          isDragging={dndDraggingItem?.hydratedId === hydratedId}\n        />\n        <ItemMiddleSection {...itemMeta} />\n      </ItemWrapper>\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCjB,SACE,KADF;AAnCN,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAIhC,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjF,MAAM,cAAcA,OAAM;AAAA,EAC/B,CAAC,aAAyG;AACxG,UAAM,EAAE,kBAAkB,IAAI;AAC9B,UAAM,EAAE,YAAY,WAAW,IAAI;AAEnC,UAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,UAAM,yBAAyB,0BAA0B;AACzD,UAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,WACE,qBAAC,eAAY,MAAM,CAAC,QAAQ,MAAM,GAAG,YAAW,UAAS,MAAK,YAAW,gBAAc,YACrF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,GAAG;AAAA,UACP,aAAa;AAAA,UACb,YAAY,iBAAiB,eAAe;AAAA;AAAA,MAC9C;AAAA,MACA,oBAAC,qBAAmB,GAAG,UAAU;AAAA,OACnC;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/Item/ItemSelection.js

@@ -4,6 +4,7 @@ import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../../config/useStore/useStore.js";
 const StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })`
   width: 5px;
   height: 100%;
@@ -16,9 +17,23 @@ const StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttl
   return props.theme.colors.brand[300];
 }};
 `;
-const ItemSelection = React2.memo(
-  ({ datumInternalMeta: { isSelected }, datumRenderFlags: { selectionPrevented } }) => /* @__PURE__ */ jsx(StyledItemSelection, { $isSelected: isSelected, $selectionPrevented: selectionPrevented })
-);
+const ItemSelection = React2.memo((itemMeta) => {
+  const {
+    datumInternalMeta: { isSelected },
+    datumRenderFlags: { selectionPrevented }
+  } = itemMeta;
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
+  return /* @__PURE__ */ jsx(
+    StyledItemSelection,
+    {
+      $isSelected: isSelected,
+      $selectionPrevented: selectionPrevented,
+      getOwnerProps,
+      getOwnerPropsArguments
+    }
+  );
+});
 export {
   ItemSelection
 };

package/dist/esm/parts/Item/ItemSelection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/ItemSelection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\n\n// border-right: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n// border-bottom: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n\nconst StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })<{\n  $isSelected: boolean;\n  $selectionPrevented?: boolean;\n}>`\n  width: 5px;\n  height: 100%;\n  box-sizing: border-box;\n  background-color: ${(props) => {\n    if (props.$isSelected) return props.theme.colors.brand[600];\n    if (props.$selectionPrevented === true) return props.theme.colors.neutral['080'];\n    return props.theme.colors.brand[300];\n  }};\n`;\n\nexport const ItemSelection = React.memo(\n  ({ datumInternalMeta: { isSelected }, datumRenderFlags: { selectionPrevented } }: DSShuttleV2T.ItemMeta) => (\n    <StyledItemSelection $isSelected={isSelected} $selectionPrevented={selectionPrevented} />\n  ),\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+BnB;AA/BJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAWlD,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA,sBAOnF,CAAC,UAAU;AAC7B,MAAI,MAAM;AAAa,WAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AAC1D,MAAI,MAAM,wBAAwB;AAAM,WAAO,MAAM,MAAM,OAAO,QAAQ,KAAK;AAC/E,SAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AACrC;AAAA;AAGK,MAAM,gBAAgBA,OAAM;AAAA,EACjC,CAAC,EAAE,mBAAmB,EAAE,WAAW,GAAG,kBAAkB,EAAE,mBAAmB,EAAE,MAC7E,oBAAC,uBAAoB,aAAa,YAAY,qBAAqB,oBAAoB;AAE3F;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\n// border-right: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n// border-bottom: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n\nconst StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })<{\n  $isSelected: boolean;\n  $selectionPrevented?: boolean;\n}>`\n  width: 5px;\n  height: 100%;\n  box-sizing: border-box;\n  background-color: ${(props) => {\n    if (props.$isSelected) return props.theme.colors.brand[600];\n    if (props.$selectionPrevented === true) return props.theme.colors.neutral['080'];\n    return props.theme.colors.brand[300];\n  }};\n`;\n\nexport const ItemSelection = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const {\n    datumInternalMeta: { isSelected },\n    datumRenderFlags: { selectionPrevented },\n  } = itemMeta;\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <StyledItemSelection\n      $isSelected={isSelected}\n      $selectionPrevented={selectionPrevented}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    />\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCnB;AAvCJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAW9B,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA,sBAOnF,CAAC,UAAU;AAC7B,MAAI,MAAM;AAAa,WAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AAC1D,MAAI,MAAM,wBAAwB;AAAM,WAAO,MAAM,MAAM,OAAO,QAAQ,KAAK;AAC/E,SAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AACrC;AAAA;AAGK,MAAM,gBAAgBA,OAAM,KAAK,CAAC,aAAoC;AAC3E,QAAM;AAAA,IACJ,mBAAmB,EAAE,WAAW;AAAA,IAChC,kBAAkB,EAAE,mBAAmB;AAAA,EACzC,IAAI;AACJ,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,UAAU,CAAC,QAAQ,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Item/TextSection.js

@@ -5,14 +5,17 @@ import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { DSTypography } from "@elliemae/ds-typography";
 import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../../config/useStore/useStore.js";
 const withSubtitleRows = ["auto", "auto"];
 const LabelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`
   min-height: 1rem;
 `;
 const TextSection = React2.memo((props) => {
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => props, [props]);
   const { label, subtitle, id } = props.datumHydratables;
   const { softDeleted } = props.datum;
-  return /* @__PURE__ */ jsx(Grid, { id: `${id}-text-section${softDeleted ? "-soft-deleted" : ""}`, children: subtitle === void 0 ? /* @__PURE__ */ jsx(LabelWrapper, { alignItems: "center", children: /* @__PURE__ */ jsx(DSTypography, { variant: "b1", children: label }) }) : /* @__PURE__ */ jsxs(Grid, { alignItems: "center", rows: withSubtitleRows, gutter: "1px", children: [
+  return /* @__PURE__ */ jsx(Grid, { id: `${id}-text-section${softDeleted ? "-soft-deleted" : ""}`, children: subtitle === void 0 ? /* @__PURE__ */ jsx(LabelWrapper, { alignItems: "center", getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(DSTypography, { variant: "b1", children: label }) }) : /* @__PURE__ */ jsxs(Grid, { alignItems: "center", rows: withSubtitleRows, gutter: "1px", children: [
     /* @__PURE__ */ jsx(DSTypography, { variant: "b1", children: label }),
     /* @__PURE__ */ jsx(DSTypography, { variant: "b4", children: subtitle })
   ] }) });

package/dist/esm/parts/Item/TextSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/TextSection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\n\nconst withSubtitleRows = ['auto', 'auto'];\nconst LabelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`\n  min-height: 1rem;\n`;\nexport const TextSection = React.memo((props: DSShuttleV2T.ItemMeta) => {\n  const { label, subtitle, id } = props.datumHydratables;\n  const { softDeleted } = props.datum;\n  return (\n    <Grid id={`${id}-text-section${softDeleted ? '-soft-deleted' : ''}`}>\n      {subtitle === undefined ? (\n        <LabelWrapper alignItems=\"center\">\n          <DSTypography variant=\"b1\">{label}</DSTypography>\n        </LabelWrapper>\n      ) : (\n        <Grid alignItems=\"center\" rows={withSubtitleRows} gutter=\"1px\">\n          <DSTypography variant=\"b1\">{label}</DSTypography>\n          <DSTypography variant=\"b4\">{subtitle}</DSTypography>\n        </Grid>\n      )}\n    </Grid>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBb,cAGF,YAHE;AAlBV,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,wBAAwB;AAGlD,MAAM,mBAAmB,CAAC,QAAQ,MAAM;AACxC,MAAM,eAAe,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAG/F,MAAM,cAAcA,OAAM,KAAK,CAAC,UAAiC;AACtE,QAAM,EAAE,OAAO,UAAU,GAAG,IAAI,MAAM;AACtC,QAAM,EAAE,YAAY,IAAI,MAAM;AAC9B,SACE,oBAAC,QAAK,IAAI,GAAG,kBAAkB,cAAc,kBAAkB,MAC5D,uBAAa,SACZ,oBAAC,gBAAa,YAAW,UACvB,8BAAC,gBAAa,SAAQ,MAAM,iBAAM,GACpC,IAEA,qBAAC,QAAK,YAAW,UAAS,MAAM,kBAAkB,QAAO,OACvD;AAAA,wBAAC,gBAAa,SAAQ,MAAM,iBAAM;AAAA,IAClC,oBAAC,gBAAa,SAAQ,MAAM,oBAAS;AAAA,KACvC,GAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nconst withSubtitleRows = ['auto', 'auto'];\nconst LabelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`\n  min-height: 1rem;\n`;\nexport const TextSection = React.memo((props: DSShuttleV2T.ItemMeta) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n  const { label, subtitle, id } = props.datumHydratables;\n  const { softDeleted } = props.datum;\n  return (\n    <Grid id={`${id}-text-section${softDeleted ? '-soft-deleted' : ''}`}>\n      {subtitle === undefined ? (\n        <LabelWrapper alignItems=\"center\" getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <DSTypography variant=\"b1\">{label}</DSTypography>\n        </LabelWrapper>\n      ) : (\n        <Grid alignItems=\"center\" rows={withSubtitleRows} gutter=\"1px\">\n          <DSTypography variant=\"b1\">{label}</DSTypography>\n          <DSTypography variant=\"b4\">{subtitle}</DSTypography>\n        </Grid>\n      )}\n    </Grid>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBb,cAGF,YAHE;AAtBV,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,wBAAwB;AAElD,SAAS,qBAAqB;AAE9B,MAAM,mBAAmB,CAAC,QAAQ,MAAM;AACxC,MAAM,eAAe,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAG/F,MAAM,cAAcA,OAAM,KAAK,CAAC,UAAiC;AACtE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,QAAM,EAAE,OAAO,UAAU,GAAG,IAAI,MAAM;AACtC,QAAM,EAAE,YAAY,IAAI,MAAM;AAC9B,SACE,oBAAC,QAAK,IAAI,GAAG,kBAAkB,cAAc,kBAAkB,MAC5D,uBAAa,SACZ,oBAAC,gBAAa,YAAW,UAAS,eAA8B,wBAC9D,8BAAC,gBAAa,SAAQ,MAAM,iBAAM,GACpC,IAEA,qBAAC,QAAK,YAAW,UAAS,MAAM,kBAAkB,QAAO,OACvD;AAAA,wBAAC,gBAAa,SAAQ,MAAM,iBAAM;AAAA,IAClC,oBAAC,gBAAa,SAAQ,MAAM,oBAAS;AAAA,KACvC,GAEJ;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/MainContent.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React2 from "react";
+import React2, { useMemo } from "react";
+import { useFontSizeDetector } from "@elliemae/ds-hooks-fontsize-detector";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { useOnBlurOut } from "@elliemae/ds-utilities";
@@ -8,11 +9,33 @@ 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 })`
-  min-width: 648px;
-  min-height: 296px;
-`;
-const mainContentCols = ["1fr", "1fr"];
+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(
@@ -28,10 +51,34 @@ const MainContent = React2.memo(() => {
   const handleOnBlurOut = useOnBlurOut(config);
   const destinationHasMultipleSelectedItems = usePropsStore((store) => store.destinationHasMultipleSelectedItems);
   const sourceHasMultipleSelectedItems = usePropsStore((store) => store.sourceHasMultipleSelectedItems);
-  return /* @__PURE__ */ jsxs(StyledWrapper, { cols: mainContentCols, gutter: "xs", p: "xs", onBlur: handleOnBlurOut, children: [
-    /* @__PURE__ */ jsx(PanelWrapper, { isDestinationPanel: false, hasMultipleSelection: sourceHasMultipleSelectedItems }),
-    /* @__PURE__ */ jsx(PanelWrapper, { isDestinationPanel: true, hasMultipleSelection: destinationHasMultipleSelectedItems })
-  ] });
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const metaInfo = useFontSizeDetector();
+  const colsAndRowsLayout = useMemo(() => {
+    if (metaInfo.isSmall) {
+      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

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

@@ -1,7 +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 from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnBlurOut } from '@elliemae/ds-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  min-width: 648px;\n  min-height: 296px;\n`;\nconst mainContentCols = ['1fr', '1fr'];\n\nexport const MainContent = React.memo(() => {\n  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onBlur: () => {\n        trackFocusRegionReset();\n        trackFocusItemReset();\n        trackFocusActionReset();\n      },\n    }),\n    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n  );\n  const handleOnBlurOut = useOnBlurOut(config);\n  const destinationHasMultipleSelectedItems = usePropsStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = usePropsStore((store) => store.sourceHasMultipleSelectedItems);\n\n  return (\n    <StyledWrapper cols={mainContentCols} gutter=\"xs\" p=\"xs\" onBlur={handleOnBlurOut}>\n      <PanelWrapper isDestinationPanel={false} hasMultipleSelection={sourceHasMultipleSelectedItems} />\n      <PanelWrapper isDestinationPanel hasMultipleSelection={destinationHasMultipleSelectedItems} />\n    </StyledWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCnB,SACE,KADF;AAhCJ,OAAOA,YAAW;AAClB,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;AAAA;AAAA;AAAA;AAI5F,MAAM,kBAAkB,CAAC,OAAO,KAAK;AAE9B,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;AAEpG,SACE,qBAAC,iBAAc,MAAM,iBAAiB,QAAO,MAAK,GAAE,MAAK,QAAQ,iBAC/D;AAAA,wBAAC,gBAAa,oBAAoB,OAAO,sBAAsB,gCAAgC;AAAA,IAC/F,oBAAC,gBAAa,oBAAkB,MAAC,sBAAsB,qCAAqC;AAAA,KAC9F;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { useFontSizeDetector } from '@elliemae/ds-hooks-fontsize-detector';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnBlurOut } from '@elliemae/ds-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.isSmall) {\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

@@ -30,6 +30,8 @@ const LoadMoreBtn = (panelMetaInfo) => {
     [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,
     {
@@ -37,6 +39,8 @@ const LoadMoreBtn = (panelMetaInfo) => {
       onClick: handleOnClick,
       size: BUTTON_SIZES.S,
       innerRef: innerRefHandlerLoadMoreBtn,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: "Load More..."
     }
   );

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

@@ -1,7 +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-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-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  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkCnB;AAlCJ,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-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

@@ -1,14 +1,28 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSIndeterminateProgressIndicator } from "@elliemae/ds-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) => /* @__PURE__ */ jsx(StyledBottomLoadingMore, { px: "1.846rem", children: /* @__PURE__ */ jsx(DSIndeterminateProgressIndicator, { processing: true, title: "Loading" }) });
+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
 };

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

@@ -1,7 +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", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledBottomLoadingMore = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE,\n})``;\nexport const LoadingMore = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledBottomLoadingMore px=\"1.846rem\">\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </StyledBottomLoadingMore>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcnB;AAZJ,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAEjD,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAC1B,oBAAC,2BAAwB,IAAG,YAC1B,8BAAC,oCAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-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

@@ -41,6 +41,8 @@ const PanelContentBottomSection = React2.memo((panelMetaInfo) => {
   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(
@@ -50,6 +52,8 @@ const PanelContentBottomSection = React2.memo((panelMetaInfo) => {
       rows: wrapperColsRows,
       onFocus: onBottomSectionFocus,
       onKeyDown: onLoadMoreButtonKeyDown,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         shouldDisplayLoadingMore ? /* @__PURE__ */ jsx(LoadingMore, { ...panelMetaInfo }) : null,
         shouldDisplayLoadMoreBtn ? /* @__PURE__ */ jsx(LoadMoreBtn, { ...panelMetaInfo }) : null

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

@@ -1,7 +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-system';\nimport { Grid } from '@elliemae/ds-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  if (shouldNotTakeSpace) return <div />;\n  return (\n    <StyledListWrapperBottom\n      cols={wrapperColsRows}\n      rows={wrapperColsRows}\n      onFocus={onBottomSectionFocus}\n      onKeyDown={onLoadMoreButtonKeyDown}\n    >\n      {shouldDisplayLoadingMore ? <LoadingMore {...panelMetaInfo} /> : null}\n      {shouldDisplayLoadMoreBtn ? <LoadMoreBtn {...panelMetaInfo} /> : null}\n    </StyledListWrapperBottom>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiDU,cAE7B,YAF6B;AA/CjC,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,MAAI;AAAoB,WAAO,oBAAC,SAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MAEV;AAAA,mCAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
+  "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-system';\nimport { Grid } from '@elliemae/ds-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/middle/EmptyItems.js

@@ -1,12 +1,27 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-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) => /* @__PURE__ */ jsx(StyledEmptyListWrapper, { alignItems: "center", justifyContent: "center", children: "There are no items to display" });
+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
 };

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

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