npm - @elliemae/ds-shuttle-v2 - Versions diffs - 3.14.0-next.1 → 3.14.0-next.11 - Mend

@elliemae/ds-shuttle-v2 3.14.0-next.1 → 3.14.0-next.11

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

Files changed (174) hide show

package/dist/cjs/parts/Panel/middle/ItemListWrapper/getDatumFlags.js ADDED Viewed

@@ -0,0 +1,44 @@
+"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(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getDatumFlags_exports = {};
+__export(getDatumFlags_exports, {
+  getDatumFlags: () => getDatumFlags
+});
+module.exports = __toCommonJS(getDatumFlags_exports);
+var React = __toESM(require("react"));
+const getDatumFlags = ({
+  softDeleted,
+  preventMove = false,
+  preventDrilldown = false,
+  hasMultipleSelection = false
+}) => ({
+  selectionPrevented: Boolean(softDeleted || preventMove),
+  withActions: !softDeleted,
+  withMoveBtn: !softDeleted && !preventMove,
+  withDrilldownBtn: !softDeleted && !preventDrilldown,
+  internallyDisabledMove: hasMultipleSelection,
+  internallyDisabledDrilldown: hasMultipleSelection
+});
+//# sourceMappingURL=getDatumFlags.js.map

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

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

package/dist/cjs/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js ADDED Viewed

@@ -0,0 +1,57 @@
+"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(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useGetDatumHydratables_exports = {};
+__export(useGetDatumHydratables_exports, {
+  useGetDatumHydratables: () => useGetDatumHydratables
+});
+module.exports = __toCommonJS(useGetDatumHydratables_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_useStore = require("../../../../config/useStore");
+const useGetDatumHydratables = (panelMetaInfo) => {
+  const getLabel = (0, import_useStore.usePropsStore)((state) => state.getLabel);
+  const getSubtitle = (0, import_useStore.usePropsStore)((state) => state.getSubtitle);
+  const getIcon = (0, import_useStore.usePropsStore)((state) => state.getIcon);
+  const getCustomRenderer = (0, import_useStore.usePropsStore)((state) => state.getCustomRenderer);
+  const getPreventDrilldown = (0, import_useStore.usePropsStore)((state) => state.getPreventDrilldown);
+  const getPreventMove = (0, import_useStore.usePropsStore)((state) => state.getPreventMove);
+  const getDatumHydratables = import_react.default.useCallback(
+    (item) => {
+      const { original, ...datumMeta } = item;
+      return {
+        id: datumMeta.hydratedId,
+        label: getLabel(original, { datumMeta, panelMetaInfo }),
+        ...getSubtitle !== void 0 ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getIcon !== void 0 ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getCustomRenderer !== void 0 ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getPreventDrilldown !== void 0 ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) } : {},
+        ...getPreventMove !== void 0 ? { preventMove: getPreventMove(original, { datumMeta, panelMetaInfo }) } : {}
+      };
+    },
+    [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getPreventMove, getSubtitle, panelMetaInfo]
+  );
+  return getDatumHydratables;
+};
+//# sourceMappingURL=useGetDatumHydratables.js.map

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

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

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

@@ -32,9 +32,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_button = require("@elliemae/ds-button");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_icons = require("@elliemae/ds-icons");
+var import_constants = require("../../../constants");
 var import_itemMovementHelpers = require("../../../config/itemMovementHelpers");
+var import_useStore = require("../../../config/useStore");
 var import_useFocusTracker = require("../../../config/useFocusTracker");
 var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
 const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
@@ -44,7 +46,7 @@ const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
   right: 0px;
   transform: translateX(0);
   height: 100%;
-  width: 65px;
+  width: 5rem;
   :hover {
     background-color: brand-200;
     > svg {
@@ -55,7 +57,7 @@ const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
     fill: brand-600;
   }
 `;
-const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
+const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
   name: import_DSShuttleV2Definitions.DSShuttleV2Name,
   slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.MOVE_MULTIPLE_BTN
 })`
@@ -82,7 +84,7 @@ const gridFullFraction = ["1fr"];
 const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
   const { isDestinationPanel } = panelMeta;
   const { moveSelection } = (0, import_itemMovementHelpers.useHandleMoveSelection)(panelMeta);
-  const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } = (0, import_useFocusTracker.useFocusTracker)();
+  const { trackFocusRegionPanel, trackFocusRegionPanelFocusMoveAll, trackFocusItemReset, trackFocusActionReset } = (0, import_useFocusTracker.useFocusTracker)();
   const handleMoveAllAction = import_react.default.useCallback(
     (event) => {
       moveSelection(event);
@@ -95,8 +97,20 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
   const handleMoveAllBtnFocus = import_react.default.useCallback(() => {
     trackFocusItemReset();
     trackFocusActionReset();
-    trackFocusRegionPanelFocusAll(isDestinationPanel);
-  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);
+    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);
+  const focusRegion = (0, import_useStore.useInternalStore)((state) => state.focusRegion);
+  const focusItem = (0, import_useStore.useInternalStore)((state) => state.focusItem);
+  const focusItemAction = (0, import_useStore.useInternalStore)((state) => state.focusItemAction);
+  const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;
+  const shouldFocusMoveAll = focusItem === "" && focusItemAction === "" && focusRegion === currRegion;
+  const innerRefHandlerMoveAll = import_react.default.useCallback(
+    (node) => {
+      if (shouldFocusMoveAll)
+        node?.focus();
+    },
+    [shouldFocusMoveAll]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledMoveMultipleWrapper,
     {
@@ -105,7 +119,16 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
       justifyContent: "center",
       cols: gridFullFraction,
       rows: gridFullFraction,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, { buttonType: "icon", onClick: handleMoveAllAction, onFocus: handleMoveAllBtnFocus, children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, { width: "20px", height: "20px" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, { width: "20px", height: "20px" }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledButton,
+        {
+          buttonType: "icon",
+          onClick: handleMoveAllAction,
+          onFocus: handleMoveAllBtnFocus,
+          innerRef: innerRefHandlerMoveAll,
+          children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, { width: "1.538", height: "1.538rem" })
+        }
+      )
     }
   );
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/middle/MultipleSelectionAction.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 65px;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton buttonType=\"icon\" onClick={handleMoveAllAction} onFocus={handleMoveAllBtnFocus}>\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmFb;AAnFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2C;AAC3C,sBAA6C;AAE7C,iCAAuC;AACvC,6BAAgC;AAChC,oCAAkD;AAElD,MAAM,gCAA4B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBtH,MAAM,mBAAe,yBAAO,6BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0B,aAAAA,QAAM,KAAK,CAAC,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,QAAI,mDAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,QACvG,wCAAgB;AAClB,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,UAAU;AACT,oBAAc,KAAK;AACnB,0BAAoB;AACpB,4BAAsB;AACtB,4BAAsB,kBAAkB;AAAA,IAC1C;AAAA,IACA,CAAC,oBAAoB,eAAe,uBAAuB,qBAAqB,qBAAqB;AAAA,EACvG;AACA,QAAM,wBAAoE,aAAAA,QAAM,YAAY,MAAM;AAChG,wBAAoB;AACpB,0BAAsB;AACtB,kCAA8B,kBAAkB;AAAA,EAClD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,6BAA6B,CAAC;AAElG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN,sDAAC,gBAAa,YAAW,QAAO,SAAS,qBAAqB,SAAS,uBACpE,+BACC,4CAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,4CAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO,GAE1D;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers';\nimport { useInternalStore } from '../../../config/useStore';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 5rem;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusMoveAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel\n    ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n    : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n  const shouldFocusMoveAll = focusItem === '' && focusItemAction === '' && focusRegion === currRegion;\n  const innerRefHandlerMoveAll = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      if (shouldFocusMoveAll) node?.focus();\n    },\n    [shouldFocusMoveAll],\n  );\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        innerRef={innerRefHandlerMoveAll}\n      >\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"1.538\" height=\"1.538rem\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuGb;AAvGV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,0BAA2C;AAC3C,sBAA6C;AAC7C,uBAAgC;AAEhC,iCAAuC;AACvC,sBAAiC;AACjC,6BAAgC;AAChC,oCAAkD;AAElD,MAAM,gCAA4B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBtH,MAAM,mBAAe,yBAAO,gCAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0B,aAAAA,QAAM,KAAK,CAAC,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,QAAI,mDAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,mCAAmC,qBAAqB,sBAAsB,QAC3G,wCAAgB;AAClB,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,UAAU;AACT,oBAAc,KAAK;AACnB,0BAAoB;AACpB,4BAAsB;AACtB,4BAAsB,kBAAkB;AAAA,IAC1C;AAAA,IACA,CAAC,oBAAoB,eAAe,uBAAuB,qBAAqB,qBAAqB;AAAA,EACvG;AACA,QAAM,wBAAoE,aAAAA,QAAM,YAAY,MAAM;AAChG,wBAAoB;AACpB,0BAAsB;AACtB,sCAAkC,kBAAkB;AAAA,EACtD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,iCAAiC,CAAC;AACtG,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,aAAa,qBACf,iCAAgB,kCAChB,iCAAgB;AACpB,QAAM,qBAAqB,cAAc,MAAM,oBAAoB,MAAM,gBAAgB;AACzF,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,SAAmC;AAClC,UAAI;AAAoB,cAAM,MAAM;AAAA,IACtC;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,SAAS;AAAA,UACT,SAAS;AAAA,UACT,UAAU;AAAA,UAET,+BACC,4CAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,4CAAC,6BAA0B,OAAM,SAAQ,QAAO,YAAW;AAAA;AAAA,MAE/D;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -34,7 +34,7 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_useStore = require("../../../config/useStore");
-var import_ItemListWrapper = require("./ItemListWrapper");
+var import_Index = require("./ItemListWrapper/Index");
 var import_EmptyItems = require("./EmptyItems");
 var import_useFocusTracker = require("../../../config/useFocusTracker");
 var import_LoadingItems = require("./LoadingItems");
@@ -66,24 +66,16 @@ const StyledListWrapperMid = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   :focus,
   :focus-visible {
-    outline: none;
-    &::after {
-      position: absolute;
-      content: ' ';
       outline: 2px solid brand-700;
-      outline-offset: -2px;
-      width: 100%;
-      height: 100%;
     }
   }
 `;
 const StyledMidScroller = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_WRAPPER_MID })`
   overflow: auto;
-  max-height: '500px';
+  max-height: 38.462rem;
 `;
 const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
-  const { isDestinationPanel = false } = panelMetaInfo;
+  const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;
   const itemsLength = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.destinationData.length : state.sourceData.length
   );
@@ -93,10 +85,7 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
   const virtualRef = (0, import_useStore.useInternalStore)(
     (state) => isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef
   );
-  const destinationHasMultipleSelectedItems = (0, import_useStore.useInternalStore)((store) => store.destinationHasMultipleSelectedItems);
-  const sourceHasMultipleSelectedItems = (0, import_useStore.useInternalStore)((store) => store.sourceHasMultipleSelectedItems);
-  const hasMultipleSelection = isDestinationPanel ? destinationHasMultipleSelectedItems : sourceHasMultipleSelectedItems;
-  const isDragging = (0, import_useStore.useInternalStore)((state) => state.lastActiveId !== "");
+  const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
   const withLoadMore = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
   );
@@ -107,6 +96,7 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
     trackFocusItemLast,
     trackFocusActionParent,
     trackFocusRegionPanelItem,
+    trackFocusLoadMoreBtnDestination,
     trackFocusLoadMoreBtn
   } = (0, import_useFocusTracker.useFocusTracker)();
   const config = import_react.default.useMemo(
@@ -121,7 +111,8 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
   const onPanelKeyDown = import_react.default.useCallback(
     (e) => {
       const { key } = e;
-      if (isDragging) {
+      const isDragAndDropHappening = getIsDragAndDropHappening();
+      if (isDragAndDropHappening) {
         e.preventDefault();
         return;
       }
@@ -133,22 +124,26 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
         if (key === "ArrowDown" || key === "Home")
           trackFocusItemFirst();
         if (key === "ArrowUp" || key === "End") {
-          if (withLoadMore)
-            trackFocusLoadMoreBtn();
-          else
+          if (withLoadMore) {
+            if (isDestinationPanel)
+              trackFocusLoadMoreBtnDestination();
+            else
+              trackFocusLoadMoreBtn();
+          } else
             trackFocusItemLast();
         }
       }
     },
     [
-      isDragging,
+      getIsDragAndDropHappening,
+      trackFocusRegionPanelItem,
       isDestinationPanel,
       trackFocusActionParent,
       trackFocusItemFirst,
+      withLoadMore,
       trackFocusItemLast,
-      trackFocusLoadMoreBtn,
-      trackFocusRegionPanelItem,
-      withLoadMore
+      trackFocusLoadMoreBtnDestination,
+      trackFocusLoadMoreBtn
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -162,9 +157,9 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledMidScroller, { ref: virtualRef, children: [
           isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingItems.LoadingItems, { ...panelMetaInfo }) : null,
           showEmptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyItems.EmptyItems, { ...panelMetaInfo }) : null,
-          showItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemListWrapper.ItemListWrapperWithContext, { ...panelMetaInfo }) : null
+          showItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Index.ItemListWrapperWithContext, { ...panelMetaInfo }) : null
         ] }),
-        hasMultipleSelection ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MultipleSelectionAction.MultipleSelectionAction, { isDestinationPanel }) : null
+        hasMultipleSelection ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MultipleSelectionAction.MultipleSelectionAction, { ...panelMetaInfo }) : null
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/middle/PanelContentMiddleSection.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\n\nimport { usePropsStore, useInternalStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemListWrapperWithContext } from './ItemListWrapper';\nimport { EmptyItems } from './EmptyItems';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\n\nimport { LoadingItems } from './LoadingItems';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const shouldFocus = React.useMemo(\n    () => focusRegion === currRegion && focusItem === '' && focusItemAction === '',\n    [currRegion, focusItem, focusItemAction, focusRegion],\n  );\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (shouldFocus) {\n        node?.focus();\n      }\n    },\n    [shouldFocus],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: hidden;\n  position: relative;\n\n  :focus,\n  :focus-visible {\n    outline: none;\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      outline: 2px solid brand-700;\n      outline-offset: -2px;\n      width: 100%;\n      height: 100%;\n    }\n  }\n`;\nconst StyledMidScroller = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: auto;\n  max-height: '500px';\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  const virtualRef = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n\n  const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = useInternalStore((store) => store.sourceHasMultipleSelectedItems);\n  const hasMultipleSelection = isDestinationPanel\n    ? destinationHasMultipleSelectedItems\n    : sourceHasMultipleSelectedItems;\n  const isDragging = useInternalStore((state) => state.lastActiveId !== '');\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n\n      if (isDragging) {\n        e.preventDefault();\n        return;\n      }\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if (key === 'ArrowDown' || key === 'Home') trackFocusItemFirst();\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) trackFocusLoadMoreBtn();\n          else trackFocusItemLast();\n        }\n      }\n    },\n    [\n      isDragging,\n      isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemFirst,\n      trackFocusItemLast,\n      trackFocusLoadMoreBtn,\n      trackFocusRegionPanelItem,\n      withLoadMore,\n    ],\n  );\n\n  return (\n    <StyledListWrapperMid\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n      tabIndex={0}\n      ref={innerRefHandlerParentItem}\n    >\n      <StyledMidScroller ref={virtualRef}>\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n      </StyledMidScroller>\n      {hasMultipleSelection ? <MultipleSelectionAction isDestinationPanel={isDestinationPanel} /> : null}\n    </StyledListWrapperMid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\n\nimport { usePropsStore, useInternalStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index';\nimport { EmptyItems } from './EmptyItems';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\n\nimport { LoadingItems } from './LoadingItems';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const shouldFocus = React.useMemo(\n    () => focusRegion === currRegion && focusItem === '' && focusItemAction === '',\n    [currRegion, focusItem, focusItemAction, focusRegion],\n  );\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (shouldFocus) {\n        node?.focus();\n      }\n    },\n    [shouldFocus],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: hidden;\n  position: relative;\n\n  :focus,\n  :focus-visible {\n      outline: 2px solid brand-700;\n    }\n  }\n`;\nconst StyledMidScroller = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: auto;\n  max-height: 38.462rem;\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  const virtualRef = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtnDestination,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if (key === 'ArrowDown' || key === 'Home') trackFocusItemFirst();\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) {\n            if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n            else trackFocusLoadMoreBtn();\n          } else trackFocusItemLast();\n        }\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      isDestinationPanel,\n      trackFocusActionParent,\n      trackFocusItemFirst,\n      withLoadMore,\n      trackFocusItemLast,\n      trackFocusLoadMoreBtnDestination,\n      trackFocusLoadMoreBtn,\n    ],\n  );\n\n  return (\n    <StyledListWrapperMid\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n      tabIndex={0}\n      ref={innerRefHandlerParentItem}\n    >\n      <StyledMidScroller ref={virtualRef}>\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n      </StyledMidScroller>\n      {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n    </StyledListWrapperMid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqIjB;AArIN,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,0BAAmC;AAEnC,sBAAgD;AAEhD,mBAA2C;AAC3C,wBAA2B;AAC3B,6BAAgC;AAEhC,0BAA6B;AAC7B,qCAAwC;AACxC,uBAAgC;AAChC,oCAAkD;AAElD,MAAM,sBAAsB,CAAC,uBAAgC;AAC3D,QAAM,kBAAc,kCAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,aAAa,qBAAqB,iCAAgB,oBAAoB,iCAAgB;AAE5F,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MAAM,gBAAgB,cAAc,cAAc,MAAM,oBAAoB;AAAA,IAC5E,CAAC,YAAY,WAAW,iBAAiB,WAAW;AAAA,EACtD;AAEA,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,CAAC,SAAyB;AACxB,UAAI,aAAa;AACf,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,aAAa,0BAA0B,IAAI,CAAC,aAAa,yBAAyB,CAAC;AACnH;AAEA,MAAM,2BAAuB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5G,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAIlG,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,OAAO,qBAAqB,IAAI;AAC7D,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,gBAAgB,SAAS,MAAM,WAAW;AAAA,EACvE;AACA,QAAM,gBAAY,+BAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AACpH,QAAM,mBAAmB,CAAC,aAAa,gBAAgB;AACvD,QAAM,YAAY,CAAC,aAAa,CAAC;AAEjC,QAAM,iBAAa;AAAA,IAAiB,CAAC,UACnC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AAEA,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,EAAE,0BAA0B,IAAI,oBAAoB,kBAAkB;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wCAAgB;AACpB,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO;AAAA,MACL,SAAS,MAAM;AACb,8BAAsB,kBAAkB;AAAA,MAC1C;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,kBAAkB;AAAA,EAC5C;AACA,QAAM,mBAAe,wCAAmB,MAAM;AAE9C,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AACA,UAAI,CAAC,QAAQ,OAAO,WAAW,WAAW,EAAE,SAAS,GAAG,GAAG;AACzD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,kCAA0B,kBAAkB;AAC5C,+BAAuB;AAEvB,YAAI,QAAQ,eAAe,QAAQ;AAAQ,8BAAoB;AAC/D,YAAI,QAAQ,aAAa,QAAQ,OAAO;AACtC,cAAI,cAAc;AAChB,gBAAI;AAAoB,+CAAiC;AAAA;AACpD,oCAAsB;AAAA,UAC7B;AAAO,+BAAmB;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,KAAK;AAAA,MAEL;AAAA,qDAAC,qBAAkB,KAAK,YACrB;AAAA,sBAAY,4CAAC,oCAAc,GAAG,eAAe,IAAK;AAAA,UAClD,mBAAmB,4CAAC,gCAAY,GAAG,eAAe,IAAK;AAAA,UACvD,YAAY,4CAAC,2CAA4B,GAAG,eAAe,IAAK;AAAA,WACnE;AAAA,QACC,uBAAuB,4CAAC,0DAAyB,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EAC3E;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Panel/top/SelectionHeader.js CHANGED Viewed

@@ -81,7 +81,7 @@ const SelectionHeader = import_react.default.memo(({ isDestinationPanel = false
       } else {
         const newSelection = {};
         selectionableItems.forEach((selectableItem) => {
-          newSelection[selectableItem.original.id] = true;
+          newSelection[selectableItem.hydratedId] = true;
         });
         onSelectionChange(newSelection, { event });
       }

package/dist/cjs/parts/Panel/top/SelectionHeader.js.map CHANGED Viewed

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

package/dist/cjs/parts/PanelWrapper.js CHANGED Viewed

@@ -46,15 +46,12 @@ const StyledListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { na
 `;
 const panelWrapperRows = ["auto", "1fr"];
 const listWrapperRows = ["auto", "1fr", "auto"];
-const PanelWrapper = import_react.default.memo((panelMetaInfo) => {
-  const { isDestinationPanel = false } = panelMetaInfo;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledPanelWrapper, { rows: panelWrapperRows, gutter: "xxxs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Header.Header, { isDestinationPanel }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledListWrapper, { rows: listWrapperRows, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentTopSection.PanelContentTopSection, { ...panelMetaInfo }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentMiddleSection.PanelContentMiddleSection, { ...panelMetaInfo }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentBottomSection.PanelContentBottomSection, { ...panelMetaInfo })
-    ] })
-  ] });
-});
+const PanelWrapper = import_react.default.memo((panelMetaInfo) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledPanelWrapper, { rows: panelWrapperRows, gutter: "xxxs", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Header.Header, { ...panelMetaInfo }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledListWrapper, { rows: listWrapperRows, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentTopSection.PanelContentTopSection, { ...panelMetaInfo }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentMiddleSection.PanelContentMiddleSection, { ...panelMetaInfo }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentBottomSection.PanelContentBottomSection, { ...panelMetaInfo })
+  ] })
+] }));
 //# sourceMappingURL=PanelWrapper.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/PanelWrapper.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../react-desc-prop-types';\nimport { Header } from './Header';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n  min-height: 264px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n\n  return (\n    <StyledPanelWrapper rows={panelWrapperRows} gutter=\"xxxs\">\n      <Header isDestinationPanel={isDestinationPanel} />\n      <StyledListWrapper rows={listWrapperRows}>\n        <PanelContentTopSection {...panelMetaInfo} />\n        <PanelContentMiddleSection {...panelMetaInfo} />\n        <PanelContentBottomSection {...panelMetaInfo} />\n      </StyledListWrapper>\n    </StyledPanelWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oBAAuB;AACvB,oCAAuC;AACvC,uCAA0C;AAC1C,uCAA0C;AAC1C,oCAAkD;AAElD,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAIvG,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,aAAa,CAAC;AAAA;AAAA;AAGrG,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AAEvC,MAAM,eAAe,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACpF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AAEvC,SACE,6CAAC,sBAAmB,MAAM,kBAAkB,QAAO,QACjD;AAAA,gDAAC,wBAAO,oBAAwC;AAAA,IAChD,6CAAC,qBAAkB,MAAM,iBACvB;AAAA,kDAAC,wDAAwB,GAAG,eAAe;AAAA,MAC3C,4CAAC,8DAA2B,GAAG,eAAe;AAAA,MAC9C,4CAAC,8DAA2B,GAAG,eAAe;AAAA,OAChD;AAAA,KACF;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../react-desc-prop-types';\nimport { Header } from './Header';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n  min-height: 264px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledPanelWrapper rows={panelWrapperRows} gutter=\"xxxs\">\n    <Header {...panelMetaInfo} />\n    <StyledListWrapper rows={listWrapperRows}>\n      <PanelContentTopSection {...panelMetaInfo} />\n      <PanelContentMiddleSection {...panelMetaInfo} />\n      <PanelContentBottomSection {...panelMetaInfo} />\n    </StyledListWrapper>\n  </StyledPanelWrapper>\n));\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oBAAuB;AACvB,oCAAuC;AACvC,uCAA0C;AAC1C,uCAA0C;AAC1C,oCAAkD;AAElD,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAIvG,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,aAAa,CAAC;AAAA;AAAA;AAGrG,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AAEvC,MAAM,eAAe,aAAAA,QAAM,KAAK,CAAC,kBACtC,6CAAC,sBAAmB,MAAM,kBAAkB,QAAO,QACjD;AAAA,8CAAC,wBAAQ,GAAG,eAAe;AAAA,EAC3B,6CAAC,qBAAkB,MAAM,iBACvB;AAAA,gDAAC,wDAAwB,GAAG,eAAe;AAAA,IAC3C,4CAAC,8DAA2B,GAAG,eAAe;AAAA,IAC9C,4CAAC,8DAA2B,GAAG,eAAe;AAAA,KAChD;AAAA,GACF,CACD;",
   "names": ["React"]
 }

package/dist/cjs/react-desc-prop-types.js CHANGED Viewed

@@ -24,42 +24,59 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
-  DSSkeletonPropTypes: () => DSSkeletonPropTypes,
+  DSShuttleV2PropTypesSchema: () => DSShuttleV2PropTypesSchema,
   defaultProps: () => defaultProps
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
 const defaultProps = {
-  sourceWithSoftDelete: false,
   addDragAndDropFromSource: false,
+  removeDragAndDropFromDestination: false,
   sourceIsLoading: false,
+  destinationIsLoading: false,
   sourceWithLoadMore: false,
+  destinationWithLoadMore: false,
   sourceIsLoadingMore: false,
+  destinationIsLoadingMore: false,
   onSourceLoadMore: () => {
   },
-  onSourceChange: () => {
+  onDestinationLoadMore: () => {
   },
   onSourceAdd: () => {
   },
+  onDestinationAdd: () => {
+  },
   onSourceRemove: () => {
   },
-  destinationWithSoftDelete: false,
-  removeDragAndDropFromDestination: false,
-  destinationIsLoading: false,
-  destinationWithLoadMore: false,
-  destinationIsLoadingMore: false,
-  onDestinationLoadMore: () => {
+  onDestinationRemove: () => {
   },
-  onDestinationChange: () => {
+  onSourceReorder: () => {
   },
-  onDestinationAdd: () => {
+  onDestinationReorder: () => {
   },
-  onDestinationRemove: () => {
+  sourceSoftDeletedItems: {},
+  onSourceSoftDelete: () => {
+  },
+  destinationSoftDeletedItems: {},
+  onDestinationSoftDelete: () => {
   }
 };
-const DSSkeletonPropTypes = {
+const DSShuttleV2PropTypes = {
   ...import_ds_utilities.globalAttributesPropTypes,
-  ...import_ds_utilities.xstyledPropTypes
+  ...import_ds_utilities.xstyledPropTypes,
+  sourceData: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object).description("hello!").isRequired,
+  sourceSelectedItems: import_ds_utilities.PropTypes.object.description("hello!").isRequired,
+  onSourceSelectionChange: import_ds_utilities.PropTypes.func.description("hello!").isRequired,
+  SourceHeader: import_ds_utilities.PropTypes.node.description("hello!").isRequired,
+  onSourceDrilldown: import_ds_utilities.PropTypes.func.description("hello!").isRequired,
+  destinationData: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object).description("hello!").isRequired,
+  destinationSelectedItems: import_ds_utilities.PropTypes.object.description("hello!").isRequired,
+  onDestinationSelectionChange: import_ds_utilities.PropTypes.func.description("hello!").isRequired,
+  DestinationHeader: import_ds_utilities.PropTypes.node.description("hello!").isRequired,
+  onDestinationDrilldown: import_ds_utilities.PropTypes.func.description("hello!").isRequired,
+  getId: import_ds_utilities.PropTypes.func.description("hello!").isRequired,
+  getLabel: import_ds_utilities.PropTypes.func.description("hello!").isRequired
 };
+const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map