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/cjs/DSShuttleV2.js CHANGED Viewed

@@ -33,12 +33,14 @@ __export(DSShuttleV2_exports, {
 });
 module.exports = __toCommonJS(DSShuttleV2_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_zustand_helpers = require("@elliemae/ds-zustand-helpers");
 var import_MainContent = require("./parts/MainContent.js");
 var import_useStore = require("./config/useStore/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-const DSShuttleV2 = (0, import_ds_zustand_helpers.withZustand)(import_MainContent.MainContent, import_useStore.config);
+const DSShuttleV2WithZustand = (0, import_ds_zustand_helpers.withZustand)(import_MainContent.MainContent, import_useStore.config);
+const DSShuttleV2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DSShuttleV2WithZustand, { ...props });
 DSShuttleV2.displayName = "DSShuttlev2";
 const DSShuttleV2WithSchema = (0, import_ds_props_helpers.describe)(DSShuttleV2);
 DSShuttleV2WithSchema.propTypes = import_react_desc_prop_types.DSShuttleV2PropTypesSchema;

package/dist/cjs/DSShuttleV2.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSShuttleV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './config/useStore/index.js';\nimport type { DSShuttleV2T } from './react-desc-prop-types.js';\nimport { DSShuttleV2PropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSShuttleV2: React.FunctionComponent<DSShuttleV2T.Props> = withZustand(MainContent, config);\n\nDSShuttleV2.displayName = 'DSShuttlev2';\nconst DSShuttleV2WithSchema = describe(DSShuttleV2);\n\nDSShuttleV2WithSchema.propTypes = DSShuttleV2PropTypesSchema;\n\nexport { DSShuttleV2, DSShuttleV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAyB;AACzB,gCAA4B;AAC5B,yBAA4B;AAC5B,sBAAuB;AAEvB,mCAA2C;AAE3C,MAAM,kBAA2D,uCAAY,gCAAa,sBAAM;AAEhG,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAElD,sBAAsB,YAAY;",
+  "sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './config/useStore/index.js';\nimport { DSShuttleV2PropTypesSchema } from './react-desc-prop-types.js';\nimport type { DSShuttleV2T } from './react-desc-prop-types.js';\n\nconst DSShuttleV2WithZustand = withZustand(MainContent, config);\n\nconst DSShuttleV2 = <T extends object, H extends object, N extends object, K extends object>(\n  props: DSShuttleV2T.Props<T, H, N, K>,\n): React.JSX.Element => <DSShuttleV2WithZustand {...props} />;\n\nDSShuttleV2.displayName = 'DSShuttlev2';\nconst DSShuttleV2WithSchema = describe(DSShuttleV2);\n\nDSShuttleV2WithSchema.propTypes = DSShuttleV2PropTypesSchema;\n\nexport { DSShuttleV2, DSShuttleV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWC;AAXxB,8BAAyB;AACzB,gCAA4B;AAC5B,yBAA4B;AAC5B,sBAAuB;AACvB,mCAA2C;AAG3C,MAAM,6BAAyB,uCAAY,gCAAa,sBAAM;AAE9D,MAAM,cAAc,CAClB,UACsB,4CAAC,0BAAwB,GAAG,OAAO;AAE3D,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAElD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/cjs/config/useAutoCalculated/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/config/useAutoCalculated/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useDataStructure } from './useDataStructure.js';\nimport { useShuttleVirtualized } from './useShuttleVirtualized.js';\n\nexport const useAutoCalculated = (propsWithDefaults: DSShuttleV2T.InternalProps) => {\n  const dataScructured = useDataStructure(propsWithDefaults);\n  const virtualData = useShuttleVirtualized();\n\n  return useMemo(() => ({ ...dataScructured, ...virtualData }), [dataScructured, virtualData]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,8BAAiC;AACjC,mCAAsC;AAE/B,MAAM,oBAAoB,CAAC,sBAAkD;AAClF,QAAM,qBAAiB,0CAAiB,iBAAiB;AACzD,QAAM,kBAAc,oDAAsB;AAE1C,aAAO,sBAAQ,OAAO,EAAE,GAAG,gBAAgB,GAAG,YAAY,IAAI,CAAC,gBAAgB,WAAW,CAAC;AAC7F;",
+  "sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useDataStructure } from './useDataStructure.js';\nimport { useShuttleVirtualized } from './useShuttleVirtualized.js';\n\nexport const useAutoCalculated = <T extends object, H extends object, N extends object, K extends object>(\n  propsWithDefaults: DSShuttleV2T.InternalProps<T, H, N, K>,\n) => {\n  const dataScructured = useDataStructure(propsWithDefaults);\n  const virtualData = useShuttleVirtualized();\n\n  return useMemo(() => ({ ...dataScructured, ...virtualData }), [dataScructured, virtualData]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,8BAAiC;AACjC,mCAAsC;AAE/B,MAAM,oBAAoB,CAC/B,sBACG;AACH,QAAM,qBAAiB,0CAAiB,iBAAiB;AACzD,QAAM,kBAAc,oDAAsB;AAE1C,aAAO,sBAAQ,OAAO,EAAE,GAAG,gBAAgB,GAAG,YAAY,IAAI,CAAC,gBAAgB,WAAW,CAAC;AAC7F;",
   "names": []
 }

package/dist/cjs/config/useAutoCalculated/useDataStructure.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/config/useAutoCalculated/useDataStructure.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\n\ntype ConfigureDestinationConfig = {\n  destinationData: DSShuttleV2T.Datum[];\n  destinationSelectedItems: DSShuttleV2T.SelectionMap;\n  destinationSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n  getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n  getPreventMove: DSShuttleV2T.FunctionalHydraters['getPreventMove'];\n};\nconst configureDestination = ({\n  destinationData,\n  destinationSelectedItems,\n  destinationSoftDeletedItems,\n  getId,\n  getPreventMove,\n}: ConfigureDestinationConfig) => {\n  const destinationSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n  const destinationSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n  const destinationSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n  const destinationSelectionItemArray: DSShuttleV2T.Datum[] = [];\n  const destinationConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n  const destinationSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n\n  destinationData.forEach((datum, i) => {\n    const hydratedId = getId(datum);\n    const hydratedPreventMove = getPreventMove?.(datum, { isDestinationPanel: true }) ?? false;\n    let isSelected = false;\n    if (destinationSelectedItems[hydratedId] === true) {\n      destinationSelectionItemArray.push(datum);\n      destinationSelectionArray.push(hydratedId);\n      isSelected = true;\n    }\n    let softDeleted = false;\n    if (destinationSoftDeletedItems[hydratedId] === true) {\n      softDeleted = true;\n    }\n    destinationSelectedItemsMap[hydratedId] = { datum, index: i };\n    const configuredItem = {\n      hydratedId,\n      hydratedPreventMove,\n      isSelected,\n      softDeleted,\n      original: datum,\n      localIndex: i,\n      isFirst: i === 0,\n      isLast: i === destinationData.length - 1,\n    } as const;\n    destinationConfiguredData.push(configuredItem);\n    if (!hydratedPreventMove && !softDeleted) {\n      destinationSelectionableData.push(configuredItem);\n      destinationSelectionableDataIds.push(`${hydratedId}`);\n    }\n  });\n  const destinationHasMultipleSelectedItems = destinationSelectionArray.length >= 1;\n  const destinationSelectionableIds = destinationSelectionableDataIds.join(' ');\n\n  return {\n    destinationSelectedItemsMap,\n    destinationSelectionItemArray,\n    destinationSelectionArray,\n    destinationHasMultipleSelectedItems,\n    destinationConfiguredData,\n    destinationSelectionableData,\n    destinationSelectionableDataIds,\n    destinationSelectionableIds,\n  };\n};\ntype ConfigureSourceConfig = {\n  sourceData: DSShuttleV2T.Datum[];\n  sourceSelectedItems: DSShuttleV2T.SelectionMap;\n  sourceSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n  getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n  getPreventMove: DSShuttleV2T.FunctionalHydraters['getPreventMove'];\n};\n\nconst configureSource = ({\n  sourceData,\n  sourceSelectedItems,\n  sourceSoftDeletedItems,\n  getId,\n  getPreventMove,\n}: ConfigureSourceConfig) => {\n  const sourceSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n  const sourceSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n  const sourceSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n  const sourceSelectionItemArray: DSShuttleV2T.Datum[] = [];\n  const sourceConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n  const sourceSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n  sourceData.forEach((datum, i) => {\n    const hydratedId = getId(datum);\n    const hydratedPreventMove = getPreventMove?.(datum, { isDestinationPanel: false }) ?? false;\n    let isSelected = false;\n    if (sourceSelectedItems[hydratedId] === true) {\n      sourceSelectionItemArray.push(datum);\n      sourceSelectionArray.push(hydratedId);\n      isSelected = true;\n    }\n    let softDeleted = false;\n    if (sourceSoftDeletedItems[hydratedId] === true) {\n      softDeleted = true;\n    }\n\n    sourceSelectedItemsMap[hydratedId] = { datum, index: i };\n    const configuredItem = {\n      hydratedId,\n      hydratedPreventMove,\n      isSelected,\n      softDeleted,\n      original: datum,\n      localIndex: i,\n      isFirst: i === 0,\n      isLast: i === sourceData.length - 1,\n    } as const;\n    sourceConfiguredData.push(configuredItem);\n    if (!hydratedPreventMove && !softDeleted) {\n      sourceSelectionableData.push(configuredItem);\n      sourceSelectionableDataIds.push(`${hydratedId}`);\n    }\n  });\n  const sourceHasMultipleSelectedItems = sourceSelectionArray.length >= 1;\n  const sourceSelectionableIds = sourceSelectionableDataIds.join(' ');\n  return {\n    sourceConfiguredData,\n    sourceSelectedItemsMap,\n    sourceSelectionItemArray,\n    sourceSelectionArray,\n    sourceHasMultipleSelectedItems,\n    sourceSelectionableData,\n    sourceSelectionableDataIds,\n    sourceSelectionableIds,\n  };\n};\n\nexport const useDataStructure = (propsFromUser: DSShuttleV2T.InternalProps) => {\n  const {\n    sourceData,\n    sourceSelectedItems,\n    destinationData,\n    destinationSelectedItems,\n    getId,\n    getPreventMove,\n    sourceSoftDeletedItems,\n    destinationSoftDeletedItems,\n  } = propsFromUser;\n  return useMemo(\n    () => ({\n      ...configureSource({ sourceData, sourceSelectedItems, sourceSoftDeletedItems, getId, getPreventMove }),\n      ...configureDestination({\n        destinationData,\n        destinationSelectedItems,\n        destinationSoftDeletedItems,\n        getId,\n        getPreventMove,\n      }),\n    }),\n    [\n      sourceData,\n      sourceSelectedItems,\n      sourceSoftDeletedItems,\n      getId,\n      getPreventMove,\n      destinationData,\n      destinationSelectedItems,\n      destinationSoftDeletedItems,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\n\ntype ConfigureDestinationConfig = {\n  destinationData: DSShuttleV2T.Datum[];\n  destinationSelectedItems: DSShuttleV2T.SelectionMap;\n  destinationSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n  getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n  getPreventMove: DSShuttleV2T.FunctionalHydraters['getPreventMove'];\n};\nconst configureDestination = ({\n  destinationData,\n  destinationSelectedItems,\n  destinationSoftDeletedItems,\n  getId,\n  getPreventMove,\n}: ConfigureDestinationConfig) => {\n  const destinationSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n  const destinationSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n  const destinationSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n  const destinationSelectionItemArray: DSShuttleV2T.Datum[] = [];\n  const destinationConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n  const destinationSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n\n  destinationData.forEach((datum, i) => {\n    const hydratedId = getId(datum);\n    const hydratedPreventMove = getPreventMove?.(datum, { isDestinationPanel: true }) ?? false;\n    let isSelected = false;\n    if (destinationSelectedItems[hydratedId] === true) {\n      destinationSelectionItemArray.push(datum);\n      destinationSelectionArray.push(hydratedId);\n      isSelected = true;\n    }\n    let softDeleted = false;\n    if (destinationSoftDeletedItems[hydratedId] === true) {\n      softDeleted = true;\n    }\n    destinationSelectedItemsMap[hydratedId] = { datum, index: i };\n    const configuredItem = {\n      hydratedId,\n      hydratedPreventMove,\n      isSelected,\n      softDeleted,\n      original: datum,\n      localIndex: i,\n      isFirst: i === 0,\n      isLast: i === destinationData.length - 1,\n    } as const;\n    destinationConfiguredData.push(configuredItem);\n    if (!hydratedPreventMove && !softDeleted) {\n      destinationSelectionableData.push(configuredItem);\n      destinationSelectionableDataIds.push(`${hydratedId}`);\n    }\n  });\n  const destinationHasMultipleSelectedItems = destinationSelectionArray.length >= 1;\n  const destinationSelectionableIds = destinationSelectionableDataIds.join(' ');\n\n  return {\n    destinationSelectedItemsMap,\n    destinationSelectionItemArray,\n    destinationSelectionArray,\n    destinationHasMultipleSelectedItems,\n    destinationConfiguredData,\n    destinationSelectionableData,\n    destinationSelectionableDataIds,\n    destinationSelectionableIds,\n  };\n};\ntype ConfigureSourceConfig = {\n  sourceData: DSShuttleV2T.Datum[];\n  sourceSelectedItems: DSShuttleV2T.SelectionMap;\n  sourceSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n  getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n  getPreventMove: DSShuttleV2T.FunctionalHydraters['getPreventMove'];\n};\n\nconst configureSource = ({\n  sourceData,\n  sourceSelectedItems,\n  sourceSoftDeletedItems,\n  getId,\n  getPreventMove,\n}: ConfigureSourceConfig) => {\n  const sourceSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n  const sourceSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n  const sourceSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n  const sourceSelectionItemArray: DSShuttleV2T.Datum[] = [];\n  const sourceConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n  const sourceSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n  sourceData.forEach((datum, i) => {\n    const hydratedId = getId(datum);\n    const hydratedPreventMove = getPreventMove?.(datum, { isDestinationPanel: false }) ?? false;\n    let isSelected = false;\n    if (sourceSelectedItems[hydratedId] === true) {\n      sourceSelectionItemArray.push(datum);\n      sourceSelectionArray.push(hydratedId);\n      isSelected = true;\n    }\n    let softDeleted = false;\n    if (sourceSoftDeletedItems[hydratedId] === true) {\n      softDeleted = true;\n    }\n\n    sourceSelectedItemsMap[hydratedId] = { datum, index: i };\n    const configuredItem = {\n      hydratedId,\n      hydratedPreventMove,\n      isSelected,\n      softDeleted,\n      original: datum,\n      localIndex: i,\n      isFirst: i === 0,\n      isLast: i === sourceData.length - 1,\n    } as const;\n    sourceConfiguredData.push(configuredItem);\n    if (!hydratedPreventMove && !softDeleted) {\n      sourceSelectionableData.push(configuredItem);\n      sourceSelectionableDataIds.push(`${hydratedId}`);\n    }\n  });\n  const sourceHasMultipleSelectedItems = sourceSelectionArray.length >= 1;\n  const sourceSelectionableIds = sourceSelectionableDataIds.join(' ');\n  return {\n    sourceConfiguredData,\n    sourceSelectedItemsMap,\n    sourceSelectionItemArray,\n    sourceSelectionArray,\n    sourceHasMultipleSelectedItems,\n    sourceSelectionableData,\n    sourceSelectionableDataIds,\n    sourceSelectionableIds,\n  };\n};\n\nexport const useDataStructure = <T extends object, H extends object, N extends object, K extends object>(\n  propsFromUser: DSShuttleV2T.InternalProps<T, H, N, K>,\n) => {\n  const {\n    sourceData,\n    sourceSelectedItems,\n    destinationData,\n    destinationSelectedItems,\n    getId,\n    getPreventMove,\n    sourceSoftDeletedItems,\n    destinationSoftDeletedItems,\n  } = propsFromUser;\n  return useMemo(\n    () => ({\n      ...configureSource({ sourceData, sourceSelectedItems, sourceSoftDeletedItems, getId, getPreventMove }),\n      ...configureDestination({\n        destinationData,\n        destinationSelectedItems,\n        destinationSoftDeletedItems,\n        getId,\n        getPreventMove,\n      }),\n    }),\n    [\n      sourceData,\n      sourceSelectedItems,\n      sourceSoftDeletedItems,\n      getId,\n      getPreventMove,\n      destinationData,\n      destinationSelectedItems,\n      destinationSoftDeletedItems,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/config/useStore/useStore.js CHANGED Viewed

@@ -37,6 +37,7 @@ __export(useStore_exports, {
 module.exports = __toCommonJS(useStore_exports);
 var React = __toESM(require("react"));
 var import_ds_zustand_helpers = require("@elliemae/ds-zustand-helpers");
+var import_uid = require("uid");
 var import_react = __toESM(require("fast-deep-equal/react.js"));
 var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
 var import_constants = require("../../constants/index.js");
@@ -54,7 +55,8 @@ const internalAtomDefaultValues = {
   dndDraggingItemMeta: null,
   isDropValid: false,
   sourcePanelLastSelectedItem: null,
-  destinationPanelLastSelectedItem: null
+  destinationPanelLastSelectedItem: null,
+  shuttleInternalId: (0, import_uid.uid)()
 };
 const selectors = (get) => ({
   getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== "",

package/dist/cjs/config/useStore/useStore.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/config/useStore/useStore.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport deepequal from 'fast-deep-equal/react.js';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants/index.js';\nimport { useAutoCalculated } from '../useAutoCalculated/index.js';\nimport { focusAndTabIndexManager } from './focusAndTabIndexManager.js';\n\nconst internalAtomDefaultValues: DSShuttleV2T.InternalAtoms = {\n  focusRegion: REGIONS_FOCUSES.RESET,\n  focusItem: ITEMS_FOCUSES.RESET,\n  focusItemAction: ACTIONS_FOCUSES.RESET,\n  deferFocusUntilFirstRender: false,\n  dropIndicatorPosition: 'none',\n  overId: '',\n  lastActiveId: '',\n  dndDraggingItem: null,\n  dndDraggingItemMeta: null,\n  isDropValid: false,\n  sourcePanelLastSelectedItem: null,\n  destinationPanelLastSelectedItem: null,\n};\n\nconst selectors: ZustandT.SelectorObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Selectors> = (get) => ({\n  getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n  getPanelLastSelectedItem: (isDestinationPanel: boolean) =>\n    isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem,\n});\n\nconst reducers: ZustandT.ReducerObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Reducers> = () => ({});\n\nconst subscribers: ZustandT.Subscribers<DSShuttleV2T.ShuttleInternalStore> = (api) => {\n  api.subscribe(\n    (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get] as const,\n    focusAndTabIndexManager,\n    {\n      equalityFn: deepequal,\n    },\n  );\n};\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n  DSShuttleV2T.InternalProps,\n  DSShuttleV2T.InternalAtoms,\n  DSShuttleV2T.UseAutoCalculatedT,\n  DSShuttleV2T.Selectors,\n  DSShuttleV2T.Reducers\n>();\n\nexport const config = {\n  defaultProps: defaultProps as DSShuttleV2T.InternalProps,\n  internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA6D;AAC7D,mBAAsB;AACtB,mCAAgD;AAChD,uBAAgE;AAChE,+BAAkC;AAClC,qCAAwC;AAExC,MAAM,4BAAwD;AAAA,EAC5D,aAAa,iCAAgB;AAAA,EAC7B,WAAW,+BAAc;AAAA,EACzB,iBAAiB,iCAAgB;AAAA,EACjC,4BAA4B;AAAA,EAC5B,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,6BAA6B;AAAA,EAC7B,kCAAkC;AACpC;AAEA,MAAM,YAAgG,CAAC,SAAS;AAAA,EAC9G,2BAA2B,MAAM,QAAQ,IAAI,GAAG,YAAY,KAAK,IAAI,GAAG,iBAAiB;AAAA,EACzF,0BAA0B,CAAC,uBACzB,qBAAqB,IAAI,GAAG,mCAAmC,IAAI,GAAG;AAC1E;AAEA,MAAM,WAA6F,OAAO,CAAC;AAE3G,MAAM,cAAuE,CAAC,QAAQ;AACpF,MAAI;AAAA,IACF,CAAC,UAAU,CAAC,MAAM,aAAa,MAAM,WAAW,MAAM,iBAAiB,MAAM,GAAG;AAAA,IAChF;AAAA,IACA;AAAA,MACE,YAAY,aAAAA;AAAA,IACd;AAAA,EACF;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,QAAI,yDAMlF;AAEK,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
+  "sourcesContent": ["import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { uid } from 'uid';\nimport deepequal from 'fast-deep-equal/react.js';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants/index.js';\nimport { useAutoCalculated } from '../useAutoCalculated/index.js';\nimport { focusAndTabIndexManager } from './focusAndTabIndexManager.js';\n\nconst internalAtomDefaultValues: DSShuttleV2T.InternalAtoms = {\n  focusRegion: REGIONS_FOCUSES.RESET,\n  focusItem: ITEMS_FOCUSES.RESET,\n  focusItemAction: ACTIONS_FOCUSES.RESET,\n  deferFocusUntilFirstRender: false,\n  dropIndicatorPosition: 'none',\n  overId: '',\n  lastActiveId: '',\n  dndDraggingItem: null,\n  dndDraggingItemMeta: null,\n  isDropValid: false,\n  sourcePanelLastSelectedItem: null,\n  destinationPanelLastSelectedItem: null,\n  shuttleInternalId: uid(),\n};\n\nconst selectors: ZustandT.SelectorObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Selectors> = (get) => ({\n  getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n  getPanelLastSelectedItem: (isDestinationPanel: boolean) =>\n    isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem,\n});\n\nconst reducers: ZustandT.ReducerObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Reducers> = () => ({});\n\nconst subscribers: ZustandT.Subscribers<DSShuttleV2T.ShuttleInternalStore> = (api) => {\n  api.subscribe(\n    (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get] as const,\n    focusAndTabIndexManager,\n    {\n      equalityFn: deepequal,\n    },\n  );\n};\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n  DSShuttleV2T.InternalProps<object, object, object, object>,\n  DSShuttleV2T.InternalAtoms,\n  DSShuttleV2T.UseAutoCalculatedT,\n  DSShuttleV2T.Selectors,\n  DSShuttleV2T.Reducers\n>();\n\nexport const config = {\n  defaultProps: defaultProps as DSShuttleV2T.InternalProps<object, object, object, object>,\n  internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA6D;AAC7D,iBAAoB;AACpB,mBAAsB;AACtB,mCAAgD;AAChD,uBAAgE;AAChE,+BAAkC;AAClC,qCAAwC;AAExC,MAAM,4BAAwD;AAAA,EAC5D,aAAa,iCAAgB;AAAA,EAC7B,WAAW,+BAAc;AAAA,EACzB,iBAAiB,iCAAgB;AAAA,EACjC,4BAA4B;AAAA,EAC5B,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,6BAA6B;AAAA,EAC7B,kCAAkC;AAAA,EAClC,uBAAmB,gBAAI;AACzB;AAEA,MAAM,YAAgG,CAAC,SAAS;AAAA,EAC9G,2BAA2B,MAAM,QAAQ,IAAI,GAAG,YAAY,KAAK,IAAI,GAAG,iBAAiB;AAAA,EACzF,0BAA0B,CAAC,uBACzB,qBAAqB,IAAI,GAAG,mCAAmC,IAAI,GAAG;AAC1E;AAEA,MAAM,WAA6F,OAAO,CAAC;AAE3G,MAAM,cAAuE,CAAC,QAAQ;AACpF,MAAI;AAAA,IACF,CAAC,UAAU,CAAC,MAAM,aAAa,MAAM,WAAW,MAAM,iBAAiB,MAAM,GAAG;AAAA,IAChF;AAAA,IACA;AAAA,MACE,YAAY,aAAAA;AAAA,IACd;AAAA,EACF;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,QAAI,yDAMlF;AAEK,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
   "names": ["deepequal"]
 }

package/dist/cjs/config/useValidateProps.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { DSShuttleV2Name } from '../constants/index.js';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSShuttleV2T.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSShuttleV2Name);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAE/C,uBAAgC;AAGzB,MAAM,mBAAmB,CAAC,OAA2B,cAAgD;AAE1G,8DAA+B,OAAO,WAAW,gCAAe;AAClE;",
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { DSShuttleV2Name } from '../constants/index.js';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = <T extends object, H extends object, N extends object, K extends object>(\n  props: DSShuttleV2T.Props<T, H, N, K>,\n  propTypes: WeakValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSShuttleV2Name);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAE/C,uBAAgC;AAGzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,8DAA+B,OAAO,WAAW,gCAAe;AAClE;",
   "names": []
 }

package/dist/cjs/constants/index.js CHANGED Viewed

@@ -30,14 +30,57 @@ var constants_exports = {};
 __export(constants_exports, {
   ACTIONS_FOCUSES: () => ACTIONS_FOCUSES,
   DATA_TESTID: () => DATA_TESTID,
+  DSShuttleV2DataTestIds: () => DSShuttleV2DataTestIds,
   DSShuttleV2Name: () => DSShuttleV2Name,
+  DSShuttleV2Slots: () => DSShuttleV2Slots,
   DropIndicatorPosition: () => DropIndicatorPosition,
   ITEMS_FOCUSES: () => ITEMS_FOCUSES,
-  REGIONS_FOCUSES: () => REGIONS_FOCUSES
+  REGIONS_FOCUSES: () => REGIONS_FOCUSES,
+  SHUTTLE_IDS: () => SHUTTLE_IDS
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
 const DSShuttleV2Name = "DSShuttlev2";
+const DSShuttleV2Slots = {
+  HEADER_SEARCH_ICON: "header-search-icon",
+  WRAPPER: "wrapper",
+  PANEL_WRAPPER: "panel-wrapper",
+  LIST_WRAPPER: "list-wrapper",
+  ITEM_WRAPPER: "item-wrapper",
+  ITEM_CHECKBOX: "item-checkbox",
+  ITEM_ICON_WRAPPER: "item-icon-wrapper",
+  ITEM_LABEL_WRAPPER: "item-label-wrapper",
+  ITEM_MIDSECTION_WRAPPER: "item-midsection-wrapper",
+  ITEM_SELECTION: "item-selection",
+  ITEM_ACTIONS_WRAPPER: "item-actions-wrapper",
+  ITEM_ACTION_WRAPPER: "item-action-wrapper",
+  ITEM_ACTION_BTN: "item-action-btn",
+  ITEM_ACTION_BTN_DRILLDOWN_ICON: "item-action-btn-drilldown-icon",
+  ITEM_ACTION_BTN_TO_SOURCE_ICON: "item-action-btn-to-source-icon",
+  ITEM_ACTION_BTN_TO_DESTINATION_ICON: "item-action-btn-to-destination-icon",
+  LIST_BOTTOM_LOADING_MORE: "list-bottom-loading-more",
+  LIST_BOTTOM_LOAD_MORE_BTN: "list-bottom-load-more-btn",
+  LIST_WRAPPER_BOTTOM: "list-wrapper-bottom",
+  EMPTY_LIST_WRAPPER: "empty-list-wrapper",
+  ITEMS_WRAPPER: "items-wrapper",
+  LOADING_LIST_WRAPPER: "loading-list-wrapper",
+  MOVE_MULTIPLE_WRAPPER: "move-multiple-wrapper",
+  MOVE_MULTIPLE_BTN: "move-multiple-btn",
+  LIST_WRAPPER_MID: "list-wrapper-mid",
+  LIST_WRAPPER_MID_SCROLLER: "list-wrapper-mid-scroller",
+  LIST_WRAPPER_TOP: "list-wrapper-top",
+  AREA_SEARCH_WRAPPER: "area-search-wrapper",
+  AREA_SEARCH_BAR: "area-search-bar",
+  AREA_SELECTION_HEADER: "area-selection-header",
+  AREA_SELECTION_HEADER_COUNT_LABEL: "area-selection-header-count-label",
+  DRAG_AND_DROP_HANDLE: "drag-and-drop-handle"
+};
+const SHUTTLE_IDS = {
+  SOURCE_PANEL_SEARCH: "ds-shuttle-v2-source-panel-search",
+  DESTINATION_PANEL_SEARCH: "ds-shuttle-v2-destination-panel-search"
+};
+const DSShuttleV2DataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(DSShuttleV2Name, DSShuttleV2Slots);
 const REGIONS_FOCUSES = {
   SOURCE_HEADER: "source-header",
   SOURCE_PANEL: "source-panel",

package/dist/cjs/constants/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSShuttleV2Name = 'DSShuttlev2';\nexport const REGIONS_FOCUSES = {\n  SOURCE_HEADER: 'source-header',\n  SOURCE_PANEL: 'source-panel',\n  SOURCE_PANEL_ITEM: 'source-panel-item',\n  SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n  SOURCE_BOTTOM: 'source-bottom',\n  DESTINATION_HEADER: 'destination-header',\n  DESTINATION_PANEL: 'destination-panel',\n  DESTINATION_PANEL_ITEM: 'destination-panel-item',\n  DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n  DESTINATION_BOTTOM: 'destination-bottom',\n  RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n  MOVE_BTN: 'move-btn',\n  DRILLDOWN_BTN: 'drilldown-btn',\n  DRAG_N_DROP: 'drag-n-drop',\n  PARENT: 'parent',\n  RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n  LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n  LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n  GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n  RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n  SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n\nexport const DropIndicatorPosition = {\n  None: 'none',\n  Before: 'before',\n  After: 'after',\n  Inside: 'inside',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,mBAAmB,CAAC,EAAE,WAAW,MAA8B;AAAA,EAC/D,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n  HEADER_SEARCH_ICON: 'header-search-icon',\n  WRAPPER: 'wrapper',\n  PANEL_WRAPPER: 'panel-wrapper',\n  LIST_WRAPPER: 'list-wrapper',\n  ITEM_WRAPPER: 'item-wrapper',\n  ITEM_CHECKBOX: 'item-checkbox',\n  ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n  ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n  ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n  ITEM_SELECTION: 'item-selection',\n  ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n  ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n  ITEM_ACTION_BTN: 'item-action-btn',\n  ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n  ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n  ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n  LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n  LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n  LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n  EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n  ITEMS_WRAPPER: 'items-wrapper',\n  LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n  MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n  MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n  LIST_WRAPPER_MID: 'list-wrapper-mid',\n  LIST_WRAPPER_MID_SCROLLER: 'list-wrapper-mid-scroller',\n  LIST_WRAPPER_TOP: 'list-wrapper-top',\n  AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n  AREA_SEARCH_BAR: 'area-search-bar',\n  AREA_SELECTION_HEADER: 'area-selection-header',\n  AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n  DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n} as const;\n\nexport const SHUTTLE_IDS = {\n  SOURCE_PANEL_SEARCH: 'ds-shuttle-v2-source-panel-search',\n  DESTINATION_PANEL_SEARCH: 'ds-shuttle-v2-destination-panel-search',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n\nexport const REGIONS_FOCUSES = {\n  SOURCE_HEADER: 'source-header',\n  SOURCE_PANEL: 'source-panel',\n  SOURCE_PANEL_ITEM: 'source-panel-item',\n  SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n  SOURCE_BOTTOM: 'source-bottom',\n  DESTINATION_HEADER: 'destination-header',\n  DESTINATION_PANEL: 'destination-panel',\n  DESTINATION_PANEL_ITEM: 'destination-panel-item',\n  DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n  DESTINATION_BOTTOM: 'destination-bottom',\n  RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n  MOVE_BTN: 'move-btn',\n  DRILLDOWN_BTN: 'drilldown-btn',\n  DRAG_N_DROP: 'drag-n-drop',\n  PARENT: 'parent',\n  RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n  LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n  LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n  GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n  RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n  SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n\nexport const DropIndicatorPosition = {\n  None: 'none',\n  Before: 'before',\n  After: 'after',\n  Inside: 'inside',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,qCAAqC;AAAA,EACrC,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,sBAAsB;AACxB;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAC5B;AAEO,MAAM,6BAAyB,0CAAwB,iBAAiB,gBAAgB;AAExF,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,mBAAmB,CAAC,EAAE,WAAW,MAA8B;AAAA,EAC/D,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
   "names": []
 }

package/dist/cjs/index.js CHANGED Viewed

@@ -29,15 +29,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DSShuttleV2: () => import_DSShuttleV2.DSShuttleV2,
-  DSShuttleV2DataTestIds: () => import_DSShuttleV2Definitions.DSShuttleV2DataTestIds,
-  DSShuttleV2Name: () => import_DSShuttleV2Definitions.DSShuttleV2Name,
-  DSShuttleV2Slots: () => import_DSShuttleV2Definitions.DSShuttleV2Slots,
+  DSShuttleV2DataTestIds: () => import_constants.DSShuttleV2DataTestIds,
+  DSShuttleV2Name: () => import_constants.DSShuttleV2Name,
+  DSShuttleV2Slots: () => import_constants.DSShuttleV2Slots,
   DSShuttleV2WithSchema: () => import_DSShuttleV2.DSShuttleV2WithSchema,
   ShuttleItem: () => import_exported_related.ShuttleItem
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
-var import_DSShuttleV2Definitions = require("./config/DSShuttleV2Definitions.js");
+var import_constants = require("./constants/index.js");
 var import_DSShuttleV2 = require("./DSShuttleV2.js");
 var import_exported_related = require("./exported-related/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSShuttleV2Name, DSShuttleV2Slots, DSShuttleV2DataTestIds } from './config/DSShuttleV2Definitions.js';\nexport { DSShuttleV2, DSShuttleV2WithSchema } from './DSShuttleV2.js';\nexport { ShuttleItem, type ShuttleItemProps } from './exported-related/index.js';\nexport { type DSShuttleV2T } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oCAA0E;AAC1E,yBAAmD;AACnD,8BAAmD;",
+  "sourcesContent": ["export { DSShuttleV2Name, DSShuttleV2Slots, DSShuttleV2DataTestIds } from './constants/index.js';\nexport { DSShuttleV2, DSShuttleV2WithSchema } from './DSShuttleV2.js';\nexport { ShuttleItem, type ShuttleItemProps } from './exported-related/index.js';\nexport { type DSShuttleV2T } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0E;AAC1E,yBAAmD;AACnD,8BAAmD;",
   "names": []
 }

package/dist/cjs/parts/Dnd/DndHandle.js CHANGED Viewed

@@ -39,11 +39,10 @@ var import_react2 = __toESM(require("react"));
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../constants/index.js");
-var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions.js");
 var import_useStore = require("../../config/useStore/useStore.js");
 const StyledGripperButtonOrOverlay = (0, import_ds_system.styled)("div", {
-  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
-  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.DRAG_AND_DROP_HANDLE
+  name: import_constants.DSShuttleV2Name,
+  slot: import_constants.DSShuttleV2Slots.DRAG_AND_DROP_HANDLE
 })`
   cursor: ${({ isActive, isDragOverlay, disabled }) => {
   if (isActive || isDragOverlay) return "grabbing";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Dnd/DndHandle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DjB;AAlBF;AA5CJ,IAAAA,gBAAkB;AAClB,sBAAgC;AAEhC,uBAAkC;AAClC,uBAA4B;AAC5B,oCAAkD;AAClD,sBAA8B;AAEvB,MAAM,mCAA+B,yBAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;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,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,cAAAC,QAAM,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,cAAU,4BAAU,UAAU,oBAAoB,mBAAmB;AAAA,MACrE,UAAU;AAAA,MACV,eAAa,6BAAY;AAAA,MACzB,IAAI,GAAG,EAAE;AAAA,MACT,KAAK,GAAG,EAAE;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,4CAAC,mCAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,EAC3G;AAEJ;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DjB;AAlBF;AA3CJ,IAAAA,gBAAkB;AAClB,sBAAgC;AAEhC,uBAAkC;AAClC,uBAA+D;AAC/D,sBAA8B;AAEvB,MAAM,mCAA+B,yBAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,kCAAiB;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,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,cAAAC,QAAM,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,cAAU,4BAAU,UAAU,oBAAoB,mBAAmB;AAAA,MACrE,UAAU;AAAA,MACV,eAAa,6BAAY;AAAA,MACzB,IAAI,GAAG,EAAE;AAAA,MACT,KAAK,GAAG,EAAE;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,4CAAC,mCAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,EAC3G;AAEJ;",
   "names": ["import_react", "React"]
 }

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

@@ -38,10 +38,10 @@ var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_system = require("@elliemae/ds-system");
-var import_DSShuttleV2Definitions = require("../config/DSShuttleV2Definitions.js");
+var import_constants = require("../constants/index.js");
 var import_useStore = require("../config/useStore/index.js");
 var import_useFocusTracker = require("../config/useFocusTracker/index.js");
-const StyledIconButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.HEADER_SEARCH_ICON })``;
+const StyledIconButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.HEADER_SEARCH_ICON })``;
 const Header = import_react.default.memo((panelMetaInfo) => {
   const { isDestinationPanel } = panelMetaInfo;
   const HeaderRenderer = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.DestinationHeader : state.SourceHeader);
@@ -51,6 +51,7 @@ const Header = import_react.default.memo((panelMetaInfo) => {
   const onSearchBarOpen = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar
   );
+  const shuttleId = (0, import_useStore.useInternalStore)((state) => state.shuttleInternalId);
   const isSearchBarOpen = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar
   );
@@ -73,6 +74,7 @@ const Header = import_react.default.memo((panelMetaInfo) => {
   }, [onSearchBarOpen]);
   const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
   const getOwnerPropsArguments = (0, import_react.useCallback)(() => panelMetaInfo, [panelMetaInfo]);
+  const searchIconAriaControls = isDestinationPanel ? `${import_constants.SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}` : `${import_constants.SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { onFocus: onHeaderFocus, cols, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderRenderer, { ...headerRendererProps }),
     onSearchBarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -83,6 +85,8 @@ const Header = import_react.default.memo((panelMetaInfo) => {
         onClick: handleFilterClick,
         w: 24,
         h: 24,
+        "aria-controls": searchIconAriaControls,
+        "aria-expanded": isSearchBarOpen,
         getOwnerProps,
         getOwnerPropsArguments,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, { width: "1.077rem", height: "1.077rem" })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Header.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDnB;AAnDJ,mBAAmC;AACnC,qBAAqB;AACrB,sBAAuB;AACvB,0BAIO;AACP,uBAAuB;AACvB,oCAAkD;AAClD,sBAA8B;AAC9B,6BAAgC;AAEhC,MAAM,uBAAmB,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,mBAAmB,CAAC;AACzG,MAAM,SAAS,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AAC9E,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,qBAAiB,+BAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,0BAAsB;AAAA,IAAc,CAAC,UACzC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC/F,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,CAAC,UAA+D;AAC9D,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI,gBAAiB,WAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,SACE,6CAAC,uBAAK,SAAS,eAAe,MAC5B;AAAA,gDAAC,kBAAgB,GAAG,qBAAqB;AAAA,IACxC,kBACC,4CAAC,uBAAK,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,sDAAC,0BAAO,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC7C,GACF,IACE;AAAA,KACN;AAEJ,CAAC;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAzDJ,mBAAmC;AACnC,qBAAqB;AACrB,sBAAuB;AACvB,0BAIO;AACP,uBAAuB;AACvB,uBAA+D;AAC/D,sBAAgD;AAChD,6BAAgC;AAEhC,MAAM,uBAAmB,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,mBAAmB,CAAC;AACzG,MAAM,SAAS,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AAC9E,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,qBAAiB,+BAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,0BAAsB;AAAA,IAAc,CAAC,UACzC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,iBAAiB;AACrE,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC/F,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,CAAC,UAA+D;AAC9D,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI,gBAAiB,WAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,yBAAyB,qBAC3B,GAAG,6BAAY,wBAAwB,IAAI,SAAS,KACpD,GAAG,6BAAY,mBAAmB,IAAI,SAAS;AAEnD,SACE,6CAAC,uBAAK,SAAS,eAAe,MAC5B;AAAA,gDAAC,kBAAgB,GAAG,qBAAqB;AAAA,IACxC,kBACC,4CAAC,uBAAK,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,sDAAC,0BAAO,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC7C,GACF,IACE;AAAA,KACN;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -115,7 +115,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.SortableContext, { ...containerSortableContextProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }),
       (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, zIndex: theme.zIndex.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: dndDraggingItemMeta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemOverlay.ItemOverlay, { ...dndDraggingItemMeta }) : null }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, zIndex: theme.zIndex.tooltip, children: dndDraggingItemMeta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemOverlay.ItemOverlay, { ...dndDraggingItemMeta }) : null }),
         document.body
       )
     ] }) });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["over", "active", "React"]
 }

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

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(withConditionalUseSortable_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
-const withConditionalUseSortable = (Component) => function(props) {
+const withConditionalUseSortable = (Component) => function WithConditionalUseSortable(props) {
   const { datumInternalMeta } = props;
   const { hydratedId } = datumInternalMeta;
   const useSortableHelpers = (0, import_ds_drag_and_drop.useSortable)({ id: hydratedId });

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

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

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

@@ -39,7 +39,6 @@ var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_hooks_headless_tooltip = require("@elliemae/ds-hooks-headless-tooltip");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = __toESM(require("react"));
-var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions.js");
 var import_useStore = require("../../config/useStore/index.js");
 var import_constants = require("../../constants/index.js");
 var import_DndHandle = require("../Dnd/DndHandle.js");
@@ -66,7 +65,7 @@ const focusRing = import_ds_system.css`
   outline: 2px solid ${({ theme }) => theme.colors.brand["700"]};
   outline-offset: -2px;
 `;
-const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_WRAPPER })`
+const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_WRAPPER })`
   min-height: 2.769rem;
   position: relative;
   background-color: white;
@@ -86,7 +85,7 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: im
   ${({ isDragging }) => isDragging && cssDisabled}
 `;
-const ItemSelectionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.ITEM_CHECKBOX })`
+const ItemSelectionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_CHECKBOX })`
   height: 100%;
   &:focus {
     outline: none;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/Item.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React", "useInnerRefActionHandlers"]
 }