@elliemae/ds-shuttle-v2 3.57.0-next.2 → 3.57.0-next.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (154) hide show
  1. package/dist/cjs/DSShuttleV2.js +3 -1
  2. package/dist/cjs/DSShuttleV2.js.map +2 -2
  3. package/dist/cjs/config/useAutoCalculated/index.js.map +2 -2
  4. package/dist/cjs/config/useAutoCalculated/useDataStructure.js.map +2 -2
  5. package/dist/cjs/config/useStore/useStore.js +3 -1
  6. package/dist/cjs/config/useStore/useStore.js.map +2 -2
  7. package/dist/cjs/config/useValidateProps.js.map +2 -2
  8. package/dist/cjs/constants/index.js +44 -1
  9. package/dist/cjs/constants/index.js.map +2 -2
  10. package/dist/cjs/index.js +4 -4
  11. package/dist/cjs/index.js.map +2 -2
  12. package/dist/cjs/parts/Dnd/DndHandle.js +2 -3
  13. package/dist/cjs/parts/Dnd/DndHandle.js.map +2 -2
  14. package/dist/cjs/parts/Header.js +6 -2
  15. package/dist/cjs/parts/Header.js.map +2 -2
  16. package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js +1 -1
  17. package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
  18. package/dist/cjs/parts/HoC/withConditionalUseSortable.js +1 -1
  19. package/dist/cjs/parts/HoC/withConditionalUseSortable.js.map +2 -2
  20. package/dist/cjs/parts/Item/Item.js +2 -3
  21. package/dist/cjs/parts/Item/Item.js.map +2 -2
  22. package/dist/cjs/parts/Item/ItemActions/ItemActions.js +10 -10
  23. package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map +2 -2
  24. package/dist/cjs/parts/Item/ItemMiddleSection.js +4 -4
  25. package/dist/cjs/parts/Item/ItemMiddleSection.js.map +2 -2
  26. package/dist/cjs/parts/Item/ItemOverlay.js +2 -2
  27. package/dist/cjs/parts/Item/ItemOverlay.js.map +2 -2
  28. package/dist/cjs/parts/Item/ItemSelection.js +2 -2
  29. package/dist/cjs/parts/Item/ItemSelection.js.map +2 -2
  30. package/dist/cjs/parts/Item/TextSection.js +2 -2
  31. package/dist/cjs/parts/Item/TextSection.js.map +2 -2
  32. package/dist/cjs/parts/MainContent.js +2 -2
  33. package/dist/cjs/parts/MainContent.js.map +2 -2
  34. package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js +3 -3
  35. package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js.map +2 -2
  36. package/dist/cjs/parts/Panel/bottom/LoadingMore.js +3 -3
  37. package/dist/cjs/parts/Panel/bottom/LoadingMore.js.map +2 -2
  38. package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js +2 -2
  39. package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js.map +2 -2
  40. package/dist/cjs/parts/Panel/middle/EmptyItems.js +2 -2
  41. package/dist/cjs/parts/Panel/middle/EmptyItems.js.map +2 -2
  42. package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js +2 -2
  43. package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js.map +2 -2
  44. package/dist/cjs/parts/Panel/middle/LoadingItems.js +2 -2
  45. package/dist/cjs/parts/Panel/middle/LoadingItems.js.map +2 -2
  46. package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js +8 -9
  47. package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
  48. package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js +11 -13
  49. package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
  50. package/dist/cjs/parts/Panel/middle/ShuttleLoadingAnnouncement.js +38 -0
  51. package/dist/cjs/parts/Panel/middle/ShuttleLoadingAnnouncement.js.map +7 -0
  52. package/dist/cjs/parts/Panel/top/PanelContentTopSection.js +2 -2
  53. package/dist/cjs/parts/Panel/top/PanelContentTopSection.js.map +2 -2
  54. package/dist/cjs/parts/Panel/top/PanelFilterSection.js +6 -4
  55. package/dist/cjs/parts/Panel/top/PanelFilterSection.js.map +2 -2
  56. package/dist/cjs/parts/Panel/top/SelectionHeader.js +5 -5
  57. package/dist/cjs/parts/Panel/top/SelectionHeader.js.map +2 -2
  58. package/dist/cjs/parts/PanelWrapper.js +3 -3
  59. package/dist/cjs/parts/PanelWrapper.js.map +2 -2
  60. package/dist/cjs/react-desc-prop-types.js +3 -3
  61. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  62. package/dist/cjs/typescript-testing/typescript-shuttle-v2-valid.js +142 -0
  63. package/dist/cjs/typescript-testing/typescript-shuttle-v2-valid.js.map +7 -0
  64. package/dist/esm/DSShuttleV2.js +3 -1
  65. package/dist/esm/DSShuttleV2.js.map +2 -2
  66. package/dist/esm/config/useAutoCalculated/index.js.map +2 -2
  67. package/dist/esm/config/useAutoCalculated/useDataStructure.js.map +2 -2
  68. package/dist/esm/config/useStore/useStore.js +3 -1
  69. package/dist/esm/config/useStore/useStore.js.map +2 -2
  70. package/dist/esm/config/useValidateProps.js.map +2 -2
  71. package/dist/esm/constants/index.js +44 -1
  72. package/dist/esm/constants/index.js.map +2 -2
  73. package/dist/esm/index.js +1 -1
  74. package/dist/esm/index.js.map +1 -1
  75. package/dist/esm/parts/Dnd/DndHandle.js +1 -2
  76. package/dist/esm/parts/Dnd/DndHandle.js.map +2 -2
  77. package/dist/esm/parts/Header.js +6 -2
  78. package/dist/esm/parts/Header.js.map +2 -2
  79. package/dist/esm/parts/HoC/withConditionalDnDRowContext.js +2 -2
  80. package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
  81. package/dist/esm/parts/HoC/withConditionalUseSortable.js +1 -1
  82. package/dist/esm/parts/HoC/withConditionalUseSortable.js.map +2 -2
  83. package/dist/esm/parts/Item/Item.js +1 -2
  84. package/dist/esm/parts/Item/Item.js.map +2 -2
  85. package/dist/esm/parts/Item/ItemActions/ItemActions.js +1 -1
  86. package/dist/esm/parts/Item/ItemActions/ItemActions.js.map +1 -1
  87. package/dist/esm/parts/Item/ItemMiddleSection.js +1 -1
  88. package/dist/esm/parts/Item/ItemMiddleSection.js.map +1 -1
  89. package/dist/esm/parts/Item/ItemOverlay.js +1 -1
  90. package/dist/esm/parts/Item/ItemOverlay.js.map +1 -1
  91. package/dist/esm/parts/Item/ItemSelection.js +1 -1
  92. package/dist/esm/parts/Item/ItemSelection.js.map +1 -1
  93. package/dist/esm/parts/Item/TextSection.js +1 -1
  94. package/dist/esm/parts/Item/TextSection.js.map +1 -1
  95. package/dist/esm/parts/MainContent.js +1 -1
  96. package/dist/esm/parts/MainContent.js.map +1 -1
  97. package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js +1 -1
  98. package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map +1 -1
  99. package/dist/esm/parts/Panel/bottom/LoadingMore.js +1 -1
  100. package/dist/esm/parts/Panel/bottom/LoadingMore.js.map +1 -1
  101. package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js +1 -1
  102. package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js.map +1 -1
  103. package/dist/esm/parts/Panel/middle/EmptyItems.js +1 -1
  104. package/dist/esm/parts/Panel/middle/EmptyItems.js.map +1 -1
  105. package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js +1 -1
  106. package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js.map +1 -1
  107. package/dist/esm/parts/Panel/middle/LoadingItems.js +1 -1
  108. package/dist/esm/parts/Panel/middle/LoadingItems.js.map +1 -1
  109. package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js +1 -2
  110. package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
  111. package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js +11 -13
  112. package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
  113. package/dist/esm/parts/Panel/middle/ShuttleLoadingAnnouncement.js +8 -0
  114. package/dist/esm/parts/Panel/middle/ShuttleLoadingAnnouncement.js.map +7 -0
  115. package/dist/esm/parts/Panel/top/PanelContentTopSection.js +1 -1
  116. package/dist/esm/parts/Panel/top/PanelContentTopSection.js.map +1 -1
  117. package/dist/esm/parts/Panel/top/PanelFilterSection.js +5 -3
  118. package/dist/esm/parts/Panel/top/PanelFilterSection.js.map +2 -2
  119. package/dist/esm/parts/Panel/top/SelectionHeader.js +1 -1
  120. package/dist/esm/parts/Panel/top/SelectionHeader.js.map +2 -2
  121. package/dist/esm/parts/PanelWrapper.js +1 -1
  122. package/dist/esm/parts/PanelWrapper.js.map +1 -1
  123. package/dist/esm/react-desc-prop-types.js +1 -1
  124. package/dist/esm/react-desc-prop-types.js.map +2 -2
  125. package/dist/esm/typescript-testing/typescript-shuttle-v2-valid.js +119 -0
  126. package/dist/esm/typescript-testing/typescript-shuttle-v2-valid.js.map +7 -0
  127. package/dist/types/DSShuttleV2.d.ts +5 -3
  128. package/dist/types/config/useAutoCalculated/index.d.ts +1 -1
  129. package/dist/types/config/useAutoCalculated/useDataStructure.d.ts +1 -1
  130. package/dist/types/config/useStore/useStore.d.ts +10 -10
  131. package/dist/types/config/useValidateProps.d.ts +1 -1
  132. package/dist/types/constants/index.d.ts +72 -0
  133. package/dist/types/index.d.ts +1 -1
  134. package/dist/types/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.d.ts +1 -1
  135. package/dist/types/parts/Panel/middle/ShuttleLoadingAnnouncement.d.ts +3 -0
  136. package/dist/types/react-desc-prop-types.d.ts +20 -19
  137. package/dist/types/tests/configs/ControlledTestRender.d.ts +1 -0
  138. package/dist/types/tests/configs/basic.d.ts +4 -5
  139. package/dist/types/tests/configs/filter.d.ts +9 -8
  140. package/dist/types/tests/configs/loadMore.d.ts +4 -5
  141. package/dist/types/tests/shuttle-v2.events.test.d.ts +1 -0
  142. package/dist/types/tests/shuttle-v2.exports.test.d.ts +1 -0
  143. package/dist/types/tests/shuttle-v2.get-owner-props.test.d.ts +1 -0
  144. package/dist/types/tests/shuttle-v2.keyboard.test.d.ts +1 -0
  145. package/dist/types/typescript-testing/typescript-shuttle-v2-valid.d.ts +1 -0
  146. package/package.json +26 -25
  147. package/dist/cjs/config/DSShuttleV2Definitions.js +0 -74
  148. package/dist/cjs/config/DSShuttleV2Definitions.js.map +0 -7
  149. package/dist/esm/config/DSShuttleV2Definitions.js +0 -44
  150. package/dist/esm/config/DSShuttleV2Definitions.js.map +0 -7
  151. package/dist/types/config/DSShuttleV2Definitions.d.ts +0 -69
  152. /package/dist/types/tests/{shuttle-v2.load-more.test.d.ts → loadMore/shuttle-v2.load-more.test.d.ts} +0 -0
  153. /package/dist/types/tests/{shuttle-v2.basic.test.d.ts → shuttle-v2.a11y.test.d.ts} +0 -0
  154. /package/dist/types/tests/{shuttle-v2.filter.test.d.ts → shuttle-v2.data-testid.test.d.ts} +0 -0
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/PanelContentBottomSection.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { LoadMoreBtn } from './LoadMoreBtn.js';\nimport { LoadingMore } from './LoadingMore.js';\nimport { useLoadMoreBtnArrowNavigation } from './useLoadMoreBtnArrowNavigation.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`\n min-height: 2.769rem;\n border-top: 1px solid neutral-400;\n`;\nconst wrapperColsRows = ['1fr'];\n\nexport const PanelContentBottomSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = panelMetaInfo;\n\n const withLoadMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n );\n const isLoadingMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n );\n const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusLoadMoreBtnDestination, trackFocusActionReset } =\n useFocusTracker();\n const onBottomSectionFocus = React.useCallback(() => {\n trackFocusRegionBottom(isDestinationPanel);\n if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n else trackFocusLoadMoreBtn();\n trackFocusActionReset();\n }, [\n isDestinationPanel,\n trackFocusActionReset,\n trackFocusLoadMoreBtn,\n trackFocusLoadMoreBtnDestination,\n trackFocusRegionBottom,\n ]);\n\n // this 3 booleans MUST be auto-exclusives with each other\n const shouldDisplayLoadingMore = isLoadingMore;\n const shouldDisplayLoadMoreBtn = withLoadMore && !isLoadingMore;\n const shouldNotTakeSpace = !withLoadMore && !isLoadingMore;\n const { onLoadMoreButtonKeyDown } = useLoadMoreBtnArrowNavigation(panelMetaInfo);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n if (shouldNotTakeSpace) return <div />;\n return (\n <StyledListWrapperBottom\n cols={wrapperColsRows}\n rows={wrapperColsRows}\n onFocus={onBottomSectionFocus}\n onKeyDown={onLoadMoreButtonKeyDown}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {shouldDisplayLoadingMore ? <LoadingMore {...panelMetaInfo} /> : null}\n {shouldDisplayLoadMoreBtn ? <LoadMoreBtn {...panelMetaInfo} /> : null}\n </StyledListWrapperBottom>\n );\n});\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { LoadMoreBtn } from './LoadMoreBtn.js';\nimport { LoadingMore } from './LoadingMore.js';\nimport { useLoadMoreBtnArrowNavigation } from './useLoadMoreBtnArrowNavigation.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\n\nconst StyledListWrapperBottom = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_BOTTOM })`\n min-height: 2.769rem;\n border-top: 1px solid neutral-400;\n`;\nconst wrapperColsRows = ['1fr'];\n\nexport const PanelContentBottomSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = panelMetaInfo;\n\n const withLoadMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n );\n const isLoadingMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n );\n const { trackFocusRegionBottom, trackFocusLoadMoreBtn, trackFocusLoadMoreBtnDestination, trackFocusActionReset } =\n useFocusTracker();\n const onBottomSectionFocus = React.useCallback(() => {\n trackFocusRegionBottom(isDestinationPanel);\n if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n else trackFocusLoadMoreBtn();\n trackFocusActionReset();\n }, [\n isDestinationPanel,\n trackFocusActionReset,\n trackFocusLoadMoreBtn,\n trackFocusLoadMoreBtnDestination,\n trackFocusRegionBottom,\n ]);\n\n // this 3 booleans MUST be auto-exclusives with each other\n const shouldDisplayLoadingMore = isLoadingMore;\n const shouldDisplayLoadMoreBtn = withLoadMore && !isLoadingMore;\n const shouldNotTakeSpace = !withLoadMore && !isLoadingMore;\n const { onLoadMoreButtonKeyDown } = useLoadMoreBtnArrowNavigation(panelMetaInfo);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n if (shouldNotTakeSpace) return <div />;\n return (\n <StyledListWrapperBottom\n cols={wrapperColsRows}\n rows={wrapperColsRows}\n onFocus={onBottomSectionFocus}\n onKeyDown={onLoadMoreButtonKeyDown}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {shouldDisplayLoadingMore ? <LoadingMore {...panelMetaInfo} /> : null}\n {shouldDisplayLoadMoreBtn ? <LoadMoreBtn {...panelMetaInfo} /> : null}\n </StyledListWrapperBottom>\n );\n});\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACoDU,cAE7B,YAF6B;AAlDjC,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAE9B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,qCAAqC;AAC9C,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAIlH,MAAM,kBAAkB,CAAC,KAAK;AAEvB,MAAM,4BAA4BA,OAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AAEvC,QAAM,eAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,uBAAuB,kCAAkC,sBAAsB,IAC7G,gBAAgB;AAClB,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,2BAAuB,kBAAkB;AACzC,QAAI,mBAAoB,kCAAiC;AAAA,QACpD,uBAAsB;AAC3B,0BAAsB;AAAA,EACxB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,2BAA2B;AACjC,QAAM,2BAA2B,gBAAgB,CAAC;AAClD,QAAM,qBAAqB,CAAC,gBAAgB,CAAC;AAC7C,QAAM,EAAE,wBAAwB,IAAI,8BAA8B,aAAa;AAE/E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,MAAI,mBAAoB,QAAO,oBAAC,SAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,mCAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA,QAChE,2BAA2B,oBAAC,eAAa,GAAG,eAAe,IAAK;AAAA;AAAA;AAAA,EACnE;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
3
3
  import { useCallback } from "react";
4
4
  import { styled } from "@elliemae/ds-system";
5
5
  import { Grid } from "@elliemae/ds-grid";
6
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
6
+ import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
7
7
  import { usePropsStore } from "../../../config/useStore/useStore.js";
8
8
  const StyledEmptyListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.EMPTY_LIST_WRAPPER })`
9
9
  color: neutral-500;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/EmptyItems.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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';\nimport { usePropsStore } from '../../../config/useStore/useStore.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 const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n const noOptionsMessage = usePropsStore((state) =>\n panelMetaInfo.isDestinationPanel ? state.destinationNoOptionsMessage : state.sourceNoOptionsMessage,\n );\n return (\n <StyledEmptyListWrapper\n alignItems=\"center\"\n justifyContent=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {noOptionsMessage}\n </StyledEmptyListWrapper>\n );\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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 '../../../constants/index.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.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 const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n const noOptionsMessage = usePropsStore((state) =>\n panelMetaInfo.isDestinationPanel ? state.destinationNoOptionsMessage : state.sourceNoOptionsMessage,\n );\n return (\n <StyledEmptyListWrapper\n alignItems=\"center\"\n justifyContent=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {noOptionsMessage}\n </StyledEmptyListWrapper>\n );\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACiBnB;AAjBJ,SAAgB,mBAAmB;AACnC,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,yBAAyB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AAAA;AAAA;AAGzG,MAAM,aAAa,CAAC,kBAA8C;AACvE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAC/E,QAAM,mBAAmB;AAAA,IAAc,CAAC,UACtC,cAAc,qBAAqB,MAAM,8BAA8B,MAAM;AAAA,EAC/E;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -5,7 +5,7 @@ import { Grid } from "@elliemae/ds-grid";
5
5
  import { DSFastList } from "@elliemae/ds-fast-list";
6
6
  import { styled } from "@elliemae/ds-system";
7
7
  import { usePropsStore } from "../../../../config/useStore/index.js";
8
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../../config/DSShuttleV2Definitions.js";
8
+ import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../../constants/index.js";
9
9
  import { ItemSortable } from "../../../Item/Item.js";
10
10
  import { withConditionalDnDRowContext } from "../../../HoC/withConditionalDnDRowContext.js";
11
11
  import { useGetDatumHydratables } from "./useGetDatumHydratables.js";
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/Index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSFastList } from '@elliemae/ds-fast-list';\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\ninterface ItemRendererT {\n extraItemProps?: {\n itemList: DSShuttleV2T.ConfiguredDatum[];\n getDatumHydratables: ReturnType<typeof useGetDatumHydratables>;\n panelMetaInfo: DSShuttleV2T.PanelMetaInfo;\n withDragNDrop: boolean;\n };\n index: number;\n}\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n position: relative;\n`;\n\nconst ItemRenderer = ({ index, extraItemProps }: ItemRendererT) => {\n const { itemList, getDatumHydratables, panelMetaInfo, withDragNDrop = false } = extraItemProps || {};\n if (!itemList || !getDatumHydratables || !panelMetaInfo) return null;\n const item = itemList[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 <ItemSortable key={datumHydratables.id} {...itemMeta} />;\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 actionRef = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n );\n\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n return (\n <StyledItemsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <DSFastList\n actionRef={actionRef}\n count={itemList.length}\n ItemRenderer={ItemRenderer}\n extraItemProps={{ itemList, getDatumHydratables, panelMetaInfo, withDragNDrop }}\n getId={(index: number) => itemList[index].hydratedId}\n />\n </StyledItemsWrapper>\n );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSFastList } from '@elliemae/ds-fast-list';\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 '../../../../constants/index.js';\nimport { ItemSortable } from '../../../Item/Item.js';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext.js';\nimport { useGetDatumHydratables } from './useGetDatumHydratables.js';\nimport { getDatumFlags } from './getDatumFlags.js';\n\ninterface ItemRendererT {\n extraItemProps?: {\n itemList: DSShuttleV2T.ConfiguredDatum[];\n getDatumHydratables: ReturnType<typeof useGetDatumHydratables>;\n panelMetaInfo: DSShuttleV2T.PanelMetaInfo;\n withDragNDrop: boolean;\n };\n index: number;\n}\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n position: relative;\n`;\n\nconst ItemRenderer = ({ index, extraItemProps }: ItemRendererT) => {\n const { itemList, getDatumHydratables, panelMetaInfo, withDragNDrop = false } = extraItemProps || {};\n if (!itemList || !getDatumHydratables || !panelMetaInfo) return null;\n const item = itemList[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 <ItemSortable key={datumHydratables.id} {...itemMeta} />;\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 actionRef = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n );\n\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n return (\n <StyledItemsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <DSFastList\n actionRef={actionRef}\n count={itemList.length}\n ItemRenderer={ItemRenderer}\n extraItemProps={{ itemList, getDatumHydratables, panelMetaInfo, withDragNDrop }}\n getId={(index: number) => itemList[index].hydratedId}\n />\n </StyledItemsWrapper>\n );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACyCd;AAxCT,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAW9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAIvG,MAAM,eAAe,CAAC,EAAE,OAAO,eAAe,MAAqB;AACjE,QAAM,EAAE,UAAU,qBAAqB,eAAe,gBAAgB,MAAM,IAAI,kBAAkB,CAAC;AACnG,MAAI,CAAC,YAAY,CAAC,uBAAuB,CAAC,cAAe,QAAO;AAChE,QAAM,OAAO,SAAS,KAAK;AAC3B,QAAM,EAAE,UAAU,OAAO,GAAG,kBAAkB,IAAI;AAClD,QAAM,mBAAmB,oBAAoB,IAAI;AACjD,QAAM,mBAAmB,cAAc,EAAE,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,cAAc,CAAC;AACtG,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF;AACA,SAAO,oBAAC,gBAAwC,GAAG,YAAzB,iBAAiB,EAAkB;AAC/D;AAEA,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;AAAA,IAAc,CAAC,UAC/B,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AAEA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,sBAAsB,uBAAuB,aAAa;AAEhE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE,oBAAC,sBAAmB,eAA8B,wBAChD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,gBAAgB,EAAE,UAAU,qBAAqB,eAAe,cAAc;AAAA,MAC9E,OAAO,CAAC,UAAkB,SAAS,KAAK,EAAE;AAAA;AAAA,EAC5C,GACF;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,gBAAQ;",
6
6
  "names": ["React"]
7
7
  }
@@ -4,7 +4,7 @@ import { useCallback } from "react";
4
4
  import { styled } from "@elliemae/ds-system";
5
5
  import { Grid } from "@elliemae/ds-grid";
6
6
  import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
7
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
7
+ import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
8
8
  import { usePropsStore } from "../../../config/useStore/useStore.js";
9
9
  const StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`
10
10
  color: neutral-500;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/LoadingItems.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`\n color: neutral-500;\n`;\n\nconst StyledLoadingIndicator = styled(DSCircularIndeterminateIndicator)``;\n\nexport const LoadingItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n return (\n <StyledLoadingListWrapper\n alignItems=\"center\"\n justifyContent=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledLoadingIndicator\n size=\"xl\"\n text=\"Loading...\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledLoadingListWrapper>\n );\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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 '../../../constants/index.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledLoadingListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LOADING_LIST_WRAPPER })`\n color: neutral-500;\n`;\n\nconst StyledLoadingIndicator = styled(DSCircularIndeterminateIndicator)``;\n\nexport const LoadingItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n return (\n <StyledLoadingListWrapper\n alignItems=\"center\"\n justifyContent=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledLoadingIndicator\n size=\"xl\"\n text=\"Loading...\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledLoadingListWrapper>\n );\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACyBjB;AAzBN,SAAgB,mBAAmB;AACnC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wCAAwC;AAEjD,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,2BAA2B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAAA;AAAA;AAIpH,MAAM,yBAAyB,OAAO,gCAAgC;AAE/D,MAAM,eAAe,CAAC,kBAA8C;AACzE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -6,11 +6,10 @@ import { Grid } from "@elliemae/ds-grid";
6
6
  import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
7
7
  import { DSButtonV2 } from "@elliemae/ds-button-v2";
8
8
  import { ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
9
- import { REGIONS_FOCUSES } from "../../../constants/index.js";
10
9
  import { useHandleMoveSelection } from "../../../config/itemMovementHelpers.js";
11
10
  import { useInternalStore, usePropsStore } from "../../../config/useStore/index.js";
12
11
  import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
13
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
12
+ import { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from "../../../constants/index.js";
14
13
  const StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
15
14
  position: absolute;
16
15
  background-color: neutral-000;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/MultipleSelectionAction.tsx"],
4
- "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 { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\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, usePropsStore } 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\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 const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n (e) => {\n const { key } = e;\n if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanel(isDestinationPanel);\n }\n },\n [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n );\n\n const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n const batchActionableButtonProps = React.useMemo(\n () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n [getBatchActionableButtonProps, panelMeta],\n );\n const buttonActions = React.useMemo(\n () => ({\n onClick: handleMoveAllAction,\n onFocus: handleMoveAllBtnFocus,\n onKeyDown: handleMoveAllKeyDown,\n }),\n [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown],\n );\n\n // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n return (\n <StyledMoveMultipleWrapper\n boxShadow=\"xs\"\n alignItems=\"center\"\n justifyContent=\"center\"\n cols={gridFullFraction}\n rows={gridFullFraction}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledButton\n aria-label=\"massive action button\"\n buttonType=\"icon\"\n onClick={handleMoveAllAction}\n onFocus={handleMoveAllBtnFocus}\n onKeyDown={handleMoveAllKeyDown}\n innerRef={innerRefHandlerMoveAll}\n {...spreadableButtonProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n </StyledMoveMultipleWrapper>\n );\n});\n"],
5
- "mappings": "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",
4
+ "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 { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from '../../../constants/index.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\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 const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n (e) => {\n const { key } = e;\n if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanel(isDestinationPanel);\n }\n },\n [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n );\n\n const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n const batchActionableButtonProps = React.useMemo(\n () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n [getBatchActionableButtonProps, panelMeta],\n );\n const buttonActions = React.useMemo(\n () => ({\n onClick: handleMoveAllAction,\n onFocus: handleMoveAllBtnFocus,\n onKeyDown: handleMoveAllKeyDown,\n }),\n [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown],\n );\n\n // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n return (\n <StyledMoveMultipleWrapper\n boxShadow=\"xs\"\n alignItems=\"center\"\n justifyContent=\"center\"\n cols={gridFullFraction}\n rows={gridFullFraction}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledButton\n aria-label=\"massive action button\"\n buttonType=\"icon\"\n onClick={handleMoveAllAction}\n onFocus={handleMoveAllBtnFocus}\n onKeyDown={handleMoveAllKeyDown}\n innerRef={innerRefHandlerMoveAll}\n {...spreadableButtonProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n </StyledMoveMultipleWrapper>\n );\n});\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -1,7 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import React2, { useCallback } from "react";
4
- import { uid } from "uid";
5
4
  import { styled } from "@elliemae/ds-system";
6
5
  import { Grid } from "@elliemae/ds-grid";
7
6
  import { useOnSpecificFocus } from "./useOnSpecificFocus.js";
@@ -11,9 +10,9 @@ import { EmptyItems } from "./EmptyItems.js";
11
10
  import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
12
11
  import { LoadingItems } from "./LoadingItems.js";
13
12
  import { MultipleSelectionAction } from "./MultipleSelectionAction.js";
14
- import { REGIONS_FOCUSES } from "../../../constants/index.js";
15
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
13
+ import { DSShuttleV2Name, REGIONS_FOCUSES, DSShuttleV2Slots } from "../../../constants/index.js";
16
14
  import { StyledA11yNoVisible } from "../../../styles.js";
15
+ import { ShuttleLoadingAnnouncement } from "./ShuttleLoadingAnnouncement.js";
17
16
  const useInnerRefHandlers = (isDestinationPanel) => {
18
17
  const setZustandRef = useInternalStore((state) => state.setZustandRef);
19
18
  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;
@@ -122,12 +121,12 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
122
121
  const getOwnerProps = usePropsStore((store) => store.get);
123
122
  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
124
123
  const defaultAriaDescribedBy = itemList.length > 0 ? "Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions" : "No items available in the panel";
125
- const uidDescribedBy = React2.useMemo(() => uid(), []);
124
+ const uidDescribedBy = useInternalStore((state) => state.shuttleInternalId);
126
125
  const defaultAriaLabel = React2.useMemo(
127
126
  () => `Entering ${isDestinationPanel ? "destination" : "source"} panel. `,
128
127
  [isDestinationPanel]
129
128
  );
130
- return /* @__PURE__ */ jsxs(
129
+ return /* @__PURE__ */ jsx(
131
130
  StyledListWrapperMid,
132
131
  {
133
132
  onFocus: onPanelFocus,
@@ -141,15 +140,14 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
141
140
  getOwnerProps,
142
141
  getOwnerPropsArguments,
143
142
  innerRef: innerRefHandlerParentItem,
144
- children: [
143
+ children: /* @__PURE__ */ jsxs(Grid, { cols, rows, children: [
145
144
  /* @__PURE__ */ jsx(StyledA11yNoVisible, { id: uidDescribedBy, children: defaultAriaDescribedBy }),
146
- /* @__PURE__ */ jsxs(Grid, { cols, rows, children: [
147
- isLoading ? /* @__PURE__ */ jsx(LoadingItems, { ...panelMetaInfo }) : null,
148
- showEmptyMessage ? /* @__PURE__ */ jsx(EmptyItems, { ...panelMetaInfo }) : null,
149
- showItems ? /* @__PURE__ */ jsx(ItemListWrapperWithContext, { ...panelMetaInfo }) : null,
150
- hasMultipleSelection ? /* @__PURE__ */ jsx(MultipleSelectionAction, { ...panelMetaInfo }) : null
151
- ] })
152
- ]
145
+ /* @__PURE__ */ jsx(ShuttleLoadingAnnouncement, { isLoading }),
146
+ isLoading ? /* @__PURE__ */ jsx(LoadingItems, { ...panelMetaInfo }) : null,
147
+ showEmptyMessage ? /* @__PURE__ */ jsx(EmptyItems, { ...panelMetaInfo }) : null,
148
+ showItems ? /* @__PURE__ */ jsx(ItemListWrapperWithContext, { ...panelMetaInfo }) : null,
149
+ hasMultipleSelection ? /* @__PURE__ */ jsx(MultipleSelectionAction, { ...panelMetaInfo }) : null
150
+ ] })
153
151
  }
154
152
  );
155
153
  });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/PanelContentMiddleSection.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnSpecificFocus } from './useOnSpecificFocus.js';\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';\nimport { StyledA11yNoVisible } from '../../../styles.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 | null) => {\n setZustandRef([currRegion, '', ''], node);\n },\n [currRegion, setZustandRef],\n );\n return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst rows = [1];\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n overflow: hidden;\n position: relative;\n :focus,\n :focus-visible {\n outline: 2px solid brand-700;\n }\n`;\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\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\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 actionRef = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\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') && itemList.length > 0) {\n actionRef.current.scrollTo(0);\n trackFocusItemFirst(panelMetaInfo);\n }\n if ((key === 'ArrowUp' || key === 'End') && itemList.length > 0) {\n if (withLoadMore) {\n if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n else trackFocusLoadMoreBtn();\n } else {\n trackFocusItemLast(panelMetaInfo);\n actionRef.current.scrollTo(itemsLength - 1);\n }\n }\n }\n },\n [\n getIsDragAndDropHappening,\n trackFocusRegionPanelItem,\n isDestinationPanel,\n trackFocusActionParent,\n itemList.length,\n actionRef,\n trackFocusItemFirst,\n panelMetaInfo,\n withLoadMore,\n trackFocusLoadMoreBtnDestination,\n trackFocusLoadMoreBtn,\n trackFocusItemLast,\n itemsLength,\n ],\n );\n\n const cols = React.useMemo(() => {\n if (hasMultipleSelection) return ['1fr', '5rem'];\n return ['auto'];\n }, [hasMultipleSelection]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const defaultAriaDescribedBy =\n itemList.length > 0\n ? 'Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions'\n : 'No items available in the panel';\n\n const uidDescribedBy = React.useMemo(() => uid(), []);\n\n const defaultAriaLabel = React.useMemo(\n () => `Entering ${isDestinationPanel ? 'destination' : 'source'} panel. `,\n [isDestinationPanel],\n );\n\n return (\n <StyledListWrapperMid\n onFocus={onPanelFocus}\n onKeyDown={onPanelKeyDown}\n role=\"group\"\n tabIndex={0}\n rows={rows}\n aria-label={defaultAriaLabel}\n aria-describedby={uidDescribedBy}\n aria-roledescription={isDestinationPanel ? 'shuttle right panel' : 'shuttle left panel'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n innerRef={innerRefHandlerParentItem}\n >\n <StyledA11yNoVisible id={uidDescribedBy}>{defaultAriaDescribedBy}</StyledA11yNoVisible>\n <Grid cols={cols} rows={rows}>\n {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n </Grid>\n </StyledListWrapperMid>\n );\n});\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnSpecificFocus } from './useOnSpecificFocus.js';\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 { DSShuttleV2Name, REGIONS_FOCUSES, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { StyledA11yNoVisible } from '../../../styles.js';\nimport { ShuttleLoadingAnnouncement } from './ShuttleLoadingAnnouncement.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 | null) => {\n setZustandRef([currRegion, '', ''], node);\n },\n [currRegion, setZustandRef],\n );\n return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst rows = [1];\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n overflow: hidden;\n position: relative;\n :focus,\n :focus-visible {\n outline: 2px solid brand-700;\n }\n`;\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\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\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 actionRef = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\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') && itemList.length > 0) {\n actionRef.current.scrollTo(0);\n trackFocusItemFirst(panelMetaInfo);\n }\n if ((key === 'ArrowUp' || key === 'End') && itemList.length > 0) {\n if (withLoadMore) {\n if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n else trackFocusLoadMoreBtn();\n } else {\n trackFocusItemLast(panelMetaInfo);\n actionRef.current.scrollTo(itemsLength - 1);\n }\n }\n }\n },\n [\n getIsDragAndDropHappening,\n trackFocusRegionPanelItem,\n isDestinationPanel,\n trackFocusActionParent,\n itemList.length,\n actionRef,\n trackFocusItemFirst,\n panelMetaInfo,\n withLoadMore,\n trackFocusLoadMoreBtnDestination,\n trackFocusLoadMoreBtn,\n trackFocusItemLast,\n itemsLength,\n ],\n );\n\n const cols = React.useMemo(() => {\n if (hasMultipleSelection) return ['1fr', '5rem'];\n return ['auto'];\n }, [hasMultipleSelection]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const defaultAriaDescribedBy =\n itemList.length > 0\n ? 'Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions'\n : 'No items available in the panel';\n\n const uidDescribedBy = useInternalStore((state) => state.shuttleInternalId);\n\n const defaultAriaLabel = React.useMemo(\n () => `Entering ${isDestinationPanel ? 'destination' : 'source'} panel. `,\n [isDestinationPanel],\n );\n\n return (\n <StyledListWrapperMid\n onFocus={onPanelFocus}\n onKeyDown={onPanelKeyDown}\n role=\"group\"\n tabIndex={0}\n rows={rows}\n aria-label={defaultAriaLabel}\n aria-describedby={uidDescribedBy}\n aria-roledescription={isDestinationPanel ? 'shuttle right panel' : 'shuttle left panel'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n innerRef={innerRefHandlerParentItem}\n >\n <Grid cols={cols} rows={rows}>\n <StyledA11yNoVisible id={uidDescribedBy}>{defaultAriaDescribedBy}</StyledA11yNoVisible>\n <ShuttleLoadingAnnouncement isLoading={isLoading} />\n {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n </Grid>\n </StyledListWrapperMid>\n );\n});\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -0,0 +1,8 @@
1
+ import * as React from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { StyledA11yNoVisible } from "../../../styles.js";
4
+ const ShuttleLoadingAnnouncement = ({ isLoading }) => /* @__PURE__ */ jsx(StyledA11yNoVisible, { role: "status", "aria-atomic": "true", children: isLoading ? "Loading items\u2026" : "Content loaded" });
5
+ export {
6
+ ShuttleLoadingAnnouncement
7
+ };
8
+ //# sourceMappingURL=ShuttleLoadingAnnouncement.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/ShuttleLoadingAnnouncement.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledA11yNoVisible } from '../../../styles.js';\n\nexport const ShuttleLoadingAnnouncement = ({ isLoading }: { isLoading: boolean }) => (\n <StyledA11yNoVisible role=\"status\" aria-atomic=\"true\">\n {isLoading ? 'Loading items\u2026' : 'Content loaded'}\n </StyledA11yNoVisible>\n);\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACIrB;AAHF,SAAS,2BAA2B;AAE7B,MAAM,6BAA6B,CAAC,EAAE,UAAU,MACrD,oBAAC,uBAAoB,MAAK,UAAS,eAAY,QAC5C,sBAAY,wBAAmB,kBAClC;",
6
+ "names": []
7
+ }
@@ -6,7 +6,7 @@ import { Grid } from "@elliemae/ds-grid";
6
6
  import { usePropsStore } from "../../../config/useStore/index.js";
7
7
  import { SelectionHeader } from "./SelectionHeader.js";
8
8
  import { PanelFilterSection } from "./PanelFilterSection.js";
9
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
9
+ import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
10
10
  const StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;
11
11
  const PanelContentTopSection = (panelMetaInfo) => {
12
12
  const getOwnerProps = usePropsStore((store) => store.get);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelContentTopSection.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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 getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\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\n rows={topSectionRows}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n <SelectionHeader {...panelMetaInfo} />\n </StyledListWrapperTop>\n );\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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 '../../../constants/index.js';\n\nconst StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\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\n rows={topSectionRows}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n <SelectionHeader {...panelMetaInfo} />\n </StyledListWrapperTop>\n );\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;AC0BnB,SAKqB,KALrB;AA1BJ,OAAOA,UAAS,mBAAmB;AACnC,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,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,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,gBAAiB,MAAK,KAAK,MAAM;AACrC,SAAK,KAAK,MAAM;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MAEC;AAAA,0BAAkB,oBAAC,sBAAoB,GAAG,eAAe,IAAK;AAAA,QAC/D,oBAAC,mBAAiB,GAAG,eAAe;AAAA;AAAA;AAAA,EACtC;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -4,8 +4,8 @@ import React2, { useCallback } from "react";
4
4
  import { Grid } from "@elliemae/ds-grid";
5
5
  import { styled } from "@elliemae/ds-system";
6
6
  import { DSInputText } from "@elliemae/ds-form-input-text";
7
- import { usePropsStore } from "../../../config/useStore/index.js";
8
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
7
+ import { usePropsStore, useInternalStore } from "../../../config/useStore/index.js";
8
+ import { DSShuttleV2Name, DSShuttleV2Slots, SHUTTLE_IDS } from "../../../constants/index.js";
9
9
  const StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`
10
10
  border-bottom: 1px solid neutral-400;
11
11
  border-radius: 0;
@@ -19,6 +19,7 @@ const StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShu
19
19
  const PanelFilterSection = (panelMetaInfo) => {
20
20
  const getOwnerProps = usePropsStore((store) => store.get);
21
21
  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
22
+ const shuttleId = useInternalStore((state) => state.shuttleInternalId);
22
23
  const areaSearchBarProps = usePropsStore((store) => store.areaSearchBarProps);
23
24
  const { isDestinationPanel = false } = panelMetaInfo;
24
25
  const onFilterCb = usePropsStore(
@@ -33,15 +34,16 @@ const PanelFilterSection = (panelMetaInfo) => {
33
34
  },
34
35
  [onFilterCb]
35
36
  );
37
+ const inputTextId = isDestinationPanel ? `${SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}` : `${SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;
36
38
  return /* @__PURE__ */ jsx(StyledSearchWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(
37
39
  StyledInputText,
38
40
  {
41
+ id: inputTextId,
39
42
  value: filterValue,
40
43
  onValueChange: handleFilterChange,
41
44
  "aria-label": isDestinationPanel ? "Destination input search" : "Source input search",
42
45
  getOwnerProps,
43
46
  getOwnerPropsArguments,
44
- autoFocus: true,
45
47
  ...areaSearchBarProps && areaSearchBarProps({ isDestinationPanel })
46
48
  }
47
49
  ) });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelFilterSection.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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 getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n const areaSearchBarProps = usePropsStore((store) => store.areaSearchBarProps);\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 getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledInputText\n value={filterValue}\n onValueChange={handleFilterChange}\n aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n autoFocus\n {...(areaSearchBarProps && areaSearchBarProps({ isDestinationPanel }))}\n />\n </StyledSearchWrapper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACsCjB;AAtCN,OAAOA,UAAS,mBAAmB;AACnC,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,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAC/E,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,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,KAAK,IAAI,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,oBAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACR,GAAI,sBAAsB,mBAAmB,EAAE,mBAAmB,CAAC;AAAA;AAAA,EACtE,GACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, SHUTTLE_IDS } from '../../../constants/index.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 getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n const shuttleId = useInternalStore((state) => state.shuttleInternalId);\n const areaSearchBarProps = usePropsStore((store) => store.areaSearchBarProps);\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\n const inputTextId = isDestinationPanel\n ? `${SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}`\n : `${SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;\n return (\n <StyledSearchWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledInputText\n id={inputTextId}\n value={filterValue}\n onValueChange={handleFilterChange}\n aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n {...(areaSearchBarProps && areaSearchBarProps({ isDestinationPanel }))}\n />\n </StyledSearchWrapper>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC2CjB;AA3CN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,eAAe,wBAAwB;AAEhD,SAAS,iBAAiB,kBAAkB,mBAAmB;AAE/D,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,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAC/E,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,iBAAiB;AACrE,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,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,KAAK,IAAI,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,cAAc,qBAChB,GAAG,YAAY,wBAAwB,IAAI,SAAS,KACpD,GAAG,YAAY,mBAAmB,IAAI,SAAS;AACnD,SACE,oBAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA,MACC,GAAI,sBAAsB,mBAAmB,EAAE,mBAAmB,CAAC;AAAA;AAAA,EACtE,GACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -5,7 +5,7 @@ import { styled } from "@elliemae/ds-system";
5
5
  import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
6
6
  import { Grid } from "@elliemae/ds-grid";
7
7
  import { usePropsStore } from "../../../config/useStore/index.js";
8
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
8
+ import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
9
9
  const StyledSelectionHeaderWrapper = styled(Grid, {
10
10
  name: DSShuttleV2Name,
11
11
  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/SelectionHeader.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, 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 StyledCheckbox = styled(DSControlledCheckbox)``;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = 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\n const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n const ariaControls = useMemo(\n () =>\n ids.length === 0\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 const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n return (\n <StyledSelectionHeaderWrapper\n cols={wrapperCols}\n justifyContent=\"center\"\n alignItems=\"center\"\n py=\"7px\"\n px=\"xxs2\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Grid justifyContent=\"center\" alignItems=\"center\">\n <StyledCheckbox\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 // need to overwrite this becasue the default aria-labelledby is not working for axe-core\n aria-labelledby=\"\"\n disabled={selectionableItems.length === 0}\n aria-disabled={selectionableItems.length === 0}\n {...(checkboxSelectAllProps &&\n checkboxSelectAllProps({ isDestinationPanel, hasMultipleSelection: selectionLength > 1 }))}\n />\n </Grid>\n <StyledSelectionHeaderCountLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {selectionLength} selected\n </StyledSelectionHeaderCountLabel>\n </StyledSelectionHeaderWrapper>\n );\n});\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC8Ff,cAeF,YAfE;AA9FR,OAAOA,UAAS,aAAa,eAAe;AAC5C,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,iBAAiB,OAAO,oBAAoB;AAElD,MAAM,cAAc,CAAC,QAAQ,KAAK;AAC3B,MAAM,kBAAkBA,OAAM,KAAK,CAAC,kBAA8C;AACvF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,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;AAEA,QAAM,yBAAyB,cAAc,CAAC,UAAU,MAAM,sBAAsB;AAEpF,QAAM,eAAe;AAAA,IACnB,MACE,IAAI,WAAW,IACX,KACA,IACG,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,GAAG,CAAC,UAAU,EACzB,KAAK,GAAG;AAAA,IACjB,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,OAAQ,UAAS;AAAA,UACvD,UAAS;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,UAAU,IAAI;AAAA,QAC5C,CAAC;AACD,0BAAkB,cAAc,EAAE,MAAM,CAAC;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,CAAC,eAAe,mBAAmB,kBAAkB;AAAA,EACvD;AAEA,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,IAAG;AAAA,MACH,IAAG;AAAA,MACH;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,QAAK,gBAAe,UAAS,YAAW,UACvC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,cAAY,GAAG,kBAAkB,OAAO,aAAa,QAAQ,QAC3D,qBAAqB,gBAAgB,QACvC;AAAA,YACA,UAAU;AAAA,YACV,iBAAe;AAAA,YAEf,mBAAgB;AAAA,YAChB,UAAU,mBAAmB,WAAW;AAAA,YACxC,iBAAe,mBAAmB,WAAW;AAAA,YAC5C,GAAI,0BACH,uBAAuB,EAAE,oBAAoB,sBAAsB,kBAAkB,EAAE,CAAC;AAAA;AAAA,QAC5F,GACF;AAAA,QACA,qBAAC,mCAAgC,eAA8B,wBAC5D;AAAA;AAAA,UAAgB;AAAA,WACnB;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, 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 '../../../constants/index.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 StyledCheckbox = styled(DSControlledCheckbox)``;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = 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\n const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n const ariaControls = useMemo(\n () =>\n ids.length === 0\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<object, object, object, object>['sourceSelectedItems'] = {};\n selectionableItems.forEach((selectableItem) => {\n newSelection[selectableItem.hydratedId] = true;\n });\n onSelectionChange(newSelection, { event });\n }\n },\n [checkboxValue, onSelectionChange, selectionableItems],\n );\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n return (\n <StyledSelectionHeaderWrapper\n cols={wrapperCols}\n justifyContent=\"center\"\n alignItems=\"center\"\n py=\"7px\"\n px=\"xxs2\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Grid justifyContent=\"center\" alignItems=\"center\">\n <StyledCheckbox\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 // need to overwrite this becasue the default aria-labelledby is not working for axe-core\n aria-labelledby=\"\"\n disabled={selectionableItems.length === 0}\n aria-disabled={selectionableItems.length === 0}\n {...(checkboxSelectAllProps &&\n checkboxSelectAllProps({ isDestinationPanel, hasMultipleSelection: selectionLength > 1 }))}\n />\n </Grid>\n <StyledSelectionHeaderCountLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {selectionLength} selected\n </StyledSelectionHeaderCountLabel>\n </StyledSelectionHeaderWrapper>\n );\n});\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -7,7 +7,7 @@ import { Header } from "./Header.js";
7
7
  import { PanelContentTopSection } from "./Panel/top/PanelContentTopSection.js";
8
8
  import { PanelContentMiddleSection } from "./Panel/middle/PanelContentMiddleSection.js";
9
9
  import { PanelContentBottomSection } from "./Panel/bottom/PanelContentBottomSection.js";
10
- import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
10
+ import { DSShuttleV2Name, DSShuttleV2Slots } from "../constants/index.js";
11
11
  import { usePropsStore } from "../config/useStore/useStore.js";
12
12
  const StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`
13
13
  min-width: 300px;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PanelWrapper.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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';\nimport { usePropsStore } from '../config/useStore/useStore.js';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n min-width: 300px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n border: 1px solid neutral-400;\n height: 100%;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n return (\n <StyledPanelWrapper\n rows={panelWrapperRows}\n gutter=\"xxxs\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Header {...panelMetaInfo} />\n <StyledListWrapper\n rows={listWrapperRows}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PanelContentTopSection {...panelMetaInfo} />\n <PanelContentMiddleSection {...panelMetaInfo} />\n <PanelContentBottomSection {...panelMetaInfo} />\n </StyledListWrapper>\n </StyledPanelWrapper>\n );\n});\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } 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 '../constants/index.js';\nimport { usePropsStore } from '../config/useStore/useStore.js';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n min-width: 300px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n border: 1px solid neutral-400;\n height: 100%;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n return (\n <StyledPanelWrapper\n rows={panelWrapperRows}\n gutter=\"xxxs\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Header {...panelMetaInfo} />\n <StyledListWrapper\n rows={listWrapperRows}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PanelContentTopSection {...panelMetaInfo} />\n <PanelContentMiddleSection {...panelMetaInfo} />\n <PanelContentBottomSection {...panelMetaInfo} />\n </StyledListWrapper>\n </StyledPanelWrapper>\n );\n});\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;AC+BjB,cACA,YADA;AA/BN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAGvG,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAIrG,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AAEvC,MAAM,eAAeA,OAAM,KAAK,CAAC,kBAA8C;AACpF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAQ,GAAG,eAAe;AAAA,QAC3B;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,0BAAwB,GAAG,eAAe;AAAA,cAC3C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,cAC9C,oBAAC,6BAA2B,GAAG,eAAe;AAAA;AAAA;AAAA,QAChD;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
@@ -6,7 +6,7 @@ import {
6
6
  globalAttributesPropTypes,
7
7
  xstyledPropTypes
8
8
  } from "@elliemae/ds-props-helpers";
9
- import { DSShuttleV2DataTestIds, DSShuttleV2Name, DSShuttleV2Slots } from "./config/DSShuttleV2Definitions.js";
9
+ import { DSShuttleV2DataTestIds, DSShuttleV2Name, DSShuttleV2Slots } from "./constants/index.js";
10
10
  const defaultProps = {
11
11
  addDragAndDropFromSource: false,
12
12
  removeDragAndDropFromDestination: false,