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

package/dist/esm/parts/Item/ItemActions/useInnerRefHandlers.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import React2 from "react";
+import { useInternalStore } from "../../../config/useStore/index.js";
+import { REGIONS_FOCUSES, ACTIONS_FOCUSES } from "../../../constants/index.js";
+const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
+  const setZustandRef = useInternalStore((state) => state.setZustandRef);
+  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
+  const currItemId = datumInternalMeta.hydratedId;
+  const innerRefHandlerDrilldown = React2.useCallback(
+    (node) => {
+      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.DRILLDOWN_BTN], node);
+    },
+    [currItemId, currRegion, setZustandRef]
+  );
+  const innerRefHandlerMove = React2.useCallback(
+    (node) => {
+      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.MOVE_BTN], node);
+    },
+    [currItemId, currRegion, setZustandRef]
+  );
+  const innerRefHandlerDnd = React2.useCallback(
+    (node) => {
+      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.DRAG_N_DROP], node);
+    },
+    [currItemId, currRegion, setZustandRef]
+  );
+  return React2.useMemo(
+    () => ({
+      innerRefHandlerDnd,
+      innerRefHandlerDrilldown,
+      innerRefHandlerMove
+    }),
+    [innerRefHandlerDrilldown, innerRefHandlerDnd, innerRefHandlerMove]
+  );
+};
+export {
+  useInnerRefHandlers
+};
+//# sourceMappingURL=useInnerRefHandlers.js.map

package/dist/esm/parts/Item/ItemActions/useInnerRefHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/useInnerRefHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../../config/useStore/index.js';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES } from '../../../constants/index.js';\n\nexport const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = datumInternalMeta.hydratedId;\n  const innerRefHandlerDrilldown = React.useCallback(\n    (node: HTMLButtonElement) => {\n      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.DRILLDOWN_BTN], node);\n    },\n    [currItemId, currRegion, setZustandRef],\n  );\n  const innerRefHandlerMove = React.useCallback(\n    (node: HTMLButtonElement) => {\n      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.MOVE_BTN], node);\n    },\n    [currItemId, currRegion, setZustandRef],\n  );\n  const innerRefHandlerDnd = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.DRAG_N_DROP], node);\n    },\n    [currItemId, currRegion, setZustandRef],\n  );\n  return React.useMemo(\n    () => ({\n      innerRefHandlerDnd,\n      innerRefHandlerDrilldown,\n      innerRefHandlerMove,\n    }),\n    [innerRefHandlerDrilldown, innerRefHandlerDnd, innerRefHandlerMove],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB,uBAAuB;AAE1C,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,mBAAmB,MAA6B;AACvG,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBAAqB,gBAAgB,yBAAyB,gBAAgB;AACjG,QAAM,aAAa,kBAAkB;AACrC,QAAM,2BAA2BA,OAAM;AAAA,IACrC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,gBAAgB,aAAa,GAAG,IAAI;AAAA,IAC7E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,gBAAgB,QAAQ,GAAG,IAAI;AAAA,IACxE;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,SAAgC;AAC/B,oBAAc,CAAC,YAAY,YAAY,gBAAgB,WAAW,GAAG,IAAI;AAAA,IAC3E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,0BAA0B,oBAAoB,mBAAmB;AAAA,EACpE;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { TextSection } from "./TextSection.js";
+import { useThisItemIsFocused } from "./useThisItemIsFocused.js";
+import { usePropsStore } from "../../config/useStore/useStore.js";
+const IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`
+  min-height: 1rem;
+`;
+const MidSection = styled(Grid, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER
+})`
+  min-height: 1rem;
+  ${(props) => {
+  if (props.$softDeleted)
+    return `
+      color: ${props.theme.colors.neutral[500]};
+      svg {
+        fill: ${props.theme.colors.neutral[400]};
+      }
+    `;
+  return "";
+}};
+`;
+const customMidSectionCols = ["1fr"];
+const customMidSectionRows = ["1fr"];
+const ItemMiddleSection = React2.memo(
+  (props) => {
+    const { tooltipHelpers, ...itemMeta } = props;
+    const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;
+    const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;
+    const { softDeleted, hydratedId } = datumInternalMeta;
+    const thisItemIsFocused = useThisItemIsFocused(itemMeta);
+    const customComponentProps = React2.useMemo(
+      () => ({
+        datum,
+        tooltipHelpers,
+        thisItemIsFocused,
+        panelMetaInfo: { isDestinationPanel, hasMultipleSelection },
+        datumInternalMeta,
+        datumHydratables: { ...componentlessHydratables, id: hydratedId }
+      }),
+      [
+        componentlessHydratables,
+        datum,
+        datumInternalMeta,
+        hasMultipleSelection,
+        hydratedId,
+        isDestinationPanel,
+        thisItemIsFocused,
+        tooltipHelpers
+      ]
+    );
+    const cols = React2.useMemo(() => {
+      if (CustomRenderer)
+        return [];
+      const dynamicCols = [];
+      if (Icon)
+        dynamicCols.push("auto");
+      dynamicCols.push("1fr");
+      return dynamicCols;
+    }, [CustomRenderer, Icon]);
+    const getOwnerProps = usePropsStore((store) => store.get);
+    const getOwnerPropsArguments = React2.useCallback(() => props, [props]);
+    if (CustomRenderer)
+      return /* @__PURE__ */ jsx(
+        MidSection,
+        {
+          cols: customMidSectionCols,
+          rows: customMidSectionRows,
+          $softDeleted: Boolean(softDeleted),
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: /* @__PURE__ */ jsx(CustomRenderer, { ...customComponentProps })
+        }
+      );
+    return /* @__PURE__ */ jsxs(
+      MidSection,
+      {
+        cols,
+        alignItems: "center",
+        ml: "xxs",
+        $softDeleted: Boolean(softDeleted),
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: [
+          Icon ? /* @__PURE__ */ jsx(
+            IconWrapper,
+            {
+              alignItems: "center",
+              mr: "xxs",
+              getOwnerProps,
+              getOwnerPropsArguments,
+              children: /* @__PURE__ */ jsx(Icon, { ...customComponentProps })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(TextSection, { ...itemMeta })
+        ]
+      }
+    );
+  }
+);
+export {
+  ItemMiddleSection
+};
+//# sourceMappingURL=ItemMiddleSection.js.map

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

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

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { useInternalStore } from "../../config/useStore/index.js";
+import { ItemMiddleSection } from "./ItemMiddleSection.js";
+import { DragOverlay } from "../Dnd/DragOverlay.js";
+import { DSShuttleV2Name } from "../../config/DSShuttleV2Definitions.js";
+const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: "item-wrapper-overlay" })`
+  min-height: 2.769rem;
+  position: relative;
+  background-color: white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+  padding-right: 5px;
+
+  &:focus {
+    outline: 2px solid brand-700;
+    outline-offset: -2px;
+  }
+  border-bottom: 1px solid neutral-100;
+`;
+const ItemOverlay = React2.memo(
+  (itemMeta) => {
+    const { datumInternalMeta } = itemMeta;
+    const { isSelected, hydratedId } = datumInternalMeta;
+    const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
+    const isDragAndDropHappening = getIsDragAndDropHappening();
+    const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);
+    return /* @__PURE__ */ jsxs(ItemWrapper, { cols: ["auto", "auto"], alignItems: "center", role: "checkbox", "aria-checked": isSelected, children: [
+      /* @__PURE__ */ jsx(
+        DragOverlay,
+        {
+          id: `${hydratedId}-overlay`,
+          isDndActive: isDragAndDropHappening,
+          isDragging: dndDraggingItem?.hydratedId === hydratedId
+        }
+      ),
+      /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta })
+    ] });
+  }
+);
+export {
+  ItemOverlay
+};
+//# sourceMappingURL=ItemOverlay.js.map

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

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

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../../config/useStore/useStore.js";
+const StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })`
+  width: 5px;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: ${(props) => {
+  if (props.$isSelected)
+    return props.theme.colors.brand[600];
+  if (props.$selectionPrevented === true)
+    return props.theme.colors.neutral["080"];
+  return props.theme.colors.brand[300];
+}};
+`;
+const ItemSelection = React2.memo((itemMeta) => {
+  const {
+    datumInternalMeta: { isSelected },
+    datumRenderFlags: { selectionPrevented }
+  } = itemMeta;
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
+  return /* @__PURE__ */ jsx(
+    StyledItemSelection,
+    {
+      $isSelected: isSelected,
+      $selectionPrevented: selectionPrevented,
+      getOwnerProps,
+      getOwnerPropsArguments
+    }
+  );
+});
+export {
+  ItemSelection
+};
+//# sourceMappingURL=ItemSelection.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import React2 from "react";
+import {
+  useFocusItemTracker,
+  useFocusActionTrackers,
+  useFocusRegionTrackers
+} from "../../config/useFocusTracker/index.js";
+import { useInternalStore } from "../../config/useStore/index.js";
+const useItemArrowNavigation = (itemMeta) => {
+  const { trackFocusRegionPanelFocusMoveAll } = useFocusRegionTrackers();
+  const { trackFocusPrevItem, trackFocusNextItem, trackFocusItemReset } = useFocusItemTracker();
+  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent, trackFocusActionReset } = useFocusActionTrackers();
+  const { hasMultipleSelection, isDestinationPanel } = itemMeta;
+  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
+  const onItemContainerKeyDown = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      const isDragAndDropHappening = getIsDragAndDropHappening();
+      if (isDragAndDropHappening) {
+        e.preventDefault();
+        return;
+      }
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key))
+        e.preventDefault();
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key))
+        e.stopPropagation();
+      if (key === "ArrowLeft") {
+        if (hasMultipleSelection) {
+          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+          trackFocusItemReset();
+          trackFocusActionReset();
+          return;
+        }
+        trackFocusPrevAction(itemMeta);
+        return;
+      }
+      if (key === "ArrowRight") {
+        if (hasMultipleSelection) {
+          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+          trackFocusItemReset();
+          trackFocusActionReset();
+          return;
+        }
+        trackFocusNextAction(itemMeta);
+        return;
+      }
+      if (key === "ArrowUp") {
+        trackFocusPrevItem(itemMeta);
+        trackFocusActionParent();
+        return;
+      }
+      if (key === "ArrowDown") {
+        trackFocusNextItem(itemMeta);
+        trackFocusActionParent();
+        return;
+      }
+    },
+    [
+      getIsDragAndDropHappening,
+      hasMultipleSelection,
+      trackFocusPrevAction,
+      itemMeta,
+      trackFocusRegionPanelFocusMoveAll,
+      isDestinationPanel,
+      trackFocusItemReset,
+      trackFocusActionReset,
+      trackFocusNextAction,
+      trackFocusPrevItem,
+      trackFocusActionParent,
+      trackFocusNextItem
+    ]
+  );
+  return React2.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);
+};
+export {
+  useItemArrowNavigation
+};
+//# sourceMappingURL=useItemArrowNavigation.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/useItemArrowNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React from 'react';\nimport {\n  useFocusItemTracker,\n  useFocusActionTrackers,\n  useFocusRegionTrackers,\n} from '../../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\n\nexport const useItemArrowNavigation = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusRegionPanelFocusMoveAll } = useFocusRegionTrackers();\n  const { trackFocusPrevItem, trackFocusNextItem, trackFocusItemReset } = useFocusItemTracker();\n  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent, trackFocusActionReset } =\n    useFocusActionTrackers();\n  const { hasMultipleSelection, isDestinationPanel } = itemMeta;\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\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(itemMeta);\n        return;\n      }\n      if (key === 'ArrowRight') {\n        if (hasMultipleSelection) {\n          trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n          trackFocusItemReset();\n          trackFocusActionReset();\n          return;\n        }\n        trackFocusNextAction(itemMeta);\n        return;\n      }\n      if (key === 'ArrowUp') {\n        trackFocusPrevItem(itemMeta);\n        trackFocusActionParent();\n        return;\n      }\n      if (key === 'ArrowDown') {\n        trackFocusNextItem(itemMeta);\n        trackFocusActionParent();\n        return;\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      hasMultipleSelection,\n      trackFocusPrevAction,\n      itemMeta,\n      trackFocusRegionPanelFocusMoveAll,\n      isDestinationPanel,\n      trackFocusItemReset,\n      trackFocusActionReset,\n      trackFocusNextAction,\n      trackFocusPrevItem,\n      trackFocusActionParent,\n      trackFocusNextItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AAE1B,MAAM,yBAAyB,CAAC,aAAoC;AACzE,QAAM,EAAE,kCAAkC,IAAI,uBAAuB;AACrE,QAAM,EAAE,oBAAoB,oBAAoB,oBAAoB,IAAI,oBAAoB;AAC5F,QAAM,EAAE,sBAAsB,sBAAsB,wBAAwB,sBAAsB,IAChG,uBAAuB;AACzB,QAAM,EAAE,sBAAsB,mBAAmB,IAAI;AAErD,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAE7F,QAAM,yBAAyBA,OAAM;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,QAAQ;AAC7B;AAAA,MACF;AACA,UAAI,QAAQ,cAAc;AACxB,YAAI,sBAAsB;AACxB,4CAAkC,kBAAkB;AACpD,8BAAoB;AACpB,gCAAsB;AACtB;AAAA,QACF;AACA,6BAAqB,QAAQ;AAC7B;AAAA,MACF;AACA,UAAI,QAAQ,WAAW;AACrB,2BAAmB,QAAQ;AAC3B,+BAAuB;AACvB;AAAA,MACF;AACA,UAAI,QAAQ,aAAa;AACvB,2BAAmB,QAAQ;AAC3B,+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,IACF;AAAA,EACF;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import React2 from "react";
+import { useInternalStore } from "../../config/useStore/index.js";
+import { useSelectionLogic } from "./useSelectionLogic.js";
+const useItemKeyboardSelection = (itemMeta) => {
+  const { datumInternalMeta } = itemMeta;
+  const { hydratedId } = datumInternalMeta;
+  const { selectItem } = useSelectionLogic(itemMeta);
+  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
+  const onItemKeyDownSelection = React2.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 React2.useMemo(() => ({ onItemKeyDownSelection }), [onItemKeyDownSelection]);
+};
+export {
+  useItemKeyboardSelection
+};
+//# sourceMappingURL=useItemKeyboardSelection.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/useItemKeyboardSelection.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\nimport { useSelectionLogic } from './useSelectionLogic.js';\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAE3B,MAAM,2BAA2B,CAAC,aAAoC;AAC3E,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,EAAE,WAAW,IAAI,kBAAkB,QAAQ;AACjD,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,yBAAyBA,OAAM;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,SAAOA,OAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,98 @@
+import * as React from "react";
+import React2 from "react";
+import { useInternalStore, usePropsStore } from "../../config/useStore/index.js";
+import { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from "../../config/useFocusTracker/index.js";
+const useSelectionLogic = ({
+  isDestinationPanel,
+  datumInternalMeta,
+  datum,
+  datumRenderFlags
+}) => {
+  const { trackFocusItem } = useFocusItemTracker();
+  const { trackFocusActionParent } = useFocusActionTrackers();
+  const { trackFocusRegionPanelItem } = useFocusTracker();
+  const getPanelLastSelectedItem = useInternalStore((store) => store.getPanelLastSelectedItem);
+  const setPanelLastSelectedItem = useInternalStore(
+    (store) => isDestinationPanel ? store.setDestinationPanelLastSelectedItem : store.setSourcePanelLastSelectedItem
+  );
+  const panelSelectionableDataIds = usePropsStore(
+    (store) => isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds
+  );
+  const onSelectionChange = usePropsStore(
+    (state) => isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange
+  );
+  const panelSelectedItems = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems
+  );
+  const selectItem = React2.useCallback(
+    (event) => {
+      const { selectionPrevented } = datumRenderFlags;
+      const { hydratedId } = datumInternalMeta;
+      const { shiftKey } = event;
+      const lastSelectedItem = getPanelLastSelectedItem(isDestinationPanel);
+      if (!selectionPrevented) {
+        let newSelection = {};
+        if (shiftKey && lastSelectedItem) {
+          const startSelIndx = panelSelectionableDataIds.findIndex((id) => id === lastSelectedItem);
+          const endSelIndx = panelSelectionableDataIds.findIndex((id) => id === hydratedId);
+          if (startSelIndx !== -1 && endSelIndx !== -1) {
+            const ordererIndexes = [startSelIndx, endSelIndx].sort();
+            const shiftSelectedIdsArray = panelSelectionableDataIds.slice(ordererIndexes[0], ordererIndexes[1] + 1);
+            let shouldShiftDeSelect = true;
+            const allSelected = {};
+            const allDeSelected = {};
+            shiftSelectedIdsArray.forEach((id) => {
+              allSelected[id] = true;
+              allDeSelected[id] = false;
+              if (panelSelectedItems[id] !== true)
+                shouldShiftDeSelect = false;
+            });
+            if (shouldShiftDeSelect)
+              newSelection = { ...panelSelectedItems, ...allDeSelected };
+            else
+              newSelection = { ...panelSelectedItems, ...allSelected };
+          }
+        } else {
+          newSelection = { ...panelSelectedItems };
+          const isAddition = newSelection[hydratedId] !== true;
+          if (isAddition) {
+            newSelection[hydratedId] = true;
+          } else
+            delete newSelection[hydratedId];
+        }
+        setPanelLastSelectedItem(hydratedId);
+        onSelectionChange(newSelection, { event, item: datum });
+      }
+      trackFocusRegionPanelItem(isDestinationPanel);
+      trackFocusItem({ original: datum, ...datumInternalMeta });
+      trackFocusActionParent();
+    },
+    [
+      datum,
+      datumInternalMeta,
+      datumRenderFlags,
+      getPanelLastSelectedItem,
+      isDestinationPanel,
+      onSelectionChange,
+      panelSelectedItems,
+      panelSelectionableDataIds,
+      setPanelLastSelectedItem,
+      trackFocusActionParent,
+      trackFocusItem,
+      trackFocusRegionPanelItem
+    ]
+  );
+  const onShiftMouseDownPreventTextSelection = React2.useCallback((event) => {
+    const { shiftKey } = event;
+    if (shiftKey)
+      event.preventDefault();
+  }, []);
+  return React2.useMemo(
+    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),
+    [selectItem, onShiftMouseDownPreventTextSelection]
+  );
+};
+export {
+  useSelectionLogic
+};
+//# sourceMappingURL=useSelectionLogic.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/useSelectionLogic.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport React from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../config/useFocusTracker/index.js';\nexport const useSelectionLogic = ({\n  isDestinationPanel,\n  datumInternalMeta,\n  datum,\n  datumRenderFlags,\n}: DSShuttleV2T.ItemMeta) => {\n  const { trackFocusItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusTracker();\n\n  const getPanelLastSelectedItem = useInternalStore((store) => store.getPanelLastSelectedItem);\n  const setPanelLastSelectedItem = useInternalStore((store) =>\n    isDestinationPanel ? store.setDestinationPanelLastSelectedItem : store.setSourcePanelLastSelectedItem,\n  );\n\n  const panelSelectionableDataIds = usePropsStore((store) =>\n    isDestinationPanel ? store.destinationSelectionableDataIds : store.sourceSelectionableDataIds,\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const panelSelectedItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectedItems : state.sourceSelectedItems,\n  );\n  const selectItem = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n      const { selectionPrevented } = datumRenderFlags;\n      const { hydratedId } = datumInternalMeta;\n      const { shiftKey } = event;\n      const lastSelectedItem = getPanelLastSelectedItem(isDestinationPanel);\n      if (!selectionPrevented) {\n        let newSelection: Record<string, boolean> = {};\n        // shift select logic\n        if (shiftKey && lastSelectedItem) {\n          const startSelIndx = panelSelectionableDataIds.findIndex((id) => id === lastSelectedItem);\n          const endSelIndx = panelSelectionableDataIds.findIndex((id) => id === hydratedId);\n          if (startSelIndx !== -1 && endSelIndx !== -1) {\n            const ordererIndexes = [startSelIndx, endSelIndx].sort();\n            const shiftSelectedIdsArray = panelSelectionableDataIds.slice(ordererIndexes[0], ordererIndexes[1] + 1);\n            let shouldShiftDeSelect = true;\n            // I track both \"all Select\"/\"all unselect\" so I can \".forEach\" only once and apply either version after\n            const allSelected: Record<string, boolean> = {};\n            const allDeSelected: Record<string, boolean> = {};\n            shiftSelectedIdsArray.forEach((id) => {\n              allSelected[id] = true;\n              allDeSelected[id] = false;\n              // if anything inside the shift-select was not selected, shift-select will \"select\"\n              if (panelSelectedItems[id] !== true) shouldShiftDeSelect = false;\n            });\n            if (shouldShiftDeSelect) newSelection = { ...panelSelectedItems, ...allDeSelected };\n            else newSelection = { ...panelSelectedItems, ...allSelected };\n          }\n        } else {\n          // single selection logic\n          newSelection = { ...panelSelectedItems };\n          const isAddition = newSelection[hydratedId] !== true;\n          if (isAddition) {\n            newSelection[hydratedId] = true;\n          } else delete newSelection[hydratedId];\n        }\n        // we track the item for \"shift select\" purposes\n        // this must happen AFTER shift select logic!\n        setPanelLastSelectedItem(hydratedId);\n        onSelectionChange(newSelection, { event, item: datum });\n      }\n      // focus tracking logic\n      trackFocusRegionPanelItem(isDestinationPanel);\n      trackFocusItem({ original: datum, ...datumInternalMeta });\n      trackFocusActionParent();\n    },\n    [\n      datum,\n      datumInternalMeta,\n      datumRenderFlags,\n      getPanelLastSelectedItem,\n      isDestinationPanel,\n      onSelectionChange,\n      panelSelectedItems,\n      panelSelectionableDataIds,\n      setPanelLastSelectedItem,\n      trackFocusActionParent,\n      trackFocusItem,\n      trackFocusRegionPanelItem,\n    ],\n  );\n\n  const onShiftMouseDownPreventTextSelection = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    const { shiftKey } = event;\n    if (shiftKey) event.preventDefault();\n  }, []);\n  return React.useMemo(\n    () => ({ selectItem, onShiftMouseDownPreventTextSelection }),\n    [selectItem, onShiftMouseDownPreventTextSelection],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAOA,YAAW;AAClB,SAAS,kBAAkB,qBAAqB;AAEhD,SAAS,qBAAqB,wBAAwB,uBAAuB;AACtE,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAC/C,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,gBAAgB;AAEtD,QAAM,2BAA2B,iBAAiB,CAAC,UAAU,MAAM,wBAAwB;AAC3F,QAAM,2BAA2B;AAAA,IAAiB,CAAC,UACjD,qBAAqB,MAAM,sCAAsC,MAAM;AAAA,EACzE;AAEA,QAAM,4BAA4B;AAAA,IAAc,CAAC,UAC/C,qBAAqB,MAAM,kCAAkC,MAAM;AAAA,EACrE;AAEA,QAAM,oBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,qBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,aAAaA,OAAM;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,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC;AACtG,gBAAI,sBAAsB;AAE1B,kBAAM,cAAuC,CAAC;AAC9C,kBAAM,gBAAyC,CAAC;AAChD,kCAAsB,QAAQ,CAAC,OAAO;AACpC,0BAAY,EAAE,IAAI;AAClB,4BAAc,EAAE,IAAI;AAEpB,kBAAI,mBAAmB,EAAE,MAAM;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,UAAU,MAAM;AAChD,cAAI,YAAY;AACd,yBAAa,UAAU,IAAI;AAAA,UAC7B;AAAO,mBAAO,aAAa,UAAU;AAAA,QACvC;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,uCAAuCA,OAAM,YAAY,CAAC,UAA4C;AAC1G,UAAM,EAAE,SAAS,IAAI;AACrB,QAAI;AAAU,YAAM,eAAe;AAAA,EACrC,GAAG,CAAC,CAAC;AACL,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,YAAY,qCAAqC;AAAA,IAC1D,CAAC,YAAY,oCAAoC;AAAA,EACnD;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { useInternalStore } from "../../config/useStore/index.js";
+import { REGIONS_FOCUSES } from "../../constants/index.js";
+const useThisItemIsFocused = (itemMeta) => {
+  const { datumInternalMeta, isDestinationPanel } = itemMeta;
+  const { hydratedId } = datumInternalMeta;
+  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
+  const currItemId = hydratedId;
+  const thisItemIsFocused = useInternalStore(
+    (state) => currRegion === state.focusRegion && currItemId === state.focusItem && "parent" === state.focusItemAction
+  );
+  return thisItemIsFocused;
+};
+export {
+  useThisItemIsFocused
+};
+//# sourceMappingURL=useThisItemIsFocused.js.map

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

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