@elliemae/ds-shuttle-v2 3.70.0-next.7 → 3.70.0-next.71

package/dist/esm/DSShuttleV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSShuttleV2.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACWC;AAXxB,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,kCAAkC;AAG3C,MAAM,yBAAyB,YAAY,aAAa,MAAM;AAE9D,MAAM,cAAc,CAClB,UACsB,oBAAC,0BAAwB,GAAG,OAAO;AAE3D,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAElD,sBAAsB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 = <D extends Record<string, unknown> = Record<string, unknown>>(\n  props: DSShuttleV2T.Props<D>,\n  // The internal zustand-wrapped tree operates on the default (erased) datum shape; the public\n  // surface stays generic over D so consumers get typed data. Bridge the two with a single cast.\n): React.JSX.Element => <DSShuttleV2WithZustand {...(props as DSShuttleV2T.Props)} />;\n\nDSShuttleV2.displayName = 'DSShuttlev2';\nconst DSShuttleV2WithSchema = describe(DSShuttleV2);\n\nDSShuttleV2WithSchema.propTypes = DSShuttleV2PropTypesSchema;\n\nexport { DSShuttleV2, DSShuttleV2WithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACaC;AAbxB,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,kCAAkC;AAG3C,MAAM,yBAAyB,YAAY,aAAa,MAAM;AAE9D,MAAM,cAAc,CAClB,UAGsB,oBAAC,0BAAwB,GAAI,OAA8B;AAEnF,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAElD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/esm/config/useAutoCalculated/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useAutoCalculated/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAExB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAE/B,MAAM,oBAAoB,CAC/B,sBACG;AACH,QAAM,iBAAiB,iBAAiB,iBAAiB;AACzD,QAAM,cAAc,sBAAsB;AAE1C,SAAO,QAAQ,OAAO,EAAE,GAAG,gBAAgB,GAAG,YAAY,IAAI,CAAC,gBAAgB,WAAW,CAAC;AAC7F;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAExB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAE/B,MAAM,oBAAoB,CAAC,sBAAkD;AAClF,QAAM,iBAAiB,iBAAiB,iBAAiB;AACzD,QAAM,cAAc,sBAAsB;AAE1C,SAAO,QAAQ,OAAO,EAAE,GAAG,gBAAgB,GAAG,YAAY,IAAI,CAAC,gBAAgB,WAAW,CAAC;AAC7F;",
   "names": []
 }

package/dist/esm/config/useAutoCalculated/useDataStructure.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useAutoCalculated/useDataStructure.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAUxB,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,8BAA4F,CAAC;AACnG,QAAM,4BAAwE,CAAC;AAC/E,QAAM,kCAA8E,CAAC;AAErF,QAAM,gCAAsD,CAAC;AAC7D,QAAM,4BAA4D,CAAC;AACnE,QAAM,+BAA+D,CAAC;AAEtE,kBAAgB,QAAQ,CAAC,OAAO,MAAM;AACpC,UAAM,aAAa,MAAM,KAAK;AAC9B,UAAM,sBAAsB,iBAAiB,OAAO,EAAE,oBAAoB,KAAK,CAAC,KAAK;AACrF,QAAI,aAAa;AACjB,QAAI,yBAAyB,UAAU,MAAM,MAAM;AACjD,oCAA8B,KAAK,KAAK;AACxC,gCAA0B,KAAK,UAAU;AACzC,mBAAa;AAAA,IACf;AACA,QAAI,cAAc;AAClB,QAAI,4BAA4B,UAAU,MAAM,MAAM;AACpD,oBAAc;AAAA,IAChB;AACA,gCAA4B,UAAU,IAAI,EAAE,OAAO,OAAO,EAAE;AAC5D,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM,gBAAgB,SAAS;AAAA,IACzC;AACA,8BAA0B,KAAK,cAAc;AAC7C,QAAI,CAAC,uBAAuB,CAAC,aAAa;AACxC,mCAA6B,KAAK,cAAc;AAChD,sCAAgC,KAAK,GAAG,UAAU,EAAE;AAAA,IACtD;AAAA,EACF,CAAC;AACD,QAAM,sCAAsC,0BAA0B,UAAU;AAChF,QAAM,8BAA8B,gCAAgC,KAAK,GAAG;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AASA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,yBAAuF,CAAC;AAC9F,QAAM,uBAAmE,CAAC;AAC1E,QAAM,6BAAyE,CAAC;AAEhF,QAAM,2BAAiD,CAAC;AACxD,QAAM,uBAAuD,CAAC;AAC9D,QAAM,0BAA0D,CAAC;AACjE,aAAW,QAAQ,CAAC,OAAO,MAAM;AAC/B,UAAM,aAAa,MAAM,KAAK;AAC9B,UAAM,sBAAsB,iBAAiB,OAAO,EAAE,oBAAoB,MAAM,CAAC,KAAK;AACtF,QAAI,aAAa;AACjB,QAAI,oBAAoB,UAAU,MAAM,MAAM;AAC5C,+BAAyB,KAAK,KAAK;AACnC,2BAAqB,KAAK,UAAU;AACpC,mBAAa;AAAA,IACf;AACA,QAAI,cAAc;AAClB,QAAI,uBAAuB,UAAU,MAAM,MAAM;AAC/C,oBAAc;AAAA,IAChB;AAEA,2BAAuB,UAAU,IAAI,EAAE,OAAO,OAAO,EAAE;AACvD,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM,WAAW,SAAS;AAAA,IACpC;AACA,yBAAqB,KAAK,cAAc;AACxC,QAAI,CAAC,uBAAuB,CAAC,aAAa;AACxC,8BAAwB,KAAK,cAAc;AAC3C,iCAA2B,KAAK,GAAG,UAAU,EAAE;AAAA,IACjD;AAAA,EACF,CAAC;AACD,QAAM,iCAAiC,qBAAqB,UAAU;AACtE,QAAM,yBAAyB,2BAA2B,KAAK,GAAG;AAClE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB,CAC9B,kBACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG,gBAAgB,EAAE,YAAY,qBAAqB,wBAAwB,OAAO,eAAe,CAAC;AAAA,MACrG,GAAG,qBAAqB;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/config/useStore/useStore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useStore/useStore.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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,\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"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qCAAoD;AAC7D,SAAS,WAAW;AACpB,OAAO,eAAe;AACtB,SAAS,oBAAuC;AAChD,SAAS,iBAAiB,iBAAiB,qBAAqB;AAChE,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AAExC,MAAM,4BAAwD;AAAA,EAC5D,aAAa,gBAAgB;AAAA,EAC7B,WAAW,cAAc;AAAA,EACzB,iBAAiB,gBAAgB;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,mBAAmB,IAAI;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;AAAA,IACd;AAAA,EACF;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,IAAI,8BAMlF;AAEK,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/dist/esm/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAE/C,SAAS,uBAAuB;AAGzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAE/C,SAAS,uBAAuB;AAGzB,MAAM,mBAAmB,CAAC,OAA2B,cAAgD;AAE1G,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -12,6 +12,7 @@ const DSShuttleV2Slots = {
   ITEM_LABEL_WRAPPER: "item-label-wrapper",
   ITEM_MIDSECTION_WRAPPER: "item-midsection-wrapper",
   ITEM_SELECTION: "item-selection",
+  ITEM_SELECTION_CHECKBOX_UI: "item-selection-checkbox-ui",
   ITEM_ACTIONS_WRAPPER: "item-actions-wrapper",
   ITEM_ACTION_WRAPPER: "item-action-wrapper",
   ITEM_ACTION_BTN: "item-action-btn",
@@ -26,13 +27,14 @@ const DSShuttleV2Slots = {
   LOADING_LIST_WRAPPER: "loading-list-wrapper",
   MOVE_MULTIPLE_WRAPPER: "move-multiple-wrapper",
   MOVE_MULTIPLE_BTN: "move-multiple-btn",
+  MOVE_MULTIPLE_LIVE_REGION: "move-multiple-live-region",
   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_WRAPPER: "drag-and-drop-handle-wrapper",
   DRAG_AND_DROP_HANDLE: "drag-and-drop-handle",
   ARIA_LIVE_PANEL_CENTER: "aria-live-panel-center"
 };

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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  ARIA_LIVE_PANEL_CENTER: 'aria-live-panel-center',\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;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;AAAA,EACtB,wBAAwB;AAC1B;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAC5B;AAEO,MAAM,yBAAyB,wBAAwB,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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_SELECTION_CHECKBOX_UI: 'item-selection-checkbox-ui',\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  MOVE_MULTIPLE_LIVE_REGION: 'move-multiple-live-region',\n  LIST_WRAPPER_MID: 'list-wrapper-mid',\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_WRAPPER: 'drag-and-drop-handle-wrapper',\n  DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n  ARIA_LIVE_PANEL_CENTER: 'aria-live-panel-center',\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;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,4BAA4B;AAAA,EAC5B,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,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,8BAA8B;AAAA,EAC9B,sBAAsB;AAAA,EACtB,wBAAwB;AAC1B;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAC5B;AAEO,MAAM,yBAAyB,wBAAwB,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/esm/package.json

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

package/dist/esm/parts/Dnd/DndHandle.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
-import React2 from "react";
 import { GripperVertical } from "@elliemae/ds-icons";
-import { styled, mergeRefs } from "@elliemae/ds-system";
-import { DATA_TESTID, DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
+import { mergeRefs, styled } from "@elliemae/ds-system";
+import React2 from "react";
 import { usePropsStore } from "../../config/useStore/useStore.js";
+import { DATA_TESTID, DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
 const StyledGripperButtonOrOverlay = styled("div", {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE
@@ -19,37 +19,63 @@ const StyledGripperButtonOrOverlay = styled("div", {
   display: flex;
   align-items: center;
   touch-action: none;
+  display: flex;
+  min-width: 24px;
+  justify-content: center;
   &:focus {
-    outline: 1px solid brand-700;
+    .em-ds-icon {
+      outline: 2px solid brand-700;
+    }
   }
 `;
+const StyledGripperWrapper = styled("div", {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE_WRAPPER
+})`
+  display: flex;
+  height: 100%;
+  position: relative;
+`;
 const DragHandle = (props) => {
   const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers, ariaLabelledby } = props;
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = React2.useCallback(() => props, [props]);
-  return /* @__PURE__ */ createElement(
-    StyledGripperButtonOrOverlay,
+  const stopPropagation = React2.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    StyledGripperWrapper,
     {
-      ...!disabled && useSortableHelpers ? {
-        ...useSortableHelpers.listeners,
-        ...useSortableHelpers.attributes
-      } : {},
-      "aria-labelledby": ariaLabelledby,
-      isActive: isDndActive,
-      innerRef: mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef),
-      tabIndex: -1,
-      "data-testid": DATA_TESTID.SHUTTLE_DRAG_HANDLE,
-      id: `${id}-drag-handle`,
-      key: `${id}-drag-handle`,
-      disabled,
+      onClick: stopPropagation,
+      onMouseDown: stopPropagation,
       getOwnerProps,
-      getOwnerPropsArguments
-    },
-    /* @__PURE__ */ jsx(GripperVertical, { size: "s", color: isDragging || disabled ? ["neutral", "500"] : ["brand-primary", "800"] })
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ createElement(
+        StyledGripperButtonOrOverlay,
+        {
+          ...!disabled && useSortableHelpers ? {
+            ...useSortableHelpers.listeners,
+            ...useSortableHelpers.attributes
+          } : {},
+          "aria-labelledby": ariaLabelledby,
+          isActive: isDndActive,
+          innerRef: mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef),
+          tabIndex: -1,
+          "data-testid": DATA_TESTID.SHUTTLE_DRAG_HANDLE,
+          id: `${id}-drag-handle`,
+          key: `${id}-drag-handle`,
+          disabled,
+          getOwnerProps,
+          getOwnerPropsArguments
+        },
+        /* @__PURE__ */ jsx(GripperVertical, { color: isDragging || disabled ? ["neutral", "500"] : ["brand-primary", "800"] })
+      )
+    }
   );
 };
 export {
   DragHandle,
-  StyledGripperButtonOrOverlay
+  StyledGripperButtonOrOverlay,
+  StyledGripperWrapper
 };
 //# sourceMappingURL=DndHandle.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DndHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID, 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  ariaLabelledby?: string;\n}> = (props) => {\n  const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers, ariaLabelledby } = 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-labelledby={ariaLabelledby}\n      isActive={isDndActive}\n      innerRef={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n      tabIndex={-1}\n      data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      disabled={disabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <GripperVertical size=\"s\" color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n    </StyledGripperButtonOrOverlay>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+DjB;AAlBF;AA5CJ,OAAOA,YAAW;AAClB,SAAS,uBAAuB;AAEhC,SAAS,QAAQ,iBAAiB;AAClC,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,qBAAqB;AAEvB,MAAM,+BAA+B,OAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,YAKW,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY,cAAe,QAAO;AACtC,MAAI,SAAU,QAAO;AACrB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI,MAAM,aAQR,CAAC,UAAU;AACd,QAAM,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,oBAAoB,eAAe,IAAI;AAExG,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,CAAC,YAAY,qBACd;AAAA,QACE,GAAG,mBAAmB;AAAA,QACtB,GAAG,mBAAmB;AAAA,MACxB,IACA,CAAC;AAAA,MACL,mBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,UAAU,UAAU,UAAU,oBAAoB,mBAAmB;AAAA,MACrE,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB,IAAI,GAAG,EAAE;AAAA,MACT,KAAK,GAAG,EAAE;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oBAAC,mBAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,EAC3G;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\nimport { DATA_TESTID, DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.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  display: flex;\n  min-width: 24px;\n  justify-content: center;\n  &:focus {\n    .em-ds-icon {\n      outline: 2px solid brand-700;\n    }\n  }\n`;\n\nexport const StyledGripperWrapper = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE_WRAPPER,\n})`\n  display: flex;\n  height: 100%;\n  position: relative;\n`;\n\nexport const DragHandle: React.ComponentType<DSShuttleV2T.DragHandleArguments> = (props) => {\n  const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers, ariaLabelledby } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n  // Interacting with the drag handle must not bubble up to the row's onClick (selectItem) /\n  // onMouseDown handlers \u2014 grabbing the handle should not toggle item selection.\n  const stopPropagation = React.useCallback((event: React.SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <StyledGripperWrapper\n      onClick={stopPropagation}\n      onMouseDown={stopPropagation}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledGripperButtonOrOverlay\n        {...(!disabled && useSortableHelpers\n          ? {\n              ...useSortableHelpers.listeners,\n              ...useSortableHelpers.attributes,\n            }\n          : {})}\n        aria-labelledby={ariaLabelledby}\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 color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n      </StyledGripperButtonOrOverlay>\n    </StyledGripperWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiFf;AAlBF;AA9DN,SAAS,uBAAuB;AAChC,SAAS,WAAW,cAAc;AAClC,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,iBAAiB,wBAAwB;AAGxD,MAAM,+BAA+B,OAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,YAKW,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY,cAAe,QAAO;AACtC,MAAI,SAAU,QAAO;AACrB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,aAAoE,CAAC,UAAU;AAC1F,QAAM,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,oBAAoB,eAAe,IAAI;AAExG,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAIrE,QAAM,kBAAkBA,OAAM,YAAY,CAAC,UAAgC;AACzE,UAAM,gBAAgB;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,CAAC,YAAY,qBACd;AAAA,YACE,GAAG,mBAAmB;AAAA,YACtB,GAAG,mBAAmB;AAAA,UACxB,IACA,CAAC;AAAA,UACL,mBAAiB;AAAA,UACjB,UAAU;AAAA,UACV,UAAU,UAAU,UAAU,oBAAoB,mBAAmB;AAAA,UACrE,UAAU;AAAA,UACV,eAAa,YAAY;AAAA,UACzB,IAAI,GAAG,EAAE;AAAA,UACT,KAAK,GAAG,EAAE;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAEA,oBAAC,mBAAgB,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,MAClG;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Dnd/DragOverlay.js

@@ -11,7 +11,7 @@ const DragOverlay = ({ id, isDragging, isDndActive }) => /* @__PURE__ */ jsx(
     tabIndex: -1,
     "data-testid": DATA_TESTID.SHUTTLE_DRAG_HANDLE,
     id: `${id}-drag-overlay`,
-    children: /* @__PURE__ */ jsx(GripperVertical, { size: "s", color: isDragging ? ["neutral", "500"] : ["brand-primary", "800"] })
+    children: /* @__PURE__ */ jsx(GripperVertical, { color: isDragging ? ["neutral", "500"] : ["brand-primary", "800"] })
   },
   `${id}-drag-overlay`
 );

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

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

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

@@ -6,14 +6,11 @@ import { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from "@
 import { createPortal } from "react-dom";
 import { useInternalStore, usePropsStore } from "../../config/useStore/index.js";
 import { ItemOverlay } from "../Item/ItemOverlay.js";
-const withConditionalDnDRowContext = (Component) => (props) => {
+const DnDRowContext = ({ Component, ...props }) => {
   const { isDestinationPanel } = props;
   const itemList = usePropsStore(
     (state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
   );
-  const withDragNDrop = usePropsStore(
-    (state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
-  );
   const theme = useContext(ThemeContext);
   const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);
   const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);
@@ -37,7 +34,6 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   );
   const treeConfig = React2.useMemo(() => {
     const configuredItemList = itemList.map((item, i) => ({
-      // dnd
       uid: item.hydratedId,
       depth: 0,
       parentId: null,
@@ -78,15 +74,21 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     setLastActiveId,
     setOverId
   ]);
-  if (withDragNDrop)
-    return /* @__PURE__ */ jsx(DndContext, { ...dndContextProps, children: /* @__PURE__ */ jsxs(SortableContext, { ...containerSortableContextProps, children: [
-      /* @__PURE__ */ jsx(Component, { ...props }),
-      createPortal(
-        /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, zIndex: theme.zIndex.tooltip, children: dndDraggingItemMeta ? /* @__PURE__ */ jsx(ItemOverlay, { ...dndDraggingItemMeta }) : null }),
-        document.body
-      )
-    ] }) });
-  return /* @__PURE__ */ jsx(Component, { ...props });
+  return /* @__PURE__ */ jsx(DndContext, { ...dndContextProps, children: /* @__PURE__ */ jsxs(SortableContext, { ...containerSortableContextProps, children: [
+    /* @__PURE__ */ jsx(Component, { ...props }),
+    createPortal(
+      /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, zIndex: theme.zIndex.tooltip, children: dndDraggingItemMeta ? /* @__PURE__ */ jsx(ItemOverlay, { ...dndDraggingItemMeta }) : null }),
+      document.body
+    )
+  ] }) });
+};
+const withConditionalDnDRowContext = (Component) => (props) => {
+  const { isDestinationPanel } = props;
+  const withDragNDrop = usePropsStore(
+    (state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
+  );
+  if (!withDragNDrop) return /* @__PURE__ */ jsx(Component, { ...props });
+  return /* @__PURE__ */ jsx(DnDRowContext, { Component, ...props });
 };
 export {
   withConditionalDnDRowContext

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

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

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

@@ -1,22 +1,22 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useSortable } from "@elliemae/ds-drag-and-drop";
 import { Grid } from "@elliemae/ds-grid";
 import { useHeadlessTooltip } from "@elliemae/ds-hooks-headless-tooltip";
 import { css, styled } from "@elliemae/ds-system";
-import React2, { useEffect, useMemo } from "react";
+import React2, { useMemo } from "react";
 import { useInternalStore, usePropsStore } from "../../config/useStore/index.js";
-import { REGIONS_FOCUSES, DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
 import { DragHandle } from "../Dnd/DndHandle.js";
 import { DropIndicator } from "../Dnd/DropIndicator.js";
-import { withConditionalUseSortable } from "../HoC/withConditionalUseSortable.js";
 import { ItemActions } from "./ItemActions/index.js";
-import { useInnerRefHandlers as useInnerRefActionHandlers } from "./ItemActions/useInnerRefHandlers.js";
+import { useInnerRefActionHandlers } from "./ItemActions/useInnerRefActionHandlers.js";
 import { ItemMiddleSection } from "./ItemMiddleSection.js";
-import { ItemSelection } from "./ItemSelection.js";
+import { ItemSelectionUI } from "./ItemSelectionUi/ItemSelectionUI.js";
 import { useItemArrowNavigation } from "./useItemArrowNavigation.js";
+import { useItemInnerRefHandlers } from "./useItemInnerRefHandlers.js";
 import { useItemKeyboardSelection } from "./useItemKeyboardSelection.js";
 import { useSelectionLogic } from "./useSelectionLogic.js";
-import { useThisItemIsFocused } from "./useThisItemIsFocused.js";
 const cssDisabled = css`
   background-color: ${({ theme }) => theme.colors.neutral["100"]};
   color: ${({ theme }) => theme.colors.neutral["300"]};
@@ -50,53 +50,17 @@ const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots
 
   ${({ isDragging }) => isDragging && cssDisabled}
 `;
-const ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`
-  height: 100%;
-  &:focus {
-    outline: none;
-  }
-`;
-const useInnerRefHandlers = (itemMeta) => {
-  const { datumInternalMeta, isDestinationPanel } = itemMeta;
-  const { hydratedId } = datumInternalMeta;
-  const setZustandRef = useInternalStore((state) => state.setZustandRef);
-  const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);
-  const deferedAfterFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender());
-  const isLoadingMore = usePropsStore(
-    (state) => isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore
-  );
-  const thisItemIsFocused = useThisItemIsFocused(itemMeta);
-  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
-  const currItemId = hydratedId;
-  const innerRefHandlerParentItem = React2.useCallback(
-    (node) => {
-      setZustandRef([currRegion, currItemId, "parent"], node);
-      if (deferedAfterFirstRender && thisItemIsFocused && node) {
-        setDeferFocusUntilFirstRender(false);
-        if (node.tabIndex === -1) node.tabIndex = 0;
-        node.focus();
-      }
-    },
-    [setZustandRef, currRegion, currItemId, thisItemIsFocused, deferedAfterFirstRender, setDeferFocusUntilFirstRender]
-  );
-  useEffect(
-    () => () => {
-      if (isLoadingMore) setDeferFocusUntilFirstRender(true);
-    },
-    [isLoadingMore, setDeferFocusUntilFirstRender]
-  );
-  return React2.useMemo(
-    () => ({ innerRefHandlerParentItem, thisItemIsFocused }),
-    [innerRefHandlerParentItem, thisItemIsFocused]
-  );
-};
 const Item = React2.memo((itemMeta) => {
   const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;
-  const { isSelected, hydratedId, softDeleted } = datumInternalMeta;
+  const { hydratedId, softDeleted } = datumInternalMeta;
+  const explicitSelectionUI = usePropsStore((store) => store.explicitSelectionUI);
   const cols = useMemo(() => {
-    if (withDragNDrop) return ["5px", "auto", "1fr", "auto"];
-    return ["5px", "1fr", "auto"];
-  }, [withDragNDrop]);
+    const selectionUIWidth = explicitSelectionUI ? "auto" : "5px";
+    const finalCols = [selectionUIWidth];
+    if (withDragNDrop) finalCols.push("auto");
+    finalCols.push("1fr", "auto");
+    return finalCols;
+  }, [withDragNDrop, explicitSelectionUI]);
   const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);
   const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
   const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);
@@ -118,7 +82,8 @@ const Item = React2.memo((itemMeta) => {
     },
     [onItemKeyDownSelection, onItemContainerKeyDown]
   );
-  const { innerRefHandlerParentItem, thisItemIsFocused } = useInnerRefHandlers(itemMeta);
+  const itemInnerRefHandlers = useItemInnerRefHandlers(itemMeta);
+  const { thisItemIsFocused } = itemInnerRefHandlers;
   const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);
   const overId = useInternalStore((state) => state.overId);
   const isDropValid = useInternalStore((state) => state.isDropValid);
@@ -128,7 +93,6 @@ const Item = React2.memo((itemMeta) => {
   });
   const config = React2.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);
   const tooltipHelpers = useHeadlessTooltip(config);
-  const idItem = useMemo(() => `${hydratedId}-wrapper${softDeleted ? "-soft-deleted" : ""}`, [hydratedId, softDeleted]);
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
   return /* @__PURE__ */ jsxs(
@@ -152,19 +116,11 @@ const Item = React2.memo((itemMeta) => {
       getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ jsx(
-          ItemSelectionWrapper,
+          ItemSelectionUI,
           {
-            role: "checkbox",
-            "aria-checked": isSelected,
-            onFocus: tooltipHelpers.onFocus,
-            onBlur: tooltipHelpers.onBlur,
-            "aria-labelledby": `${hydratedId}-text-section${softDeleted ? "-soft-deleted" : ""}`,
-            id: idItem,
-            innerRef: innerRefHandlerParentItem,
-            "aria-disabled": softDeleted,
-            getOwnerProps,
-            getOwnerPropsArguments,
-            children: /* @__PURE__ */ jsx(ItemSelection, { ...itemMeta })
+            tooltipHelpers,
+            itemInnerRefHandlers,
+            itemMeta
           }
         ),
         withDragNDrop && useSortableHelpers ? /* @__PURE__ */ jsx(
@@ -186,11 +142,16 @@ const Item = React2.memo((itemMeta) => {
     }
   );
 });
-const ItemSortable = withConditionalUseSortable(Item);
-var Item_default = ItemSortable;
+const ItemWithSortable = (props) => {
+  const {
+    datumInternalMeta: { hydratedId }
+  } = props;
+  const useSortableConfig = useMemo(() => ({ id: hydratedId }), [hydratedId]);
+  const useSortableHelpers = useSortable(useSortableConfig);
+  return /* @__PURE__ */ jsx(Item, { ...props, useSortableHelpers });
+};
+const ItemSortable = (props) => props.withDragNDrop ? /* @__PURE__ */ jsx(ItemWithSortable, { ...props }) : /* @__PURE__ */ jsx(Item, { ...props });
 export {
-  Item,
-  ItemSortable,
-  Item_default as default
+  ItemSortable
 };
 //# sourceMappingURL=Item.js.map