@elliemae/ds-legacy-shuttle-v2 1.0.0-rc.1

package/dist/esm/parts/PanelWrapper.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback } from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { Header } from "./Header.js";
+import { PanelContentTopSection } from "./Panel/top/PanelContentTopSection.js";
+import { PanelContentMiddleSection } from "./Panel/middle/PanelContentMiddleSection.js";
+import { PanelContentBottomSection } from "./Panel/bottom/PanelContentBottomSection.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../config/useStore/useStore.js";
+const StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`
+  min-width: 300px;
+`;
+const StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`
+  border: 1px solid neutral-400;
+  height: 100%;
+`;
+const panelWrapperRows = ["auto", "1fr"];
+const listWrapperRows = ["auto", "1fr", "auto"];
+const PanelWrapper = React2.memo((panelMetaInfo) => {
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ jsxs(
+    StyledPanelWrapper,
+    {
+      rows: panelWrapperRows,
+      gutter: "xxxs",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ jsx(Header, { ...panelMetaInfo }),
+        /* @__PURE__ */ jsxs(
+          StyledListWrapper,
+          {
+            rows: listWrapperRows,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              /* @__PURE__ */ jsx(PanelContentTopSection, { ...panelMetaInfo }),
+              /* @__PURE__ */ jsx(PanelContentMiddleSection, { ...panelMetaInfo }),
+              /* @__PURE__ */ jsx(PanelContentBottomSection, { ...panelMetaInfo })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  PanelWrapper
+};
+//# sourceMappingURL=PanelWrapper.js.map

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

@@ -0,0 +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, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\nimport { Header } from './Header.js';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection.js';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection.js';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../config/useStore/useStore.js';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n  height: 100%;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n  return (\n    <StyledPanelWrapper\n      rows={panelWrapperRows}\n      gutter=\"xxxs\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Header {...panelMetaInfo} />\n      <StyledListWrapper\n        rows={listWrapperRows}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PanelContentTopSection {...panelMetaInfo} />\n        <PanelContentMiddleSection {...panelMetaInfo} />\n        <PanelContentBottomSection {...panelMetaInfo} />\n      </StyledListWrapper>\n    </StyledPanelWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+BjB,cACA,YADA;AA/BN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAGvG,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAIrG,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AAEvC,MAAM,eAAeA,OAAM,KAAK,CAAC,kBAA8C;AACpF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAQ,GAAG,eAAe;AAAA,QAC3B;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,0BAAwB,GAAG,eAAe;AAAA,cAC3C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,cAC9C,oBAAC,6BAA2B,GAAG,eAAe;AAAA;AAAA;AAAA,QAChD;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,132 @@
+import * as React from "react";
+import {
+  PropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes,
+  getPropsPerDatatestIdPropTypes
+} from "@elliemae/ds-legacy-utilities";
+import { DSShuttleV2DataTestIds } from "./config/DSShuttleV2Definitions.js";
+const defaultProps = {
+  addDragAndDropFromSource: false,
+  removeDragAndDropFromDestination: false,
+  sourceIsLoading: false,
+  destinationIsLoading: false,
+  sourceWithLoadMore: false,
+  destinationWithLoadMore: false,
+  sourceIsLoadingMore: false,
+  destinationIsLoadingMore: false,
+  onSourceLoadMore: () => {
+  },
+  onDestinationLoadMore: () => {
+  },
+  onSourceAdd: () => {
+  },
+  onDestinationAdd: () => {
+  },
+  onSourceRemove: () => {
+  },
+  onDestinationRemove: () => {
+  },
+  onSourceReorder: () => {
+  },
+  onDestinationReorder: () => {
+  },
+  sourceSoftDeletedItems: {},
+  onSourceSoftDelete: () => {
+  },
+  destinationSoftDeletedItems: {},
+  onDestinationSoftDelete: () => {
+  },
+  getPreventMove: () => false
+};
+const DSShuttleV2PropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  sourceData: PropTypes.arrayOf(PropTypes.object).description(
+    "An array of objects representing the items in the source list"
+  ).isRequired,
+  sourceSelectedItems: PropTypes.object.description("An object representing the selected items in the source list").isRequired,
+  onSourceSelectionChange: PropTypes.func.description("A function called when the selection in the source list changes").isRequired,
+  SourceHeader: PropTypes.node.description("The header component for the source list").isRequired,
+  onSourceDrilldown: PropTypes.func.description("A function called when an item in the source list is clicked").isRequired,
+  destinationData: PropTypes.arrayOf(PropTypes.object).description(
+    "An array of objects representing the items in the destination list"
+  ).isRequired,
+  destinationSelectedItems: PropTypes.object.description(
+    "An object representing the selected items in the destination list"
+  ).isRequired,
+  onDestinationSelectionChange: PropTypes.func.description(
+    "A function called when the selection in the destination list changes"
+  ).isRequired,
+  DestinationHeader: PropTypes.node.description("The header component for the destination list").isRequired,
+  onDestinationDrilldown: PropTypes.func.description(
+    "A function called when an item in the destination list is clicked"
+  ).isRequired,
+  getId: PropTypes.func.description(
+    "A function that takes an item from the source/destination list and returns its unique identifier"
+  ).isRequired,
+  getLabel: PropTypes.func.description(
+    "A function that takes an item from the source/destination list and returns its display label"
+  ).isRequired,
+  sourceIsLoading: PropTypes.bool.description("A boolean indicating whether the source list is currently loading data").defaultValue(false),
+  destinationIsLoading: PropTypes.bool.description("A boolean indicating whether the destination list is currently loading data").defaultValue(false),
+  sourceWithLoadMore: PropTypes.bool.description('A boolean indicating whether the source list supports "load more" functionality').defaultValue(false),
+  destinationWithLoadMore: PropTypes.bool.description('A boolean indicating whether the destination list supports "load more" functionality').defaultValue(false),
+  sourceIsLoadingMore: PropTypes.bool.description("A boolean indicating whether the source list is currently loading more data").defaultValue(false),
+  destinationIsLoadingMore: PropTypes.bool.description("A boolean indicating whether the destination list is currently loading more data").defaultValue(false),
+  onSourceLoadMore: PropTypes.func.description('A function called when the "load more" button in the source list is clicked').defaultValue(() => {
+  }),
+  onDestinationLoadMore: PropTypes.func.description('A function called when the "load more" button in the destination list is clicked').defaultValue(() => {
+  }),
+  onSourceAdd: PropTypes.func.description("A function called when an item is added from the source list to the destination list").defaultValue(() => {
+  }),
+  onDestinationAdd: PropTypes.func.description("A function called when an item is added from the destination list to the source list").defaultValue(() => {
+  }),
+  onSourceRemove: PropTypes.func.description("A function called when an item is removed from the destination list").defaultValue(() => {
+  }),
+  onDestinationRemove: PropTypes.func.description("Callback function to handle when an item is removed from the destination shuttle list. ").defaultValue(() => {
+  }),
+  onSourceReorder: PropTypes.func.description("Callback function to handle when items are reordered in the source shuttle list.").defaultValue(() => {
+  }),
+  onDestinationReorder: PropTypes.func.description("Callback function to handle when items are reordered in the destination shuttle list. ").defaultValue(() => {
+  }),
+  sourceSoftDeletedItems: PropTypes.object.description(
+    "Object containing the soft deleted items in the source shuttle list, where the key is the item ID and the value is the deleted item."
+  ).defaultValue({}),
+  onSourceSoftDelete: PropTypes.func.description("Callback function to handle when an item is soft deleted in the source shuttle list. ").defaultValue(() => {
+  }),
+  destinationSoftDeletedItems: PropTypes.object.description(
+    "Object containing the soft deleted items in the destination shuttle list, where the key is the item ID and the value is the deleted item."
+  ).defaultValue({}),
+  onDestinationSoftDelete: PropTypes.func.description("Callback function to handle when an item is soft deleted in the destination shuttle list.").defaultValue(() => {
+  }),
+  getPreventMove: PropTypes.func.description("Function that determines whether a specific item can be moved to the destination shuttle list. ").defaultValue(() => false),
+  addDragAndDropFromSource: PropTypes.bool.description("Specifies whether items can be dragged from the source list and dropped into the destination list.").defaultValue(false),
+  removeDragAndDropFromDestination: PropTypes.bool.description("Specifies whether items can be removed from the destination list by dragging them out of the list.").defaultValue(false),
+  sourceItemProps: PropTypes.object.description("Specifies additional props to be applied to each item in the source list.").defaultValue({}),
+  destinationItemProps: PropTypes.object.description("Specifies additional props to be applied to each item in the destination list.").defaultValue({}),
+  sourceShowSearchbar: PropTypes.bool.description("Specifies whether the search bar should be shown in the source list.").defaultValue(false),
+  destinationShowSearchbar: PropTypes.bool.description("Specifies whether the search bar should be shown in the destination list.").defaultValue(false),
+  onSourceOpenSearchbar: PropTypes.func.description("Callback function that is called when the search bar in the source list is opened.").defaultValue(() => {
+  }),
+  onDesinationOpenSearchbar: PropTypes.func.description("Callback function that is called when the search bar in the destination list is opened.").defaultValue(() => {
+  }),
+  sourceFilterValue: PropTypes.string.description("Specifies the current value of the search filter in the source list.").defaultValue(""),
+  destinationFilterValue: PropTypes.string.description("Specifies the current value of the search filter in the destination list.").defaultValue(""),
+  onSourceFilterChange: PropTypes.func.description("Callback function that is called when the search filter in the source list is changed.").defaultValue(() => {
+  }),
+  onDestinationFilterChange: PropTypes.func.description("Callback function that is called when the search filter in the destination list is changed.").defaultValue(() => {
+  }),
+  getSubtitle: PropTypes.func.description("Callback function that returns the subtitle to be displayed for each item in the list.").defaultValue(() => ""),
+  getIcon: PropTypes.func.description("Callback function that returns the icon to be displayed for each item in the list.").defaultValue(() => ""),
+  getPreventDrilldown: PropTypes.func.description("Callback function that determines whether drilldown should be prevented for a particular item.").defaultValue(() => false),
+  getCustomRenderer: PropTypes.func.description("Callback function that returns a custom renderer for each item in the list.").defaultValue(() => void 0),
+  getBatchActionableButtonProps: PropTypes.func.description("Callback function that returns the props for the batch actionable button in the destination list.").defaultValue(() => ({})).signature(`(({ isDestionationPanel: boolean }) => ({ "aria-label": string }))`),
+  ...getPropsPerDatatestIdPropTypes(DSShuttleV2DataTestIds)
+};
+const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes;
+export {
+  DSShuttleV2PropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +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", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, useHeadlessTooltip } from '@elliemae/ds-legacy-utilities';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerDatatestIdPropTypes,\n} from '@elliemae/ds-legacy-utilities';\nimport { type DSControlledCheckboxT } from '@elliemae/ds-legacy-form-checkbox';\nimport { type DSButtonT } from '@elliemae/ds-legacy-button-v2';\nimport { type useSortable, type DnDKitTree } from '@elliemae/ds-legacy-drag-and-drop';\nimport type { ZustandT } from '@elliemae/ds-legacy-zustand-helpers';\n\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated/index.js';\nimport { DSShuttleV2DataTestIds } from './config/DSShuttleV2Definitions.js';\n\nexport declare namespace DSShuttleV2T {\n  export type Datum = Record<string, unknown>;\n  export type PanelMetaInfo = { isDestinationPanel: boolean; hasMultipleSelection: boolean; height?: number };\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    hydratedPreventMove: boolean;\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 - panel level hydratables\n  // =============================================================================\n  type RequiredPanelHydratables = Record<string, never>;\n  type OptionalPanelHydratables = {\n    batchActionableButtonProps: DSButtonT.Props;\n  };\n  export type PanelHydratables = RequiredPanelHydratables & OptionalPanelHydratables;\n\n  // =============================================================================\n  // Hydratables section - datum level hydratables\n  //    shared usage between internal and custom component\n  // =============================================================================\n  export type PrimaryKeyHydratables = {\n    id: HydratedId;\n  };\n  type FunctionalHydratables = {\n    preventMove?: boolean;\n  };\n  type RequiredDatumHydratablesWithoutComponents = {\n    label: string;\n  };\n  type OptionalDatumHydratablesWithoutComponents = {\n    subtitle?: string;\n    preventDrilldown?: boolean;\n  };\n  type DatumHydratablesWithoutComponents = PrimaryKeyHydratables &\n    FunctionalHydratables &\n    RequiredDatumHydratablesWithoutComponents &\n    OptionalDatumHydratablesWithoutComponents;\n  // =============================================================================\n  // Hydratables section - datum level hydratables\n  //    Custom component-only\n  // =============================================================================\n  export type ComponentProps = {\n    datum: Datum;\n    thisItemIsFocused: boolean;\n    panelMetaInfo: PanelMetaInfo;\n    datumInternalMeta: DatumInternalMeta;\n    datumHydratables: DatumHydratablesWithoutComponents;\n    tooltipHelpers?: ReturnType<typeof useHeadlessTooltip>;\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 - datum level hydratables\n  //   Finals\n  // =============================================================================\n  type RequiredDatumHydratables = RequiredDatumHydratablesWithoutComponents & RequiredDatumHydratablesComponents;\n  type OptionalDatumHydratables = OptionalDatumHydratablesWithoutComponents & OptionalDatumHydratablesComponents;\n  export type DatumHydratables = PrimaryKeyHydratables & RequiredDatumHydratables & OptionalDatumHydratables;\n\n  // =============================================================================\n  // Hydraters\n  // =============================================================================\n  export type PrimaryKeyHydraters = Hydraters<PrimaryKeyHydratables, [Datum]>;\n  export type FunctionalHydraters = Hydraters<FunctionalHydratables, [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 & FunctionalHydraters & RequiredDatumHydraters & OptionalDatumHydraters;\n\n  type RequiredPanelHydraters = Hydraters<RequiredPanelHydratables, [PanelMetaInfo]>;\n  type OptionalPanelHydraters = Partial<Hydraters<OptionalPanelHydratables, [PanelMetaInfo]>>;\n  type PanelHydraters = RequiredPanelHydraters & OptionalPanelHydraters;\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  // Zustand Store\n  // =============================================================================\n  export type FocusRegion = (typeof REGIONS_FOCUSES)[keyof typeof REGIONS_FOCUSES];\n  export type FocusItem = Omit<(typeof ITEMS_FOCUSES)[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\n  export type FocusItemAction = (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n  export type InternalAtoms = {\n    focusRegion: FocusRegion;\n    focusItem: FocusItem;\n    focusItemAction: FocusItemAction;\n    deferFocusUntilFirstRender: boolean;\n    dropIndicatorPosition: number;\n    overId: string;\n    dndDraggingItem: ConfiguredDatum | null;\n    dndDraggingItemMeta: ItemMeta | null;\n    lastActiveId: string;\n    isDropValid: boolean;\n    sourcePanelLastSelectedItem: string | null | undefined;\n    destinationPanelLastSelectedItem: string | null | undefined;\n  };\n  export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n  export type Selectors = {\n    getIsDragAndDropHappening: () => boolean;\n    getPanelLastSelectedItem: (isDestinationPanel: boolean) => string | null | undefined;\n  };\n  export type Reducers = Record<string, never>;\n  export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\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 extends Required<FunctionalHydraters> {\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, OptionalPanelHydraters {\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  getPreventMove: () => false,\n};\n\nconst DSShuttleV2PropTypes: DSPropTypesSchema<DSShuttleV2T.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n\n  sourceData: PropTypes.arrayOf(PropTypes.object).description(\n    'An array of objects representing the items in the source list',\n  ).isRequired,\n  sourceSelectedItems: PropTypes.object.description('An object representing the selected items in the source list')\n    .isRequired,\n  onSourceSelectionChange: PropTypes.func.description('A function called when the selection in the source list changes')\n    .isRequired,\n  SourceHeader: PropTypes.node.description('The header component for the source list').isRequired,\n  onSourceDrilldown: PropTypes.func.description('A function called when an item in the source list is clicked')\n    .isRequired,\n  destinationData: PropTypes.arrayOf(PropTypes.object).description(\n    'An array of objects representing the items in the destination list',\n  ).isRequired,\n  destinationSelectedItems: PropTypes.object.description(\n    'An object representing the selected items in the destination list',\n  ).isRequired,\n  onDestinationSelectionChange: PropTypes.func.description(\n    'A function called when the selection in the destination list changes',\n  ).isRequired,\n  DestinationHeader: PropTypes.node.description('The header component for the destination list').isRequired,\n  onDestinationDrilldown: PropTypes.func.description(\n    'A function called when an item in the destination list is clicked',\n  ).isRequired,\n  getId: PropTypes.func.description(\n    'A function that takes an item from the source/destination list and returns its unique identifier',\n  ).isRequired,\n  getLabel: PropTypes.func.description(\n    'A function that takes an item from the source/destination list and returns its display label',\n  ).isRequired,\n  sourceIsLoading: PropTypes.bool\n    .description('A boolean indicating whether the source list is currently loading data')\n    .defaultValue(false),\n  destinationIsLoading: PropTypes.bool\n    .description('A boolean indicating whether the destination list is currently loading data')\n    .defaultValue(false),\n  sourceWithLoadMore: PropTypes.bool\n    .description('A boolean indicating whether the source list supports \"load more\" functionality')\n    .defaultValue(false),\n  destinationWithLoadMore: PropTypes.bool\n    .description('A boolean indicating whether the destination list supports \"load more\" functionality')\n    .defaultValue(false),\n  sourceIsLoadingMore: PropTypes.bool\n    .description('A boolean indicating whether the source list is currently loading more data')\n    .defaultValue(false),\n  destinationIsLoadingMore: PropTypes.bool\n    .description('A boolean indicating whether the destination list is currently loading more data')\n    .defaultValue(false),\n  onSourceLoadMore: PropTypes.func\n    .description('A function called when the \"load more\" button in the source list is clicked')\n    .defaultValue(() => {}),\n  onDestinationLoadMore: PropTypes.func\n    .description('A function called when the \"load more\" button in the destination list is clicked')\n    .defaultValue(() => {}),\n  onSourceAdd: PropTypes.func\n    .description('A function called when an item is added from the source list to the destination list')\n    .defaultValue(() => {}),\n  onDestinationAdd: PropTypes.func\n    .description('A function called when an item is added from the destination list to the source list')\n    .defaultValue(() => {}),\n  onSourceRemove: PropTypes.func\n    .description('A function called when an item is removed from the destination list')\n    .defaultValue(() => {}),\n  onDestinationRemove: PropTypes.func\n    .description('Callback function to handle when an item is removed from the destination shuttle list. ')\n    .defaultValue(() => {}),\n  onSourceReorder: PropTypes.func\n    .description('Callback function to handle when items are reordered in the source shuttle list.')\n    .defaultValue(() => {}),\n  onDestinationReorder: PropTypes.func\n    .description('Callback function to handle when items are reordered in the destination shuttle list. ')\n    .defaultValue(() => {}),\n  sourceSoftDeletedItems: PropTypes.object\n    .description(\n      'Object containing the soft deleted items in the source shuttle list, where the key is the item ID and the value is the deleted item.',\n    )\n    .defaultValue({}),\n  onSourceSoftDelete: PropTypes.func\n    .description('Callback function to handle when an item is soft deleted in the source shuttle list. ')\n    .defaultValue(() => {}),\n  destinationSoftDeletedItems: PropTypes.object\n    .description(\n      'Object containing the soft deleted items in the destination shuttle list, where the key is the item ID and the value is the deleted item.',\n    )\n    .defaultValue({}),\n  onDestinationSoftDelete: PropTypes.func\n    .description('Callback function to handle when an item is soft deleted in the destination shuttle list.')\n    .defaultValue(() => {}),\n  getPreventMove: PropTypes.func\n    .description('Function that determines whether a specific item can be moved to the destination shuttle list. ')\n    .defaultValue(() => false),\n  addDragAndDropFromSource: PropTypes.bool\n    .description('Specifies whether items can be dragged from the source list and dropped into the destination list.')\n    .defaultValue(false),\n  removeDragAndDropFromDestination: PropTypes.bool\n    .description('Specifies whether items can be removed from the destination list by dragging them out of the list.')\n    .defaultValue(false),\n  sourceItemProps: PropTypes.object\n    .description('Specifies additional props to be applied to each item in the source list.')\n    .defaultValue({}),\n  destinationItemProps: PropTypes.object\n    .description('Specifies additional props to be applied to each item in the destination list.')\n    .defaultValue({}),\n  sourceShowSearchbar: PropTypes.bool\n    .description('Specifies whether the search bar should be shown in the source list.')\n    .defaultValue(false),\n  destinationShowSearchbar: PropTypes.bool\n    .description('Specifies whether the search bar should be shown in the destination list.')\n    .defaultValue(false),\n  onSourceOpenSearchbar: PropTypes.func\n    .description('Callback function that is called when the search bar in the source list is opened.')\n    .defaultValue(() => {}),\n  onDesinationOpenSearchbar: PropTypes.func\n    .description('Callback function that is called when the search bar in the destination list is opened.')\n    .defaultValue(() => {}),\n  sourceFilterValue: PropTypes.string\n    .description('Specifies the current value of the search filter in the source list.')\n    .defaultValue(''),\n  destinationFilterValue: PropTypes.string\n    .description('Specifies the current value of the search filter in the destination list.')\n    .defaultValue(''),\n  onSourceFilterChange: PropTypes.func\n    .description('Callback function that is called when the search filter in the source list is changed.')\n    .defaultValue(() => {}),\n  onDestinationFilterChange: PropTypes.func\n    .description('Callback function that is called when the search filter in the destination list is changed.')\n    .defaultValue(() => {}),\n  getSubtitle: PropTypes.func\n    .description('Callback function that returns the subtitle to be displayed for each item in the list.')\n    .defaultValue(() => ''),\n  getIcon: PropTypes.func\n    .description('Callback function that returns the icon to be displayed for each item in the list.')\n    .defaultValue(() => ''),\n  getPreventDrilldown: PropTypes.func\n    .description('Callback function that determines whether drilldown should be prevented for a particular item.')\n    .defaultValue(() => false),\n  getCustomRenderer: PropTypes.func\n    .description('Callback function that returns a custom renderer for each item in the list.')\n    .defaultValue(() => undefined),\n  getBatchActionableButtonProps: PropTypes.func\n    .description('Callback function that returns the props for the batch actionable button in the destination list.')\n    .defaultValue(() => ({}))\n    .signature(`(({ isDestionationPanel: boolean }) => ({ \"aria-label\": string }))`),\n  ...getPropsPerDatatestIdPropTypes(DSShuttleV2DataTestIds),\n};\n\nexport const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes as unknown as WeakValidationMap<DSShuttleV2T.Props>;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/tests/configs/basic.js

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2, { useMemo, useState, useCallback } from "react";
+import { DSBreadcrumb } from "@elliemae/ds-legacy-breadcrumb";
+import { useDSTree } from "@elliemae/ds-legacy-tree-model";
+import { uid } from "uid";
+const genTreeOfData = ({ prefix, depth = 0, parent = null, childIndex = 0, finalDepth = 2 }) => {
+  const node = {
+    id: uid(),
+    label: parent ? `${parent.label}.${childIndex}` : `${prefix} 0`,
+    parent: parent ? parent.id : null
+  };
+  if (depth <= finalDepth) {
+    node.subitems = Array.from(
+      { length: 2 },
+      (_, i) => genTreeOfData({ prefix, depth: depth + 1, parent: node, childIndex: i, finalDepth })
+    );
+  }
+  return node;
+};
+const options = {
+  getUniqueId: (item) => item.id
+};
+const startingSourceData = genTreeOfData({ prefix: "Source" });
+const startingDestinationData = genTreeOfData({ prefix: "Destination" });
+const BreadCrumb = (props) => {
+  const { breadCrumbPath, setCurrentNode, ...rest } = props;
+  return /* @__PURE__ */ jsx(DSBreadcrumb, { isTitle: true, ...rest, children: breadCrumbPath.map((node) => /* @__PURE__ */ jsx(
+    DSBreadcrumb.Item,
+    {
+      label: node.plainItem.label,
+      onClick: () => setCurrentNode(node),
+      dataTestId: "amigo"
+    },
+    `${node.dsId}`
+  )) });
+};
+const BreadCrumbHoc = ({ path, setCurrentNode }) => {
+  const WrappedBreadCrumb = (props) => /* @__PURE__ */ jsx(BreadCrumb, { ...props, breadCrumbPath: path, setCurrentNode });
+  return WrappedBreadCrumb;
+};
+const useListData = (startingData) => {
+  const { hash, getRoot, getNode, getPath, addNode, replaceNode, removeNode } = useDSTree(startingData, options);
+  const [currentNode, setCurrentNode] = useState(getRoot());
+  const [selection, setSelection] = useState({});
+  const breadcrumbPath = useMemo(() => getPath(currentNode.dsId), [currentNode, getPath]);
+  const displayedData = useMemo(
+    () => currentNode.children.map((node) => node.getJson()),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentNode, hash]
+  );
+  const onDrilldown = useCallback((item) => setCurrentNode(getNode(item.id)), [getNode]);
+  return useMemo(
+    () => ({
+      getNode,
+      addNode,
+      replaceNode,
+      removeNode,
+      currentNode,
+      setCurrentNode,
+      selection,
+      setSelection,
+      breadcrumbPath,
+      displayedData,
+      onDrilldown
+    }),
+    [addNode, breadcrumbPath, currentNode, displayedData, getNode, onDrilldown, removeNode, replaceNode, selection]
+  );
+};
+const useShuttle = () => {
+  const {
+    currentNode: currentSourceNode,
+    setCurrentNode: setCurrentSourceNode,
+    selection: sourceSelection,
+    setSelection: setSourceSelection,
+    breadcrumbPath: sourceBreadCrumbPath,
+    displayedData: sourceDisplayedData,
+    onDrilldown: onSourceDrilldown,
+    addNode: addSourceNode,
+    removeNode: removeSourceNode
+  } = useListData(startingSourceData);
+  const {
+    currentNode: currentDestinationNode,
+    setCurrentNode: setCurrentDestinationNode,
+    selection: destinationSelection,
+    setSelection: setDestinationSelection,
+    breadcrumbPath: destinationBreadCrumbPath,
+    displayedData: destinationDisplayedData,
+    onDrilldown: onDestinationDrilldown,
+    addNode: addDestinationNode,
+    removeNode: removeDestinationNode
+  } = useListData(startingDestinationData);
+  const onSourceAdd = useCallback(
+    (items) => items.forEach((item) => addSourceNode(item, { parent: currentSourceNode })),
+    [addSourceNode, currentSourceNode]
+  );
+  const onSourceRemove = useCallback(
+    (items) => items.forEach((item) => removeSourceNode(item.id, item)),
+    [removeSourceNode]
+  );
+  const onDestinationAdd = useCallback(
+    (items) => items.forEach((item) => addDestinationNode(item, { parent: currentDestinationNode })),
+    [addDestinationNode, currentDestinationNode]
+  );
+  const onDestinationRemove = useCallback(
+    (items) => items.forEach((item) => removeDestinationNode(item.id)),
+    [removeDestinationNode]
+  );
+  return {
+    setCurrentSourceNode,
+    setCurrentDestinationNode,
+    sourceDisplayedData,
+    destinationDisplayedData,
+    sourceSelection,
+    destinationSelection,
+    setSourceSelection,
+    setDestinationSelection,
+    onSourceDrilldown,
+    onDestinationDrilldown,
+    onSourceAdd,
+    onSourceRemove,
+    onDestinationAdd,
+    onDestinationRemove,
+    sourceBreadCrumbPath,
+    destinationBreadCrumbPath,
+    currentSourceNode,
+    currentDestinationNode
+  };
+};
+export {
+  BreadCrumbHoc,
+  useShuttle
+};
+//# sourceMappingURL=basic.js.map

package/dist/esm/tests/configs/basic.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/configs/basic.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { DSBreadcrumb } from '@elliemae/ds-legacy-breadcrumb';\nimport { useDSTree } from '@elliemae/ds-legacy-tree-model';\nimport { uid } from 'uid';\n\nconst genTreeOfData = ({ prefix, depth = 0, parent = null, childIndex = 0, finalDepth = 2 }) => {\n  const node = {\n    id: uid(),\n    label: parent ? `${parent.label}.${childIndex}` : `${prefix} 0`,\n    parent: parent ? parent.id : null,\n  };\n\n  if (depth <= finalDepth) {\n    node.subitems = Array.from({ length: 2 }, (_, i) =>\n      genTreeOfData({ prefix, depth: depth + 1, parent: node, childIndex: i, finalDepth }),\n    );\n  }\n  return node;\n};\n\nconst options = {\n  getUniqueId: (item) => item.id,\n};\n\nconst startingSourceData = genTreeOfData({ prefix: 'Source' });\nconst startingDestinationData = genTreeOfData({ prefix: 'Destination' });\n\nconst BreadCrumb = (props) => {\n  const { breadCrumbPath, setCurrentNode, ...rest } = props;\n\n  return (\n    <DSBreadcrumb isTitle {...rest}>\n      {breadCrumbPath.map((node) => (\n        <DSBreadcrumb.Item\n          key={`${node.dsId}`}\n          label={node.plainItem.label}\n          onClick={() => setCurrentNode(node)}\n          dataTestId=\"amigo\"\n        />\n      ))}\n    </DSBreadcrumb>\n  );\n};\n\nexport const BreadCrumbHoc = ({ path, setCurrentNode }) => {\n  const WrappedBreadCrumb = (props) => <BreadCrumb {...props} breadCrumbPath={path} setCurrentNode={setCurrentNode} />;\n  return WrappedBreadCrumb;\n};\n\nconst useListData = (startingData) => {\n  const { hash, getRoot, getNode, getPath, addNode, replaceNode, removeNode } = useDSTree(startingData, options);\n  const [currentNode, setCurrentNode] = useState(getRoot());\n  const [selection, setSelection] = useState({});\n\n  const breadcrumbPath = useMemo(() => getPath(currentNode.dsId), [currentNode, getPath]);\n\n  const displayedData = useMemo(\n    () => currentNode.children.map((node) => node.getJson()),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [currentNode, hash],\n  );\n\n  const onDrilldown = useCallback((item) => setCurrentNode(getNode(item.id)), [getNode]);\n\n  return useMemo(\n    () => ({\n      getNode,\n      addNode,\n      replaceNode,\n      removeNode,\n      currentNode,\n      setCurrentNode,\n      selection,\n      setSelection,\n\n      breadcrumbPath,\n      displayedData,\n      onDrilldown,\n    }),\n    [addNode, breadcrumbPath, currentNode, displayedData, getNode, onDrilldown, removeNode, replaceNode, selection],\n  );\n};\n\nexport const useShuttle = () => {\n  const {\n    currentNode: currentSourceNode,\n    setCurrentNode: setCurrentSourceNode,\n    selection: sourceSelection,\n    setSelection: setSourceSelection,\n    breadcrumbPath: sourceBreadCrumbPath,\n    displayedData: sourceDisplayedData,\n    onDrilldown: onSourceDrilldown,\n    addNode: addSourceNode,\n    removeNode: removeSourceNode,\n  } = useListData(startingSourceData);\n\n  const {\n    currentNode: currentDestinationNode,\n    setCurrentNode: setCurrentDestinationNode,\n    selection: destinationSelection,\n    setSelection: setDestinationSelection,\n    breadcrumbPath: destinationBreadCrumbPath,\n    displayedData: destinationDisplayedData,\n    onDrilldown: onDestinationDrilldown,\n    addNode: addDestinationNode,\n    removeNode: removeDestinationNode,\n  } = useListData(startingDestinationData);\n\n  const onSourceAdd = useCallback(\n    (items) => items.forEach((item) => addSourceNode(item, { parent: currentSourceNode })),\n    [addSourceNode, currentSourceNode],\n  );\n\n  const onSourceRemove = useCallback(\n    (items) => items.forEach((item) => removeSourceNode(item.id, item)),\n    [removeSourceNode],\n  );\n\n  const onDestinationAdd = useCallback(\n    (items) => items.forEach((item) => addDestinationNode(item, { parent: currentDestinationNode })),\n    [addDestinationNode, currentDestinationNode],\n  );\n\n  const onDestinationRemove = useCallback(\n    (items) => items.forEach((item) => removeDestinationNode(item.id)),\n    [removeDestinationNode],\n  );\n\n  return {\n    setCurrentSourceNode,\n    setCurrentDestinationNode,\n    sourceDisplayedData,\n    destinationDisplayedData,\n    sourceSelection,\n    destinationSelection,\n    setSourceSelection,\n    setDestinationSelection,\n    onSourceDrilldown,\n    onDestinationDrilldown,\n    onSourceAdd,\n    onSourceRemove,\n    onDestinationAdd,\n    onDestinationRemove,\n    sourceBreadCrumbPath,\n    destinationBreadCrumbPath,\n\n    currentSourceNode,\n    currentDestinationNode,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCf;AAjCR,OAAOA,UAAS,SAAS,UAAU,mBAAmB;AACtD,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AAEpB,MAAM,gBAAgB,CAAC,EAAE,QAAQ,QAAQ,GAAG,SAAS,MAAM,aAAa,GAAG,aAAa,EAAE,MAAM;AAC9F,QAAM,OAAO;AAAA,IACX,IAAI,IAAI;AAAA,IACR,OAAO,SAAS,GAAG,OAAO,SAAS,eAAe,GAAG;AAAA,IACrD,QAAQ,SAAS,OAAO,KAAK;AAAA,EAC/B;AAEA,MAAI,SAAS,YAAY;AACvB,SAAK,WAAW,MAAM;AAAA,MAAK,EAAE,QAAQ,EAAE;AAAA,MAAG,CAAC,GAAG,MAC5C,cAAc,EAAE,QAAQ,OAAO,QAAQ,GAAG,QAAQ,MAAM,YAAY,GAAG,WAAW,CAAC;AAAA,IACrF;AAAA,EACF;AACA,SAAO;AACT;AAEA,MAAM,UAAU;AAAA,EACd,aAAa,CAAC,SAAS,KAAK;AAC9B;AAEA,MAAM,qBAAqB,cAAc,EAAE,QAAQ,SAAS,CAAC;AAC7D,MAAM,0BAA0B,cAAc,EAAE,QAAQ,cAAc,CAAC;AAEvE,MAAM,aAAa,CAAC,UAAU;AAC5B,QAAM,EAAE,gBAAgB,gBAAgB,GAAG,KAAK,IAAI;AAEpD,SACE,oBAAC,gBAAa,SAAO,MAAE,GAAG,MACvB,yBAAe,IAAI,CAAC,SACnB;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MAEC,OAAO,KAAK,UAAU;AAAA,MACtB,SAAS,MAAM,eAAe,IAAI;AAAA,MAClC,YAAW;AAAA;AAAA,IAHN,GAAG,KAAK;AAAA,EAIf,CACD,GACH;AAEJ;AAEO,MAAM,gBAAgB,CAAC,EAAE,MAAM,eAAe,MAAM;AACzD,QAAM,oBAAoB,CAAC,UAAU,oBAAC,cAAY,GAAG,OAAO,gBAAgB,MAAM,gBAAgC;AAClH,SAAO;AACT;AAEA,MAAM,cAAc,CAAC,iBAAiB;AACpC,QAAM,EAAE,MAAM,SAAS,SAAS,SAAS,SAAS,aAAa,WAAW,IAAI,UAAU,cAAc,OAAO;AAC7G,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,QAAQ,CAAC;AACxD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC,CAAC;AAE7C,QAAM,iBAAiB,QAAQ,MAAM,QAAQ,YAAY,IAAI,GAAG,CAAC,aAAa,OAAO,CAAC;AAEtF,QAAM,gBAAgB;AAAA,IACpB,MAAM,YAAY,SAAS,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC;AAAA;AAAA,IAEvD,CAAC,aAAa,IAAI;AAAA,EACpB;AAEA,QAAM,cAAc,YAAY,CAAC,SAAS,eAAe,QAAQ,KAAK,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC;AAErF,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,gBAAgB,aAAa,eAAe,SAAS,aAAa,YAAY,aAAa,SAAS;AAAA,EAChH;AACF;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,aAAa;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,EACd,IAAI,YAAY,kBAAkB;AAElC,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,aAAa;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,EACd,IAAI,YAAY,uBAAuB;AAEvC,QAAM,cAAc;AAAA,IAClB,CAAC,UAAU,MAAM,QAAQ,CAAC,SAAS,cAAc,MAAM,EAAE,QAAQ,kBAAkB,CAAC,CAAC;AAAA,IACrF,CAAC,eAAe,iBAAiB;AAAA,EACnC;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAU,MAAM,QAAQ,CAAC,SAAS,iBAAiB,KAAK,IAAI,IAAI,CAAC;AAAA,IAClE,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAU,MAAM,QAAQ,CAAC,SAAS,mBAAmB,MAAM,EAAE,QAAQ,uBAAuB,CAAC,CAAC;AAAA,IAC/F,CAAC,oBAAoB,sBAAsB;AAAA,EAC7C;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAAU,MAAM,QAAQ,CAAC,SAAS,sBAAsB,KAAK,EAAE,CAAC;AAAA,IACjE,CAAC,qBAAqB;AAAA,EACxB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/esm/tests/configs/filter.js

@@ -0,0 +1,169 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2, { useMemo, useState, useCallback } from "react";
+import { DSBreadcrumb } from "@elliemae/ds-legacy-breadcrumb";
+import { useDSTree } from "@elliemae/ds-legacy-tree-model";
+import { uid } from "uid";
+const genTreeOfData = ({ prefix, depth = 0, parent = null, childIndex = 0, finalDepth = 2 }) => {
+  const node = {
+    id: uid(),
+    label: parent ? `${parent.label}.${childIndex}` : `${prefix} 0`,
+    parent: parent ? parent.id : null
+  };
+  if (depth <= finalDepth) {
+    node.subitems = Array.from(
+      { length: 2 },
+      (_, i) => genTreeOfData({ prefix, depth: depth + 1, parent: node, childIndex: i, finalDepth })
+    );
+  }
+  return node;
+};
+const options = {
+  getUniqueId: (item) => item.id
+};
+const startingSourceData = genTreeOfData({ prefix: "Source" });
+const startingDestinationData = genTreeOfData({ prefix: "Destination" });
+const matcheslenientStringSearch = (filter, str) => {
+  const regexpString = `[\\s\\S]*${filter.replace(/\s/g, "").split("").join("[\\s\\S]*")}[\\s\\S]*`;
+  const regexpFilter = new RegExp(regexpString);
+  return regexpFilter.test(str);
+};
+const BreadCrumb = (props) => {
+  const { breadCrumbPath, setCurrentNode, ...rest } = props;
+  return /* @__PURE__ */ jsx(DSBreadcrumb, { isTitle: true, ...rest, children: breadCrumbPath.map((node) => /* @__PURE__ */ jsx(DSBreadcrumb.Item, { label: node.plainItem.label, onClick: () => setCurrentNode(node) }, `${node.dsId}`)) });
+};
+const BreadCrumbHoc = ({ path, setCurrentNode }) => {
+  const WrappedBreadCrumb = (props) => /* @__PURE__ */ jsx(BreadCrumb, { ...props, breadCrumbPath: path, setCurrentNode });
+  return WrappedBreadCrumb;
+};
+const useListData = (startingData) => {
+  const { hash, getRoot, getNode, getPath, addNode, replaceNode, removeNode } = useDSTree(startingData, options);
+  const [currentNode, setCurrentNode] = useState(getRoot());
+  const [filterValue, setFilterValue] = useState("");
+  const [selection, setSelection] = useState({});
+  const breadcrumbPath = useMemo(() => getPath(currentNode.dsId), [currentNode, getPath]);
+  const displayedData = useMemo(
+    () => currentNode.children.map((node) => node.getJson()).filter((item) => matcheslenientStringSearch(filterValue, item.label)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentNode, hash, filterValue]
+  );
+  const onDrilldown = useCallback((item) => setCurrentNode(getNode(item.id)), [getNode]);
+  return {
+    getNode,
+    addNode,
+    replaceNode,
+    removeNode,
+    currentNode,
+    setCurrentNode,
+    selection,
+    setSelection,
+    filterValue,
+    setFilterValue,
+    breadcrumbPath,
+    displayedData,
+    onDrilldown
+  };
+};
+const useShuttle = () => {
+  const {
+    currentNode: currentSourceNode,
+    setCurrentNode: setCurrentSourceNode,
+    selection: sourceSelection,
+    setSelection: setSourceSelection,
+    breadcrumbPath: sourceBreadCrumbPath,
+    displayedData: sourceDisplayedData,
+    filterValue: sourceFilterValue,
+    setFilterValue: setSourceFilterValue,
+    onDrilldown: onSourceDrilldown,
+    getNode: getSourceNode,
+    addNode: addSourceNode,
+    removeNode: removeSourceNode
+  } = useListData(startingSourceData);
+  const {
+    currentNode: currentDestinationNode,
+    setCurrentNode: setCurrentDestinationNode,
+    selection: destinationSelection,
+    setSelection: setDestinationSelection,
+    breadcrumbPath: destinationBreadCrumbPath,
+    displayedData: destinationDisplayedData,
+    filterValue: destinationFilterValue,
+    setFilterValue: setDestinationFilterValue,
+    onDrilldown: onDestinationDrilldown,
+    getNode: getDestinationNode,
+    addNode: addDestinationNode,
+    removeNode: removeDestinationNode
+  } = useListData(startingDestinationData);
+  const onSourceAdd = useCallback(
+    (items) => items.forEach((item) => addSourceNode(item, { parent: getSourceNode(item.parent) ?? currentSourceNode })),
+    [addSourceNode, currentSourceNode, getSourceNode]
+  );
+  const onSourceRemove = useCallback(
+    (items) => items.forEach((item) => removeSourceNode(item.id, item)),
+    [removeSourceNode]
+  );
+  const onDestinationAdd = useCallback(
+    (items) => items.forEach(
+      (item) => addDestinationNode(item, { parent: getDestinationNode(item.parent) ?? currentDestinationNode })
+    ),
+    [addDestinationNode, currentDestinationNode, getDestinationNode]
+  );
+  const onDestinationRemove = useCallback(
+    (items) => items.forEach((item) => removeDestinationNode(item.id)),
+    [removeDestinationNode]
+  );
+  return useMemo(
+    () => ({
+      setCurrentSourceNode,
+      setCurrentDestinationNode,
+      sourceDisplayedData,
+      destinationDisplayedData,
+      sourceSelection,
+      destinationSelection,
+      setSourceSelection,
+      setDestinationSelection,
+      sourceFilterValue,
+      destinationFilterValue,
+      setSourceFilterValue,
+      setDestinationFilterValue,
+      onSourceDrilldown,
+      onDestinationDrilldown,
+      onSourceAdd,
+      onSourceRemove,
+      onDestinationAdd,
+      onDestinationRemove,
+      sourceBreadCrumbPath,
+      destinationBreadCrumbPath,
+      currentSourceNode,
+      currentDestinationNode
+    }),
+    [
+      setCurrentSourceNode,
+      setCurrentDestinationNode,
+      sourceDisplayedData,
+      destinationDisplayedData,
+      sourceSelection,
+      destinationSelection,
+      setSourceSelection,
+      setDestinationSelection,
+      sourceFilterValue,
+      destinationFilterValue,
+      setSourceFilterValue,
+      setDestinationFilterValue,
+      onSourceDrilldown,
+      onDestinationDrilldown,
+      onSourceAdd,
+      onSourceRemove,
+      onDestinationAdd,
+      onDestinationRemove,
+      sourceBreadCrumbPath,
+      destinationBreadCrumbPath,
+      currentSourceNode,
+      currentDestinationNode
+    ]
+  );
+};
+export {
+  BreadCrumbHoc,
+  useShuttle
+};
+//# sourceMappingURL=filter.js.map

package/dist/esm/tests/configs/filter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/configs/filter.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { DSBreadcrumb } from '@elliemae/ds-legacy-breadcrumb';\nimport { useDSTree } from '@elliemae/ds-legacy-tree-model';\nimport { uid } from 'uid';\n\nconst genTreeOfData = ({ prefix, depth = 0, parent = null, childIndex = 0, finalDepth = 2 }) => {\n  const node = {\n    id: uid(),\n    label: parent ? `${parent.label}.${childIndex}` : `${prefix} 0`,\n    parent: parent ? parent.id : null,\n  };\n\n  if (depth <= finalDepth) {\n    node.subitems = Array.from({ length: 2 }, (_, i) =>\n      genTreeOfData({ prefix, depth: depth + 1, parent: node, childIndex: i, finalDepth }),\n    );\n  }\n  return node;\n};\n\nconst options = {\n  getUniqueId: (item) => item.id,\n};\n\nconst startingSourceData = genTreeOfData({ prefix: 'Source' });\nconst startingDestinationData = genTreeOfData({ prefix: 'Destination' });\n\nconst matcheslenientStringSearch = (filter, str) => {\n  const regexpString = `[\\\\s\\\\S]*${filter.replace(/\\s/g, '').split('').join('[\\\\s\\\\S]*')}[\\\\s\\\\S]*`;\n  const regexpFilter = new RegExp(regexpString);\n  return regexpFilter.test(str);\n};\n\nconst BreadCrumb = (props) => {\n  const { breadCrumbPath, setCurrentNode, ...rest } = props;\n\n  return (\n    <DSBreadcrumb isTitle {...rest}>\n      {breadCrumbPath.map((node) => (\n        <DSBreadcrumb.Item key={`${node.dsId}`} label={node.plainItem.label} onClick={() => setCurrentNode(node)} />\n      ))}\n    </DSBreadcrumb>\n  );\n};\n\nexport const BreadCrumbHoc = ({ path, setCurrentNode }) => {\n  const WrappedBreadCrumb = (props) => <BreadCrumb {...props} breadCrumbPath={path} setCurrentNode={setCurrentNode} />;\n  return WrappedBreadCrumb;\n};\n\nconst useListData = (startingData) => {\n  const { hash, getRoot, getNode, getPath, addNode, replaceNode, removeNode } = useDSTree(startingData, options);\n  const [currentNode, setCurrentNode] = useState(getRoot());\n  const [filterValue, setFilterValue] = useState('');\n\n  const [selection, setSelection] = useState({});\n\n  const breadcrumbPath = useMemo(() => getPath(currentNode.dsId), [currentNode, getPath]);\n\n  const displayedData = useMemo(\n    () =>\n      currentNode.children\n        .map((node) => node.getJson())\n        .filter((item) => matcheslenientStringSearch(filterValue, item.label)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [currentNode, hash, filterValue],\n  );\n\n  const onDrilldown = useCallback((item) => setCurrentNode(getNode(item.id)), [getNode]);\n\n  return {\n    getNode,\n    addNode,\n    replaceNode,\n    removeNode,\n    currentNode,\n    setCurrentNode,\n    selection,\n    setSelection,\n    filterValue,\n    setFilterValue,\n    breadcrumbPath,\n    displayedData,\n    onDrilldown,\n  };\n};\n\nexport const useShuttle = () => {\n  const {\n    currentNode: currentSourceNode,\n    setCurrentNode: setCurrentSourceNode,\n    selection: sourceSelection,\n    setSelection: setSourceSelection,\n    breadcrumbPath: sourceBreadCrumbPath,\n    displayedData: sourceDisplayedData,\n    filterValue: sourceFilterValue,\n    setFilterValue: setSourceFilterValue,\n    onDrilldown: onSourceDrilldown,\n    getNode: getSourceNode,\n    addNode: addSourceNode,\n    removeNode: removeSourceNode,\n  } = useListData(startingSourceData);\n\n  const {\n    currentNode: currentDestinationNode,\n    setCurrentNode: setCurrentDestinationNode,\n    selection: destinationSelection,\n    setSelection: setDestinationSelection,\n    breadcrumbPath: destinationBreadCrumbPath,\n    displayedData: destinationDisplayedData,\n    filterValue: destinationFilterValue,\n    setFilterValue: setDestinationFilterValue,\n    onDrilldown: onDestinationDrilldown,\n    getNode: getDestinationNode,\n    addNode: addDestinationNode,\n    removeNode: removeDestinationNode,\n  } = useListData(startingDestinationData);\n\n  const onSourceAdd = useCallback(\n    (items) =>\n      items.forEach((item) => addSourceNode(item, { parent: getSourceNode(item.parent) ?? currentSourceNode })),\n    [addSourceNode, currentSourceNode, getSourceNode],\n  );\n\n  const onSourceRemove = useCallback(\n    (items) => items.forEach((item) => removeSourceNode(item.id, item)),\n    [removeSourceNode],\n  );\n\n  const onDestinationAdd = useCallback(\n    (items) =>\n      items.forEach((item) =>\n        addDestinationNode(item, { parent: getDestinationNode(item.parent) ?? currentDestinationNode }),\n      ),\n    [addDestinationNode, currentDestinationNode, getDestinationNode],\n  );\n\n  const onDestinationRemove = useCallback(\n    (items) => items.forEach((item) => removeDestinationNode(item.id)),\n    [removeDestinationNode],\n  );\n\n  return useMemo(\n    () => ({\n      setCurrentSourceNode,\n      setCurrentDestinationNode,\n      sourceDisplayedData,\n      destinationDisplayedData,\n      sourceSelection,\n      destinationSelection,\n      setSourceSelection,\n      setDestinationSelection,\n      sourceFilterValue,\n      destinationFilterValue,\n      setSourceFilterValue,\n      setDestinationFilterValue,\n      onSourceDrilldown,\n      onDestinationDrilldown,\n      onSourceAdd,\n      onSourceRemove,\n      onDestinationAdd,\n      onDestinationRemove,\n      sourceBreadCrumbPath,\n      destinationBreadCrumbPath,\n\n      currentSourceNode,\n      currentDestinationNode,\n    }),\n    [\n      setCurrentSourceNode,\n      setCurrentDestinationNode,\n      sourceDisplayedData,\n      destinationDisplayedData,\n      sourceSelection,\n      destinationSelection,\n      setSourceSelection,\n      setDestinationSelection,\n      sourceFilterValue,\n      destinationFilterValue,\n      setSourceFilterValue,\n      setDestinationFilterValue,\n      onSourceDrilldown,\n      onDestinationDrilldown,\n      onSourceAdd,\n      onSourceRemove,\n      onDestinationAdd,\n      onDestinationRemove,\n      sourceBreadCrumbPath,\n      destinationBreadCrumbPath,\n\n      currentSourceNode,\n      currentDestinationNode,\n    ],\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
+}