npm - @elliemae/ds-shuttle-v2 - Versions diffs - 3.16.0-next.1 → 3.16.0-next.11 - Mend

@elliemae/ds-shuttle-v2 3.16.0-next.1 → 3.16.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (242) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/useLoadMoreBtnArrowNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useFocusItemTracker, useFocusActionTrackers, useFocusRegionTrackers } from '../../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useInternalStore } from '../../../config/useStore';\n\nexport const useLoadMoreBtnArrowNavigation = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusRegionTrackers();\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n\n  const onLoadMoreButtonKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();\n\n      // =============================================================================\n      // THIS IS NOT LIKE /src/parts/Item/useItemArrowNavigation.tsx\n      // THIS IS INVERTED BY DESIGN AND DESIRED TO BE INVERTED\n      // =============================================================================\n      // load-more-btn -> last element\n      if (key === 'ArrowUp') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusNextItem(panelMetaInfo); // this results in \"Last\" element of the list\n        trackFocusActionParent();\n      }\n      // load-more-btn -> first element\n      if (key === 'ArrowDown') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusPrevItem(panelMetaInfo); // this results in \"First\" element of the list\n        trackFocusActionParent();\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      panelMetaInfo,\n      trackFocusNextItem,\n      trackFocusActionParent,\n      trackFocusPrevItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB,wBAAwB,8BAA8B;AAEpF,SAAS,wBAAwB;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,IAAI,oBAAoB;AACvE,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,uBAAuB;AAC7D,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAE7F,QAAM,0BAA0BA,OAAM;AAAA,IACpC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AAC7D,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AAO9D,UAAI,QAAQ,WAAW;AACrB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAEA,UAAI,QAAQ,aAAa;AACvB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  useFocusItemTracker,\n  useFocusActionTrackers,\n  useFocusRegionTrackers,\n} from '../../../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../../config/useStore/index.js';\n\nexport const useLoadMoreBtnArrowNavigation = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { trackFocusPrevItem, trackFocusNextItem } = useFocusItemTracker();\n  const { trackFocusActionParent } = useFocusActionTrackers();\n  const { trackFocusRegionPanelItem } = useFocusRegionTrackers();\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n\n  const onLoadMoreButtonKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();\n\n      // =============================================================================\n      // THIS IS NOT LIKE /src/parts/Item/useItemArrowNavigation.tsx\n      // THIS IS INVERTED BY DESIGN AND DESIRED TO BE INVERTED\n      // =============================================================================\n      // load-more-btn -> last element\n      if (key === 'ArrowUp') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusNextItem(panelMetaInfo); // this results in \"Last\" element of the list\n        trackFocusActionParent();\n      }\n      // load-more-btn -> first element\n      if (key === 'ArrowDown') {\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusPrevItem(panelMetaInfo); // this results in \"First\" element of the list\n        trackFocusActionParent();\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      panelMetaInfo,\n      trackFocusNextItem,\n      trackFocusActionParent,\n      trackFocusPrevItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onLoadMoreButtonKeyDown }), [onLoadMoreButtonKeyDown]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AAE1B,MAAM,gCAAgC,CAAC,kBAA8C;AAC1F,QAAM,EAAE,oBAAoB,mBAAmB,IAAI,oBAAoB;AACvE,QAAM,EAAE,uBAAuB,IAAI,uBAAuB;AAC1D,QAAM,EAAE,0BAA0B,IAAI,uBAAuB;AAC7D,QAAM,4BAA4B,iBAAiB,CAAC,UAAU,MAAM,yBAAyB;AAE7F,QAAM,0BAA0BA,OAAM;AAAA,IACpC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AAC7D,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AAO9D,UAAI,QAAQ,WAAW;AACrB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAEA,UAAI,QAAQ,aAAa;AACvB,kCAA0B,cAAc,kBAAkB;AAC1D,2BAAmB,aAAa;AAChC,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,wBAAwB,IAAI,CAAC,uBAAuB,CAAC;AACrF;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/EmptyItems.js CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledEmptyListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`
   color: neutral-500;
 `;

package/dist/esm/parts/Panel/middle/EmptyItems.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/EmptyItems.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledEmptyListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`\n  color: neutral-500;\n`;\nexport const EmptyItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledEmptyListWrapper alignItems=\"center\" justifyContent=\"center\">\n    There are no items to display\n  </StyledEmptyListWrapper>\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledEmptyListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`\n  color: neutral-500;\n`;\nexport const EmptyItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledEmptyListWrapper alignItems=\"center\" justifyContent=\"center\">\n    There are no items to display\n  </StyledEmptyListWrapper>\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACYrB;AATF,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,yBAAyB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAGzG,MAAM,aAAa,CAAC,kBACzB,oBAAC,0BAAuB,YAAW,UAAS,gBAAe,UAAS,2CAEpE;",
   "names": []
 }

package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { jsx } from "react/jsx-runtime";
 import React2, { useMemo } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-import { usePropsStore } from "../../../../config/useStore";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../../config/DSShuttleV2Definitions";
-import { ItemSortable } from "../../../Item/Item";
-import { withConditionalDnDRowContext } from "../../../HoC/withConditionalDnDRowContext";
-import { useGetDatumHydratables } from "./useGetDatumHydratables";
-import { getDatumFlags } from "./getDatumFlags";
+import { usePropsStore } from "../../../../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../../config/DSShuttleV2Definitions.js";
+import { ItemSortable } from "../../../Item/Item.js";
+import { withConditionalDnDRowContext } from "../../../HoC/withConditionalDnDRowContext.js";
+import { useGetDatumHydratables } from "./useGetDatumHydratables.js";
+import { getDatumFlags } from "./getDatumFlags.js";
 const StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`
   position: relative;
 `;

package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/Index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions';\nimport { ItemSortable } from '../../../Item/Item';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext';\nimport { useGetDatumHydratables } from './useGetDatumHydratables';\nimport { getDatumFlags } from './getDatumFlags';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = usePropsStore((state) => (isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize));\n\n  const virtualItems = usePropsStore((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  const wrapperAriaLabel = useMemo(\n    () => `${isDestinationPanel ? 'destination' : 'source'}  panel`,\n    [isDestinationPanel],\n  );\n  const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n  return (\n    <StyledItemsWrapper\n      aria-label={wrapperAriaLabel}\n      role=\"listbox\"\n      alignItems=\"flex-start\"\n      rows={rows}\n      style={{ height: `${totalSize}px` }}\n    >\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        const { original: datum, ...datumInternalMeta } = item;\n        const datumHydratables = getDatumHydratables(item);\n        const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n        const itemMeta = {\n          datum,\n          datumHydratables,\n          datumInternalMeta,\n          datumRenderFlags,\n          ...panelMetaInfo,\n          withDragNDrop,\n        };\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            <div ref={virtualRow.measureRef}>\n              <ItemSortable key={datumHydratables.id} {...itemMeta} />\n            </div>\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions.js';\nimport { ItemSortable } from '../../../Item/Item.js';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext.js';\nimport { useGetDatumHydratables } from './useGetDatumHydratables.js';\nimport { getDatumFlags } from './getDatumFlags.js';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n  position: relative;\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const totalSize = usePropsStore((state) => (isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize));\n\n  const virtualItems = usePropsStore((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  const wrapperAriaLabel = useMemo(\n    () => `${isDestinationPanel ? 'destination' : 'source'}  panel`,\n    [isDestinationPanel],\n  );\n  const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n  return (\n    <StyledItemsWrapper\n      aria-label={wrapperAriaLabel}\n      role=\"listbox\"\n      alignItems=\"flex-start\"\n      rows={rows}\n      style={{ height: `${totalSize}px` }}\n    >\n      {virtualItems?.map((virtualRow) => {\n        const item = itemList[virtualRow.index];\n        const { original: datum, ...datumInternalMeta } = item;\n        const datumHydratables = getDatumHydratables(item);\n        const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n        const itemMeta = {\n          datum,\n          datumHydratables,\n          datumInternalMeta,\n          datumRenderFlags,\n          ...panelMetaInfo,\n          withDragNDrop,\n        };\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            <div ref={virtualRow.measureRef}>\n              <ItemSortable key={datumHydratables.id} {...itemMeta} />\n            </div>\n          </div>\n        );\n      })}\n    </StyledItemsWrapper>\n  );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
   "mappings": "AAAA,YAAY,WAAW;AC4ET;AA3Ed,OAAOA,UAAS,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAE9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAIvG,MAAM,kBAAkBA,OAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAc,CAAC,UAC9B,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,YAAY,cAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AAEpH,QAAM,eAAe;AAAA,IAAc,CAAC,UAClC,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,QAAM,mBAAmB;AAAA,IACvB,MAAM,GAAG,qBAAqB,gBAAgB;AAAA,IAC9C,CAAC,kBAAkB;AAAA,EACrB;AACA,QAAM,sBAAsB,uBAAuB,aAAa;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,cAAc;AAAA,MAEjC,wBAAc,IAAI,CAAC,eAAe;AACjC,cAAM,OAAO,SAAS,WAAW;AACjC,cAAM,EAAE,UAAU,UAAU,kBAAkB,IAAI;AAClD,cAAM,mBAAmB,oBAAoB,IAAI;AACjD,cAAM,mBAAmB,cAAc,EAAE,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,cAAc,CAAC;AACtG,cAAM,WAAW;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,QACF;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,OAAO;AAAA,cACP,QAAQ,GAAG,WAAW;AAAA,cACtB,WAAW,cAAc,WAAW;AAAA,YACtC;AAAA,YAEA,8BAAC,SAAI,KAAK,WAAW,YACnB,8BAAC,gBAAwC,GAAG,YAAzB,iBAAiB,EAAkB,GACxD;AAAA;AAAA,UAZK,WAAW;AAAA,QAalB;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,gBAAQ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { usePropsStore } from "../../../../config/useStore";
+import { usePropsStore } from "../../../../config/useStore/index.js";
 const useGetDatumHydratables = (panelMetaInfo) => {
   const getLabel = usePropsStore((state) => state.getLabel);
   const getSubtitle = usePropsStore((state) => state.getSubtitle);

package/dist/esm/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { usePropsStore } from '../../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types';\n\nexport const useGetDatumHydratables = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getLabel = usePropsStore((state) => state.getLabel);\n  const getSubtitle = usePropsStore((state) => state.getSubtitle);\n  const getIcon = usePropsStore((state) => state.getIcon);\n  const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);\n  const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);\n\n  const getDatumHydratables = React.useCallback(\n    (item: DSShuttleV2T.ConfiguredDatum) => {\n      const { original, ...datumMeta } = item;\n\n      return {\n        id: datumMeta.hydratedId,\n        preventMove: datumMeta.hydratedPreventMove,\n        label: getLabel(original, { datumMeta, panelMetaInfo }),\n        ...(getSubtitle !== undefined ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getIcon !== undefined ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getCustomRenderer !== undefined\n          ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n        ...(getPreventDrilldown !== undefined\n          ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n      };\n    },\n    [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getSubtitle, panelMetaInfo],\n  );\n  return getDatumHydratables;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { usePropsStore } from '../../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types.js';\n\nexport const useGetDatumHydratables = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getLabel = usePropsStore((state) => state.getLabel);\n  const getSubtitle = usePropsStore((state) => state.getSubtitle);\n  const getIcon = usePropsStore((state) => state.getIcon);\n  const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);\n  const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);\n\n  const getDatumHydratables = React.useCallback(\n    (item: DSShuttleV2T.ConfiguredDatum) => {\n      const { original, ...datumMeta } = item;\n\n      return {\n        id: datumMeta.hydratedId,\n        preventMove: datumMeta.hydratedPreventMove,\n        label: getLabel(original, { datumMeta, panelMetaInfo }),\n        ...(getSubtitle !== undefined ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getIcon !== undefined ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {}),\n        ...(getCustomRenderer !== undefined\n          ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n        ...(getPreventDrilldown !== undefined\n          ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) }\n          : {}),\n      };\n    },\n    [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getSubtitle, panelMetaInfo],\n  );\n  return getDatumHydratables;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAGvB,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,cAAc,cAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,UAAU,cAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,sBAAsB,cAAc,CAAC,UAAU,MAAM,mBAAmB;AAE9E,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAuC;AACtC,YAAM,EAAE,aAAa,UAAU,IAAI;AAEnC,aAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,aAAa,UAAU;AAAA,QACvB,OAAO,SAAS,UAAU,EAAE,WAAW,cAAc,CAAC;AAAA,QACtD,GAAI,gBAAgB,SAAY,EAAE,UAAU,YAAY,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACrG,GAAI,YAAY,SAAY,EAAE,MAAM,QAAQ,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACzF,GAAI,sBAAsB,SACtB,EAAE,gBAAgB,kBAAkB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAC5E,CAAC;AAAA,QACL,GAAI,wBAAwB,SACxB,EAAE,kBAAkB,oBAAoB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAChF,CAAC;AAAA,MACP;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,SAAS,UAAU,qBAAqB,aAAa,aAAa;AAAA,EACxF;AACA,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/LoadingItems.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`
   color: neutral-500;
 `;

package/dist/esm/parts/Panel/middle/LoadingItems.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/LoadingItems.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`\n  color: neutral-500;\n`;\nexport const LoadingItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledLoadingListWrapper alignItems=\"center\" justifyContent=\"center\">\n    <DSCircularIndeterminateIndicator size=\"xl\" text=\"Loading...\" />\n  </StyledLoadingListWrapper>\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`\n  color: neutral-500;\n`;\nexport const LoadingItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n  <StyledLoadingListWrapper alignItems=\"center\" justifyContent=\"center\">\n    <DSCircularIndeterminateIndicator size=\"xl\" text=\"Loading...\" />\n  </StyledLoadingListWrapper>\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACcnB;AAXJ,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAEjD,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,2BAA2B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAAA;AAAA;AAG7G,MAAM,eAAe,CAAC,kBAC3B,oBAAC,4BAAyB,YAAW,UAAS,gBAAe,UAC3D,8BAAC,oCAAiC,MAAK,MAAK,MAAK,cAAa,GAChE;",
   "names": []
 }

package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js CHANGED Viewed

@@ -5,11 +5,11 @@ import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
-import { REGIONS_FOCUSES } from "../../../constants";
-import { useHandleMoveSelection } from "../../../config/itemMovementHelpers";
-import { useInternalStore } from "../../../config/useStore";
-import { useFocusTracker } from "../../../config/useFocusTracker";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { REGIONS_FOCUSES } from "../../../constants/index.js";
+import { useHandleMoveSelection } from "../../../config/itemMovementHelpers.js";
+import { useInternalStore } from "../../../config/useStore/index.js";
+import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
   position: absolute;
   background-color: neutral-000;

package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/MultipleSelectionAction.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 { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers';\nimport { useInternalStore } from '../../../config/useStore';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 5rem;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusMoveAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel\n    ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n    : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n  const innerRefHandlerMoveAll = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        innerRef={innerRefHandlerMoveAll}\n      >\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"1.538\" height=\"1.538rem\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 5rem;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusMoveAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel\n    ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n    : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n  const innerRefHandlerMoveAll = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        innerRef={innerRefHandlerMoveAll}\n      >\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"1.538\" height=\"1.538rem\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
   "mappings": "AAAA,YAAY,WAAW;ACoGb;AApGV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAC3C,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,uBAAuB;AAEhC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,4BAA4B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBtH,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0BA,OAAM,KAAK,CAAC,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,IAAI,uBAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,mCAAmC,qBAAqB,sBAAsB,IAC3G,gBAAgB;AAClB,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,UAAU;AACT,oBAAc,KAAK;AACnB,0BAAoB;AACpB,4BAAsB;AACtB,4BAAsB,kBAAkB;AAAA,IAC1C;AAAA,IACA,CAAC,oBAAoB,eAAe,uBAAuB,qBAAqB,qBAAqB;AAAA,EACvG;AACA,QAAM,wBAAoEA,OAAM,YAAY,MAAM;AAChG,wBAAoB;AACpB,0BAAsB;AACtB,sCAAkC,kBAAkB;AAAA,EACtD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,iCAAiC,CAAC;AACtG,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBACf,gBAAgB,kCAChB,gBAAgB;AACpB,QAAM,yBAAyBA,OAAM;AAAA,IACnC,CAAC,SAAmC;AAClC,oBAAc,CAAC,YAAY,IAAI,EAAE,GAAG,IAAI;AAAA,IAC1C;AAAA,IACA,CAAC,YAAY,aAAa;AAAA,EAC5B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,SAAS;AAAA,UACT,SAAS;AAAA,UACT,UAAU;AAAA,UAET,+BACC,oBAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,oBAAC,6BAA0B,OAAM,SAAQ,QAAO,YAAW;AAAA;AAAA,MAE/D;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js CHANGED Viewed

@@ -4,14 +4,14 @@ import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { useOnSpecificFocus } from "@elliemae/ds-utilities";
-import { usePropsStore, useInternalStore } from "../../../config/useStore";
-import { ItemListWrapperWithContext } from "./ItemListWrapper/Index";
-import { EmptyItems } from "./EmptyItems";
-import { useFocusTracker } from "../../../config/useFocusTracker";
-import { LoadingItems } from "./LoadingItems";
-import { MultipleSelectionAction } from "./MultipleSelectionAction";
-import { REGIONS_FOCUSES } from "../../../constants";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { usePropsStore, useInternalStore } from "../../../config/useStore/index.js";
+import { ItemListWrapperWithContext } from "./ItemListWrapper/Index.js";
+import { EmptyItems } from "./EmptyItems.js";
+import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
+import { LoadingItems } from "./LoadingItems.js";
+import { MultipleSelectionAction } from "./MultipleSelectionAction.js";
+import { REGIONS_FOCUSES } from "../../../constants/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const useInnerRefHandlers = (isDestinationPanel) => {
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;

package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/PanelContentMiddleSection.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 { useOnSpecificFocus } from '@elliemae/ds-utilities';\n\nimport { usePropsStore, useInternalStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index';\nimport { EmptyItems } from './EmptyItems';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\n\nimport { LoadingItems } from './LoadingItems';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: hidden;\n  position: relative;\n\n  :focus,\n  :focus-visible {\n      outline: 2px solid brand-700;\n    }\n  }\n`;\nconst StyledMidScroller = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID_SCROLLER })`\n  overflow: auto;\n  max-height: 38.462rem;\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  const virtualRef = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n  const scrollToIndex = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationScrollToIndex : state.sourceScrollToIndex,\n  );\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtnDestination,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if (key === 'ArrowDown' || key === 'Home') {\n          scrollToIndex(0);\n          trackFocusItemFirst(panelMetaInfo);\n        }\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) {\n            if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n            else trackFocusLoadMoreBtn();\n          } else {\n            trackFocusItemLast(panelMetaInfo);\n            scrollToIndex(itemsLength - 1);\n          }\n        }\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      isDestinationPanel,\n      trackFocusActionParent,\n      scrollToIndex,\n      trackFocusItemFirst,\n      panelMetaInfo,\n      withLoadMore,\n      trackFocusLoadMoreBtnDestination,\n      trackFocusLoadMoreBtn,\n      trackFocusItemLast,\n      itemsLength,\n    ],\n  );\n\n  return (\n    <StyledListWrapperMid\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n      tabIndex={0}\n      ref={innerRefHandlerParentItem}\n    >\n      <StyledMidScroller ref={virtualRef}>\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n      </StyledMidScroller>\n      {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n    </StyledListWrapperMid>\n  );\n});\n"],
-  "mappings": "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",
+  "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 { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index.js';\nimport { EmptyItems } from './EmptyItems.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { LoadingItems } from './LoadingItems.js';\nimport { MultipleSelectionAction } from './MultipleSelectionAction.js';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: hidden;\n  position: relative;\n\n  :focus,\n  :focus-visible {\n      outline: 2px solid brand-700;\n    }\n  }\n`;\nconst StyledMidScroller = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID_SCROLLER })`\n  overflow: auto;\n  max-height: 38.462rem;\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  const virtualRef = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n  const scrollToIndex = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationScrollToIndex : state.sourceScrollToIndex,\n  );\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtnDestination,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if (key === 'ArrowDown' || key === 'Home') {\n          scrollToIndex(0);\n          trackFocusItemFirst(panelMetaInfo);\n        }\n        if (key === 'ArrowUp' || key === 'End') {\n          if (withLoadMore) {\n            if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n            else trackFocusLoadMoreBtn();\n          } else {\n            trackFocusItemLast(panelMetaInfo);\n            scrollToIndex(itemsLength - 1);\n          }\n        }\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      isDestinationPanel,\n      trackFocusActionParent,\n      scrollToIndex,\n      trackFocusItemFirst,\n      panelMetaInfo,\n      withLoadMore,\n      trackFocusLoadMoreBtnDestination,\n      trackFocusLoadMoreBtn,\n      trackFocusItemLast,\n      itemsLength,\n    ],\n  );\n\n  return (\n    <StyledListWrapperMid\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n      tabIndex={0}\n      ref={innerRefHandlerParentItem}\n    >\n      <StyledMidScroller ref={virtualRef}>\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n      </StyledMidScroller>\n      {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n    </StyledListWrapperMid>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/top/PanelContentTopSection.js CHANGED Viewed

@@ -3,10 +3,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { usePropsStore } from "../../../config/useStore";
-import { SelectionHeader } from "./SelectionHeader";
-import { PanelFilterSection } from "./PanelFilterSection";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { SelectionHeader } from "./SelectionHeader.js";
+import { PanelFilterSection } from "./PanelFilterSection.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;
 const PanelContentTopSection = (panelMetaInfo) => {
   const { isDestinationPanel = false } = panelMetaInfo;

package/dist/esm/parts/Panel/top/PanelContentTopSection.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelContentTopSection.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 { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { SelectionHeader } from './SelectionHeader';\nimport { PanelFilterSection } from './PanelFilterSection';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const topSectionRows = React.useMemo(() => {\n    const cols = [];\n    if (isSearchBarOpen) cols.push('auto');\n    cols.push('auto');\n    return cols;\n  }, [isSearchBarOpen]);\n  return (\n    <StyledListWrapperTop rows={topSectionRows}>\n      {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n      <SelectionHeader {...panelMetaInfo} />\n    </StyledListWrapperTop>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { SelectionHeader } from './SelectionHeader.js';\nimport { PanelFilterSection } from './PanelFilterSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const topSectionRows = React.useMemo(() => {\n    const cols = [];\n    if (isSearchBarOpen) cols.push('auto');\n    cols.push('auto');\n    return cols;\n  }, [isSearchBarOpen]);\n  return (\n    <StyledListWrapperTop rows={topSectionRows}>\n      {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n      <SelectionHeader {...panelMetaInfo} />\n    </StyledListWrapperTop>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACuBnB,SACqB,KADrB;AAvBJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,iBAAiB,CAAC;AAErG,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,iBAAiBA,OAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,CAAC;AACd,QAAI;AAAiB,WAAK,KAAK,MAAM;AACrC,SAAK,KAAK,MAAM;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AACpB,SACE,qBAAC,wBAAqB,MAAM,gBACzB;AAAA,sBAAkB,oBAAC,sBAAoB,GAAG,eAAe,IAAK;AAAA,IAC/D,oBAAC,mBAAiB,GAAG,eAAe;AAAA,KACtC;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/top/PanelFilterSection.js CHANGED Viewed

@@ -4,8 +4,8 @@ import React2 from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { DSInputText } from "@elliemae/ds-form-input-text";
-import { usePropsStore } from "../../../config/useStore";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`
   border-bottom: 1px solid neutral-400;
   border-radius: 0;

package/dist/esm/parts/Panel/top/PanelFilterSection.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelFilterSection.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 { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n  border-bottom: 1px solid neutral-400;\n  border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n  border: none;\n  :focus {\n    border-radius: 0;\n  }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const onFilterCb = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n  );\n  const filterValue = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n  );\n  const handleFilterChange = React.useCallback(\n    (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n      onFilterCb?.(`${value}`, { event });\n    },\n    [onFilterCb],\n  );\n  return (\n    <StyledSearchWrapper>\n      <StyledInputText value={filterValue} onValueChange={handleFilterChange} />\n    </StyledSearchWrapper>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n  border-bottom: 1px solid neutral-400;\n  border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n  border: none;\n  :focus {\n    border-radius: 0;\n  }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const onFilterCb = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n  );\n  const filterValue = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n  );\n  const handleFilterChange = React.useCallback(\n    (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n      onFilterCb?.(`${value}`, { event });\n    },\n    [onFilterCb],\n  );\n  return (\n    <StyledSearchWrapper>\n      <StyledInputText value={filterValue} onValueChange={handleFilterChange} />\n    </StyledSearchWrapper>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACmCjB;AAnCN,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,kBAAkB,OAAO,aAAa,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,SAAS,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,oBAAC,uBACC,8BAAC,mBAAgB,OAAO,aAAa,eAAe,oBAAoB,GAC1E;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/top/SelectionHeader.js CHANGED Viewed

@@ -4,8 +4,8 @@ import React2, { useMemo } from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
 import { Grid } from "@elliemae/ds-grid";
-import { usePropsStore } from "../../../config/useStore";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
 const StyledSelectionHeaderWrapper = styled(Grid, {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.AREA_SELECTION_HEADER

package/dist/esm/parts/Panel/top/SelectionHeader.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/SelectionHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledCheckbox, type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledSelectionHeaderWrapper = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER,\n})`\n  line-height: 1;\n  font-size: 1rem;\n  background-color: neutral-000;\n  border-bottom: 1px solid neutral-400;\n`;\nconst StyledSelectionHeaderCountLabel = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER_COUNT_LABEL,\n})`\n  text-align: end;\n  color: neutral-500;\n  font-weight: 600;\n`;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo(({ isDestinationPanel = false }: DSShuttleV2T.PanelMetaInfo) => {\n  const selectionableItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableData : state.sourceSelectionableData,\n  );\n  const ids = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableIds : state.sourceSelectionableIds,\n  );\n  const ariaControls = useMemo(\n    () =>\n      ids\n        .split(' ')\n        .map((d) => `${d}-wrapper`)\n        .join(' '),\n    [ids],\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const selectionLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n  );\n  const checkboxValue = React.useMemo(() => {\n    let newVal: boolean | 'mixed' = false;\n    if (selectionLength > 0)\n      if (selectionLength === selectionableItems.length) newVal = true;\n      else newVal = 'mixed';\n    return newVal;\n  }, [selectionableItems.length, selectionLength]);\n\n  const handleSelectAll = React.useCallback<DSControlledCheckboxT.InternalProps['onChange']>(\n    (_, event) => {\n      if (checkboxValue === true) {\n        onSelectionChange({}, { event });\n      } else {\n        const newSelection: DSShuttleV2T.InternalProps['sourceSelectedItems'] = {};\n        selectionableItems.forEach((selectableItem) => {\n          newSelection[selectableItem.hydratedId] = true;\n        });\n        onSelectionChange(newSelection, { event });\n      }\n    },\n    [checkboxValue, onSelectionChange, selectionableItems],\n  );\n\n  return (\n    <StyledSelectionHeaderWrapper cols={wrapperCols} justifyContent=\"center\" alignItems=\"center\" py=\"7px\" px=\"xxs2\">\n      <Grid justifyContent=\"center\" alignItems=\"center\">\n        <DSControlledCheckbox\n          checked={checkboxValue}\n          aria-label={`${checkboxValue === true ? 'Deselect' : 'Select'} all ${\n            isDestinationPanel ? 'destination' : 'source'\n          } items`}\n          onChange={handleSelectAll}\n          aria-controls={ariaControls}\n          disabled={selectionableItems.length === 0}\n        />\n      </Grid>\n      <StyledSelectionHeaderCountLabel>{selectionLength} selected</StyledSelectionHeaderCountLabel>\n    </StyledSelectionHeaderWrapper>\n  );\n});\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledCheckbox, type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSelectionHeaderWrapper = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER,\n})`\n  line-height: 1;\n  font-size: 1rem;\n  background-color: neutral-000;\n  border-bottom: 1px solid neutral-400;\n`;\nconst StyledSelectionHeaderCountLabel = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER_COUNT_LABEL,\n})`\n  text-align: end;\n  color: neutral-500;\n  font-weight: 600;\n`;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo(({ isDestinationPanel = false }: DSShuttleV2T.PanelMetaInfo) => {\n  const selectionableItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableData : state.sourceSelectionableData,\n  );\n  const ids = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableIds : state.sourceSelectionableIds,\n  );\n  const ariaControls = useMemo(\n    () =>\n      ids\n        .split(' ')\n        .map((d) => `${d}-wrapper`)\n        .join(' '),\n    [ids],\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const selectionLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n  );\n  const checkboxValue = React.useMemo(() => {\n    let newVal: boolean | 'mixed' = false;\n    if (selectionLength > 0)\n      if (selectionLength === selectionableItems.length) newVal = true;\n      else newVal = 'mixed';\n    return newVal;\n  }, [selectionableItems.length, selectionLength]);\n\n  const handleSelectAll = React.useCallback<DSControlledCheckboxT.InternalProps['onChange']>(\n    (_, event) => {\n      if (checkboxValue === true) {\n        onSelectionChange({}, { event });\n      } else {\n        const newSelection: DSShuttleV2T.InternalProps['sourceSelectedItems'] = {};\n        selectionableItems.forEach((selectableItem) => {\n          newSelection[selectableItem.hydratedId] = true;\n        });\n        onSelectionChange(newSelection, { event });\n      }\n    },\n    [checkboxValue, onSelectionChange, selectionableItems],\n  );\n\n  return (\n    <StyledSelectionHeaderWrapper cols={wrapperCols} justifyContent=\"center\" alignItems=\"center\" py=\"7px\" px=\"xxs2\">\n      <Grid justifyContent=\"center\" alignItems=\"center\">\n        <DSControlledCheckbox\n          checked={checkboxValue}\n          aria-label={`${checkboxValue === true ? 'Deselect' : 'Select'} all ${\n            isDestinationPanel ? 'destination' : 'source'\n          } items`}\n          onChange={handleSelectAll}\n          aria-controls={ariaControls}\n          disabled={selectionableItems.length === 0}\n        />\n      </Grid>\n      <StyledSelectionHeaderCountLabel>{selectionLength} selected</StyledSelectionHeaderCountLabel>\n    </StyledSelectionHeaderWrapper>\n  );\n});\n"],
   "mappings": "AAAA,YAAY,WAAW;AC2Ef,cAUF,YAVE;AA3ER,OAAOA,UAAS,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,4BAAwD;AACjE,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,+BAA+B,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,kCAAkC,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,cAAc,CAAC,QAAQ,KAAK;AAC3B,MAAM,kBAAkBA,OAAM,KAAK,CAAC,EAAE,qBAAqB,MAAM,MAAkC;AACxG,QAAM,qBAAqB;AAAA,IAAc,CAAC,UACxC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,MAAM;AAAA,IAAc,CAAC,UACzB,qBAAqB,MAAM,8BAA8B,MAAM;AAAA,EACjE;AACA,QAAM,eAAe;AAAA,IACnB,MACE,IACG,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,GAAG,WAAW,EACzB,KAAK,GAAG;AAAA,IACb,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,oBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,8BAA8B,SAAS,MAAM,yBAAyB;AAAA,EACnG;AACA,QAAM,gBAAgBA,OAAM,QAAQ,MAAM;AACxC,QAAI,SAA4B;AAChC,QAAI,kBAAkB;AACpB,UAAI,oBAAoB,mBAAmB;AAAQ,iBAAS;AAAA;AACvD,iBAAS;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,QAAQ,eAAe,CAAC;AAE/C,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,GAAG,UAAU;AACZ,UAAI,kBAAkB,MAAM;AAC1B,0BAAkB,CAAC,GAAG,EAAE,MAAM,CAAC;AAAA,MACjC,OAAO;AACL,cAAM,eAAkE,CAAC;AACzE,2BAAmB,QAAQ,CAAC,mBAAmB;AAC7C,uBAAa,eAAe,cAAc;AAAA,QAC5C,CAAC;AACD,0BAAkB,cAAc,EAAE,MAAM,CAAC;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,CAAC,eAAe,mBAAmB,kBAAkB;AAAA,EACvD;AAEA,SACE,qBAAC,gCAA6B,MAAM,aAAa,gBAAe,UAAS,YAAW,UAAS,IAAG,OAAM,IAAG,QACvG;AAAA,wBAAC,QAAK,gBAAe,UAAS,YAAW,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,cAAY,GAAG,kBAAkB,OAAO,aAAa,gBACnD,qBAAqB,gBAAgB;AAAA,QAEvC,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,UAAU,mBAAmB,WAAW;AAAA;AAAA,IAC1C,GACF;AAAA,IACA,qBAAC,mCAAiC;AAAA;AAAA,MAAgB;AAAA,OAAS;AAAA,KAC7D;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -3,11 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { Header } from "./Header";
-import { PanelContentTopSection } from "./Panel/top/PanelContentTopSection";
-import { PanelContentMiddleSection } from "./Panel/middle/PanelContentMiddleSection";
-import { PanelContentBottomSection } from "./Panel/bottom/PanelContentBottomSection";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions";
+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";
 const StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`
   min-width: 300px;
   min-height: 264px;

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

@@ -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  <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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\nimport { 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';\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 CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
 const defaultProps = {
   addDragAndDropFromSource: false,
   removeDragAndDropFromDestination: false,

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

@@ -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", "/* 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';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\n\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from './constants';\nimport type { useAutoCalculated } from './config/useAutoCalculated';\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    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\n  //   Component-less\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\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  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  // =============================================================================\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    shouldFocusItemOnRender: 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 {\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('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\n  sourceIsLoading: PropTypes.bool.description('hello!').defaultValue(false),\n  destinationIsLoading: PropTypes.bool.description('hello!').defaultValue(false),\n  sourceWithLoadMore: PropTypes.bool.description('hello!').defaultValue(false),\n  destinationWithLoadMore: PropTypes.bool.description('hello!').defaultValue(false),\n  sourceIsLoadingMore: PropTypes.bool.description('hello!').defaultValue(false),\n  destinationIsLoadingMore: PropTypes.bool.description('hello!').defaultValue(false),\n  onSourceLoadMore: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationLoadMore: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onSourceAdd: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationAdd: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onSourceRemove: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationRemove: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onSourceReorder: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationReorder: PropTypes.func.description('hello!').defaultValue(() => {}),\n  sourceSoftDeletedItems: PropTypes.object.description('hello!').defaultValue({}),\n  onSourceSoftDelete: PropTypes.func.description('hello!').defaultValue(() => {}),\n  destinationSoftDeletedItems: PropTypes.object.description('hello!').defaultValue({}),\n  onDestinationSoftDelete: PropTypes.func.description('hello!').defaultValue(() => {}),\n  getPreventMove: PropTypes.func.description('hello!').defaultValue(() => false),\n\n  addDragAndDropFromSource: PropTypes.bool.description('hello!').defaultValue(false),\n  removeDragAndDropFromDestination: PropTypes.bool.description('hello!').defaultValue(false),\n\n  sourceItemProps: PropTypes.object.description('hello!').defaultValue({}),\n  destinationItemProps: PropTypes.object.description('hello!').defaultValue({}),\n\n  sourceShowSearchbar: PropTypes.bool.description('hello!').defaultValue(false),\n  destinationShowSearchbar: PropTypes.bool.description('hello!').defaultValue(false),\n  onSourceOpenSearchbar: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDesinationOpenSearchbar: PropTypes.func.description('hello!').defaultValue(() => {}),\n  sourceFilterValue: PropTypes.string.description('hello!').defaultValue(''),\n  destinationFilterValue: PropTypes.string.description('hello!').defaultValue(''),\n  onSourceFilterChange: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationFilterChange: PropTypes.func.description('hello!').defaultValue(() => {}),\n\n  getSubtitle: PropTypes.func.description('hello!').defaultValue(() => ''),\n  getIcon: PropTypes.func.description('hello!').defaultValue(() => ''),\n  getPreventDrilldown: PropTypes.func.description('hello!').defaultValue(() => false),\n\n  getCustomRenderer: PropTypes.func.description('hello!').defaultValue(() => undefined),\n};\n\nexport const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes as unknown as WeakValidationMap<DSShuttleV2T.Props>;\n"],
-  "mappings": "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",
+  "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 {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\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';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\n\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated/index.js';\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    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\n  //   Component-less\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\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  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  // =============================================================================\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    shouldFocusItemOnRender: 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 {\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('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\n  sourceIsLoading: PropTypes.bool.description('hello!').defaultValue(false),\n  destinationIsLoading: PropTypes.bool.description('hello!').defaultValue(false),\n  sourceWithLoadMore: PropTypes.bool.description('hello!').defaultValue(false),\n  destinationWithLoadMore: PropTypes.bool.description('hello!').defaultValue(false),\n  sourceIsLoadingMore: PropTypes.bool.description('hello!').defaultValue(false),\n  destinationIsLoadingMore: PropTypes.bool.description('hello!').defaultValue(false),\n  onSourceLoadMore: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationLoadMore: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onSourceAdd: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationAdd: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onSourceRemove: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationRemove: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onSourceReorder: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationReorder: PropTypes.func.description('hello!').defaultValue(() => {}),\n  sourceSoftDeletedItems: PropTypes.object.description('hello!').defaultValue({}),\n  onSourceSoftDelete: PropTypes.func.description('hello!').defaultValue(() => {}),\n  destinationSoftDeletedItems: PropTypes.object.description('hello!').defaultValue({}),\n  onDestinationSoftDelete: PropTypes.func.description('hello!').defaultValue(() => {}),\n  getPreventMove: PropTypes.func.description('hello!').defaultValue(() => false),\n\n  addDragAndDropFromSource: PropTypes.bool.description('hello!').defaultValue(false),\n  removeDragAndDropFromDestination: PropTypes.bool.description('hello!').defaultValue(false),\n\n  sourceItemProps: PropTypes.object.description('hello!').defaultValue({}),\n  destinationItemProps: PropTypes.object.description('hello!').defaultValue({}),\n\n  sourceShowSearchbar: PropTypes.bool.description('hello!').defaultValue(false),\n  destinationShowSearchbar: PropTypes.bool.description('hello!').defaultValue(false),\n  onSourceOpenSearchbar: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDesinationOpenSearchbar: PropTypes.func.description('hello!').defaultValue(() => {}),\n  sourceFilterValue: PropTypes.string.description('hello!').defaultValue(''),\n  destinationFilterValue: PropTypes.string.description('hello!').defaultValue(''),\n  onSourceFilterChange: PropTypes.func.description('hello!').defaultValue(() => {}),\n  onDestinationFilterChange: PropTypes.func.description('hello!').defaultValue(() => {}),\n\n  getSubtitle: PropTypes.func.description('hello!').defaultValue(() => ''),\n  getIcon: PropTypes.func.description('hello!').defaultValue(() => ''),\n  getPreventDrilldown: PropTypes.func.description('hello!').defaultValue(() => false),\n\n  getCustomRenderer: PropTypes.func.description('hello!').defaultValue(() => undefined),\n};\n\nexport const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes as unknown as WeakValidationMap<DSShuttleV2T.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,WAAW,2BAA2B,wBAAwB;AA6QhE,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;AAAA,EAEhC,gBAAgB,MAAM;AACxB;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;AAAA,EAE/C,iBAAiB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EACxE,sBAAsB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EAC7E,oBAAoB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EAC3E,yBAAyB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EAChF,qBAAqB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EAC5E,0BAA0B,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EACjF,kBAAkB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC5E,uBAAuB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,aAAa,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACvE,kBAAkB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC5E,gBAAgB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC1E,qBAAqB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC/E,iBAAiB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC3E,sBAAsB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAChF,wBAAwB,UAAU,OAAO,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC;AAAA,EAC9E,oBAAoB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,6BAA6B,UAAU,OAAO,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC;AAAA,EACnF,yBAAyB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACnF,gBAAgB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM,KAAK;AAAA,EAE7E,0BAA0B,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EACjF,kCAAkC,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EAEzF,iBAAiB,UAAU,OAAO,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC;AAAA,EACvE,sBAAsB,UAAU,OAAO,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC;AAAA,EAE5E,qBAAqB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EAC5E,0BAA0B,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,KAAK;AAAA,EACjF,uBAAuB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,2BAA2B,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACrF,mBAAmB,UAAU,OAAO,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,wBAAwB,UAAU,OAAO,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EAC9E,sBAAsB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAChF,2BAA2B,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAErF,aAAa,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM,EAAE;AAAA,EACvE,SAAS,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM,EAAE;AAAA,EACnE,qBAAqB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM,KAAK;AAAA,EAElF,mBAAmB,UAAU,KAAK,YAAY,QAAQ,EAAE,aAAa,MAAM,MAAS;AACtF;AAEO,MAAM,6BAA6B;",
   "names": []
 }

package/dist/types/config/itemMovementHelpers.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type DSButtonT } from '@elliemae/ds-button-v2';
-import { type DSShuttleV2T } from '../react-desc-prop-types';
+import { type DSShuttleV2T } from '../react-desc-prop-types.js';
 export declare const useHandleMoveSelection: ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {
     moveSelection: (event: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;
 };

package/dist/types/config/useAutoCalculated/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type DSShuttleV2T } from '../../react-desc-prop-types';
+import { type DSShuttleV2T } from '../../react-desc-prop-types.js';
 export declare const useAutoCalculated: (propsWithDefaults: DSShuttleV2T.InternalProps) => {
     sourceVirtualItems: import("react-virtual").VirtualItem[];
     sourceTotalSize: number;

package/dist/types/config/useAutoCalculated/useDataStructure.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type DSShuttleV2T } from '../../react-desc-prop-types';
+import { type DSShuttleV2T } from '../../react-desc-prop-types.js';
 export declare const useDataStructure: (propsFromUser: DSShuttleV2T.InternalProps) => {
     destinationSelectedItemsMap: Record<string, {
         datum: DSShuttleV2T.Datum;

package/dist/types/config/useAutoCalculated/useShuttleVirtualized.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type UseVirtualReturnType } from 'react-virtual';
-import { type DSShuttleV2T } from '../../react-desc-prop-types';
+import { type DSShuttleV2T } from '../../react-desc-prop-types.js';
 type VirtualConfigT<T extends 'source' | 'destination'> = {
     [key in keyof UseVirtualReturnType as `${T}${Capitalize<string & key>}`]: UseVirtualReturnType[key];
 } & {