npm - @elliemae/ds-shuttle-v2 - Versions diffs - 3.57.0-next.2 → 3.57.0-next.22 - Mend

@elliemae/ds-shuttle-v2 3.57.0-next.2 → 3.57.0-next.22

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DndHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID } from '../../constants/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nexport const StyledGripperButtonOrOverlay = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE,\n})<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  disabled?: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay, disabled }) => {\n    if (isActive || isDragOverlay) return 'grabbing';\n    if (disabled) return 'not-allowed';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  &:focus {\n    outline: 1px solid brand-700;\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n  useSortableHelpers: ReturnType<typeof useSortable>;\n  isDndActive: boolean;\n  isDragging: boolean;\n  disabled?: boolean;\n}> = (props) => {\n  const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n  return (\n    <StyledGripperButtonOrOverlay\n      {...(!disabled && useSortableHelpers\n        ? {\n            ...useSortableHelpers.listeners,\n            ...useSortableHelpers.attributes,\n          }\n        : {})}\n      aria-label=\"drag and drop handle\"\n      isActive={isDndActive}\n      innerRef={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n      tabIndex={-1}\n      data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      disabled={disabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <GripperVertical size=\"s\" color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n    </StyledGripperButtonOrOverlay>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+DjB;AAlBF;AA5CJ,OAAOA,YAAW;AAClB,SAAS,uBAAuB;AAEhC,SAAS,QAAQ,iBAAiB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAEvB,MAAM,+BAA+B,OAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,YAKW,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY,cAAe,QAAO;AACtC,MAAI,SAAU,QAAO;AACrB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI,MAAM,aAOR,CAAC,UAAU;AACd,QAAM,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,mBAAmB,IAAI;AAExF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,CAAC,YAAY,qBACd;AAAA,QACE,GAAG,mBAAmB;AAAA,QACtB,GAAG,mBAAmB;AAAA,MACxB,IACA,CAAC;AAAA,MACL,cAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU,UAAU,UAAU,oBAAoB,mBAAmB;AAAA,MACrE,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB,IAAI,GAAG,EAAE;AAAA,MACT,KAAK,GAAG,EAAE;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oBAAC,mBAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,EAC3G;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID, DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nexport const StyledGripperButtonOrOverlay = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE,\n})<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  disabled?: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay, disabled }) => {\n    if (isActive || isDragOverlay) return 'grabbing';\n    if (disabled) return 'not-allowed';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  &:focus {\n    outline: 1px solid brand-700;\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n  useSortableHelpers: ReturnType<typeof useSortable>;\n  isDndActive: boolean;\n  isDragging: boolean;\n  disabled?: boolean;\n}> = (props) => {\n  const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n  return (\n    <StyledGripperButtonOrOverlay\n      {...(!disabled && useSortableHelpers\n        ? {\n            ...useSortableHelpers.listeners,\n            ...useSortableHelpers.attributes,\n          }\n        : {})}\n      aria-label=\"drag and drop handle\"\n      isActive={isDndActive}\n      innerRef={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n      tabIndex={-1}\n      data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      disabled={disabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <GripperVertical size=\"s\" color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n    </StyledGripperButtonOrOverlay>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8DjB;AAlBF;AA3CJ,OAAOA,YAAW;AAClB,SAAS,uBAAuB;AAEhC,SAAS,QAAQ,iBAAiB;AAClC,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,qBAAqB;AAEvB,MAAM,+BAA+B,OAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,YAKW,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY,cAAe,QAAO;AACtC,MAAI,SAAU,QAAO;AACrB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI,MAAM,aAOR,CAAC,UAAU;AACd,QAAM,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,mBAAmB,IAAI;AAExF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,CAAC,YAAY,qBACd;AAAA,QACE,GAAG,mBAAmB;AAAA,QACtB,GAAG,mBAAmB;AAAA,MACxB,IACA,CAAC;AAAA,MACL,cAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU,UAAU,UAAU,oBAAoB,mBAAmB;AAAA,MACrE,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB,IAAI,GAAG,EAAE;AAAA,MACT,KAAK,GAAG,EAAE;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oBAAC,mBAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,EAC3G;AAEJ;",
   "names": ["React"]
 }

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

@@ -7,8 +7,8 @@ import {
   DSButtonV2
 } from "@elliemae/ds-button-v2";
 import { styled } from "@elliemae/ds-system";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
-import { usePropsStore } from "../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots, SHUTTLE_IDS } from "../constants/index.js";
+import { useInternalStore, 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((panelMetaInfo) => {
@@ -20,6 +20,7 @@ const Header = React2.memo((panelMetaInfo) => {
   const onSearchBarOpen = usePropsStore(
     (state) => isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar
   );
+  const shuttleId = useInternalStore((state) => state.shuttleInternalId);
   const isSearchBarOpen = usePropsStore(
     (state) => isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar
   );
@@ -42,6 +43,7 @@ const Header = React2.memo((panelMetaInfo) => {
   }, [onSearchBarOpen]);
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  const searchIconAriaControls = isDestinationPanel ? `${SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}` : `${SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;
   return /* @__PURE__ */ jsxs(Grid, { onFocus: onHeaderFocus, cols, children: [
     /* @__PURE__ */ jsx(HeaderRenderer, { ...headerRendererProps }),
     onSearchBarOpen ? /* @__PURE__ */ jsx(Grid, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(
@@ -52,6 +54,8 @@ const Header = React2.memo((panelMetaInfo) => {
         onClick: handleFilterClick,
         w: 24,
         h: 24,
+        "aria-controls": searchIconAriaControls,
+        "aria-expanded": isSearchBarOpen,
         getOwnerProps,
         getOwnerPropsArguments,
         children: /* @__PURE__ */ jsx(Search, { width: "1.077rem", height: "1.077rem" })

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, { useCallback } 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';\nconst StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })``;\nexport const Header = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const HeaderRenderer = usePropsStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const headerRendererProps = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationHeaderProps : state.sourceHeaderProps,\n  );\n\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  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer {...headerRendererProps} />\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            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <Search width=\"1.077rem\" height=\"1.077rem\" />\n          </StyledIconButton>\n        </Grid>\n      ) : null}\n    </Grid>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmDnB,SACE,KADF;AAnDJ,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAEhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AACzG,MAAM,SAASA,OAAM,KAAK,CAAC,kBAA8C;AAC9E,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,iBAAiB,cAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,sBAAsB;AAAA,IAAc,CAAC,UACzC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,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,gBAAiB,WAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,SACE,qBAAC,QAAK,SAAS,eAAe,MAC5B;AAAA,wBAAC,kBAAgB,GAAG,qBAAqB;AAAA,IACxC,kBACC,oBAAC,QAAK,YAAW,UAAS,gBAAe,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,UAAU,qBAAqB,gBAAgB,QAAQ;AAAA,QACnE,YAAW;AAAA,QACX,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QAEA,8BAAC,UAAO,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC7C,GACF,IACE;AAAA,KACN;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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, SHUTTLE_IDS } from '../constants/index.js';\nimport { useInternalStore, usePropsStore } from '../config/useStore/index.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\nconst StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })``;\nexport const Header = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const HeaderRenderer = usePropsStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const headerRendererProps = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationHeaderProps : state.sourceHeaderProps,\n  );\n\n  const onSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n  );\n\n  const shuttleId = useInternalStore((state) => state.shuttleInternalId);\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  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  const searchIconAriaControls = isDestinationPanel\n    ? `${SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}`\n    : `${SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer {...headerRendererProps} />\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            aria-controls={searchIconAriaControls}\n            aria-expanded={isSearchBarOpen}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <Search width=\"1.077rem\" height=\"1.077rem\" />\n          </StyledIconButton>\n        </Grid>\n      ) : null}\n    </Grid>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyDnB,SACE,KADF;AAzDJ,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,iBAAiB,kBAAkB,mBAAmB;AAC/D,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,uBAAuB;AAEhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AACzG,MAAM,SAASA,OAAM,KAAK,CAAC,kBAA8C;AAC9E,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,iBAAiB,cAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,sBAAsB;AAAA,IAAc,CAAC,UACzC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,iBAAiB;AACrE,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,gBAAiB,WAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,yBAAyB,qBAC3B,GAAG,YAAY,wBAAwB,IAAI,SAAS,KACpD,GAAG,YAAY,mBAAmB,IAAI,SAAS;AAEnD,SACE,qBAAC,QAAK,SAAS,eAAe,MAC5B;AAAA,wBAAC,kBAAgB,GAAG,qBAAqB;AAAA,IACxC,kBACC,oBAAC,QAAK,YAAW,UAAS,gBAAe,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,UAAU,qBAAqB,gBAAgB,QAAQ;AAAA,QACnE,YAAW;AAAA,QACX,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf;AAAA,QACA;AAAA,QAEA,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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useCallback, useContext, useEffect } from "react";
 import { ThemeContext } from "@xstyled/styled-components";
 import { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from "@elliemae/ds-drag-and-drop";
@@ -82,7 +82,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     return /* @__PURE__ */ jsx(DndContext, { ...dndContextProps, children: /* @__PURE__ */ jsxs(SortableContext, { ...containerSortableContextProps, children: [
       /* @__PURE__ */ jsx(Component, { ...props }),
       createPortal(
-        /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, zIndex: theme.zIndex.tooltip, children: /* @__PURE__ */ jsx(Fragment, { children: dndDraggingItemMeta ? /* @__PURE__ */ jsx(ItemOverlay, { ...dndDraggingItemMeta }) : null }) }),
+        /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, zIndex: theme.zIndex.tooltip, children: dndDraggingItemMeta ? /* @__PURE__ */ jsx(ItemOverlay, { ...dndDraggingItemMeta }) : null }),
         document.body
       )
     ] }) });

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, useContext, useEffect } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ThemeContext } from '@xstyled/styled-components';\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\n// create a type omittting height from PanelMetaInfo\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n  activeId?: DSShuttleV2T.HydratedId;\n  overId?: DSShuttleV2T.HydratedId;\n  isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: TypescriptHelpersT.ReactFunctionalHOCWithDifferentInterface<\n  HoCConfig,\n  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  const theme = useContext(ThemeContext);\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      subitems: [],\n      index: i,\n    }));\n    return {\n      flattenedItems: configuredItemList,\n      isHorizontalDnD: false,\n      isExpandable: false,\n      onReorder,\n      maxDragAndDropLevel: 0,\n      getIsDropValid: () => true,\n    };\n  }, [itemList, onReorder]);\n\n  const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } =\n    useTreeDndkitConfig(treeConfig);\n\n  const containerSortableContextProps = sortableContextProps.root;\n\n  useEffect(() => {\n    setLastActiveId(active?.id?.toString() ?? '');\n    setOverId(over?.id?.toString() ?? '');\n    setIsDropValid(isDropValid);\n    setDndDraggingItem(activeItem?.original ?? null);\n    setDropIndicatorPosition(dropIndicatorPosition);\n    if (!active) setDndDraggingItemMeta(null);\n  }, [\n    active,\n    activeItem,\n    dropIndicatorPosition,\n    isDropValid,\n    over,\n    setDndDraggingItem,\n    setDndDraggingItemMeta,\n    setDropIndicatorPosition,\n    setIsDropValid,\n    setLastActiveId,\n    setOverId,\n  ]);\n\n  if (withDragNDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...containerSortableContextProps}>\n          <Component {...props} />\n          {createPortal(\n            <DragOverlay style={{ width: 'auto' }} zIndex={theme.zIndex.tooltip}>\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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",
+  "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, useContext, useEffect } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ThemeContext } from '@xstyled/styled-components';\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\n// create a type omittting height from PanelMetaInfo\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n  activeId?: DSShuttleV2T.HydratedId;\n  overId?: DSShuttleV2T.HydratedId;\n  isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: TypescriptHelpersT.ReactFunctionalHOCWithDifferentInterface<\n  HoCConfig,\n  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  const theme = useContext(ThemeContext);\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      subitems: [],\n      index: i,\n    }));\n    return {\n      flattenedItems: configuredItemList,\n      isHorizontalDnD: false,\n      isExpandable: false,\n      onReorder,\n      maxDragAndDropLevel: 0,\n      getIsDropValid: () => true,\n    };\n  }, [itemList, onReorder]);\n\n  const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } =\n    useTreeDndkitConfig(treeConfig);\n\n  const containerSortableContextProps = sortableContextProps.root;\n\n  useEffect(() => {\n    setLastActiveId(active?.id?.toString() ?? '');\n    setOverId(over?.id?.toString() ?? '');\n    setIsDropValid(isDropValid);\n    setDndDraggingItem(activeItem?.original ?? null);\n    setDropIndicatorPosition(dropIndicatorPosition);\n    if (!active) setDndDraggingItemMeta(null);\n  }, [\n    active,\n    activeItem,\n    dropIndicatorPosition,\n    isDropValid,\n    over,\n    setDndDraggingItem,\n    setDndDraggingItemMeta,\n    setDropIndicatorPosition,\n    setIsDropValid,\n    setLastActiveId,\n    setOverId,\n  ]);\n\n  if (withDragNDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...containerSortableContextProps}>\n          <Component {...props} />\n          {createPortal(\n            <DragOverlay style={{ width: 'auto' }} zIndex={theme.zIndex.tooltip}>\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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
-const withConditionalUseSortable = (Component) => function(props) {
+const withConditionalUseSortable = (Component) => function WithConditionalUseSortable(props) {
   const { datumInternalMeta } = props;
   const { hydratedId } = datumInternalMeta;
   const useSortableHelpers = useSortable({ id: hydratedId });

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 TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\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: TypescriptHelpersT.ReactFunctionalHOCWithDifferentInterface<\n  HoCConfig,\n  ResultComponentProps\n> = (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;ACgBZ;AAfX,SAAS,mBAAmB;AAMrB,MAAM,6BAGT,CAAC,cACH,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\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: TypescriptHelpersT.ReactFunctionalHOCWithDifferentInterface<\n  HoCConfig,\n  ResultComponentProps\n> = (Component) =>\n  function WithConditionalUseSortable(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;ACgBZ;AAfX,SAAS,mBAAmB;AAMrB,MAAM,6BAGT,CAAC,cACH,SAAS,2BAA2B,OAAO;AACzC,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

@@ -4,9 +4,8 @@ import { Grid } from "@elliemae/ds-grid";
 import { useHeadlessTooltip } from "@elliemae/ds-hooks-headless-tooltip";
 import { css, styled } from "@elliemae/ds-system";
 import React2, { useEffect, useMemo } from "react";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
 import { useInternalStore, usePropsStore } from "../../config/useStore/index.js";
-import { REGIONS_FOCUSES } from "../../constants/index.js";
+import { REGIONS_FOCUSES, DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
 import { DragHandle } from "../Dnd/DndHandle.js";
 import { DropIndicator } from "../Dnd/DropIndicator.js";
 import { withConditionalUseSortable } from "../HoC/withConditionalUseSortable.js";

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

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

@@ -7,7 +7,7 @@ import { DSButtonV3, BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { ArrowShortReturn, ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
 import { useActionsHandlers } from "./useActionsHandlers.js";
 import { useInnerRefHandlers } from "./useInnerRefHandlers.js";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
 import { useInternalStore, usePropsStore } from "../../../config/useStore/useStore.js";
 const StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
 const StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;

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 { DSButtonV3, 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';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV3, { 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, hydratedId },\n  } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, label } = datumHydratables;\n  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n  const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n  const moveAriaLabel = useMemo(\n    () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n    [label, isDestinationPanel],\n  );\n\n  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n  const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <StyledItemActions\n      cols={actionsCols}\n      gutter=\"xxs\"\n      pl=\"xs\"\n      pr=\"xxs\"\n      alignItems=\"center\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={drillDownAriaLabel}\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledDrilldown || preventDrilldown === true || isDraggingThisItem}\n            >\n              <StyledDrilldownIcon\n                width=\"1.538rem\"\n                height=\"1.538rem\"\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={moveAriaLabel}\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledMove || hydratedPreventMove === true || isDraggingThisItem}\n              {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArguments}\n                />\n              ) : (\n                <StyledArrowShortRightIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArguments}\n                />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n"],
+  "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 { DSButtonV3, 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 '../../../constants/index.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV3, { 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, hydratedId },\n  } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, label } = datumHydratables;\n  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n  const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n  const moveAriaLabel = useMemo(\n    () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n    [label, isDestinationPanel],\n  );\n\n  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n  const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <StyledItemActions\n      cols={actionsCols}\n      gutter=\"xxs\"\n      pl=\"xs\"\n      pr=\"xxs\"\n      alignItems=\"center\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={drillDownAriaLabel}\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledDrilldown || preventDrilldown === true || isDraggingThisItem}\n            >\n              <StyledDrilldownIcon\n                width=\"1.538rem\"\n                height=\"1.538rem\"\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={moveAriaLabel}\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledMove || hydratedPreventMove === true || isDraggingThisItem}\n              {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArguments}\n                />\n              ) : (\n                <StyledArrowShortRightIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArguments}\n                />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n"],
   "mappings": "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",
   "names": ["React"]
 }

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

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
 import { TextSection } from "./TextSection.js";
 import { useThisItemIsFocused } from "./useThisItemIsFocused.js";
 import { usePropsStore } from "../../config/useStore/useStore.js";

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

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

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

@@ -6,7 +6,7 @@ import { Grid } from "@elliemae/ds-grid";
 import { useInternalStore } from "../../config/useStore/index.js";
 import { ItemMiddleSection } from "./ItemMiddleSection.js";
 import { DragOverlay } from "../Dnd/DragOverlay.js";
-import { DSShuttleV2Name } from "../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name } from "../../constants/index.js";
 const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: "item-wrapper-overlay" })`
   min-height: 2.769rem;
   position: relative;

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

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

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

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
 import { usePropsStore } from "../../config/useStore/useStore.js";
 const StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })`
   width: 5px;

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

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

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

@@ -4,7 +4,7 @@ import React2 from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { DSTypography } from "@elliemae/ds-typography";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
 import { usePropsStore } from "../../config/useStore/useStore.js";
 const withSubtitleRows = ["auto", "auto"];
 const LabelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_LABEL_WRAPPER })`

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

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

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

@@ -5,7 +5,7 @@ import { useFontSizeDetector } from "@elliemae/ds-hooks-fontsize-detector";
 import { useOnBlurOut } from "@elliemae/ds-hooks-on-blur-out";
 import { styled } from "@elliemae/ds-system";
 import React2, { useMemo } from "react";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../constants/index.js";
 import { useFocusTracker } from "../config/useFocusTracker/index.js";
 import { usePropsStore } from "../config/useStore/index.js";
 import { PanelWrapper } from "./PanelWrapper.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { useFontSizeDetector } from '@elliemae/ds-hooks-fontsize-detector';\nimport { useOnBlurOut } from '@elliemae/ds-hooks-on-blur-out';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useMemo } from 'react';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { PanelWrapper } from './PanelWrapper.js';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })``;\n\nconst layoutWithSmallFont = {\n  cols: { small: ['auto'], medium: ['1fr', '1fr'] },\n  rows: { small: ['1fr', '1fr'], medium: ['auto'] },\n};\nconst layoutWithBigFont = {\n  cols: ['auto'],\n  rows: ['1fr', '1fr'],\n};\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = React.useState<number>(0);\n\n  React.useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setDimensions(Math.ceil(entry.contentRect.height));\n        });\n      });\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n    // No cleanup needed if ref is null or undefined\n    return () => {};\n  }, [ref]);\n\n  return dimensions;\n};\n\n// this custom hook will return the font size of the font detector element\n\nexport const MainContent = React.memo(() => {\n  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onBlur: () => {\n        trackFocusRegionReset();\n        trackFocusItemReset();\n        trackFocusActionReset();\n      },\n    }),\n    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n  );\n  const handleOnBlurOut = useOnBlurOut(config);\n  const destinationHasMultipleSelectedItems = usePropsStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = usePropsStore((store) => store.sourceHasMultipleSelectedItems);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const metaInfo = useFontSizeDetector();\n\n  const colsAndRowsLayout = useMemo(() => {\n    if (metaInfo.isLarge) {\n      return layoutWithBigFont;\n    }\n    return layoutWithSmallFont;\n  }, [metaInfo]);\n\n  const [ref, setRef] = React.useState<HTMLDivElement | null>();\n  const parentNode = ref?.parentNode as HTMLElement | null | undefined;\n  const height = useResizeObserver(parentNode);\n  const finalHeight = height !== 0 ? height : 208;\n  return (\n    <StyledWrapper\n      gutter=\"xs\"\n      onBlur={handleOnBlurOut}\n      {...colsAndRowsLayout}\n      getOwnerProps={getOwnerProps}\n      style={{ height: `${finalHeight}px` }}\n      innerRef={setRef}\n    >\n      <PanelWrapper isDestinationPanel={false} hasMultipleSelection={sourceHasMultipleSelectedItems} />\n      <PanelWrapper isDestinationPanel hasMultipleSelection={destinationHasMultipleSelectedItems} />\n    </StyledWrapper>\n  );\n});\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { useFontSizeDetector } from '@elliemae/ds-hooks-fontsize-detector';\nimport { useOnBlurOut } from '@elliemae/ds-hooks-on-blur-out';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useMemo } from 'react';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../constants/index.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { PanelWrapper } from './PanelWrapper.js';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })``;\n\nconst layoutWithSmallFont = {\n  cols: { small: ['auto'], medium: ['1fr', '1fr'] },\n  rows: { small: ['1fr', '1fr'], medium: ['auto'] },\n};\nconst layoutWithBigFont = {\n  cols: ['auto'],\n  rows: ['1fr', '1fr'],\n};\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = React.useState<number>(0);\n\n  React.useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setDimensions(Math.ceil(entry.contentRect.height));\n        });\n      });\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n    // No cleanup needed if ref is null or undefined\n    return () => {};\n  }, [ref]);\n\n  return dimensions;\n};\n\n// this custom hook will return the font size of the font detector element\n\nexport const MainContent = React.memo(() => {\n  const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onBlur: () => {\n        trackFocusRegionReset();\n        trackFocusItemReset();\n        trackFocusActionReset();\n      },\n    }),\n    [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n  );\n  const handleOnBlurOut = useOnBlurOut(config);\n  const destinationHasMultipleSelectedItems = usePropsStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = usePropsStore((store) => store.sourceHasMultipleSelectedItems);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const metaInfo = useFontSizeDetector();\n\n  const colsAndRowsLayout = useMemo(() => {\n    if (metaInfo.isLarge) {\n      return layoutWithBigFont;\n    }\n    return layoutWithSmallFont;\n  }, [metaInfo]);\n\n  const [ref, setRef] = React.useState<HTMLDivElement | null>();\n  const parentNode = ref?.parentNode as HTMLElement | null | undefined;\n  const height = useResizeObserver(parentNode);\n  const finalHeight = height !== 0 ? height : 208;\n  return (\n    <StyledWrapper\n      gutter=\"xs\"\n      onBlur={handleOnBlurOut}\n      {...colsAndRowsLayout}\n      getOwnerProps={getOwnerProps}\n      style={{ height: `${finalHeight}px` }}\n      innerRef={setRef}\n    >\n      <PanelWrapper isDestinationPanel={false} hasMultipleSelection={sourceHasMultipleSelectedItems} />\n      <PanelWrapper isDestinationPanel hasMultipleSelection={destinationHasMultipleSelectedItems} />\n    </StyledWrapper>\n  );\n});\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgFnB,SAQE,KARF;AAhFJ,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,OAAOA,UAAS,eAAe;AAC/B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,QAAQ,CAAC;AAE5F,MAAM,sBAAsB;AAAA,EAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,KAAK,EAAE;AAAA,EAChD,MAAM,EAAE,OAAO,CAAC,OAAO,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE;AAClD;AACA,MAAM,oBAAoB;AAAA,EACxB,MAAM,CAAC,MAAM;AAAA,EACb,MAAM,CAAC,OAAO,KAAK;AACrB;AAIA,MAAM,oBAAoB,CAAC,QAAwC;AACjE,QAAM,CAAC,YAAY,aAAa,IAAIA,OAAM,SAAiB,CAAC;AAE5D,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,gBAAQ,QAAQ,CAAC,UAAU;AACzB,wBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,QACnD,CAAC;AAAA,MACH,CAAC;AACD,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AAEA,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB,GAAG,CAAC,GAAG,CAAC;AAER,SAAO;AACT;AAIO,MAAM,cAAcA,OAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC9F,QAAM,SAASA,OAAM;AAAA,IACnB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB;AACtB,4BAAoB;AACpB,8BAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,qBAAqB,qBAAqB;AAAA,EACpE;AACA,QAAM,kBAAkB,aAAa,MAAM;AAC3C,QAAM,sCAAsC,cAAc,CAAC,UAAU,MAAM,mCAAmC;AAC9G,QAAM,iCAAiC,cAAc,CAAC,UAAU,MAAM,8BAA8B;AACpG,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,WAAW,oBAAoB;AAErC,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,SAAS,SAAS;AACpB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,KAAK,MAAM,IAAIA,OAAM,SAAgC;AAC5D,QAAM,aAAa,KAAK;AACxB,QAAM,SAAS,kBAAkB,UAAU;AAC3C,QAAM,cAAc,WAAW,IAAI,SAAS;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,QAAQ;AAAA,MACP,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,WAAW,KAAK;AAAA,MACpC,UAAU;AAAA,MAEV;AAAA,4BAAC,gBAAa,oBAAoB,OAAO,sBAAsB,gCAAgC;AAAA,QAC/F,oBAAC,gBAAa,oBAAkB,MAAC,sBAAsB,qCAAqC;AAAA;AAAA;AAAA,EAC9F;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -6,7 +6,7 @@ import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { usePropsStore } from "../../../config/useStore/index.js";
 import { useInnerRefHandlers } from "./useInnerRefHandlers.js";
 import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
 const StyledLoadMoreBtn = styled(DSButtonV2, {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN

package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/LoadMoreBtn.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const {\n    getCanFocusLastItem,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusRegionPanel,\n    trackFocusItemReset,\n    trackFocusActionReset,\n  } = useFocusTracker();\n  const onLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n  );\n  const handleOnClick = React.useCallback(\n    (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onLoadMore(e);\n      if (getCanFocusLastItem(panelMetaInfo)) {\n        trackFocusItemLast(panelMetaInfo);\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusActionParent();\n      } else {\n        trackFocusItemReset();\n        trackFocusActionReset();\n        trackFocusRegionPanel(panelMetaInfo.isDestinationPanel);\n      }\n    },\n    [\n      getCanFocusLastItem,\n      onLoadMore,\n      panelMetaInfo,\n      trackFocusActionParent,\n      trackFocusActionReset,\n      trackFocusItemLast,\n      trackFocusItemReset,\n      trackFocusRegionPanel,\n      trackFocusRegionPanelItem,\n    ],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const {\n    getCanFocusLastItem,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusRegionPanel,\n    trackFocusItemReset,\n    trackFocusActionReset,\n  } = useFocusTracker();\n  const onLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n  );\n  const handleOnClick = React.useCallback(\n    (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onLoadMore(e);\n      if (getCanFocusLastItem(panelMetaInfo)) {\n        trackFocusItemLast(panelMetaInfo);\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusActionParent();\n      } else {\n        trackFocusItemReset();\n        trackFocusActionReset();\n        trackFocusRegionPanel(panelMetaInfo.isDestinationPanel);\n      }\n    },\n    [\n      getCanFocusLastItem,\n      onLoadMore,\n      panelMetaInfo,\n      trackFocusActionParent,\n      trackFocusActionReset,\n      trackFocusItemLast,\n      trackFocusItemReset,\n      trackFocusRegionPanel,\n      trackFocusRegionPanelItem,\n    ],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC6DnB;AA7DJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY,oBAAoC;AACzD,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AACpB,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAA2D;AAC1D,iBAAW,CAAC;AACZ,UAAI,oBAAoB,aAAa,GAAG;AACtC,2BAAmB,aAAa;AAChC,kCAA0B,cAAc,kBAAkB;AAC1D,+BAAuB;AAAA,MACzB,OAAO;AACL,4BAAoB;AACpB,8BAAsB;AACtB,8BAAsB,cAAc,kBAAkB;AAAA,MACxD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,2BAA2B,IAAI,oBAAoB,aAAa;AACxE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/bottom/LoadingMore.js CHANGED Viewed

@@ -4,7 +4,7 @@ import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSIndeterminateProgressIndicator } from "@elliemae/ds-indeterminate-progress-indicator";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
 import { usePropsStore } from "../../../config/useStore/useStore.js";
 const StyledBottomLoadingMore = styled(Grid, {
   name: DSShuttleV2Name,

package/dist/esm/parts/Panel/bottom/LoadingMore.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/LoadingMore.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledBottomLoadingMore = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE,\n})``;\nexport const LoadingMore = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledBottomLoadingMore\n      px=\"1.846rem\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n    </StyledBottomLoadingMore>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledBottomLoadingMore = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOADING_MORE,\n})``;\nexport const LoadingMore = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledBottomLoadingMore\n      px=\"1.846rem\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n    </StyledBottomLoadingMore>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACsBjB;AAtBN,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAEjD,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA;AAAA,MAEA,8BAAC,oCAAiC,YAAU,MAAC,OAAM,WAAU;AAAA;AAAA,EAC/D;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { usePropsStore } from "../../../config/useStore/index.js";
 import { LoadMoreBtn } from "./LoadMoreBtn.js";
 import { LoadingMore } from "./LoadingMore.js";
 import { useLoadMoreBtnArrowNavigation } from "./useLoadMoreBtnArrowNavigation.js";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
 const StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`
   min-height: 2.769rem;
   border-top: 1px solid neutral-400;