@elliemae/ds-shuttle-v2 3.14.2 → 3.14.3
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/useDataStructure.js +25 -6
- package/dist/cjs/config/useAutoCalculated/useDataStructure.js.map +2 -2
- package/dist/cjs/config/useFocusTracker/useFocusActionTrackers.js +4 -4
- package/dist/cjs/config/useFocusTracker/useFocusActionTrackers.js.map +2 -2
- package/dist/cjs/config/useStore/focusAndTabIndexManager.js.map +1 -1
- package/dist/cjs/config/useStore/useStore.js.map +2 -2
- package/dist/cjs/parts/Item/Item.js +6 -2
- package/dist/cjs/parts/Item/Item.js.map +2 -2
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js +3 -3
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js +3 -4
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +52 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/config/useAutoCalculated/useDataStructure.js +25 -6
- package/dist/esm/config/useAutoCalculated/useDataStructure.js.map +2 -2
- package/dist/esm/config/useFocusTracker/useFocusActionTrackers.js +4 -4
- package/dist/esm/config/useFocusTracker/useFocusActionTrackers.js.map +2 -2
- package/dist/esm/config/useStore/focusAndTabIndexManager.js.map +1 -1
- package/dist/esm/config/useStore/useStore.js.map +2 -2
- package/dist/esm/parts/Item/Item.js +6 -2
- package/dist/esm/parts/Item/Item.js.map +2 -2
- package/dist/esm/parts/Item/ItemActions/ItemActions.js +3 -3
- package/dist/esm/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/esm/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js +3 -4
- package/dist/esm/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +52 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/config/useFocusTracker/useFocusActionTrackers.d.ts +2 -2
- package/dist/types/config/useFocusTracker/useFocusTracker.d.ts +2 -2
- package/dist/types/config/useStore/focusAndTabIndexManager.d.ts +5 -5
- package/dist/types/config/useStore/useStore.d.ts +12 -13
- package/dist/types/parts/Item/ItemActions/useActionsHandlers.d.ts +2 -2
- package/dist/types/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +35 -4
- package/package.json +15 -15
- package/dist/cjs/config/useStore/types.js +0 -24
- package/dist/cjs/config/useStore/types.js.map +0 -7
- package/dist/esm/config/useStore/types.js +0 -2
- package/dist/esm/config/useStore/types.js.map +0 -7
- package/dist/types/config/useStore/types.d.ts +0 -28
|
@@ -33,7 +33,8 @@ const configureDestination = ({
|
|
|
33
33
|
destinationData,
|
|
34
34
|
destinationSelectedItems,
|
|
35
35
|
destinationSoftDeletedItems,
|
|
36
|
-
getId
|
|
36
|
+
getId,
|
|
37
|
+
getPreventMove
|
|
37
38
|
}) => {
|
|
38
39
|
const destinationSelectedItemsMap = {};
|
|
39
40
|
const destinationSelectionArray = [];
|
|
@@ -43,6 +44,7 @@ const configureDestination = ({
|
|
|
43
44
|
const destinationSelectionableData = [];
|
|
44
45
|
destinationData.forEach((datum, i) => {
|
|
45
46
|
const hydratedId = getId(datum);
|
|
47
|
+
const hydratedPreventMove = getPreventMove?.(datum) ?? false;
|
|
46
48
|
let isSelected = false;
|
|
47
49
|
if (destinationSelectedItems[hydratedId] === true) {
|
|
48
50
|
destinationSelectionItemArray.push(datum);
|
|
@@ -56,6 +58,7 @@ const configureDestination = ({
|
|
|
56
58
|
destinationSelectedItemsMap[hydratedId] = { datum, index: i };
|
|
57
59
|
const configuredItem = {
|
|
58
60
|
hydratedId,
|
|
61
|
+
hydratedPreventMove,
|
|
59
62
|
isSelected,
|
|
60
63
|
softDeleted,
|
|
61
64
|
original: datum,
|
|
@@ -64,7 +67,7 @@ const configureDestination = ({
|
|
|
64
67
|
isLast: i === destinationData.length - 1
|
|
65
68
|
};
|
|
66
69
|
destinationConfiguredData.push(configuredItem);
|
|
67
|
-
if (!
|
|
70
|
+
if (!hydratedPreventMove && !softDeleted) {
|
|
68
71
|
destinationSelectionableData.push(configuredItem);
|
|
69
72
|
destinationSelectionableDataIds.push(`${hydratedId}`);
|
|
70
73
|
}
|
|
@@ -82,7 +85,13 @@ const configureDestination = ({
|
|
|
82
85
|
destinationSelectionableIds
|
|
83
86
|
};
|
|
84
87
|
};
|
|
85
|
-
const configureSource = ({
|
|
88
|
+
const configureSource = ({
|
|
89
|
+
sourceData,
|
|
90
|
+
sourceSelectedItems,
|
|
91
|
+
sourceSoftDeletedItems,
|
|
92
|
+
getId,
|
|
93
|
+
getPreventMove
|
|
94
|
+
}) => {
|
|
86
95
|
const sourceSelectedItemsMap = {};
|
|
87
96
|
const sourceSelectionArray = [];
|
|
88
97
|
const sourceSelectionableDataIds = [];
|
|
@@ -91,6 +100,7 @@ const configureSource = ({ sourceData, sourceSelectedItems, sourceSoftDeletedIte
|
|
|
91
100
|
const sourceSelectionableData = [];
|
|
92
101
|
sourceData.forEach((datum, i) => {
|
|
93
102
|
const hydratedId = getId(datum);
|
|
103
|
+
const hydratedPreventMove = getPreventMove?.(datum) ?? false;
|
|
94
104
|
let isSelected = false;
|
|
95
105
|
if (sourceSelectedItems[hydratedId] === true) {
|
|
96
106
|
sourceSelectionItemArray.push(datum);
|
|
@@ -104,6 +114,7 @@ const configureSource = ({ sourceData, sourceSelectedItems, sourceSoftDeletedIte
|
|
|
104
114
|
sourceSelectedItemsMap[hydratedId] = { datum, index: i };
|
|
105
115
|
const configuredItem = {
|
|
106
116
|
hydratedId,
|
|
117
|
+
hydratedPreventMove,
|
|
107
118
|
isSelected,
|
|
108
119
|
softDeleted,
|
|
109
120
|
original: datum,
|
|
@@ -112,7 +123,7 @@ const configureSource = ({ sourceData, sourceSelectedItems, sourceSoftDeletedIte
|
|
|
112
123
|
isLast: i === sourceData.length - 1
|
|
113
124
|
};
|
|
114
125
|
sourceConfiguredData.push(configuredItem);
|
|
115
|
-
if (!
|
|
126
|
+
if (!hydratedPreventMove && !softDeleted) {
|
|
116
127
|
sourceSelectionableData.push(configuredItem);
|
|
117
128
|
sourceSelectionableDataIds.push(`${hydratedId}`);
|
|
118
129
|
}
|
|
@@ -137,19 +148,27 @@ const useDataStructure = (propsFromUser) => {
|
|
|
137
148
|
destinationData,
|
|
138
149
|
destinationSelectedItems,
|
|
139
150
|
getId,
|
|
151
|
+
getPreventMove,
|
|
140
152
|
sourceSoftDeletedItems,
|
|
141
153
|
destinationSoftDeletedItems
|
|
142
154
|
} = propsFromUser;
|
|
143
155
|
return (0, import_react.useMemo)(
|
|
144
156
|
() => ({
|
|
145
|
-
...configureSource({ sourceData, sourceSelectedItems, sourceSoftDeletedItems, getId }),
|
|
146
|
-
...configureDestination({
|
|
157
|
+
...configureSource({ sourceData, sourceSelectedItems, sourceSoftDeletedItems, getId, getPreventMove }),
|
|
158
|
+
...configureDestination({
|
|
159
|
+
destinationData,
|
|
160
|
+
destinationSelectedItems,
|
|
161
|
+
destinationSoftDeletedItems,
|
|
162
|
+
getId,
|
|
163
|
+
getPreventMove
|
|
164
|
+
})
|
|
147
165
|
}),
|
|
148
166
|
[
|
|
149
167
|
sourceData,
|
|
150
168
|
sourceSelectedItems,
|
|
151
169
|
sourceSoftDeletedItems,
|
|
152
170
|
getId,
|
|
171
|
+
getPreventMove,
|
|
153
172
|
destinationData,
|
|
154
173
|
destinationSelectedItems,
|
|
155
174
|
destinationSoftDeletedItems
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useAutoCalculated/useDataStructure.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["// import { useRef } from 'react';\n// import { useVirtual } from 'react-virtual';\nimport { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\ntype ConfigureDestinationConfig = {\n destinationData: DSShuttleV2T.Datum[];\n destinationSelectedItems: DSShuttleV2T.SelectionMap;\n destinationSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n};\nconst configureDestination = ({\n destinationData,\n destinationSelectedItems,\n destinationSoftDeletedItems,\n getId,\n}: ConfigureDestinationConfig) => {\n const destinationSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n const destinationSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n const destinationSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n const destinationSelectionItemArray: DSShuttleV2T.Datum[] = [];\n const destinationConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n const destinationSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n\n destinationData.forEach((datum, i) => {\n const hydratedId = getId(datum);\n let isSelected = false;\n if (destinationSelectedItems[hydratedId] === true) {\n destinationSelectionItemArray.push(datum);\n destinationSelectionArray.push(hydratedId);\n isSelected = true;\n }\n let softDeleted = false;\n if (destinationSoftDeletedItems[hydratedId] === true) {\n softDeleted = true;\n }\n destinationSelectedItemsMap[hydratedId] = { datum, index: i };\n const configuredItem = {\n hydratedId,\n isSelected,\n softDeleted,\n original: datum,\n localIndex: i,\n isFirst: i === 0,\n isLast: i === destinationData.length - 1,\n } as const;\n destinationConfiguredData.push(configuredItem);\n if (!
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwB;
|
|
4
|
+
"sourcesContent": ["// import { useRef } from 'react';\n// import { useVirtual } from 'react-virtual';\nimport { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\ntype ConfigureDestinationConfig = {\n destinationData: DSShuttleV2T.Datum[];\n destinationSelectedItems: DSShuttleV2T.SelectionMap;\n destinationSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n getPreventMove: DSShuttleV2T.FunctionalHydraters['getPreventMove'];\n};\nconst configureDestination = ({\n destinationData,\n destinationSelectedItems,\n destinationSoftDeletedItems,\n getId,\n getPreventMove,\n}: ConfigureDestinationConfig) => {\n const destinationSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n const destinationSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n const destinationSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n const destinationSelectionItemArray: DSShuttleV2T.Datum[] = [];\n const destinationConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n const destinationSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n\n destinationData.forEach((datum, i) => {\n const hydratedId = getId(datum);\n const hydratedPreventMove = getPreventMove?.(datum) ?? false;\n let isSelected = false;\n if (destinationSelectedItems[hydratedId] === true) {\n destinationSelectionItemArray.push(datum);\n destinationSelectionArray.push(hydratedId);\n isSelected = true;\n }\n let softDeleted = false;\n if (destinationSoftDeletedItems[hydratedId] === true) {\n softDeleted = true;\n }\n destinationSelectedItemsMap[hydratedId] = { datum, index: i };\n const configuredItem = {\n hydratedId,\n hydratedPreventMove,\n isSelected,\n softDeleted,\n original: datum,\n localIndex: i,\n isFirst: i === 0,\n isLast: i === destinationData.length - 1,\n } as const;\n destinationConfiguredData.push(configuredItem);\n if (!hydratedPreventMove && !softDeleted) {\n destinationSelectionableData.push(configuredItem);\n destinationSelectionableDataIds.push(`${hydratedId}`);\n }\n });\n const destinationHasMultipleSelectedItems = destinationSelectionArray.length >= 1;\n const destinationSelectionableIds = destinationSelectionableDataIds.join(' ');\n\n return {\n destinationSelectedItemsMap,\n destinationSelectionItemArray,\n destinationSelectionArray,\n destinationHasMultipleSelectedItems,\n destinationConfiguredData,\n destinationSelectionableData,\n destinationSelectionableDataIds,\n destinationSelectionableIds,\n };\n};\ntype ConfigureSourceConfig = {\n sourceData: DSShuttleV2T.Datum[];\n sourceSelectedItems: DSShuttleV2T.SelectionMap;\n sourceSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n getPreventMove: DSShuttleV2T.FunctionalHydraters['getPreventMove'];\n};\n\nconst configureSource = ({\n sourceData,\n sourceSelectedItems,\n sourceSoftDeletedItems,\n getId,\n getPreventMove,\n}: ConfigureSourceConfig) => {\n const sourceSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n const sourceSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n const sourceSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n const sourceSelectionItemArray: DSShuttleV2T.Datum[] = [];\n const sourceConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n const sourceSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n sourceData.forEach((datum, i) => {\n const hydratedId = getId(datum);\n const hydratedPreventMove = getPreventMove?.(datum) ?? false;\n let isSelected = false;\n if (sourceSelectedItems[hydratedId] === true) {\n sourceSelectionItemArray.push(datum);\n sourceSelectionArray.push(hydratedId);\n isSelected = true;\n }\n let softDeleted = false;\n if (sourceSoftDeletedItems[hydratedId] === true) {\n softDeleted = true;\n }\n\n sourceSelectedItemsMap[hydratedId] = { datum, index: i };\n const configuredItem = {\n hydratedId,\n hydratedPreventMove,\n isSelected,\n softDeleted,\n original: datum,\n localIndex: i,\n isFirst: i === 0,\n isLast: i === sourceData.length - 1,\n } as const;\n sourceConfiguredData.push(configuredItem);\n if (!hydratedPreventMove && !softDeleted) {\n sourceSelectionableData.push(configuredItem);\n sourceSelectionableDataIds.push(`${hydratedId}`);\n }\n });\n const sourceHasMultipleSelectedItems = sourceSelectionArray.length >= 1;\n const sourceSelectionableIds = sourceSelectionableDataIds.join(' ');\n return {\n sourceConfiguredData,\n sourceSelectedItemsMap,\n sourceSelectionItemArray,\n sourceSelectionArray,\n sourceHasMultipleSelectedItems,\n sourceSelectionableData,\n sourceSelectionableDataIds,\n sourceSelectionableIds,\n };\n};\n\nexport const useDataStructure = (propsFromUser: DSShuttleV2T.InternalProps) => {\n const {\n sourceData,\n sourceSelectedItems,\n destinationData,\n destinationSelectedItems,\n getId,\n getPreventMove,\n sourceSoftDeletedItems,\n destinationSoftDeletedItems,\n } = propsFromUser;\n return useMemo(\n () => ({\n ...configureSource({ sourceData, sourceSelectedItems, sourceSoftDeletedItems, getId, getPreventMove }),\n ...configureDestination({\n destinationData,\n destinationSelectedItems,\n destinationSoftDeletedItems,\n getId,\n getPreventMove,\n }),\n }),\n [\n sourceData,\n sourceSelectedItems,\n sourceSoftDeletedItems,\n getId,\n getPreventMove,\n destinationData,\n destinationSelectedItems,\n destinationSoftDeletedItems,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -104,8 +104,8 @@ const useFocusActionTrackers = () => {
|
|
|
104
104
|
const removeDragAndDropFromDestination = (0, import_useStore.usePropsStore)((state) => state.removeDragAndDropFromDestination);
|
|
105
105
|
const addDragAndDropFromSource = (0, import_useStore.usePropsStore)((state) => state.addDragAndDropFromSource);
|
|
106
106
|
const trackFocusPrevAction = (0, import_react.useCallback)(
|
|
107
|
-
({ isDestinationPanel, datumHydratables }) => {
|
|
108
|
-
const preventMove = Boolean(
|
|
107
|
+
({ isDestinationPanel, datumHydratables, datumInternalMeta: { hydratedPreventMove } }) => {
|
|
108
|
+
const preventMove = Boolean(hydratedPreventMove);
|
|
109
109
|
const preventDrilldown = Boolean(datumHydratables.preventDrilldown);
|
|
110
110
|
const withDragAndDrop = isDestinationPanel && !removeDragAndDropFromDestination || !isDestinationPanel && addDragAndDropFromSource;
|
|
111
111
|
const { prevAction } = getActionByProxymity({
|
|
@@ -117,8 +117,8 @@ const useFocusActionTrackers = () => {
|
|
|
117
117
|
[addDragAndDropFromSource, getFocusItemAction, removeDragAndDropFromDestination, setFocusItemAction]
|
|
118
118
|
);
|
|
119
119
|
const trackFocusNextAction = (0, import_react.useCallback)(
|
|
120
|
-
({ isDestinationPanel, datumHydratables }) => {
|
|
121
|
-
const preventMove = Boolean(
|
|
120
|
+
({ isDestinationPanel, datumHydratables, datumInternalMeta: { hydratedPreventMove } }) => {
|
|
121
|
+
const preventMove = Boolean(hydratedPreventMove);
|
|
122
122
|
const preventDrilldown = Boolean(datumHydratables.preventDrilldown);
|
|
123
123
|
const withDragAndDrop = isDestinationPanel && !removeDragAndDropFromDestination || !isDestinationPanel && addDragAndDropFromSource;
|
|
124
124
|
const { nextAction } = getActionByProxymity({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useFocusTracker/useFocusActionTrackers.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useMemo, useCallback } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ACTIONS_FOCUSES } from '../../constants';\nimport { useInternalStore, usePropsStore } from '../useStore';\n\ntype ActionFlags = {\n preventDrilldown: boolean;\n withDragAndDrop: boolean;\n preventMove: boolean;\n};\ntype ActionByProxymity = {\n prevAction: (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n nextAction: (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n};\nconst getMoveBtnActionByProxymity = (flags: ActionFlags) => {\n // move button\n const { preventDrilldown, withDragAndDrop } = flags;\n const actionMap = { prevAction: '', nextAction: '' } as ActionByProxymity;\n // prev\n // drilldown if it exist\n // else drag n drop if it exist\n // else parent\n if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n else if (withDragAndDrop) actionMap.prevAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n // next\n // drag n drop if it exist\n // else parent\n if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n return actionMap;\n};\nconst getDragAndDropBtnActionByProxymity = (flags: ActionFlags) => {\n // Drag and drop handler\n const { preventMove, preventDrilldown } = flags;\n // next\n // always parent\n const actionMap = { prevAction: '', nextAction: ACTIONS_FOCUSES.PARENT } as ActionByProxymity;\n // prev\n // move if it exist\n // else drilldown if it exist\n // else parent\n if (!preventMove) actionMap.prevAction = ACTIONS_FOCUSES.MOVE_BTN;\n else if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n return actionMap;\n};\nconst getDrilldownBtnActionByProxymity = (flags: ActionFlags) => {\n // Drilldown handler\n const { withDragAndDrop, preventMove } = flags;\n // prev\n // always parent\n const actionMap = { prevAction: ACTIONS_FOCUSES.PARENT, nextAction: '' } as ActionByProxymity;\n // next\n // move if it exist\n // else drag n drop if it exist\n // else parent\n if (!preventMove) actionMap.nextAction = ACTIONS_FOCUSES.MOVE_BTN;\n else if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n return actionMap;\n};\nconst getParenBtnActionByProxymity = (flags: ActionFlags) => {\n // Parent handler\n const { preventDrilldown, withDragAndDrop, preventMove } = flags;\n const actionMap = { prevAction: '', nextAction: '' } as ActionByProxymity;\n // prev\n // drag n drop if it exist\n // else move if it exist\n // else drilldown if it exist\n // else parent\n if (withDragAndDrop) actionMap.prevAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else if (!preventMove) actionMap.prevAction = ACTIONS_FOCUSES.MOVE_BTN;\n else if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n // next\n // drilldown if it exist\n // else move if it exist\n // else drag n drop if it exist\n // else parent\n if (!preventDrilldown) actionMap.nextAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n else if (!preventMove) actionMap.nextAction = ACTIONS_FOCUSES.MOVE_BTN;\n else if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n return actionMap;\n};\nconst getActionByProxymity = ({ flags, currentAction }: { flags: ActionFlags; currentAction: string }) => {\n if (currentAction === ACTIONS_FOCUSES.MOVE_BTN) return getMoveBtnActionByProxymity(flags);\n if (currentAction === ACTIONS_FOCUSES.DRAG_N_DROP) return getDragAndDropBtnActionByProxymity(flags);\n if (currentAction === ACTIONS_FOCUSES.DRILLDOWN_BTN) return getDrilldownBtnActionByProxymity(flags);\n return getParenBtnActionByProxymity(flags);\n};\nexport const useFocusActionTrackers = () => {\n const getFocusItemAction = useInternalStore((state) => state.getFocusItemAction);\n const setFocusItemAction = useInternalStore((state) => state.setFocusItemAction);\n const removeDragAndDropFromDestination = usePropsStore((state) => state.removeDragAndDropFromDestination);\n const addDragAndDropFromSource = usePropsStore((state) => state.addDragAndDropFromSource);\n const trackFocusPrevAction = useCallback(\n ({ isDestinationPanel, datumHydratables }: DSShuttleV2T.ItemMeta) => {\n const preventMove = Boolean(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqC;AAErC,uBAAgC;AAChC,sBAAgD;AAWhD,MAAM,8BAA8B,CAAC,UAAuB;AAE1D,QAAM,EAAE,kBAAkB,gBAAgB,IAAI;AAC9C,QAAM,YAAY,EAAE,YAAY,IAAI,YAAY,GAAG;AAKnD,MAAI,CAAC;AAAkB,cAAU,aAAa,iCAAgB;AAAA,WACrD;AAAiB,cAAU,aAAa,iCAAgB;AAAA;AAC5D,cAAU,aAAa,iCAAgB;AAI5C,MAAI;AAAiB,cAAU,aAAa,iCAAgB;AAAA;AACvD,cAAU,aAAa,iCAAgB;AAC5C,SAAO;AACT;AACA,MAAM,qCAAqC,CAAC,UAAuB;AAEjE,QAAM,EAAE,aAAa,iBAAiB,IAAI;AAG1C,QAAM,YAAY,EAAE,YAAY,IAAI,YAAY,iCAAgB,OAAO;AAKvE,MAAI,CAAC;AAAa,cAAU,aAAa,iCAAgB;AAAA,WAChD,CAAC;AAAkB,cAAU,aAAa,iCAAgB;AAAA;AAC9D,cAAU,aAAa,iCAAgB;AAC5C,SAAO;AACT;AACA,MAAM,mCAAmC,CAAC,UAAuB;AAE/D,QAAM,EAAE,iBAAiB,YAAY,IAAI;AAGzC,QAAM,YAAY,EAAE,YAAY,iCAAgB,QAAQ,YAAY,GAAG;AAKvE,MAAI,CAAC;AAAa,cAAU,aAAa,iCAAgB;AAAA,WAChD;AAAiB,cAAU,aAAa,iCAAgB;AAAA;AAC5D,cAAU,aAAa,iCAAgB;AAC5C,SAAO;AACT;AACA,MAAM,+BAA+B,CAAC,UAAuB;AAE3D,QAAM,EAAE,kBAAkB,iBAAiB,YAAY,IAAI;AAC3D,QAAM,YAAY,EAAE,YAAY,IAAI,YAAY,GAAG;AAMnD,MAAI;AAAiB,cAAU,aAAa,iCAAgB;AAAA,WACnD,CAAC;AAAa,cAAU,aAAa,iCAAgB;AAAA,WACrD,CAAC;AAAkB,cAAU,aAAa,iCAAgB;AAAA;AAC9D,cAAU,aAAa,iCAAgB;AAM5C,MAAI,CAAC;AAAkB,cAAU,aAAa,iCAAgB;AAAA,WACrD,CAAC;AAAa,cAAU,aAAa,iCAAgB;AAAA,WACrD;AAAiB,cAAU,aAAa,iCAAgB;AAAA;AAC5D,cAAU,aAAa,iCAAgB;AAC5C,SAAO;AACT;AACA,MAAM,uBAAuB,CAAC,EAAE,OAAO,cAAc,MAAqD;AACxG,MAAI,kBAAkB,iCAAgB;AAAU,WAAO,4BAA4B,KAAK;AACxF,MAAI,kBAAkB,iCAAgB;AAAa,WAAO,mCAAmC,KAAK;AAClG,MAAI,kBAAkB,iCAAgB;AAAe,WAAO,iCAAiC,KAAK;AAClG,SAAO,6BAA6B,KAAK;AAC3C;AACO,MAAM,yBAAyB,MAAM;AAC1C,QAAM,yBAAqB,kCAAiB,CAAC,UAAU,MAAM,kBAAkB;AAC/E,QAAM,yBAAqB,kCAAiB,CAAC,UAAU,MAAM,kBAAkB;AAC/E,QAAM,uCAAmC,+BAAc,CAAC,UAAU,MAAM,gCAAgC;AACxG,QAAM,+BAA2B,+BAAc,CAAC,UAAU,MAAM,wBAAwB;AACxF,QAAM,2BAAuB;AAAA,IAC3B,CAAC,EAAE,oBAAoB,
|
|
4
|
+
"sourcesContent": ["import { useMemo, useCallback } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ACTIONS_FOCUSES } from '../../constants';\nimport { useInternalStore, usePropsStore } from '../useStore';\n\ntype ActionFlags = {\n preventDrilldown: boolean;\n withDragAndDrop: boolean;\n preventMove: boolean;\n};\ntype ActionByProxymity = {\n prevAction: (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n nextAction: (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n};\nconst getMoveBtnActionByProxymity = (flags: ActionFlags) => {\n // move button\n const { preventDrilldown, withDragAndDrop } = flags;\n const actionMap = { prevAction: '', nextAction: '' } as ActionByProxymity;\n // prev\n // drilldown if it exist\n // else drag n drop if it exist\n // else parent\n if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n else if (withDragAndDrop) actionMap.prevAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n // next\n // drag n drop if it exist\n // else parent\n if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n return actionMap;\n};\nconst getDragAndDropBtnActionByProxymity = (flags: ActionFlags) => {\n // Drag and drop handler\n const { preventMove, preventDrilldown } = flags;\n // next\n // always parent\n const actionMap = { prevAction: '', nextAction: ACTIONS_FOCUSES.PARENT } as ActionByProxymity;\n // prev\n // move if it exist\n // else drilldown if it exist\n // else parent\n if (!preventMove) actionMap.prevAction = ACTIONS_FOCUSES.MOVE_BTN;\n else if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n return actionMap;\n};\nconst getDrilldownBtnActionByProxymity = (flags: ActionFlags) => {\n // Drilldown handler\n const { withDragAndDrop, preventMove } = flags;\n // prev\n // always parent\n const actionMap = { prevAction: ACTIONS_FOCUSES.PARENT, nextAction: '' } as ActionByProxymity;\n // next\n // move if it exist\n // else drag n drop if it exist\n // else parent\n if (!preventMove) actionMap.nextAction = ACTIONS_FOCUSES.MOVE_BTN;\n else if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n return actionMap;\n};\nconst getParenBtnActionByProxymity = (flags: ActionFlags) => {\n // Parent handler\n const { preventDrilldown, withDragAndDrop, preventMove } = flags;\n const actionMap = { prevAction: '', nextAction: '' } as ActionByProxymity;\n // prev\n // drag n drop if it exist\n // else move if it exist\n // else drilldown if it exist\n // else parent\n if (withDragAndDrop) actionMap.prevAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else if (!preventMove) actionMap.prevAction = ACTIONS_FOCUSES.MOVE_BTN;\n else if (!preventDrilldown) actionMap.prevAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n else actionMap.prevAction = ACTIONS_FOCUSES.PARENT;\n // next\n // drilldown if it exist\n // else move if it exist\n // else drag n drop if it exist\n // else parent\n if (!preventDrilldown) actionMap.nextAction = ACTIONS_FOCUSES.DRILLDOWN_BTN;\n else if (!preventMove) actionMap.nextAction = ACTIONS_FOCUSES.MOVE_BTN;\n else if (withDragAndDrop) actionMap.nextAction = ACTIONS_FOCUSES.DRAG_N_DROP;\n else actionMap.nextAction = ACTIONS_FOCUSES.PARENT;\n return actionMap;\n};\nconst getActionByProxymity = ({ flags, currentAction }: { flags: ActionFlags; currentAction: string }) => {\n if (currentAction === ACTIONS_FOCUSES.MOVE_BTN) return getMoveBtnActionByProxymity(flags);\n if (currentAction === ACTIONS_FOCUSES.DRAG_N_DROP) return getDragAndDropBtnActionByProxymity(flags);\n if (currentAction === ACTIONS_FOCUSES.DRILLDOWN_BTN) return getDrilldownBtnActionByProxymity(flags);\n return getParenBtnActionByProxymity(flags);\n};\nexport const useFocusActionTrackers = () => {\n const getFocusItemAction = useInternalStore((state) => state.getFocusItemAction);\n const setFocusItemAction = useInternalStore((state) => state.setFocusItemAction);\n const removeDragAndDropFromDestination = usePropsStore((state) => state.removeDragAndDropFromDestination);\n const addDragAndDropFromSource = usePropsStore((state) => state.addDragAndDropFromSource);\n const trackFocusPrevAction = useCallback(\n ({ isDestinationPanel, datumHydratables, datumInternalMeta: { hydratedPreventMove } }: DSShuttleV2T.ItemMeta) => {\n const preventMove = Boolean(hydratedPreventMove);\n const preventDrilldown = Boolean(datumHydratables.preventDrilldown);\n const withDragAndDrop =\n (isDestinationPanel && !removeDragAndDropFromDestination) || (!isDestinationPanel && addDragAndDropFromSource);\n const { prevAction } = getActionByProxymity({\n flags: { preventMove, preventDrilldown, withDragAndDrop },\n currentAction: getFocusItemAction(),\n });\n setFocusItemAction(prevAction);\n },\n [addDragAndDropFromSource, getFocusItemAction, removeDragAndDropFromDestination, setFocusItemAction],\n );\n const trackFocusNextAction = useCallback(\n ({ isDestinationPanel, datumHydratables, datumInternalMeta: { hydratedPreventMove } }: DSShuttleV2T.ItemMeta) => {\n const preventMove = Boolean(hydratedPreventMove);\n const preventDrilldown = Boolean(datumHydratables.preventDrilldown);\n const withDragAndDrop =\n (isDestinationPanel && !removeDragAndDropFromDestination) || (!isDestinationPanel && addDragAndDropFromSource);\n const { nextAction } = getActionByProxymity({\n flags: { preventMove, preventDrilldown, withDragAndDrop },\n currentAction: getFocusItemAction(),\n });\n setFocusItemAction(nextAction);\n },\n [addDragAndDropFromSource, getFocusItemAction, removeDragAndDropFromDestination, setFocusItemAction],\n );\n return useMemo(\n () => ({\n trackFocusActionMove: () => setFocusItemAction('move-btn'),\n trackFocusActionDrilldown: () => setFocusItemAction('drilldown-btn'),\n trackFocusActionDragAndDrop: () => setFocusItemAction('drag-n-drop'),\n trackFocusActionParent: () => setFocusItemAction('parent'),\n trackFocusActionReset: () => setFocusItemAction(''),\n trackFocusPrevAction,\n trackFocusNextAction,\n }),\n [setFocusItemAction, trackFocusNextAction, trackFocusPrevAction],\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';\nimport
|
|
4
|
+
"sourcesContent": ["import { ITEMS_FOCUSES, REGIONS_FOCUSES } from '../../constants';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\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 { setShouldFocusItemOnRender } = 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 setShouldFocusItemOnRender(true); // we will reset this flag inside the ref callback of the item\n } else {\n setShouldFocusItemOnRender(false);\n }\n\n nextFocusedItem?.focus();\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA+C;AAW/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,OAAO,YACb,MAAM,OAAO,+BAAc,wBAC3B,MAAM,OAAO,+BAAc;AAE7B,MAAM,SAAS,CAAC,UAAiB,MAAM,OAAO;AAE9C,MAAM,cAAc,CAAC,UAAiB,MAAM,OAAO;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;AAC1B,QAAM,EAAE,2BAA2B,IAAI,IAAI;AAE3C,kBAAgB,EAAE,eAAe,uBAAuB,oBAAoB,gBAAgB,CAAC;AAE7F,MAAI,OAAO,aAAa,GAAG;AAGzB,+BAA2B,IAAI;AAAA,EACjC,OAAO;AACL,+BAA2B,KAAK;AAAA,EAClC;AAEA,mBAAiB,MAAM;AACzB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useStore/useStore.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport deepequal from 'fast-deep-equal/react';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants';\nimport { useAutoCalculated } from '../useAutoCalculated';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA6D;AAC7D,mBAAsB;AACtB,mCAAgD;AAChD,uBAAgE;AAChE,+BAAkC;
|
|
4
|
+
"sourcesContent": ["import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport deepequal from 'fast-deep-equal/react';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants';\nimport { useAutoCalculated } from '../useAutoCalculated';\nimport { focusAndTabIndexManager } from './focusAndTabIndexManager';\n\nconst internalAtomDefaultValues: DSShuttleV2T.InternalAtoms = {\n focusRegion: REGIONS_FOCUSES.RESET,\n focusItem: ITEMS_FOCUSES.RESET,\n focusItemAction: ACTIONS_FOCUSES.RESET,\n shouldFocusItemOnRender: false,\n dropIndicatorPosition: 0,\n overId: '',\n lastActiveId: '',\n dndDraggingItem: null,\n dndDraggingItemMeta: null,\n isDropValid: false,\n sourcePanelLastSelectedItem: null,\n destinationPanelLastSelectedItem: null,\n};\n\nconst selectors: ZustandT.SelectorObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Selectors> = (get) => ({\n getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n getPanelLastSelectedItem: (isDestinationPanel: boolean) =>\n isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem,\n});\n\nconst reducers: ZustandT.ReducerObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Reducers> = () => ({});\n\nconst subscribers: ZustandT.Subscribers<DSShuttleV2T.ShuttleInternalStore> = (api) => {\n api.subscribe(\n (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get] as const,\n focusAndTabIndexManager,\n {\n equalityFn: deepequal,\n },\n );\n};\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n DSShuttleV2T.InternalProps,\n DSShuttleV2T.InternalAtoms,\n DSShuttleV2T.UseAutoCalculatedT,\n DSShuttleV2T.Selectors,\n DSShuttleV2T.Reducers\n>();\n\nexport const config = {\n defaultProps: defaultProps as DSShuttleV2T.InternalProps,\n internalAtomDefaultValues: internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA6D;AAC7D,mBAAsB;AACtB,mCAAgD;AAChD,uBAAgE;AAChE,+BAAkC;AAClC,qCAAwC;AAExC,MAAM,4BAAwD;AAAA,EAC5D,aAAa,iCAAgB;AAAA,EAC7B,WAAW,+BAAc;AAAA,EACzB,iBAAiB,iCAAgB;AAAA,EACjC,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,6BAA6B;AAAA,EAC7B,kCAAkC;AACpC;AAEA,MAAM,YAAgG,CAAC,SAAS;AAAA,EAC9G,2BAA2B,MAAM,QAAQ,IAAI,GAAG,YAAY,KAAK,IAAI,GAAG,iBAAiB;AAAA,EACzF,0BAA0B,CAAC,uBACzB,qBAAqB,IAAI,GAAG,mCAAmC,IAAI,GAAG;AAC1E;AAEA,MAAM,WAA6F,OAAO,CAAC;AAE3G,MAAM,cAAuE,CAAC,QAAQ;AACpF,MAAI;AAAA,IACF,CAAC,UAAU,CAAC,MAAM,aAAa,MAAM,WAAW,MAAM,iBAAiB,MAAM,GAAG;AAAA,IAChF;AAAA,IACA;AAAA,MACE,YAAY,aAAAA;AAAA,IACd;AAAA,EACF;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,QAAI,yDAMlF;AAEK,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
|
|
6
6
|
"names": ["deepequal"]
|
|
7
7
|
}
|
|
@@ -124,9 +124,13 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
124
124
|
const isDraggingThisItem = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItem?.hydratedId === hydratedId);
|
|
125
125
|
import_react.default.useEffect(() => {
|
|
126
126
|
if (isDraggingThisItem) {
|
|
127
|
-
setDndDraggingItemMeta(
|
|
127
|
+
setDndDraggingItemMeta((prevItemMeta) => {
|
|
128
|
+
if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId)
|
|
129
|
+
return prevItemMeta;
|
|
130
|
+
return itemMeta;
|
|
131
|
+
});
|
|
128
132
|
}
|
|
129
|
-
}, [isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);
|
|
133
|
+
}, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);
|
|
130
134
|
const { selectItem, onShiftMouseDownPreventTextSelection } = (0, import_useSelectionLogic.useSelectionLogic)(itemMeta);
|
|
131
135
|
const { onItemContainerKeyDown } = (0, import_useItemArrowNavigation.useItemArrowNavigation)(itemMeta);
|
|
132
136
|
const { onItemKeyDownSelection } = (0, import_useItemKeyboardSelection.useItemKeyboardSelection)(itemMeta);
|
|
@@ -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-statements */\nimport React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\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\ninterface ItemWrapperT {\n isDragging: boolean;\n isDndActive: 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 &:focus {\n outline: 2px solid brand-700;\n outline-offset: -2px;\n }\n border-bottom: 1px solid neutral-100;\n\n ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n const { hydratedId } = datumInternalMeta;\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const getShouldFocusItemOnRender = useInternalStore((state) => state.getShouldFocusItemOnRender);\n const setShouldFocusItemOnRender = useInternalStore((state) => state.setShouldFocusItemOnRender);\n const getFocusRegion = useInternalStore((state) => state.getFocusRegion);\n const getFocusItem = useInternalStore((state) => state.getFocusItem);\n const getFocusItemAction = useInternalStore((state) => state.getFocusItemAction);\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\n // This is the only place we should do this check + focus\n // See focusAndTabIndexManager for more info -- TLDR: virtualization + focus is a pain\n const shouldThisItemHaveFocus =\n currRegion === getFocusRegion() && currItemId === getFocusItem() && 'parent' === getFocusItemAction();\n\n if (getShouldFocusItemOnRender() && shouldThisItemHaveFocus && node) {\n node?.focus();\n setShouldFocusItemOnRender(false);\n }\n },\n [\n currItemId,\n currRegion,\n getFocusItem,\n getFocusItemAction,\n getFocusRegion,\n getShouldFocusItemOnRender,\n setShouldFocusItemOnRender,\n setZustandRef,\n ],\n );\n return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n const { isSelected, hydratedId } = 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 React.useEffect(() => {\n if (isDraggingThisItem) {\n setDndDraggingItemMeta(itemMeta);\n }\n }, [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 } = 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 return (\n <ItemWrapper\n isDragging={isDraggingThisItem}\n isDndActive={getIsDragAndDropHappening()}\n cols={cols}\n alignItems=\"center\"\n onClick={selectItem}\n ref={mergeRefs(innerRefHandlerParentItem, sortableRef)}\n onKeyDown={handleItemKeyDown}\n onMouseDown={onShiftMouseDownPreventTextSelection}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n role=\"option\"\n aria-checked={isSelected}\n id={`${hydratedId}-wrapper`}\n >\n <ItemSelection {...itemMeta} />\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} />\n <ItemActions {...itemMeta} />\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\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\ninterface ItemWrapperT {\n isDragging: boolean;\n isDndActive: 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 &:focus {\n outline: 2px solid brand-700;\n outline-offset: -2px;\n }\n border-bottom: 1px solid neutral-100;\n\n ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n const { hydratedId } = datumInternalMeta;\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const getShouldFocusItemOnRender = useInternalStore((state) => state.getShouldFocusItemOnRender);\n const setShouldFocusItemOnRender = useInternalStore((state) => state.setShouldFocusItemOnRender);\n const getFocusRegion = useInternalStore((state) => state.getFocusRegion);\n const getFocusItem = useInternalStore((state) => state.getFocusItem);\n const getFocusItemAction = useInternalStore((state) => state.getFocusItemAction);\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\n // This is the only place we should do this check + focus\n // See focusAndTabIndexManager for more info -- TLDR: virtualization + focus is a pain\n const shouldThisItemHaveFocus =\n currRegion === getFocusRegion() && currItemId === getFocusItem() && 'parent' === getFocusItemAction();\n\n if (getShouldFocusItemOnRender() && shouldThisItemHaveFocus && node) {\n node?.focus();\n setShouldFocusItemOnRender(false);\n }\n },\n [\n currItemId,\n currRegion,\n getFocusItem,\n getFocusItemAction,\n getFocusRegion,\n getShouldFocusItemOnRender,\n setShouldFocusItemOnRender,\n setZustandRef,\n ],\n );\n return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n const { isSelected, hydratedId } = 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 } = 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 return (\n <ItemWrapper\n isDragging={isDraggingThisItem}\n isDndActive={getIsDragAndDropHappening()}\n cols={cols}\n alignItems=\"center\"\n onClick={selectItem}\n ref={mergeRefs(innerRefHandlerParentItem, sortableRef)}\n onKeyDown={handleItemKeyDown}\n onMouseDown={onShiftMouseDownPreventTextSelection}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n role=\"option\"\n aria-checked={isSelected}\n id={`${hydratedId}-wrapper`}\n >\n <ItemSelection {...itemMeta} />\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} />\n <ItemActions {...itemMeta} />\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
|
}
|
|
@@ -66,10 +66,10 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
66
66
|
datumHydratables,
|
|
67
67
|
isDestinationPanel,
|
|
68
68
|
datumRenderFlags,
|
|
69
|
-
|
|
69
|
+
datumInternalMeta: { hydratedPreventMove }
|
|
70
70
|
} = itemMeta;
|
|
71
71
|
const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
|
|
72
|
-
const { preventDrilldown,
|
|
72
|
+
const { preventDrilldown, label } = datumHydratables;
|
|
73
73
|
const { innerRefHandlerDrilldown, innerRefHandlerMove } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(itemMeta);
|
|
74
74
|
const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = (0, import_useActionsHandlers.useActionsHandlers)(itemMeta);
|
|
75
75
|
const drillDownAriaLabel = (0, import_react.useMemo)(() => `Drilldown into ${label} option`, [label]);
|
|
@@ -102,7 +102,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
102
102
|
size: import_ds_button_v2.BUTTON_SIZES.S,
|
|
103
103
|
innerRef: innerRefHandlerMove,
|
|
104
104
|
tabIndex: -1,
|
|
105
|
-
disabled: internallyDisabledMove ||
|
|
105
|
+
disabled: internallyDisabledMove || hydratedPreventMove === true,
|
|
106
106
|
children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, { width: "1.538rem", height: "1.538rem" })
|
|
107
107
|
}
|
|
108
108
|
) })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Item/ItemActions/ItemActions.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n height: 1.692rem !important;\n svg {\n fill: brand-600;\n }\n :disabled svg {\n fill: neutral-200 !important;\n }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const {\n datumHydratables,\n isDestinationPanel,\n datumRenderFlags,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDf;AAzDR,mBAA+B;AAC/B,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAC7G,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAClH,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n height: 1.692rem !important;\n svg {\n fill: brand-600;\n }\n :disabled svg {\n fill: neutral-200 !important;\n }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const {\n datumHydratables,\n isDestinationPanel,\n datumRenderFlags,\n datumInternalMeta: { hydratedPreventMove },\n } = itemMeta;\n // withActions is calculated in /src/config/configureAutoCalculated.ts\n const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n const { preventDrilldown, label } = datumHydratables;\n const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n const moveAriaLabel = useMemo(\n () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n [label, isDestinationPanel],\n );\n\n return (\n <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n {withActions ? (\n <>\n <StyledItemActionWrapper>\n <StyledButton\n buttonType=\"icon\"\n aria-label={drillDownAriaLabel}\n onClick={handleClickDrilldown}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerDrilldown}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledDrilldown || preventDrilldown === true}\n >\n <StyledDrilldownIcon width=\"1.538rem\" height=\"1.538rem\" />\n </StyledButton>\n </StyledItemActionWrapper>\n <StyledItemActionWrapper>\n <StyledButton\n buttonType=\"icon\"\n aria-label={moveAriaLabel}\n onClick={handleClickSingleMove}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerMove}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledMove || hydratedPreventMove === true}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n ) : (\n <StyledArrowShortRightIcon width=\"1.538rem\" height=\"1.538rem\" />\n )}\n </StyledButton>\n </StyledItemActionWrapper>\n </>\n ) : (\n // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n <>\n <div />\n <div />\n </>\n )}\n </StyledItemActions>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDf;AAzDR,mBAA+B;AAC/B,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAC7G,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAClH,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,oBAAoB;AAAA,EAC3C,IAAI;AAEJ,QAAM,EAAE,aAAa,6BAA6B,uBAAuB,IAAI;AAC7E,QAAM,EAAE,kBAAkB,MAAM,IAAI;AACpC,QAAM,EAAE,0BAA0B,oBAAoB,QAAI,gDAAoB,QAAQ;AACtF,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,QAAI,8CAAmB,QAAQ;AACnH,QAAM,yBAAqB,sBAAQ,MAAM,kBAAkB,gBAAgB,CAAC,KAAK,CAAC;AAClF,QAAM,oBAAgB;AAAA,IACpB,MAAM,eAAe,cAAc,qBAAqB,WAAW;AAAA,IACnE,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,SACE,4CAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,4EACE;AAAA,gDAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,sDAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,4CAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,0BAA0B,wBAAwB;AAAA,QAE3D,+BACC,4CAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,4CAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF,IAGA,4EACE;AAAA,gDAAC,SAAI;AAAA,IACL,4CAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -36,21 +36,20 @@ const useGetDatumHydratables = (panelMetaInfo) => {
|
|
|
36
36
|
const getIcon = (0, import_useStore.usePropsStore)((state) => state.getIcon);
|
|
37
37
|
const getCustomRenderer = (0, import_useStore.usePropsStore)((state) => state.getCustomRenderer);
|
|
38
38
|
const getPreventDrilldown = (0, import_useStore.usePropsStore)((state) => state.getPreventDrilldown);
|
|
39
|
-
const getPreventMove = (0, import_useStore.usePropsStore)((state) => state.getPreventMove);
|
|
40
39
|
const getDatumHydratables = import_react.default.useCallback(
|
|
41
40
|
(item) => {
|
|
42
41
|
const { original, ...datumMeta } = item;
|
|
43
42
|
return {
|
|
44
43
|
id: datumMeta.hydratedId,
|
|
44
|
+
preventMove: datumMeta.hydratedPreventMove,
|
|
45
45
|
label: getLabel(original, { datumMeta, panelMetaInfo }),
|
|
46
46
|
...getSubtitle !== void 0 ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {},
|
|
47
47
|
...getIcon !== void 0 ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {},
|
|
48
48
|
...getCustomRenderer !== void 0 ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) } : {},
|
|
49
|
-
...getPreventDrilldown !== void 0 ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) } : {}
|
|
50
|
-
...getPreventMove !== void 0 ? { preventMove: getPreventMove(original, { datumMeta, panelMetaInfo }) } : {}
|
|
49
|
+
...getPreventDrilldown !== void 0 ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) } : {}
|
|
51
50
|
};
|
|
52
51
|
},
|
|
53
|
-
[getCustomRenderer, getIcon, getLabel, getPreventDrilldown,
|
|
52
|
+
[getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getSubtitle, panelMetaInfo]
|
|
54
53
|
);
|
|
55
54
|
return getDatumHydratables;
|
|
56
55
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Panel/middle/ItemListWrapper/useGetDatumHydratables.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { usePropsStore } from '../../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types';\n\nexport const useGetDatumHydratables = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getLabel = usePropsStore((state) => state.getLabel);\n const getSubtitle = usePropsStore((state) => state.getSubtitle);\n const getIcon = usePropsStore((state) => state.getIcon);\n const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);\n const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAA8B;AAGvB,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,eAAW,+BAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,kBAAc,+BAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,cAAU,+BAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,wBAAoB,+BAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,0BAAsB,+BAAc,CAAC,UAAU,MAAM,mBAAmB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { usePropsStore } from '../../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types';\n\nexport const useGetDatumHydratables = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getLabel = usePropsStore((state) => state.getLabel);\n const getSubtitle = usePropsStore((state) => state.getSubtitle);\n const getIcon = usePropsStore((state) => state.getIcon);\n const getCustomRenderer = usePropsStore((state) => state.getCustomRenderer);\n const getPreventDrilldown = usePropsStore((state) => state.getPreventDrilldown);\n\n const getDatumHydratables = React.useCallback(\n (item: DSShuttleV2T.ConfiguredDatum) => {\n const { original, ...datumMeta } = item;\n\n return {\n id: datumMeta.hydratedId,\n preventMove: datumMeta.hydratedPreventMove,\n label: getLabel(original, { datumMeta, panelMetaInfo }),\n ...(getSubtitle !== undefined ? { subtitle: getSubtitle(original, { datumMeta, panelMetaInfo }) } : {}),\n ...(getIcon !== undefined ? { Icon: getIcon(original, { datumMeta, panelMetaInfo }) } : {}),\n ...(getCustomRenderer !== undefined\n ? { CustomRenderer: getCustomRenderer(original, { datumMeta, panelMetaInfo }) }\n : {}),\n ...(getPreventDrilldown !== undefined\n ? { preventDrilldown: getPreventDrilldown(original, { datumMeta, panelMetaInfo }) }\n : {}),\n };\n },\n [getCustomRenderer, getIcon, getLabel, getPreventDrilldown, getSubtitle, panelMetaInfo],\n );\n return getDatumHydratables;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAA8B;AAGvB,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,eAAW,+BAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,kBAAc,+BAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,cAAU,+BAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,wBAAoB,+BAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,0BAAsB,+BAAc,CAAC,UAAU,MAAM,mBAAmB;AAE9E,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAuC;AACtC,YAAM,EAAE,aAAa,UAAU,IAAI;AAEnC,aAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,aAAa,UAAU;AAAA,QACvB,OAAO,SAAS,UAAU,EAAE,WAAW,cAAc,CAAC;AAAA,QACtD,GAAI,gBAAgB,SAAY,EAAE,UAAU,YAAY,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACrG,GAAI,YAAY,SAAY,EAAE,MAAM,QAAQ,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAAI,CAAC;AAAA,QACzF,GAAI,sBAAsB,SACtB,EAAE,gBAAgB,kBAAkB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAC5E,CAAC;AAAA,QACL,GAAI,wBAAwB,SACxB,EAAE,kBAAkB,oBAAoB,UAAU,EAAE,WAAW,cAAc,CAAC,EAAE,IAChF,CAAC;AAAA,MACP;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,SAAS,UAAU,qBAAqB,aAAa,aAAa;AAAA,EACxF;AACA,SAAO;AACT;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -60,7 +60,8 @@ const defaultProps = {
|
|
|
60
60
|
},
|
|
61
61
|
destinationSoftDeletedItems: {},
|
|
62
62
|
onDestinationSoftDelete: () => {
|
|
63
|
-
}
|
|
63
|
+
},
|
|
64
|
+
getPreventMove: () => false
|
|
64
65
|
};
|
|
65
66
|
const DSShuttleV2PropTypes = {
|
|
66
67
|
...import_ds_utilities.globalAttributesPropTypes,
|
|
@@ -76,7 +77,56 @@ const DSShuttleV2PropTypes = {
|
|
|
76
77
|
DestinationHeader: import_ds_utilities.PropTypes.node.description("hello!").isRequired,
|
|
77
78
|
onDestinationDrilldown: import_ds_utilities.PropTypes.func.description("hello!").isRequired,
|
|
78
79
|
getId: import_ds_utilities.PropTypes.func.description("hello!").isRequired,
|
|
79
|
-
getLabel: import_ds_utilities.PropTypes.func.description("hello!").isRequired
|
|
80
|
+
getLabel: import_ds_utilities.PropTypes.func.description("hello!").isRequired,
|
|
81
|
+
sourceIsLoading: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
82
|
+
destinationIsLoading: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
83
|
+
sourceWithLoadMore: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
84
|
+
destinationWithLoadMore: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
85
|
+
sourceIsLoadingMore: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
86
|
+
destinationIsLoadingMore: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
87
|
+
onSourceLoadMore: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
88
|
+
}),
|
|
89
|
+
onDestinationLoadMore: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
90
|
+
}),
|
|
91
|
+
onSourceAdd: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
92
|
+
}),
|
|
93
|
+
onDestinationAdd: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
94
|
+
}),
|
|
95
|
+
onSourceRemove: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
96
|
+
}),
|
|
97
|
+
onDestinationRemove: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
98
|
+
}),
|
|
99
|
+
onSourceReorder: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
100
|
+
}),
|
|
101
|
+
onDestinationReorder: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
102
|
+
}),
|
|
103
|
+
sourceSoftDeletedItems: import_ds_utilities.PropTypes.object.description("hello!").defaultValue({}),
|
|
104
|
+
onSourceSoftDelete: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
105
|
+
}),
|
|
106
|
+
destinationSoftDeletedItems: import_ds_utilities.PropTypes.object.description("hello!").defaultValue({}),
|
|
107
|
+
onDestinationSoftDelete: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
108
|
+
}),
|
|
109
|
+
getPreventMove: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => false),
|
|
110
|
+
addDragAndDropFromSource: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
111
|
+
removeDragAndDropFromDestination: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
112
|
+
sourceItemProps: import_ds_utilities.PropTypes.object.description("hello!").defaultValue({}),
|
|
113
|
+
destinationItemProps: import_ds_utilities.PropTypes.object.description("hello!").defaultValue({}),
|
|
114
|
+
sourceShowSearchbar: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
115
|
+
destinationShowSearchbar: import_ds_utilities.PropTypes.bool.description("hello!").defaultValue(false),
|
|
116
|
+
onSourceOpenSearchbar: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
117
|
+
}),
|
|
118
|
+
onDesinationOpenSearchbar: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
119
|
+
}),
|
|
120
|
+
sourceFilterValue: import_ds_utilities.PropTypes.string.description("hello!").defaultValue(""),
|
|
121
|
+
destinationFilterValue: import_ds_utilities.PropTypes.string.description("hello!").defaultValue(""),
|
|
122
|
+
onSourceFilterChange: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
123
|
+
}),
|
|
124
|
+
onDestinationFilterChange: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => {
|
|
125
|
+
}),
|
|
126
|
+
getSubtitle: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => ""),
|
|
127
|
+
getIcon: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => ""),
|
|
128
|
+
getPreventDrilldown: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => false),
|
|
129
|
+
getCustomRenderer: import_ds_utilities.PropTypes.func.description("hello!").defaultValue(() => void 0)
|
|
80
130
|
};
|
|
81
131
|
const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes;
|
|
82
132
|
//# sourceMappingURL=react-desc-prop-types.js.map
|