npm - @elliemae/ds-shuttle-v2 - Versions diffs - 3.14.0-next.8 → 3.14.0-next.9 - Mend

@elliemae/ds-shuttle-v2 3.14.0-next.8 → 3.14.0-next.9

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 (89) hide show

package/dist/cjs/parts/Item/ItemActions/useActionsLogicHandlers.js CHANGED Viewed

@@ -31,9 +31,13 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useStore = require("../../../config/useStore");
 var import_itemMovementHelpers = require("../../../config/itemMovementHelpers");
+var import_useFocusTracker = require("../../../config/useFocusTracker");
 const useActionsLogicHandlers = (itemMeta) => {
   const { datum, isDestinationPanel } = itemMeta;
   const moveCurrentItem = (0, import_itemMovementHelpers.useHandleMoveItem)(itemMeta);
+  const { trackFocusItemReset } = (0, import_useFocusTracker.useFocusItemTracker)();
+  const { trackFocusActionReset } = (0, import_useFocusTracker.useFocusActionTrackers)();
+  const { trackFocusRegionPanel } = (0, import_useFocusTracker.useFocusTracker)();
   const currDrilldown = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown
   );
@@ -42,17 +46,33 @@ const useActionsLogicHandlers = (itemMeta) => {
       event.preventDefault();
       event.stopPropagation();
       currDrilldown(datum, { event });
+      trackFocusRegionPanel(isDestinationPanel);
+      trackFocusItemReset();
+      trackFocusActionReset();
     },
-    [currDrilldown, datum]
+    [currDrilldown, datum, isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
   );
   const handleSingleMove = import_react.default.useCallback(
     (event) => {
       event.preventDefault();
       event.stopPropagation();
       moveCurrentItem(event);
+      trackFocusRegionPanel(isDestinationPanel);
+      trackFocusItemReset();
+      trackFocusActionReset();
     },
-    [moveCurrentItem]
+    [isDestinationPanel, moveCurrentItem, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
+  );
+  const preventKeyDownSelectionBubbleUp = import_react.default.useCallback((event) => {
+    const { key } = event;
+    if (["Spacebar", " ", "Enter"].includes(key)) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, []);
+  return import_react.default.useMemo(
+    () => ({ handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp }),
+    [handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp]
   );
-  return import_react.default.useMemo(() => ({ handleDrilldown, handleSingleMove }), [handleDrilldown, handleSingleMove]);
 };
 //# sourceMappingURL=useActionsLogicHandlers.js.map

package/dist/cjs/parts/Item/ItemActions/useActionsLogicHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/useActionsLogicHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { usePropsStore } from '../../../config/useStore';\nimport { useHandleMoveItem } from '../../../config/itemMovementHelpers';\n\nexport const useActionsLogicHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datum, isDestinationPanel } = itemMeta;\n  const moveCurrentItem = useHandleMoveItem(itemMeta);\n\n  const currDrilldown = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown,\n  );\n\n  const handleDrilldown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      currDrilldown(datum, { event });\n    },\n    [currDrilldown, datum],\n  );\n\n  const handleSingleMove = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      moveCurrentItem(event);\n    },\n    [moveCurrentItem],\n  );\n  return React.useMemo(() => ({ handleDrilldown, handleSingleMove }), [handleDrilldown, handleSingleMove]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAA8B;AAC9B,iCAAkC;AAE3B,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,OAAO,mBAAmB,IAAI;AACtC,QAAM,sBAAkB,8CAAkB,QAAQ;AAElD,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,oBAAc,OAAO,EAAE,MAAM,CAAC;AAAA,IAChC;AAAA,IACA,CAAC,eAAe,KAAK;AAAA,EACvB;AAEA,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,sBAAgB,KAAK;AAAA,IACvB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,iBAAiB,iBAAiB,IAAI,CAAC,iBAAiB,gBAAgB,CAAC;AACzG;",
+  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { usePropsStore } from '../../../config/useStore';\nimport { useHandleMoveItem } from '../../../config/itemMovementHelpers';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../../config/useFocusTracker';\n\nexport const useActionsLogicHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datum, isDestinationPanel } = itemMeta;\n  const moveCurrentItem = useHandleMoveItem(itemMeta);\n  const { trackFocusItemReset } = useFocusItemTracker();\n  const { trackFocusActionReset } = useFocusActionTrackers();\n  const { trackFocusRegionPanel } = useFocusTracker();\n\n  const currDrilldown = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown,\n  );\n\n  const handleDrilldown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      currDrilldown(datum, { event });\n      trackFocusRegionPanel(isDestinationPanel);\n      trackFocusItemReset();\n      trackFocusActionReset();\n    },\n    [currDrilldown, datum, isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n\n  const handleSingleMove = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      moveCurrentItem(event);\n      trackFocusRegionPanel(isDestinationPanel);\n      trackFocusItemReset();\n      trackFocusActionReset();\n    },\n    [isDestinationPanel, moveCurrentItem, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n\n  const preventKeyDownSelectionBubbleUp = React.useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\n    const { key } = event;\n    // Spacebar AND ' ' are cross-browser compatibility thing\n    if (['Spacebar', ' ', 'Enter'].includes(key)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }, []);\n\n  return React.useMemo(\n    () => ({ handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp }),\n    [handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAA8B;AAC9B,iCAAkC;AAClC,6BAA6E;AAEtE,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,OAAO,mBAAmB,IAAI;AACtC,QAAM,sBAAkB,8CAAkB,QAAQ;AAClD,QAAM,EAAE,oBAAoB,QAAI,4CAAoB;AACpD,QAAM,EAAE,sBAAsB,QAAI,+CAAuB;AACzD,QAAM,EAAE,sBAAsB,QAAI,wCAAgB;AAElD,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,oBAAc,OAAO,EAAE,MAAM,CAAC;AAC9B,4BAAsB,kBAAkB;AACxC,0BAAoB;AACpB,4BAAsB;AAAA,IACxB;AAAA,IACA,CAAC,eAAe,OAAO,oBAAoB,uBAAuB,qBAAqB,qBAAqB;AAAA,EAC9G;AAEA,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,CAAC,UAAwF;AACvF,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,sBAAgB,KAAK;AACrB,4BAAsB,kBAAkB;AACxC,0BAAoB;AACpB,4BAAsB;AAAA,IACxB;AAAA,IACA,CAAC,oBAAoB,iBAAiB,uBAAuB,qBAAqB,qBAAqB;AAAA,EACzG;AAEA,QAAM,kCAAkC,aAAAA,QAAM,YAAY,CAAC,UAAkD;AAC3G,UAAM,EAAE,IAAI,IAAI;AAEhB,QAAI,CAAC,YAAY,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC5C,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,iBAAiB,kBAAkB,gCAAgC;AAAA,IAC5E,CAAC,iBAAiB,kBAAkB,+BAA+B;AAAA,EACrE;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/ItemMiddleSection.js CHANGED Viewed

@@ -32,14 +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_typography = require("@elliemae/ds-typography");
 var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
+var import_TextSection = require("./TextSection");
 const IconWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ICON_WRAPPER })`
   min-height: 1rem;
 `;
-const LabelWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`
-  min-height: 1rem;
-`;
 const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   name: import_DSShuttleV2Definitions.DSShuttleV2Name,
   slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER
@@ -58,28 +55,18 @@ const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, {
 `;
 const customMidSectionCols = ["1fr"];
 const customMidSectionRows = ["1fr"];
-const withSubtitleRows = ["auto", "auto"];
-const TextSection = import_react.default.memo((props) => {
-  const { label, subtitle } = props.datumHydratables;
-  if (subtitle === void 0)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelWrapper, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: label }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { alignItems: "center", rows: withSubtitleRows, gutter: "1px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b4", children: subtitle })
-  ] });
-});
 const ItemMiddleSection = import_react.default.memo((itemMeta) => {
-  const { datum, datumHydratables, datumInternalMeta, isDestinationPanel } = itemMeta;
+  const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;
   const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;
   const { softDeleted, hydratedId } = datumInternalMeta;
   const customComponentProps = import_react.default.useMemo(
     () => ({
       datum,
-      panelMetaInfo: { isDestinationPanel },
+      panelMetaInfo: { isDestinationPanel, hasMultipleSelection },
       datumInternalMeta,
       datumHydratables: { ...componentlessHydratables, id: hydratedId }
     }),
-    [componentlessHydratables, datum, datumInternalMeta, hydratedId, isDestinationPanel]
+    [componentlessHydratables, datum, datumInternalMeta, hasMultipleSelection, hydratedId, isDestinationPanel]
   );
   const cols = import_react.default.useMemo(() => {
     if (CustomRenderer)
@@ -94,7 +81,7 @@ const ItemMiddleSection = import_react.default.memo((itemMeta) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MidSection, { cols: customMidSectionCols, rows: customMidSectionRows, $softDeleted: Boolean(softDeleted), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomRenderer, { ...customComponentProps }) });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MidSection, { cols, alignItems: "center", ml: "xxs", $softDeleted: Boolean(softDeleted), children: [
     Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { alignItems: "center", mr: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...customComponentProps }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextSection, { ...itemMeta })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextSection.TextSection, { ...itemMeta })
   ] });
 });
 //# sourceMappingURL=ItemMiddleSection.js.map

package/dist/cjs/parts/Item/ItemMiddleSection.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/ItemMiddleSection.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 { DSTypography } from '@elliemae/ds-typography';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\nconst LabelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`\n  min-height: 1rem;\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\nconst withSubtitleRows = ['auto', 'auto'];\nconst TextSection = React.memo((props: DSShuttleV2T.ItemMeta) => {\n  const { label, subtitle } = props.datumHydratables;\n  if (subtitle === undefined)\n    return (\n      <LabelWrapper alignItems=\"center\">\n        <DSTypography variant=\"b1\">{label}</DSTypography>\n      </LabelWrapper>\n    );\n  return (\n    <Grid alignItems=\"center\" rows={withSubtitleRows} gutter=\"1px\">\n      <DSTypography variant=\"b1\">{label}</DSTypography>\n      <DSTypography variant=\"b4\">{subtitle}</DSTypography>\n    </Grid>\n  );\n});\n\nexport const ItemMiddleSection = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datum, datumHydratables, datumInternalMeta, isDestinationPanel } = itemMeta;\n  const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n  const { softDeleted, hydratedId } = datumInternalMeta;\n  const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n    () => ({\n      datum,\n      panelMetaInfo: { isDestinationPanel },\n      datumInternalMeta,\n      datumHydratables: { ...componentlessHydratables, id: hydratedId },\n    }),\n    [componentlessHydratables, datum, datumInternalMeta, hydratedId, isDestinationPanel],\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  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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCf;AAtCR,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,2BAA6B;AAE7B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,kBAAkB,CAAC;AAAA;AAAA;AAGpG,MAAM,mBAAe,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,mBAAmB,CAAC;AAAA;AAAA;AAGtG,MAAM,iBAAa,yBAAO,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE1B,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGvC,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAEnC,MAAM,mBAAmB,CAAC,QAAQ,MAAM;AACxC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,UAAiC;AAC/D,QAAM,EAAE,OAAO,SAAS,IAAI,MAAM;AAClC,MAAI,aAAa;AACf,WACE,4CAAC,gBAAa,YAAW,UACvB,sDAAC,qCAAa,SAAQ,MAAM,iBAAM,GACpC;AAEJ,SACE,6CAAC,uBAAK,YAAW,UAAS,MAAM,kBAAkB,QAAO,OACvD;AAAA,gDAAC,qCAAa,SAAQ,MAAM,iBAAM;AAAA,IAClC,4CAAC,qCAAa,SAAQ,MAAM,oBAAS;AAAA,KACvC;AAEJ,CAAC;AAEM,MAAM,oBAAoB,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAC/E,QAAM,EAAE,OAAO,kBAAkB,mBAAmB,mBAAmB,IAAI;AAC3E,QAAM,EAAE,MAAM,mBAAmB,yBAAyB,IAAI;AAC9D,QAAM,EAAE,aAAa,WAAW,IAAI;AACpC,QAAM,uBAAuB,aAAAA,QAAM;AAAA,IACjC,OAAO;AAAA,MACL;AAAA,MACA,eAAe,EAAE,mBAAmB;AAAA,MACpC;AAAA,MACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,IAClE;AAAA,IACA,CAAC,0BAA0B,OAAO,mBAAmB,YAAY,kBAAkB;AAAA,EACrF;AACA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAE/B,QAAI;AAAgB,aAAO,CAAC;AAC5B,UAAM,cAAc,CAAC;AACrB,QAAI;AAAM,kBAAY,KAAK,MAAM;AACjC,gBAAY,KAAK,KAAK;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,MAAI;AACF,WACE,4CAAC,cAAW,MAAM,sBAAsB,MAAM,sBAAsB,cAAc,QAAQ,WAAW,GACnG,sDAAC,kBAAgB,GAAG,sBAAsB,GAC5C;AAGJ,SACE,6CAAC,cAAW,MAAY,YAAW,UAAS,IAAG,OAAM,cAAc,QAAQ,WAAW,GACnF;AAAA,WACC,4CAAC,eAAY,YAAW,UAAS,IAAG,OAClC,sDAAC,QAAM,GAAG,sBAAsB,GAClC,IACE;AAAA,IACJ,4CAAC,eAAa,GAAG,UAAU;AAAA,KAC7B;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 { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { TextSection } from './TextSection';\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((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n  const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n  const { softDeleted, hydratedId } = datumInternalMeta;\n  const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n    () => ({\n      datum,\n      panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n      datumInternalMeta,\n      datumHydratables: { ...componentlessHydratables, id: hydratedId },\n    }),\n    [componentlessHydratables, datum, datumInternalMeta, hasMultipleSelection, hydratedId, isDestinationPanel],\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  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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDf;AAvDR,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAClD,yBAA4B;AAE5B,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,iBAAa,yBAAO,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE1B,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGvC,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoB,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAC/E,QAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,QAAM,EAAE,MAAM,mBAAmB,yBAAyB,IAAI;AAC9D,QAAM,EAAE,aAAa,WAAW,IAAI;AACpC,QAAM,uBAAuB,aAAAA,QAAM;AAAA,IACjC,OAAO;AAAA,MACL;AAAA,MACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,MAC1D;AAAA,MACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,IAClE;AAAA,IACA,CAAC,0BAA0B,OAAO,mBAAmB,sBAAsB,YAAY,kBAAkB;AAAA,EAC3G;AACA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAE/B,QAAI;AAAgB,aAAO,CAAC;AAC5B,UAAM,cAAc,CAAC;AACrB,QAAI;AAAM,kBAAY,KAAK,MAAM;AACjC,gBAAY,KAAK,KAAK;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,MAAI;AACF,WACE,4CAAC,cAAW,MAAM,sBAAsB,MAAM,sBAAsB,cAAc,QAAQ,WAAW,GACnG,sDAAC,kBAAgB,GAAG,sBAAsB,GAC5C;AAGJ,SACE,6CAAC,cAAW,MAAY,YAAW,UAAS,IAAG,OAAM,cAAc,QAAQ,WAAW,GACnF;AAAA,WACC,4CAAC,eAAY,YAAW,UAAS,IAAG,OAClC,sDAAC,QAAM,GAAG,sBAAsB,GAClC,IACE;AAAA,IACJ,4CAAC,kCAAa,GAAG,UAAU;AAAA,KAC7B;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/TextSection.js ADDED Viewed

@@ -0,0 +1,50 @@
+"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 TextSection_exports = {};
+__export(TextSection_exports, {
+  TextSection: () => TextSection
+});
+module.exports = __toCommonJS(TextSection_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
+const withSubtitleRows = ["auto", "auto"];
+const LabelWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`
+  min-height: 1rem;
+`;
+const TextSection = import_react.default.memo((props) => {
+  const { label, subtitle } = props.datumHydratables;
+  if (subtitle === void 0)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelWrapper, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { alignItems: "center", rows: withSubtitleRows, gutter: "1px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b4", children: subtitle })
+  ] });
+});
+//# sourceMappingURL=TextSection.js.map

package/dist/cjs/parts/Item/TextSection.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Item/TextSection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\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 } = props.datumHydratables;\n  if (subtitle === undefined)\n    return (\n      <LabelWrapper alignItems=\"center\">\n        <DSTypography variant=\"b1\">{label}</DSTypography>\n      </LabelWrapper>\n    );\n  return (\n    <Grid alignItems=\"center\" rows={withSubtitleRows} gutter=\"1px\">\n      <DSTypography variant=\"b1\">{label}</DSTypography>\n      <DSTypography variant=\"b4\">{subtitle}</DSTypography>\n    </Grid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBf;AAhBR,mBAAkB;AAClB,qBAAqB;AACrB,uBAAuB;AACvB,2BAA6B;AAC7B,oCAAkD;AAGlD,MAAM,mBAAmB,CAAC,QAAQ,MAAM;AACxC,MAAM,mBAAe,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,mBAAmB,CAAC;AAAA;AAAA;AAG/F,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,UAAiC;AACtE,QAAM,EAAE,OAAO,SAAS,IAAI,MAAM;AAClC,MAAI,aAAa;AACf,WACE,4CAAC,gBAAa,YAAW,UACvB,sDAAC,qCAAa,SAAQ,MAAM,iBAAM,GACpC;AAEJ,SACE,6CAAC,uBAAK,YAAW,UAAS,MAAM,kBAAkB,QAAO,OACvD;AAAA,gDAAC,qCAAa,SAAQ,MAAM,iBAAM;AAAA,IAClC,4CAAC,qCAAa,SAAQ,MAAM,oBAAS;AAAA,KACvC;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/cjs/parts/Item/useItemArrowNavigation.js CHANGED Viewed

@@ -33,9 +33,10 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_useFocusTracker = require("../../config/useFocusTracker");
 var import_useStore = require("../../config/useStore");
 const useItemArrowNavigation = (itemMeta) => {
-  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = (0, import_useFocusTracker.useFocusItemTracker)();
-  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
-  const { datumInternalMeta, datum } = itemMeta;
+  const { trackFocusRegionPanelFocusMoveAll } = (0, import_useFocusTracker.useFocusRegionTrackers)();
+  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem, trackFocusItemReset } = (0, import_useFocusTracker.useFocusItemTracker)();
+  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent, trackFocusActionReset } = (0, import_useFocusTracker.useFocusActionTrackers)();
+  const { datumInternalMeta, datum, hasMultipleSelection, isDestinationPanel } = itemMeta;
   const configuredDatum = import_react.default.useMemo(() => ({ original: datum, ...datumInternalMeta }), [datum, datumInternalMeta]);
   const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
   const mutableItemMeta = (0, import_ds_utilities.useMakeMutable)(itemMeta);
@@ -54,32 +55,53 @@ const useItemArrowNavigation = (itemMeta) => {
       if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key))
         e.stopPropagation();
       if (key === "ArrowLeft") {
+        if (hasMultipleSelection) {
+          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+          trackFocusItemReset();
+          trackFocusActionReset();
+          return;
+        }
+        trackFocusPrevAction(mutableItemMeta.current);
         if (mutableFocusItem.current === "first" && mutableInternalMeta.current.isFirst || mutableFocusItem.current === "last" && mutableInternalMeta.current.isLast) {
           trackFocusItem(mutableConfiguredDatum.current);
         }
-        trackFocusPrevAction(mutableItemMeta.current);
+        return;
       }
       if (key === "ArrowRight") {
+        if (hasMultipleSelection) {
+          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+          trackFocusItemReset();
+          trackFocusActionReset();
+          return;
+        }
+        trackFocusNextAction(mutableItemMeta.current);
         if (mutableFocusItem.current === "first" && mutableInternalMeta.current.isFirst || mutableFocusItem.current === "last" && mutableInternalMeta.current.isLast) {
           trackFocusItem(mutableConfiguredDatum.current);
         }
-        trackFocusNextAction(mutableItemMeta.current);
+        return;
       }
       if (key === "ArrowUp") {
         trackFocusPrevItem(mutableItemMeta.current);
         trackFocusActionParent();
+        return;
       }
       if (key === "ArrowDown") {
         trackFocusNextItem(mutableItemMeta.current);
         trackFocusActionParent();
+        return;
       }
     },
     [
       getIsDragAndDropHappening,
-      mutableFocusItem,
-      mutableInternalMeta,
+      hasMultipleSelection,
       trackFocusPrevAction,
       mutableItemMeta,
+      mutableFocusItem,
+      mutableInternalMeta,
+      trackFocusRegionPanelFocusMoveAll,
+      isDestinationPanel,
+      trackFocusItemReset,
+      trackFocusActionReset,
       trackFocusItem,
       mutableConfiguredDatum,
       trackFocusNextAction,

package/dist/cjs/parts/Item/useItemArrowNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/useItemArrowNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { useFocusItemTracker, useFocusActionTrackers } from '../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore } from '../../config/useStore';\n\nexport const useItemArrowNavigation = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = useFocusItemTracker();\n  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = useFocusActionTrackers();\n  const { datumInternalMeta, datum } = itemMeta;\n  const configuredDatum = React.useMemo(() => ({ original: datum, ...datumInternalMeta }), [datum, datumInternalMeta]);\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  // some optimization to avoid useless re-renders just because the \"onKeyDown\" callback changes...\n  //     all the \"trackFocus\" must be optimized and memoized too for this to make any sense\n  const mutableItemMeta = useMakeMutable(itemMeta);\n  const mutableInternalMeta = useMakeMutable(datumInternalMeta);\n  const mutableConfiguredDatum = useMakeMutable(configuredDatum);\n\n  const onItemContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      if (key === 'ArrowLeft') {\n        if (\n          (mutableFocusItem.current === 'first' && mutableInternalMeta.current.isFirst) ||\n          (mutableFocusItem.current === 'last' && mutableInternalMeta.current.isLast)\n        ) {\n          trackFocusItem(mutableConfiguredDatum.current);\n        }\n        trackFocusPrevAction(mutableItemMeta.current);\n      }\n      if (key === 'ArrowRight') {\n        if (\n          (mutableFocusItem.current === 'first' && mutableInternalMeta.current.isFirst) ||\n          (mutableFocusItem.current === 'last' && mutableInternalMeta.current.isLast)\n        ) {\n          trackFocusItem(mutableConfiguredDatum.current);\n        }\n        trackFocusNextAction(mutableItemMeta.current);\n      }\n      if (key === 'ArrowUp') {\n        trackFocusPrevItem(mutableItemMeta.current);\n        trackFocusActionParent();\n      }\n      if (key === 'ArrowDown') {\n        trackFocusNextItem(mutableItemMeta.current);\n        trackFocusActionParent();\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      mutableFocusItem,\n      mutableInternalMeta,\n      trackFocusPrevAction,\n      mutableItemMeta,\n      trackFocusItem,\n      mutableConfiguredDatum,\n      trackFocusNextAction,\n      trackFocusPrevItem,\n      trackFocusActionParent,\n      trackFocusNextItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,0BAA+B;AAC/B,6BAA4D;AAE5D,sBAAiC;AAE1B,MAAM,yBAAyB,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,oBAAoB,oBAAoB,eAAe,QAAI,4CAAoB;AACzG,QAAM,EAAE,sBAAsB,sBAAsB,uBAAuB,QAAI,+CAAuB;AACtG,QAAM,EAAE,mBAAmB,MAAM,IAAI;AACrC,QAAM,kBAAkB,aAAAA,QAAM,QAAQ,OAAO,EAAE,UAAU,OAAO,GAAG,kBAAkB,IAAI,CAAC,OAAO,iBAAiB,CAAC;AAEnH,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAG7F,QAAM,sBAAkB,oCAAe,QAAQ;AAC/C,QAAM,0BAAsB,oCAAe,iBAAiB;AAC5D,QAAM,6BAAyB,oCAAe,eAAe;AAE7D,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AACxF,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzF,UAAI,QAAQ,aAAa;AACvB,YACG,iBAAiB,YAAY,WAAW,oBAAoB,QAAQ,WACpE,iBAAiB,YAAY,UAAU,oBAAoB,QAAQ,QACpE;AACA,yBAAe,uBAAuB,OAAO;AAAA,QAC/C;AACA,6BAAqB,gBAAgB,OAAO;AAAA,MAC9C;AACA,UAAI,QAAQ,cAAc;AACxB,YACG,iBAAiB,YAAY,WAAW,oBAAoB,QAAQ,WACpE,iBAAiB,YAAY,UAAU,oBAAoB,QAAQ,QACpE;AACA,yBAAe,uBAAuB,OAAO;AAAA,QAC/C;AACA,6BAAqB,gBAAgB,OAAO;AAAA,MAC9C;AACA,UAAI,QAAQ,WAAW;AACrB,2BAAmB,gBAAgB,OAAO;AAC1C,+BAAuB;AAAA,MACzB;AACA,UAAI,QAAQ,aAAa;AACvB,2BAAmB,gBAAgB,OAAO;AAC1C,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusRegionTrackers } from '../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore } from '../../config/useStore';\n\nexport const useItemArrowNavigation = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusRegionPanelFocusMoveAll } = useFocusRegionTrackers();\n  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem, trackFocusItemReset } =\n    useFocusItemTracker();\n  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent, trackFocusActionReset } =\n    useFocusActionTrackers();\n  const { datumInternalMeta, datum, hasMultipleSelection, isDestinationPanel } = itemMeta;\n  const configuredDatum = React.useMemo(() => ({ original: datum, ...datumInternalMeta }), [datum, datumInternalMeta]);\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  // some optimization to avoid useless re-renders just because the \"onKeyDown\" callback changes...\n  //     all the \"trackFocus\" must be optimized and memoized too for this to make any sense\n  const mutableItemMeta = useMakeMutable(itemMeta);\n  const mutableInternalMeta = useMakeMutable(datumInternalMeta);\n  const mutableConfiguredDatum = useMakeMutable(configuredDatum);\n\n  const onItemContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      if (key === 'ArrowLeft') {\n        if (hasMultipleSelection) {\n          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n          trackFocusItemReset();\n          trackFocusActionReset();\n          return;\n        }\n\n        trackFocusPrevAction(mutableItemMeta.current);\n        if (\n          (mutableFocusItem.current === 'first' && mutableInternalMeta.current.isFirst) ||\n          (mutableFocusItem.current === 'last' && mutableInternalMeta.current.isLast)\n        ) {\n          trackFocusItem(mutableConfiguredDatum.current);\n        }\n        return;\n      }\n      if (key === 'ArrowRight') {\n        if (hasMultipleSelection) {\n          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n          trackFocusItemReset();\n          trackFocusActionReset();\n          return;\n        }\n        trackFocusNextAction(mutableItemMeta.current);\n        if (\n          (mutableFocusItem.current === 'first' && mutableInternalMeta.current.isFirst) ||\n          (mutableFocusItem.current === 'last' && mutableInternalMeta.current.isLast)\n        ) {\n          trackFocusItem(mutableConfiguredDatum.current);\n        }\n        return;\n      }\n      if (key === 'ArrowUp') {\n        trackFocusPrevItem(mutableItemMeta.current);\n        trackFocusActionParent();\n        return;\n      }\n      if (key === 'ArrowDown') {\n        trackFocusNextItem(mutableItemMeta.current);\n        trackFocusActionParent();\n        return;\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      hasMultipleSelection,\n      trackFocusPrevAction,\n      mutableItemMeta,\n      mutableFocusItem,\n      mutableInternalMeta,\n      trackFocusRegionPanelFocusMoveAll,\n      isDestinationPanel,\n      trackFocusItemReset,\n      trackFocusActionReset,\n      trackFocusItem,\n      mutableConfiguredDatum,\n      trackFocusNextAction,\n      trackFocusPrevItem,\n      trackFocusActionParent,\n      trackFocusNextItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,0BAA+B;AAC/B,6BAAoF;AAEpF,sBAAiC;AAE1B,MAAM,yBAAyB,CAAC,aAAoC;AACzE,QAAM,EAAE,kCAAkC,QAAI,+CAAuB;AACrE,QAAM,EAAE,kBAAkB,oBAAoB,oBAAoB,gBAAgB,oBAAoB,QACpG,4CAAoB;AACtB,QAAM,EAAE,sBAAsB,sBAAsB,wBAAwB,sBAAsB,QAChG,+CAAuB;AACzB,QAAM,EAAE,mBAAmB,OAAO,sBAAsB,mBAAmB,IAAI;AAC/E,QAAM,kBAAkB,aAAAA,QAAM,QAAQ,OAAO,EAAE,UAAU,OAAO,GAAG,kBAAkB,IAAI,CAAC,OAAO,iBAAiB,CAAC;AAEnH,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAG7F,QAAM,sBAAkB,oCAAe,QAAQ;AAC/C,QAAM,0BAAsB,oCAAe,iBAAiB;AAC5D,QAAM,6BAAyB,oCAAe,eAAe;AAE7D,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AACxF,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzF,UAAI,QAAQ,aAAa;AACvB,YAAI,sBAAsB;AACxB,4CAAkC,kBAAkB;AACpD,8BAAoB;AACpB,gCAAsB;AACtB;AAAA,QACF;AAEA,6BAAqB,gBAAgB,OAAO;AAC5C,YACG,iBAAiB,YAAY,WAAW,oBAAoB,QAAQ,WACpE,iBAAiB,YAAY,UAAU,oBAAoB,QAAQ,QACpE;AACA,yBAAe,uBAAuB,OAAO;AAAA,QAC/C;AACA;AAAA,MACF;AACA,UAAI,QAAQ,cAAc;AACxB,YAAI,sBAAsB;AACxB,4CAAkC,kBAAkB;AACpD,8BAAoB;AACpB,gCAAsB;AACtB;AAAA,QACF;AACA,6BAAqB,gBAAgB,OAAO;AAC5C,YACG,iBAAiB,YAAY,WAAW,oBAAoB,QAAQ,WACpE,iBAAiB,YAAY,UAAU,oBAAoB,QAAQ,QACpE;AACA,yBAAe,uBAAuB,OAAO;AAAA,QAC/C;AACA;AAAA,MACF;AACA,UAAI,QAAQ,WAAW;AACrB,2BAAmB,gBAAgB,OAAO;AAC1C,+BAAuB;AACvB;AAAA,MACF;AACA,UAAI,QAAQ,aAAa;AACvB,2BAAmB,gBAAgB,OAAO;AAC1C,+BAAuB;AACvB;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,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Item/useItemKeyboardSelection.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 useItemKeyboardSelection_exports = {};
+__export(useItemKeyboardSelection_exports, {
+  useItemKeyboardSelection: () => useItemKeyboardSelection
+});
+module.exports = __toCommonJS(useItemKeyboardSelection_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_useStore = require("../../config/useStore");
+var import_useSelectionLogic = require("./useSelectionLogic");
+const useItemKeyboardSelection = (itemMeta) => {
+  const { datumInternalMeta } = itemMeta;
+  const { hydratedId } = datumInternalMeta;
+  const { selectItem } = (0, import_useSelectionLogic.useSelectionLogic)(itemMeta);
+  const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
+  const onItemKeyDownSelection = import_react.default.useCallback(
+    (event) => {
+      const { key } = event;
+      if (["Spacebar", " ", "Enter"].includes(key)) {
+        const isDragNDroping = getIsDragAndDropHappening();
+        if (isDragNDroping || event.target.id === `${hydratedId}-drag-handle`) {
+          event.preventDefault();
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        selectItem(event);
+      }
+    },
+    [getIsDragAndDropHappening, hydratedId, selectItem]
+  );
+  return import_react.default.useMemo(() => ({ onItemKeyDownSelection }), [onItemKeyDownSelection]);
+};
+//# sourceMappingURL=useItemKeyboardSelection.js.map

package/dist/cjs/parts/Item/useItemKeyboardSelection.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Item/useItemKeyboardSelection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useInternalStore } from '../../config/useStore';\nimport { useSelectionLogic } from './useSelectionLogic';\n\nexport const useItemKeyboardSelection = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta } = itemMeta;\n  const { hydratedId } = datumInternalMeta;\n  const { selectItem } = useSelectionLogic(itemMeta);\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const onItemKeyDownSelection = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      const { key } = event;\n\n      // Spacebar AND ' ' are cross-browser compatibility thing\n      if (['Spacebar', ' ', 'Enter'].includes(key)) {\n        // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n        const isDragNDroping = getIsDragAndDropHappening();\n        if (isDragNDroping || (event.target as HTMLElement).id === `${hydratedId}-drag-handle`) {\n          event.preventDefault();\n          return;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n        selectItem(event);\n      }\n    },\n    [getIsDragAndDropHappening, hydratedId, selectItem],\n  );\n  return React.useMemo(() => ({ onItemKeyDownSelection }), [onItemKeyDownSelection]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAAiC;AACjC,+BAAkC;AAE3B,MAAM,2BAA2B,CAAC,aAAoC;AAC3E,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,EAAE,WAAW,QAAI,4CAAkB,QAAQ;AACjD,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,UAAU;AACT,YAAM,EAAE,IAAI,IAAI;AAGhB,UAAI,CAAC,YAAY,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAE5C,cAAM,iBAAiB,0BAA0B;AACjD,YAAI,kBAAmB,MAAM,OAAuB,OAAO,GAAG,0BAA0B;AACtF,gBAAM,eAAe;AACrB;AAAA,QACF;AACA,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,2BAA2B,YAAY,UAAU;AAAA,EACpD;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
+  "names": ["React"]
+}

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

@@ -40,9 +40,13 @@ const useSelectionLogic = ({
   const { trackFocusItem } = (0, import_useFocusTracker.useFocusItemTracker)();
   const { trackFocusActionParent } = (0, import_useFocusTracker.useFocusActionTrackers)();
   const { trackFocusRegionPanelItem } = (0, import_useFocusTracker.useFocusTracker)();
-  const destinationSelectionArray = (0, import_useStore.useInternalStore)((store) => store.destinationSelectionArray);
-  const sourceSelectionArray = (0, import_useStore.useInternalStore)((store) => store.sourceSelectionArray);
-  const panelSelectedItemsArray = isDestinationPanel ? destinationSelectionArray : sourceSelectionArray;
+  const getPanelLastSelectedItem = (0, import_useStore.useInternalStore)((store) => store.getPanelLastSelectedItem);
+  const setPanelLastSelectedItem = (0, import_useStore.useInternalStore)(
+    (store) => isDestinationPanel ? store.setDestinationLastSelectedItem : store.setSourceLastSelectedItem
+  );
+  const panelSelectionableDataIds = (0, import_useStore.useInternalStore)(
+    (store) => isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds
+  );
   const onSelectionChange = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange
   );
@@ -53,17 +57,39 @@ const useSelectionLogic = ({
     (event) => {
       const { selectionPrevented } = datumRenderFlags;
       const { hydratedId } = datumInternalMeta;
+      const { shiftKey } = event;
+      const lastSelectedItem = getPanelLastSelectedItem(isDestinationPanel);
       if (!selectionPrevented) {
-        const newSelection = { ...panelSelectedItems };
-        let isAddition = true;
-        panelSelectedItemsArray.forEach((selItem) => {
-          if (selItem === hydratedId)
-            isAddition = false;
-        });
-        if (isAddition)
-          newSelection[hydratedId] = true;
-        else
-          delete newSelection[hydratedId];
+        let newSelection = {};
+        if (shiftKey && lastSelectedItem) {
+          const startSelIndx = panelSelectionableDataIds.findIndex((id) => id === lastSelectedItem);
+          const endSelIndx = panelSelectionableDataIds.findIndex((id) => id === hydratedId);
+          if (startSelIndx !== -1 && endSelIndx !== -1) {
+            const ordererIndexes = [startSelIndx, endSelIndx].sort();
+            const shiftSelectedIdsArray = panelSelectionableDataIds.slice(ordererIndexes[0], ordererIndexes[1] + 1);
+            let shouldShiftDeSelect = true;
+            const allSelected = {};
+            const allDeSelected = {};
+            shiftSelectedIdsArray.forEach((id) => {
+              allSelected[id] = true;
+              allDeSelected[id] = false;
+              if (panelSelectedItems[id] !== true)
+                shouldShiftDeSelect = false;
+            });
+            if (shouldShiftDeSelect)
+              newSelection = { ...panelSelectedItems, ...allDeSelected };
+            else
+              newSelection = { ...panelSelectedItems, ...allSelected };
+          }
+        } else {
+          newSelection = { ...panelSelectedItems };
+          const isAddition = newSelection[hydratedId] !== true;
+          if (isAddition) {
+            newSelection[hydratedId] = true;
+          } else
+            delete newSelection[hydratedId];
+        }
+        setPanelLastSelectedItem(hydratedId);
         onSelectionChange(newSelection, { event, item: datum });
       }
       trackFocusRegionPanelItem(isDestinationPanel);
@@ -74,15 +100,25 @@ const useSelectionLogic = ({
       datum,
       datumInternalMeta,
       datumRenderFlags,
+      getPanelLastSelectedItem,
       isDestinationPanel,
       onSelectionChange,
       panelSelectedItems,
-      panelSelectedItemsArray,
+      panelSelectionableDataIds,
+      setPanelLastSelectedItem,
       trackFocusActionParent,
       trackFocusItem,
       trackFocusRegionPanelItem
     ]
   );
-  return selectItem;
+  const onShiftMouseDownPreventTextSelection = import_react.default.useCallback((event) => {
+    const { shiftKey } = event;
+    if (shiftKey)
+      event.preventDefault();
+  }, []);
+  return import_react.default.useMemo(
+    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),
+    [selectItem, onShiftMouseDownPreventTextSelection]
+  );
 };
 //# sourceMappingURL=useSelectionLogic.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/useSelectionLogic.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../config/useFocusTracker';\nexport const useSelectionLogic = ({\n  isDestinationPanel,\n  datumInternalMeta,\n  datum,\n  datumRenderFlags,\n}: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusTracker();\n\n  const destinationSelectionArray = useInternalStore((store) => store.destinationSelectionArray);\n  const sourceSelectionArray = useInternalStore((store) => store.sourceSelectionArray);\n\n  const panelSelectedItemsArray = isDestinationPanel ? destinationSelectionArray : sourceSelectionArray;\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const panelSelectedItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems,\n  );\n  const selectItem = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n      const { selectionPrevented } = datumRenderFlags;\n      const { hydratedId } = datumInternalMeta;\n      if (!selectionPrevented) {\n        const newSelection = { ...panelSelectedItems };\n        let isAddition = true;\n        panelSelectedItemsArray.forEach((selItem) => {\n          if (selItem === hydratedId) isAddition = false;\n        });\n        if (isAddition) newSelection[hydratedId] = true;\n        else delete newSelection[hydratedId];\n        onSelectionChange(newSelection, { event, item: datum });\n      }\n      // focus tracking logic\n      trackFocusRegionPanelItem(isDestinationPanel);\n      trackFocusItem({ original: datum, ...datumInternalMeta });\n      trackFocusActionParent();\n    },\n    [\n      datum,\n      datumInternalMeta,\n      datumRenderFlags,\n      isDestinationPanel,\n      onSelectionChange,\n      panelSelectedItems,\n      panelSelectedItemsArray,\n      trackFocusActionParent,\n      trackFocusItem,\n      trackFocusRegionPanelItem,\n    ],\n  );\n\n  return selectItem;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAgD;AAEhD,6BAA6E;AACtE,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,EAAE,eAAe,QAAI,4CAAoB;AAC/C,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,wCAAgB;AAEtD,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,2BAAuB,kCAAiB,CAAC,UAAU,MAAM,oBAAoB;AAEnF,QAAM,0BAA0B,qBAAqB,4BAA4B;AACjF,QAAM,wBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,aAAAA,QAAM;AAAA,IACvB,CAAC,UAAsG;AACrG,YAAM,EAAE,mBAAmB,IAAI;AAC/B,YAAM,EAAE,WAAW,IAAI;AACvB,UAAI,CAAC,oBAAoB;AACvB,cAAM,eAAe,EAAE,GAAG,mBAAmB;AAC7C,YAAI,aAAa;AACjB,gCAAwB,QAAQ,CAAC,YAAY;AAC3C,cAAI,YAAY;AAAY,yBAAa;AAAA,QAC3C,CAAC;AACD,YAAI;AAAY,uBAAa,cAAc;AAAA;AACtC,iBAAO,aAAa;AACzB,0BAAkB,cAAc,EAAE,OAAO,MAAM,MAAM,CAAC;AAAA,MACxD;AAEA,gCAA0B,kBAAkB;AAC5C,qBAAe,EAAE,UAAU,OAAO,GAAG,kBAAkB,CAAC;AACxD,6BAAuB;AAAA,IACzB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport React from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../config/useFocusTracker';\nexport const useSelectionLogic = ({\n  isDestinationPanel,\n  datumInternalMeta,\n  datum,\n  datumRenderFlags,\n}: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusTracker();\n\n  const getPanelLastSelectedItem = useInternalStore((store) => store.getPanelLastSelectedItem);\n  const setPanelLastSelectedItem = useInternalStore((store) =>\n    isDestinationPanel ? store.setDestinationLastSelectedItem : store.setSourceLastSelectedItem,\n  );\n\n  const panelSelectionableDataIds = useInternalStore((store) =>\n    isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds,\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const panelSelectedItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems,\n  );\n  const selectItem = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n      const { selectionPrevented } = datumRenderFlags;\n      const { hydratedId } = datumInternalMeta;\n      const { shiftKey } = event;\n      const lastSelectedItem = getPanelLastSelectedItem(isDestinationPanel);\n      if (!selectionPrevented) {\n        let newSelection: Record<string, boolean> = {};\n        // shift select logic\n        if (shiftKey && lastSelectedItem) {\n          const startSelIndx = panelSelectionableDataIds.findIndex((id) => id === lastSelectedItem);\n          const endSelIndx = panelSelectionableDataIds.findIndex((id) => id === hydratedId);\n          if (startSelIndx !== -1 && endSelIndx !== -1) {\n            const ordererIndexes = [startSelIndx, endSelIndx].sort();\n            const shiftSelectedIdsArray = panelSelectionableDataIds.slice(ordererIndexes[0], ordererIndexes[1] + 1);\n            let shouldShiftDeSelect = true;\n            // I track both \"all Select\"/\"all unselect\" so I can \".forEach\" only once and apply either version after\n            const allSelected: Record<string, boolean> = {};\n            const allDeSelected: Record<string, boolean> = {};\n            shiftSelectedIdsArray.forEach((id) => {\n              allSelected[id] = true;\n              allDeSelected[id] = false;\n              // if anything inside the shift-select was not selected, shift-select will \"select\"\n              if (panelSelectedItems[id] !== true) shouldShiftDeSelect = false;\n            });\n            if (shouldShiftDeSelect) newSelection = { ...panelSelectedItems, ...allDeSelected };\n            else newSelection = { ...panelSelectedItems, ...allSelected };\n          }\n        } else {\n          // single selection logic\n          newSelection = { ...panelSelectedItems };\n          const isAddition = newSelection[hydratedId] !== true;\n          if (isAddition) {\n            newSelection[hydratedId] = true;\n          } else delete newSelection[hydratedId];\n        }\n        // we track the item for \"shift select\" purposes\n        // this must happen AFTER shift select logic!\n        setPanelLastSelectedItem(hydratedId);\n        onSelectionChange(newSelection, { event, item: datum });\n      }\n      // focus tracking logic\n      trackFocusRegionPanelItem(isDestinationPanel);\n      trackFocusItem({ original: datum, ...datumInternalMeta });\n      trackFocusActionParent();\n    },\n    [\n      datum,\n      datumInternalMeta,\n      datumRenderFlags,\n      getPanelLastSelectedItem,\n      isDestinationPanel,\n      onSelectionChange,\n      panelSelectedItems,\n      panelSelectionableDataIds,\n      setPanelLastSelectedItem,\n      trackFocusActionParent,\n      trackFocusItem,\n      trackFocusRegionPanelItem,\n    ],\n  );\n\n  const onShiftMouseDownPreventTextSelection = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    const { shiftKey } = event;\n    if (shiftKey) event.preventDefault();\n  }, []);\n  return React.useMemo(\n    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),\n    [selectItem, onShiftMouseDownPreventTextSelection],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,sBAAgD;AAEhD,6BAA6E;AACtE,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,EAAE,eAAe,QAAI,4CAAoB;AAC/C,QAAM,EAAE,uBAAuB,QAAI,+CAAuB;AAC1D,QAAM,EAAE,0BAA0B,QAAI,wCAAgB;AAEtD,QAAM,+BAA2B,kCAAiB,CAAC,UAAU,MAAM,wBAAwB;AAC3F,QAAM,+BAA2B;AAAA,IAAiB,CAAC,UACjD,qBAAqB,MAAM,iCAAiC,MAAM;AAAA,EACpE;AAEA,QAAM,gCAA4B;AAAA,IAAiB,CAAC,UAClD,qBAAqB,MAAM,kCAAkC,MAAM;AAAA,EACrE;AAEA,QAAM,wBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,yBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,aAAAA,QAAM;AAAA,IACvB,CAAC,UAAsG;AACrG,YAAM,EAAE,mBAAmB,IAAI;AAC/B,YAAM,EAAE,WAAW,IAAI;AACvB,YAAM,EAAE,SAAS,IAAI;AACrB,YAAM,mBAAmB,yBAAyB,kBAAkB;AACpE,UAAI,CAAC,oBAAoB;AACvB,YAAI,eAAwC,CAAC;AAE7C,YAAI,YAAY,kBAAkB;AAChC,gBAAM,eAAe,0BAA0B,UAAU,CAAC,OAAO,OAAO,gBAAgB;AACxF,gBAAM,aAAa,0BAA0B,UAAU,CAAC,OAAO,OAAO,UAAU;AAChF,cAAI,iBAAiB,MAAM,eAAe,IAAI;AAC5C,kBAAM,iBAAiB,CAAC,cAAc,UAAU,EAAE,KAAK;AACvD,kBAAM,wBAAwB,0BAA0B,MAAM,eAAe,IAAI,eAAe,KAAK,CAAC;AACtG,gBAAI,sBAAsB;AAE1B,kBAAM,cAAuC,CAAC;AAC9C,kBAAM,gBAAyC,CAAC;AAChD,kCAAsB,QAAQ,CAAC,OAAO;AACpC,0BAAY,MAAM;AAClB,4BAAc,MAAM;AAEpB,kBAAI,mBAAmB,QAAQ;AAAM,sCAAsB;AAAA,YAC7D,CAAC;AACD,gBAAI;AAAqB,6BAAe,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA;AAC7E,6BAAe,EAAE,GAAG,oBAAoB,GAAG,YAAY;AAAA,UAC9D;AAAA,QACF,OAAO;AAEL,yBAAe,EAAE,GAAG,mBAAmB;AACvC,gBAAM,aAAa,aAAa,gBAAgB;AAChD,cAAI,YAAY;AACd,yBAAa,cAAc;AAAA,UAC7B;AAAO,mBAAO,aAAa;AAAA,QAC7B;AAGA,iCAAyB,UAAU;AACnC,0BAAkB,cAAc,EAAE,OAAO,MAAM,MAAM,CAAC;AAAA,MACxD;AAEA,gCAA0B,kBAAkB;AAC5C,qBAAe,EAAE,UAAU,OAAO,GAAG,kBAAkB,CAAC;AACxD,6BAAuB;AAAA,IACzB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,uCAAuC,aAAAA,QAAM,YAAY,CAAC,UAA4C;AAC1G,UAAM,EAAE,SAAS,IAAI;AACrB,QAAI;AAAU,YAAM,eAAe;AAAA,EACrC,GAAG,CAAC,CAAC;AACL,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,YAAY,qCAAqC;AAAA,IAC1D,CAAC,YAAY,oCAAoC;AAAA,EACnD;AACF;",
   "names": ["React"]
 }

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

@@ -34,6 +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_PanelWrapper = require("./PanelWrapper");
+var import_useStore = require("../config/useStore");
 var import_DSShuttleV2Definitions = require("../config/DSShuttleV2Definitions");
 var import_useFocusTracker = require("../config/useFocusTracker");
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.WRAPPER })`
@@ -54,9 +55,11 @@ const MainContent = import_react.default.memo(() => {
     [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset]
   );
   const handleOnBlurOut = (0, import_ds_utilities.useOnBlurOut)(config);
+  const destinationHasMultipleSelectedItems = (0, import_useStore.useInternalStore)((store) => store.destinationHasMultipleSelectedItems);
+  const sourceHasMultipleSelectedItems = (0, import_useStore.useInternalStore)((store) => store.sourceHasMultipleSelectedItems);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledWrapper, { cols: mainContentCols, gutter: "xs", p: "xs", onBlur: handleOnBlurOut, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: true })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: false, hasMultipleSelection: sourceHasMultipleSelectedItems }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: true, hasMultipleSelection: destinationHasMultipleSelectedItems })
   ] });
 });
 //# sourceMappingURL=MainContent.js.map

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

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

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

@@ -31,12 +31,12 @@ var React = __toESM(require("react"));
 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_button = require("@elliemae/ds-button");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_useStore = require("../../../config/useStore");
 var import_useInnerRefHandlers = require("./useInnerRefHandlers");
 var import_useFocusTracker = require("../../../config/useFocusTracker");
 var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
-const StyledLoadMoreBtn = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
+const StyledLoadMoreBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
   name: import_DSShuttleV2Definitions.DSShuttleV2Name,
   slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN
 })`
@@ -70,7 +70,7 @@ const LoadMoreBtn = (panelMetaInfo) => {
     {
       buttonType: "text",
       onClick: handleOnClick,
-      size: import_ds_button.BUTTON_SIZES.S,
+      size: import_ds_button_v2.BUTTON_SIZES.S,
       innerRef: innerRefHandlerLoadMoreBtn,
       children: "Load More..."
     }