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

package/dist/esm/parts/HoC/withConditionalDnDRowContext.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback, useEffect } from "react";
+import { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from "@elliemae/ds-legacy-drag-and-drop";
+import { createPortal } from "react-dom";
+import { useInternalStore, usePropsStore } from "../../config/useStore/index.js";
+import { ItemOverlay } from "../Item/ItemOverlay.js";
+const withConditionalDnDRowContext = (Component) => (props) => {
+  const { isDestinationPanel } = props;
+  const itemList = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
+  );
+  const withDragNDrop = usePropsStore(
+    (state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
+  );
+  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);
+  const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);
+  const setOverId = useInternalStore((state) => state.setOverId);
+  const setIsDropValid = useInternalStore((state) => state.setIsDropValid);
+  const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);
+  const setLastActiveId = useInternalStore((state) => state.setLastActiveId);
+  const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);
+  const onItemsReorder = usePropsStore(
+    (state) => isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder
+  );
+  const onReorder = useCallback(
+    (dndActive, targetIndex, metadata) => {
+      const { considerExpanding, over: dndOver, ...dndData } = metadata;
+      const over2 = dndOver.original.original;
+      const active2 = dndActive.original.original;
+      const cleanedMetaData = { ...dndData, over: over2, active: active2, targetIndex };
+      onItemsReorder(active2, cleanedMetaData);
+    },
+    [onItemsReorder]
+  );
+  const treeConfig = React2.useMemo(() => {
+    const configuredItemList = itemList.map((item, i) => ({
+      // dnd
+      uid: item.hydratedId,
+      depth: 0,
+      parentId: null,
+      realIndex: i,
+      childrenCount: 0,
+      original: item
+    }));
+    return {
+      flattenedItems: configuredItemList,
+      isHorizontalDnD: false,
+      isExpandable: false,
+      onReorder,
+      maxDragAndDropLevel: 0,
+      getIsDropValid: () => true
+    };
+  }, [itemList, onReorder]);
+  const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig(treeConfig);
+  const containerSortableContextProps = sortableContextProps.root;
+  useEffect(() => {
+    setLastActiveId(active?.id?.toString() ?? "");
+    setOverId(over?.id?.toString() ?? "");
+    setIsDropValid(isDropValid);
+    setDndDraggingItem(activeItem?.original ?? null);
+    setDropIndicatorPosition(dropIndicatorPosition);
+    if (!active)
+      setDndDraggingItemMeta(null);
+  }, [
+    active,
+    activeItem,
+    dropIndicatorPosition,
+    isDropValid,
+    over,
+    setDndDraggingItem,
+    setDndDraggingItemMeta,
+    setDropIndicatorPosition,
+    setIsDropValid,
+    setLastActiveId,
+    setOverId
+  ]);
+  if (withDragNDrop)
+    return /* @__PURE__ */ jsx(DndContext, { ...dndContextProps, children: /* @__PURE__ */ jsxs(SortableContext, { ...containerSortableContextProps, children: [
+      /* @__PURE__ */ jsx(Component, { ...props }),
+      createPortal(
+        /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, children: /* @__PURE__ */ jsx(Fragment, { children: dndDraggingItemMeta ? /* @__PURE__ */ jsx(ItemOverlay, { ...dndDraggingItemMeta }) : null }) }),
+        document.body
+      )
+    ] }) });
+  return /* @__PURE__ */ jsx(Component, { ...props });
+};
+export {
+  withConditionalDnDRowContext
+};
+//# sourceMappingURL=withConditionalDnDRowContext.js.map

package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport type { DnDKitTree } from '@elliemae/ds-legacy-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-legacy-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { ItemOverlay } from '../Item/ItemOverlay.js';\n\n// create a type omittting height from PanelMetaInfo\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n  activeId?: DSShuttleV2T.HydratedId;\n  overId?: DSShuttleV2T.HydratedId;\n  isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> =\n  (Component) => (props) => {\n    const { isDestinationPanel } = props;\n    const itemList = usePropsStore((state) =>\n      isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n    );\n\n    const withDragNDrop = usePropsStore((state) =>\n      isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n    );\n\n    const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n    const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n    const setOverId = useInternalStore((state) => state.setOverId);\n    const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n    const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);\n    const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n    const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n    const onItemsReorder = usePropsStore((state) =>\n      isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n    );\n\n    const onReorder: DnDKitTree.OnReorder<DSShuttleV2T.ConfiguredDatum> = useCallback(\n      (dndActive, targetIndex, metadata) => {\n        // eslint-disable-next-line no-unused-vars\n        const { considerExpanding, over: dndOver, ...dndData } = metadata;\n        const over = dndOver.original.original;\n        const active = dndActive.original.original;\n        const cleanedMetaData = { ...dndData, over, active, targetIndex };\n        onItemsReorder(active, cleanedMetaData);\n      },\n      [onItemsReorder],\n    );\n\n    const treeConfig = React.useMemo(() => {\n      const configuredItemList = itemList.map((item, i) => ({\n        // dnd\n        uid: item.hydratedId,\n        depth: 0,\n        parentId: null,\n        realIndex: i,\n        childrenCount: 0,\n        original: item,\n      }));\n      return {\n        flattenedItems: configuredItemList,\n        isHorizontalDnD: false,\n        isExpandable: false,\n        onReorder,\n        maxDragAndDropLevel: 0,\n        getIsDropValid: () => true,\n      };\n    }, [itemList, onReorder]);\n\n    const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } =\n      useTreeDndkitConfig(treeConfig);\n\n    const containerSortableContextProps = sortableContextProps.root;\n\n    useEffect(() => {\n      setLastActiveId(active?.id?.toString() ?? '');\n      setOverId(over?.id?.toString() ?? '');\n      setIsDropValid(isDropValid);\n      setDndDraggingItem(activeItem?.original ?? null);\n      setDropIndicatorPosition(dropIndicatorPosition);\n      if (!active) setDndDraggingItemMeta(null);\n    }, [\n      active,\n      activeItem,\n      dropIndicatorPosition,\n      isDropValid,\n      over,\n      setDndDraggingItem,\n      setDndDraggingItemMeta,\n      setDropIndicatorPosition,\n      setIsDropValid,\n      setLastActiveId,\n      setOverId,\n    ]);\n\n    if (withDragNDrop)\n      return (\n        <DndContext {...dndContextProps}>\n          <SortableContext {...containerSortableContextProps}>\n            <Component {...props} />\n            {createPortal(\n              <DragOverlay style={{ width: 'auto' }}>\n                <>{dndDraggingItemMeta ? <ItemOverlay {...dndDraggingItemMeta} /> : null}</>\n              </DragOverlay>,\n              document.body,\n            )}\n          </SortableContext>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
+  "mappings": "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",
+  "names": ["React", "over", "active"]
+}

package/dist/esm/parts/HoC/withConditionalUseSortable.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@elliemae/ds-legacy-drag-and-drop";
+const withConditionalUseSortable = (Component) => function(props) {
+  const { datumInternalMeta } = props;
+  const { hydratedId } = datumInternalMeta;
+  const useSortableHelpers = useSortable({ id: hydratedId });
+  return /* @__PURE__ */ jsx(Component, { ...props, useSortableHelpers });
+};
+export {
+  withConditionalUseSortable
+};
+//# sourceMappingURL=withConditionalUseSortable.js.map

package/dist/esm/parts/HoC/withConditionalUseSortable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalUseSortable.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useSortable } from '@elliemae/ds-legacy-drag-and-drop';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\n\ntype HoCConfig = DSShuttleV2T.ItemMeta;\ntype ResultComponentProps = DSShuttleV2T.ItemMeta & { useSortableHelpers: ReturnType<typeof useSortable> };\nexport const withConditionalUseSortable: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> = (Component) =>\n  function (props) {\n    const { datumInternalMeta } = props;\n    const { hydratedId } = datumInternalMeta;\n    const useSortableHelpers = useSortable({ id: hydratedId });\n\n    return <Component {...props} useSortableHelpers={useSortableHelpers} />;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYZ;AAXX,SAAS,mBAAmB;AAKrB,MAAM,6BAA4F,CAAC,cACxG,SAAU,OAAO;AACf,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,qBAAqB,YAAY,EAAE,IAAI,WAAW,CAAC;AAEzD,SAAO,oBAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
+  "names": []
+}

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

@@ -0,0 +1,192 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useMemo } from "react";
+import { useHeadlessTooltip } from "@elliemae/ds-legacy-utilities";
+import { styled, css } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { useInternalStore, usePropsStore } from "../../config/useStore/index.js";
+import { ItemSelection } from "./ItemSelection.js";
+import { ItemActions } from "./ItemActions/index.js";
+import { ItemMiddleSection } from "./ItemMiddleSection.js";
+import { useSelectionLogic } from "./useSelectionLogic.js";
+import { useItemArrowNavigation } from "./useItemArrowNavigation.js";
+import { REGIONS_FOCUSES } from "../../constants/index.js";
+import { DragHandle } from "../Dnd/DndHandle.js";
+import { DropIndicator } from "../Dnd/DropIndicator.js";
+import { withConditionalUseSortable } from "../HoC/withConditionalUseSortable.js";
+import { useInnerRefHandlers as useInnerRefActionHandlers } from "./ItemActions/useInnerRefHandlers.js";
+import { useItemKeyboardSelection } from "./useItemKeyboardSelection.js";
+import { useThisItemIsFocused } from "./useThisItemIsFocused.js";
+const cssDisabled = css`
+  background-color: ${({ theme }) => theme.colors.neutral["100"]};
+  color: ${({ theme }) => theme.colors.neutral["300"]};
+  .DSShuttleV2-item-action-btn-to-source-icon > svg,
+  .DSShuttleV2-item-action-btn-to-destination-icon > svg,
+  .DSShuttleV2-item-action-btn-drilldown-icon > svg {
+    fill: ${({ theme }) => theme.colors.neutral["300"]};
+  }
+`;
+const focusRing = css`
+  outline: 2px solid ${({ theme }) => theme.colors.brand["700"]};
+  outline-offset: -2px;
+`;
+const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })`
+  min-height: 2.769rem;
+  position: relative;
+  background-color: white;
+  &:hover {
+    background-color: ${({ isDndActive, theme }) => !isDndActive ? theme.colors.brand["200"] : "white"};
+    .DSShuttleV2-item-action-btn-to-source-icon > svg,
+    .DSShuttleV2-item-action-btn-to-destination-icon > svg,
+    .DSShuttleV2-item-action-btn-drilldown-icon > svg {
+      fill: brand-700;
+    }
+    ${({ isDragging }) => isDragging && cssDisabled}
+  }
+
+  ${({ hasFocusRing }) => hasFocusRing && focusRing}
+
+  border-bottom: 1px solid neutral-100;
+
+  ${({ isDragging }) => isDragging && cssDisabled}
+`;
+const ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`
+  height: 100%;
+  &:focus {
+    outline: none;
+  }
+`;
+const useInnerRefHandlers = (itemMeta) => {
+  const { datumInternalMeta, isDestinationPanel } = itemMeta;
+  const { hydratedId } = datumInternalMeta;
+  const setZustandRef = useInternalStore((state) => state.setZustandRef);
+  const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);
+  const getDeferFocusUntilFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender);
+  const thisItemIsFocused = useThisItemIsFocused(itemMeta);
+  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
+  const currItemId = hydratedId;
+  const innerRefHandlerParentItem = React2.useCallback(
+    (node) => {
+      setZustandRef([currRegion, currItemId, "parent"], node);
+      if (getDeferFocusUntilFirstRender() && thisItemIsFocused && node) {
+        node?.focus();
+        setDeferFocusUntilFirstRender(false);
+      }
+    },
+    [
+      setZustandRef,
+      currRegion,
+      currItemId,
+      getDeferFocusUntilFirstRender,
+      thisItemIsFocused,
+      setDeferFocusUntilFirstRender
+    ]
+  );
+  return React2.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);
+};
+const Item = React2.memo((itemMeta) => {
+  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;
+  const { isSelected, hydratedId, softDeleted } = datumInternalMeta;
+  const cols = useMemo(() => {
+    if (withDragNDrop)
+      return ["5px", "auto", "1fr", "auto"];
+    return ["5px", "1fr", "auto"];
+  }, [withDragNDrop]);
+  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);
+  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
+  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);
+  React2.useEffect(() => {
+    if (isDraggingThisItem) {
+      setDndDraggingItemMeta((prevItemMeta) => {
+        if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId)
+          return prevItemMeta;
+        return itemMeta;
+      });
+    }
+  }, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);
+  const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);
+  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);
+  const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);
+  const handleItemKeyDown = React2.useCallback(
+    (event) => {
+      onItemKeyDownSelection(event);
+      onItemContainerKeyDown(event);
+    },
+    [onItemKeyDownSelection, onItemContainerKeyDown]
+  );
+  const { innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);
+  const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);
+  const overId = useInternalStore((state) => state.overId);
+  const isDropValid = useInternalStore((state) => state.isDropValid);
+  const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);
+  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;
+  const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {
+  });
+  const thisItemIsFocused = useThisItemIsFocused(itemMeta);
+  const config = React2.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);
+  const tooltipHelpers = useHeadlessTooltip(config);
+  const idItem = useMemo(() => `${hydratedId}-wrapper${softDeleted ? "-soft-deleted" : ""}`, [hydratedId, softDeleted]);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
+  return /* @__PURE__ */ jsxs(
+    ItemWrapper,
+    {
+      isDragging: isDraggingThisItem,
+      isDndActive: getIsDragAndDropHappening(),
+      cols,
+      alignItems: "center",
+      onClick: selectItem,
+      ref: sortableRef,
+      onKeyDown: handleItemKeyDown,
+      onMouseDown: onShiftMouseDownPreventTextSelection,
+      onMouseEnter: tooltipHelpers.onMouseEnter,
+      onMouseLeave: tooltipHelpers.onMouseLeave,
+      onPointerEnter: tooltipHelpers.onMouseEnter,
+      onPointerLeave: tooltipHelpers.onMouseLeave,
+      hasFocusRing: thisItemIsFocused,
+      tabIndex: -1,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ jsx(
+          ItemSelectionWrapper,
+          {
+            role: "checkbox",
+            "aria-checked": isSelected,
+            onFocus: tooltipHelpers.onFocus,
+            onBlur: tooltipHelpers.onBlur,
+            "aria-labelledby": `${hydratedId}-text-section${softDeleted ? "-soft-deleted" : ""}`,
+            id: idItem,
+            ref: innerRefHandlerParentItem,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ jsx(ItemSelection, { ...itemMeta })
+          }
+        ),
+        withDragNDrop && useSortableHelpers ? /* @__PURE__ */ jsx(
+          DragHandle,
+          {
+            id: hydratedId,
+            useSortableHelpers,
+            isDndActive: getIsDragAndDropHappening(),
+            isDragging: isDraggingThisItem,
+            innerRef: innerRefHandlerDnd,
+            disabled: hasMultipleSelection
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta, tooltipHelpers }),
+        !hasMultipleSelection ? /* @__PURE__ */ jsx(ItemActions, { ...itemMeta }) : null,
+        /* @__PURE__ */ jsx(DropIndicator, { vertical: false, dropIndicatorPosition: showDropIndicatorPosition, isDropValid })
+      ]
+    }
+  );
+});
+const ItemSortable = withConditionalUseSortable(Item);
+var Item_default = ItemSortable;
+export {
+  Item,
+  ItemSortable,
+  Item_default as default
+};
+//# sourceMappingURL=Item.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/Item.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { useHeadlessTooltip } from '@elliemae/ds-legacy-utilities';\nimport { styled, css } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { ItemSelection } from './ItemSelection.js';\nimport { ItemActions } from './ItemActions/index.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { useSelectionLogic } from './useSelectionLogic.js';\nimport { useItemArrowNavigation } from './useItemArrowNavigation.js';\nimport { REGIONS_FOCUSES } from '../../constants/index.js';\nimport { DragHandle } from '../Dnd/DndHandle.js';\nimport { DropIndicator } from '../Dnd/DropIndicator.js';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable.js';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers.js';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .DSShuttleV2-item-action-btn-to-source-icon > svg,\n  .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n  .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\nconst focusRing = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n  outline-offset: -2px;\n`;\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n  hasFocusRing: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n  min-height: 2.769rem;\n  position: relative;\n  background-color: white;\n  &:hover {\n    background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n    .DSShuttleV2-item-action-btn-to-source-icon > svg,\n    .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n    .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  ${({ hasFocusRing }) => hasFocusRing && focusRing}\n\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`\n  height: 100%;\n  &:focus {\n    outline: none;\n  }\n`;\n\nconst useInnerRefHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, isDestinationPanel } = itemMeta;\n  const { hydratedId } = datumInternalMeta;\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);\n  const getDeferFocusUntilFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender);\n\n  const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = hydratedId;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setZustandRef([currRegion, currItemId, 'parent'], node);\n\n      if (getDeferFocusUntilFirstRender() && thisItemIsFocused && node) {\n        node?.focus();\n        setDeferFocusUntilFirstRender(false);\n      }\n    },\n    [\n      setZustandRef,\n      currRegion,\n      currItemId,\n      getDeferFocusUntilFirstRender,\n      thisItemIsFocused,\n      setDeferFocusUntilFirstRender,\n    ],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n  const { isSelected, hydratedId, softDeleted } = datumInternalMeta;\n\n  const cols = useMemo(() => {\n    if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n    return ['5px', '1fr', 'auto'];\n  }, [withDragNDrop]);\n\n  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n  React.useEffect(() => {\n    if (isDraggingThisItem) {\n      setDndDraggingItemMeta((prevItemMeta) => {\n        if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId) return prevItemMeta;\n        return itemMeta;\n      });\n    }\n  }, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);\n\n  const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      onItemKeyDownSelection(event);\n      onItemContainerKeyDown(event);\n    },\n    [onItemKeyDownSelection, onItemContainerKeyDown],\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n  const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n  const overId = useInternalStore((state) => state.overId);\n  const isDropValid = useInternalStore((state) => state.isDropValid);\n  const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n  const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {});\n\n  const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n  const config = React.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);\n\n  const tooltipHelpers = useHeadlessTooltip(config);\n\n  const idItem = useMemo(() => `${hydratedId}-wrapper${softDeleted ? '-soft-deleted' : ''}`, [hydratedId, softDeleted]);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={sortableRef}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      onMouseEnter={tooltipHelpers.onMouseEnter}\n      onMouseLeave={tooltipHelpers.onMouseLeave}\n      onPointerEnter={tooltipHelpers.onMouseEnter}\n      onPointerLeave={tooltipHelpers.onMouseLeave}\n      hasFocusRing={thisItemIsFocused}\n      tabIndex={-1}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <ItemSelectionWrapper\n        role=\"checkbox\"\n        aria-checked={isSelected}\n        onFocus={tooltipHelpers.onFocus}\n        onBlur={tooltipHelpers.onBlur}\n        aria-labelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n        id={idItem}\n        ref={innerRefHandlerParentItem}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <ItemSelection {...itemMeta} />\n      </ItemSelectionWrapper>\n      {withDragNDrop && useSortableHelpers ? (\n        <DragHandle\n          id={hydratedId}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={getIsDragAndDropHappening()}\n          isDragging={isDraggingThisItem}\n          innerRef={innerRefHandlerDnd}\n          disabled={hasMultipleSelection}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} tooltipHelpers={tooltipHelpers} />\n      {!hasMultipleSelection ? <ItemActions {...itemMeta} /> : null}\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

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

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2, { useMemo } from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-legacy-button-v2";
+import { ArrowShortReturn, ArrowShortRight, CloseMedium } from "@elliemae/ds-legacy-icons";
+import { useActionsHandlers } from "./useActionsHandlers.js";
+import { useInnerRefHandlers } from "./useInnerRefHandlers.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../../../config/useStore/useStore.js";
+const StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
+const StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
+const StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`
+  height: 1.692rem !important;
+  svg {
+    fill: brand-600;
+  }
+  :disabled svg {
+    fill: neutral-200 !important;
+  }
+`;
+const StyledDrilldownIcon = styled(ArrowShortReturn, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON
+})``;
+const StyledCloseMediumIcon = styled(CloseMedium, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON
+})``;
+const StyledArrowShortRightIcon = styled(ArrowShortRight, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
+})``;
+const actionsCols = ["1.538rem", "1.538rem"];
+const ItemActions = React2.memo((itemMeta) => {
+  const {
+    datumHydratables,
+    isDestinationPanel,
+    datumRenderFlags,
+    datumInternalMeta: { hydratedPreventMove }
+  } = itemMeta;
+  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
+  const { preventDrilldown, label } = datumHydratables;
+  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);
+  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);
+  const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);
+  const moveAriaLabel = useMemo(
+    () => `Move option ${label} into ${isDestinationPanel ? "source" : "destination"} panel`,
+    [label, isDestinationPanel]
+  );
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
+  return /* @__PURE__ */ jsx(
+    StyledItemActions,
+    {
+      cols: actionsCols,
+      gutter: "xxs",
+      pl: "xs",
+      pr: "xxs",
+      alignItems: "center",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: withActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StyledItemActionWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(
+          StyledButton,
+          {
+            buttonType: "icon",
+            "aria-label": drillDownAriaLabel,
+            onClick: handleClickDrilldown,
+            onKeyDown: handleKeyDownSelectionBubbleUp,
+            size: BUTTON_SIZES.S,
+            innerRef: innerRefHandlerDrilldown,
+            tabIndex: -1,
+            disabled: internallyDisabledDrilldown || preventDrilldown === true,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ jsx(
+              StyledDrilldownIcon,
+              {
+                width: "1.538rem",
+                height: "1.538rem",
+                getOwnerProps,
+                getOwnerPropsArguments
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(StyledItemActionWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(
+          StyledButton,
+          {
+            buttonType: "icon",
+            "aria-label": moveAriaLabel,
+            onClick: handleClickSingleMove,
+            onKeyDown: handleKeyDownSelectionBubbleUp,
+            size: BUTTON_SIZES.S,
+            innerRef: innerRefHandlerMove,
+            tabIndex: -1,
+            disabled: internallyDisabledMove || hydratedPreventMove === true,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isDestinationPanel ? /* @__PURE__ */ jsx(
+              StyledCloseMediumIcon,
+              {
+                width: "1.538rem",
+                height: "1.538rem",
+                getOwnerProps,
+                getOwnerPropsArguments
+              }
+            ) : /* @__PURE__ */ jsx(
+              StyledArrowShortRightIcon,
+              {
+                width: "1.538rem",
+                height: "1.538rem",
+                getOwnerProps,
+                getOwnerPropsArguments
+              }
+            )
+          }
+        ) })
+      ] }) : (
+        // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx("div", {})
+        ] })
+      )
+    }
+  );
+});
+export {
+  ItemActions
+};
+//# sourceMappingURL=ItemActions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/ItemActions.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-legacy-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-legacy-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n  height: 1.692rem !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const {\n    datumHydratables,\n    isDestinationPanel,\n    datumRenderFlags,\n    datumInternalMeta: { hydratedPreventMove },\n  } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, label } = datumHydratables;\n  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n  const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n  const moveAriaLabel = useMemo(\n    () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n    [label, isDestinationPanel],\n  );\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <StyledItemActions\n      cols={actionsCols}\n      gutter=\"xxs\"\n      pl=\"xs\"\n      pr=\"xxs\"\n      alignItems=\"center\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={drillDownAriaLabel}\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledDrilldown || preventDrilldown === true}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <StyledDrilldownIcon\n                width=\"1.538rem\"\n                height=\"1.538rem\"\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={moveAriaLabel}\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledMove || hydratedPreventMove === true}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArguments}\n                />\n              ) : (\n                <StyledArrowShortRightIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArguments}\n                />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+export * from "./ItemActions.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ItemActions.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "names": []
+}

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import React2 from "react";
+import { useActionsLogicHandlers } from "./useActionsLogicHandlers.js";
+const useActionsHandlers = (itemMeta) => {
+  const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = useActionsLogicHandlers(itemMeta);
+  const handleClickDrilldown = React2.useCallback(handleDrilldown, [handleDrilldown]);
+  const handleClickSingleMove = React2.useCallback(handleSingleMove, [handleSingleMove]);
+  const handleKeyDownSelectionBubbleUp = React2.useCallback(
+    preventKeyDownSelectionBubbleUp,
+    [preventKeyDownSelectionBubbleUp]
+  );
+  return React2.useMemo(
+    () => ({
+      handleClickDrilldown,
+      handleClickSingleMove,
+      handleKeyDownSelectionBubbleUp
+    }),
+    [handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp]
+  );
+};
+export {
+  useActionsHandlers
+};
+//# sourceMappingURL=useActionsHandlers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/useActionsHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DSButtonT } from '@elliemae/ds-legacy-button-v2';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsLogicHandlers } from './useActionsLogicHandlers.js';\n\nexport const useActionsHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = useActionsLogicHandlers(itemMeta);\n  const handleClickDrilldown: DSButtonT.Props['onClick'] = React.useCallback(handleDrilldown, [handleDrilldown]);\n  const handleClickSingleMove: DSButtonT.Props['onClick'] = React.useCallback(handleSingleMove, [handleSingleMove]);\n  const handleKeyDownSelectionBubbleUp: DSButtonT.Props['onKeyDown'] = React.useCallback(\n    preventKeyDownSelectionBubbleUp,\n    [preventKeyDownSelectionBubbleUp],\n  );\n  return React.useMemo(\n    () => ({\n      handleClickDrilldown,\n      handleClickSingleMove,\n      handleKeyDownSelectionBubbleUp,\n    }),\n    [handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,kBAAkB,gCAAgC,IAAI,wBAAwB,QAAQ;AAC/G,QAAM,uBAAmDA,OAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoDA,OAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAChH,QAAM,iCAA+DA,OAAM;AAAA,IACzE;AAAA,IACA,CAAC,+BAA+B;AAAA,EAClC;AACA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,uBAAuB,8BAA8B;AAAA,EAC9E;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import React2 from "react";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { useHandleMoveItem } from "../../../config/itemMovementHelpers.js";
+import { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from "../../../config/useFocusTracker/index.js";
+const useActionsLogicHandlers = (itemMeta) => {
+  const { datum, isDestinationPanel } = itemMeta;
+  const moveCurrentItem = useHandleMoveItem(itemMeta);
+  const { trackFocusItemReset } = useFocusItemTracker();
+  const { trackFocusActionReset } = useFocusActionTrackers();
+  const { trackFocusRegionPanel } = useFocusTracker();
+  const currDrilldown = usePropsStore(
+    (state) => isDestinationPanel ? state.onDestinationDrilldown : state.onSourceDrilldown
+  );
+  const handleDrilldown = React2.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      currDrilldown(datum, { event });
+      trackFocusRegionPanel(isDestinationPanel);
+      trackFocusItemReset();
+      trackFocusActionReset();
+    },
+    [currDrilldown, datum, isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
+  );
+  const handleSingleMove = React2.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      moveCurrentItem(event);
+      trackFocusRegionPanel(isDestinationPanel);
+      trackFocusItemReset();
+      trackFocusActionReset();
+    },
+    [isDestinationPanel, moveCurrentItem, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
+  );
+  const preventKeyDownSelectionBubbleUp = React2.useCallback((event) => {
+    const { key } = event;
+    if (["Spacebar", " ", "Enter"].includes(key)) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, []);
+  return React2.useMemo(
+    () => ({ handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp }),
+    [handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp]
+  );
+};
+export {
+  useActionsLogicHandlers
+};
+//# sourceMappingURL=useActionsLogicHandlers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/useActionsLogicHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { useHandleMoveItem } from '../../../config/itemMovementHelpers.js';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from '../../../config/useFocusTracker/index.js';\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB,wBAAwB,uBAAuB;AAEtE,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,OAAO,mBAAmB,IAAI;AACtC,QAAM,kBAAkB,kBAAkB,QAAQ;AAClD,QAAM,EAAE,oBAAoB,IAAI,oBAAoB;AACpD,QAAM,EAAE,sBAAsB,IAAI,uBAAuB;AACzD,QAAM,EAAE,sBAAsB,IAAI,gBAAgB;AAElD,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,kBAAkBA,OAAM;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,mBAAmBA,OAAM;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,kCAAkCA,OAAM,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,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,iBAAiB,kBAAkB,gCAAgC;AAAA,IAC5E,CAAC,iBAAiB,kBAAkB,+BAA+B;AAAA,EACrE;AACF;",
+  "names": ["React"]
+}