@elliemae/ds-shuttle-v2 3.14.0-next.1 → 3.14.0-next.10

package/dist/esm/parts/PanelWrapper.js

@@ -17,17 +17,14 @@ const StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV
 `;
 const panelWrapperRows = ["auto", "1fr"];
 const listWrapperRows = ["auto", "1fr", "auto"];
-const PanelWrapper = React2.memo((panelMetaInfo) => {
-  const { isDestinationPanel = false } = panelMetaInfo;
-  return /* @__PURE__ */ jsxs(StyledPanelWrapper, { rows: panelWrapperRows, gutter: "xxxs", children: [
-    /* @__PURE__ */ jsx(Header, { isDestinationPanel }),
-    /* @__PURE__ */ jsxs(StyledListWrapper, { rows: listWrapperRows, children: [
-      /* @__PURE__ */ jsx(PanelContentTopSection, { ...panelMetaInfo }),
-      /* @__PURE__ */ jsx(PanelContentMiddleSection, { ...panelMetaInfo }),
-      /* @__PURE__ */ jsx(PanelContentBottomSection, { ...panelMetaInfo })
-    ] })
-  ] });
-});
+const PanelWrapper = React2.memo((panelMetaInfo) => /* @__PURE__ */ jsxs(StyledPanelWrapper, { rows: panelWrapperRows, gutter: "xxxs", children: [
+  /* @__PURE__ */ jsx(Header, { ...panelMetaInfo }),
+  /* @__PURE__ */ jsxs(StyledListWrapper, { rows: listWrapperRows, children: [
+    /* @__PURE__ */ jsx(PanelContentTopSection, { ...panelMetaInfo }),
+    /* @__PURE__ */ jsx(PanelContentMiddleSection, { ...panelMetaInfo }),
+    /* @__PURE__ */ jsx(PanelContentBottomSection, { ...panelMetaInfo })
+  ] })
+] }));
 export {
   PanelWrapper
 };

package/dist/esm/parts/PanelWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PanelWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../react-desc-prop-types';\nimport { Header } from './Header';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n  min-height: 264px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n\n  return (\n    <StyledPanelWrapper rows={panelWrapperRows} gutter=\"xxxs\">\n      <Header isDestinationPanel={isDestinationPanel} />\n      <StyledListWrapper rows={listWrapperRows}>\n        <PanelContentTopSection {...panelMetaInfo} />\n        <PanelContentMiddleSection {...panelMetaInfo} />\n        <PanelContentBottomSection {...panelMetaInfo} />\n      </StyledListWrapper>\n    </StyledPanelWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBjB,cACA,YADA;AAzBN,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAIvG,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAGrG,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AAEvC,MAAM,eAAeA,OAAM,KAAK,CAAC,kBAA8C;AACpF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AAEvC,SACE,qBAAC,sBAAmB,MAAM,kBAAkB,QAAO,QACjD;AAAA,wBAAC,UAAO,oBAAwC;AAAA,IAChD,qBAAC,qBAAkB,MAAM,iBACvB;AAAA,0BAAC,0BAAwB,GAAG,eAAe;AAAA,MAC3C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,MAC9C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,OAChD;AAAA,KACF;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../react-desc-prop-types';\nimport { Header } from './Header';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n  min-height: 264px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledPanelWrapper rows={panelWrapperRows} gutter=\"xxxs\">\n    <Header {...panelMetaInfo} />\n    <StyledListWrapper rows={listWrapperRows}>\n      <PanelContentTopSection {...panelMetaInfo} />\n      <PanelContentMiddleSection {...panelMetaInfo} />\n      <PanelContentBottomSection {...panelMetaInfo} />\n    </StyledListWrapper>\n  </StyledPanelWrapper>\n));\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBnB,cACA,YADA;AAtBJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAIvG,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAGrG,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AAEvC,MAAM,eAAeA,OAAM,KAAK,CAAC,kBACtC,qBAAC,sBAAmB,MAAM,kBAAkB,QAAO,QACjD;AAAA,sBAAC,UAAQ,GAAG,eAAe;AAAA,EAC3B,qBAAC,qBAAkB,MAAM,iBACvB;AAAA,wBAAC,0BAAwB,GAAG,eAAe;AAAA,IAC3C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,IAC9C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,KAChD;AAAA,GACF,CACD;",
   "names": ["React"]
 }

package/dist/esm/react-desc-prop-types.js

@@ -1,39 +1,56 @@
 import * as React from "react";
-import { globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
 const defaultProps = {
-  sourceWithSoftDelete: false,
   addDragAndDropFromSource: false,
+  removeDragAndDropFromDestination: false,
   sourceIsLoading: false,
+  destinationIsLoading: false,
   sourceWithLoadMore: false,
+  destinationWithLoadMore: false,
   sourceIsLoadingMore: false,
+  destinationIsLoadingMore: false,
   onSourceLoadMore: () => {
   },
-  onSourceChange: () => {
+  onDestinationLoadMore: () => {
   },
   onSourceAdd: () => {
   },
+  onDestinationAdd: () => {
+  },
   onSourceRemove: () => {
   },
-  destinationWithSoftDelete: false,
-  removeDragAndDropFromDestination: false,
-  destinationIsLoading: false,
-  destinationWithLoadMore: false,
-  destinationIsLoadingMore: false,
-  onDestinationLoadMore: () => {
+  onDestinationRemove: () => {
   },
-  onDestinationChange: () => {
+  onSourceReorder: () => {
   },
-  onDestinationAdd: () => {
+  onDestinationReorder: () => {
   },
-  onDestinationRemove: () => {
+  sourceSoftDeletedItems: {},
+  onSourceSoftDelete: () => {
+  },
+  destinationSoftDeletedItems: {},
+  onDestinationSoftDelete: () => {
   }
 };
-const DSSkeletonPropTypes = {
+const DSShuttleV2PropTypes = {
   ...globalAttributesPropTypes,
-  ...xstyledPropTypes
+  ...xstyledPropTypes,
+  sourceData: PropTypes.arrayOf(PropTypes.object).description("hello!").isRequired,
+  sourceSelectedItems: PropTypes.object.description("hello!").isRequired,
+  onSourceSelectionChange: PropTypes.func.description("hello!").isRequired,
+  SourceHeader: PropTypes.node.description("hello!").isRequired,
+  onSourceDrilldown: PropTypes.func.description("hello!").isRequired,
+  destinationData: PropTypes.arrayOf(PropTypes.object).description("hello!").isRequired,
+  destinationSelectedItems: PropTypes.object.description("hello!").isRequired,
+  onDestinationSelectionChange: PropTypes.func.description("hello!").isRequired,
+  DestinationHeader: PropTypes.node.description("hello!").isRequired,
+  onDestinationDrilldown: PropTypes.func.description("hello!").isRequired,
+  getId: PropTypes.func.description("hello!").isRequired,
+  getLabel: PropTypes.func.description("hello!").isRequired
 };
+const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes;
 export {
-  DSSkeletonPropTypes,
+  DSShuttleV2PropTypesSchema,
   defaultProps
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { type DSButtonT } from '@elliemae/ds-button';\nimport { type useSortable } from '@elliemae/ds-drag-and-drop';\n\nexport declare namespace DSShuttleV2T {\n  export type PanelMetaInfo = { isDestinationPanel: boolean };\n  export interface ItemMeta extends PanelMetaInfo {\n    item: DSShuttleV2T.ConfiguredDatum;\n    withDragNDrop: boolean;\n    useSortableHelpers?: ReturnType<typeof useSortable>;\n  }\n\n  export interface Datum extends Record<string, unknown> {\n    id: string;\n    label: string;\n    subtitle?: string;\n    Icon?: React.ComponentType<ItemMeta>;\n    CustomRenderer?: React.ComponentType<ItemMeta>;\n    softDeleted?: boolean;\n    preventDrilldown?: boolean;\n    preventMove?: boolean;\n  }\n  export interface ConfiguredDatum {\n    isFirst: boolean;\n    isLast: boolean;\n    isSelected: boolean;\n    selectionPrevented: boolean;\n    withActions: boolean;\n    withMoveBtn: boolean;\n    withDrilldownBtn: boolean;\n    original: Datum;\n    localIndex: number;\n  }\n\n  type SelectionMap = Record<string, boolean>;\n  type OnDataChange = (\n    newData: Datum[],\n    metainfo: {\n      event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n      item?: Datum;\n      selectedItems?: Datum[];\n    },\n  ) => void;\n\n  type OnChangeEvent = (\n    items: Datum[],\n    metainfo: {\n      event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n    },\n  ) => void;\n\n  type OnReorderEvent = (newData: Datum[], metadata: { active: Datum; targetIndex: number }) => void;\n\n  type OnSelectionChange = (\n    newSelection: SelectionMap,\n    metainfo: {\n      event:\n        | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n        | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n        | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n        | React.ChangeEvent<HTMLInputElement>;\n      item?: Datum;\n    },\n  ) => void;\n  type OnSelectionDrilldown = (\n    item: Datum,\n    metainfo: { event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement> },\n  ) => void;\n\n  type OnLoadMore = (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n\n  export interface RequiredProps {\n    sourceData: Datum[];\n    sourceSelectedItems: SelectionMap;\n    onSourceSelectionChange: OnSelectionChange;\n    SourceHeader: React.ComponentType<unknown>;\n    onSourceDrilldown: OnSelectionDrilldown;\n\n    destinationData: Datum[];\n    destinationSelectedItems: SelectionMap;\n    onDestinationSelectionChange: OnSelectionChange;\n    DestinationHeader: React.ComponentType<unknown>;\n    onDestinationDrilldown: OnSelectionDrilldown;\n  }\n\n  export interface DefaultProps {\n    sourceIsLoading: boolean;\n    sourceWithSoftDelete: boolean;\n    sourceWithLoadMore: boolean;\n    sourceIsLoadingMore: boolean;\n    onSourceChange: OnDataChange;\n    onSourceAdd: OnChangeEvent;\n    onSourceRemove: OnChangeEvent;\n    onSourceReorder: OnReorderEvent;\n    onSourceLoadMore: OnLoadMore;\n    addDragAndDropFromSource: boolean;\n    removeDragAndDropFromDestination: boolean;\n    destinationIsLoading: boolean;\n    destinationWithSoftDelete: boolean;\n    destinationWithLoadMore: boolean;\n    destinationIsLoadingMore: boolean;\n    onDestinationLoadMore: OnLoadMore;\n    onDestinationChange: OnDataChange;\n    onDestinationAdd: OnChangeEvent;\n    onDestinationRemove: OnChangeEvent;\n    onDestinationReorder: OnReorderEvent;\n  }\n\n  type OnFilterChange = (\n    newfilter: string | null,\n    metainfo: { event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement> },\n  ) => void;\n  type OnSearchbarOpen = (\n    newfilter: boolean,\n    metainfo: { event: Parameters<Required<DSButtonT.Props>['onClick']>[0] },\n  ) => void;\n  export interface OptionalProps {\n    sourceItemProps?: Record<string, unknown>;\n    destinationItemProps?: Record<string, unknown>;\n    sourceFilterValue?: string;\n\n    onSourceFilterChange?: OnFilterChange;\n    onSourceOpenSearchbar?: OnSearchbarOpen;\n    sourceShowSearchbar?: boolean;\n    destinationFilterValue?: string;\n    onDestinationFilterChange?: OnFilterChange;\n    onDesinationOpenSearchbar?: OnSearchbarOpen;\n    destinationShowSearchbar?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSShuttleV2T.DefaultProps = {\n  sourceWithSoftDelete: false,\n  addDragAndDropFromSource: false,\n  sourceIsLoading: false,\n  sourceWithLoadMore: false,\n  sourceIsLoadingMore: false,\n  onSourceLoadMore: () => {},\n  onSourceChange: () => {},\n  onSourceAdd: () => {},\n  onSourceRemove: () => {},\n\n  destinationWithSoftDelete: false,\n  removeDragAndDropFromDestination: false,\n  destinationIsLoading: false,\n  destinationWithLoadMore: false,\n  destinationIsLoadingMore: false,\n  onDestinationLoadMore: () => {},\n  onDestinationChange: () => {},\n  onDestinationAdd: () => {},\n  onDestinationRemove: () => {},\n};\n\nexport const DSSkeletonPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n} as WeakValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,2BAA2B,wBAAwB;AAmJrD,MAAM,eAA0C;AAAA,EACrD,sBAAsB;AAAA,EACtB,0BAA0B;AAAA,EAC1B,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EAEvB,2BAA2B;AAAA,EAC3B,kCAAkC;AAAA,EAClC,sBAAsB;AAAA,EACtB,yBAAyB;AAAA,EACzB,0BAA0B;AAAA,EAC1B,uBAAuB,MAAM;AAAA,EAAC;AAAA,EAC9B,qBAAqB,MAAM;AAAA,EAAC;AAAA,EAC5B,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAAA,EAAC;AAC9B;AAEO,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,GAAG;AACL;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { type useSortable, type DnDKitTree } from '@elliemae/ds-drag-and-drop';\n\nexport declare namespace DSShuttleV2T {\n  export type Datum = Record<string, unknown>;\n  export type PanelMetaInfo = { isDestinationPanel: boolean; hasMultipleSelection: boolean };\n  type HydratedId = string;\n\n  export type DatumInternalMeta = {\n    isFirst: boolean;\n    isLast: boolean;\n    isSelected: boolean;\n    softDeleted: boolean;\n    localIndex: number;\n    hydratedId: HydratedId;\n  };\n  export type DatumRenderFlags = {\n    selectionPrevented: boolean;\n    withActions: boolean;\n    withMoveBtn: boolean;\n    withDrilldownBtn: boolean;\n    internallyDisabledMove: boolean;\n    internallyDisabledDrilldown: boolean;\n  };\n\n  // =============================================================================\n  // Hydratables section\n  //   Component-less\n  // =============================================================================\n  export type PrimaryKeyHydratables = {\n    id: HydratedId;\n  };\n  type RequiredDatumHydratablesWithoutComponents = {\n    label: string;\n  };\n  type OptionalDatumHydratablesWithoutComponents = {\n    subtitle?: string;\n    preventDrilldown?: boolean;\n    preventMove?: boolean;\n  };\n  type DatumHydratablesWithoutComponents = PrimaryKeyHydratables &\n    RequiredDatumHydratablesWithoutComponents &\n    OptionalDatumHydratablesWithoutComponents;\n  // =============================================================================\n  // Hydratables section\n  //   Component-only\n  // =============================================================================\n  export type ComponentProps = {\n    datum: Datum;\n    panelMetaInfo: PanelMetaInfo;\n    datumInternalMeta: DatumInternalMeta;\n    datumHydratables: DatumHydratablesWithoutComponents;\n  };\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  type RequiredDatumHydratablesComponents = {};\n  type OptionalDatumHydratablesComponents = {\n    Icon?: React.ComponentType<ComponentProps>;\n    CustomRenderer?: React.ComponentType<ComponentProps>;\n  };\n  // =============================================================================\n  // Hydratables section\n  //   Finals\n  // =============================================================================\n  type RequiredDatumHydratables = RequiredDatumHydratablesWithoutComponents & RequiredDatumHydratablesComponents;\n  type OptionalDatumHydratables = OptionalDatumHydratablesWithoutComponents & OptionalDatumHydratablesComponents;\n  export type DatumHydratables = RequiredDatumHydratables & OptionalDatumHydratables;\n\n  // =============================================================================\n  // Hydraters\n  // =============================================================================\n  export type PrimaryKeyHydraters = Hydraters<PrimaryKeyHydratables, [Datum]>;\n  type HydratersMeta = { datumMeta: DatumInternalMeta; panelMetaInfo: PanelMetaInfo };\n  type RequiredDatumHydraters = Hydraters<RequiredDatumHydratables, [Datum, HydratersMeta]>;\n  type OptionalDatumHydraters = Hydraters<OptionalDatumHydratables, [Datum, HydratersMeta]>;\n\n  type DatumHydraters = PrimaryKeyHydraters & RequiredDatumHydraters & OptionalDatumHydraters;\n\n  // =============================================================================\n  // Datum & Internals structures\n  // =============================================================================\n  export type ConfiguredDatum = DatumInternalMeta & { original: Datum };\n  export interface ItemMeta extends PanelMetaInfo {\n    datum: Datum;\n    datumHydratables: DatumHydratables;\n    datumInternalMeta: DatumInternalMeta;\n    datumRenderFlags: DatumRenderFlags;\n    withDragNDrop: boolean;\n    useSortableHelpers?: ReturnType<typeof useSortable>;\n  }\n\n  // =============================================================================\n  // Callbacks\n  // =============================================================================\n  type OnDataChange = (\n    newData: Datum[],\n    metainfo: {\n      event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n      item?: Datum;\n      selectedItems?: Datum[];\n    },\n  ) => void;\n\n  type OnChangeEvent = (\n    items: Datum[],\n    metainfo: {\n      event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n    },\n  ) => void;\n\n  type OnReorderEventMetadata = Omit<DnDKitTree.OnReorder<DSShuttleV2T.Datum>, 'considerExpanding'>;\n  type OnReorderEvent = (movedItem: Datum, metadata: OnReorderEventMetadata) => void;\n\n  export type SelectionMap = Record<string, boolean>;\n  type OnSelectionChange = (\n    newSelection: SelectionMap,\n    metainfo: {\n      event:\n        | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n        | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n        | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n        | React.ChangeEvent<HTMLInputElement>;\n      item?: Datum;\n    },\n  ) => void;\n  type OnSelectionDrilldown = (\n    item: Datum,\n    metainfo: { event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement> },\n  ) => void;\n\n  type OnLoadMore = (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n  type OnFilterChange = (\n    newfilter: string | null,\n    metainfo: { event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement> },\n  ) => void;\n  type OnSearchbarOpen = (\n    newfilter: boolean,\n    metainfo: { event: Parameters<Required<DSButtonT.Props>['onClick']>[0] },\n  ) => void;\n\n  export type SoftDeletedMap = Record<string, boolean>;\n  type OnSoftDeletedChange = (\n    newSoftDeleted: SoftDeletedMap,\n    metainfo: {\n      event:\n        | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n        | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n        | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n        | React.ChangeEvent<HTMLInputElement>;\n      item?: Datum;\n    },\n  ) => void;\n  // =============================================================================\n  // Final Props\n  // =============================================================================\n  export interface RequiredProps extends RequiredDatumHydraters, PrimaryKeyHydraters {\n    sourceData: Datum[];\n    sourceSelectedItems: SelectionMap;\n    onSourceSelectionChange: OnSelectionChange;\n    SourceHeader: React.ComponentType<unknown>;\n    onSourceDrilldown: OnSelectionDrilldown;\n\n    destinationData: Datum[];\n    destinationSelectedItems: SelectionMap;\n    onDestinationSelectionChange: OnSelectionChange;\n    DestinationHeader: React.ComponentType<unknown>;\n    onDestinationDrilldown: OnSelectionDrilldown;\n  }\n\n  export interface DefaultProps {\n    // load-more and loaders\n    sourceIsLoading: boolean;\n    sourceWithLoadMore: boolean;\n    sourceIsLoadingMore: boolean;\n    onSourceLoadMore: OnLoadMore;\n    destinationIsLoading: boolean;\n    destinationWithLoadMore: boolean;\n    destinationIsLoadingMore: boolean;\n    onDestinationLoadMore: OnLoadMore;\n\n    // switch side\n    onSourceAdd: OnChangeEvent;\n    onSourceRemove: OnChangeEvent;\n    onDestinationAdd: OnChangeEvent;\n    onDestinationRemove: OnChangeEvent;\n\n    // dnd\n    addDragAndDropFromSource: boolean;\n    removeDragAndDropFromDestination: boolean;\n    onSourceReorder: OnReorderEvent;\n    onDestinationReorder: OnReorderEvent;\n\n    // soft delete\n    sourceSoftDeletedItems: SoftDeletedMap;\n    onSourceSoftDelete: OnSoftDeletedChange;\n    destinationSoftDeletedItems: SoftDeletedMap;\n    onDestinationSoftDelete: OnSoftDeletedChange;\n  }\n\n  export interface OptionalProps extends OptionalDatumHydraters {\n    sourceItemProps?: Record<string, unknown>;\n    destinationItemProps?: Record<string, unknown>;\n\n    // filtering\n    sourceShowSearchbar?: boolean;\n    destinationShowSearchbar?: boolean;\n    onSourceOpenSearchbar?: OnSearchbarOpen;\n    onDesinationOpenSearchbar?: OnSearchbarOpen;\n\n    sourceFilterValue?: string;\n    destinationFilterValue?: string;\n    onSourceFilterChange?: OnFilterChange;\n    onDestinationFilterChange?: OnFilterChange;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSShuttleV2T.DefaultProps = {\n  addDragAndDropFromSource: false,\n  removeDragAndDropFromDestination: false,\n\n  sourceIsLoading: false,\n  destinationIsLoading: false,\n  sourceWithLoadMore: false,\n  destinationWithLoadMore: false,\n  sourceIsLoadingMore: false,\n  destinationIsLoadingMore: false,\n  onSourceLoadMore: () => {},\n  onDestinationLoadMore: () => {},\n\n  onSourceAdd: () => {},\n  onDestinationAdd: () => {},\n  onSourceRemove: () => {},\n  onDestinationRemove: () => {},\n  onSourceReorder: () => {},\n  onDestinationReorder: () => {},\n\n  sourceSoftDeletedItems: {},\n  onSourceSoftDelete: () => {},\n  destinationSoftDeletedItems: {},\n  onDestinationSoftDelete: () => {},\n};\n\nconst DSShuttleV2PropTypes: DSPropTypesSchema<DSShuttleV2T.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n\n  sourceData: PropTypes.arrayOf(PropTypes.object).description('hello!').isRequired,\n  sourceSelectedItems: PropTypes.object.description('hello!').isRequired,\n  onSourceSelectionChange: PropTypes.func.description('hello!').isRequired,\n  SourceHeader: PropTypes.node.description('hello!').isRequired,\n  onSourceDrilldown: PropTypes.func.description('hello!').isRequired,\n\n  destinationData: PropTypes.arrayOf(PropTypes.object).description('hello!').isRequired,\n  destinationSelectedItems: PropTypes.object.description('hello!').isRequired,\n  onDestinationSelectionChange: PropTypes.func.description('hello!').isRequired,\n  DestinationHeader: PropTypes.node.description('hello!').isRequired,\n  onDestinationDrilldown: PropTypes.func.description('hello!').isRequired,\n\n  getId: PropTypes.func.description('hello!').isRequired,\n  getLabel: PropTypes.func.description('hello!').isRequired,\n};\nexport const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes as unknown as WeakValidationMap<DSShuttleV2T.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,WAAW,2BAA2B,wBAAwB;AAyOhE,MAAM,eAA0C;AAAA,EACrD,0BAA0B;AAAA,EAC1B,kCAAkC;AAAA,EAElC,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,uBAAuB,MAAM;AAAA,EAAC;AAAA,EAE9B,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,qBAAqB,MAAM;AAAA,EAAC;AAAA,EAC5B,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,sBAAsB,MAAM;AAAA,EAAC;AAAA,EAE7B,wBAAwB,CAAC;AAAA,EACzB,oBAAoB,MAAM;AAAA,EAAC;AAAA,EAC3B,6BAA6B,CAAC;AAAA,EAC9B,yBAAyB,MAAM;AAAA,EAAC;AAClC;AAEA,MAAM,uBAA8D;AAAA,EAClE,GAAG;AAAA,EACH,GAAG;AAAA,EAEH,YAAY,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE;AAAA,EACtE,qBAAqB,UAAU,OAAO,YAAY,QAAQ,EAAE;AAAA,EAC5D,yBAAyB,UAAU,KAAK,YAAY,QAAQ,EAAE;AAAA,EAC9D,cAAc,UAAU,KAAK,YAAY,QAAQ,EAAE;AAAA,EACnD,mBAAmB,UAAU,KAAK,YAAY,QAAQ,EAAE;AAAA,EAExD,iBAAiB,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE;AAAA,EAC3E,0BAA0B,UAAU,OAAO,YAAY,QAAQ,EAAE;AAAA,EACjE,8BAA8B,UAAU,KAAK,YAAY,QAAQ,EAAE;AAAA,EACnE,mBAAmB,UAAU,KAAK,YAAY,QAAQ,EAAE;AAAA,EACxD,wBAAwB,UAAU,KAAK,YAAY,QAAQ,EAAE;AAAA,EAE7D,OAAO,UAAU,KAAK,YAAY,QAAQ,EAAE;AAAA,EAC5C,UAAU,UAAU,KAAK,YAAY,QAAQ,EAAE;AACjD;AACO,MAAM,6BAA6B;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-shuttle-v2",
-  "version": "3.14.0-next.1",
+  "version": "3.14.0-next.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Shuttle v2",
   "files": [
@@ -35,17 +35,19 @@
     "indent": 4
   },
   "dependencies": {
+    "react-virtual": "~2.10.4",
     "zustand": "4.1.4",
-    "@elliemae/ds-button": "3.14.0-next.1",
-    "@elliemae/ds-form-checkbox": "3.14.0-next.1",
-    "@elliemae/ds-circular-progress-indicator": "3.14.0-next.1",
-    "@elliemae/ds-system": "3.14.0-next.1",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.14.0-next.1",
-    "@elliemae/ds-icons": "3.14.0-next.1",
-    "@elliemae/ds-utilities": "3.14.0-next.1",
-    "@elliemae/ds-grid": "3.14.0-next.1",
-    "@elliemae/ds-form-input-text": "3.14.0-next.1",
-    "@elliemae/ds-typography": "3.14.0-next.1"
+    "@elliemae/ds-circular-progress-indicator": "3.14.0-next.10",
+    "@elliemae/ds-form-checkbox": "3.14.0-next.10",
+    "@elliemae/ds-grid": "3.14.0-next.10",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.14.0-next.10",
+    "@elliemae/ds-system": "3.14.0-next.10",
+    "@elliemae/ds-icons": "3.14.0-next.10",
+    "@elliemae/ds-utilities": "3.14.0-next.10",
+    "@elliemae/ds-button-v2": "3.14.0-next.10",
+    "@elliemae/ds-drag-and-drop": "3.14.0-next.10",
+    "@elliemae/ds-form-input-text": "3.14.0-next.10",
+    "@elliemae/ds-typography": "3.14.0-next.10"
   },
   "devDependencies": {
     "lodash": "^4.17.21",

package/dist/cjs/config/useStore/createAtomInStore.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/config/useStore/createAtomInStore.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { type StoreApi } from 'zustand';\nimport type { InternalAtoms, Store } from './useStore';\n\ntype StateSetterNewVal =\n  | InternalAtoms[keyof InternalAtoms][0]\n  | ((oldVal: InternalAtoms[keyof InternalAtoms][0]) => InternalAtoms[keyof InternalAtoms][0]);\nexport const createAtomInStore = (\n  defaultVal: InternalAtoms[keyof InternalAtoms][0],\n  stateKey: keyof InternalAtoms,\n  set: StoreApi<Store>['setState'],\n  get: StoreApi<Store>['getState'],\n) => {\n  const stateSetter = (newVal: StateSetterNewVal) => {\n    if (typeof newVal === 'function') set({ [stateKey]: [newVal(get()[stateKey][0]), stateSetter] });\n    else set({ [stateKey]: [newVal, stateSetter] });\n  };\n  return [defaultVal, stateSetter] as const;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMhB,MAAM,oBAAoB,CAC/B,YACA,UACA,KACA,QACG;AACH,QAAM,cAAc,CAAC,WAA8B;AACjD,QAAI,OAAO,WAAW;AAAY,UAAI,EAAE,CAAC,WAAW,CAAC,OAAO,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAAA;AAC1F,UAAI,EAAE,CAAC,WAAW,CAAC,QAAQ,WAAW,EAAE,CAAC;AAAA,EAChD;AACA,SAAO,CAAC,YAAY,WAAW;AACjC;",
-  "names": []
-}

package/dist/cjs/parts/Panel/middle/ItemListWrapper.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/parts/Panel/middle/ItemListWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemSortable } from '../../Item/Item';\nimport { withConditionalDnDRowContext } from '../../HoC/withConditionalDnDRowContext';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n\n  // .ds-shuttle-v2-move-multiple-wrapper {\n  //   top: 2px;\n  //   right: 2px;\n  //   height: calc(100% - 4px);\n  //   width: calc(65px - 2px);\n  // }\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize,\n  );\n\n  const virtualItems = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n  );\n\n  const withDragNDrop = usePropsStore((state) =>\n    isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n  );\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n\n  return (\n    <StyledItemsWrapper alignItems=\"flex-start\" rows={rows} style={{ height: `${totalSize}px` }}>\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        return (\n          <div\n            key={virtualRow.index}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: `${virtualRow.size}px`,\n              transform: `translateY(${virtualRow.start}px)`,\n            }}\n          >\n            <ItemSortable\n              key={item.original.id}\n              item={item}\n              isDestinationPanel={isDestinationPanel}\n              withDragNDrop={withDragNDrop}\n            />\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2DX;AA3DZ,mBAAkB;AAClB,qBAAqB;AACrB,uBAAuB;AACvB,sBAAgD;AAEhD,kBAA6B;AAC7B,0CAA6C;AAC7C,oCAAkD;AAElD,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvG,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,eAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,gBAAY;AAAA,IAAiB,CAAC,UAClC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,mBAAe;AAAA,IAAiB,CAAC,UACrC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AAEA,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AAEA,SACE,4CAAC,sBAAmB,YAAW,cAAa,MAAY,OAAO,EAAE,QAAQ,GAAG,cAAc,GACvF,wBAAc,IAAI,CAAC,eAAe;AACjC,UAAM,OAAO,SAAS,WAAW;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ,GAAG,WAAW;AAAA,UACtB,WAAW,cAAc,WAAW;AAAA,QACtC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,KAAK,SAAS;AAAA,QAIrB;AAAA;AAAA,MAfK,WAAW;AAAA,IAgBlB;AAAA,EAEJ,CAAC,GACH;AAEJ,CAAC;AAEM,MAAM,iCAA6B,kEAA6B,eAAe;AACtF,IAAO,0BAAQ;",
-  "names": ["React"]
-}

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-const createAtomInStore = (defaultVal, stateKey, set, get) => {
-  const stateSetter = (newVal) => {
-    if (typeof newVal === "function")
-      set({ [stateKey]: [newVal(get()[stateKey][0]), stateSetter] });
-    else
-      set({ [stateKey]: [newVal, stateSetter] });
-  };
-  return [defaultVal, stateSetter];
-};
-export {
-  createAtomInStore
-};
-//# sourceMappingURL=createAtomInStore.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useStore/createAtomInStore.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type StoreApi } from 'zustand';\nimport type { InternalAtoms, Store } from './useStore';\n\ntype StateSetterNewVal =\n  | InternalAtoms[keyof InternalAtoms][0]\n  | ((oldVal: InternalAtoms[keyof InternalAtoms][0]) => InternalAtoms[keyof InternalAtoms][0]);\nexport const createAtomInStore = (\n  defaultVal: InternalAtoms[keyof InternalAtoms][0],\n  stateKey: keyof InternalAtoms,\n  set: StoreApi<Store>['setState'],\n  get: StoreApi<Store>['getState'],\n) => {\n  const stateSetter = (newVal: StateSetterNewVal) => {\n    if (typeof newVal === 'function') set({ [stateKey]: [newVal(get()[stateKey][0]), stateSetter] });\n    else set({ [stateKey]: [newVal, stateSetter] });\n  };\n  return [defaultVal, stateSetter] as const;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACMhB,MAAM,oBAAoB,CAC/B,YACA,UACA,KACA,QACG;AACH,QAAM,cAAc,CAAC,WAA8B;AACjD,QAAI,OAAO,WAAW;AAAY,UAAI,EAAE,CAAC,WAAW,CAAC,OAAO,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAAA;AAC1F,UAAI,EAAE,CAAC,WAAW,CAAC,QAAQ,WAAW,EAAE,CAAC;AAAA,EAChD;AACA,SAAO,CAAC,YAAY,WAAW;AACjC;",
-  "names": []
-}

package/dist/esm/parts/Panel/middle/ItemListWrapper.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/ItemListWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemSortable } from '../../Item/Item';\nimport { withConditionalDnDRowContext } from '../../HoC/withConditionalDnDRowContext';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n\n  // .ds-shuttle-v2-move-multiple-wrapper {\n  //   top: 2px;\n  //   right: 2px;\n  //   height: calc(100% - 4px);\n  //   width: calc(65px - 2px);\n  // }\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize,\n  );\n\n  const virtualItems = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n  );\n\n  const withDragNDrop = usePropsStore((state) =>\n    isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n  );\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n\n  return (\n    <StyledItemsWrapper alignItems=\"flex-start\" rows={rows} style={{ height: `${totalSize}px` }}>\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        return (\n          <div\n            key={virtualRow.index}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: `${virtualRow.size}px`,\n              transform: `translateY(${virtualRow.start}px)`,\n            }}\n          >\n            <ItemSortable\n              key={item.original.id}\n              item={item}\n              isDestinationPanel={isDestinationPanel}\n              withDragNDrop={withDragNDrop}\n            />\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2DX;AA3DZ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB,qBAAqB;AAEhD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvG,MAAM,kBAAkBA,OAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,YAAY;AAAA,IAAiB,CAAC,UAClC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,eAAe;AAAA,IAAiB,CAAC,UACrC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AAEA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,OAAOA,OAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AAEA,SACE,oBAAC,sBAAmB,YAAW,cAAa,MAAY,OAAO,EAAE,QAAQ,GAAG,cAAc,GACvF,wBAAc,IAAI,CAAC,eAAe;AACjC,UAAM,OAAO,SAAS,WAAW;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ,GAAG,WAAW;AAAA,UACtB,WAAW,cAAc,WAAW;AAAA,QACtC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,KAAK,SAAS;AAAA,QAIrB;AAAA;AAAA,MAfK,WAAW;AAAA,IAgBlB;AAAA,EAEJ,CAAC,GACH;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,0BAAQ;",
-  "names": ["React"]
-}