@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.
- package/dist/cjs/DSShuttleV2.js +3 -1
- package/dist/cjs/DSShuttleV2.js.map +2 -2
- package/dist/cjs/config/useAutoCalculated/index.js.map +2 -2
- package/dist/cjs/config/useAutoCalculated/useDataStructure.js.map +2 -2
- package/dist/cjs/config/useStore/useStore.js +3 -1
- package/dist/cjs/config/useStore/useStore.js.map +2 -2
- package/dist/cjs/config/useValidateProps.js.map +2 -2
- package/dist/cjs/constants/index.js +44 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/Dnd/DndHandle.js +2 -3
- package/dist/cjs/parts/Dnd/DndHandle.js.map +2 -2
- package/dist/cjs/parts/Header.js +6 -2
- package/dist/cjs/parts/Header.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js +1 -1
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalUseSortable.js +1 -1
- package/dist/cjs/parts/HoC/withConditionalUseSortable.js.map +2 -2
- package/dist/cjs/parts/Item/Item.js +2 -3
- package/dist/cjs/parts/Item/Item.js.map +2 -2
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js +10 -10
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/cjs/parts/Item/ItemMiddleSection.js +4 -4
- package/dist/cjs/parts/Item/ItemMiddleSection.js.map +2 -2
- package/dist/cjs/parts/Item/ItemOverlay.js +2 -2
- package/dist/cjs/parts/Item/ItemOverlay.js.map +2 -2
- package/dist/cjs/parts/Item/ItemSelection.js +2 -2
- package/dist/cjs/parts/Item/ItemSelection.js.map +2 -2
- package/dist/cjs/parts/Item/TextSection.js +2 -2
- package/dist/cjs/parts/Item/TextSection.js.map +2 -2
- package/dist/cjs/parts/MainContent.js +2 -2
- package/dist/cjs/parts/MainContent.js.map +2 -2
- package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js +3 -3
- package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js.map +2 -2
- package/dist/cjs/parts/Panel/bottom/LoadingMore.js +3 -3
- package/dist/cjs/parts/Panel/bottom/LoadingMore.js.map +2 -2
- package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js +2 -2
- package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/EmptyItems.js +2 -2
- package/dist/cjs/parts/Panel/middle/EmptyItems.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js +2 -2
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/LoadingItems.js +2 -2
- package/dist/cjs/parts/Panel/middle/LoadingItems.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js +8 -9
- package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js +11 -13
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/ShuttleLoadingAnnouncement.js +38 -0
- package/dist/cjs/parts/Panel/middle/ShuttleLoadingAnnouncement.js.map +7 -0
- package/dist/cjs/parts/Panel/top/PanelContentTopSection.js +2 -2
- package/dist/cjs/parts/Panel/top/PanelContentTopSection.js.map +2 -2
- package/dist/cjs/parts/Panel/top/PanelFilterSection.js +6 -4
- package/dist/cjs/parts/Panel/top/PanelFilterSection.js.map +2 -2
- package/dist/cjs/parts/Panel/top/SelectionHeader.js +5 -5
- package/dist/cjs/parts/Panel/top/SelectionHeader.js.map +2 -2
- package/dist/cjs/parts/PanelWrapper.js +3 -3
- package/dist/cjs/parts/PanelWrapper.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +3 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-shuttle-v2-valid.js +142 -0
- package/dist/cjs/typescript-testing/typescript-shuttle-v2-valid.js.map +7 -0
- package/dist/esm/DSShuttleV2.js +3 -1
- package/dist/esm/DSShuttleV2.js.map +2 -2
- package/dist/esm/config/useAutoCalculated/index.js.map +2 -2
- package/dist/esm/config/useAutoCalculated/useDataStructure.js.map +2 -2
- package/dist/esm/config/useStore/useStore.js +3 -1
- package/dist/esm/config/useStore/useStore.js.map +2 -2
- package/dist/esm/config/useValidateProps.js.map +2 -2
- package/dist/esm/constants/index.js +44 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/Dnd/DndHandle.js +1 -2
- package/dist/esm/parts/Dnd/DndHandle.js.map +2 -2
- package/dist/esm/parts/Header.js +6 -2
- package/dist/esm/parts/Header.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalUseSortable.js +1 -1
- package/dist/esm/parts/HoC/withConditionalUseSortable.js.map +2 -2
- package/dist/esm/parts/Item/Item.js +1 -2
- package/dist/esm/parts/Item/Item.js.map +2 -2
- package/dist/esm/parts/Item/ItemActions/ItemActions.js +1 -1
- package/dist/esm/parts/Item/ItemActions/ItemActions.js.map +1 -1
- package/dist/esm/parts/Item/ItemMiddleSection.js +1 -1
- package/dist/esm/parts/Item/ItemMiddleSection.js.map +1 -1
- package/dist/esm/parts/Item/ItemOverlay.js +1 -1
- package/dist/esm/parts/Item/ItemOverlay.js.map +1 -1
- package/dist/esm/parts/Item/ItemSelection.js +1 -1
- package/dist/esm/parts/Item/ItemSelection.js.map +1 -1
- package/dist/esm/parts/Item/TextSection.js +1 -1
- package/dist/esm/parts/Item/TextSection.js.map +1 -1
- package/dist/esm/parts/MainContent.js +1 -1
- package/dist/esm/parts/MainContent.js.map +1 -1
- package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js +1 -1
- package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map +1 -1
- package/dist/esm/parts/Panel/bottom/LoadingMore.js +1 -1
- package/dist/esm/parts/Panel/bottom/LoadingMore.js.map +1 -1
- package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js +1 -1
- package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js.map +1 -1
- package/dist/esm/parts/Panel/middle/EmptyItems.js +1 -1
- package/dist/esm/parts/Panel/middle/EmptyItems.js.map +1 -1
- package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js +1 -1
- package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js.map +1 -1
- package/dist/esm/parts/Panel/middle/LoadingItems.js +1 -1
- package/dist/esm/parts/Panel/middle/LoadingItems.js.map +1 -1
- package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js +1 -2
- package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js +11 -13
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/esm/parts/Panel/middle/ShuttleLoadingAnnouncement.js +8 -0
- package/dist/esm/parts/Panel/middle/ShuttleLoadingAnnouncement.js.map +7 -0
- package/dist/esm/parts/Panel/top/PanelContentTopSection.js +1 -1
- package/dist/esm/parts/Panel/top/PanelContentTopSection.js.map +1 -1
- package/dist/esm/parts/Panel/top/PanelFilterSection.js +5 -3
- package/dist/esm/parts/Panel/top/PanelFilterSection.js.map +2 -2
- package/dist/esm/parts/Panel/top/SelectionHeader.js +1 -1
- package/dist/esm/parts/Panel/top/SelectionHeader.js.map +2 -2
- package/dist/esm/parts/PanelWrapper.js +1 -1
- package/dist/esm/parts/PanelWrapper.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-shuttle-v2-valid.js +119 -0
- package/dist/esm/typescript-testing/typescript-shuttle-v2-valid.js.map +7 -0
- package/dist/types/DSShuttleV2.d.ts +5 -3
- package/dist/types/config/useAutoCalculated/index.d.ts +1 -1
- package/dist/types/config/useAutoCalculated/useDataStructure.d.ts +1 -1
- package/dist/types/config/useStore/useStore.d.ts +10 -10
- package/dist/types/config/useValidateProps.d.ts +1 -1
- package/dist/types/constants/index.d.ts +72 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.d.ts +1 -1
- package/dist/types/parts/Panel/middle/ShuttleLoadingAnnouncement.d.ts +3 -0
- package/dist/types/react-desc-prop-types.d.ts +20 -19
- package/dist/types/tests/configs/ControlledTestRender.d.ts +1 -0
- package/dist/types/tests/configs/basic.d.ts +4 -5
- package/dist/types/tests/configs/filter.d.ts +9 -8
- package/dist/types/tests/configs/loadMore.d.ts +4 -5
- package/dist/types/tests/shuttle-v2.events.test.d.ts +1 -0
- package/dist/types/tests/shuttle-v2.exports.test.d.ts +1 -0
- package/dist/types/tests/shuttle-v2.get-owner-props.test.d.ts +1 -0
- package/dist/types/tests/shuttle-v2.keyboard.test.d.ts +1 -0
- package/dist/types/typescript-testing/typescript-shuttle-v2-valid.d.ts +1 -0
- package/package.json +26 -25
- package/dist/cjs/config/DSShuttleV2Definitions.js +0 -74
- package/dist/cjs/config/DSShuttleV2Definitions.js.map +0 -7
- package/dist/esm/config/DSShuttleV2Definitions.js +0 -44
- package/dist/esm/config/DSShuttleV2Definitions.js.map +0 -7
- package/dist/types/config/DSShuttleV2Definitions.d.ts +0 -69
- /package/dist/types/tests/{shuttle-v2.load-more.test.d.ts → loadMore/shuttle-v2.load-more.test.d.ts} +0 -0
- /package/dist/types/tests/{shuttle-v2.basic.test.d.ts → shuttle-v2.a11y.test.d.ts} +0 -0
- /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 '../../../
|
|
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 "../../../
|
|
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 '../../../
|
|
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 "../../../../
|
|
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 '../../../../
|
|
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 "../../../
|
|
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 '../../../
|
|
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 "../../../
|
|
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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 =
|
|
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__ */
|
|
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__ */
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 "../../../
|
|
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 '../../../
|
|
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 "../../../
|
|
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 '../../../
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 "../../../
|
|
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 '../../../
|
|
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,
|
|
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 "../
|
|
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 '../
|
|
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 "./
|
|
9
|
+
import { DSShuttleV2DataTestIds, DSShuttleV2Name, DSShuttleV2Slots } from "./constants/index.js";
|
|
10
10
|
const defaultProps = {
|
|
11
11
|
addDragAndDropFromSource: false,
|
|
12
12
|
removeDragAndDropFromDestination: false,
|