@elliemae/ds-shuttle-v2 3.53.0-next.9 → 3.54.0-beta.1
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/config/useAutoCalculated/index.js.map +2 -2
- package/dist/cjs/config/useFocusTracker/useFocusItemTracker.js +34 -7
- package/dist/cjs/config/useFocusTracker/useFocusItemTracker.js.map +2 -2
- package/dist/cjs/config/useStore/focusAndTabIndexManager.js.map +2 -2
- package/dist/cjs/parts/Item/Item.js +26 -21
- package/dist/cjs/parts/Item/Item.js.map +2 -2
- package/dist/cjs/parts/Item/useThisItemIsFocused.js +1 -1
- package/dist/cjs/parts/Item/useThisItemIsFocused.js.map +2 -2
- package/dist/cjs/parts/MainContent.js +8 -7
- package/dist/cjs/parts/MainContent.js.map +2 -2
- package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js +29 -5
- package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/config/useAutoCalculated/index.js.map +2 -2
- package/dist/esm/config/useFocusTracker/useFocusItemTracker.js +34 -7
- package/dist/esm/config/useFocusTracker/useFocusItemTracker.js.map +2 -2
- package/dist/esm/config/useStore/focusAndTabIndexManager.js.map +2 -2
- package/dist/esm/parts/Item/Item.js +27 -22
- package/dist/esm/parts/Item/Item.js.map +2 -2
- package/dist/esm/parts/Item/useThisItemIsFocused.js +1 -1
- package/dist/esm/parts/Item/useThisItemIsFocused.js.map +2 -2
- package/dist/esm/parts/MainContent.js +8 -7
- package/dist/esm/parts/MainContent.js.map +2 -2
- package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js +29 -5
- package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +5 -5
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/config/itemMovementHelpers.d.ts +1 -1
- package/dist/types/config/useAutoCalculated/index.d.ts +0 -1
- package/dist/types/config/useAutoCalculated/useShuttleVirtualized.d.ts +0 -1
- package/dist/types/config/useFocusTracker/useFocusItemTracker.d.ts +2 -0
- package/dist/types/config/useFocusTracker/useFocusTracker.d.ts +2 -0
- package/dist/types/config/useStore/focusAndTabIndexManager.d.ts +1 -1
- package/dist/types/config/useStore/useStore.d.ts +2 -3
- package/dist/types/parts/Dnd/DndHandle.d.ts +2 -2
- package/dist/types/parts/Item/ItemActions/useActionsHandlers.d.ts +2 -2
- package/dist/types/parts/Item/ItemMiddleSection.d.ts +1 -1
- package/dist/types/parts/Item/ItemOverlay.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +9 -10
- package/dist/types/tests/loadMore/ShuttleV2WithLoadMoreTestable.d.ts +2 -0
- package/dist/types/tests/loadMore/shuttle-v2.load-more.focus.test.d.ts +1 -0
- package/package.json +24 -23
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useAutoCalculated/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useDataStructure } from './useDataStructure.js';\nimport { useShuttleVirtualized } from './useShuttleVirtualized.js';\nexport const useAutoCalculated = (propsWithDefaults: DSShuttleV2T.InternalProps) => {\n const dataScructured = useDataStructure(propsWithDefaults);\n const virtualData = useShuttleVirtualized();\n\n return useMemo(() => ({ ...dataScructured, ...virtualData }), [dataScructured, virtualData]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,8BAAiC;AACjC,mCAAsC;
|
|
4
|
+
"sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useDataStructure } from './useDataStructure.js';\nimport { useShuttleVirtualized } from './useShuttleVirtualized.js';\n\nexport const useAutoCalculated = (propsWithDefaults: DSShuttleV2T.InternalProps) => {\n const dataScructured = useDataStructure(propsWithDefaults);\n const virtualData = useShuttleVirtualized();\n\n return useMemo(() => ({ ...dataScructured, ...virtualData }), [dataScructured, virtualData]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,8BAAiC;AACjC,mCAAsC;AAE/B,MAAM,oBAAoB,CAAC,sBAAkD;AAClF,QAAM,qBAAiB,0CAAiB,iBAAiB;AACzD,QAAM,kBAAc,oDAAsB;AAE1C,aAAO,sBAAQ,OAAO,EAAE,GAAG,gBAAgB,GAAG,YAAY,IAAI,CAAC,gBAAgB,WAAW,CAAC;AAC7F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -82,22 +82,49 @@ const useFocusItemTracker = () => {
|
|
|
82
82
|
},
|
|
83
83
|
[destinationData, destinationWithLoadMore, getFocusItem, setFocusItem, sourceData, sourceWithLoadMore]
|
|
84
84
|
);
|
|
85
|
+
const destHasData = destinationData.length > 0;
|
|
86
|
+
const sourceHasData = sourceData.length > 0;
|
|
87
|
+
const getCanFocusFirstItem = (0, import_react.useCallback)(
|
|
88
|
+
({ isDestinationPanel }) => isDestinationPanel ? destHasData : sourceHasData,
|
|
89
|
+
[destHasData, sourceHasData]
|
|
90
|
+
);
|
|
91
|
+
const getCanFocusLastItem = getCanFocusFirstItem;
|
|
92
|
+
const trackFocusItemFirst = (0, import_react.useCallback)(
|
|
93
|
+
({ isDestinationPanel }) => {
|
|
94
|
+
const firstItem = isDestinationPanel ? destinationData[0] : sourceData[0];
|
|
95
|
+
if (firstItem) setFocusItem(import_constants.ITEMS_FOCUSES.GET_SPECIFIC_ITEM(firstItem));
|
|
96
|
+
},
|
|
97
|
+
[destinationData, setFocusItem, sourceData]
|
|
98
|
+
);
|
|
99
|
+
const trackFocusItemLast = (0, import_react.useCallback)(
|
|
100
|
+
({ isDestinationPanel }) => {
|
|
101
|
+
const lastItem = isDestinationPanel ? destinationData[destinationData.length - 1] : sourceData[sourceData.length - 1];
|
|
102
|
+
if (lastItem) setFocusItem(import_constants.ITEMS_FOCUSES.GET_SPECIFIC_ITEM(lastItem));
|
|
103
|
+
},
|
|
104
|
+
[destinationData, setFocusItem, sourceData]
|
|
105
|
+
);
|
|
85
106
|
return (0, import_react.useMemo)(
|
|
86
107
|
() => ({
|
|
87
108
|
trackFocusItem: (item) => setFocusItem(item.hydratedId),
|
|
88
109
|
trackFocusItemReset: () => setFocusItem(import_constants.ITEMS_FOCUSES.RESET),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
)
|
|
94
|
-
),
|
|
110
|
+
getCanFocusFirstItem,
|
|
111
|
+
trackFocusItemFirst,
|
|
112
|
+
getCanFocusLastItem,
|
|
113
|
+
trackFocusItemLast,
|
|
95
114
|
trackFocusLoadMoreBtnDestination: () => setFocusItem(import_constants.ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION),
|
|
96
115
|
trackFocusLoadMoreBtn: () => setFocusItem(import_constants.ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE),
|
|
97
116
|
trackFocusPrevItem,
|
|
98
117
|
trackFocusNextItem
|
|
99
118
|
}),
|
|
100
|
-
[
|
|
119
|
+
[
|
|
120
|
+
getCanFocusFirstItem,
|
|
121
|
+
getCanFocusLastItem,
|
|
122
|
+
setFocusItem,
|
|
123
|
+
trackFocusItemFirst,
|
|
124
|
+
trackFocusItemLast,
|
|
125
|
+
trackFocusNextItem,
|
|
126
|
+
trackFocusPrevItem
|
|
127
|
+
]
|
|
101
128
|
);
|
|
102
129
|
};
|
|
103
130
|
//# sourceMappingURL=useFocusItemTracker.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useFocusTracker/useFocusItemTracker.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useMemo, useCallback } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../useStore/index.js';\nimport { ITEMS_FOCUSES } from '../../constants/index.js';\n\nexport const useFocusItemTracker = () => {\n const getFocusItem = useInternalStore((state) => state.getFocusItem);\n const setFocusItem = useInternalStore((state) => state.setFocusItem);\n const sourceData = usePropsStore((state) => state.sourceConfiguredData);\n const destinationData = usePropsStore((state) => state.destinationConfiguredData);\n const sourceWithLoadMore = usePropsStore((state) => state.sourceWithLoadMore);\n const destinationWithLoadMore = usePropsStore((state) => state.destinationWithLoadMore);\n const trackFocusPrevItem = useCallback(\n ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n const focusItem = getFocusItem();\n const referenceData = isDestinationPanel ? destinationData : sourceData;\n const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;\n // loop logic\n const currentItemIndex = referenceData.findIndex((currItem) => currItem.hydratedId === focusItem);\n if (currentItemIndex === 0 && withLoadMore)\n setFocusItem(isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE);\n else if (currentItemIndex !== -1) {\n const prevItemIndex = currentItemIndex === 0 ? referenceData.length - 1 : currentItemIndex - 1;\n const prevItem = referenceData[prevItemIndex];\n setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n } else {\n const prevItemIndex = 0;\n const prevItem = referenceData[prevItemIndex];\n setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n }\n },\n [destinationData, destinationWithLoadMore, getFocusItem, setFocusItem, sourceData, sourceWithLoadMore],\n );\n const trackFocusNextItem = useCallback(\n ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n const focusItem = getFocusItem();\n const referenceData = isDestinationPanel ? destinationData : sourceData;\n const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;\n // focus loop logic\n const currentItemIndex = referenceData.findIndex((currItem) => currItem.hydratedId === focusItem);\n if (currentItemIndex === referenceData.length - 1 && withLoadMore)\n setFocusItem(isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE);\n else if (currentItemIndex !== -1) {\n const nextItemIndex = currentItemIndex === referenceData.length - 1 ? 0 : currentItemIndex + 1;\n const nextItem = referenceData[nextItemIndex];\n setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n } else {\n const nextItemIndex = referenceData.length - 1;\n const nextItem = referenceData[nextItemIndex];\n setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n }\n },\n [destinationData, destinationWithLoadMore, getFocusItem, setFocusItem, sourceData, sourceWithLoadMore],\n );\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAqC;AAErC,sBAAgD;AAChD,uBAA8B;AAEvB,MAAM,sBAAsB,MAAM;AACvC,QAAM,mBAAe,kCAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,mBAAe,kCAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,iBAAa,+BAAc,CAAC,UAAU,MAAM,oBAAoB;AACtE,QAAM,sBAAkB,+BAAc,CAAC,UAAU,MAAM,yBAAyB;AAChF,QAAM,yBAAqB,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,8BAA0B,+BAAc,CAAC,UAAU,MAAM,uBAAuB;AACtF,QAAM,yBAAqB;AAAA,IACzB,CAAC,EAAE,mBAAmB,MAAkC;AACtD,YAAM,YAAY,aAAa;AAC/B,YAAM,gBAAgB,qBAAqB,kBAAkB;AAC7D,YAAM,eAAe,qBAAqB,0BAA0B;AAEpE,YAAM,mBAAmB,cAAc,UAAU,CAAC,aAAa,SAAS,eAAe,SAAS;AAChG,UAAI,qBAAqB,KAAK;AAC5B,qBAAa,qBAAqB,+BAAc,4BAA4B,+BAAc,oBAAoB;AAAA,eACvG,qBAAqB,IAAI;AAChC,cAAM,gBAAgB,qBAAqB,IAAI,cAAc,SAAS,IAAI,mBAAmB;AAC7F,cAAM,WAAW,cAAc,aAAa;AAC5C,qBAAa,+BAAc,kBAAkB,QAAQ,CAAC;AAAA,MACxD,OAAO;AACL,cAAM,gBAAgB;AACtB,cAAM,WAAW,cAAc,aAAa;AAC5C,qBAAa,+BAAc,kBAAkB,QAAQ,CAAC;AAAA,MACxD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,yBAAyB,cAAc,cAAc,YAAY,kBAAkB;AAAA,EACvG;AACA,QAAM,yBAAqB;AAAA,IACzB,CAAC,EAAE,mBAAmB,MAAkC;AACtD,YAAM,YAAY,aAAa;AAC/B,YAAM,gBAAgB,qBAAqB,kBAAkB;AAC7D,YAAM,eAAe,qBAAqB,0BAA0B;AAEpE,YAAM,mBAAmB,cAAc,UAAU,CAAC,aAAa,SAAS,eAAe,SAAS;AAChG,UAAI,qBAAqB,cAAc,SAAS,KAAK;AACnD,qBAAa,qBAAqB,+BAAc,4BAA4B,+BAAc,oBAAoB;AAAA,eACvG,qBAAqB,IAAI;AAChC,cAAM,gBAAgB,qBAAqB,cAAc,SAAS,IAAI,IAAI,mBAAmB;AAC7F,cAAM,WAAW,cAAc,aAAa;AAC5C,qBAAa,+BAAc,kBAAkB,QAAQ,CAAC;AAAA,MACxD,OAAO;AACL,cAAM,gBAAgB,cAAc,SAAS;AAC7C,cAAM,WAAW,cAAc,aAAa;AAC5C,qBAAa,+BAAc,kBAAkB,QAAQ,CAAC;AAAA,MACxD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,yBAAyB,cAAc,cAAc,YAAY,kBAAkB;AAAA,EACvG;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useMemo, useCallback } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../useStore/index.js';\nimport { ITEMS_FOCUSES } from '../../constants/index.js';\n\nexport const useFocusItemTracker = () => {\n const getFocusItem = useInternalStore((state) => state.getFocusItem);\n const setFocusItem = useInternalStore((state) => state.setFocusItem);\n const sourceData = usePropsStore((state) => state.sourceConfiguredData);\n const destinationData = usePropsStore((state) => state.destinationConfiguredData);\n const sourceWithLoadMore = usePropsStore((state) => state.sourceWithLoadMore);\n const destinationWithLoadMore = usePropsStore((state) => state.destinationWithLoadMore);\n const trackFocusPrevItem = useCallback(\n ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n const focusItem = getFocusItem();\n const referenceData = isDestinationPanel ? destinationData : sourceData;\n const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;\n // loop logic\n const currentItemIndex = referenceData.findIndex((currItem) => currItem.hydratedId === focusItem);\n if (currentItemIndex === 0 && withLoadMore)\n setFocusItem(isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE);\n else if (currentItemIndex !== -1) {\n const prevItemIndex = currentItemIndex === 0 ? referenceData.length - 1 : currentItemIndex - 1;\n const prevItem = referenceData[prevItemIndex];\n setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n } else {\n const prevItemIndex = 0;\n const prevItem = referenceData[prevItemIndex];\n setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(prevItem));\n }\n },\n [destinationData, destinationWithLoadMore, getFocusItem, setFocusItem, sourceData, sourceWithLoadMore],\n );\n const trackFocusNextItem = useCallback(\n ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n const focusItem = getFocusItem();\n const referenceData = isDestinationPanel ? destinationData : sourceData;\n const withLoadMore = isDestinationPanel ? destinationWithLoadMore : sourceWithLoadMore;\n // focus loop logic\n const currentItemIndex = referenceData.findIndex((currItem) => currItem.hydratedId === focusItem);\n if (currentItemIndex === referenceData.length - 1 && withLoadMore)\n setFocusItem(isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE);\n else if (currentItemIndex !== -1) {\n const nextItemIndex = currentItemIndex === referenceData.length - 1 ? 0 : currentItemIndex + 1;\n const nextItem = referenceData[nextItemIndex];\n setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n } else {\n const nextItemIndex = referenceData.length - 1;\n const nextItem = referenceData[nextItemIndex];\n setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(nextItem));\n }\n },\n [destinationData, destinationWithLoadMore, getFocusItem, setFocusItem, sourceData, sourceWithLoadMore],\n );\n\n const destHasData = destinationData.length > 0;\n const sourceHasData = sourceData.length > 0;\n const getCanFocusFirstItem = useCallback(\n ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => (isDestinationPanel ? destHasData : sourceHasData),\n [destHasData, sourceHasData],\n );\n const getCanFocusLastItem = getCanFocusFirstItem;\n\n const trackFocusItemFirst = useCallback(\n ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n const firstItem = isDestinationPanel ? destinationData[0] : sourceData[0];\n if (firstItem) setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(firstItem));\n },\n [destinationData, setFocusItem, sourceData],\n );\n const trackFocusItemLast = useCallback(\n ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n const lastItem = isDestinationPanel\n ? destinationData[destinationData.length - 1]\n : sourceData[sourceData.length - 1];\n if (lastItem) setFocusItem(ITEMS_FOCUSES.GET_SPECIFIC_ITEM(lastItem));\n },\n [destinationData, setFocusItem, sourceData],\n );\n\n return useMemo(\n () => ({\n trackFocusItem: (item: DSShuttleV2T.ConfiguredDatum) => setFocusItem(item.hydratedId),\n trackFocusItemReset: () => setFocusItem(ITEMS_FOCUSES.RESET),\n getCanFocusFirstItem,\n trackFocusItemFirst,\n getCanFocusLastItem,\n trackFocusItemLast,\n trackFocusLoadMoreBtnDestination: () => setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION),\n trackFocusLoadMoreBtn: () => setFocusItem(ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE),\n trackFocusPrevItem,\n trackFocusNextItem,\n }),\n [\n getCanFocusFirstItem,\n getCanFocusLastItem,\n setFocusItem,\n trackFocusItemFirst,\n trackFocusItemLast,\n trackFocusNextItem,\n trackFocusPrevItem,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useStore/focusAndTabIndexManager.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { ITEMS_FOCUSES, REGIONS_FOCUSES } from '../../constants/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { ITEMS_FOCUSES, REGIONS_FOCUSES } from '../../constants/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\n\ntype State = readonly [\n DSShuttleV2T.FocusRegion,\n DSShuttleV2T.FocusItem,\n DSShuttleV2T.FocusItemAction,\n () => ZustandT.InternalStore<DSShuttleV2T.InternalAtoms, DSShuttleV2T.Selectors, DSShuttleV2T.Reducers>,\n];\n\nconst getElementFromState = (state: State) => {\n const [focusRegion, focusItem, focusItemAction, get] = state;\n\n const { getZustandRef } = get();\n\n if (\n focusItem === ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE &&\n (focusRegion === REGIONS_FOCUSES.SOURCE_BOTTOM || focusRegion === REGIONS_FOCUSES.SOURCE_PANEL_ITEM)\n ) {\n return getZustandRef([focusItem]);\n }\n if (\n focusItem === ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION &&\n (focusRegion === REGIONS_FOCUSES.DESTINATION_BOTTOM || focusRegion === REGIONS_FOCUSES.DESTINATION_PANEL_ITEM)\n ) {\n return getZustandRef([focusItem]);\n }\n\n return getZustandRef([focusRegion, focusItem, focusItemAction]);\n};\n\nconst isItem = (state: State) =>\n state[2] === 'parent' &&\n state[1] !== ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE &&\n state[1] !== ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION;\n\nconst isMove = (state: State) => state[2] === 'move-btn';\n\nconst isDrilldown = (state: State) => state[2] === 'drilldown-btn';\n\nconst shouldApplyRovingTabIndex = (state: State) => isItem(state) || isMove(state) || isDrilldown(state);\n\nconst tabIndexManager = ({\n selectedState,\n previousSelectedState,\n currentFocusedItem,\n nextFocusedItem,\n}: {\n selectedState: State;\n previousSelectedState: State;\n currentFocusedItem: HTMLElement | null;\n nextFocusedItem: HTMLElement | null;\n}) => {\n if (currentFocusedItem && shouldApplyRovingTabIndex(previousSelectedState)) {\n currentFocusedItem.tabIndex = -1;\n }\n\n if (nextFocusedItem && shouldApplyRovingTabIndex(selectedState)) {\n nextFocusedItem.tabIndex = 0;\n }\n};\n\nexport const focusAndTabIndexManager = (selectedState: State, previousSelectedState: State) => {\n const currentFocusedItem = getElementFromState(previousSelectedState);\n const nextFocusedItem = getElementFromState(selectedState);\n\n const get = selectedState[3];\n const { setDeferFocusUntilFirstRender } = get();\n\n tabIndexManager({ selectedState, previousSelectedState, currentFocusedItem, nextFocusedItem });\n\n if (isItem(selectedState)) {\n // The item on `nextFocusItem` could be an old virtualized item.\n // If this is the case, we should focus it on render too just in case\n setDeferFocusUntilFirstRender(true); // we will reset this flag inside the ref callback of the item\n } else {\n setDeferFocusUntilFirstRender(false);\n }\n\n nextFocusedItem?.focus();\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA+C;AAU/C,MAAM,sBAAsB,CAAC,UAAiB;AAC5C,QAAM,CAAC,aAAa,WAAW,iBAAiB,GAAG,IAAI;AAEvD,QAAM,EAAE,cAAc,IAAI,IAAI;AAE9B,MACE,cAAc,+BAAc,yBAC3B,gBAAgB,iCAAgB,iBAAiB,gBAAgB,iCAAgB,oBAClF;AACA,WAAO,cAAc,CAAC,SAAS,CAAC;AAAA,EAClC;AACA,MACE,cAAc,+BAAc,8BAC3B,gBAAgB,iCAAgB,sBAAsB,gBAAgB,iCAAgB,yBACvF;AACA,WAAO,cAAc,CAAC,SAAS,CAAC;AAAA,EAClC;AAEA,SAAO,cAAc,CAAC,aAAa,WAAW,eAAe,CAAC;AAChE;AAEA,MAAM,SAAS,CAAC,UACd,MAAM,CAAC,MAAM,YACb,MAAM,CAAC,MAAM,+BAAc,wBAC3B,MAAM,CAAC,MAAM,+BAAc;AAE7B,MAAM,SAAS,CAAC,UAAiB,MAAM,CAAC,MAAM;AAE9C,MAAM,cAAc,CAAC,UAAiB,MAAM,CAAC,MAAM;AAEnD,MAAM,4BAA4B,CAAC,UAAiB,OAAO,KAAK,KAAK,OAAO,KAAK,KAAK,YAAY,KAAK;AAEvG,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,MAAI,sBAAsB,0BAA0B,qBAAqB,GAAG;AAC1E,uBAAmB,WAAW;AAAA,EAChC;AAEA,MAAI,mBAAmB,0BAA0B,aAAa,GAAG;AAC/D,oBAAgB,WAAW;AAAA,EAC7B;AACF;AAEO,MAAM,0BAA0B,CAAC,eAAsB,0BAAiC;AAC7F,QAAM,qBAAqB,oBAAoB,qBAAqB;AACpE,QAAM,kBAAkB,oBAAoB,aAAa;AAEzD,QAAM,MAAM,cAAc,CAAC;AAC3B,QAAM,EAAE,8BAA8B,IAAI,IAAI;AAE9C,kBAAgB,EAAE,eAAe,uBAAuB,oBAAoB,gBAAgB,CAAC;AAE7F,MAAI,OAAO,aAAa,GAAG;AAGzB,kCAA8B,IAAI;AAAA,EACpC,OAAO;AACL,kCAA8B,KAAK;AAAA,EACrC;AAEA,mBAAiB,MAAM;AACzB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,23 +35,23 @@ __export(Item_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(Item_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
-
var
|
|
38
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
39
|
var import_ds_hooks_headless_tooltip = require("@elliemae/ds-hooks-headless-tooltip");
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
|
-
var
|
|
41
|
+
var import_react = __toESM(require("react"));
|
|
42
42
|
var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions.js");
|
|
43
43
|
var import_useStore = require("../../config/useStore/index.js");
|
|
44
|
-
var import_ItemSelection = require("./ItemSelection.js");
|
|
45
|
-
var import_ItemActions = require("./ItemActions/index.js");
|
|
46
|
-
var import_ItemMiddleSection = require("./ItemMiddleSection.js");
|
|
47
|
-
var import_useSelectionLogic = require("./useSelectionLogic.js");
|
|
48
|
-
var import_useItemArrowNavigation = require("./useItemArrowNavigation.js");
|
|
49
44
|
var import_constants = require("../../constants/index.js");
|
|
50
45
|
var import_DndHandle = require("../Dnd/DndHandle.js");
|
|
51
46
|
var import_DropIndicator = require("../Dnd/DropIndicator.js");
|
|
52
47
|
var import_withConditionalUseSortable = require("../HoC/withConditionalUseSortable.js");
|
|
48
|
+
var import_ItemActions = require("./ItemActions/index.js");
|
|
53
49
|
var import_useInnerRefHandlers = require("./ItemActions/useInnerRefHandlers.js");
|
|
50
|
+
var import_ItemMiddleSection = require("./ItemMiddleSection.js");
|
|
51
|
+
var import_ItemSelection = require("./ItemSelection.js");
|
|
52
|
+
var import_useItemArrowNavigation = require("./useItemArrowNavigation.js");
|
|
54
53
|
var import_useItemKeyboardSelection = require("./useItemKeyboardSelection.js");
|
|
54
|
+
var import_useSelectionLogic = require("./useSelectionLogic.js");
|
|
55
55
|
var import_useThisItemIsFocused = require("./useThisItemIsFocused.js");
|
|
56
56
|
const cssDisabled = import_ds_system.css`
|
|
57
57
|
background-color: ${({ theme }) => theme.colors.neutral["100"]};
|
|
@@ -97,28 +97,34 @@ const useInnerRefHandlers = (itemMeta) => {
|
|
|
97
97
|
const { hydratedId } = datumInternalMeta;
|
|
98
98
|
const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
|
|
99
99
|
const setDeferFocusUntilFirstRender = (0, import_useStore.useInternalStore)((state) => state.setDeferFocusUntilFirstRender);
|
|
100
|
-
const
|
|
100
|
+
const deferedAfterFirstRender = (0, import_useStore.useInternalStore)((state) => state.getDeferFocusUntilFirstRender());
|
|
101
|
+
const isLoadingMore = (0, import_useStore.usePropsStore)(
|
|
102
|
+
(state) => isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore
|
|
103
|
+
);
|
|
101
104
|
const thisItemIsFocused = (0, import_useThisItemIsFocused.useThisItemIsFocused)(itemMeta);
|
|
102
105
|
const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
|
|
103
106
|
const currItemId = hydratedId;
|
|
104
107
|
const innerRefHandlerParentItem = import_react.default.useCallback(
|
|
105
108
|
(node) => {
|
|
106
109
|
setZustandRef([currRegion, currItemId, "parent"], node);
|
|
107
|
-
if (
|
|
108
|
-
node?.focus();
|
|
110
|
+
if (deferedAfterFirstRender && thisItemIsFocused && node) {
|
|
109
111
|
setDeferFocusUntilFirstRender(false);
|
|
112
|
+
if (node.tabIndex === -1) node.tabIndex = 0;
|
|
113
|
+
node.focus();
|
|
110
114
|
}
|
|
111
115
|
},
|
|
112
|
-
[
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
116
|
+
[setZustandRef, currRegion, currItemId, thisItemIsFocused, deferedAfterFirstRender, setDeferFocusUntilFirstRender]
|
|
117
|
+
);
|
|
118
|
+
(0, import_react.useEffect)(
|
|
119
|
+
() => () => {
|
|
120
|
+
if (isLoadingMore) setDeferFocusUntilFirstRender(true);
|
|
121
|
+
},
|
|
122
|
+
[isLoadingMore, setDeferFocusUntilFirstRender]
|
|
123
|
+
);
|
|
124
|
+
return import_react.default.useMemo(
|
|
125
|
+
() => ({ innerRefHandlerParentItem, thisItemIsFocused }),
|
|
126
|
+
[innerRefHandlerParentItem, thisItemIsFocused]
|
|
120
127
|
);
|
|
121
|
-
return import_react.default.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);
|
|
122
128
|
};
|
|
123
129
|
const Item = import_react.default.memo((itemMeta) => {
|
|
124
130
|
const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;
|
|
@@ -148,7 +154,7 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
148
154
|
},
|
|
149
155
|
[onItemKeyDownSelection, onItemContainerKeyDown]
|
|
150
156
|
);
|
|
151
|
-
const { innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);
|
|
157
|
+
const { innerRefHandlerParentItem, thisItemIsFocused } = useInnerRefHandlers(itemMeta);
|
|
152
158
|
const { innerRefHandlerDnd } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(itemMeta);
|
|
153
159
|
const overId = (0, import_useStore.useInternalStore)((state) => state.overId);
|
|
154
160
|
const isDropValid = (0, import_useStore.useInternalStore)((state) => state.isDropValid);
|
|
@@ -156,7 +162,6 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
156
162
|
const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;
|
|
157
163
|
const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {
|
|
158
164
|
});
|
|
159
|
-
const thisItemIsFocused = (0, import_useThisItemIsFocused.useThisItemIsFocused)(itemMeta);
|
|
160
165
|
const config = import_react.default.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);
|
|
161
166
|
const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)(config);
|
|
162
167
|
const idItem = (0, import_react.useMemo)(() => `${hydratedId}-wrapper${softDeleted ? "-soft-deleted" : ""}`, [hydratedId, softDeleted]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Item/Item.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { Grid } from '@elliemae/ds-grid';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { css, styled } from '@elliemae/ds-system';\nimport React, { useEffect, useMemo } from 'react';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { REGIONS_FOCUSES } from '../../constants/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DragHandle } from '../Dnd/DndHandle.js';\nimport { DropIndicator } from '../Dnd/DropIndicator.js';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable.js';\nimport { ItemActions } from './ItemActions/index.js';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { ItemSelection } from './ItemSelection.js';\nimport { useItemArrowNavigation } from './useItemArrowNavigation.js';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection.js';\nimport { useSelectionLogic } from './useSelectionLogic.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst cssDisabled = css`\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n color: ${({ theme }) => theme.colors.neutral['300']};\n .DSShuttleV2-item-action-btn-to-source-icon > svg,\n .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n fill: ${({ theme }) => theme.colors.neutral['300']};\n }\n`;\n\nconst focusRing = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n outline-offset: -2px;\n`;\ninterface ItemWrapperT {\n isDragging: boolean;\n isDndActive: boolean;\n hasFocusRing: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n min-height: 2.769rem;\n position: relative;\n background-color: white;\n &:hover {\n background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n .DSShuttleV2-item-action-btn-to-source-icon > svg,\n .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n fill: brand-700;\n }\n ${({ isDragging }) => isDragging && cssDisabled}\n }\n\n ${({ hasFocusRing }) => hasFocusRing && focusRing}\n\n border-bottom: 1px solid neutral-100;\n\n ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`\n height: 100%;\n &:focus {\n outline: none;\n }\n`;\n\nconst useInnerRefHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, isDestinationPanel } = itemMeta;\n const { hydratedId } = datumInternalMeta;\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);\n const deferedAfterFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender());\n const isLoadingMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n );\n\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n const currItemId = hydratedId;\n\n const innerRefHandlerParentItem = React.useCallback(\n (node: HTMLDivElement | null) => {\n setZustandRef([currRegion, currItemId, 'parent'], node);\n if (deferedAfterFirstRender && thisItemIsFocused && node) {\n setDeferFocusUntilFirstRender(false);\n if (node.tabIndex === -1) node.tabIndex = 0;\n node.focus();\n }\n },\n [setZustandRef, currRegion, currItemId, thisItemIsFocused, deferedAfterFirstRender, setDeferFocusUntilFirstRender],\n );\n\n useEffect(\n () => () => {\n if (isLoadingMore) setDeferFocusUntilFirstRender(true);\n },\n [isLoadingMore, setDeferFocusUntilFirstRender],\n );\n\n return React.useMemo(\n () => ({ innerRefHandlerParentItem, thisItemIsFocused }),\n [innerRefHandlerParentItem, thisItemIsFocused],\n );\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n const { isSelected, hydratedId, softDeleted } = datumInternalMeta;\n\n const cols = useMemo(() => {\n if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n return ['5px', '1fr', 'auto'];\n }, [withDragNDrop]);\n\n const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n React.useEffect(() => {\n if (isDraggingThisItem) {\n setDndDraggingItemMeta((prevItemMeta) => {\n if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId) return prevItemMeta;\n return itemMeta;\n });\n }\n }, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);\n\n const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n (event) => {\n onItemKeyDownSelection(event);\n onItemContainerKeyDown(event);\n },\n [onItemKeyDownSelection, onItemContainerKeyDown],\n );\n const { innerRefHandlerParentItem, thisItemIsFocused } = useInnerRefHandlers(itemMeta);\n const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n const overId = useInternalStore((state) => state.overId);\n const isDropValid = useInternalStore((state) => state.isDropValid);\n const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {});\n\n // const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n const config = React.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);\n\n const tooltipHelpers = useHeadlessTooltip(config);\n\n const idItem = useMemo(() => `${hydratedId}-wrapper${softDeleted ? '-soft-deleted' : ''}`, [hydratedId, softDeleted]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <ItemWrapper\n isDragging={isDraggingThisItem}\n isDndActive={getIsDragAndDropHappening()}\n cols={cols}\n alignItems=\"center\"\n onClick={selectItem}\n innerRef={sortableRef}\n onKeyDown={handleItemKeyDown}\n onMouseDown={onShiftMouseDownPreventTextSelection}\n onMouseEnter={tooltipHelpers.onMouseEnter}\n onMouseLeave={tooltipHelpers.onMouseLeave}\n onPointerEnter={tooltipHelpers.onMouseEnter}\n onPointerLeave={tooltipHelpers.onMouseLeave}\n hasFocusRing={thisItemIsFocused}\n tabIndex={-1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <ItemSelectionWrapper\n role=\"checkbox\"\n aria-checked={isSelected}\n onFocus={tooltipHelpers.onFocus}\n onBlur={tooltipHelpers.onBlur}\n aria-labelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n id={idItem}\n innerRef={innerRefHandlerParentItem}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <ItemSelection {...itemMeta} />\n </ItemSelectionWrapper>\n {withDragNDrop && useSortableHelpers ? (\n <DragHandle\n id={hydratedId}\n useSortableHelpers={useSortableHelpers}\n isDndActive={getIsDragAndDropHappening()}\n isDragging={isDraggingThisItem}\n innerRef={innerRefHandlerDnd}\n disabled={hasMultipleSelection}\n />\n ) : null}\n <ItemMiddleSection {...itemMeta} tooltipHelpers={tooltipHelpers} />\n {!hasMultipleSelection ? <ItemActions {...itemMeta} /> : null}\n <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n </ItemWrapper>\n );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "useInnerRefActionHandlers"]
|
|
7
7
|
}
|
|
@@ -40,7 +40,7 @@ const useThisItemIsFocused = (itemMeta) => {
|
|
|
40
40
|
const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
|
|
41
41
|
const currItemId = hydratedId;
|
|
42
42
|
const thisItemIsFocused = (0, import_useStore.useInternalStore)(
|
|
43
|
-
(state) => currRegion === state.focusRegion && currItemId === state.focusItem && "parent"
|
|
43
|
+
(state) => currRegion === state.focusRegion && currItemId === state.focusItem && state.focusItemAction === "parent"
|
|
44
44
|
);
|
|
45
45
|
return thisItemIsFocused;
|
|
46
46
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Item/useThisItemIsFocused.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\nimport { REGIONS_FOCUSES } from '../../constants/index.js';\n\n// Define a generic type for the useThisItemIsFocused hook to ensure type safety\ntype UseThisItemIsFocused = (itemMeta: DSShuttleV2T.ItemMeta) => boolean;\n\nexport const useThisItemIsFocused: UseThisItemIsFocused = (itemMeta) => {\n const { datumInternalMeta, isDestinationPanel } = itemMeta;\n const { hydratedId } = datumInternalMeta;\n\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n const currItemId = hydratedId;\n const thisItemIsFocused = useInternalStore(\n (state) => currRegion === state.focusRegion && currItemId === state.focusItem && 'parent'
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,sBAAiC;AACjC,uBAAgC;AAKzB,MAAM,uBAA6C,CAAC,aAAa;AACtE,QAAM,EAAE,mBAAmB,mBAAmB,IAAI;AAClD,QAAM,EAAE,WAAW,IAAI;AAEvB,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa;AACnB,QAAM,wBAAoB;AAAA,IACxB,CAAC,UAAU,eAAe,MAAM,eAAe,eAAe,MAAM,aAAa,
|
|
4
|
+
"sourcesContent": ["import { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\nimport { REGIONS_FOCUSES } from '../../constants/index.js';\n\n// Define a generic type for the useThisItemIsFocused hook to ensure type safety\ntype UseThisItemIsFocused = (itemMeta: DSShuttleV2T.ItemMeta) => boolean;\n\nexport const useThisItemIsFocused: UseThisItemIsFocused = (itemMeta) => {\n const { datumInternalMeta, isDestinationPanel } = itemMeta;\n const { hydratedId } = datumInternalMeta;\n\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n const currItemId = hydratedId;\n const thisItemIsFocused = useInternalStore(\n (state) => currRegion === state.focusRegion && currItemId === state.focusItem && state.focusItemAction === 'parent',\n );\n\n return thisItemIsFocused;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,sBAAiC;AACjC,uBAAgC;AAKzB,MAAM,uBAA6C,CAAC,aAAa;AACtE,QAAM,EAAE,mBAAmB,mBAAmB,IAAI;AAClD,QAAM,EAAE,WAAW,IAAI;AAEvB,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa;AACnB,QAAM,wBAAoB;AAAA,IACxB,CAAC,UAAU,eAAe,MAAM,eAAe,eAAe,MAAM,aAAa,MAAM,oBAAoB;AAAA,EAC7G;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,15 +33,15 @@ __export(MainContent_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(MainContent_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = __toESM(require("react"));
|
|
37
|
-
var import_ds_hooks_fontsize_detector = require("@elliemae/ds-hooks-fontsize-detector");
|
|
38
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
39
36
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
37
|
+
var import_ds_hooks_fontsize_detector = require("@elliemae/ds-hooks-fontsize-detector");
|
|
40
38
|
var import_ds_hooks_on_blur_out = require("@elliemae/ds-hooks-on-blur-out");
|
|
41
|
-
var
|
|
42
|
-
var
|
|
39
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
+
var import_react = __toESM(require("react"));
|
|
43
41
|
var import_DSShuttleV2Definitions = require("../config/DSShuttleV2Definitions.js");
|
|
44
42
|
var import_useFocusTracker = require("../config/useFocusTracker/index.js");
|
|
43
|
+
var import_useStore = require("../config/useStore/index.js");
|
|
44
|
+
var import_PanelWrapper = require("./PanelWrapper.js");
|
|
45
45
|
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.WRAPPER })``;
|
|
46
46
|
const layoutWithSmallFont = {
|
|
47
47
|
cols: { small: ["auto"], medium: ["1fr", "1fr"] },
|
|
@@ -66,6 +66,8 @@ const useResizeObserver = (ref) => {
|
|
|
66
66
|
resizeObserver.unobserve(observeTarget);
|
|
67
67
|
};
|
|
68
68
|
}
|
|
69
|
+
return () => {
|
|
70
|
+
};
|
|
69
71
|
}, [ref]);
|
|
70
72
|
return dimensions;
|
|
71
73
|
};
|
|
@@ -89,9 +91,8 @@ const MainContent = import_react.default.memo(() => {
|
|
|
89
91
|
const colsAndRowsLayout = (0, import_react.useMemo)(() => {
|
|
90
92
|
if (metaInfo.isLarge) {
|
|
91
93
|
return layoutWithBigFont;
|
|
92
|
-
} else {
|
|
93
|
-
return layoutWithSmallFont;
|
|
94
94
|
}
|
|
95
|
+
return layoutWithSmallFont;
|
|
95
96
|
}, [metaInfo]);
|
|
96
97
|
const [ref, setRef] = import_react.default.useState();
|
|
97
98
|
const parentNode = ref?.parentNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { useFontSizeDetector } from '@elliemae/ds-hooks-fontsize-detector';\nimport { useOnBlurOut } from '@elliemae/ds-hooks-on-blur-out';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useMemo } from 'react';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { PanelWrapper } from './PanelWrapper.js';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })``;\n\nconst layoutWithSmallFont = {\n cols: { small: ['auto'], medium: ['1fr', '1fr'] },\n rows: { small: ['1fr', '1fr'], medium: ['auto'] },\n};\nconst layoutWithBigFont = {\n cols: ['auto'],\n rows: ['1fr', '1fr'],\n};\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n const [dimensions, setDimensions] = React.useState<number>(0);\n\n React.useEffect(() => {\n if (ref) {\n const observeTarget = ref;\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.height));\n });\n });\n resizeObserver.observe(observeTarget);\n\n return () => {\n resizeObserver.unobserve(observeTarget);\n };\n }\n // No cleanup needed if ref is null or undefined\n return () => {};\n }, [ref]);\n\n return dimensions;\n};\n\n// this custom hook will return the font size of the font detector element\n\nexport const MainContent = React.memo(() => {\n const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n const config = React.useMemo(\n () => ({\n onBlur: () => {\n trackFocusRegionReset();\n trackFocusItemReset();\n trackFocusActionReset();\n },\n }),\n [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n );\n const handleOnBlurOut = useOnBlurOut(config);\n const destinationHasMultipleSelectedItems = usePropsStore((store) => store.destinationHasMultipleSelectedItems);\n const sourceHasMultipleSelectedItems = usePropsStore((store) => store.sourceHasMultipleSelectedItems);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const metaInfo = useFontSizeDetector();\n\n const colsAndRowsLayout = useMemo(() => {\n if (metaInfo.isLarge) {\n return layoutWithBigFont;\n }\n return layoutWithSmallFont;\n }, [metaInfo]);\n\n const [ref, setRef] = React.useState<HTMLDivElement | null>();\n const parentNode = ref?.parentNode as HTMLElement | null | undefined;\n const height = useResizeObserver(parentNode);\n const finalHeight = height !== 0 ? height : 208;\n return (\n <StyledWrapper\n gutter=\"xs\"\n onBlur={handleOnBlurOut}\n {...colsAndRowsLayout}\n getOwnerProps={getOwnerProps}\n style={{ height: `${finalHeight}px` }}\n innerRef={setRef}\n >\n <PanelWrapper isDestinationPanel={false} hasMultipleSelection={sourceHasMultipleSelectedItems} />\n <PanelWrapper isDestinationPanel hasMultipleSelection={destinationHasMultipleSelectedItems} />\n </StyledWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgFnB;AAhFJ,qBAAqB;AACrB,wCAAoC;AACpC,kCAA6B;AAC7B,uBAAuB;AACvB,mBAA+B;AAC/B,oCAAkD;AAClD,6BAAgC;AAChC,sBAA8B;AAC9B,0BAA6B;AAE7B,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,QAAQ,CAAC;AAE5F,MAAM,sBAAsB;AAAA,EAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,KAAK,EAAE;AAAA,EAChD,MAAM,EAAE,OAAO,CAAC,OAAO,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE;AAClD;AACA,MAAM,oBAAoB;AAAA,EACxB,MAAM,CAAC,MAAM;AAAA,EACb,MAAM,CAAC,OAAO,KAAK;AACrB;AAIA,MAAM,oBAAoB,CAAC,QAAwC;AACjE,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAiB,CAAC;AAE5D,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,gBAAQ,QAAQ,CAAC,UAAU;AACzB,wBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,QACnD,CAAC;AAAA,MACH,CAAC;AACD,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AAEA,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB,GAAG,CAAC,GAAG,CAAC;AAER,SAAO;AACT;AAIO,MAAM,cAAc,aAAAA,QAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC9F,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB;AACtB,4BAAoB;AACpB,8BAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,qBAAqB,qBAAqB;AAAA,EACpE;AACA,QAAM,sBAAkB,0CAAa,MAAM;AAC3C,QAAM,0CAAsC,+BAAc,CAAC,UAAU,MAAM,mCAAmC;AAC9G,QAAM,qCAAiC,+BAAc,CAAC,UAAU,MAAM,8BAA8B;AACpG,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,eAAW,uDAAoB;AAErC,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,SAAS,SAAS;AACpB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,KAAK,MAAM,IAAI,aAAAA,QAAM,SAAgC;AAC5D,QAAM,aAAa,KAAK;AACxB,QAAM,SAAS,kBAAkB,UAAU;AAC3C,QAAM,cAAc,WAAW,IAAI,SAAS;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,QAAQ;AAAA,MACP,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,WAAW,KAAK;AAAA,MACpC,UAAU;AAAA,MAEV;AAAA,oDAAC,oCAAa,oBAAoB,OAAO,sBAAsB,gCAAgC;AAAA,QAC/F,4CAAC,oCAAa,oBAAkB,MAAC,sBAAsB,qCAAqC;AAAA;AAAA;AAAA,EAC9F;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -49,18 +49,42 @@ const StyledLoadMoreBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSBut
|
|
|
49
49
|
`;
|
|
50
50
|
const LoadMoreBtn = (panelMetaInfo) => {
|
|
51
51
|
const { isDestinationPanel = false } = panelMetaInfo;
|
|
52
|
-
const {
|
|
52
|
+
const {
|
|
53
|
+
getCanFocusLastItem,
|
|
54
|
+
trackFocusItemLast,
|
|
55
|
+
trackFocusActionParent,
|
|
56
|
+
trackFocusRegionPanelItem,
|
|
57
|
+
trackFocusRegionPanel,
|
|
58
|
+
trackFocusItemReset,
|
|
59
|
+
trackFocusActionReset
|
|
60
|
+
} = (0, import_useFocusTracker.useFocusTracker)();
|
|
53
61
|
const onLoadMore = (0, import_useStore.usePropsStore)(
|
|
54
62
|
(state) => isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore
|
|
55
63
|
);
|
|
56
64
|
const handleOnClick = import_react.default.useCallback(
|
|
57
65
|
(e) => {
|
|
58
66
|
onLoadMore(e);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
67
|
+
if (getCanFocusLastItem(panelMetaInfo)) {
|
|
68
|
+
trackFocusItemLast(panelMetaInfo);
|
|
69
|
+
trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);
|
|
70
|
+
trackFocusActionParent();
|
|
71
|
+
} else {
|
|
72
|
+
trackFocusItemReset();
|
|
73
|
+
trackFocusActionReset();
|
|
74
|
+
trackFocusRegionPanel(panelMetaInfo.isDestinationPanel);
|
|
75
|
+
}
|
|
62
76
|
},
|
|
63
|
-
[
|
|
77
|
+
[
|
|
78
|
+
getCanFocusLastItem,
|
|
79
|
+
onLoadMore,
|
|
80
|
+
panelMetaInfo,
|
|
81
|
+
trackFocusActionParent,
|
|
82
|
+
trackFocusActionReset,
|
|
83
|
+
trackFocusItemLast,
|
|
84
|
+
trackFocusItemReset,
|
|
85
|
+
trackFocusRegionPanel,
|
|
86
|
+
trackFocusRegionPanelItem
|
|
87
|
+
]
|
|
64
88
|
);
|
|
65
89
|
const { innerRefHandlerLoadMoreBtn } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(panelMetaInfo);
|
|
66
90
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Panel/bottom/LoadMoreBtn.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n width: 100%;\n height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = panelMetaInfo;\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n width: 100%;\n height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = panelMetaInfo;\n const {\n getCanFocusLastItem,\n trackFocusItemLast,\n trackFocusActionParent,\n trackFocusRegionPanelItem,\n trackFocusRegionPanel,\n trackFocusItemReset,\n trackFocusActionReset,\n } = useFocusTracker();\n const onLoadMore = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n );\n const handleOnClick = React.useCallback(\n (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n onLoadMore(e);\n if (getCanFocusLastItem(panelMetaInfo)) {\n trackFocusItemLast(panelMetaInfo);\n trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n trackFocusActionParent();\n } else {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanel(panelMetaInfo.isDestinationPanel);\n }\n },\n [\n getCanFocusLastItem,\n onLoadMore,\n panelMetaInfo,\n trackFocusActionParent,\n trackFocusActionReset,\n trackFocusItemLast,\n trackFocusItemReset,\n trackFocusRegionPanel,\n trackFocusRegionPanelItem,\n ],\n );\n const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n return (\n <StyledLoadMoreBtn\n buttonType=\"text\"\n onClick={handleOnClick}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerLoadMoreBtn}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n Load More...\n </StyledLoadMoreBtn>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DnB;AA7DJ,mBAAkB;AAClB,uBAAuB;AACvB,0BAAyD;AACzD,sBAA8B;AAE9B,iCAAoC;AACpC,6BAAgC;AAChC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wCAAgB;AACpB,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAA2D;AAC1D,iBAAW,CAAC;AACZ,UAAI,oBAAoB,aAAa,GAAG;AACtC,2BAAmB,aAAa;AAChC,kCAA0B,cAAc,kBAAkB;AAC1D,+BAAuB;AAAA,MACzB,OAAO;AACL,4BAAoB;AACpB,8BAAsB;AACtB,8BAAsB,cAAc,kBAAkB;AAAA,MACxD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,2BAA2B,QAAI,gDAAoB,aAAa;AACxE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,iCAAa;AAAA,MACnB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -79,7 +79,7 @@ const DSShuttleV2PropTypes = {
|
|
|
79
79
|
).isRequired,
|
|
80
80
|
sourceSelectedItems: import_ds_props_helpers.PropTypes.object.description("An object representing the selected items in the source list").isRequired,
|
|
81
81
|
onSourceSelectionChange: import_ds_props_helpers.PropTypes.func.description("A function called when the selection in the source list changes").isRequired,
|
|
82
|
-
SourceHeader: import_ds_props_helpers.PropTypes.
|
|
82
|
+
SourceHeader: import_ds_props_helpers.PropTypes.func.description("The header component for the source list").isRequired,
|
|
83
83
|
sourceHeaderProps: import_ds_props_helpers.PropTypes.object.description("Props to be passed to the source header").defaultValue({}),
|
|
84
84
|
onSourceDrilldown: import_ds_props_helpers.PropTypes.func.description("A function called when an item in the source list is clicked").isRequired,
|
|
85
85
|
destinationData: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description(
|
|
@@ -91,7 +91,7 @@ const DSShuttleV2PropTypes = {
|
|
|
91
91
|
onDestinationSelectionChange: import_ds_props_helpers.PropTypes.func.description(
|
|
92
92
|
"A function called when the selection in the destination list changes"
|
|
93
93
|
).isRequired,
|
|
94
|
-
DestinationHeader: import_ds_props_helpers.PropTypes.
|
|
94
|
+
DestinationHeader: import_ds_props_helpers.PropTypes.func.description("The header component for the destination list").isRequired,
|
|
95
95
|
destinationHeaderProps: import_ds_props_helpers.PropTypes.object.description("Props to be passed to the destination header").defaultValue({}),
|
|
96
96
|
onDestinationDrilldown: import_ds_props_helpers.PropTypes.func.description(
|
|
97
97
|
"A function called when an item in the destination list is clicked"
|