@elliemae/ds-shuttle-v2 3.16.0-next.2 → 3.16.0-next.21

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalUseSortable.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYZ;AAXX,8BAA4B;AAKrB,MAAM,6BAA4F,CAAC,cACxG,SAAU,OAAO;AACf,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,yBAAqB,qCAAY,EAAE,IAAI,WAAW,CAAC;AAEzD,SAAO,4CAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
+  "sourcesContent": ["import React from 'react';\nimport { useSortable } from '@elliemae/ds-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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYZ;AAXX,8BAA4B;AAKrB,MAAM,6BAA4F,CAAC,cACxG,SAAU,OAAO;AACf,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,yBAAqB,qCAAY,EAAE,IAAI,WAAW,CAAC;AAEzD,SAAO,4CAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
   "names": []
 }

package/dist/cjs/parts/Item/Item.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -32,22 +36,23 @@ module.exports = __toCommonJS(Item_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
 var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
-var import_useStore = require("../../config/useStore");
-var import_ItemSelection = require("./ItemSelection");
-var import_ItemActions = require("./ItemActions");
-var import_ItemMiddleSection = require("./ItemMiddleSection");
-var import_useSelectionLogic = require("./useSelectionLogic");
-var import_useItemArrowNavigation = require("./useItemArrowNavigation");
-var import_constants = require("../../constants");
-var import_DndHandle = require("../Dnd/DndHandle");
-var import_DropIndicator = require("../Dnd/DropIndicator");
-var import_withConditionalUseSortable = require("../HoC/withConditionalUseSortable");
-var import_useInnerRefHandlers = require("./ItemActions/useInnerRefHandlers");
-var import_useItemKeyboardSelection = require("./useItemKeyboardSelection");
+var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions.js");
+var import_useStore = require("../../config/useStore/index.js");
+var import_ItemSelection = require("./ItemSelection.js");
+var import_ItemActions = require("./ItemActions/index.js");
+var import_ItemMiddleSection = require("./ItemMiddleSection.js");
+var import_useSelectionLogic = require("./useSelectionLogic.js");
+var import_useItemArrowNavigation = require("./useItemArrowNavigation.js");
+var import_constants = require("../../constants/index.js");
+var import_DndHandle = require("../Dnd/DndHandle.js");
+var import_DropIndicator = require("../Dnd/DropIndicator.js");
+var import_withConditionalUseSortable = require("../HoC/withConditionalUseSortable.js");
+var import_useInnerRefHandlers = require("./ItemActions/useInnerRefHandlers.js");
+var import_useItemKeyboardSelection = require("./useItemKeyboardSelection.js");
+var import_useThisItemIsFocused = require("./useThisItemIsFocused.js");
 const cssDisabled = import_ds_system.css`
   background-color: ${({ theme }) => theme.colors.neutral["100"]};
   color: ${({ theme }) => theme.colors.neutral["300"]};
@@ -79,34 +84,30 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: im
 
   ${({ isDragging }) => isDragging && cssDisabled}
 `;
-const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
+const useInnerRefHandlers = (itemMeta) => {
+  const { datumInternalMeta, isDestinationPanel } = itemMeta;
   const { hydratedId } = datumInternalMeta;
   const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
-  const getShouldFocusItemOnRender = (0, import_useStore.useInternalStore)((state) => state.getShouldFocusItemOnRender);
-  const setShouldFocusItemOnRender = (0, import_useStore.useInternalStore)((state) => state.setShouldFocusItemOnRender);
-  const getFocusRegion = (0, import_useStore.useInternalStore)((state) => state.getFocusRegion);
-  const getFocusItem = (0, import_useStore.useInternalStore)((state) => state.getFocusItem);
-  const getFocusItemAction = (0, import_useStore.useInternalStore)((state) => state.getFocusItemAction);
+  const setDeferFocusUntilFirstRender = (0, import_useStore.useInternalStore)((state) => state.setDeferFocusUntilFirstRender);
+  const getDeferFocusUntilFirstRender = (0, import_useStore.useInternalStore)((state) => state.getDeferFocusUntilFirstRender);
+  const thisItemIsFocused = (0, import_useThisItemIsFocused.useThisItemIsFocused)(itemMeta);
   const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
   const currItemId = hydratedId;
   const innerRefHandlerParentItem = import_react.default.useCallback(
     (node) => {
       setZustandRef([currRegion, currItemId, "parent"], node);
-      const shouldThisItemHaveFocus = currRegion === getFocusRegion() && currItemId === getFocusItem() && "parent" === getFocusItemAction();
-      if (getShouldFocusItemOnRender() && shouldThisItemHaveFocus && node) {
+      if (getDeferFocusUntilFirstRender() && thisItemIsFocused && node) {
         node?.focus();
-        setShouldFocusItemOnRender(false);
+        setDeferFocusUntilFirstRender(false);
       }
     },
     [
-      currItemId,
+      setZustandRef,
       currRegion,
-      getFocusItem,
-      getFocusItemAction,
-      getFocusRegion,
-      getShouldFocusItemOnRender,
-      setShouldFocusItemOnRender,
-      setZustandRef
+      currItemId,
+      getDeferFocusUntilFirstRender,
+      thisItemIsFocused,
+      setDeferFocusUntilFirstRender
     ]
   );
   return import_react.default.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);
@@ -149,6 +150,9 @@ const Item = import_react.default.memo((itemMeta) => {
   const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;
   const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {
   });
+  const thisItemIsFocused = (0, import_useThisItemIsFocused.useThisItemIsFocused)(itemMeta);
+  const config = import_react.default.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);
+  const tooltipHelpers = (0, import_ds_utilities.useHeadlessTooltip)(config);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ItemWrapper,
     {
@@ -160,6 +164,12 @@ const Item = import_react.default.memo((itemMeta) => {
       ref: (0, import_ds_utilities.mergeRefs)(innerRefHandlerParentItem, sortableRef),
       onKeyDown: handleItemKeyDown,
       onMouseDown: onShiftMouseDownPreventTextSelection,
+      onMouseEnter: tooltipHelpers.onMouseEnter,
+      onMouseLeave: tooltipHelpers.onMouseLeave,
+      onPointerEnter: tooltipHelpers.onMouseEnter,
+      onPointerLeave: tooltipHelpers.onMouseLeave,
+      onFocus: tooltipHelpers.onFocus,
+      onBlur: tooltipHelpers.onBlur,
       tabIndex: -1,
       role: "option",
       "aria-checked": isSelected,
@@ -177,7 +187,7 @@ const Item = import_react.default.memo((itemMeta) => {
             disabled: hasMultipleSelection
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemMiddleSection.ItemMiddleSection, { ...itemMeta }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemMiddleSection.ItemMiddleSection, { ...itemMeta, tooltipHelpers }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemActions.ItemActions, { ...itemMeta }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropIndicator.DropIndicator, { vertical: false, dropIndicatorPosition: showDropIndicatorPosition, isDropValid })
       ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/Item.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\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\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: 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  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { hydratedId } = datumInternalMeta;\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const getShouldFocusItemOnRender = useInternalStore((state) => state.getShouldFocusItemOnRender);\n  const setShouldFocusItemOnRender = useInternalStore((state) => state.setShouldFocusItemOnRender);\n  const getFocusRegion = useInternalStore((state) => state.getFocusRegion);\n  const getFocusItem = useInternalStore((state) => state.getFocusItem);\n  const getFocusItemAction = useInternalStore((state) => state.getFocusItemAction);\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      // This is the only place we should do this check + focus\n      // See focusAndTabIndexManager for more info -- TLDR: virtualization + focus is a pain\n      const shouldThisItemHaveFocus =\n        currRegion === getFocusRegion() && currItemId === getFocusItem() && 'parent' === getFocusItemAction();\n\n      if (getShouldFocusItemOnRender() && shouldThisItemHaveFocus && node) {\n        node?.focus();\n        setShouldFocusItemOnRender(false);\n      }\n    },\n    [\n      currItemId,\n      currRegion,\n      getFocusItem,\n      getFocusItemAction,\n      getFocusRegion,\n      getShouldFocusItemOnRender,\n      setShouldFocusItemOnRender,\n      setZustandRef,\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 } = 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  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={mergeRefs(innerRefHandlerParentItem, sortableRef)}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n      role=\"option\"\n      aria-checked={isSelected}\n      id={`${hydratedId}-wrapper`}\n    >\n      <ItemSelection {...itemMeta} />\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} />\n      <ItemActions {...itemMeta} />\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { useHeadlessTooltip, mergeRefs } from '@elliemae/ds-utilities';\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { useInternalStore } 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\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: 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  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\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 } = 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  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={mergeRefs(innerRefHandlerParentItem, sortableRef)}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      onMouseEnter={tooltipHelpers.onMouseEnter}\n      onMouseLeave={tooltipHelpers.onMouseLeave}\n      onPointerEnter={tooltipHelpers.onMouseEnter}\n      onPointerLeave={tooltipHelpers.onMouseLeave}\n      onFocus={tooltipHelpers.onFocus}\n      onBlur={tooltipHelpers.onBlur}\n      tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n      role=\"option\"\n      aria-checked={isSelected}\n      id={`${hydratedId}-wrapper`}\n    >\n      <ItemSelection {...itemMeta} />\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      <ItemActions {...itemMeta} />\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React", "useInnerRefActionHandlers"]
 }

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -34,9 +38,9 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_useActionsHandlers = require("./useActionsHandlers");
-var import_useInnerRefHandlers = require("./useInnerRefHandlers");
-var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions");
+var import_useActionsHandlers = require("./useActionsHandlers.js");
+var import_useInnerRefHandlers = require("./useInnerRefHandlers.js");
+var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
 const StyledItemActions = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
 const StyledItemActionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
 const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ACTION_BTN })`
@@ -106,9 +110,12 @@ const ItemActions = import_react.default.memo((itemMeta) => {
         children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, { width: "1.538rem", height: "1.538rem" })
       }
     ) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
-  ] }) });
+  ] }) : (
+    // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
+    ] })
+  ) });
 });
 //# sourceMappingURL=ItemActions.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/ItemActions.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\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  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\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            >\n              <StyledDrilldownIcon width=\"1.538rem\" height=\"1.538rem\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\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            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"1.538rem\" height=\"1.538rem\" />\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDf;AAzDR,mBAA+B;AAC/B,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAC7G,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAClH,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,oBAAoB;AAAA,EAC3C,IAAI;AAEJ,QAAM,EAAE,aAAa,6BAA6B,uBAAuB,IAAI;AAC7E,QAAM,EAAE,kBAAkB,MAAM,IAAI;AACpC,QAAM,EAAE,0BAA0B,oBAAoB,QAAI,gDAAoB,QAAQ;AACtF,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,QAAI,8CAAmB,QAAQ;AACnH,QAAM,yBAAqB,sBAAQ,MAAM,kBAAkB,gBAAgB,CAAC,KAAK,CAAC;AAClF,QAAM,oBAAgB;AAAA,IACpB,MAAM,eAAe,cAAc,qBAAqB,WAAW;AAAA,IACnE,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,SACE,4CAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,4EACE;AAAA,gDAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,sDAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,4CAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,0BAA0B,wBAAwB;AAAA,QAE3D,+BACC,4CAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,4CAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF,IAGA,4EACE;AAAA,gDAAC,SAAI;AAAA,IACL,4CAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-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';\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  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\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            >\n              <StyledDrilldownIcon width=\"1.538rem\" height=\"1.538rem\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\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            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"1.538rem\" height=\"1.538rem\" />\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDf;AAzDR,mBAA+B;AAC/B,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAC7G,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAClH,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,oBAAoB;AAAA,EAC3C,IAAI;AAEJ,QAAM,EAAE,aAAa,6BAA6B,uBAAuB,IAAI;AAC7E,QAAM,EAAE,kBAAkB,MAAM,IAAI;AACpC,QAAM,EAAE,0BAA0B,oBAAoB,QAAI,gDAAoB,QAAQ;AACtF,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,QAAI,8CAAmB,QAAQ;AACnH,QAAM,yBAAqB,sBAAQ,MAAM,kBAAkB,gBAAgB,CAAC,KAAK,CAAC;AAClF,QAAM,oBAAgB;AAAA,IACpB,MAAM,eAAe,cAAc,qBAAqB,WAAW;AAAA,IACnE,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,SACE,4CAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,4EACE;AAAA,gDAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,sDAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,4CAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,0BAA0B,wBAAwB;AAAA,QAE3D,+BACC,4CAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,4CAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF;AAAA;AAAA,IAGA,4EACE;AAAA,kDAAC,SAAI;AAAA,MACL,4CAAC,SAAI;AAAA,OACP;AAAA,KAEJ;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -15,6 +15,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -22,5 +26,5 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var ItemActions_exports = {};
 module.exports = __toCommonJS(ItemActions_exports);
 var React = __toESM(require("react"));
-__reExport(ItemActions_exports, require("./ItemActions"), module.exports);
+__reExport(ItemActions_exports, require("./ItemActions.js"), module.exports);
 //# sourceMappingURL=index.js.map

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

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

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,7 +33,7 @@ __export(useActionsHandlers_exports, {
 module.exports = __toCommonJS(useActionsHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_useActionsLogicHandlers = require("./useActionsLogicHandlers");
+var import_useActionsLogicHandlers = require("./useActionsLogicHandlers.js");
 const useActionsHandlers = (itemMeta) => {
   const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = (0, import_useActionsLogicHandlers.useActionsLogicHandlers)(itemMeta);
   const handleClickDrilldown = import_react.default.useCallback(handleDrilldown, [handleDrilldown]);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/useActionsHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsLogicHandlers } from './useActionsLogicHandlers';\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,qCAAwC;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,kBAAkB,gCAAgC,QAAI,wDAAwB,QAAQ;AAC/G,QAAM,uBAAmD,aAAAA,QAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoD,aAAAA,QAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAChH,QAAM,iCAA+D,aAAAA,QAAM;AAAA,IACzE;AAAA,IACA,CAAC,+BAA+B;AAAA,EAClC;AACA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,uBAAuB,8BAA8B;AAAA,EAC9E;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { type DSButtonT } from '@elliemae/ds-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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,qCAAwC;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,kBAAkB,gCAAgC,QAAI,wDAAwB,QAAQ;AAC/G,QAAM,uBAAmD,aAAAA,QAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoD,aAAAA,QAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAChH,QAAM,iCAA+D,aAAAA,QAAM;AAAA,IACzE;AAAA,IACA,CAAC,+BAA+B;AAAA,EAClC;AACA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,uBAAuB,8BAA8B;AAAA,EAC9E;AACF;",
   "names": ["React"]
 }

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,9 +33,9 @@ __export(useActionsLogicHandlers_exports, {
 module.exports = __toCommonJS(useActionsLogicHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_useStore = require("../../../config/useStore");
-var import_itemMovementHelpers = require("../../../config/itemMovementHelpers");
-var import_useFocusTracker = require("../../../config/useFocusTracker");
+var import_useStore = require("../../../config/useStore/index.js");
+var import_itemMovementHelpers = require("../../../config/itemMovementHelpers.js");
+var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
 const useActionsLogicHandlers = (itemMeta) => {
   const { datum, isDestinationPanel } = itemMeta;
   const moveCurrentItem = (0, import_itemMovementHelpers.useHandleMoveItem)(itemMeta);

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

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

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,8 +33,8 @@ __export(useInnerRefHandlers_exports, {
 module.exports = __toCommonJS(useInnerRefHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_useStore = require("../../../config/useStore");
-var import_constants = require("../../../constants");
+var import_useStore = require("../../../config/useStore/index.js");
+var import_constants = require("../../../constants/index.js");
 const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
   const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/useInnerRefHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInternalStore } from '../../../config/useStore';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES } from '../../../constants';\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAAiC;AACjC,uBAAiD;AAE1C,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,mBAAmB,MAA6B;AACvG,QAAM,oBAAgB,kCAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,kBAAkB;AACrC,QAAM,2BAA2B,aAAAA,QAAM;AAAA,IACrC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,aAAa,GAAG,IAAI;AAAA,IAC7E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,QAAQ,GAAG,IAAI;AAAA,IACxE;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,SAAgC;AAC/B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,WAAW,GAAG,IAAI;AAAA,IAC3E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,0BAA0B,oBAAoB,mBAAmB;AAAA,EACpE;AACF;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAAiC;AACjC,uBAAiD;AAE1C,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,mBAAmB,MAA6B;AACvG,QAAM,oBAAgB,kCAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,kBAAkB;AACrC,QAAM,2BAA2B,aAAAA,QAAM;AAAA,IACrC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,aAAa,GAAG,IAAI;AAAA,IAC7E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,QAAQ,GAAG,IAAI;AAAA,IACxE;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,SAAgC;AAC/B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,WAAW,GAAG,IAAI;AAAA,IAC3E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,0BAA0B,oBAAoB,mBAAmB;AAAA,EACpE;AACF;",
   "names": ["React"]
 }

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -32,8 +36,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
-var import_TextSection = require("./TextSection");
+var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions.js");
+var import_TextSection = require("./TextSection.js");
+var import_useThisItemIsFocused = require("./useThisItemIsFocused.js");
 const IconWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_ICON_WRAPPER })`
   min-height: 1rem;
 `;
@@ -55,33 +60,48 @@ const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, {
 `;
 const customMidSectionCols = ["1fr"];
 const customMidSectionRows = ["1fr"];
-const ItemMiddleSection = import_react.default.memo((itemMeta) => {
-  const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;
-  const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;
-  const { softDeleted, hydratedId } = datumInternalMeta;
-  const customComponentProps = import_react.default.useMemo(
-    () => ({
-      datum,
-      panelMetaInfo: { isDestinationPanel, hasMultipleSelection },
-      datumInternalMeta,
-      datumHydratables: { ...componentlessHydratables, id: hydratedId }
-    }),
-    [componentlessHydratables, datum, datumInternalMeta, hasMultipleSelection, hydratedId, isDestinationPanel]
-  );
-  const cols = import_react.default.useMemo(() => {
+const ItemMiddleSection = import_react.default.memo(
+  (props) => {
+    const { tooltipHelpers, ...itemMeta } = props;
+    const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;
+    const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;
+    const { softDeleted, hydratedId } = datumInternalMeta;
+    const thisItemIsFocused = (0, import_useThisItemIsFocused.useThisItemIsFocused)(itemMeta);
+    const customComponentProps = import_react.default.useMemo(
+      () => ({
+        datum,
+        tooltipHelpers,
+        thisItemIsFocused,
+        panelMetaInfo: { isDestinationPanel, hasMultipleSelection },
+        datumInternalMeta,
+        datumHydratables: { ...componentlessHydratables, id: hydratedId }
+      }),
+      [
+        componentlessHydratables,
+        datum,
+        datumInternalMeta,
+        hasMultipleSelection,
+        hydratedId,
+        isDestinationPanel,
+        thisItemIsFocused,
+        tooltipHelpers
+      ]
+    );
+    const cols = import_react.default.useMemo(() => {
+      if (CustomRenderer)
+        return [];
+      const dynamicCols = [];
+      if (Icon)
+        dynamicCols.push("auto");
+      dynamicCols.push("1fr");
+      return dynamicCols;
+    }, [CustomRenderer, Icon]);
     if (CustomRenderer)
-      return [];
-    const dynamicCols = [];
-    if (Icon)
-      dynamicCols.push("auto");
-    dynamicCols.push("1fr");
-    return dynamicCols;
-  }, [CustomRenderer, Icon]);
-  if (CustomRenderer)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MidSection, { cols: customMidSectionCols, rows: customMidSectionRows, $softDeleted: Boolean(softDeleted), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomRenderer, { ...customComponentProps }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MidSection, { cols, alignItems: "center", ml: "xxs", $softDeleted: Boolean(softDeleted), children: [
-    Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { alignItems: "center", mr: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...customComponentProps }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextSection.TextSection, { ...itemMeta })
-  ] });
-});
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MidSection, { cols: customMidSectionCols, rows: customMidSectionRows, $softDeleted: Boolean(softDeleted), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomRenderer, { ...customComponentProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MidSection, { cols, alignItems: "center", ml: "xxs", $softDeleted: Boolean(softDeleted), children: [
+      Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { alignItems: "center", mr: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...customComponentProps }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextSection.TextSection, { ...itemMeta })
+    ] });
+  }
+);
 //# sourceMappingURL=ItemMiddleSection.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/ItemMiddleSection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { TextSection } from './TextSection';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n  const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n  const { softDeleted, hydratedId } = datumInternalMeta;\n  const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n    () => ({\n      datum,\n      panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n      datumInternalMeta,\n      datumHydratables: { ...componentlessHydratables, id: hydratedId },\n    }),\n    [componentlessHydratables, datum, datumInternalMeta, hasMultipleSelection, hydratedId, isDestinationPanel],\n  );\n  const cols = React.useMemo(() => {\n    // if CustomRenderer is defined, shortcircuit\n    if (CustomRenderer) return [];\n    const dynamicCols = [];\n    if (Icon) dynamicCols.push('auto');\n    dynamicCols.push('1fr');\n    return dynamicCols;\n  }, [CustomRenderer, Icon]);\n\n  if (CustomRenderer)\n    return (\n      <MidSection cols={customMidSectionCols} rows={customMidSectionRows} $softDeleted={Boolean(softDeleted)}>\n        <CustomRenderer {...customComponentProps} />\n      </MidSection>\n    );\n\n  return (\n    <MidSection cols={cols} alignItems=\"center\" ml=\"xxs\" $softDeleted={Boolean(softDeleted)}>\n      {Icon ? (\n        <IconWrapper alignItems=\"center\" mr=\"xxs\">\n          <Icon {...customComponentProps} />\n        </IconWrapper>\n      ) : null}\n      <TextSection {...itemMeta} />\n    </MidSection>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDf;AAvDR,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAClD,yBAA4B;AAE5B,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,iBAAa,yBAAO,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE1B,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGvC,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoB,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAC/E,QAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,QAAM,EAAE,MAAM,mBAAmB,yBAAyB,IAAI;AAC9D,QAAM,EAAE,aAAa,WAAW,IAAI;AACpC,QAAM,uBAAuB,aAAAA,QAAM;AAAA,IACjC,OAAO;AAAA,MACL;AAAA,MACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,MAC1D;AAAA,MACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,IAClE;AAAA,IACA,CAAC,0BAA0B,OAAO,mBAAmB,sBAAsB,YAAY,kBAAkB;AAAA,EAC3G;AACA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAE/B,QAAI;AAAgB,aAAO,CAAC;AAC5B,UAAM,cAAc,CAAC;AACrB,QAAI;AAAM,kBAAY,KAAK,MAAM;AACjC,gBAAY,KAAK,KAAK;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,MAAI;AACF,WACE,4CAAC,cAAW,MAAM,sBAAsB,MAAM,sBAAsB,cAAc,QAAQ,WAAW,GACnG,sDAAC,kBAAgB,GAAG,sBAAsB,GAC5C;AAGJ,SACE,6CAAC,cAAW,MAAY,YAAW,UAAS,IAAG,OAAM,cAAc,QAAQ,WAAW,GACnF;AAAA,WACC,4CAAC,eAAY,YAAW,UAAS,IAAG,OAClC,sDAAC,QAAM,GAAG,sBAAsB,GAClC,IACE;AAAA,IACJ,4CAAC,kCAAa,GAAG,UAAU;AAAA,KAC7B;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n  (props: DSShuttleV2T.ItemMeta & { tooltipHelpers: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n    const { tooltipHelpers, ...itemMeta } = props;\n    const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n    const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n    const { softDeleted, hydratedId } = datumInternalMeta;\n    const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n    const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n      () => ({\n        datum,\n        tooltipHelpers,\n        thisItemIsFocused,\n        panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n        datumInternalMeta,\n        datumHydratables: { ...componentlessHydratables, id: hydratedId },\n      }),\n      [\n        componentlessHydratables,\n        datum,\n        datumInternalMeta,\n        hasMultipleSelection,\n        hydratedId,\n        isDestinationPanel,\n        thisItemIsFocused,\n        tooltipHelpers,\n      ],\n    );\n    const cols = React.useMemo(() => {\n      // if CustomRenderer is defined, shortcircuit\n      if (CustomRenderer) return [];\n      const dynamicCols = [];\n      if (Icon) dynamicCols.push('auto');\n      dynamicCols.push('1fr');\n      return dynamicCols;\n    }, [CustomRenderer, Icon]);\n\n    if (CustomRenderer)\n      return (\n        <MidSection cols={customMidSectionCols} rows={customMidSectionRows} $softDeleted={Boolean(softDeleted)}>\n          <CustomRenderer {...customComponentProps} />\n        </MidSection>\n      );\n\n    // if we ever need to do something for truncation and showing a tooltip in the future,\n    // check out what has been done in exported-related/ShuttleItem.tsx\n    // also, be aware that we have the headless logic alread inside tooltipHelpers\n    // when this comment has been written, the logic was working with keyboard and mouse as per tooltip-v3\n    // integrated with all the shuttle-v2 custom focus navigation\n    return (\n      <MidSection cols={cols} alignItems=\"center\" ml=\"xxs\" $softDeleted={Boolean(softDeleted)}>\n        {Icon ? (\n          <IconWrapper alignItems=\"center\" mr=\"xxs\">\n            <Icon {...customComponentProps} />\n          </IconWrapper>\n        ) : null}\n        <TextSection {...itemMeta} />\n      </MidSection>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEb;AAtEV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAClD,yBAA4B;AAC5B,kCAAqC;AAErC,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,iBAAa,yBAAO,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ,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,oBAAoB,aAAAA,QAAM;AAAA,EACrC,CAAC,UAAqG;AACpG,UAAM,EAAE,gBAAgB,GAAG,SAAS,IAAI;AACxC,UAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,UAAM,EAAE,MAAM,gBAAgB,GAAG,yBAAyB,IAAI;AAC9D,UAAM,EAAE,aAAa,WAAW,IAAI;AACpC,UAAM,wBAAoB,kDAAqB,QAAQ;AACvD,UAAM,uBAAuB,aAAAA,QAAM;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,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAE/B,UAAI;AAAgB,eAAO,CAAC;AAC5B,YAAM,cAAc,CAAC;AACrB,UAAI;AAAM,oBAAY,KAAK,MAAM;AACjC,kBAAY,KAAK,KAAK;AACtB,aAAO;AAAA,IACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,QAAI;AACF,aACE,4CAAC,cAAW,MAAM,sBAAsB,MAAM,sBAAsB,cAAc,QAAQ,WAAW,GACnG,sDAAC,kBAAgB,GAAG,sBAAsB,GAC5C;AAQJ,WACE,6CAAC,cAAW,MAAY,YAAW,UAAS,IAAG,OAAM,cAAc,QAAQ,WAAW,GACnF;AAAA,aACC,4CAAC,eAAY,YAAW,UAAS,IAAG,OAClC,sDAAC,QAAM,GAAG,sBAAsB,GAClC,IACE;AAAA,MACJ,4CAAC,kCAAa,GAAG,UAAU;AAAA,OAC7B;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }