npm - @elliemae/ds-shuttle-v2 - Versions diffs - 3.16.0-next.2 → 3.16.0-next.21 - Mend

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

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

Files changed (282) hide show

package/dist/esm/parts/Dnd/DragOverlay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DragOverlay.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../constants';\nimport { StyledGripperButtonOrOverlay } from './DndHandle';\n\nexport const DragOverlay: React.ComponentType<{\n  id: string;\n  isDndActive: boolean;\n  isDragging: boolean;\n}> = ({ id, isDragging, isDndActive }) => (\n  <StyledGripperButtonOrOverlay\n    isDragOverlay\n    isActive={isDndActive}\n    tabIndex={-1}\n    data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n    id={`${id}-drag-overlay`}\n    key={`${id}-drag-overlay`}\n  >\n    <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n  </StyledGripperButtonOrOverlay>\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../constants/index.js';\nimport { StyledGripperButtonOrOverlay } from './DndHandle.js';\n\nexport const DragOverlay: React.ComponentType<{\n  id: string;\n  isDndActive: boolean;\n  isDragging: boolean;\n}> = ({ id, isDragging, isDndActive }) => (\n  <StyledGripperButtonOrOverlay\n    isDragOverlay\n    isActive={isDndActive}\n    tabIndex={-1}\n    data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n    id={`${id}-drag-overlay`}\n    key={`${id}-drag-overlay`}\n  >\n    <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n  </StyledGripperButtonOrOverlay>\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACkBnB;AAjBJ,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oCAAoC;AAEtC,MAAM,cAIR,CAAC,EAAE,IAAI,YAAY,YAAY,MAClC;AAAA,EAAC;AAAA;AAAA,IACC,eAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IAGP,8BAAC,mBAAgB,MAAK,KAAI,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,EAFxF,GAAG;AAGV;",
   "names": []
 }

package/dist/esm/parts/Dnd/DropIndicator.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DropIndicator.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nenum DropIndicatorPosition {\n  None = 0,\n  Before = 1,\n  After = 2,\n}\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: false | DropIndicatorPosition;\n  isDropValid: boolean;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  if (\n    dropIndicatorPosition === false ||\n    ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)\n  ) {\n    return null;\n  }\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator\n        vertical={vertical}\n        dropIndicatorPosition={safeDropIndicatorPosition}\n        isDropValid={isDropValid}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\nexport default DropIndicator;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiDnB,SAeA,UAfA,KAeA,YAfA;AAhDJ,SAAS,cAAc;AAEvB,IAAK,wBAAL,kBAAKA,2BAAL;AACE,EAAAA,8CAAA,UAAO,KAAP;AACA,EAAAA,8CAAA,YAAS,KAAT;AACA,EAAAA,8CAAA,WAAQ,KAAR;AAHG,SAAAA;AAAA,GAAA;AAaL,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,iBAA+B,MAAM;AAAA,eAC9D,0BAA0B,gBAA8B,MAAM;AAAA;AAAA,EAE3E;AACA,SAAO;AAAA,aACI,0BAA0B,iBAA+B,MAAM;AAAA,gBAC5D,0BAA0B,gBAA8B,MAAM;AAAA;AAE9E;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,KAAK,YAAY,0BAA0B,gBAA8B,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,iBAA+B,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,gBAA8B,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,iBAA+B,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA;AAG/G,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,8BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,MACE,0BAA0B,SAC1B,CAAC,CAAC,eAA6B,cAA4B,EAAE,SAAS,qBAAqB,GAC3F;AACA,WAAO;AAAA,EACT;AAEA,QAAM,4BAA4B,SAAS,iBAA+B;AAC1E,SACE,iCACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,wBAAQ;",
+  "mappings": "AAAA,YAAY,WAAW;ACiDnB,SAeA,UAfA,KAeA,YAfA;AAhDJ,SAAS,cAAc;AAEvB,IAAK,wBAAL,kBAAKA,2BAAL;AACE,EAAAA,8CAAA,UAAO,KAAP;AACA,EAAAA,8CAAA,YAAS,KAAT;AACA,EAAAA,8CAAA,WAAQ,KAAR;AAHG,SAAAA;AAAA,GAAA;AAaL,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,iBAA+B,MAAM;AAAA,eAC9D,0BAA0B,gBAA8B,MAAM;AAAA;AAAA,EAE3E;AACA,SAAO;AAAA,aACI,0BAA0B,iBAA+B,MAAM;AAAA,gBAC5D,0BAA0B,gBAA8B,MAAM;AAAA;AAE9E;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,KAAK,YAAY,0BAA0B,gBAA8B,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,iBAA+B,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,gBAA8B,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,iBAA+B,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG;AAAA;AAGlH,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,8BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,MACE,0BAA0B,SAC1B,CAAC,CAAC,eAA6B,cAA4B,EAAE,SAAS,qBAAqB,GAC3F;AACA,WAAO;AAAA,EACT;AAEA,QAAM,4BAA4B,SAAS,iBAA+B;AAC1E,SACE,iCACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,wBAAQ;",
   "names": ["DropIndicatorPosition"]
 }

package/dist/esm/parts/Header.js CHANGED Viewed

@@ -7,9 +7,9 @@ import {
   DSButtonV2
 } from "@elliemae/ds-button-v2";
 import { styled } from "@elliemae/ds-system";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions";
-import { usePropsStore } from "../config/useStore";
-import { useFocusTracker } from "../config/useFocusTracker";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../config/useStore/index.js";
+import { useFocusTracker } from "../config/useFocusTracker/index.js";
 const StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })``;
 const Header = React2.memo(({ isDestinationPanel }) => {
   const HeaderRenderer = usePropsStore((state) => isDestinationPanel ? state.DestinationHeader : state.SourceHeader);

package/dist/esm/parts/Header.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Header.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  DSButtonV2,\n  type DSButtonT,\n  // BUTTON_SIZES\n} from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\nimport { usePropsStore } from '../config/useStore';\nimport { useFocusTracker } from '../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../react-desc-prop-types';\n\nconst StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })``;\nexport const Header = React.memo(({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  const HeaderRenderer = usePropsStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const onSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n  );\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const { trackFocusRegionHeader, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const onHeaderFocus = React.useCallback(() => {\n    trackFocusRegionHeader(isDestinationPanel);\n    trackFocusItemReset();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionHeader]);\n\n  const handleFilterClick = React.useCallback(\n    (event: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onSearchBarOpen?.(!isSearchBarOpen, { event });\n    },\n    [isSearchBarOpen, onSearchBarOpen],\n  );\n\n  const cols = React.useMemo(() => {\n    const finalCols = ['1fr'];\n    if (onSearchBarOpen) finalCols.push('auto');\n    return finalCols;\n  }, [onSearchBarOpen]);\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer />\n      {onSearchBarOpen ? (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <StyledIconButton\n            aria-label={`Toggle ${isDestinationPanel ? 'destination' : 'source'} panel filter bar`}\n            buttonType=\"icon\"\n            onClick={handleFilterClick}\n            w={24}\n            h={24}\n          >\n            <Search width=\"1.077rem\" height=\"1.077rem\" />\n          </StyledIconButton>\n        </Grid>\n      ) : null}\n    </Grid>\n  );\n});\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  DSButtonV2,\n  type DSButtonT,\n  // BUTTON_SIZES\n} from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\n\nconst StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })``;\nexport const Header = React.memo(({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  const HeaderRenderer = usePropsStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const onSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n  );\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const { trackFocusRegionHeader, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const onHeaderFocus = React.useCallback(() => {\n    trackFocusRegionHeader(isDestinationPanel);\n    trackFocusItemReset();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionHeader]);\n\n  const handleFilterClick = React.useCallback(\n    (event: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onSearchBarOpen?.(!isSearchBarOpen, { event });\n    },\n    [isSearchBarOpen, onSearchBarOpen],\n  );\n\n  const cols = React.useMemo(() => {\n    const finalCols = ['1fr'];\n    if (onSearchBarOpen) finalCols.push('auto');\n    return finalCols;\n  }, [onSearchBarOpen]);\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer />\n      {onSearchBarOpen ? (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <StyledIconButton\n            aria-label={`Toggle ${isDestinationPanel ? 'destination' : 'source'} panel filter bar`}\n            buttonType=\"icon\"\n            onClick={handleFilterClick}\n            w={24}\n            h={24}\n          >\n            <Search width=\"1.077rem\" height=\"1.077rem\" />\n          </StyledIconButton>\n        </Grid>\n      ) : null}\n    </Grid>\n  );\n});\n"],
   "mappings": "AAAA,YAAY,WAAW;AC4CnB,SACE,KADF;AA5CJ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AACzG,MAAM,SAASA,OAAM,KAAK,CAAC,EAAE,mBAAmB,MAAkC;AACvF,QAAM,iBAAiB,cAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC/F,QAAM,gBAAgBA,OAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,UAA+D;AAC9D,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI;AAAiB,gBAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,qBAAC,QAAK,SAAS,eAAe,MAC5B;AAAA,wBAAC,kBAAe;AAAA,IACf,kBACC,oBAAC,QAAK,YAAW,UAAS,gBAAe,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,UAAU,qBAAqB,gBAAgB;AAAA,QAC3D,YAAW;AAAA,QACX,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QAEH,8BAAC,UAAO,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC7C,GACF,IACE;AAAA,KACN;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -3,8 +3,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React2, { useCallback, useEffect } from "react";
 import { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from "@elliemae/ds-drag-and-drop";
 import { createPortal } from "react-dom";
-import { useInternalStore, usePropsStore } from "../../config/useStore";
-import { ItemOverlay } from "../Item/ItemOverlay";
+import { useInternalStore, usePropsStore } from "../../config/useStore/index.js";
+import { ItemOverlay } from "../Item/ItemOverlay.js";
 const withConditionalDnDRowContext = (Component) => (props) => {
   const { isDestinationPanel } = props;
   const itemList = usePropsStore(
@@ -35,6 +35,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   );
   const treeConfig = React2.useMemo(() => {
     const configuredItemList = itemList.map((item, i) => ({
+      // dnd
       uid: item.hydratedId,
       depth: 0,
       parentId: null,

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

@@ -1,7 +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-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\n\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ItemOverlay } from '../Item/ItemOverlay';\n\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    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 {...sortableContextProps}>\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": "AAAA,YAAY,WAAW;ACwGb,SAIM,UAHJ,KADF;AApGV,OAAOA,UAAS,aAAa,iBAAiB;AAE9C,SAAS,YAAY,aAAa,iBAAiB,2BAA2B;AAC9E,SAAS,oBAAoB;AAE7B,SAAS,kBAAkB,qBAAqB;AAEhD,SAAS,mBAAmB;AAWrB,MAAM,+BACX,CAAC,cAAc,CAAC,UAAU;AACxB,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAc,CAAC,UAC9B,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,yBAAyB,iBAAiB,CAAC,UAAU,MAAM,sBAAsB;AACvF,QAAM,sBAAsB,iBAAiB,CAAC,UAAU,MAAM,mBAAmB;AACjF,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,qBAAqB,iBAAiB,CAAC,UAAU,MAAM,kBAAkB;AAC/E,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,2BAA2B,iBAAiB,CAAC,UAAU,MAAM,wBAAwB;AAE3F,QAAM,iBAAiB;AAAA,IAAc,CAAC,UACpC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,YAAgE;AAAA,IACpE,CAAC,WAAW,aAAa,aAAa;AAEpC,YAAM,EAAE,mBAAmB,MAAM,YAAY,QAAQ,IAAI;AACzD,YAAMC,QAAO,QAAQ,SAAS;AAC9B,YAAMC,UAAS,UAAU,SAAS;AAClC,YAAM,kBAAkB,EAAE,GAAG,SAAS,MAAAD,OAAM,QAAAC,SAAQ,YAAY;AAChE,qBAAeA,SAAQ,eAAe;AAAA,IACxC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,aAAaF,OAAM,QAAQ,MAAM;AACrC,UAAM,qBAAqB,SAAS,IAAI,CAAC,MAAM,OAAO;AAAA,MAEpD,KAAK,KAAK;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,eAAe;AAAA,MACf,UAAU;AAAA,IACZ,EAAE;AACF,WAAO;AAAA,MACL,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd;AAAA,MACA,qBAAqB;AAAA,MACrB,gBAAgB,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,SAAS,CAAC;AAExB,QAAM,EAAE,iBAAiB,sBAAsB,YAAY,QAAQ,MAAM,uBAAuB,YAAY,IAC1G,oBAAoB,UAAU;AAEhC,YAAU,MAAM;AACd,oBAAgB,QAAQ,IAAI,SAAS,KAAK,EAAE;AAC5C,cAAU,MAAM,IAAI,SAAS,KAAK,EAAE;AACpC,mBAAe,WAAW;AAC1B,uBAAmB,YAAY,YAAY,IAAI;AAC/C,6BAAyB,qBAAqB;AAC9C,QAAI,CAAC;AAAQ,6BAAuB,IAAI;AAAA,EAC1C,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACF,WACE,oBAAC,cAAY,GAAG,iBACd,+BAAC,mBAAiB,GAAG,sBACnB;AAAA,0BAAC,aAAW,GAAG,OAAO;AAAA,MACrB;AAAA,QACC,oBAAC,eAAY,OAAO,EAAE,OAAO,OAAO,GAClC,0CAAG,gCAAsB,oBAAC,eAAa,GAAG,qBAAqB,IAAK,MAAK,GAC3E;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF,GACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "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-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-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\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    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 {...sortableContextProps}>\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.map CHANGED Viewed

@@ -1,7 +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-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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "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 CHANGED Viewed

@@ -1,22 +1,23 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useMemo } from "react";
+import { useHeadlessTooltip, mergeRefs } from "@elliemae/ds-utilities";
 import { styled, css } from "@elliemae/ds-system";
-import { mergeRefs } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions";
-import { useInternalStore } from "../../config/useStore";
-import { ItemSelection } from "./ItemSelection";
-import { ItemActions } from "./ItemActions";
-import { ItemMiddleSection } from "./ItemMiddleSection";
-import { useSelectionLogic } from "./useSelectionLogic";
-import { useItemArrowNavigation } from "./useItemArrowNavigation";
-import { REGIONS_FOCUSES } from "../../constants";
-import { DragHandle } from "../Dnd/DndHandle";
-import { DropIndicator } from "../Dnd/DropIndicator";
-import { withConditionalUseSortable } from "../HoC/withConditionalUseSortable";
-import { useInnerRefHandlers as useInnerRefActionHandlers } from "./ItemActions/useInnerRefHandlers";
-import { useItemKeyboardSelection } from "./useItemKeyboardSelection";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { useInternalStore } 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"]};
@@ -48,34 +49,30 @@ const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots
   ${({ isDragging }) => isDragging && cssDisabled}
 `;
-const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
+const useInnerRefHandlers = (itemMeta) => {
+  const { datumInternalMeta, isDestinationPanel } = itemMeta;
   const { hydratedId } = datumInternalMeta;
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
-  const getShouldFocusItemOnRender = useInternalStore((state) => state.getShouldFocusItemOnRender);
-  const setShouldFocusItemOnRender = useInternalStore((state) => state.setShouldFocusItemOnRender);
-  const getFocusRegion = useInternalStore((state) => state.getFocusRegion);
-  const getFocusItem = useInternalStore((state) => state.getFocusItem);
-  const getFocusItemAction = useInternalStore((state) => state.getFocusItemAction);
+  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);
-      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 React2.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);
@@ -118,6 +115,9 @@ const Item = React2.memo((itemMeta) => {
   const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;
   const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {
   });
+  const thisItemIsFocused = useThisItemIsFocused(itemMeta);
+  const config = React2.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);
+  const tooltipHelpers = useHeadlessTooltip(config);
   return /* @__PURE__ */ jsxs(
     ItemWrapper,
     {
@@ -129,6 +129,12 @@ const Item = React2.memo((itemMeta) => {
       ref: 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,
@@ -146,7 +152,7 @@ const Item = React2.memo((itemMeta) => {
             disabled: hasMultipleSelection
           }
         ) : null,
-        /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta }),
+        /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta, tooltipHelpers }),
         /* @__PURE__ */ jsx(ItemActions, { ...itemMeta }),
         /* @__PURE__ */ jsx(DropIndicator, { vertical: false, dropIndicatorPosition: showDropIndicatorPosition, isDropValid })
       ]

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

@@ -1,7 +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-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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -5,9 +5,9 @@ import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { ArrowShortReturn, ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
-import { useActionsHandlers } from "./useActionsHandlers";
-import { useInnerRefHandlers } from "./useInnerRefHandlers";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { useActionsHandlers } from "./useActionsHandlers.js";
+import { useInnerRefHandlers } from "./useInnerRefHandlers.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.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 })`
@@ -77,10 +77,13 @@ const ItemActions = React2.memo((itemMeta) => {
         children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, { width: "1.538rem", height: "1.538rem" })
       }
     ) })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", {}),
-    /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx("div", {})
+    ] })
+  ) });
 });
 export {
   ItemActions

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

@@ -1,7 +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-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"],
-  "mappings": "AAAA,YAAY,WAAW;ACyDf,mBAYM,KAZN;AAzDR,OAAOA,UAAS,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY,oBAAoB;AACzC,SAAS,kBAAkB,iBAAiB,mBAAmB;AAE/D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAC7G,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAClH,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,sBAAsB,OAAO,kBAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAcA,OAAM,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,IAAI,oBAAoB,QAAQ;AACtF,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,IAAI,mBAAmB,QAAQ;AACnH,QAAM,qBAAqB,QAAQ,MAAM,kBAAkB,gBAAgB,CAAC,KAAK,CAAC;AAClF,QAAM,gBAAgB;AAAA,IACpB,MAAM,eAAe,cAAc,qBAAqB,WAAW;AAAA,IACnE,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,SACE,oBAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,iCACE;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,8BAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,oBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,0BAA0B,wBAAwB;AAAA,QAE3D,+BACC,oBAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,oBAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF,IAGA,iCACE;AAAA,wBAAC,SAAI;AAAA,IACL,oBAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACyDf,mBAYM,KAZN;AAzDR,OAAOA,UAAS,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY,oBAAoB;AACzC,SAAS,kBAAkB,iBAAiB,mBAAmB;AAE/D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAC7G,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAClH,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,sBAAsB,OAAO,kBAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAcA,OAAM,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,IAAI,oBAAoB,QAAQ;AACtF,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,IAAI,mBAAmB,QAAQ;AACnH,QAAM,qBAAqB,QAAQ,MAAM,kBAAkB,gBAAgB,CAAC,KAAK,CAAC;AAClF,QAAM,gBAAgB;AAAA,IACpB,MAAM,eAAe,cAAc,qBAAqB,WAAW;AAAA,IACnE,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,SACE,oBAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,iCACE;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,8BAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,oBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,0BAA0B,wBAAwB;AAAA,QAE3D,+BACC,oBAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,oBAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF;AAAA;AAAA,IAGA,iCACE;AAAA,0BAAC,SAAI;AAAA,MACL,oBAAC,SAAI;AAAA,OACP;AAAA,KAEJ;AAEJ,CAAC;",
   "names": ["React"]
 }

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

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

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

@@ -1,7 +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';\n"],
+  "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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { useActionsLogicHandlers } from "./useActionsLogicHandlers";
+import { useActionsLogicHandlers } from "./useActionsLogicHandlers.js";
 const useActionsHandlers = (itemMeta) => {
   const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = useActionsLogicHandlers(itemMeta);
   const handleClickDrilldown = React2.useCallback(handleDrilldown, [handleDrilldown]);

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

@@ -1,7 +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-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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "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 CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import React2 from "react";
-import { usePropsStore } from "../../../config/useStore";
-import { useHandleMoveItem } from "../../../config/itemMovementHelpers";
-import { useFocusItemTracker, useFocusActionTrackers, useFocusTracker } from "../../../config/useFocusTracker";
+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);

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

@@ -1,7 +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';\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"],
+  "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"]
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
-import { useInternalStore } from "../../../config/useStore";
-import { REGIONS_FOCUSES, ACTIONS_FOCUSES } from "../../../constants";
+import { useInternalStore } from "../../../config/useStore/index.js";
+import { REGIONS_FOCUSES, ACTIONS_FOCUSES } from "../../../constants/index.js";
 const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;

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

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